---
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
	title="Astro Deploy"
	description="Launch your site with Astro Deploy: A cutting-edge solution featuring Astro.js, Docker, and Tailwind CSS for seamless, scalable web development.">
	<header class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8">
		<Heading level={1} classes="text-center text-zinc-900 dark:text-zinc-200">
			Deploy Your
			<span
				class="bg-gradient-to-r from-accent-600 via-accent-600 to-zinc-900 bg-clip-text text-transparent dark:from-accent dark:to-zinc-200">
				Astro.js
			</span>
			Site!
		</Heading>
		<p class="mx-auto mt-6 max-w-3xl text-center text-lg text-zinc-900/70 dark:text-zinc-400">
			Supercharge your website with the Astro Deploy boilerplate with Docker support for
			out-of-this-world web experiences. Launch today!
		</p>
		<div class="mt-8 flex justify-center">
			<a
				href="https://github.com/deployn/astro-deploy"
				class="inline-flex items-center justify-center gap-x-3 rounded-full bg-primary-600 px-8 py-4 text-center text-base text-sm font-medium ring-4 ring-transparent focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-base-50 dark:focus:ring-offset-zinc-800">
				<span>Get started!</span>
				<Icon name="line-md:chevron-right" class="size-3" />
			</a>
		</div>
	</header>

	<section
		class="mx-auto max-w-6xl px-8 py-12 text-base-900 dark:text-base-100 sm:px-6 lg:px-8 lg:py-16">
		<Heading
			level={2}
			classes="max-w-3xl text-center mx-auto pb-2 bg-clip-text bg-gradient-to-r from-primary-700 to-primary-500 dark:from-primary-500 dark:to-primary-300 text-transparent">
			Launch Stunning Websites Effortlessly with Astro Deploy
		</Heading>
		<p class="mx-auto mt-4 max-w-4xl text-center text-xl text-zinc-900/80 dark:text-zinc-400">
			Empower your success with Astro Deploy. Leverage cutting-edge technologies for seamless
			experiences.
		</p>
	</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
			class="absolute inset-0 my-6 rounded bg-gray-800 lg:-skew-y-1 xl:-mx-2 xl:my-20 xl:rotate-2">
		</div>
		<div
			class="absolute left-6 top-3 size-12 rotate-45 -skew-y-3 rounded-full bg-primary-400 lg:left-6 xl:top-14">
		</div>
		<div
			class="absolute -left-6 top-2 size-16 rotate-45 -skew-y-3 bg-primary-600 transition-all duration-500 hover:rounded-3xl xl:top-12">
		</div>

		<div class="relative flex flex-col items-center gap-8 md:flex-row md:gap-16">
			<div class="text-center md:w-7/12 md:text-left">
				<h2 class="mb-4 text-4xl font-black text-white">Deploy your site</h2>
				<p class="text-xl leading-relaxed text-gray-300">Start building amazing sites, today.</p>
			</div>
			<div class="flex justify-center md:w-5/12">
				<a
					href="https://github.com/deployn/astro-deploy"
					class="inline-flex items-center justify-center gap-2 rounded-full border border-primary-700 bg-primary-700 px-8 py-4 font-semibold leading-6 text-white hover:border-primary-600 hover:bg-primary-600 focus:ring focus:ring-primary-400 focus:ring-opacity-50 active:border-primary-700 active:bg-primary-700">
					<span>Get Started</span>
					<Icon name="line-md:chevron-right" class="size-3" />
				</a>
			</div>
		</div>
	</section>
</BaseLayout>
