Basic design refacctorization
This commit is contained in:
prototypa
@ -1,6 +1,6 @@
|
||||
---
|
||||
---
|
||||
|
||||
<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-xl font-bold text-gray-900 whitespace-nowrap dark:text-white">
|
||||
🚀 AstroWind</span
|
||||
>
|
||||
|
||||
27
src/components/widgets/Banner.astro
Normal file
27
src/components/widgets/Banner.astro
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
import { getPermalink } from '~/utils/permalinks';
|
||||
---
|
||||
|
||||
<div
|
||||
class="hidden md:block bg-primary-50 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-100 text-sm px-3 py-2 text-gray-800 overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
<span class="text-xs py-0.5 px-1 bg-primary-200 dark:bg-slate-600 font-semibold">NEW</span>
|
||||
<a
|
||||
href={getPermalink('get-started-website-with-astro-tailwind-css', 'post')}
|
||||
class="underline underline-offset-2 decoration-1 decoration-dotted"
|
||||
>Get started with AstroWind to create a website using Astro and Tailwind CSS »</a
|
||||
>
|
||||
<a
|
||||
target="_blank"
|
||||
class="float-right"
|
||||
title="Follow @onWidget on Twitter"
|
||||
href="https://twitter.com/intent/user?screen_name=onwidget"
|
||||
>
|
||||
<img
|
||||
src="https://img.shields.io/twitter/url/https/twitter.com/onwidget.svg?style=social&label=Follow%20%40onWidget"
|
||||
alt="Follow @onWidget"
|
||||
width="125"
|
||||
height="20"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
@ -16,7 +16,7 @@ import { Icon } from 'astro-icon';
|
||||
|
||||
<div class="mt-6">
|
||||
<a
|
||||
class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0"
|
||||
class="btn btn-primary mb-4 sm:mb-0"
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
|
||||
@ -55,7 +55,7 @@ const items = [
|
||||
{subitems.map(({ question, answer }) => (
|
||||
<div>
|
||||
<p class="mb-4 text-xl font-bold">
|
||||
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block icon-bold" />
|
||||
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-500 inline-block" />
|
||||
{question}
|
||||
</p>
|
||||
{answer.split('\n\n').map((paragraph) => (
|
||||
|
||||
@ -2,72 +2,81 @@
|
||||
import { Icon } from 'astro-icon';
|
||||
|
||||
const items = [
|
||||
[
|
||||
{
|
||||
title: 'Headers',
|
||||
title: 'Integration with Tailwind CSS',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:home',
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:brand-tailwind',
|
||||
},
|
||||
{
|
||||
title: 'Footers',
|
||||
title: 'Ready-to-use Components',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:faq',
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:components',
|
||||
},
|
||||
{
|
||||
title: 'Features',
|
||||
title: 'Best Practices',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:video-projector',
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:list-check',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
title: 'Excellent Page Speed',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:rocket',
|
||||
},
|
||||
{
|
||||
title: 'Call-to-Action',
|
||||
title: 'Frequently updated',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:video-projector',
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:arrows-right-left',
|
||||
},
|
||||
{
|
||||
title: 'Pricing',
|
||||
title: 'Open to new ideas and contributions',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:calculator',
|
||||
},
|
||||
{
|
||||
title: 'Testimonial',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:voice-presentation',
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:bulb',
|
||||
},
|
||||
],
|
||||
];
|
||||
---
|
||||
|
||||
<section class="relative">
|
||||
<div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
|
||||
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
|
||||
<div class="mb-8 text-center">
|
||||
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Components</p>
|
||||
<section class="scroll-mt-16 border-t border-gray-200 dark:border-slate-800" id="features">
|
||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
|
||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Features</p>
|
||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||
Most used widgets
|
||||
What's interesting about <span class="whitespace-nowrap">AstroWind</span>
|
||||
</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 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 gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
|
||||
<div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
|
||||
{
|
||||
items.map(({ title, description, icon }) => (
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800">
|
||||
<div class="flex items-center mb-4">
|
||||
<Icon name={icon} class="w-12 h-12" />
|
||||
|
||||
<div class="ml-4 text-xl font-bold">{title}</div>
|
||||
items.map((subitems) => (
|
||||
<div class="space-y-8 sm:px-8">
|
||||
{subitems.map(({ title, description, icon }) => (
|
||||
<div class="flex flex-row max-w-md">
|
||||
<div class="mb-4 mr-4">
|
||||
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-500 dark:bg-primary-700">
|
||||
{icon && <Icon name={icon} class="w-6 h-6 text-white icon-light" />}
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">{description}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">{title}</h3>
|
||||
<p class="text-gray-600 dark:text-slate-400">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -2,84 +2,72 @@
|
||||
import { Icon } from 'astro-icon';
|
||||
|
||||
const items = [
|
||||
[
|
||||
{
|
||||
title: 'Integration with Tailwind CSS',
|
||||
title: 'Headers',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:brand-tailwind',
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:home',
|
||||
},
|
||||
{
|
||||
title: 'Ready-to-use Components',
|
||||
title: 'Footers',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:components',
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:faq',
|
||||
},
|
||||
{
|
||||
title: 'Best Practices',
|
||||
title: 'Features',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:list-check',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
title: 'Excellent Page Speed',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:rocket',
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:video-projector',
|
||||
},
|
||||
{
|
||||
title: 'Frequently updated',
|
||||
title: 'Call-to-Action',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:arrows-right-left',
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:video-projector',
|
||||
},
|
||||
{
|
||||
title: 'Open to new ideas and contributions',
|
||||
title: 'Pricing',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||
icon: 'tabler:ballon',
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:calculator',
|
||||
},
|
||||
{
|
||||
title: 'Testimonial',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||
icon: 'flat-color-icons:voice-presentation',
|
||||
},
|
||||
],
|
||||
];
|
||||
---
|
||||
|
||||
<section class="scroll-mt-16" id="features">
|
||||
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-primary-50 dark:bg-slate-800">
|
||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Features</p>
|
||||
<section class="relative">
|
||||
<div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
|
||||
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
|
||||
<div class="mb-8 text-center">
|
||||
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Components</p>
|
||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||
What's interesting about <span
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 whitespace-nowrap"
|
||||
>AstroWind</span
|
||||
>
|
||||
Most used widgets
|
||||
</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 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 mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
|
||||
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
|
||||
{
|
||||
items.map((subitems) => (
|
||||
<div class="space-y-8 sm:px-8">
|
||||
{subitems.map(({ title, description, icon }) => (
|
||||
<div class="flex flex-row max-w-md">
|
||||
<div class="mb-4 mr-4">
|
||||
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-500">
|
||||
{icon && <Icon name={icon} class="w-5 h-5 text-white" />}
|
||||
items.map(({ title, description, icon }) => (
|
||||
<div class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800">
|
||||
<div class="flex items-center mb-4">
|
||||
<Icon name={icon} class="w-12 h-12" />
|
||||
|
||||
<div class="ml-4 text-xl font-bold">{title}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-xl font-bold">{title}</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<p class="text-gray-500 dark:text-gray-400 text-md">{description}</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -21,7 +21,7 @@ import { Icon } from 'astro-icon';
|
||||
|
||||
<div class="w-full">
|
||||
<a
|
||||
class="btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0"
|
||||
class="btn btn-primary mb-4 sm:mb-0"
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
|
||||
@ -4,7 +4,7 @@ import Logo from '~/components/atoms/Logo.astro';
|
||||
import ToggleTheme from '~/components/core/ToggleTheme.astro';
|
||||
import ToggleMenu from '~/components/core/ToggleMenu.astro';
|
||||
|
||||
import { getHomePermalink, getBlogPermalink, getPermalink, getRelativelink } from '~/utils/permalinks';
|
||||
import { getHomePermalink, getBlogPermalink, getPermalink, getRelativeLink } from '~/utils/permalinks';
|
||||
---
|
||||
|
||||
<header
|
||||
@ -77,7 +77,7 @@ import { getHomePermalink, getBlogPermalink, getPermalink, getRelativelink } fro
|
||||
<a
|
||||
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
|
||||
aria-label="RSS Feed"
|
||||
href={getRelativelink('/rss.xml')}
|
||||
href={getRelativeLink('/rss.xml')}
|
||||
>
|
||||
<Icon name="tabler:rss" class="w-5 h-5" />
|
||||
</a>
|
||||
|
||||
@ -9,24 +9,24 @@ import Picture from '~/components/core/Picture.astro';
|
||||
<div class="text-center pb-10 md:pb-16 max-w-5xl mx-auto">
|
||||
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||
Your website with
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">Astro</span> +
|
||||
<span>Astro</span> +
|
||||
<span
|
||||
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 sm:whitespace-nowrap"
|
||||
class="sm:whitespace-nowrap"
|
||||
>Tailwind CSS</span
|
||||
>
|
||||
</h1>
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
|
||||
AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It has been
|
||||
<span class="font-semibold">AstroWind</span> is a production ready template to start your new website using <em>Astro</em> + <em>Tailwind CSS</em>. It has been
|
||||
designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span><span
|
||||
class="hidden sm:inline"
|
||||
>Dark Mode, Great Page Speed, image optimization, sitemap generation and more.</span
|
||||
>
|
||||
</p>
|
||||
<div class="max-w-none px-6 flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
|
||||
<div class="max-w-sm m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
|
||||
<div class="flex w-full sm:w-auto">
|
||||
<a
|
||||
class="btn text-white border border-primary-600 bg-primary-600 hover:bg-primary-800 hover:border-primary-800 sm:mb-0 w-full"
|
||||
class="btn btn-primary sm:mb-0 w-full"
|
||||
href="https://github.com/onwidget/astrowind"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
@ -36,7 +36,7 @@ import Picture from '~/components/core/Picture.astro';
|
||||
</div>
|
||||
<div class="flex w-full sm:w-auto">
|
||||
<a
|
||||
class="btn text-white bg-gray-900 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-800 w-full"
|
||||
class="btn w-full"
|
||||
href="#features">Learn more</a
|
||||
>
|
||||
</div>
|
||||
@ -44,12 +44,12 @@ import Picture from '~/components/core/Picture.astro';
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="relative mb-8 m-auto max-w-3xl">
|
||||
<div class="relative m-auto max-w-4xl">
|
||||
<Picture
|
||||
src={import('~/assets/images/hero.jpg')}
|
||||
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700 w-full"
|
||||
widths={[400, 768]}
|
||||
sizes="(max-width: 767px) 400px, 768px"
|
||||
class="mx-auto rounded-md bg-gray-400 dark:bg-slate-700 w-full"
|
||||
widths={[400, 768, 1480]}
|
||||
sizes="(max-width: 767px) 400px, (max-width: 1479px) 768px, 1480px"
|
||||
alt="Hero Image"
|
||||
aspectRatio="16:9"
|
||||
loading="eager"
|
||||
|
||||
10
src/components/widgets/Note.astro
Normal file
10
src/components/widgets/Note.astro
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon';
|
||||
---
|
||||
|
||||
<section class="bg-primary-800 text-white dark:bg-primary-900">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
|
||||
<span class="font-bold"> <Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span> Simplicity, good
|
||||
practices and high performance
|
||||
</div>
|
||||
</section>
|
||||
@ -12,15 +12,15 @@ import Picture from '~/components/core/Picture.astro';
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
|
||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
|
||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
</div>
|
||||
<div class="pt-1 pb-8">
|
||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
|
||||
<p>
|
||||
<p class="text-gray-600 dark:text-slate-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce
|
||||
sit amet dui tellus.
|
||||
@ -30,32 +30,15 @@ import Picture from '~/components/core/Picture.astro';
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
|
||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
|
||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
</div>
|
||||
<div class="pt-1 pb-8">
|
||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla, sed porttitor est nibh at nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
|
||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
</div>
|
||||
<div class="pt-1 pb-8">
|
||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
|
||||
<p>
|
||||
<p class="text-gray-600 dark:text-slate-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla, sed porttitor est nibh at nulla.
|
||||
</p>
|
||||
@ -65,13 +48,30 @@ import Picture from '~/components/core/Picture.astro';
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
|
||||
<Icon name="tabler:check" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||
</div>
|
||||
<div class="pt-1 pb-8">
|
||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
|
||||
<p class="text-gray-600 dark:text-slate-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||
risus tempus nulla, sed porttitor est nibh at nulla.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div>
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2 bg-primary-600">
|
||||
<Icon name="tabler:check" class="w-6 h-6 text-white dark:text-slate-200" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-1">
|
||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Ready!</p>
|
||||
<p class="text-gray-700"></p>
|
||||
<p class="text-gray-600 dark:text-slate-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,7 @@ const { meta = {} } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="motion-safe:scroll-smooth font-light 2xl:text-[20px]">
|
||||
<html lang="en" class="motion-safe:scroll-smooth 2xl:text-[20px]">
|
||||
<head>
|
||||
<MetaTags {...meta} />
|
||||
</head>
|
||||
|
||||
@ -2,11 +2,13 @@
|
||||
import Layout from '~/layouts/BaseLayout.astro';
|
||||
import Header from '~/components/widgets/Header.astro';
|
||||
import Footer from '~/components/widgets/Footer.astro';
|
||||
import Banner from '~/components/widgets/Banner.astro';
|
||||
|
||||
const { meta } = Astro.props;
|
||||
---
|
||||
|
||||
<Layout {meta}>
|
||||
<Banner />
|
||||
<Header />
|
||||
<main>
|
||||
<slot />
|
||||
|
||||
@ -33,8 +33,8 @@ const meta = {
|
||||
|
||||
<Layout {meta}>
|
||||
<Fragment slot="title">
|
||||
News and step-by-step guides about
|
||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">AstroWind</span>
|
||||
News and tutorials about
|
||||
<span>AstroWind</span>
|
||||
</Fragment>
|
||||
<BlogList posts={page.data} />
|
||||
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
|
||||
|
||||
@ -4,6 +4,7 @@ import { getCanonical, getHomePermalink } from '~/utils/permalinks';
|
||||
import Layout from '~/layouts/PageLayout.astro';
|
||||
|
||||
import Hero from '~/components/widgets/Hero.astro';
|
||||
import Note from '~/components/widgets/Note.astro';
|
||||
import Features from '~/components/widgets/Features.astro';
|
||||
import Features2 from '~/components/widgets/Features2.astro';
|
||||
import Steps from '~/components/widgets/Steps.astro';
|
||||
@ -22,6 +23,7 @@ const meta = {
|
||||
|
||||
<Layout {meta}>
|
||||
<Hero />
|
||||
<Note />
|
||||
<Features />
|
||||
<Steps />
|
||||
<Features2 />
|
||||
|
||||
Reference in New Issue
Block a user