Fix minimal detail
This commit is contained in:
prototypa
@ -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">
|
||||
|
||||
@ -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>
|
||||
))}
|
||||
|
||||
@ -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={[
|
||||
|
||||
Reference in New Issue
Block a user