Components folder refactoring
This commit is contained in:
prototypa
@ -4,16 +4,16 @@ import { getImage } from "@astrojs/image";
|
||||
const { src: defaultImage } = await getImage({
|
||||
src: import("~/assets/images/default.png"),
|
||||
width: 1200,
|
||||
height: 628
|
||||
height: 628,
|
||||
});
|
||||
|
||||
const {
|
||||
title = "AstroWind",
|
||||
description = "",
|
||||
image = defaultImage,
|
||||
canonical,
|
||||
} = Astro.props;
|
||||
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
const absoluteImageUrl = new URL(image, Astro.site);
|
||||
---
|
||||
|
||||
@ -23,7 +23,7 @@ const absoluteImageUrl = new URL(image, Astro.site);
|
||||
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href={canonicalURL} />
|
||||
{canonical && <link rel="canonical" href={canonical} />}
|
||||
|
||||
<!-- Google / Search Engine Tags -->
|
||||
<meta itemprop="name" content={title} />
|
||||
@ -31,23 +31,27 @@ const absoluteImageUrl = new URL(image, Astro.site);
|
||||
<meta itemprop="image" content={absoluteImageUrl} />
|
||||
|
||||
<!-- Facebook Meta Tags -->
|
||||
<meta property="og:url" content={canonicalURL} />
|
||||
{canonical && <meta property="og:url" content={canonical} />}
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={absoluteImageUrl} />
|
||||
|
||||
<!-- Twitter Meta Tags -->
|
||||
{canonical && <meta name="twitter:url" content={canonical} />}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:url" content={canonicalURL} />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
<meta name="twitter:image" content={absoluteImageUrl} />
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<!-- Google Site Verification -->
|
||||
<meta name="google-site-verification" content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M" />
|
||||
<meta
|
||||
name="google-site-verification"
|
||||
content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M"
|
||||
/>
|
||||
@ -14,18 +14,25 @@ const {
|
||||
...attrs
|
||||
} = Astro.props;
|
||||
|
||||
const { image, sources } = await getPicture({
|
||||
const { image, sources = [] } =
|
||||
!src ? { image: {}}
|
||||
: (typeof src === "string"
|
||||
? { image: { src } }
|
||||
:
|
||||
await getPicture({
|
||||
src,
|
||||
widths,
|
||||
formats,
|
||||
aspectRatio,
|
||||
});
|
||||
}))
|
||||
---
|
||||
|
||||
{ (src || !image) &&
|
||||
<picture {...attrs}>
|
||||
{sources.map((attrs) => <source {...attrs} {sizes} />)}
|
||||
<img {...image} {loading} {decoding} {alt} class={className} />
|
||||
</picture>
|
||||
}
|
||||
|
||||
<style>
|
||||
img {
|
||||
@ -5,17 +5,24 @@ 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>
|
||||
<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
|
||||
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"
|
||||
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"
|
||||
@ -1,11 +1,14 @@
|
||||
---
|
||||
import { IconArrowDownRight } from "~/components/astro/icons";
|
||||
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">
|
||||
<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>
|
||||
@ -19,33 +22,40 @@ import { IconArrowDownRight } from "~/components/astro/icons";
|
||||
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.
|
||||
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.
|
||||
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.
|
||||
How to install the Astro + Tailwind CSS template?
|
||||
</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.
|
||||
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>
|
||||
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.
|
||||
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>
|
||||
@ -53,31 +63,38 @@ import { IconArrowDownRight } from "~/components/astro/icons";
|
||||
<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>
|
||||
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.
|
||||
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!
|
||||
Galaxies Orion's sword globular star cluster?
|
||||
</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.
|
||||
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>
|
||||
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.
|
||||
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>
|
||||
@ -15,7 +15,7 @@ const {} = Astro.props;
|
||||
</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 dark:border dark:border-slate-800"
|
||||
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">
|
||||
@ -36,7 +36,7 @@ const {} = Astro.props;
|
||||
</p>
|
||||
</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 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">
|
||||
@ -58,7 +58,7 @@ const {} = Astro.props;
|
||||
</p>
|
||||
</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 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">
|
||||
@ -79,7 +79,7 @@ const {} = Astro.props;
|
||||
</p>
|
||||
</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 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">
|
||||
@ -101,7 +101,7 @@ const {} = Astro.props;
|
||||
</p>
|
||||
</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 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">
|
||||
@ -122,7 +122,7 @@ const {} = Astro.props;
|
||||
</p>
|
||||
</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 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">
|
||||
@ -1,66 +1,93 @@
|
||||
---
|
||||
import Picture from "~/components/astro/utils/Picture.astro";
|
||||
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
|
||||
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.
|
||||
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">
|
||||
<div class="mb-6 transition">
|
||||
<Picture
|
||||
src={import("~/assets/images/post-2.jpg")}
|
||||
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">Get started with AstroWind</h3>
|
||||
<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?
|
||||
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">
|
||||
|
||||
<div class="mb-6 transition">
|
||||
<Picture
|
||||
src={import("~/assets/images/post-1.jpg")}
|
||||
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">How to customize the template</h3>
|
||||
<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.
|
||||
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">
|
||||
|
||||
<div class="mb-6 transition">
|
||||
<Picture
|
||||
src={import("~/assets/images/post-3.jpg")}
|
||||
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">Helpful tools and resources to design</h3>
|
||||
<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.
|
||||
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">
|
||||
|
||||
<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"
|
||||
@ -69,10 +96,16 @@ const {} = Astro.props;
|
||||
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>
|
||||
<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?
|
||||
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>
|
||||
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>
|
||||
@ -1,14 +1,21 @@
|
||||
---
|
||||
import { IconTwitter, IconInstagram, IconFacebook, IconArrowRight } from "~/components/astro/icons";
|
||||
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 sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-gray-200 dark:border-slate-800">
|
||||
<div class="sm:col-span-12 lg:col-span-3">
|
||||
<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" href="/">AstroWind</a>
|
||||
<a class="inline-block font-bold text-xl" href="/">AstroWind</a>
|
||||
</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<a
|
||||
@ -23,105 +30,145 @@ const {} = Astro.props;
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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">Products</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="#"
|
||||
<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="#"
|
||||
<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="#"
|
||||
<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="#"
|
||||
<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="#"
|
||||
<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="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">Resources</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="#"
|
||||
<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="#"
|
||||
<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="#"
|
||||
<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="#"
|
||||
<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="#"
|
||||
<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="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">Company</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="#"
|
||||
<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="#"
|
||||
<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="#"
|
||||
<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="#"
|
||||
<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="#"
|
||||
<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="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">Subscribe</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>
|
||||
<label class="block text-sm sr-only" for="newsletter"
|
||||
>Email
|
||||
</label>
|
||||
<div class="relative flex items-center max-w-xs">
|
||||
<input
|
||||
id="newsletter"
|
||||
@ -129,12 +176,18 @@ const {} = Astro.props;
|
||||
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">
|
||||
<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" />
|
||||
<IconArrowRight
|
||||
class="w-5 h-5 text-blue-600 mx-3 flex-shrink-0"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -173,8 +226,16 @@ const {} = Astro.props;
|
||||
</li>
|
||||
</ul>
|
||||
<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/"> onWidget</a>.
|
||||
All rights reserved.
|
||||
<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>
|
||||
@ -1,15 +1,18 @@
|
||||
---
|
||||
import { IconSun, IconGithub, IconMenu } from "~/components/astro/icons";
|
||||
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="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"
|
||||
<span
|
||||
class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white"
|
||||
>AstroWind
|
||||
</span>
|
||||
</a>
|
||||
@ -36,7 +39,9 @@ const {} = Astro.props;
|
||||
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">
|
||||
<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"
|
||||
@ -54,7 +59,7 @@ const {} = Astro.props;
|
||||
<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="#"
|
||||
href="/blog"
|
||||
>Blog
|
||||
</a>
|
||||
</li>
|
||||
@ -67,7 +72,9 @@ const {} = Astro.props;
|
||||
</a>
|
||||
</li>
|
||||
</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">
|
||||
<button
|
||||
type="button"
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
import Picture from "~/components/astro/utils/Picture.astro";
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
@ -7,23 +7,30 @@ const {} = Astro.props;
|
||||
<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">
|
||||
<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"
|
||||
<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.
|
||||
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-xs max-w-none flex justify-center">
|
||||
<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"
|
||||
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"
|
||||
@ -33,7 +40,7 @@ const {} = Astro.props;
|
||||
<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="#"
|
||||
href="/blog/"
|
||||
>Learn more
|
||||
</a>
|
||||
</div>
|
||||
@ -45,7 +52,7 @@ const {} = Astro.props;
|
||||
<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"
|
||||
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"
|
||||
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>
|
||||
@ -10,16 +10,18 @@ const {} = Astro.props;
|
||||
<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.
|
||||
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.
|
||||
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"
|
||||
class="btn bg-blue-600 hover:bg-blue-700 text-white font-bold"
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
@ -40,10 +42,13 @@ const {} = Astro.props;
|
||||
</span>
|
||||
</div>
|
||||
<div class="px-4">
|
||||
<h3 class="mb-4 text-xl font-semibold">Responsive Elements</h3>
|
||||
<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.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Morbi sagittis, quam nec venenatis lobortis, mi risus tempus
|
||||
nulla.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
@ -58,8 +63,9 @@ const {} = Astro.props;
|
||||
<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.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Morbi sagittis, quam nec venenatis lobortis, mi risus tempus
|
||||
nulla.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
@ -74,8 +80,9 @@ const {} = Astro.props;
|
||||
<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.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Morbi sagittis, quam nec venenatis lobortis, mi risus tempus
|
||||
nulla.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
import Picture from "~/components/astro/utils/Picture.astro";
|
||||
import Picture from "~/components/core/Picture.astro";
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
@ -9,7 +9,9 @@ const {} = Astro.props;
|
||||
<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">
|
||||
<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"
|
||||
@ -33,18 +35,23 @@ const {} = Astro.props;
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
</div>
|
||||
<div class="pt-1 pb-8">
|
||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
|
||||
<p class="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.
|
||||
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">
|
||||
<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"
|
||||
@ -68,17 +75,22 @@ const {} = Astro.props;
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
</div>
|
||||
<div class="pt-1 pb-8">
|
||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
|
||||
<p class="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.
|
||||
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">
|
||||
<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"
|
||||
@ -102,17 +114,22 @@ const {} = Astro.props;
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
</div>
|
||||
<div class="pt-1 pb-8">
|
||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
|
||||
<p class="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.
|
||||
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">
|
||||
<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"
|
||||
@ -132,7 +149,9 @@ const {} = Astro.props;
|
||||
</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="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">
|
||||
Ready!
|
||||
</p>
|
||||
<p class="text-gray-700"></p>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user