mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrate widgets to use by props and slots

Browse Source
This commit is contained in:
prototypa
2023-01-08 19:39:57 -05:00
parent 842b17f493
commit 7e83be5a75
9 changed files with 360 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/widgets/CallToAction.astro
View File

@ -1,29 +1,54 @@
--- ---
import { Icon } from 'astro-icon'; import { Icon } from 'astro-icon';
interface CallToAction {
text: string;
href: string;
icon?: string;
}
export interface Props {
title?: string;
description?: string;
callToAction?: string | CallToAction;
}
const {
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
callToAction = await Astro.slots.render('callToAction'),
} = Astro.props;
--- ---
<section class="relative"> <section class="relative">
<div class="max-w-6xl mx-auto px-4 sm:px-6"> <div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-12 md:py-20"> <div class="py-12 md:py-20">
<div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none"> <div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
<h2 class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading"> {
<span>Astro</span> + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span> title && (
</h2> <h2
<p class="text-xl text-gray-600 dark:text-slate-400"> class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't set:html={title}
waste more time! :P />
</p> )
}
<div class="mt-6"> {subtitle && <p class="text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
<a {
class="btn btn-primary mb-4 sm:mb-0" typeof callToAction === 'string' ? (
href="https://github.com/onwidget/astrowind" <Fragment set:html={callToAction} />
target="_blank" ) : (
rel="noopener" callToAction &&
> callToAction.text &&
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template callToAction.href && (
</a> <div class="mt-6">
</div> <a class="btn btn-primary mb-4 sm:mb-0" href={callToAction.href} target="_blank" rel="noopener">
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
{callToAction.text}
</a>
</div>
)
)
}
</div> </div>
</div> </div>
</div> </div>

2
src/components/widgets/FAQs.astro
View File

@ -21,7 +21,7 @@ const {
<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20"> <div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
<div class="max-w-xl sm:mx-auto lg:max-w-2xl"> <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12"> <div class="max-w-xl mb-10 md:mx-auto text-center lg:max-w-2xl md:mb-12">
{ {
title && ( title && (
<h2 <h2

37
src/components/widgets/Features.astro
View File

@ -24,23 +24,28 @@ const {
<section class="scroll-mt-16" id="features"> <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="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"> {
{highlight && <p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase" set:html={highlight} />} (title || subtitle || highlight) && (
{ <div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
title && ( {highlight && (
<h2 <p
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading" class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase"
set:html={title} 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 && (
subtitle && ( <p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={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> }
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0"> <div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
{ {
items.map((subitems) => ( items.map((subitems) => (

97
src/components/widgets/Features2.astro
View File

@ -1,69 +1,64 @@
--- ---
import { Icon } from 'astro-icon'; import { Icon } from 'astro-icon';
const items = [ interface Item {
{ title: string;
title: 'Headers', description: string;
description: icon?: string;
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', }
icon: 'flat-color-icons:home',
}, export interface Props {
{ title?: string;
title: 'Footers', subtitle?: string;
description: highlight?: string;
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', items: Array<Item>;
icon: 'flat-color-icons:faq', }
},
{ const {
title: 'Features', title = await Astro.slots.render('title'),
description: subtitle = await Astro.slots.render('subtitle'),
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', highlight,
icon: 'flat-color-icons:video-projector', items = [],
}, responsiveGrid = { xs: 1, sm: 1, md: 2, lg: 4 }
{ } = Astro.props;
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',
},
];
--- ---
<section class="relative"> <section class="relative">
<div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div> <div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
<div class="relative max-w-6xl mx-auto px-4 sm:px-6"> <div class="relative max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12"> <div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
<div class="mb-8 text-center"> {
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Components</p> (title || subtitle || highlight) && (
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading"> <div class="mb-8 md:mx-auto text-center max-w-3xl">
Most used widgets {highlight && (
</h2> <p
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400"> class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase"
Provides frequently used components for building websites using Tailwind CSS set:html={highlight}
</p> />
</div> )}
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white"> {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 gap-6 grid-cols-${responsiveGrid?.xs || 1} sm:grid-cols-${responsiveGrid?.sm || 1} md:grid-cols-${responsiveGrid?.md || 2} lg:grid-cols-${responsiveGrid?.lg || 4} items-start my-12 dark:text-white`}>
{ {
items.map(({ title, description, icon }) => ( items.map(({ title, description, icon }) => (
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"> <div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-lg hover:shadow-md transition dark:border dark:border-slate-800">
<div class="flex items-center mb-4"> <div class="flex items-center mb-4">
<Icon name={icon} class="w-12 h-12" /> <Icon name={icon} class="w-10 h-10" />
<div class="ml-4 text-xl font-bold">{title}</div> <div class="ml-4 text-xl font-bold">{title}</div>
</div> </div>
<p class="text-gray-500 dark:text-gray-400 text-md">{description}</p> <p class="text-gray-500 dark:text-gray-400 text-md" set:html={description} />
</div> </div>
)) ))
} }

16
src/components/widgets/Hero.astro
View File

@ -11,7 +11,7 @@ interface CallToAction {
export interface Props { export interface Props {
title?: string; title?: string;
subtitle?: string; subtitle?: string;
callToAction1?: string | CallToAction; callToAction?: string | CallToAction;
callToAction2?: string | CallToAction; callToAction2?: string | CallToAction;
image?: string | any; // TODO: find HTMLElementProps image?: string | any; // TODO: find HTMLElementProps
} }
@ -19,7 +19,7 @@ export interface Props {
const { const {
title = await Astro.slots.render('title'), title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'), subtitle = await Astro.slots.render('subtitle'),
callToAction1 = await Astro.slots.render('callToAction1'), callToAction = await Astro.slots.render('callToAction'),
callToAction2 = await Astro.slots.render('callToAction2'), callToAction2 = await Astro.slots.render('callToAction2'),
image = await Astro.slots.render('image'), image = await Astro.slots.render('image'),
} = Astro.props; } = Astro.props;
@ -41,14 +41,14 @@ const {
{subtitle && <p class="text-xl text-gray-600 mb-8 dark:text-slate-400" set:html={subtitle} />} {subtitle && <p class="text-xl text-gray-600 mb-8 dark:text-slate-400" set:html={subtitle} />}
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4"> <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
{ {
callToAction1 && ( callToAction && (
<div class="flex w-full sm:w-auto"> <div class="flex w-full sm:w-auto">
{typeof callToAction1 === 'string' ? ( {typeof callToAction === 'string' ? (
<Fragment set:html={callToAction1} /> <Fragment set:html={callToAction} />
) : ( ) : (
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction1?.href} target="_blank" rel="noopener"> <a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
{callToAction1?.icon && <><Icon name={callToAction1.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}</>} {callToAction?.icon && <><Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}</>}
{callToAction1?.text} {callToAction?.text}
</a> </a>
)} )}
</div> </div>

66
src/components/widgets/Stats.astro
View File

@ -1,25 +1,55 @@
--- ---
interface Item {
name: string;
value: string;
}
export interface Props {
title?: string;
subtitle?: string;
highlight?: string;
items?: Array<Item>;
}
const {
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
highlight,
items = [],
} = Astro.props;
--- ---
<div class="px-4 py-8 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl"> <div class="px-4 py-8 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl">
{
(title || subtitle || highlight) && (
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
{highlight && (
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">
{highlight}
</p>
)}
{title && (
<h2
class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading"
set:html={title}
/>
)}
{subtitle && (
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
)}
</div>
)
}
<div class="grid grid-cols-2 row-gap-8 md:grid-cols-4"> <div class="grid grid-cols-2 row-gap-8 md:grid-cols-4">
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0"> {
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">132K</div> items.map(({ name, value }) => (
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base"> <div class="text-center md:border-r md:last:border-none dark:md:border-slate-500 mb-10 md:mb-0">
Downloads <div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">{value}</div>
</p> <p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
</div> {name}
<div class="text-center md:border-r dark:md:border-slate-500 mb-10 md:mb-0"> </p>
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">24.8K</div> </div>
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Stars</p> ))
</div> }
<div class="text-center md:border-r dark:md:border-slate-500 font-heading">
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500">10.3K</div>
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Forks</p>
</div>
<div class="text-center">
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl text-primary-500 font-heading">48.4K</div>
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Users</p>
</div>
</div> </div>
</div> </div>

135
src/components/widgets/Steps.astro
View File

@ -1,91 +1,72 @@
--- ---
import { Icon } from 'astro-icon'; import { Icon } from 'astro-icon';
import { Picture } from '@astrojs/image/components'; import { Picture } from '@astrojs/image/components';
interface Item {
title: string;
description?: string;
icon?: string;
}
export interface Props {
title?: string;
items: Array<Item>;
image?: string | any; // TODO: find HTMLElementProps
}
const {
title = await Astro.slots.render('title'),
items = [],
image = await Astro.slots.render('image'),
} = Astro.props;
--- ---
<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl"> <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
<div class="grid gap-6 row-gap-10 md:grid-cols-2"> <div class="grid gap-6 row-gap-10 md:grid-cols-2">
<div class="md:pb-6 md:pr-16"> <div class="md:pb-6 md:pr-16">
<h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading"> {title && <h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
Sed ac magna sit amet risus tristique interdum. hac. {
</h2> items &&
<div class="flex"> items.length &&
<div class="flex flex-col items-center mr-4"> items.map(({ title, description, icon }, index) => (
<div> <div class="flex">
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2"> <div class="flex flex-col items-center mr-4">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" /> <div>
{index !== items.length - 1 ? (
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
{icon && <Icon name={icon} class="w-6 h-6 text-primary-600 dark:text-slate-200" />}
</div>
) : (
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2 bg-primary-600">
<Icon name={icon} class="w-6 h-6 text-white dark:text-slate-200" />
</div>
)}
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500" />
</div>
<div class={`pt-1 ${index !== items.length - 1 ? 'pb-8' : ''}`}>
{title && <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300" set:html={title} />}
{description && <p class="text-gray-600 dark:text-slate-400" set:html={description} />}
</div>
</div> </div>
</div> ))
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div> }
</div>
<div class="pt-1 pb-8">
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
<p class="text-gray-600 dark:text-slate-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce
sit amet dui tellus.
</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
</div>
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
</div>
<div class="pt-1 pb-8">
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
<p class="text-gray-600 dark:text-slate-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla, sed porttitor est nibh at nulla.
</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
</div>
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
</div>
<div class="pt-1 pb-8">
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
<p class="text-gray-600 dark:text-slate-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
risus tempus nulla, sed porttitor est nibh at nulla.
</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div
class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2 bg-primary-600"
>
<Icon name="tabler:check" class="w-6 h-6 text-white dark:text-slate-200" />
</div>
</div>
</div>
<div class="pt-1">
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Ready!</p>
<p class="text-gray-600 dark:text-slate-400"></p>
</div>
</div>
</div> </div>
<div class="relative"> <div class="relative">
<Picture {
class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700" image &&
src={import('~/assets/images/astronaut.jpg')} (typeof image === 'string' ? (
widths={[400, 768]} <Fragment set:html={image} />
sizes="(max-width: 768px) 100vw, 432px" ) : (
alt="Astronaut" <Picture
aspectRatio="432:768" class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
/> widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 432px"
aspectRatio="432:768"
{...image}
/>
))
}
</div> </div>
</div> </div>
</section> </section>

2
src/components/widgets/Features3.astro → src/components/widgets/Steps2.astro
View File

@ -32,7 +32,7 @@ import { Icon } from 'astro-icon';
</div> </div>
</div> </div>
<div class="w-full lg:w-1/2 px-0 sm:px-8"> <div class="w-full lg:w-1/2 px-0 sm:px-8">
<ul class="space-y-12"> <ul class="space-y-10">
<li class="flex md:-mx-4"> <li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4"> <div class="pr-4 sm:pl-4">
<span <span

142
src/pages/index.astro
View File

@ -7,7 +7,7 @@ import Note from '~/components/widgets/Note.astro';
import Features from '~/components/widgets/Features.astro'; import Features from '~/components/widgets/Features.astro';
import Features2 from '~/components/widgets/Features2.astro'; import Features2 from '~/components/widgets/Features2.astro';
import Steps from '~/components/widgets/Steps.astro'; import Steps from '~/components/widgets/Steps.astro';
import Features3 from '~/components/widgets/Features3.astro'; import Steps2 from '~/components/widgets/Steps2.astro';
import HighlightedPosts from '~/components/blog/HighlightedPosts.astro'; import HighlightedPosts from '~/components/blog/HighlightedPosts.astro';
import FAQs from '~/components/widgets/FAQs.astro'; import FAQs from '~/components/widgets/FAQs.astro';
import Stats from '~/components/widgets/Stats.astro'; import Stats from '~/components/widgets/Stats.astro';
@ -21,15 +21,17 @@ const meta = {
--- ---
<Layout {meta}> <Layout {meta}>
<!-- Hero Widget ******************* -->
<Hero <Hero
callToAction1={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }} callToAction={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
callToAction2={{ text: 'Learn more', href: '#features' }} callToAction2={{ text: 'Learn more', href: '#features' }}
image={{ src: import('~/assets/images/hero.png'), alt: 'AstroWind Hero Image' }} image={{ src: import('~/assets/images/hero.png'), alt: 'AstroWind Hero Image' }}
> >
<Fragment slot="title"> <Fragment slot="title">
Your website with <span>Astro</span> + <span class="sm:whitespace-nowrap">Tailwind CSS</span> Your website with <span>Astro</span> + <span class="sm:whitespace-nowrap">Tailwind CSS</span>
</Fragment> </Fragment>
<Fragment slot="subtitle"> <Fragment slot="subtitle">
<span class="hidden sm:inline"> <span class="hidden sm:inline">
<span class="font-semibold underline decoration-wavy decoration-1 decoration-primary-600 underline-offset-2" <span class="font-semibold underline decoration-wavy decoration-1 decoration-primary-600 underline-offset-2"
@ -42,8 +44,12 @@ const meta = {
</Fragment> </Fragment>
</Hero> </Hero>
<!-- Note Widget ******************* -->
<Note /> <Note />
<!-- Features Widget *************** -->
<Features <Features
highlight="Features" highlight="Features"
title="What you get with AstroWind" title="What you get with AstroWind"
@ -92,15 +98,107 @@ const meta = {
]} ]}
/> />
<Steps /> <!-- Steps Widget ****************** -->
<Features2 /> <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"
}}
/>
<Features3 /> <!-- 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 <HighlightedPosts
title="Find out more content in our Blog" title="Find out more content in our Blog"
information={`The blog will be used to display AstroWind documentation. 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. 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. Astro is a very interesting technology. Thanks.
`} `}
@ -112,6 +210,8 @@ const meta = {
]} ]}
/> />
<!-- FAQs Widget ******************* -->
<FAQs <FAQs
title="Frequently Asked Questions" title="Frequently Asked Questions"
items={[ items={[
@ -152,7 +252,33 @@ const meta = {
]} ]}
/> />
<Stats /> <!-- Stats Widget ****************** -->
<CallToAction /> <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> </Layout>