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

Fix format

Browse Source
This commit is contained in:
prototypa
2022-08-13 06:19:45 -04:00
parent f825675cf0
commit e481146bf9
17 changed files with 632 additions and 573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
CODE_OF_CONDUCT.md
View File

@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
Examples of behavior that contributes to a positive environment for our Examples of behavior that contributes to a positive environment for our
community include: community include:
* Demonstrating empathy and kindness toward other people - Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences - Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback - Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes, - Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience and learning from the experience
* Focusing on what is best not just for us as individuals, but for the - Focusing on what is best not just for us as individuals, but for the
overall community overall community
Examples of unacceptable behavior include: Examples of unacceptable behavior include:
* The use of sexualized language or imagery, and sexual attention or - The use of sexualized language or imagery, and sexual attention or
advances of any kind advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks - Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment - Public or private harassment
* Publishing others' private information, such as a physical or email - Publishing others' private information, such as a physical or email
address, without their explicit permission address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a - Other conduct which could reasonably be considered inappropriate in a
professional setting professional setting
## Enforcement Responsibilities ## Enforcement Responsibilities

69
src/components/astro/blog/BlogFeaturesFourCols.astro
View File

@ -1,12 +1,12 @@
--- ---
import Picture from "~/components/astro/utils/Picture.astro"; import Picture from "~/components/astro/utils/Picture.astro";
const { } = Astro.props; const {} = Astro.props;
--- ---
<section class="px-4 py-16 mx-auto max-w-6xl lg:py-20"> <section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
<div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8"> <div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
<h2 class="max-w-lg mb-2 font-sans text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group"> <h2 class="max-w-lg mb-2 font-sans text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group">
<span class="inline-block mb-1 sm:mb-4">Find out more content<br class="hidden md:block"> in our Blog</span> <span class="inline-block mb-1 sm:mb-4">Find out more content<br class="hidden md:block" /> in our Blog</span>
</h2> </h2>
<p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md"> <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">
The blog will be used to display AstroWind documentation. Each new article will be an important step that you will The blog will be used to display AstroWind documentation. Each new article will be an important step that you will
@ -16,53 +16,64 @@ const { } = Astro.props;
</div> </div>
<div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6"> <div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6">
<div class="mb-6"> <div class="mb-6">
<Picture src={import("~/assets/images/post-2.jpg")} <Picture
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400, 768]} src={import("~/assets/images/post-2.jpg")}
sizes="(max-width: 767px) 400px, 768px" alt="Post 2 Image" aspectRatio="16:9" /> class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl"> widths={[400, 768]}
Get started with AstroWind sizes="(max-width: 767px) 400px, 768px"
</h3> alt="Post 2 Image"
aspectRatio="16:9"
/>
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">Get started with AstroWind</h3>
<p class="text-gray-700 dark:text-gray-400"> <p class="text-gray-700 dark:text-gray-400">
I'll be sure to note that in my log. Smooth as an android's bottom, eh, Data? When has justice ever been as I'll be sure to note that in my log. Smooth as an android's bottom, eh, Data? When has justice ever been as
simple as a rule book? simple as a rule book?
</p> </p>
</div> </div>
<div class="mb-6"> <div class="mb-6">
<Picture src={import("~/assets/images/post-1.jpg")} <Picture
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400, 768]} src={import("~/assets/images/post-1.jpg")}
sizes="(max-width: 767px) 400px, 768px" alt="Post 1 Image" aspectRatio="16:9" /> class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl"> widths={[400, 768]}
How to customize the template sizes="(max-width: 767px) 400px, 768px"
</h3> alt="Post 1 Image"
aspectRatio="16:9"
/>
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">How to customize the template</h3>
<p class="text-gray-700 dark:text-gray-400"> <p class="text-gray-700 dark:text-gray-400">
O for awesome, this chocka full cuzzie is as rip-off as a cracker. Meanwhile, in behind the bicycle shed, O for awesome, this chocka full cuzzie is as rip-off as a cracker. Meanwhile, in behind the bicycle shed,
Hercules Morse. Hercules Morse.
</p> </p>
</div> </div>
<div class="mb-6"> <div class="mb-6">
<Picture src={import("~/assets/images/post-3.jpg")} <Picture
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400, 768]} src={import("~/assets/images/post-3.jpg")}
sizes="(max-width: 767px) 400px, 768px" alt="Post 3 Image" aspectRatio="16:9" /> class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl"> widths={[400, 768]}
Helpful tools and resources to design sizes="(max-width: 767px) 400px, 768px"
</h3> alt="Post 3 Image"
aspectRatio="16:9"
/>
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">Helpful tools and resources to design</h3>
<p class="text-gray-700 dark:text-gray-400"> <p class="text-gray-700 dark:text-gray-400">
Yolo ipsum dolor sit amet, consectetur adipiscing elit. Ut ac suscipit leo. Carpe diem vulputate est nec Yolo ipsum dolor sit amet, consectetur adipiscing elit. Ut ac suscipit leo. Carpe diem vulputate est nec commodo
commodo rutrum. rutrum.
</p> </p>
</div> </div>
<div class="mb-6"> <div class="mb-6">
<Picture src={import("~/assets/images/hero.jpg")} <Picture
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" widths={[400, 768]} src={import("~/assets/images/hero.jpg")}
sizes="(max-width: 767px) 400px, 768px" alt="Post 2 Image" aspectRatio="16:9" /> class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl"> widths={[400, 768]}
AstroWind template in depth sizes="(max-width: 767px) 400px, 768px"
</h3> alt="Post 2 Image"
aspectRatio="16:9"
/>
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">AstroWind template in depth</h3>
<p class="text-gray-700 dark:text-gray-400"> <p class="text-gray-700 dark:text-gray-400">
I'll be sure to note that in my log. Smooth as an android's bottom, eh, Data? When has justice ever been as I'll be sure to note that in my log. Smooth as an android's bottom, eh, Data? When has justice ever been as
simple as a rule book? simple as a rule book?
</p> </p>
</div> </div>
</div> </div>
</section> </section>

14
src/components/astro/ctas/BasicCTA.astro
View File

@ -1,5 +1,5 @@
--- ---
const { } = Astro.props; const {} = Astro.props;
--- ---
<section class="relative"> <section class="relative">
@ -13,9 +13,15 @@ const { } = Astro.props;
Be very surprised by these huge fake numbers you are seeing on this page. <br />Don't waste more time! :P Be very surprised by these huge fake numbers you are seeing on this page. <br />Don't waste more time! :P
</p> </p>
<div class="mt-6"><a class="btn text-white bg-blue-600 hover:bg-blue-800 sm:mb-0" <div class="mt-6">
href="https://github.com/onwidget/astrowind" target="_blank" rel="noopener">Get template <a
</a></div> class="btn text-white bg-blue-600 hover:bg-blue-800 sm:mb-0"
href="https://github.com/onwidget/astrowind"
target="_blank"
rel="noopener"
>Get template
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

25
src/components/astro/faqs/FAQsBasic.astro
View File

@ -1,13 +1,10 @@
--- ---
--- ---
<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 sm:text-center lg:max-w-2xl md:mb-12">
<h2 class="max-w-lg mb-4 font-sans text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto"> <h2 class="max-w-lg mb-4 font-sans text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto">
Frequently Asked Questions Frequently Asked Questions
</h2> </h2>
</div> </div>
@ -16,9 +13,7 @@
<div class="grid grid-cols-1 gap-8 lg:gap-16 row-gap-8 md:grid-cols-2"> <div class="grid grid-cols-1 gap-8 lg:gap-16 row-gap-8 md:grid-cols-2">
<div class="space-y-8"> <div class="space-y-8">
<div> <div>
<p class="mb-4 text-xl font-bold"> <p class="mb-4 text-xl font-bold">What do I need to start?</p>
What do I need to start?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2"> <p class="text-gray-700 dark:text-gray-400 mb-2">
Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to
explore strange new worlds. explore strange new worlds.
@ -28,17 +23,14 @@
</p> </p>
</div> </div>
<div> <div>
<p class="mb-4 text-xl font-bold"> <p class="mb-4 text-xl font-bold">How to install the Astro + Tailwind CSS template?</p>
How to install the Astro + Tailwind CSS template?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2"> <p class="text-gray-700 dark:text-gray-400 mb-2">
Well, the way they make shows is, they make one show. That show's called a pilot. Well, the way they make shows is, they make one show. That show's called a pilot.
</p> </p>
<p class="text-gray-700 dark:text-gray-400 mb-2"> <p class="text-gray-700 dark:text-gray-400 mb-2">
Then they show that show to the people who make shows, and on the strength of that one show they decide if 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 they're going to make more shows. Some pilots get picked and become television programs.Some don't, become
nothing. She nothing. She starred in one of the ones that became nothing.
starred in one of the ones that became nothing.
</p> </p>
</div> </div>
<div> <div>
@ -59,19 +51,16 @@
</p> </p>
</div> </div>
<div> <div>
<p class="mb-4 text-xl font-bold"> <p class="mb-4 text-xl font-bold">Galaxies Orion's sword globular star cluster?</p>
Galaxies Orion's sword globular star cluster?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2"> <p class="text-gray-700 dark:text-gray-400 mb-2">
A business big enough that it could be listed on the NASDAQ goes belly up. Disappears!</p> A business big enough that it could be listed on the NASDAQ goes belly up. Disappears!
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2"> <p class="text-gray-700 dark:text-gray-400 mb-2">
It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in. It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.
</p> </p>
</div> </div>
<div> <div>
<p class="mb-4 text-xl font-bold"> <p class="mb-4 text-xl font-bold">When has justice ever been as simple as a rule book?</p>
When has justice ever been as simple as a rule book?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2"> <p class="text-gray-700 dark:text-gray-400 mb-2">
This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well, 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. that's certainly good to know. About four years. I got tired of hearing how young I looked.

55
src/components/astro/features/BasicFeatures.astro
View File

@ -1,26 +1,22 @@
--- ---
const { } = Astro.props; const {} = Astro.props;
--- ---
<section class="relative"> <section class="relative">
<div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"> <div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
</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"> <div class="mb-8 text-center">
<p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"> <p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">Components</p>
Components <h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">Most used widgets</h2>
</p>
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
Most used widgets
</h2>
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400"> <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 Provides frequently used components for building websites using Tailwind CSS
</p> </p>
</div> </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 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
<div <div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"> class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4"> <div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
@ -35,12 +31,13 @@ const { } = Astro.props;
<div class="ml-4 text-xl font-bold">Headers</div> <div class="ml-4 text-xl font-bold">Headers</div>
</div> </div>
<p class="text-gray-500 dark:text-gray-400 text-md"> <p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
eiusmod tempor incididunt ut labore et dolore. dolore.
</p> </p>
</div> </div>
<div <div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"> class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4"> <div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
@ -56,12 +53,13 @@ const { } = Astro.props;
<div class="ml-4 text-xl font-bold">Footers</div> <div class="ml-4 text-xl font-bold">Footers</div>
</div> </div>
<p class="text-gray-500 dark:text-gray-400 text-md"> <p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
eiusmod tempor incididunt ut labore et dolore. dolore.
</p> </p>
</div> </div>
<div <div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"> class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4"> <div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
@ -76,12 +74,13 @@ const { } = Astro.props;
<div class="ml-4 text-xl font-bold">Features</div> <div class="ml-4 text-xl font-bold">Features</div>
</div> </div>
<p class="text-gray-500 dark:text-gray-400 text-md"> <p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
eiusmod tempor incididunt ut labore et dolore. dolore.
</p> </p>
</div> </div>
<div <div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"> class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4"> <div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
@ -97,12 +96,13 @@ const { } = Astro.props;
<div class="ml-4 text-xl font-bold">Call-to-Action</div> <div class="ml-4 text-xl font-bold">Call-to-Action</div>
</div> </div>
<p class="text-gray-500 dark:text-gray-400 text-md"> <p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
eiusmod tempor incididunt ut labore et dolore. dolore.
</p> </p>
</div> </div>
<div <div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"> class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4"> <div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
@ -117,12 +117,13 @@ const { } = Astro.props;
<div class="ml-4 text-xl font-bold">Pricing</div> <div class="ml-4 text-xl font-bold">Pricing</div>
</div> </div>
<p class="text-gray-500 dark:text-gray-400 text-md"> <p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
eiusmod tempor incididunt ut labore et dolore. dolore.
</p> </p>
</div> </div>
<div <div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"> class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4"> <div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
@ -137,8 +138,8 @@ const { } = Astro.props;
<div class="ml-4 text-xl font-bold">Testimonial</div> <div class="ml-4 text-xl font-bold">Testimonial</div>
</div> </div>
<p class="text-gray-500 dark:text-gray-400 text-md"> <p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
eiusmod tempor incididunt ut labore et dolore. dolore.
</p> </p>
</div> </div>
</div> </div>

33
src/components/astro/features/StepsFeatures.astro
View File

@ -1,5 +1,5 @@
--- ---
const { } = Astro.props; const {} = Astro.props;
--- ---
<section> <section>
@ -10,18 +10,20 @@ const { } = Astro.props;
<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">
<div class="mb-12 lg:mb-0 pb-12 lg:pb-0 border-b lg:border-b-0"> <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"> <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 Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.
hac habitasse platea dictumst.
</h2> </h2>
<p class="mb-8 text-xl text-gray-600 dark:text-slate-400"> <p class="mb-8 text-xl text-gray-600 dark:text-slate-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
sagittis, quam nec venenatis lobortis, mi risus tempus nulla, risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula.
sed porttitor est nibh at nulla. Praesent placerat enim ut ex Fusce sit amet dui tellus.
tincidunt vehicula. Fusce sit amet dui tellus.
</p> </p>
<div class="w-full"> <div class="w-full">
<a class="btn bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-medium shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2" <a
href="https://github.com/onwidget/astrowind" target="_blank" rel="noopener"> class="btn bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-medium shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2"
href="https://github.com/onwidget/astrowind"
target="_blank"
rel="noopener"
>
Get template Get template
</a> </a>
</div> </div>
@ -32,14 +34,13 @@ const { } = Astro.props;
<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
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600"> class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600"
>
1 1
</span> </span>
</div> </div>
<div class="px-4"> <div class="px-4">
<h3 class="mb-4 text-xl font-semibold"> <h3 class="mb-4 text-xl font-semibold">Responsive Elements</h3>
Responsive Elements
</h3>
<p class="text-gray-500 dark:text-gray-400"> <p class="text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
lobortis, mi risus tempus nulla. lobortis, mi risus tempus nulla.
@ -49,7 +50,8 @@ const { } = Astro.props;
<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
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600"> class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600"
>
2 2
</span> </span>
</div> </div>
@ -64,7 +66,8 @@ const { } = Astro.props;
<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
class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600"> class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600"
>
3 3
</span> </span>
</div> </div>

114
src/components/astro/features/StepsLeft.astro
View File

@ -1,6 +1,6 @@
--- ---
import Picture from "~/components/astro/utils/Picture.astro" import Picture from "~/components/astro/utils/Picture.astro";
const { } = Astro.props; const {} = 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">
@ -9,14 +9,23 @@ const { } = Astro.props;
<div class="flex"> <div class="flex">
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<div> <div>
<div <div class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2">
class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"> <svg
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-600 dark:text-slate-200" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-gray-600 dark:text-slate-200"
fill="none" stroke-linecap="round" stroke-linejoin="round"> width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path <path
d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"> d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
>
</path> </path>
</svg> </svg>
</div> </div>
@ -26,26 +35,32 @@ const { } = Astro.props;
<div class="pt-1 pb-8"> <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="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce
tincidunt vehicula. Fusce sit amet dui tellus. sit amet dui tellus.
</p> </p>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<div> <div>
<div <div class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2">
class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"> <svg
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-600 dark:text-slate-200" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-gray-600 dark:text-slate-200"
fill="none" stroke-linecap="round" stroke-linejoin="round"> width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path <path
d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"> d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
>
</path> </path>
</svg> </svg>
</div> </div>
@ -55,24 +70,31 @@ const { } = Astro.props;
<div class="pt-1 pb-8"> <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="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla. risus tempus nulla, sed porttitor est nibh at nulla.
</p> </p>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<div> <div>
<div <div class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2">
class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"> <svg
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-600 dark:text-slate-200" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-gray-600 dark:text-slate-200"
fill="none" stroke-linecap="round" stroke-linejoin="round"> width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path <path
d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"> d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
>
</path> </path>
</svg> </svg>
</div> </div>
@ -82,21 +104,27 @@ const { } = Astro.props;
<div class="pt-1 pb-8"> <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="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla. risus tempus nulla, sed porttitor est nibh at nulla.
</p> </p>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<div> <div>
<div <div class="flex items-center justify-center w-10 h-10 border rounded-full border-blue-600 border-2">
class="flex items-center justify-center w-10 h-10 border rounded-full border-blue-600 border-2"> <svg
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 text-gray-600 dark:text-slate-200" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 text-gray-600 dark:text-slate-200"
fill="none" stroke-linecap="round" stroke-linejoin="round"> width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l5 5l10 -10"></path> <path d="M5 12l5 5l10 -10"></path>
</svg> </svg>
@ -112,8 +140,12 @@ const { } = Astro.props;
<div class="relative"> <div class="relative">
<Picture <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" 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]} src={import("~/assets/images/astronaut.jpg")}
sizes="(max-width: 768px) 100vw, 432px" alt="Astronaut" aspectRatio="432:768" /> widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 432px"
alt="Astronaut"
aspectRatio="432:768"
/>
</div> </div>
</div> </div>
</section> </section>

77
src/components/astro/features/TwoColsFeatures.astro
View File

@ -1,19 +1,19 @@
--- ---
const { } = Astro.props; const {} = Astro.props;
--- ---
<section class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-blue-50 dark:bg-slate-800"> <section class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-blue-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"> <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-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"> <p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">Features</p>
Features
</p>
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"> <h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
What's interesting about <span What's interesting about <span
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap">AstroWind</span> class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
>AstroWind
</span>
</h2> </h2>
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400"> <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 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa
ipsa quae. quae.
</p> </p>
</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">
@ -25,10 +25,8 @@ const { } = Astro.props;
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect> <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2"> <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-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
</path> <path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path> </path>
</g> </g>
</g> </g>
@ -38,8 +36,8 @@ const { } = Astro.props;
<div> <div>
<h3 class="mb-3 text-xl font-bold">Integration with Tailwind CSS</h3> <h3 class="mb-3 text-xl font-bold">Integration with Tailwind CSS</h3>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
lobortis, mi risus tempus nulla. risus tempus nulla.
</p> </p>
</div> </div>
</div> </div>
@ -50,10 +48,8 @@ const { } = Astro.props;
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect> <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2"> <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-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
</path> <path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path> </path>
</g> </g>
</g> </g>
@ -63,8 +59,8 @@ const { } = Astro.props;
<div> <div>
<h3 class="mb-3 text-xl font-bold">Ready-to-use Components</h3> <h3 class="mb-3 text-xl font-bold">Ready-to-use Components</h3>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
lobortis, mi risus tempus nulla. risus tempus nulla.
</p> </p>
</div> </div>
</div> </div>
@ -75,10 +71,8 @@ const { } = Astro.props;
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect> <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2"> <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-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
</path> <path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path> </path>
</g> </g>
</g> </g>
@ -88,8 +82,8 @@ const { } = Astro.props;
<div> <div>
<h3 class="mb-3 text-xl font-bold">Best Practices</h3> <h3 class="mb-3 text-xl font-bold">Best Practices</h3>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
lobortis, mi risus tempus nulla. risus tempus nulla.
</p> </p>
</div> </div>
</div> </div>
@ -102,10 +96,8 @@ const { } = Astro.props;
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect> <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2"> <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-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
</path> <path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path> </path>
</g> </g>
</g> </g>
@ -115,8 +107,8 @@ const { } = Astro.props;
<div> <div>
<h3 class="mb-3 text-xl font-bold">Excelent Page Speed</h3> <h3 class="mb-3 text-xl font-bold">Excelent Page Speed</h3>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
lobortis, mi risus tempus nulla. risus tempus nulla.
</p> </p>
</div> </div>
</div> </div>
@ -127,10 +119,8 @@ const { } = Astro.props;
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect> <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2"> <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-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
</path> <path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path> </path>
</g> </g>
</g> </g>
@ -140,8 +130,8 @@ const { } = Astro.props;
<div> <div>
<h3 class="mb-3 text-xl font-bold">Frequently updated</h3> <h3 class="mb-3 text-xl font-bold">Frequently updated</h3>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
lobortis, mi risus tempus nulla. risus tempus nulla.
</p> </p>
</div> </div>
</div> </div>
@ -152,10 +142,8 @@ const { } = Astro.props;
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect> <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2"> <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-white" d="M20.571 20.571h13.714v17.143H20.571z"> </path>
</path> <path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
<path class="stroke-current text-blue-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path> </path>
</g> </g>
</g> </g>
@ -163,11 +151,10 @@ const { } = Astro.props;
</div> </div>
</div> </div>
<div> <div>
<h3 class="mb-3 text-xl font-bold">Open to new ideas and contributions <h3 class="mb-3 text-xl font-bold">Open to new ideas and contributions</h3>
</h3>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
lobortis, mi risus tempus nulla. risus tempus nulla.
</p> </p>
</div> </div>
</div> </div>

135
src/components/astro/footers/BasicFooter.astro
View File

@ -1,11 +1,6 @@
--- ---
import { import { IconTwitter, IconInstagram, IconFacebook, IconArrowRight } from "~/components/astro/icons";
IconTwitter, const {} = Astro.props;
IconInstagram,
IconFacebook,
IconArrowRight,
} from "~/components/astro/icons";
const { } = Astro.props;
--- ---
<footer> <footer>
@ -16,128 +11,127 @@ const { } = Astro.props;
<a class="inline-block font-bold" href="#">AstroWind</a> <a class="inline-block font-bold" href="#">AstroWind</a>
</div> </div>
<div class="text-sm text-gray-600"> <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" <a
href="#">Terms class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
href="#"
>Terms
</a> · </a> ·
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out" <a
href="#">Privacy Policy class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
href="#"
>Privacy Policy
</a> </a>
</div> </div>
</div> </div>
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2"> <div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2"> <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Products</div>
Products
</div>
<ul class="text-sm"> <ul class="text-sm">
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Web Studio >Web Studio
</a> </a>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">DynamicBox Flex >DynamicBox Flex
</a> </a>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Programming Forms >Programming Forms
</a> </a>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Integrations >Integrations
</a> </a>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Command-line >Command-line
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2"> <div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2"> <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Resources</div>
Resources
</div>
<ul class="text-sm"> <ul class="text-sm">
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Documentation >Documentation
</a> </a>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Tutorials &amp; Guides >Tutorials &amp; Guides
</a> </a>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Blog >Blog
</a> </a>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Support Center >Support Center
</a> </a>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Partners >Partners
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2"> <div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2"> <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Company</div>
Company
</div>
<ul class="text-sm"> <ul class="text-sm">
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Home >Home
</a> </a>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">About us >About us
</a> </a>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Company values >Company values
</a> </a>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Pricing >Pricing
</a> </a>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
href="#">Privacy Policy >Privacy Policy
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="sm:col-span-6 md:col-span-3 lg:col-span-3"> <div class="sm:col-span-6 md:col-span-3 lg:col-span-3">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2"> <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Subscribe</div>
Subscribe
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4"> <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Get the latest news and articles to your inbox every month. Get the latest news and articles to your inbox every month.
</p> </p>
<form> <form>
<div class="flex flex-wrap mb-4"> <div class="flex flex-wrap mb-4">
<div class="w-full"> <div class="w-full">
<label class="block text-sm sr-only" for="newsletter">Email <label class="block text-sm sr-only" for="newsletter">Email</label>
</label>
<div class="relative flex items-center max-w-xs"> <div class="relative flex items-center max-w-xs">
<input id="newsletter" type="email" <input
id="newsletter"
type="email"
class="form-input w-full text-gray-800 px-3 py-2 pr-12 text-sm border rounded-sm dark:bg-transparent dark:border-slate-600 dark:text-gray-400" class="form-input w-full text-gray-800 px-3 py-2 pr-12 text-sm border rounded-sm dark:bg-transparent dark:border-slate-600 dark:text-gray-400"
placeholder="Your email" /> placeholder="Your email"
/>
<button type="submit" class="absolute inset-0 left-auto" aria-label="Subscribe"> <button type="submit" class="absolute inset-0 left-auto" aria-label="Subscribe">
<span class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300 dark:bg-slate-600" <span
class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300 dark:bg-slate-600"
aria-hidden="true"></span> aria-hidden="true"></span>
<IconArrowRight class="w-5 h-5 text-blue-600 mx-3 flex-shrink-0" /> <IconArrowRight class="w-5 h-5 text-blue-600 mx-3 flex-shrink-0" />
@ -151,27 +145,36 @@ const { } = Astro.props;
<div class="md:flex md:items-center md:justify-between py-4 md:py-8"> <div class="md:flex md:items-center md:justify-between py-4 md:py-8">
<ul class="flex mb-4 md:order-1 md:ml-4 md:mb-0"> <ul class="flex mb-4 md:order-1 md:ml-4 md:mb-0">
<li> <li>
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5" <a
aria-label="Twitter" href="#"> class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
aria-label="Twitter"
href="#"
>
<IconTwitter /> <IconTwitter />
</a> </a>
</li> </li>
<li class="ml-4"> <li class="ml-4">
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5" <a
aria-label="Instagram" href="#"> class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
aria-label="Instagram"
href="#"
>
<IconInstagram /> <IconInstagram />
</a> </a>
</li> </li>
<li class="ml-4"> <li class="ml-4">
<a class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5" <a
aria-label="Facebook" href="#"> class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
aria-label="Facebook"
href="#"
>
<IconFacebook /> <IconFacebook />
</a> </a>
</li> </li>
</ul> </ul>
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400"> <div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
Made by <a class="text-blue-600 hover:underline dark:text-gray-200" href="https://onwidget.com/"> Made by <a class="text-blue-600 hover:underline dark:text-gray-200" href="https://onwidget.com/"> onWidget</a>.
onWidget</a>. All rights reserved. All rights reserved.
</div> </div>
</div> </div>
</div> </div>

57
src/components/astro/headers/BasicHeader.astro
View File

@ -1,58 +1,79 @@
--- ---
import { IconSun, IconGithub, IconMenu } from "~/components/astro/icons"; import { IconSun, IconGithub, IconMenu } from "~/components/astro/icons";
const { } = Astro.props; const {} = Astro.props;
--- ---
<header <header
class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-transparent backdrop-blur-sm border-b dark:border-b-0"> class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-transparent 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="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
<div class="flex justify-between"> <div class="flex justify-between">
<a class="flex items-center" href="/"> <a class="flex items-center" href="/">
<span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">AstroWind <span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white"
>AstroWind
</span> </span>
</a> </a>
<div class="flex items-center md:hidden"> <div class="flex items-center md:hidden">
<button type="button" <button
type="button"
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" 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="Toggle between Dark and Light mode" onclick="window.toggleDarkMode()"> aria-label="Toggle between Dark and Light mode"
onclick="window.toggleDarkMode()"
>
<IconSun class="w-6 h-6" /> <IconSun class="w-6 h-6" />
</button> </button>
<button <button
class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 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" class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 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="Toggle Menu" onclick="toggleMenu()"> aria-label="Toggle Menu"
onclick="toggleMenu()"
>
<IconMenu class="w-6 h-6" /> <IconMenu class="w-6 h-6" />
</button> </button>
</div> </div>
</div> </div>
<nav class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200" <nav
aria-label="Main navigation" id="menu"> class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200"
aria-label="Main navigation"
id="menu"
>
<ul class="flex flex-col py-2 md:py-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed"> <ul class="flex flex-col py-2 md:py-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed">
<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" <a
href="#">Pages 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> </a>
</li> </li>
<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" <a
href="#">Resources 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="#"
>Resources
</a> </a>
</li> </li>
<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" <a
href="#">Blog 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="#"
>Blog
</a> </a>
</li> </li>
</ul> </ul>
<div class="md:self-center flex items-center mb-4 md:mb-0 collapse collapsed"> <div class="md:self-center flex items-center mb-4 md:mb-0 collapse collapsed">
<div class="hidden items-center mr-3 md:flex"> <div class="hidden items-center mr-3 md:flex">
<button type="button" <button
type="button"
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" 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="Toggle between Dark and Light mode" onclick="window.toggleDarkMode()"> aria-label="Toggle between Dark and Light mode"
onclick="window.toggleDarkMode()"
>
<IconSun /> <IconSun />
</button> </button>
<a href="https://github.com/onwidget/astrowind" <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 mr-1" 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 mr-1"
aria-label="Astrowind Github"> aria-label="Astrowind Github"
>
<IconGithub /> <IconGithub />
</a> </a>

40
src/components/astro/hero/HeroWithImage.astro
View File

@ -1,6 +1,6 @@
--- ---
import Picture from "~/components/astro/utils/Picture.astro"; import Picture from "~/components/astro/utils/Picture.astro";
const { } = Astro.props; const {} = Astro.props;
--- ---
<section> <section>
@ -9,28 +9,32 @@ const { } = Astro.props;
<div class="text-center pb-12 md:pb-16"> <div class="text-center pb-12 md:pb-16">
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4"> <h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4">
Your website with Your website with
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Astro <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Astro</span> +
</span> + <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
<span >Tailwind CSS
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap">Tailwind
CSS
</span> </span>
</h1> </h1>
<div class="max-w-3xl mx-auto"> <div class="max-w-3xl mx-auto">
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400"> <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. AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It has been
It has been designed following Best Practices, SEO, Accessibility, Dark Mode, great Page Speed, image designed following Best Practices, SEO, Accessibility, Dark Mode, great Page Speed, image optimization,
optimization, sitemap generation and more. sitemap generation and more.
</p> </p>
<div class="max-w-xs max-w-none flex justify-center"> <div class="max-w-xs max-w-none flex justify-center">
<div> <div>
<a class="btn text-white bg-blue-600 hover:bg-blue-800 mb-4 sm:mb-0" <a
href="https://github.com/onwidget/astrowind" target="_blank" rel="noopener">Get template class="btn text-white bg-blue-600 hover:bg-blue-800 mb-4 sm:mb-0"
href="https://github.com/onwidget/astrowind"
target="_blank"
rel="noopener"
>Get template
</a> </a>
</div> </div>
<div> <div>
<a class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4" <a
href="#">Learn more class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
href="#"
>Learn more
</a> </a>
</div> </div>
</div> </div>
@ -39,8 +43,14 @@ const { } = Astro.props;
<div> <div>
<div class="relative flex justify-center mb-8"> <div class="relative flex justify-center mb-8">
<div class="flex flex-col justify-center"> <div class="flex flex-col justify-center">
<Picture src={import("~/assets/images/hero.jpg")} class="mx-auto rounded-md bg-gray-400 dark:bg-slate-700" <Picture
widths={[400, 768]} sizes="(max-width: 767px) 400px, 768px" alt="Hero Image" aspectRatio="16:9" /> src={import("~/assets/images/hero.jpg")}
class="mx-auto rounded-md bg-gray-400 dark:bg-slate-700"
widths={[400, 768]}
sizes=" (max-width: 767px) 400px, 768px"
alt="Hero Image"
aspectRatio="16:9"
/>
</div> </div>
</div> </div>
</div> </div>

14
src/components/astro/stats/BasicStats.astro
View File

@ -1,5 +1,5 @@
--- ---
const { } = Astro.props; const {} = 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">
@ -12,21 +12,15 @@ const { } = Astro.props;
</div> </div>
<div class="text-center md:border-r mb-10 md:mb-0"> <div class="text-center md:border-r mb-10 md:mb-0">
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl">24.8K</div> <div class="text-4xl font-bold lg:text-5xl xl:text-6xl">24.8K</div>
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base"> <p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Stars</p>
Stars
</p>
</div> </div>
<div class="text-center md:border-r"> <div class="text-center md:border-r">
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl">10.3K</div> <div class="text-4xl font-bold lg:text-5xl xl:text-6xl">10.3K</div>
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base"> <p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Forks</p>
Forks
</p>
</div> </div>
<div class="text-center"> <div class="text-center">
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl">48.4K</div> <div class="text-4xl font-bold lg:text-5xl xl:text-6xl">48.4K</div>
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base"> <p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">Users</p>
Users
</p>
</div> </div>
</div> </div>
</div> </div>

15
src/components/astro/utils/Picture.astro
View File

@ -7,14 +7,19 @@ const {
sizes, sizes,
widths, widths,
aspectRatio, aspectRatio,
formats = ['avif', 'webp'], formats = ["avif", "webp"],
loading = 'lazy', loading = "lazy",
decoding = 'async', decoding = "async",
class :className = "", class: className = "",
...attrs ...attrs
} = Astro.props; } = Astro.props;
const { image, sources } = await getPicture({ src, widths, formats, aspectRatio }); const { image, sources } = await getPicture({
src,
widths,
formats,
aspectRatio,
});
--- ---
<picture {...attrs}> <picture {...attrs}>

16
src/layouts/Default.astro
View File

@ -17,14 +17,9 @@ const { title = "", description = "", withHeader = true } = Astro.props;
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<meta
name="google-site-verification"
content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M"
/> />
<meta name="google-site-verification" content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M" />
</head> </head>
<body <body
@ -37,16 +32,13 @@ const { title = "", description = "", withHeader = true } = Astro.props;
<script is:inline> <script is:inline>
function toggleDarkMode() { function toggleDarkMode() {
document.documentElement.classList.toggle("dark"); document.documentElement.classList.toggle("dark");
localStorage.theme = document.documentElement.classList.contains("dark") localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
? "dark"
: "light";
} }
window.toggleDarkMode = toggleDarkMode; window.toggleDarkMode = toggleDarkMode;
if ( if (
localStorage.theme === "dark" || localStorage.theme === "dark" ||
(!("theme" in localStorage) && (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
window.matchMedia("(prefers-color-scheme: dark)").matches)
) { ) {
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
} else { } else {

12
src/layouts/Empty.astro
View File

@ -14,14 +14,9 @@ const { title = "", description = "", withHeader = true } = Astro.props;
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<meta
name="google-site-verification"
content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M"
/> />
<meta name="google-site-verification" content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M" />
</head> </head>
<body <body
@ -32,8 +27,7 @@ const { title = "", description = "", withHeader = true } = Astro.props;
<script is:inline> <script is:inline>
if ( if (
localStorage.theme === "dark" || localStorage.theme === "dark" ||
(!("theme" in localStorage) && (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
window.matchMedia("(prefers-color-scheme: dark)").matches)
) { ) {
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
} else { } else {

15
src/pages/404.astro
View File

@ -7,12 +7,21 @@ import Layout from "~/layouts/Empty.astro";
<section class="flex items-center h-full p-16"> <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="container flex flex-col items-center justify-center px-5 mx-auto my-8">
<div class="max-w-md text-center"> <div class="max-w-md text-center">
<h2 class="mb-8 font-extrabold text-9xl bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"> <h2
class="mb-8 font-extrabold text-9xl bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
>
<span class="sr-only">Error</span>404 <span class="sr-only">Error</span>404
</h2> </h2>
<p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p> <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> <p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
<a rel="noopener noreferrer" href="./" 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> But dont worry, you can find plenty of other things on our homepage.
</p>
<a
rel="noopener noreferrer"
href="./"
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> </div>
</section> </section>

6
src/pages/index.astro
View File

@ -12,8 +12,10 @@ import BasicStats from "~/components/astro/stats/BasicStats.astro";
import BlogFeaturesFourCols from "~/components/astro/blog/BlogFeaturesFourCols.astro"; import BlogFeaturesFourCols from "~/components/astro/blog/BlogFeaturesFourCols.astro";
--- ---
<Layout title="AstroWind — Your website with Astro + Tailwind CSS" <Layout
description="Performance and accessible template to make your website using Astro + Tailwind CSS."> title="AstroWind — Your website with Astro + Tailwind CSS"
description="Performance and accessible template to make your website using Astro + Tailwind CSS."
>
<main class="mt-20"> <main class="mt-20">
<HeroWithImage /> <HeroWithImage />
<BasicFeatures /> <BasicFeatures />