From b21275bc9e774bccd0b238ce27cb68a00562a478 Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Sun, 8 Jan 2023 15:05:18 -0500
Subject: [PATCH] Fix minimal detail

---
 src/components/blog/HighlightedPosts.astro |  6 +-
 src/components/widgets/Features.astro      | 86 +++++++++-------------
 src/pages/index.astro                      | 55 ++++++++++++--
 3 files changed, 86 insertions(+), 61 deletions(-)

diff --git a/src/components/blog/HighlightedPosts.astro b/src/components/blog/HighlightedPosts.astro
index a8de544..d95a56e 100644
--- a/src/components/blog/HighlightedPosts.astro
+++ b/src/components/blog/HighlightedPosts.astro
@@ -9,7 +9,7 @@ export interface Props {
 	allPostsText?: string;
 	allPostsLink?: string | URL;
 	information?: string;
-	postsIds: string[];
+	postIds: string[];
 }
 
 const {
@@ -17,10 +17,10 @@ const {
 	allPostsText = 'View all posts',
 	allPostsLink = getBlogPermalink(),
 	information = await Astro.slots.render('information'),
-	postsIds = [],
+	postIds = [],
 } = Astro.props;
 
-const posts = await findPostsByIds(postsIds);
+const posts = await findPostsByIds(postIds);
 ---
 
 <section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
diff --git a/src/components/widgets/Features.astro b/src/components/widgets/Features.astro
index ab88f0f..461b7ee 100644
--- a/src/components/widgets/Features.astro
+++ b/src/components/widgets/Features.astro
@@ -1,61 +1,45 @@
 ---
 import { Icon } from 'astro-icon';
 
-const 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',
-		},
-	],
-];
+interface Item {
+	title: string;
+	description: string;
+	icon?: string;
+}
+
+export interface Props {
+	title?: string;
+	subtitle?: string;
+	highlight?: string;
+	items: Array<Array<Item>>;
+}
+
+const {
+	title = await Astro.slots.render('title'),
+	subtitle = await Astro.slots.render('subtitle'),
+	highlight,
+	items = [],
+} = Astro.props;
 ---
 
 <section class="scroll-mt-16" id="features">
 	<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
 		<div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
-			<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Features</p>
-			<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
-				What you get with <span class="whitespace-nowrap">AstroWind</span>
-			</h2>
-			<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
-				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa
-				quae.
-			</p>
+			{highlight && <p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase" set:html={highlight} />}
+			{
+				title && (
+					<h2
+						class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
+						set:html={title}
+					/>
+				)
+			}
+
+			{
+				subtitle && (
+					<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
+				)
+			}
 		</div>
 		<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
 			{
@@ -70,7 +54,7 @@ const items = [
 								</div>
 								<div>
 									<h3 class="mb-3 text-xl font-bold">{title}</h3>
-									<p class="text-gray-600 dark:text-slate-400">{description}</p>
+									<p class="text-gray-600 dark:text-slate-400" set:html={description} />
 								</div>
 							</div>
 						))}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5df3e95..c5a777c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -21,7 +21,6 @@ const meta = {
 ---
 
 <Layout {meta}>
-	<!-- Hero Widget -->
 
 	<Hero
 		callToAction1={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
@@ -45,7 +44,53 @@ const meta = {
 
 	<Note />
 
-	<Features />
+	<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 />
 
@@ -53,15 +98,13 @@ const meta = {
 
 	<Features3 />
 
-	<!-- HighlightedPosts Widget -->
-
 	<HighlightedPosts
 		title="Find out more content in our Blog"
 		information={`The blog will be 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.
 		`}
-		postsIds={[
+		postIds={[
 			'get-started-website-with-astro-tailwind-css.md',
 			'how-to-customize-astrowind-to-your-brand.md',
 			'useful-resources-to-create-websites.md',
@@ -69,8 +112,6 @@ const meta = {
 		]}
 	/>
 
-	<!-- FAQs Widget -->
-
 	<FAQs
 		title="Frequently Asked Questions"
 		items={[