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

Use Prettier

Browse Source
This commit is contained in:
prototypa
2022-09-11 03:51:55 -04:00
parent 51362812c8
commit d909adb658
52 changed files with 1487 additions and 1447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,30 +1,30 @@
---
import { Icon } from "astro-icon";
import { Icon } from 'astro-icon';
---
<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>
<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>
<div class="mt-6">
<a
class="btn text-white bg-primary-600 hover:bg-primary-800 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>
</div>
</div>
</div>
</div>
<div class="mt-6">
<a
class="btn text-white bg-primary-600 hover:bg-primary-800 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>
</div>
</div>
</div>
</div>
</section>

38
src/components/widgets/Error404.astro
View File

@ -1,24 +1,24 @@
---
import { getHomePermalink } from "~/utils/permalinks";
import { getHomePermalink } from '~/utils/permalinks';
---
<section class="flex items-center h-full p-16">
<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
<div class="max-w-md text-center">
<h2 class="mb-8 font-bold text-9xl">
<span class="sr-only">Error</span>
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">404</span>
</h2>
<p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
<p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
But dont worry, you can find plenty of other things on our homepage.
</p>
<a
rel="noopener noreferrer"
href={getHomePermalink()}
class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
>Back to homepage
</a>
</div>
</div>
<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
<div class="max-w-md text-center">
<h2 class="mb-8 font-bold text-9xl">
<span class="sr-only">Error</span>
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">404</span>
</h2>
<p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
<p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
But dont worry, you can find plenty of other things on our homepage.
</p>
<a
rel="noopener noreferrer"
href={getHomePermalink()}
class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
>Back to homepage</a
>
</div>
</div>
</section>

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

@ -1,71 +1,71 @@
---
import { Icon } from "astro-icon";
import { Icon } from 'astro-icon';
const 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.
[
{
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.
},
{
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 completely 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 really like to try again?",
answer: `A business big enough that it could be listed on the NASDAQ goes belly up. Disappears!
},
{
question: "What's something that you completely 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 really 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.`,
},
],
},
{
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.`,
},
],
];
---
<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">
<h2 class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading">
Frequently Asked Questions
</h2>
</div>
</div>
<div class="max-w-screen-xl sm:mx-auto">
<div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
{
items.map((subitems) => (
<div class="space-y-8">
{subitems.map(({ question, answer }) => (
<div>
<p class="mb-4 text-xl font-bold">
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block icon-bold" />
{question}
</p>
{answer.split("\n\n").map((paragraph) => (
<p class="text-gray-700 dark:text-gray-400 mb-2" set:html={paragraph} />
))}
</div>
))}
</div>
))
}
</div>
</div>
<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">
<h2 class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading">
Frequently Asked Questions
</h2>
</div>
</div>
<div class="max-w-screen-xl sm:mx-auto">
<div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-x-16 md:grid-cols-2">
{
items.map((subitems) => (
<div class="space-y-8">
{subitems.map(({ question, answer }) => (
<div>
<p class="mb-4 text-xl font-bold">
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block icon-bold" />
{question}
</p>
{answer.split('\n\n').map((paragraph) => (
<p class="text-gray-700 dark:text-gray-400 mb-2" set:html={paragraph} />
))}
</div>
))}
</div>
))
}
</div>
</div>
</div>

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

@ -1,73 +1,73 @@
---
import { Icon } from "astro-icon";
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",
},
{
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',
},
];
---
<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>
</div>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 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="flex items-center mb-4">
<Icon name={icon} class="w-12 h-12" />
<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>
</div>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 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="flex items-center mb-4">
<Icon name={icon} class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">{title}</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">{description}</p>
</div>
))
}
</div>
</div>
</div>
<div class="ml-4 text-xl font-bold">{title}</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">{description}</p>
</div>
))
}
</div>
</div>
</div>
</section>

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

@ -1,88 +1,88 @@
---
const items = [
[
{
title: "Integration with Tailwind CSS",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
},
{
title: "Ready-to-use Components",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
},
{
title: "Best Practices",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
},
],
[
{
title: "Excellent Page Speed",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
},
{
title: "Frequently updated",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.",
},
{
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.",
},
],
[
{
title: 'Integration with Tailwind CSS',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
},
{
title: 'Ready-to-use Components',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
},
{
title: 'Best Practices',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
},
],
[
{
title: 'Excellent Page Speed',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
},
{
title: 'Frequently updated',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
},
{
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.',
},
],
];
---
<section class="scroll-mt-16" id="features">
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-primary-50 dark:bg-slate-800">
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
<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's interesting about <span
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 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>
</div>
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
{
items.map((subitems) => (
<div class="space-y-8 sm:px-8">
{subitems.map(({ title, description }) => (
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-primary-600" width="64" height="64" rx="32" />
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z" />
<path
class="stroke-current text-primary-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
/>
</g>
</g>
</svg>
</div>
</div>
<div>
<h3 class="mb-3 text-xl font-bold">{title}</h3>
<p>{description}</p>
</div>
</div>
))}
</div>
))
}
</div>
</div>
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-primary-50 dark:bg-slate-800">
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
<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's interesting about <span
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 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>
</div>
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
{
items.map((subitems) => (
<div class="space-y-8 sm:px-8">
{subitems.map(({ title, description }) => (
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-primary-600" width="64" height="64" rx="32" />
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z" />
<path
class="stroke-current text-primary-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
/>
</g>
</g>
</svg>
</div>
</div>
<div>
<h3 class="mb-3 text-xl font-bold">{title}</h3>
<p>{description}</p>
</div>
</div>
))}
</div>
))
}
</div>
</div>
</section>

166
src/components/widgets/Features3.astro
View File

@ -1,90 +1,90 @@
---
import { Icon } from "astro-icon";
import { Icon } from 'astro-icon';
---
<section>
<div class="max-w-6xl mx-auto px-4 sm:px-6 overflow-hidden">
<div class="py-12 md:py-20">
<div class="py-4 sm:py-6 lg:py-8">
<div class="flex flex-wrap md:-mx-8">
<div class="w-full lg:w-1/2 px-0 sm:px-8">
<div class="mb-12 lg:mb-0 pb-12 lg:pb-0 border-b lg:border-b-0">
<h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">
Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.
</h2>
<div class="max-w-6xl mx-auto px-4 sm:px-6 overflow-hidden">
<div class="py-12 md:py-20">
<div class="py-4 sm:py-6 lg:py-8">
<div class="flex flex-wrap md:-mx-8">
<div class="w-full lg:w-1/2 px-0 sm:px-8">
<div class="mb-12 lg:mb-0 pb-12 lg:pb-0 border-b lg:border-b-0">
<h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">
Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.
</h2>
<p class="mb-8 text-xl 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>
<p class="mb-8 text-xl 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 class="w-full">
<a
class="btn text-white bg-primary-600 hover:bg-primary-800 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>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-0 sm:px-8">
<ul class="space-y-12">
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<span
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
>
1
</span>
</div>
<div class="px-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Responsive Elements</h3>
<p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
lobortis, mi risus tempus nulla.
</p>
</div>
</li>
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<span
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
>
2
</span>
</div>
<div class="px-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Flexible Team</h3>
<p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
lobortis, mi risus tempus nulla.
</p>
</div>
</li>
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<span
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
>
3
</span>
</div>
<div class="px-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Ecologic Software</h3>
<p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
lobortis, mi risus tempus nulla.
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="w-full">
<a
class="btn text-white bg-primary-600 hover:bg-primary-800 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>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-0 sm:px-8">
<ul class="space-y-12">
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<span
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
>
1</span
>
</div>
<div class="px-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Responsive Elements</h3>
<p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
lobortis, mi risus tempus nulla.
</p>
</div>
</li>
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<span
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
>
2</span
>
</div>
<div class="px-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Flexible Team</h3>
<p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
lobortis, mi risus tempus nulla.
</p>
</div>
</li>
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<span
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-50 text-primary-600"
>
3</span
>
</div>
<div class="px-4">
<h3 class="mb-4 text-xl font-semibold font-heading">Ecologic Software</h3>
<p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
lobortis, mi risus tempus nulla.
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>

440
src/components/widgets/Footer.astro
View File

@ -1,225 +1,223 @@
---
import { Icon } from "astro-icon";
import { getHomePermalink } from "~/utils/permalinks";
import { Icon } from 'astro-icon';
import { getHomePermalink } from '~/utils/permalinks';
---
<footer>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12 border-t border-gray-200 dark:border-slate-800">
<div class="col-span-12 lg:col-span-4">
<div class="mb-2">
<a class="inline-block font-bold text-xl" href={getHomePermalink()}>AstroWind</a>
</div>
<div class="text-sm text-gray-600">
<a
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
href="#"
>Terms
</a> ·
<a
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
href="#"
>Privacy Policy
</a>
</div>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Product</div>
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Features
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Security
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Team
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Enterprise
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Customer stories
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Pricing
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Resources
</a>
</li>
</ul>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Platform</div>
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Developer API
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Partners
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Atom
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Electron
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>GitHub Desktop
</a>
</li>
</ul>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Support</div>
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Docs
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Community Forum
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Professional Services
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Skills
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Status
</a>
</li>
</ul>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Company</div>
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>About
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Blog
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Careers
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Press
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Inclusion
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Social Impact
</a>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Shop
</a>
</li>
</ul>
</div>
</div>
<div class="md:flex md:items-center md:justify-between py-6 md:py-8">
<ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0">
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Twitter"
href="#"
>
<Icon name="tabler:brand-twitter" class="w-5 h-5" />
</a>
</li>
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Instagram"
href="#"
>
<Icon name="tabler:brand-instagram" class="w-5 h-5" />
</a>
</li>
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Facebook"
href="#"
>
<Icon name="tabler:brand-facebook" class="w-5 h-5" />
</a>
</li>
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="RSS"
href="/rss.xml"
>
<Icon name="tabler:rss" class="w-5 h-5" />
</a>
</li>
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Github"
href="https://github.com/onwidget/astrowind"
>
<Icon name="tabler:brand-github" class="w-5 h-5" />
</a>
</li>
</ul>
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
<span
class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]"
>
</span>
Made by <a class="text-blue-600 hover:underline dark:text-gray-200" href="https://onwidget.com/"> onWidget</a> ·
All rights reserved.
</div>
</div>
</div>
<footer class="border-t border-gray-200 dark:border-slate-800">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
<div class="col-span-12 lg:col-span-4">
<div class="mb-2">
<a class="inline-block font-bold text-xl" href={getHomePermalink()}>AstroWind</a>
</div>
<div class="text-sm text-gray-600">
<a
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
href="#">Terms</a
> ·
<a
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
href="#">Privacy Policy</a
>
</div>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Product</div>
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Features</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Security</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Team</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Enterprise</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Customer stories</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Pricing</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Resources</a
>
</li>
</ul>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Platform</div>
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Developer API</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Partners</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Atom</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Electron</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>GitHub Desktop</a
>
</li>
</ul>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Support</div>
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Docs</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Community Forum</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Professional Services</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Skills</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Status</a
>
</li>
</ul>
</div>
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Company</div>
<ul class="text-sm">
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>About</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Blog</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Careers</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Press</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Inclusion</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Social Impact</a
>
</li>
<li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
>Shop</a
>
</li>
</ul>
</div>
</div>
<div class="md:flex md:items-center md:justify-between py-6 md:py-8">
<ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0">
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Twitter"
href="#"
>
<Icon name="tabler:brand-twitter" class="w-5 h-5" />
</a>
</li>
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Instagram"
href="#"
>
<Icon name="tabler:brand-instagram" class="w-5 h-5" />
</a>
</li>
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Facebook"
href="#"
>
<Icon name="tabler:brand-facebook" class="w-5 h-5" />
</a>
</li>
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="RSS"
href="/rss.xml"
>
<Icon name="tabler:rss" class="w-5 h-5" />
</a>
</li>
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Github"
href="https://github.com/onwidget/astrowind"
>
<Icon name="tabler:brand-github" class="w-5 h-5" />
</a>
</li>
</ul>
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
<span
class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]"
>
</span>
Made by <a class="text-blue-600 hover:underline dark:text-gray-200" href="https://onwidget.com/"> onWidget</a> ·
All rights reserved.
</div>
</div>
</div>
</footer>

146
src/components/widgets/Header.astro
View File

@ -1,81 +1,79 @@
---
import { Icon } from "astro-icon";
import Logo from "~/components/atoms/Logo.astro";
import ToggleTheme from "~/components/core/ToggleTheme.astro";
import ToggleMenu from "~/components/core/ToggleMenu.astro";
import { Icon } from 'astro-icon';
import Logo from '~/components/atoms/Logo.astro';
import ToggleTheme from '~/components/core/ToggleTheme.astro';
import ToggleMenu from '~/components/core/ToggleMenu.astro';
import { getPermalink, getBlogPermalink, getHomePermalink } from "~/utils/permalinks";
import { getPermalink, getBlogPermalink, getHomePermalink } from '~/utils/permalinks';
---
<header
class="sticky top-0 z-40 flex-none mx-auto w-full bg-white md:bg-white/90 dark:bg-slate-900 dark:md:bg-slate-900/90 md:backdrop-blur-sm border-b dark:border-b-0"
class="sticky top-0 z-40 flex-none mx-auto w-full bg-white md:bg-white/90 dark:bg-slate-900 dark:md:bg-slate-900/90 md:backdrop-blur-sm border-b dark:border-b-0"
>
<div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
<div class="flex justify-between">
<a class="flex items-center" href={getHomePermalink()}>
<Logo />
</a>
<div class="flex items-center md:hidden">
<ToggleTheme />
<ToggleMenu />
</div>
</div>
<nav
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-screen md:h-auto"
aria-label="Main navigation"
id="menu"
>
<ul
class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed text-xl md:text-base"
>
<li>
<a
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href="#"
>Pages
</a>
</li>
<li>
<a
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href={getPermalink("useful-resources-to-create-websites", "post")}
>Resources
</a>
</li>
<li>
<a
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href={getBlogPermalink()}
>Blog
</a>
</li>
<li class="md:hidden">
<a
class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href="https://github.com/onwidget/astrowind"
>Github
</a>
</li>
</ul>
<div class="md:self-center flex items-center mb-4 md:mb-0 ml-2">
<div class="hidden items-center md:flex">
<ToggleTheme iconClass="w-5 h-5" />
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="RSS Feed"
href="/rss.xml"
>
<Icon name="tabler:rss" class="w-5 h-5" />
</a>
<a
href="https://github.com/onwidget/astrowind"
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
aria-label="Astrowind Github"
>
<Icon name="tabler:brand-github" class="w-5 h-5" />
</a>
</div>
</div>
</nav>
</div>
<div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
<div class="flex justify-between">
<a class="flex items-center" href={getHomePermalink()}>
<Logo />
</a>
<div class="flex items-center md:hidden">
<ToggleTheme />
<ToggleMenu />
</div>
</div>
<nav
class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-screen md:h-auto"
aria-label="Main navigation"
id="menu"
>
<ul
class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed text-xl md:text-base"
>
<li>
<a
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href="#">Pages</a
>
</li>
<li>
<a
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href={getPermalink('useful-resources-to-create-websites', 'post')}
>Resources
</a>
</li>
<li>
<a
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href={getBlogPermalink()}>Blog</a
>
</li>
<li class="md:hidden">
<a
class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href="https://github.com/onwidget/astrowind"
>Github
</a>
</li>
</ul>
<div class="md:self-center flex items-center mb-4 md:mb-0 ml-2">
<div class="hidden items-center md:flex">
<ToggleTheme iconClass="w-5 h-5" />
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="RSS Feed"
href="/rss.xml"
>
<Icon name="tabler:rss" class="w-5 h-5" />
</a>
<a
href="https://github.com/onwidget/astrowind"
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
aria-label="Astrowind Github"
>
<Icon name="tabler:brand-github" class="w-5 h-5" />
</a>
</div>
</div>
</nav>
</div>
</header>

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

@ -1,59 +1,60 @@
---
import { Icon } from "astro-icon";
import Picture from "~/components/core/Picture.astro";
import { Icon } from 'astro-icon';
import Picture from '~/components/core/Picture.astro';
---
<section>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-12 md:py-20">
<div class="text-center pb-10 md:pb-16">
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
Your website with
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">Astro</span> +
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 sm:whitespace-nowrap"
>Tailwind CSS
</span>
</h1>
<div class="max-w-3xl mx-auto">
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It has been
designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">... </span><span class="hidden sm:inline">Dark Mode, Great Page Speed, image optimization,
sitemap generation and more.</span>
</p>
<div class="max-w-none px-6 flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
<div class="flex w-full sm:w-auto">
<a
class="btn text-white border border-primary-600 bg-primary-600 hover:bg-primary-800 hover:border-primary-800 sm:mb-0 w-full"
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>
</div>
<div class="flex w-full sm:w-auto">
<a
class="btn text-white bg-gray-900 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800 w-full"
href="#features"
>Learn more
</a>
</div>
</div>
</div>
</div>
<div>
<div class="relative mb-8 m-auto max-w-3xl">
<Picture
src={import("~/assets/images/hero.jpg")}
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700 w-full"
widths={[400, 768]}
sizes=" (max-width: 767px) 400px, 768px"
alt="Hero Image"
aspectRatio="16:9"
/>
</div>
</div>
</div>
</div>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-12 md:py-20">
<div class="text-center pb-10 md:pb-16">
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
Your website with
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">Astro</span> +
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 sm:whitespace-nowrap"
>Tailwind CSS</span
>
</h1>
<div class="max-w-3xl mx-auto">
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It has been
designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span><span
class="hidden sm:inline"
>Dark Mode, Great Page Speed, image optimization, sitemap generation and more.</span
>
</p>
<div class="max-w-none px-6 flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
<div class="flex w-full sm:w-auto">
<a
class="btn text-white border border-primary-600 bg-primary-600 hover:bg-primary-800 hover:border-primary-800 sm:mb-0 w-full"
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>
</div>
<div class="flex w-full sm:w-auto">
<a
class="btn text-white bg-gray-900 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800 w-full"
href="#features">Learn more</a
>
</div>
</div>
</div>
</div>
<div>
<div class="relative mb-8 m-auto max-w-3xl">
<Picture
src={import('~/assets/images/hero.jpg')}
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700 w-full"
widths={[400, 768]}
sizes=" (max-width: 767px) 400px, 768px"
alt="Hero Image"
aspectRatio="16:9"
/>
</div>
</div>
</div>
</div>
</section>

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

@ -2,24 +2,24 @@
---
<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="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>
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
Downloads
</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 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>
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
Downloads
</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>

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

@ -1,89 +1,89 @@
---
import { Icon } from "astro-icon";
import Picture from "~/components/core/Picture.astro";
import { Icon } from 'astro-icon';
import Picture from '~/components/core/Picture.astro';
---
<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>
<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-secondary-500 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
</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>
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-secondary-500 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
</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>
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-secondary-500 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
</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>
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:check" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
</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-700"></p>
</div>
</div>
</div>
<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"
src={import("~/assets/images/astronaut.jpg")}
widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 432px"
alt="Astronaut"
aspectRatio="432:768"
/>
</div>
</div>
<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>
<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-secondary-500 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
</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>
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-secondary-500 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
</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>
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-secondary-500 border-2">
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
</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>
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:check" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
</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-700"></p>
</div>
</div>
</div>
<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"
src={import('~/assets/images/astronaut.jpg')}
widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 432px"
alt="Astronaut"
aspectRatio="432:768"
/>
</div>
</div>
</section>