From ee3cd96573fddebdd138218c7bc70ead404dfbd2 Mon Sep 17 00:00:00 2001
From: Jewgeni Lewash <j.lewash@gmail.com>
Date: Sat, 6 Apr 2024 22:07:26 +0200
Subject: [PATCH] refactor(index): add featuresection component

---
 src/components/FeatureSection.astro |  29 ++++++
 src/pages/index.astro               | 152 ++++++++--------------------
 2 files changed, 73 insertions(+), 108 deletions(-)
 create mode 100644 src/components/FeatureSection.astro

diff --git a/src/components/FeatureSection.astro b/src/components/FeatureSection.astro
new file mode 100644
index 0000000..7492e8c
--- /dev/null
+++ b/src/components/FeatureSection.astro
@@ -0,0 +1,29 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+	title: string;
+	description: string;
+	image: ImageMetadata;
+	isReversed?: boolean;
+}
+
+const { title, description, image, isReversed = false } = Astro.props;
+---
+
+<section class="mx-auto max-w-7xl px-8 py-16 lg:py-24">
+	<div
+		class={`grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24 ${isReversed ? 'lg:flex-row-reverse' : ''}`}>
+		<div class={`flex items-center justify-center ${isReversed ? 'lg:order-2' : ''}`}>
+			<Image class="mx-auto max-h-96 w-full rounded-xl shadow-lg" src={image} alt={title} />
+		</div>
+		<div class={`flex flex-col gap-y-4 ${isReversed ? 'lg:order-1' : ''}`}>
+			<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
+				{title}
+			</h2>
+			<p class="text-lg text-zinc-800 dark:text-zinc-300">
+				{description}
+			</p>
+		</div>
+	</div>
+</section>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f33d2a4..74bd9d7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,14 +1,47 @@
 ---
-import { Image } from 'astro:assets';
 import { Icon } from 'astro-icon/components';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import Heading from '@/components/ui/Heading.astro';
+import FeatureSection from '@/components/FeatureSection.astro';
 
 import index1 from '@/assets/images/index-1.png';
 import index2 from '@/assets/images/index-2.png';
 import index3 from '@/assets/images/index-3.png';
 import index4 from '@/assets/images/index-4.png';
 import index5 from '@/assets/images/index-5.png';
+
+const features = [
+	{
+		title: 'Revolutionize Website Development',
+		description:
+			'Astro Deploy revolutionizes development with Astro.js 4 and Docker for scalable solutions.',
+		image: index1,
+	},
+	{
+		title: 'Accelerate Website Development with Astro Deploy',
+		description:
+			'Astro Deploy expedites website development with pre-configured Astro.js boilerplate, Docker, and Tailwind CSS, enabling businesses to launch their online presence swiftly and engage customers effectively.',
+		image: index2,
+	},
+	{
+		title: 'Docker Integration',
+		description:
+			'The Docker integration ensures smooth deployment and scalability of your Astro.js 4 project. Embrace containerization technology to streamline your development process and enhance efficiency.',
+		image: index3,
+	},
+	{
+		title: 'Tailwind CSS Styling',
+		description:
+			'Utilizing the power of Tailwind CSS, crafting visually appealing designs that are responsive and user-friendly. Bring your vision to life with customizable styles that reflect your brand identity.',
+		image: index4,
+	},
+	{
+		title: 'MDX Blog Setup',
+		description:
+			"Enhance your website's content management capabilities with MDX Blog integration. Set up an MDX-powered blog for seamless content creation and management, empowering you to engage your audience effectively.",
+		image: index5,
+	},
+];
 ---
 
 <BaseLayout
@@ -50,113 +83,16 @@ import index5 from '@/assets/images/index-5.png';
 		</p>
 	</section>
 
-	<section class="mx-auto max-w-7xl px-8 py-16 lg:py-24">
-		<div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
-			<div class="flex items-center justify-center">
-				<Image
-					class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
-					src={index1}
-					alt="Abstract Tech"
-				/>
-			</div>
-			<div class="flex flex-col gap-y-4">
-				<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
-					Revolutionize Website Development
-				</h2>
-				<p class="text-lg text-zinc-800 dark:text-zinc-300">
-					Astro Deploy revolutionizes development with Astro.js 4 and Docker for scalable solutions.
-				</p>
-			</div>
-		</div>
-	</section>
-
-	<section class="mx-auto max-w-7xl px-8 py-16 lg:py-24">
-		<div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
-			<div class="flex items-center justify-center lg:order-2">
-				<Image
-					class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
-					src={index2}
-					alt="Abstract Tech"
-				/>
-			</div>
-			<div class="flex flex-col gap-y-4 lg:order-1">
-				<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
-					Accelerate Website Development with Astro Deploy
-				</h2>
-				<p class="text-lg text-zinc-800 dark:text-zinc-300">
-					Astro Deploy expedites website development with pre-configured Astro.js boilerplate,
-					Docker, and Tailwind CSS, enabling businesses to launch their online presence swiftly and
-					engage customers effectively.
-				</p>
-			</div>
-		</div>
-	</section>
-
-	<section class="mx-auto max-w-7xl px-8 py-16 lg:py-24">
-		<div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
-			<div class="flex items-center justify-center">
-				<Image
-					class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
-					src={index3}
-					alt="Abstract Tech"
-				/>
-			</div>
-			<div class="flex flex-col gap-y-4">
-				<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
-					Docker Integration
-				</h2>
-				<p class="text-lg text-zinc-800 dark:text-zinc-300">
-					The Docker integration ensures smooth deployment and scalability of your Astro.js 4
-					project. Embrace containerization technology to streamline your development process and
-					enhance efficiency.
-				</p>
-			</div>
-		</div>
-	</section>
-
-	<section class="mx-auto max-w-7xl px-8 py-16 lg:py-24">
-		<div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
-			<div class="flex items-center justify-center lg:order-2">
-				<Image
-					class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
-					src={index4}
-					alt="Abstract Tech"
-				/>
-			</div>
-			<div class="flex flex-col gap-y-4 lg:order-1">
-				<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
-					Tailwind CSS Styling
-				</h2>
-				<p class="text-lg text-zinc-800 dark:text-zinc-300">
-					Utilizing the power of Tailwind CSS, crafting visually appealing designs that are
-					responsive and user-friendly. Bring your vision to life with customizable styles that
-					reflect your brand identity.
-				</p>
-			</div>
-		</div>
-	</section>
-
-	<section class="mx-auto max-w-7xl px-8 py-16 lg:py-24">
-		<div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
-			<div class="flex items-center justify-center">
-				<Image
-					class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
-					src={index5}
-					alt="Abstract Tech"
-				/>
-			</div>
-			<div class="flex flex-col gap-y-4">
-				<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
-					MDX Blog Setup
-				</h2>
-				<p class="text-lg text-zinc-800 dark:text-zinc-300">
-					Enhance your website's content management capabilities with MDX Blog integration. Set up
-					an MDX-powered blog for seamless content creation and management, empowering you to engage
-					your audience effectively.
-				</p>
-			</div>
-		</div>
-	</section>
+	{
+		features.map((feature, index) => (
+			<FeatureSection
+				title={feature.title}
+				description={feature.description}
+				image={feature.image}
+				isReversed={index % 2 !== 0}
+			/>
+		))
+	}
 
 	<section class="container relative mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-6xl">
 		<div