Components folder refactoring
This commit is contained in:
prototypa
35
src/components/widgets/BasicCTA.astro
Normal file
35
src/components/widgets/BasicCTA.astro
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<section class="relative">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="py-12 md:py-20">
|
||||
<div
|
||||
class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none"
|
||||
>
|
||||
<h2
|
||||
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
|
||||
>
|
||||
<span>Astro</span> + <span class="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-blue-600 hover:bg-blue-800 sm:mb-0 font-bold"
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Get template
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
103
src/components/widgets/BasicFAQs.astro
Normal file
103
src/components/widgets/BasicFAQs.astro
Normal file
@ -0,0 +1,103 @@
|
||||
---
|
||||
import { IconArrowDownRight } from "~/components/icons";
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<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 font-sans text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto"
|
||||
>
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-screen-xl sm:mx-auto">
|
||||
<div class="grid grid-cols-1 gap-8 lg:gap-16 row-gap-8 md:grid-cols-2">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
|
||||
What do I need to start?
|
||||
</p>
|
||||
<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 explore strange new worlds.
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
Many say exploration is part of our destiny, but it’s actually our
|
||||
duty to future generations.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
|
||||
How to install the Astro + Tailwind CSS template?
|
||||
</p>
|
||||
<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.
|
||||
</p>
|
||||
<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 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.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
|
||||
Is the Space Pope reptilian!?
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
|
||||
How much money you got on you?
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-400 mb-2">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
|
||||
Galaxies Orion's sword globular star cluster?
|
||||
</p>
|
||||
<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>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
|
||||
When has justice ever been as simple as a rule book?
|
||||
</p>
|
||||
<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, that's certainly good to
|
||||
know. About four years. I got tired of hearing how young I looked.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
148
src/components/widgets/BasicFeatures.astro
Normal file
148
src/components/widgets/BasicFeatures.astro
Normal file
@ -0,0 +1,148 @@
|
||||
---
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<section class="relative">
|
||||
<div class="absolute inset-0 bg-blue-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-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">Components</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">
|
||||
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">
|
||||
<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">
|
||||
<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">
|
||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></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>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ml-4 text-xl font-bold">Headers</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore.
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></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>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="ml-4 text-xl font-bold">Footers</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore.
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></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>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ml-4 text-xl font-bold">Features</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore.
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></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>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="ml-4 text-xl font-bold">Call-to-Action</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore.
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></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>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ml-4 text-xl font-bold">Pricing</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore.
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></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>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="ml-4 text-xl font-bold">Testimonial</div>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
112
src/components/widgets/BlogFeaturesPosts.astro
Normal file
112
src/components/widgets/BlogFeaturesPosts.astro
Normal file
@ -0,0 +1,112 @@
|
||||
---
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<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">
|
||||
<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>
|
||||
</h2>
|
||||
<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 need to know to be an expert in
|
||||
creating a website using Astro + Tailwind CSS The blog does not exist yet,
|
||||
but very soon. Astro is a very interesting technology. Thanks.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6">
|
||||
<div class="mb-6 transition">
|
||||
<Picture
|
||||
src={import("~/assets/images/steps.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 768]}
|
||||
sizes="(max-width: 767px) 400px, 768px"
|
||||
alt="Post 2 Image"
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
|
||||
<a
|
||||
href="/blog/get-started-with-astrowind"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||
>Get started with AstroWind
|
||||
</a>
|
||||
</h3>
|
||||
<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 simple as a rule book?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 transition">
|
||||
<Picture
|
||||
src={import("~/assets/images/colors.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 768]}
|
||||
sizes="(max-width: 767px) 400px, 768px"
|
||||
alt="Post 1 Image"
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
|
||||
<a
|
||||
href="/blog/how-to-customize-the-template"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||
>How to customize the template
|
||||
</a>
|
||||
</h3>
|
||||
<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, Hercules Morse.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 transition">
|
||||
<Picture
|
||||
src={import("~/assets/images/tools.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 768]}
|
||||
sizes="(max-width: 767px) 400px, 768px"
|
||||
alt="Post 3 Image"
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
|
||||
<a
|
||||
href="/blog/helpful-tools-and-resources-to-design"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||
>Helpful tools and resources to design
|
||||
</a>
|
||||
</h3>
|
||||
<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 commodo rutrum.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 transition">
|
||||
<Picture
|
||||
src={import("~/assets/images/hero.jpg")}
|
||||
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
|
||||
widths={[400, 768]}
|
||||
sizes="(max-width: 767px) 400px, 768px"
|
||||
alt="Post 2 Image"
|
||||
aspectRatio="16:9"
|
||||
/>
|
||||
<h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
|
||||
<a
|
||||
href="/blog/astrowind-template-in-depth"
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||
>AstroWind template in depth
|
||||
</a>
|
||||
</h3>
|
||||
<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 simple as a rule book?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
62
src/components/widgets/BlogPostCard.astro
Normal file
62
src/components/widgets/BlogPostCard.astro
Normal file
@ -0,0 +1,62 @@
|
||||
---
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
|
||||
const { post } = Astro.props;
|
||||
|
||||
const images = import.meta.glob("../../assets/images/*");
|
||||
const imageSrc =
|
||||
typeof images[post.image] === "function"
|
||||
? (await images[post.image]())["default"]
|
||||
: typeof post.image === "string"
|
||||
? post.image
|
||||
: null;
|
||||
---
|
||||
|
||||
<article
|
||||
class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8"
|
||||
>
|
||||
<a class="relative block group" href="#0">
|
||||
<div
|
||||
class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
|
||||
>
|
||||
<Picture
|
||||
src={imageSrc}
|
||||
class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg"
|
||||
widths={[400, 768]}
|
||||
sizes="(max-width: 767px) 400px, 768px"
|
||||
alt={post.description}
|
||||
aspectRatio="1"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<header>
|
||||
<h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2">
|
||||
<a
|
||||
class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
|
||||
href={`/blog/${post.slug}`}
|
||||
>
|
||||
{post.title}
|
||||
</a>
|
||||
</h2>
|
||||
</header>
|
||||
<p class="text-md sm:text-lg flex-grow">
|
||||
{post.excerpt || post.description}
|
||||
</p>
|
||||
<footer class="flex items-center mt-4">
|
||||
<div>
|
||||
<span class="text-gray-500 dark:text-slate-400">
|
||||
<time datetime={""}>
|
||||
{
|
||||
new Date(post.pubDate).toLocaleDateString("en-us", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
})
|
||||
}
|
||||
</time>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</article>
|
||||
28
src/components/widgets/Error404.astro
Normal file
28
src/components/widgets/Error404.astro
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
---
|
||||
|
||||
<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-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
|
||||
</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="/"
|
||||
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>
|
||||
242
src/components/widgets/Footer.astro
Normal file
242
src/components/widgets/Footer.astro
Normal file
@ -0,0 +1,242 @@
|
||||
---
|
||||
import {
|
||||
IconTwitter,
|
||||
IconInstagram,
|
||||
IconFacebook,
|
||||
IconArrowRight,
|
||||
} from "~/components/icons";
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<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-3">
|
||||
<div class="mb-2">
|
||||
<a class="inline-block font-bold text-xl" href="/">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">
|
||||
Products
|
||||
</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="#"
|
||||
>Web Studio
|
||||
</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="#"
|
||||
>DynamicBox Flex
|
||||
</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="#"
|
||||
>Programming Forms
|
||||
</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="#"
|
||||
>Integrations
|
||||
</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="#"
|
||||
>Command-line
|
||||
</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">
|
||||
Resources
|
||||
</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="#"
|
||||
>Documentation
|
||||
</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="#"
|
||||
>Tutorials & Guides
|
||||
</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="#"
|
||||
>Support Center
|
||||
</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>
|
||||
</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="#"
|
||||
>Home
|
||||
</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="#"
|
||||
>About us
|
||||
</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="#"
|
||||
>Company values
|
||||
</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="#"
|
||||
>Privacy Policy
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-3 lg:col-span-3">
|
||||
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
|
||||
Subscribe
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Get the latest news and articles to your inbox every month.
|
||||
</p>
|
||||
<form>
|
||||
<div class="flex flex-wrap mb-4">
|
||||
<div class="w-full">
|
||||
<label class="block text-sm sr-only" for="newsletter"
|
||||
>Email
|
||||
</label>
|
||||
<div class="relative flex items-center max-w-xs">
|
||||
<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"
|
||||
placeholder="Your email"
|
||||
/>
|
||||
<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"
|
||||
aria-hidden="true"></span>
|
||||
|
||||
<IconArrowRight
|
||||
class="w-5 h-5 text-blue-600 mx-3 flex-shrink-0"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<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"
|
||||
aria-label="Twitter"
|
||||
href="#"
|
||||
>
|
||||
<IconTwitter />
|
||||
</a>
|
||||
</li>
|
||||
<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"
|
||||
aria-label="Instagram"
|
||||
href="#"
|
||||
>
|
||||
<IconInstagram />
|
||||
</a>
|
||||
</li>
|
||||
<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"
|
||||
aria-label="Facebook"
|
||||
href="#"
|
||||
>
|
||||
<IconFacebook />
|
||||
</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>
|
||||
101
src/components/widgets/Header.astro
Normal file
101
src/components/widgets/Header.astro
Normal file
@ -0,0 +1,101 @@
|
||||
---
|
||||
import { IconSun, IconGithub, IconMenu } from "~/components/icons";
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<header
|
||||
class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900/90 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="/">
|
||||
<span
|
||||
class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>AstroWind
|
||||
</span>
|
||||
</a>
|
||||
<div class="flex items-center md:hidden">
|
||||
<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"
|
||||
aria-label="Toggle between Dark and Light mode"
|
||||
onclick="window.toggleDarkMode()"
|
||||
>
|
||||
<IconSun class="w-6 h-6" />
|
||||
</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"
|
||||
aria-label="Toggle Menu"
|
||||
onclick="toggleMenu()"
|
||||
>
|
||||
<IconMenu class="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
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 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="#"
|
||||
>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="/blog"
|
||||
>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 collapse collapsed"
|
||||
>
|
||||
<div class="hidden items-center mr-3 md:flex">
|
||||
<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"
|
||||
aria-label="Toggle between Dark and Light mode"
|
||||
onclick="window.toggleDarkMode()"
|
||||
>
|
||||
<IconSun />
|
||||
</button>
|
||||
<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"
|
||||
aria-label="Astrowind Github"
|
||||
>
|
||||
<IconGithub />
|
||||
</a>
|
||||
|
||||
<!-- <a class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-center ml-3 btn-sm" href="/login/">Get started
|
||||
</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
66
src/components/widgets/Hero.astro
Normal file
66
src/components/widgets/Hero.astro
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<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-12 md:pb-16">
|
||||
<h1
|
||||
class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4"
|
||||
>
|
||||
Your website with
|
||||
<span
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
|
||||
>Astro
|
||||
</span> +
|
||||
<span
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 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, Dark Mode, great Page Speed, image
|
||||
optimization, sitemap generation and more.
|
||||
</p>
|
||||
<div class="max-w-none flex justify-center">
|
||||
<div>
|
||||
<a
|
||||
class="btn text-white bg-blue-600 hover:bg-blue-800 mb-4 sm:mb-0 font-bold"
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>Get template
|
||||
</a>
|
||||
</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"
|
||||
href="/blog/"
|
||||
>Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="relative flex justify-center mb-8">
|
||||
<div class="flex flex-col justify-center">
|
||||
<Picture
|
||||
src={import("~/assets/images/hero.jpg")}
|
||||
class="mx-auto rounded-md shadow-lg 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>
|
||||
</section>
|
||||
50
src/components/widgets/Pagination.astro
Normal file
50
src/components/widgets/Pagination.astro
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
const { prevUrl, nextUrl } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="container flex">
|
||||
<div class="flex flex-row mx-auto container justify-between">
|
||||
<a
|
||||
href={prevUrl}
|
||||
class={`btn font-medium text-gray-600 hover:text-gray-900 dark:hover:text-white shadow-none mr-2 ${
|
||||
!prevUrl ? "invisible" : ""
|
||||
}`}
|
||||
>
|
||||
<div class="flex flex-row align-middle">
|
||||
<svg
|
||||
class="w-5 mr-2"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<p class="ml-2">Newer posts</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href={nextUrl}
|
||||
class={`btn font-medium text-gray-600 hover:text-gray-900 dark:hover:text-white shadow-none ${
|
||||
!nextUrl ? "invisible" : ""
|
||||
}`}
|
||||
>
|
||||
<div class="flex flex-row align-middle">
|
||||
<span class="mr-2">Older posts</span>
|
||||
<svg
|
||||
class="w-5 ml-2"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
26
src/components/widgets/Stats.astro
Normal file
26
src/components/widgets/Stats.astro
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
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="grid grid-cols-2 row-gap-8 md:grid-cols-4">
|
||||
<div class="text-center md:border-r mb-10 md:mb-0">
|
||||
<div class="text-4xl font-bold lg:text-5xl xl:text-6xl">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 mb-10 md:mb-0">
|
||||
<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">Stars</p>
|
||||
</div>
|
||||
<div class="text-center md:border-r">
|
||||
<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">Forks</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<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">Users</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
95
src/components/widgets/StepsFeatures.astro
Normal file
95
src/components/widgets/StepsFeatures.astro
Normal file
@ -0,0 +1,95 @@
|
||||
---
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<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>
|
||||
<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 bg-blue-600 hover:bg-blue-700 text-white font-bold"
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
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 font-heading rounded-full bg-blue-50 text-blue-600"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
</div>
|
||||
<div class="px-4">
|
||||
<h3 class="mb-4 text-xl font-semibold">
|
||||
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 font-heading rounded-full bg-blue-50 text-blue-600"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
<div class="px-4">
|
||||
<h3 class="mb-4 text-xl font-semibold">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 font-heading rounded-full bg-blue-50 text-blue-600"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
<div class="px-4">
|
||||
<h3 class="mb-4 text-xl font-semibold">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>
|
||||
170
src/components/widgets/StepsLeft.astro
Normal file
170
src/components/widgets/StepsLeft.astro
Normal file
@ -0,0 +1,170 @@
|
||||
---
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
|
||||
<div class="grid gap-6 row-gap-10 md:grid-cols-2">
|
||||
<div class="md:py-6 md:pr-16 text-gray-700 dark:text-gray-400">
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-5 h-5 text-gray-600 dark:text-slate-200"
|
||||
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
|
||||
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>
|
||||
</svg>
|
||||
</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 border rounded-full border-pink-500 border-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-5 h-5 text-gray-600 dark:text-slate-200"
|
||||
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
|
||||
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>
|
||||
</svg>
|
||||
</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 border rounded-full border-pink-500 border-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-5 h-5 text-gray-600 dark:text-slate-200"
|
||||
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
|
||||
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>
|
||||
</svg>
|
||||
</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 border rounded-full border-blue-600 border-2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 text-gray-600 dark:text-slate-200"
|
||||
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 d="M5 12l5 5l10 -10"></path>
|
||||
</svg>
|
||||
</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>
|
||||
163
src/components/widgets/TwoColsFeatures.astro
Normal file
163
src/components/widgets/TwoColsFeatures.astro
Normal file
@ -0,0 +1,163 @@
|
||||
---
|
||||
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">
|
||||
<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">Features</p>
|
||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
|
||||
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>
|
||||
</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">
|
||||
<div class="space-y-8 sm:px-8">
|
||||
<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-blue-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-blue-600" width="64" height="64" rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </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>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">Integration with Tailwind CSS</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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-blue-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-blue-600" width="64" height="64" rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </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>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">Ready-to-use Components</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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-blue-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-blue-600" width="64" height="64" rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </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>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">Best Practices</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-8 sm:px-8">
|
||||
<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-blue-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-blue-600" width="64" height="64" rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </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>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">Excelent Page Speed</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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-blue-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-blue-600" width="64" height="64" rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </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>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">Frequently updated</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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-blue-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-blue-600" width="64" height="64" rx="32"></rect>
|
||||
<g stroke-linecap="square" stroke-width="2">
|
||||
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"> </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>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">Open to new ideas and contributions</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user