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

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

@ -1,29 +1,54 @@
---
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">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<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">
<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>
</h2>
<p class="text-xl text-gray-600 dark:text-slate-400">
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
</p>
{
title && (
<h2
class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading"
set:html={title}
/>
)
}
{subtitle && <p class="text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
{
typeof callToAction === 'string' ? (
<Fragment set:html={callToAction} />
) : (
callToAction &&
callToAction.text &&
callToAction.href && (
<div class="mt-6">
<a
class="btn btn-primary mb-4 sm:mb-0"
href="https://github.com/onwidget/astrowind"
target="_blank"
rel="noopener"
>
<Icon name="tabler:download" class="w-5 h-5 mr-1 -ml-1.5" /> Get template
<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>

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="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 && (
<h2

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

@ -24,23 +24,28 @@ const {
<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">
{highlight && <p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase" set:html={highlight} />}
{
title && (
(title || subtitle || highlight) && (
<div class="mb-10 md:mx-auto 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 && (
<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} />
)}
</div>
)
}
</div>
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
{
items.map((subitems) => (

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

@ -1,69 +1,64 @@
---
import { Icon } from 'astro-icon';
const 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: 'Footers',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
icon: 'flat-color-icons:faq',
},
{
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: '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',
},
];
interface Item {
title: string;
description: string;
icon?: 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 = [],
responsiveGrid = { xs: 1, sm: 1, md: 2, lg: 4 }
} = Astro.props;
---
<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="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="mb-8 text-center">
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Components</p>
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
Most used widgets
</h2>
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">
Provides frequently used components for building websites using Tailwind CSS
</p>
{
(title || subtitle || highlight) && (
<div class="mb-8 md:mx-auto text-center max-w-3xl">
{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 gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
)
}
<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 }) => (
<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">
<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>
<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>
))
}

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

@ -11,7 +11,7 @@ interface CallToAction {
export interface Props {
title?: string;
subtitle?: string;
callToAction1?: string | CallToAction;
callToAction?: string | CallToAction;
callToAction2?: string | CallToAction;
image?: string | any; // TODO: find HTMLElementProps
}
@ -19,7 +19,7 @@ export interface Props {
const {
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
callToAction1 = await Astro.slots.render('callToAction1'),
callToAction = await Astro.slots.render('callToAction'),
callToAction2 = await Astro.slots.render('callToAction2'),
image = await Astro.slots.render('image'),
} = Astro.props;
@ -41,14 +41,14 @@ const {
{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">
{
callToAction1 && (
callToAction && (
<div class="flex w-full sm:w-auto">
{typeof callToAction1 === 'string' ? (
<Fragment set:html={callToAction1} />
{typeof callToAction === 'string' ? (
<Fragment set:html={callToAction} />
) : (
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction1?.href} target="_blank" rel="noopener">
{callToAction1?.icon && <><Icon name={callToAction1.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}</>}
{callToAction1?.text}
<a class="btn btn-primary sm:mb-0 w-full" 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>

60
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">
{
(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="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 }) => (
<div class="text-center md:border-r md:last:border-none 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">{value}</div>
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
Downloads
{name}
</p>
</div>
<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">24.8K</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>

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

@ -1,91 +1,72 @@
---
import { Icon } from 'astro-icon';
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">
<div class="grid gap-6 row-gap-10 md:grid-cols-2">
<div class="md:pb-6 md:pr-16">
<h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading">
Sed ac magna sit amet risus tristique interdum. hac.
</h2>
{title && <h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
{
items &&
items.length &&
items.map(({ title, description, icon }, index) => (
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
{index !== items.length - 1 ? (
<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 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>
{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 class="relative">
{
image &&
(typeof image === 'string' ? (
<Fragment set:html={image} />
) : (
<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"
src={import('~/assets/images/astronaut.jpg')}
widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 432px"
alt="Astronaut"
aspectRatio="432:768"
{...image}
/>
))
}
</div>
</div>
</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 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">
<div class="pr-4 sm:pl-4">
<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 Features2 from '~/components/widgets/Features2.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 FAQs from '~/components/widgets/FAQs.astro';
import Stats from '~/components/widgets/Stats.astro';
@ -21,15 +21,17 @@ const meta = {
---
<Layout {meta}>
<!-- Hero Widget ******************* -->
<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' }}
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"
@ -42,8 +44,12 @@ const meta = {
</Fragment>
</Hero>
<!-- Note Widget ******************* -->
<Note />
<!-- Features Widget *************** -->
<Features
highlight="Features"
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
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.
Astro is a very interesting technology. Thanks.
`}
@ -112,6 +210,8 @@ const meta = {
]}
/>
<!-- FAQs Widget ******************* -->
<FAQs
title="Frequently Asked Questions"
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>