Merge branch 'main' of https://github.com/widgeter/astrowind

src/components/ui/Timeline.astro

@@ -49,7 +49,7 @@ const {
               )}
             </div>
             <div
-              class={`max-w-md pt-1 ${
+              class={`pt-1 ${
                 index !== items.length - 1 ? "pb-8" : ""
               }`}
             >

src/components/widgets/Features.astro

@@ -11,6 +11,8 @@ const {
   items = [],
   columns = 2,
 
+  defaultIcon,
+
   id,
   isDark = false,
   classes = {},
@@ -33,6 +35,7 @@ const {
   <ItemGrid
     items={items}
     columns={columns}
+    defaultIcon={defaultIcon}
     classes={{
       container: "",
       title: "md:text-[1.3rem]",

src/components/widgets/Features2.astro

@@ -10,6 +10,7 @@ const {
   tagline = await Astro.slots.render("tagline"),
   items = [],
   columns = 3,
+  defaultIcon,
 
   id,
   isDark = false,
@@ -33,6 +34,7 @@ const {
   <ItemGrid2
     items={items}
     columns={columns}
+    defaultIcon={defaultIcon}
     classes={{
       container: "gap-4 md:gap-6",
       panel:

src/components/widgets/Features3.astro

@@ -12,6 +12,7 @@ const {
   image,
   items = [],
   columns,
+  defaultIcon,
   isBeforeContent,
   isAfterContent,
 
@@ -56,6 +57,7 @@ const {
   <ItemGrid
     items={items}
     columns={columns}
+    defaultIcon={defaultIcon}
     classes={{
       container: 'mt-12',
       panel: 'max-w-full sm:max-w-md',

src/components/widgets/HeroText.astro

@@ -0,0 +1,80 @@
+---
+import { Icon } from 'astro-icon/components';
+
+const {
+  title = await Astro.slots.render('title'),
+  subtitle = await Astro.slots.render('subtitle'),
+  tagline,
+  content = await Astro.slots.render('content'),
+  callToAction = await Astro.slots.render('callToAction'),
+  callToAction2 = await Astro.slots.render('callToAction2'),
+} = Astro.props;
+---
+
+<section class="relative md:-mt-[76px] not-prose">
+  <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
+    <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
+    <div class="py-12 md:py-20 pb-8 md:pb-8">
+      <div class="text-center max-w-screen-lg mx-auto">
+        {tagline && (
+          <p
+            class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
+            set:html={tagline}
+          />
+        )}
+        {
+          title && (
+            <h1
+              class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200"
+              set:html={title}
+            />
+          )
+        }
+        <div class="max-w-3xl mx-auto">
+          {subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />}
+          <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
+            {
+              callToAction && (
+                <div class="flex w-full sm:w-auto">
+                  {typeof callToAction === 'string' ? (
+                    <Fragment set:html={callToAction} />
+                  ) : (
+                    <a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
+                      {callToAction?.icon && (
+                        <>
+                          <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
+                        </>
+                      )}
+                      {callToAction?.text}
+                    </a>
+                  )}
+                </div>
+              )
+            }
+            {
+              callToAction2 && (
+                <div class="flex w-full sm:w-auto">
+                  {typeof callToAction2 === 'string' ? (
+                    <Fragment set:html={callToAction2} />
+                  ) : (
+                    <a class="btn w-full" href={callToAction2?.href}>
+                      {callToAction2?.icon && (
+                        <>
+                          <Icon name={callToAction2.icon} class="w-5 h-5 mr-1 -ml-1.5" />
+                          &nbsp;
+                        </>
+                      )}
+                      {callToAction2.text}
+                    </a>
+                  )}
+                </div>
+              )
+            }
+          </div>
+        </div>
+        {content && <Fragment set:html={content} />}
+      </div>
+    </div>
+  </div>
+</section>

src/components/widgets/Steps.astro

@@ -1,40 +1,44 @@
 ---
-import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import Timeline from "~/components/ui/Timeline.astro";
+import Timeline from '~/components/ui/Timeline.astro';
-import Headline from "~/components/ui/Headline.astro";
+import Headline from '~/components/ui/Headline.astro';
 import Image from '~/components/common/Image.astro';
-import type { Steps } from "~/types";
+import type { Steps } from '~/types';
 
 const {
-  title = await Astro.slots.render("title"),
+  title = await Astro.slots.render('title'),
-  subtitle = await Astro.slots.render("subtitle"),
+  subtitle = await Astro.slots.render('subtitle'),
-  tagline = await Astro.slots.render("tagline"),
+  tagline = await Astro.slots.render('tagline'),
   items = [],
-  image = await Astro.slots.render("image"),
+  image = await Astro.slots.render('image'),
   isReversed = false,
 
   id,
   isDark = false,
   classes = {},
-  bg = await Astro.slots.render("bg"),
+  bg = await Astro.slots.render('bg'),
 } = Astro.props as Steps;
 ---
 
-<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-5xl ${classes?.container ?? ""}`} bg={bg}>
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-5xl ${classes?.container ?? ''}`} bg={bg}>
-  <div class:list={["flex flex-col gap-8 md:gap-12 md:flex-row", { "md:flex-row-reverse": isReversed }]}>
+  <div class:list={['flex flex-col gap-8 md:gap-12', { 'md:flex-row-reverse': isReversed }, { 'md:flex-row': image}]}>
-    <div class="md:py-4 md:basis-1/2 md:self-center">
+    <div class:list={["md:py-4 md:self-center", { 'md:basis-1/2': image }, { "w-full": !image}]}>
       <Headline
         title={title}
         subtitle={subtitle}
         tagline={tagline}
-        classes={{ container: "text-left rtl:text-right", title: "text-3xl lg:text-4xl", ...((classes?.headline as {}) ?? {}) }}
+        classes={{
+          container: 'text-left rtl:text-right',
+          title: 'text-3xl lg:text-4xl',
+          ...((classes?.headline as {}) ?? {}),
+        }}
       />
       <Timeline items={items} classes={classes?.items as {}} />
     </div>
-    <div class="relative md:basis-1/2">
     {
-        image &&
+      image && (
-          (typeof image === 'string' ? (
+        <div class="relative md:basis-1/2">
+          {(typeof image === 'string' ? (
           <Fragment set:html={image} />
           ) : (
           <Image
@@ -45,10 +49,11 @@ const {
             height={768}
             layout="cover"
             src={image?.src}
-              alt={image?.alt || ""}
+            alt={image?.alt || ''}
           />
-          ))
+          ))}
+        </div>
+      )
     }
   </div>
-  </div>
 </WidgetWrapper>

src/navigation.js

@@ -14,7 +14,7 @@ export const headerData = {
           href: getPermalink('/homes/startup'),
         },
         {
-          text: 'App Download',
+          text: 'Mobile App',
           href: getPermalink('/homes/mobile-app'),
         },
         {
@@ -71,10 +71,6 @@ export const headerData = {
           text: 'Click-Through',
           href: getPermalink('/landing/click-through'),
         },
-        {
-          text: 'Squeeze',
-          href: getPermalink('/landing/squeeze'),
-        },
         {
           text: 'Product Details (or Services)',
           href: getPermalink('/landing/product'),
@@ -83,6 +79,10 @@ export const headerData = {
           text: 'Coming Soon or Pre-Launch',
           href: getPermalink('/landing/pre-launch'),
         },
+        {
+          text: 'Subscription',
+          href: getPermalink('/landing/subscription'),
+        },
       ],
     },
     {

src/pages/about.astro

@@ -15,6 +15,7 @@ const metadata = {
   <!-- Hero Widget ******************* -->
 
   <Hero
+    tagline="About us"
     image={{
       src: 'https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
       alt: 'Caos Image',

src/pages/contact.astro

@@ -1,7 +1,7 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
+import HeroText from '~/components/widgets/HeroText.astro';
 import ContactUs from '~/components/widgets/Contact.astro';
-import FAQs from '~/components/widgets/FAQs.astro';
 import Features2 from '~/components/widgets/Features2.astro';
 
 const metadata = {
@@ -10,6 +10,13 @@ const metadata = {
 ---
 
 <Layout metadata={metadata}>
+    <!-- HeroText Widget ******************* -->
+
+    <HeroText
+    tagline="Contact"
+    title="Let's Connect!"
+  />
+
   <ContactUs
     title="Drop us a message today!"
     subtitle="For quicker answers, explore our FAQs section. You may find the solution you're looking  for right there! If not, our support team is delighted to help you."
@@ -71,41 +78,4 @@ const metadata = {
       },
     ]}
   />
-
-  <!-- FAQs Widget ******************* -->
-
-  <FAQs
-    title="Frequently Asked Questions"
-    items={[
-      {
-        title: 'Do you provide instructions on how to use and edit the templates?',
-        description:
-          'Absolutely! We understand the importance of providing clear guidance. Each template comes with comprehensive instructions on how to use and customize it effectively.',
-      },
-      {
-        title: 'How can I download the templates after purchasing?',
-        description:
-          "Downloading your purchased templates is a simple process. Once you've completed the purchase, you'll receive an email containing a link to your personal download area.",
-      },
-      {
-        title: 'Are updates included with the templates?',
-        description:
-          'Yes, we are committed to continually improving and enhancing our templates to ensure they meet the latest design standards and technological advancements.',
-      },
-      {
-        title: 'How often do you release new templates?',
-        description:
-          'The exact frequency of releases may vary, our team works diligently to introduce new templates every quarter, depending on design trends, industry developments, and customer demand.',
-      },
-      {
-        title: 'Can I request custom templates to be developed?',
-        description: `Absolutely, we offer a custom template development service to cater to your specific needs. If you have a particular design idea, concept, or functionality in mind, we'd be more than happy to discuss creating a custom template for you.`,
-      },
-      {
-        title: 'What payment methods do you accept?',
-        description:
-          'Currently, we accept major credit and debit cards, including Visa, MasterCard, American Express, and Discover. Additionally, we facilitate payments through trusted online payment platforms such as PayPal and Apple Pay.',
-      },
-    ]}
-  />
 </Layout>

src/pages/homes/mobile-app.astro

@@ -18,6 +18,7 @@ const metadata = {
   <!-- Hero2 Widget ******************* -->
 
   <Hero2
+    tagline="Mobile App Web Demo"
     callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
     callToAction2={{ text: 'Learn more', href: '#features' }}
     image={{

src/pages/homes/personal.astro

@@ -16,6 +16,7 @@ const metadata = {
 ---
 
 <Layout metadata={metadata}>
+  <Fragment slot="announcement"></Fragment>
   <Fragment slot="header">
     <Header
       links={[
@@ -28,23 +29,18 @@ const metadata = {
       ]}
       actions={[
         {
-          type: 'ghost',
+          text: 'Hire me',
-          text: 'Login',
-          href: '#',
-        },
-        {
-          type: 'primary',
-          text: 'Sign Up',
           href: '#',
         },
       ]}
       isSticky
+      showToggleTheme
     />
   </Fragment>
 
   <!-- Hero2 Widget ******************* -->
 
-  <Hero id="hero" title="Sarah Johnson" callToAction={{ text: 'Hire me', href: '/' }}>
+  <Hero id="hero" title="Sarah Johnson" tagline="Personal Web Demo" callToAction={{ text: 'Hire me', href: '/' }}>
     <Fragment slot="subtitle">
       I'm a Graphic Designer passionate about crafting visual stories. <br /> With 5 years of experience and a degree
       from New York University's School of Design. I infuse vitality into brands and designs, transforming concepts into
@@ -100,7 +96,6 @@ const metadata = {
   <Steps
     id="resume"
     title="Work experience"
-    isReversed={true}
     items={[
       {
         title:
@@ -115,10 +110,7 @@ const metadata = {
         icon: 'tabler:briefcase',
       },
     ]}
-    image={{
+    classes={{ container: 'max-w-3xl' }}
-      src: 'https://images.unsplash.com/photo-1557672172-298e090bd0f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
-      alt: 'Steps image',
-    }}
   />
 
   <!-- Steps Widget ****************** -->
@@ -136,10 +128,7 @@ const metadata = {
         icon: 'tabler:school',
       },
     ]}
-    image={{
+    classes={{ container: 'max-w-3xl' }}
-      src: 'https://images.unsplash.com/photo-1557672172-298e090bd0f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80',
-      alt: 'Steps image',
-    }}
   />
 
   <!-- Features3 Widget ************** -->
@@ -148,51 +137,43 @@ const metadata = {
     title="Skills"
     subtitle="Discover the proficiencies that allow me to bring imagination to life through design."
     columns={3}
+    defaultIcon="tabler:point-filled"
     items={[
       {
         title: 'Graphic design',
         description: 'Proficient in crafting visually appealing designs that convey messages effectively.',
-        icon: 'tabler:point-filled',
       },
       {
         title: 'Branding and identity',
         description: 'Skilled at developing cohesive brand identities, including logos and brand guidelines.',
-        icon: 'tabler:point-filled',
       },
       {
         title: 'User-centered design',
         description: 'Experienced in creating user-friendly interfaces and optimizing user experiences.',
-        icon: 'tabler:point-filled',
       },
       {
         title: 'Adobe Creative Suite',
         description: 'Skilled in using Photoshop, Illustrator, and InDesign to create and edit visual elements.',
-        icon: 'tabler:point-filled',
       },
       {
         title: 'Typography',
         description: 'Adept in selecting and manipulating typefaces to enhance design aesthetics.',
-        icon: 'tabler:point-filled',
       },
       {
         title: 'Color theory',
         description: 'Proficient in using color to evoke emotions and enhance visual harmony.',
-        icon: 'tabler:point-filled',
       },
       {
         title: 'Print and digital design',
         description: 'Knowledgeable in designing for both print materials and digital platforms.',
-        icon: 'tabler:point-filled',
       },
       {
         title: 'Attention to detail',
         description: 'Diligent in maintaining precision and quality in all design work.',
-        icon: 'tabler:point-filled',
       },
       {
         title: 'Adaptability',
         description: 'Quick to adapt to new design trends, technologies, and client preferences.',
-        icon: 'tabler:point-filled',
       },
     ]}
   />
@@ -380,4 +361,11 @@ const metadata = {
       href: '/',
     }}
   />
+
+  <!-- BlogLatestPost Widget **************** -->
+  <BlogLatestPosts id="blog" title="My blog">
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+    </Fragment>
+  </BlogLatestPosts>
 </Layout>

src/pages/homes/saas.astro

@@ -38,6 +38,7 @@ const metadata = {
   <!-- Hero2 Widget ******************* -->
 
   <Hero2
+    tagline="SaaS Web Demo"
     callToAction={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
     callToAction2={{ text: 'Learn more', href: '#features' }}
     image={{

src/pages/homes/startup.astro

@@ -19,6 +19,7 @@ const metadata = {
   <!-- Hero Widget ******************* -->
 
   <Hero
+    tagline="Startup Web Demo"
     callToAction={{ text: 'Get templates', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
     callToAction2={{ text: 'Learn more', href: '#features' }}
   >

src/pages/landing/click-through.astro

@@ -2,6 +2,7 @@
 import Layout from '~/layouts/LandingLayout.astro';
 
 import Hero2 from '~/components/widgets/Hero2.astro';
+import CallToAction from "~/components/widgets/CallToAction.astro"
 
 const metadata = {
   title: 'Click-through Landing Page Demo',
@@ -12,14 +13,24 @@ const metadata = {
   <!-- Hero2 Widget ******************* -->
 
   <Hero2
-    tagline="Click-through Landing Demo"
+    tagline="Click-through Demo"
-    title="Unlock the Secrets to an Effective Lead Generation Landing"
+    title="Click-through Landing Page: The Perfect Bridge to Conversion!"
-    subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
+    subtitle="Learn how to design a Click-Through Landing Page that seamlessly guides visitors to your main offer."
-    callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
+    callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
-    callToAction2={{ text: 'Learn more', href: '#features' }}
+    callToAction2={{ text: 'Learn more', href: '#' }}
     image={{
       src: 'https://images.unsplash.com/photo-1516321497487-e288fb19713f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
-      alt: 'AstroWind Hero Image',
+      alt: 'Click-through Landing Page Hero Image',
+    }}
+  />
+
+  <CallToAction
+    title="Coming soon"
+    subtitle="We are working on the content of these demo pages. You will see them very soon. Stay tuned Stay tuned!"
+    callToAction={{
+      text: 'Get template',
+      href: 'https://github.com/onwidget/astrowind',
+      icon: 'tabler:download',
     }}
   />
 </Layout>

src/pages/landing/lead-generation.astro

@@ -1,7 +1,8 @@
 ---
 import Layout from '~/layouts/LandingLayout.astro';
 
-import Hero2 from '~/components/widgets/Hero2.astro';
+import Hero from '~/components/widgets/Hero.astro';
+import CallToAction from '~/components/widgets/CallToAction.astro';
 
 const metadata = {
   title: 'Lead Generation Landing Page Demo',
@@ -11,15 +12,25 @@ const metadata = {
 <Layout metadata={metadata}>
   <!-- Hero2 Widget ******************* -->
 
-  <Hero2
+  <Hero
     tagline="Lead Generation Landing Demo"
-    title="Unlock the Secrets to an Effective Lead Generation Landing"
+    title="Effective Lead Generation Landing Page: Unlock the Secrets"
-    subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
+    subtitle="Discover the secrets to creating a Landing Page that turns curious visitors into eager leads. (Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience.)"
-    callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
+    callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
-    callToAction2={{ text: 'Learn more', href: '#features' }}
+    callToAction2={{ text: 'Learn more', href: '#' }}
     image={{
-      src: 'https://images.unsplash.com/photo-1516321497487-e288fb19713f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
+      src: 'https://images.unsplash.com/photo-1597423498219-04418210827d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1674&q=80',
-      alt: 'AstroWind Hero Image',
+      alt: 'Magnet attracting screws. Lead generation landing page demo',
+    }}
+  />
+
+  <CallToAction
+    title="Coming soon"
+    subtitle="We are working on the content of these demo pages. You will see them very soon. Stay tuned Stay tuned!"
+    callToAction={{
+      text: 'Get template',
+      href: 'https://github.com/onwidget/astrowind',
+      icon: 'tabler:download',
     }}
   />
 </Layout>

src/pages/landing/pre-launch.astro

@@ -2,9 +2,10 @@
 import Layout from '~/layouts/LandingLayout.astro';
 
 import Hero2 from '~/components/widgets/Hero2.astro';
+import CallToAction from '~/components/widgets/CallToAction.astro';
 
 const metadata = {
-  title: 'Coming Soon Landing Page',
+  title: 'Pre-Launch Landing Page',
 };
 ---
 
@@ -12,14 +13,24 @@ const metadata = {
   <!-- Hero2 Widget ******************* -->
 
   <Hero2
-    tagline="Coming Soon Landing Demo"
+    tagline="Pre-launch Demo"
-    title="Unlock the Secrets to an Effective Lead Generation Landing"
+    title="Pre-launch Landing Page: Build the Hype Before the Big Reveal!"
-    subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
+    subtitle="Craft a tantalizing Coming Soon or Pre-Launch Landing Page that leaves visitors eagerly awaiting your launch."
-    callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
+    callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
-    callToAction2={{ text: 'Learn more', href: '#features' }}
+    callToAction2={{ text: 'Learn more', href: '#' }}
     image={{
-      src: 'https://images.unsplash.com/photo-1516321497487-e288fb19713f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
+      src: 'https://images.unsplash.com/photo-1558803116-c1b4ac867b31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80',
-      alt: 'AstroWind Hero Image',
+      alt: 'Store with a Coming Soon sign. Pre-launch Landing Page',
+    }}
+  />
+
+  <CallToAction
+    title="Coming soon"
+    subtitle="We are working on the content of these demo pages. You will see them very soon. Stay tuned Stay tuned!"
+    callToAction={{
+      text: 'Get template',
+      href: 'https://github.com/onwidget/astrowind',
+      icon: 'tabler:download',
     }}
   />
 </Layout>

src/pages/landing/product.astro

@@ -1,7 +1,8 @@
 ---
 import Layout from '~/layouts/LandingLayout.astro';
 
-import Hero2 from '~/components/widgets/Hero2.astro';
+import Hero from '~/components/widgets/Hero.astro';
+import CallToAction from '~/components/widgets/CallToAction.astro';
 
 const metadata = {
   title: 'Product Details Landing Page Demo',
@@ -11,15 +12,25 @@ const metadata = {
 <Layout metadata={metadata}>
   <!-- Hero2 Widget ******************* -->
 
-  <Hero2
+  <Hero
-    tagline="Product Details Landing Demo"
+    tagline="Product Details Demo"
-    title="Unlock the Secrets to an Effective Lead Generation Landing"
+    title="Product Landing Page: Showcase with Precision and Passion!"
-    subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
+    subtitle="Step-by-step guide to designing a Landing Page that highlights every facet of your product or service."
-    callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
+    callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
-    callToAction2={{ text: 'Learn more', href: '#features' }}
+    callToAction2={{ text: 'Learn more', href: '#' }}
     image={{
-      src: 'https://images.unsplash.com/photo-1516321497487-e288fb19713f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
+      src: 'https://images.unsplash.com/photo-1473188588951-666fce8e7c68?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2174&q=80',
-      alt: 'AstroWind Hero Image',
+      alt: 'A spotlight on a product. Product Details Landing Page Demo',
+    }}
+  />
+
+  <CallToAction
+    title="Coming soon"
+    subtitle="We are working on the content of these demo pages. You will see them very soon. Stay tuned Stay tuned!"
+    callToAction={{
+      text: 'Get template',
+      href: 'https://github.com/onwidget/astrowind',
+      icon: 'tabler:download',
     }}
   />
 </Layout>

src/pages/landing/sales.astro

@@ -2,6 +2,7 @@
 import Layout from '~/layouts/LandingLayout.astro';
 
 import Hero2 from '~/components/widgets/Hero2.astro';
+import CallToAction from '~/components/widgets/CallToAction.astro';
 
 const metadata = {
   title: 'Sales Landing Page Demo',
@@ -12,14 +13,24 @@ const metadata = {
   <!-- Hero2 Widget ******************* -->
 
   <Hero2
-    tagline="Sales Landing Demo"
+    tagline="Long-form Sales Demo"
-    title="Unlock the Secrets to an Effective Lead Generation Landing"
+    title="Long-form Sales: Sell with a Story: The Long-form Way!"
-    subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
+    subtitle="Dive deep into crafting a Landing Page that narrates, persuades, and converts."
-    callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
+    callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
-    callToAction2={{ text: 'Learn more', href: '#features' }}
+    callToAction2={{ text: 'Learn more', href: '#' }}
     image={{
-      src: 'https://images.unsplash.com/photo-1516321497487-e288fb19713f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
+      src: 'https://images.unsplash.com/photo-1621452773781-0f992fd1f5cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1626&q=80',
-      alt: 'AstroWind Hero Image',
+      alt: 'Children telling a story. Long-form Sales Landing Page demo',
+    }}
+  />
+
+  <CallToAction
+    title="Coming soon"
+    subtitle="We are working on the content of these demo pages. You will see them very soon. Stay tuned Stay tuned!"
+    callToAction={{
+      text: 'Get template',
+      href: 'https://github.com/onwidget/astrowind',
+      icon: 'tabler:download',
     }}
   />
 </Layout>

src/pages/landing/squeeze.astro

@@ -1,25 +0,0 @@
----
-import Layout from '~/layouts/LandingLayout.astro';
-
-import Hero2 from '~/components/widgets/Hero2.astro';
-
-const metadata = {
-  title: 'Squeeze Landing Page Demo',
-};
----
-
-<Layout metadata={metadata}>
-  <!-- Hero2 Widget ******************* -->
-
-  <Hero2
-    tagline="Squeeze Landing Demo"
-    title="Unlock the Secrets to an Effective Lead Generation Landing"
-    subtitle="Where every click is a potential lead waiting to happen. Your Hero should grab attention instantly. Use a powerful headline that speaks directly to your target audience."
-    callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
-    callToAction2={{ text: 'Learn more', href: '#features' }}
-    image={{
-      src: 'https://images.unsplash.com/photo-1516321497487-e288fb19713f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
-      alt: 'AstroWind Hero Image',
-    }}
-  />
-</Layout>

src/pages/landing/subscription.astro

@@ -0,0 +1,36 @@
+---
+import Layout from '~/layouts/LandingLayout.astro';
+
+import Hero2 from '~/components/widgets/Hero2.astro';
+import CallToAction from '~/components/widgets/CallToAction.astro';
+
+const metadata = {
+  title: 'Subscription Landing Page Demo',
+};
+---
+
+<Layout metadata={metadata}>
+  <!-- Hero2 Widget ******************* -->
+
+  <Hero2
+    tagline="Subscription Landing Demo"
+    title="Subscription Landing Page: Turn Casual Browsers into Loyal Subscribers!"
+    subtitle="Unlock the formula for a Subscription Landing Page that keeps your audience coming back for more."
+    callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
+    callToAction2={{ text: 'Learn more', href: '#' }}
+    image={{
+      src: 'https://images.unsplash.com/photo-1593510987046-1f8fcfc512a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
+      alt: 'Ironic image associated with canceling a subscription. Subscription Landing Page Demo',
+    }}
+  />
+
+  <CallToAction
+    title="Coming soon"
+    subtitle="We are working on the content of these demo pages. You will see them very soon. Stay tuned Stay tuned!"
+    callToAction={{
+      text: 'Get template',
+      href: 'https://github.com/onwidget/astrowind',
+      icon: 'tabler:download',
+    }}
+  />
+</Layout>

src/pages/pricing.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
+import HeroText from '~/components/widgets/HeroText.astro';
 import Prices from '~/components/widgets/Pricing.astro';
 import FAQs from '~/components/widgets/FAQs.astro';
 import Steps from '~/components/widgets/Steps.astro';
@@ -12,6 +13,14 @@ const metadata = {
 ---
 
 <Layout metadata={metadata}>
+  <!-- HeroText Widget ******************* -->
+
+  <HeroText
+    tagline="Pricing"
+    title="Stellar Pricing for Every Journey"
+    subtitle="Choose the perfect plan that aligns with your cosmic goals."
+  />
+
   <!-- Pricing Widget ******************* -->
 
   <Prices
@@ -106,7 +115,7 @@ const metadata = {
       <Features3
       title="Price-related features"
       subtitle="Discover the advantages of choosing our plans"
-    columns={3}
+      columns={2}
       items={[
         {
           title: 'Tiered Pricing Plans',
@@ -139,6 +148,7 @@ const metadata = {
           icon: 'tabler:headset',
         },
       ]}
+      classes={{ container: "max-w-5xl"}}
     />
 
   <!-- Steps Widget ****************** -->

src/pages/services.astro

@@ -15,6 +15,7 @@ const metadata = {
   <!-- Hero Widget ******************* -->
 
   <Hero
+    tagline="Services"
     title="Elevate your projects with our stunning templates"
     subtitle="Explore our meticulously crafted templates tailored to various industries and purposes. From captivating presentations to functional website designs, we offer the tools you need to succeed."
     callToAction={{ text: 'Start exploring', href: '/' }}

src/types.d.ts

@@ -239,6 +239,7 @@ export interface Features extends Headline, Widget {
   video?: Video;
   items: Array<Item>;
   columns: number;
+  defaultIcon?: string;
   callToAction1?: CallToAction;
   callToAction2?: CallToAction;
   isReversed?: boolean;