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
|
🚀 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">
|
<div class="mt-6">
|
||||||
<a
|
<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"
|
href="https://github.com/onwidget/astrowind"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
|
|||||||
@ -55,7 +55,7 @@ const items = [
|
|||||||
{subitems.map(({ question, answer }) => (
|
{subitems.map(({ question, answer }) => (
|
||||||
<div>
|
<div>
|
||||||
<p class="mb-4 text-xl font-bold">
|
<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}
|
{question}
|
||||||
</p>
|
</p>
|
||||||
{answer.split('\n\n').map((paragraph) => (
|
{answer.split('\n\n').map((paragraph) => (
|
||||||
|
|||||||
@ -2,72 +2,81 @@
|
|||||||
import { Icon } from 'astro-icon';
|
import { Icon } from 'astro-icon';
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
{
|
[
|
||||||
title: 'Headers',
|
{
|
||||||
description:
|
title: 'Integration with Tailwind CSS',
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
description:
|
||||||
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',
|
{
|
||||||
description:
|
title: 'Ready-to-use Components',
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
description:
|
||||||
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',
|
{
|
||||||
description:
|
title: 'Best Practices',
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
description:
|
||||||
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: 'Call-to-Action',
|
],
|
||||||
description:
|
[
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
{
|
||||||
icon: 'flat-color-icons:video-projector',
|
title: 'Excellent Page Speed',
|
||||||
},
|
description:
|
||||||
{
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||||
title: 'Pricing',
|
icon: 'tabler:rocket',
|
||||||
description:
|
},
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
{
|
||||||
icon: 'flat-color-icons:calculator',
|
title: 'Frequently updated',
|
||||||
},
|
description:
|
||||||
{
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||||
title: 'Testimonial',
|
icon: 'tabler:arrows-right-left',
|
||||||
description:
|
},
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
{
|
||||||
icon: 'flat-color-icons:voice-presentation',
|
title: 'Open to new ideas and contributions',
|
||||||
},
|
description:
|
||||||
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
||||||
|
icon: 'tabler:bulb',
|
||||||
|
},
|
||||||
|
],
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="relative">
|
<section class="scroll-mt-16 border-t border-gray-200 dark:border-slate-800" id="features">
|
||||||
<div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
|
<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
|
||||||
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
|
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||||
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
|
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Features</p>
|
||||||
<div class="mb-8 text-center">
|
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||||
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Components</p>
|
What's interesting about <span class="whitespace-nowrap">AstroWind</span>
|
||||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
</h2>
|
||||||
Most used widgets
|
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
|
||||||
</h2>
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa
|
||||||
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">
|
quae.
|
||||||
Provides frequently used components for building websites using Tailwind CSS
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</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) => (
|
||||||
items.map(({ title, description, icon }) => (
|
<div class="space-y-8 sm:px-8">
|
||||||
<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">
|
{subitems.map(({ title, description, icon }) => (
|
||||||
<div class="flex items-center mb-4">
|
<div class="flex flex-row max-w-md">
|
||||||
<Icon name={icon} class="w-12 h-12" />
|
<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">
|
||||||
<div class="ml-4 text-xl font-bold">{title}</div>
|
{icon && <Icon name={icon} class="w-6 h-6 text-white icon-light" />}
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
<p class="text-gray-500 dark:text-gray-400 text-md">{description}</p>
|
))}
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,84 +2,72 @@
|
|||||||
import { Icon } from 'astro-icon';
|
import { Icon } from 'astro-icon';
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
[
|
{
|
||||||
{
|
title: 'Headers',
|
||||||
title: 'Integration with Tailwind CSS',
|
description:
|
||||||
description:
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
icon: 'flat-color-icons:home',
|
||||||
icon: 'tabler:brand-tailwind',
|
},
|
||||||
},
|
{
|
||||||
{
|
title: 'Footers',
|
||||||
title: 'Ready-to-use Components',
|
description:
|
||||||
description:
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
icon: 'flat-color-icons:faq',
|
||||||
icon: 'tabler:components',
|
},
|
||||||
},
|
{
|
||||||
{
|
title: 'Features',
|
||||||
title: 'Best Practices',
|
description:
|
||||||
description:
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
icon: 'flat-color-icons:video-projector',
|
||||||
icon: 'tabler:list-check',
|
},
|
||||||
},
|
{
|
||||||
],
|
title: 'Call-to-Action',
|
||||||
[
|
description:
|
||||||
{
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||||
title: 'Excellent Page Speed',
|
icon: 'flat-color-icons:video-projector',
|
||||||
description:
|
},
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
{
|
||||||
icon: 'tabler:rocket',
|
title: 'Pricing',
|
||||||
},
|
description:
|
||||||
{
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||||
title: 'Frequently updated',
|
icon: 'flat-color-icons:calculator',
|
||||||
description:
|
},
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
{
|
||||||
icon: 'tabler:arrows-right-left',
|
title: 'Testimonial',
|
||||||
},
|
description:
|
||||||
{
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.',
|
||||||
title: 'Open to new ideas and contributions',
|
icon: 'flat-color-icons:voice-presentation',
|
||||||
description:
|
},
|
||||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
|
|
||||||
icon: 'tabler:ballon',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="scroll-mt-16" id="features">
|
<section class="relative">
|
||||||
<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="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
|
||||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
|
||||||
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Features</p>
|
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
|
||||||
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
<div class="mb-8 text-center">
|
||||||
What's interesting about <span
|
<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Components</p>
|
||||||
class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500 whitespace-nowrap"
|
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||||
>AstroWind</span
|
Most used widgets
|
||||||
>
|
</h2>
|
||||||
</h2>
|
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">
|
||||||
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
|
Provides frequently used components for building websites using Tailwind CSS
|
||||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa
|
</p>
|
||||||
quae.
|
</div>
|
||||||
</p>
|
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
|
||||||
</div>
|
{
|
||||||
<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">
|
||||||
items.map((subitems) => (
|
<div class="flex items-center mb-4">
|
||||||
<div class="space-y-8 sm:px-8">
|
<Icon name={icon} class="w-12 h-12" />
|
||||||
{subitems.map(({ title, description, icon }) => (
|
|
||||||
<div class="flex flex-row max-w-md">
|
<div class="ml-4 text-xl font-bold">{title}</div>
|
||||||
<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" />}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="mb-3 text-xl font-bold">{title}</h3>
|
|
||||||
<p>{description}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
<p class="text-gray-500 dark:text-gray-400 text-md">{description}</p>
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -21,7 +21,7 @@ import { Icon } from 'astro-icon';
|
|||||||
|
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<a
|
<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"
|
href="https://github.com/onwidget/astrowind"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
|
|||||||
@ -4,7 +4,7 @@ import Logo from '~/components/atoms/Logo.astro';
|
|||||||
import ToggleTheme from '~/components/core/ToggleTheme.astro';
|
import ToggleTheme from '~/components/core/ToggleTheme.astro';
|
||||||
import ToggleMenu from '~/components/core/ToggleMenu.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
|
<header
|
||||||
@ -77,7 +77,7 @@ import { getHomePermalink, getBlogPermalink, getPermalink, getRelativelink } fro
|
|||||||
<a
|
<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"
|
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"
|
aria-label="RSS Feed"
|
||||||
href={getRelativelink('/rss.xml')}
|
href={getRelativeLink('/rss.xml')}
|
||||||
>
|
>
|
||||||
<Icon name="tabler:rss" class="w-5 h-5" />
|
<Icon name="tabler:rss" class="w-5 h-5" />
|
||||||
</a>
|
</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">
|
<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">
|
<h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4 font-heading">
|
||||||
Your website with
|
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
|
<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
|
>Tailwind CSS</span
|
||||||
>
|
>
|
||||||
</h1>
|
</h1>
|
||||||
<div class="max-w-3xl mx-auto">
|
<div class="max-w-3xl mx-auto">
|
||||||
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
|
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
|
||||||
AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. 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
|
designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span><span
|
||||||
class="hidden sm:inline"
|
class="hidden sm:inline"
|
||||||
>Dark Mode, Great Page Speed, image optimization, sitemap generation and more.</span
|
>Dark Mode, Great Page Speed, image optimization, sitemap generation and more.</span
|
||||||
>
|
>
|
||||||
</p>
|
</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">
|
<div class="flex w-full sm:w-auto">
|
||||||
<a
|
<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"
|
href="https://github.com/onwidget/astrowind"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
@ -36,7 +36,7 @@ import Picture from '~/components/core/Picture.astro';
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex w-full sm:w-auto">
|
<div class="flex w-full sm:w-auto">
|
||||||
<a
|
<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
|
href="#features">Learn more</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@ -44,12 +44,12 @@ import Picture from '~/components/core/Picture.astro';
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="relative mb-8 m-auto max-w-3xl">
|
<div class="relative m-auto max-w-4xl">
|
||||||
<Picture
|
<Picture
|
||||||
src={import('~/assets/images/hero.jpg')}
|
src={import('~/assets/images/hero.jpg')}
|
||||||
class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700 w-full"
|
class="mx-auto rounded-md bg-gray-400 dark:bg-slate-700 w-full"
|
||||||
widths={[400, 768]}
|
widths={[400, 768, 1480]}
|
||||||
sizes="(max-width: 767px) 400px, 768px"
|
sizes="(max-width: 767px) 400px, (max-width: 1479px) 768px, 1480px"
|
||||||
alt="Hero Image"
|
alt="Hero Image"
|
||||||
aspectRatio="16:9"
|
aspectRatio="16:9"
|
||||||
loading="eager"
|
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">
|
||||||
<div class="flex flex-col items-center mr-4">
|
<div class="flex flex-col items-center mr-4">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
|
<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-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>
|
</div>
|
||||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pt-1 pb-8">
|
<div class="pt-1 pb-8">
|
||||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
|
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
|
||||||
<p>
|
<p class="text-gray-600 dark:text-slate-400">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
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
|
risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce
|
||||||
sit amet dui tellus.
|
sit amet dui tellus.
|
||||||
@ -30,32 +30,15 @@ import Picture from '~/components/core/Picture.astro';
|
|||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="flex flex-col items-center mr-4">
|
<div class="flex flex-col items-center mr-4">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
|
<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-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>
|
</div>
|
||||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pt-1 pb-8">
|
<div class="pt-1 pb-8">
|
||||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
|
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
|
||||||
<p>
|
<p 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-secondary-500 border-2">
|
|
||||||
<Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
|
|
||||||
</div>
|
|
||||||
<div class="pt-1 pb-8">
|
|
||||||
<p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
|
||||||
risus tempus nulla, sed porttitor est nibh at nulla.
|
risus tempus nulla, sed porttitor est nibh at nulla.
|
||||||
</p>
|
</p>
|
||||||
@ -65,13 +48,30 @@ import Picture from '~/components/core/Picture.astro';
|
|||||||
<div class="flex flex-col items-center mr-4">
|
<div class="flex flex-col items-center mr-4">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-600 border-2">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="pt-1">
|
<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>
|
<p class="text-gray-600 dark:text-slate-400"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -8,7 +8,7 @@ const { meta = {} } = Astro.props;
|
|||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!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>
|
<head>
|
||||||
<MetaTags {...meta} />
|
<MetaTags {...meta} />
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@ -2,11 +2,13 @@
|
|||||||
import Layout from '~/layouts/BaseLayout.astro';
|
import Layout from '~/layouts/BaseLayout.astro';
|
||||||
import Header from '~/components/widgets/Header.astro';
|
import Header from '~/components/widgets/Header.astro';
|
||||||
import Footer from '~/components/widgets/Footer.astro';
|
import Footer from '~/components/widgets/Footer.astro';
|
||||||
|
import Banner from '~/components/widgets/Banner.astro';
|
||||||
|
|
||||||
const { meta } = Astro.props;
|
const { meta } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout {meta}>
|
<Layout {meta}>
|
||||||
|
<Banner />
|
||||||
<Header />
|
<Header />
|
||||||
<main>
|
<main>
|
||||||
<slot />
|
<slot />
|
||||||
|
|||||||
@ -33,8 +33,8 @@ const meta = {
|
|||||||
|
|
||||||
<Layout {meta}>
|
<Layout {meta}>
|
||||||
<Fragment slot="title">
|
<Fragment slot="title">
|
||||||
News and step-by-step guides about
|
News and tutorials about
|
||||||
<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">AstroWind</span>
|
<span>AstroWind</span>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
<BlogList posts={page.data} />
|
<BlogList posts={page.data} />
|
||||||
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
|
<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 Layout from '~/layouts/PageLayout.astro';
|
||||||
|
|
||||||
import Hero from '~/components/widgets/Hero.astro';
|
import Hero from '~/components/widgets/Hero.astro';
|
||||||
|
import Note from '~/components/widgets/Note.astro';
|
||||||
import Features from '~/components/widgets/Features.astro';
|
import Features from '~/components/widgets/Features.astro';
|
||||||
import Features2 from '~/components/widgets/Features2.astro';
|
import Features2 from '~/components/widgets/Features2.astro';
|
||||||
import Steps from '~/components/widgets/Steps.astro';
|
import Steps from '~/components/widgets/Steps.astro';
|
||||||
@ -22,6 +23,7 @@ const meta = {
|
|||||||
|
|
||||||
<Layout {meta}>
|
<Layout {meta}>
|
||||||
<Hero />
|
<Hero />
|
||||||
|
<Note />
|
||||||
<Features />
|
<Features />
|
||||||
<Steps />
|
<Steps />
|
||||||
<Features2 />
|
<Features2 />
|
||||||
|
|||||||
Reference in New Issue
Block a user