---
import { SITE } from '~/config.mjs';
import Layout from '~/layouts/PageLayout.astro';

import Hero from '~/components/widgets/Hero.astro';
import Note from '~/components/widgets/Note.astro';
import Features from '~/components/widgets/Features.astro';
import Features2 from '~/components/widgets/Features2.astro';
import Steps from '~/components/widgets/Steps.astro';
import Steps2 from '~/components/widgets/Steps2.astro';
import HighlightedPosts from '~/components/blog/HighlightedPosts.astro';
import FAQs from '~/components/widgets/FAQs.astro';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';

const meta = {
	title: SITE.title,
	description: SITE.description,
	dontUseTitleTemplate: true,
};
---

<Layout {meta}>
	<!-- Hero Widget ******************* -->

	<Hero
		callToAction={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
		callToAction2={{ text: 'Learn more', href: '#features' }}
		image={{ src: import('~/assets/images/hero.png'), alt: 'AstroWind Hero Image' }}
	>
		<Fragment slot="title">
			Your website with <span>Astro</span> + <span class="sm:whitespace-nowrap">Tailwind CSS</span>
		</Fragment>

		<Fragment slot="subtitle">
			<span class="hidden sm:inline">
				<span class="font-semibold underline decoration-wavy decoration-1 decoration-primary-600 underline-offset-2"
					>AstroWind</span
				> is a free, production-ready template to start your new website using <em>Astro</em> + <em>Tailwind CSS</em
				>.</span
			>
			<span class="block mb-1 sm:hidden font-bold text-primary-600">AstroWind: Free template.</span> Suitable for Startups,
			Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
		</Fragment>
	</Hero>

	<!-- Note Widget ******************* -->

	<Note />

	<!-- Features Widget *************** -->

	<Features
		highlight="Features"
		title="What you get with AstroWind"
		subtitle="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa quae."
		items={[
			[
				{
					title: 'Astro + Tailwind CSS Integration',
					description:
						'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
					icon: 'tabler:brand-tailwind',
				},
				{
					title: 'Ready-to-use Components',
					description:
						'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
					icon: 'tabler:components',
				},
				{
					title: 'Best Practices',
					description:
						'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
					icon: 'tabler:list-check',
				},
			],
			[
				{
					title: 'Excellent Page Speed',
					description:
						'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
					icon: 'tabler:rocket',
				},
				{
					title: 'Search Engine Optimization (SEO)',
					description:
						'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
					icon: 'tabler:arrows-right-left',
				},
				{
					title: 'Open to new ideas and contributions',
					description:
						'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
					icon: 'tabler:bulb',
				},
			],
		]}
	/>

	<!-- Steps Widget ****************** -->

	<Steps
		title="Sed ac magna sit amet risus tristique interdum. hac."
		items={[
			{
				title: 'Step 1',
				description:
					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus.',
				icon: 'tabler:arrow-down',
			},
			{
				title: 'Step 2',
				description:
					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla.',
				icon: 'tabler:arrow-down',
			},
			{
				title: 'Step 3',
				description:
					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mirisus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus.',
				icon: 'tabler:arrow-down',
			},
			{
				title: 'Ready!',
				icon: 'tabler:check',
			},
		]}
		image={{
			src: import('~/assets/images/astronaut.jpg'),
			alt: "Steps image"
		}}
	/>

	<!-- Features2 Widget ************** -->

	<Features2
		title="Most used widgets"
		subtitle="Provides frequently used components for building websites using Tailwind CSS"
		highlight="Components"
		items={[
			{
				title: 'Headers',
				description:
					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
				icon: 'flat-color-icons:home',
			},
			{
				title: 'Heros',
				description:
					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
				icon: 'flat-color-icons:voice-presentation',
			},
			{
				title: 'Features',
				description:
					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
				icon: 'flat-color-icons:video-projector',
			},
			{
				title: 'Content',
				description:
					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
				icon: 'flat-color-icons:video-projector',
			},
			{
				title: 'Call-to-Action',
				description:
					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
				icon: 'flat-color-icons:video-projector',
			},
			{
				title: 'Pricing',
				description:
					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
				icon: 'flat-color-icons:calculator',
			},
			{
				title: 'Testimonial',
				description:
					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
				icon: 'flat-color-icons:voice-presentation',
			},
			{
				title: 'Footers',
				description:
					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
				icon: 'flat-color-icons:faq',
			},
		]}
	/>

	<!-- Steps2 Widget ***************** -->

	<Steps2 />

	<!-- HighlightedPosts Widget ******* -->

	<HighlightedPosts
		title="Find out more content in our Blog"
		information={`The blog is used to display AstroWind documentation.
			Each new article will be an important step that you will need to know to be an expert in creating a website using Astro + Tailwind CSS.
			Astro is a very interesting technology. Thanks.
		`}
		postIds={[
			'get-started-website-with-astro-tailwind-css.md',
			'how-to-customize-astrowind-to-your-brand.md',
			'useful-resources-to-create-websites.md',
			'astrowind-template-in-depth.md',
		]}
	/>

	<!-- FAQs Widget ******************* -->

	<FAQs
		title="Frequently Asked Questions"
		items={[
			[
				{
					question: 'What do I need to start?',
					answer:
						'Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds. Many say exploration is part of our destiny, but it’s actually our duty to future generations.',
				},
				{
					question: 'How to install the Astro + Tailwind CSS template?',
					answer:
						"Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.",
				},
				{
					question: "What's something that you don't understand?",
					answer:
						"A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear.",
				},
			],
			[
				{
					question: "What's an example of when you changed your mind?",
					answer:
						"Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on wheels.",
				},
				{
					question: 'What is something that you would like to try again?',
					answer:
						"A business big enough that it could be listed on the NASDAQ goes belly up. Disappears! It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.",
				},
				{
					question: 'If you could only ask one question to each person you meet, what would that question be?',
					answer:
						"This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well, that's certainly good to know. About four years. I got tired of hearing how young I looked.",
				},
			],
		]}
	/>

	<!-- Stats Widget ****************** -->

	<Stats
		items={[
			{ name: 'Downloads', value: '132K' },
			{ name: 'Stars', value: '24.8K' },
			{ name: 'Forks', value: '10.3K' },
			{ name: 'Users', value: '48.4K' },
		]}
	/>

	<!-- CallToAction Widget *********** -->

	<CallToAction
		callToAction={{
			text: 'Get template',
			href: 'https://github.com/onwidget/astrowind',
			icon: 'tabler:download',
		}}
	>
		<Fragment slot="title">
			Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
		</Fragment>

		<Fragment slot="subtitle">
			Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
			waste more time! :P
		</Fragment>
	</CallToAction>
</Layout>