refactor(index): add featuresection component
This commit is contained in:
Jewgeni Lewash
parent
665da2a1a6
commit
ee3cd96573
29
src/components/FeatureSection.astro
Normal file
29
src/components/FeatureSection.astro
Normal file
@ -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>
|
||||
@ -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"
|
||||
{
|
||||
features.map((feature, index) => (
|
||||
<FeatureSection
|
||||
title={feature.title}
|
||||
description={feature.description}
|
||||
image={feature.image}
|
||||
isReversed={index % 2 !== 0}
|
||||
/>
|
||||
</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>
|
||||
))
|
||||
}
|
||||
|
||||
<section class="container relative mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-6xl">
|
||||
<div
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user