diff --git a/src/components/widgets/Note.astro b/src/components/widgets/Note.astro index 6543b4f0a..d615b5bae 100644 --- a/src/components/widgets/Note.astro +++ b/src/components/widgets/Note.astro @@ -1,11 +1,24 @@ --- import { Icon } from 'astro-icon/components'; + +export interface Props { + note?: string; + icon?: string; + subtitle?: string; +} + +const { + note = await Astro.slots.render('note'), + icon = await Astro.slots.render('icon'), + subtitle = await Astro.slots.render('subtitle'), +} = Astro.props; ---
- Philosophy: Simplicity, Best Practices and High Performance + {subtitle}: + {note}
diff --git a/src/components/widgets/WidgetTitle.astro b/src/components/widgets/WidgetTitle.astro new file mode 100644 index 000000000..9bd03e5bb --- /dev/null +++ b/src/components/widgets/WidgetTitle.astro @@ -0,0 +1,9 @@ +--- +// WidgetTitle.astro +export interface Props { + title?: string; +} +const { title = await Astro.slots.render('title') } = Astro.props; +--- + +

{title}

diff --git a/src/navigation.ts b/src/navigation.ts index d5cd65bc1..5b3e00ce9 100644 --- a/src/navigation.ts +++ b/src/navigation.ts @@ -112,7 +112,7 @@ export const headerData = { }, { text: 'Widgets', - href: '#', + href: getPermalink('/widgets'), }, ], actions: [{ text: 'Download', href: 'https://github.com/onwidget/astrowind', target: '_blank' }], diff --git a/src/pages/index.astro b/src/pages/index.astro index ebfad426f..a9c6c0d6d 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -52,7 +52,7 @@ const metadata = { - + diff --git a/src/pages/widgets.astro b/src/pages/widgets.astro new file mode 100644 index 000000000..82ddc83fe --- /dev/null +++ b/src/pages/widgets.astro @@ -0,0 +1,467 @@ +--- +import Note from '~/components/widgets/Note.astro'; +import Layout from '~/layouts/PageLayout.astro'; +import Headline from '~/components/ui/Headline.astro'; +import Announcement from '~/components/widgets/Announcement.astro'; +import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro'; +import Brands from '~/components/widgets/Brands.astro'; +import CallToAction from '~/components/widgets/CallToAction.astro'; +import Content from '~/components/widgets/Content.astro'; +import FAQs from '~/components/widgets/FAQs.astro'; +import Features from '~/components/widgets/Features.astro'; +import Features2 from '~/components/widgets/Features2.astro'; +import Features3 from '~/components/widgets/Features3.astro'; +import WidgetWrapper from '~/components/ui/WidgetWrapper.astro'; +import Hero from '~/components/widgets/Hero.astro'; +import Hero2 from '~/components/widgets/Hero2.astro'; +import HeroText from '~/components/widgets/HeroText.astro'; +import Prices from '~/components/widgets/Pricing.astro'; +import Stats from '~/components/widgets/Stats.astro'; +import Steps from '~/components/widgets/Steps.astro'; +import Steps2 from '~/components/widgets/Steps2.astro'; +import Testimonials from '~/components/widgets/Testimonials.astro'; +import WidgetTitle from '~/components/widgets/WidgetTitle.astro'; + +const metadata = { + title: 'Widgets', +}; +--- + + + + +
+ + +

This widget does not appear in small screens.

+ + + + + + + + + + + + +
+ + + + + + + Be a part of our vision + + + Discover a dynamic work environment, unparalleled growth opportunities, and the chance to make a meaningful + impact. + + + + + + + + +
+ + + + + + + + + + + + +
+ + + + + + + + + + + + +
+ + + + + + + + + + + + + Elevate your online presence with our
+ Beautiful Website Templates + + + Donec efficitur, ipsum quis congue luctus, mauris magna convallis mauris, eu auctor nisi lectus non augue. + + + +
+ + + + + + + + Simplify web design with Astrowind:
your ultimate SaaS companion
+ + + + Seamlessly blend the power of Astro 4.0 and Tailwind CSS to craft websites that resonate with your brand and audience. + + + + + + + + +
+ + + + + + + + + + + + +
+ + + + + + + + + + + Download', + description: "Kickstart with GitHub! Either fork the AstroWind template or simply click 'Use this template'.", + icon: 'tabler:package', + }, + { + title: 'Step 2: Add content', + description: 'Pour your vision into it. Add images, text, and all that jazz.', + icon: 'tabler:letter-case', + }, + { + title: 'Step 3: Customize styles', + description: 'Give it your personal touch. Tailor colors, fonts, and layouts until it feels just right.', + icon: 'tabler:paint', + }, + { + title: 'Ready!', + icon: 'tabler:check', + }, + ]} + image={{ + src: 'https://images.unsplash.com/photo-1616198814651-e71f960c3180?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80', + alt: 'Steps image', + }} + /> + +
+ + + + + + + + + + + + +
+ + +