From 97fe6b119c13f6a671defbeac123d21f00f9977b Mon Sep 17 00:00:00 2001 From: prototypa Date: Tue, 22 Nov 2022 12:49:42 -0500 Subject: [PATCH] Basic design refacctorization --- src/components/atoms/Logo.astro | 2 +- src/components/widgets/Banner.astro | 27 +++++ src/components/widgets/CallToAction.astro | 2 +- src/components/widgets/FAQs.astro | 2 +- src/components/widgets/Features.astro | 133 +++++++++++---------- src/components/widgets/Features2.astro | 136 ++++++++++------------ src/components/widgets/Features3.astro | 2 +- src/components/widgets/Header.astro | 4 +- src/components/widgets/Hero.astro | 20 ++-- src/components/widgets/Note.astro | 10 ++ src/components/widgets/Steps.astro | 50 ++++---- src/layouts/BaseLayout.astro | 2 +- src/layouts/PageLayout.astro | 2 + src/pages/[...blog]/[...page].astro | 4 +- src/pages/index.astro | 2 + 15 files changed, 218 insertions(+), 180 deletions(-) create mode 100644 src/components/widgets/Banner.astro create mode 100644 src/components/widgets/Note.astro diff --git a/src/components/atoms/Logo.astro b/src/components/atoms/Logo.astro index 6a9c03a..67b78ff 100644 --- a/src/components/atoms/Logo.astro +++ b/src/components/atoms/Logo.astro @@ -1,6 +1,6 @@ --- --- - + ๐Ÿš€ AstroWind diff --git a/src/components/widgets/Banner.astro b/src/components/widgets/Banner.astro new file mode 100644 index 0000000..8148936 --- /dev/null +++ b/src/components/widgets/Banner.astro @@ -0,0 +1,27 @@ +--- +import { getPermalink } from '~/utils/permalinks'; +--- + + diff --git a/src/components/widgets/CallToAction.astro b/src/components/widgets/CallToAction.astro index aebf4ca..fc7d45e 100644 --- a/src/components/widgets/CallToAction.astro +++ b/src/components/widgets/CallToAction.astro @@ -16,7 +16,7 @@ import { Icon } from 'astro-icon';
(

- + {question}

{answer.split('\n\n').map((paragraph) => ( diff --git a/src/components/widgets/Features.astro b/src/components/widgets/Features.astro index f93ae74..cedd644 100644 --- a/src/components/widgets/Features.astro +++ b/src/components/widgets/Features.astro @@ -2,72 +2,81 @@ import { Icon } from 'astro-icon'; const items = [ - { - title: 'Headers', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', - icon: 'flat-color-icons:home', - }, - { - title: 'Footers', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', - icon: 'flat-color-icons:faq', - }, - { - title: 'Features', - 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: '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: 'Pricing', - 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', - }, + [ + { + title: 'Integration with Tailwind CSS', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', + icon: 'tabler:brand-tailwind', + }, + { + title: 'Ready-to-use Components', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', + icon: 'tabler:components', + }, + { + title: 'Best Practices', + 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', + }, + { + title: 'Frequently updated', + 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: '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', + }, + ], ]; --- -
- -
-
-
-

Components

-

- Most used widgets -

-

- Provides frequently used components for building websites using Tailwind CSS -

-
-
- { - items.map(({ title, description, icon }) => ( -
-
- - -
{title}
+
+
+
+

Features

+

+ What's interesting about AstroWind +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa + quae. +

+
+
+ { + items.map((subitems) => ( +
+ {subitems.map(({ title, description, icon }) => ( +
+
+
+ {icon && } +
+
+
+

{title}

+

{description}

+
-

{description}

-
- )) - } -
+ ))} +
+ )) + }
diff --git a/src/components/widgets/Features2.astro b/src/components/widgets/Features2.astro index be9d7da..f93ae74 100644 --- a/src/components/widgets/Features2.astro +++ b/src/components/widgets/Features2.astro @@ -2,84 +2,72 @@ import { Icon } from 'astro-icon'; const items = [ - [ - { - title: 'Integration with Tailwind CSS', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', - icon: 'tabler:brand-tailwind', - }, - { - title: 'Ready-to-use Components', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', - icon: 'tabler:components', - }, - { - title: 'Best Practices', - 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', - }, - { - title: 'Frequently updated', - 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: '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:ballon', - }, - ], + { + title: 'Headers', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', + icon: 'flat-color-icons:home', + }, + { + title: 'Footers', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.', + icon: 'flat-color-icons:faq', + }, + { + title: 'Features', + 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: '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: 'Pricing', + 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', + }, ]; --- -
-
-
-

Features

-

- What's interesting about AstroWind -

-

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa - quae. -

-
-
- { - items.map((subitems) => ( -
- {subitems.map(({ title, description, icon }) => ( -
-
-
- {icon && } -
-
-
-

{title}

-

{description}

-
+
+ +
+
+
+

Components

+

+ Most used widgets +

+

+ Provides frequently used components for building websites using Tailwind CSS +

+
+
+ { + items.map(({ title, description, icon }) => ( +
+
+ + +
{title}
- ))} -
- )) - } +

{description}

+
+ )) + } +
diff --git a/src/components/widgets/Features3.astro b/src/components/widgets/Features3.astro index 3381e6a..c03a921 100644 --- a/src/components/widgets/Features3.astro +++ b/src/components/widgets/Features3.astro @@ -21,7 +21,7 @@ import { Icon } from 'astro-icon';
diff --git a/src/components/widgets/Hero.astro b/src/components/widgets/Hero.astro index 65e730e..e11103d 100644 --- a/src/components/widgets/Hero.astro +++ b/src/components/widgets/Hero.astro @@ -9,24 +9,24 @@ import Picture from '~/components/core/Picture.astro';

Your website with - Astro + + Astro + Tailwind CSS

- AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It has been + AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It has been designed following Best Practices, SEO, Accessibility, ...

-
+
Learn more
@@ -44,12 +44,12 @@ import Picture from '~/components/core/Picture.astro';
-
+
+
+ Philosophy: Simplicity, good + practices and high performance +
+ diff --git a/src/components/widgets/Steps.astro b/src/components/widgets/Steps.astro index 3ee8b5f..87132bb 100644 --- a/src/components/widgets/Steps.astro +++ b/src/components/widgets/Steps.astro @@ -12,15 +12,15 @@ import Picture from '~/components/core/Picture.astro';
-
- +
+

Step 1

-

+

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';

-
- +
+

Step 2

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi - risus tempus nulla, sed porttitor est nibh at nulla. -

-
-
-
-
-
-
- -
-
-
-
-
-

Step 3

-

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla.

@@ -65,13 +48,30 @@ import Picture from '~/components/core/Picture.astro';
- + +
+
+
+
+
+

Step 3

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi + risus tempus nulla, sed porttitor est nibh at nulla. +

+
+
+
+
+
+
+

Ready!

-

+

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 425f7fb..a563c08 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -8,7 +8,7 @@ const { meta = {} } = Astro.props; --- - + diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro index b7924d1..f19990a 100644 --- a/src/layouts/PageLayout.astro +++ b/src/layouts/PageLayout.astro @@ -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; --- +
diff --git a/src/pages/[...blog]/[...page].astro b/src/pages/[...blog]/[...page].astro index 24eb2ee..44bc622 100644 --- a/src/pages/[...blog]/[...page].astro +++ b/src/pages/[...blog]/[...page].astro @@ -33,8 +33,8 @@ const meta = { - News and step-by-step guides about - AstroWind + News and tutorials about + AstroWind diff --git a/src/pages/index.astro b/src/pages/index.astro index 6b3ac33..e2ff48d 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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 = { +