Include CTA component in Hero widgets

src/components/widgets/Hero.astro

@@ -1,6 +1,6 @@
 ---
-import { Icon } from 'astro-icon/components';
 import Image from '~/components/common/Image.astro';
+import CTA from '../ui/CTA.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -19,12 +19,14 @@ const {
     <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
     <div class="py-12 md:py-20">
       <div class="text-center pb-10 md:pb-16 max-w-screen-lg mx-auto">
-        {tagline && (
+        {
-          <p
+          tagline && (
-            class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
+            <p
-            set:html={tagline}
+              class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
-          />
+              set:html={tagline}
-        )}
+            />
+          )
+        }
         {
           title && (
             <h1
@@ -42,14 +44,9 @@ const {
                   {typeof callToAction === 'string' ? (
                     <Fragment set:html={callToAction} />
                   ) : (
-                    <a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
+                    <div class="btn btn-primary sm:mb-0 w-full">
-                      {callToAction?.icon && (
+                      <CTA callToAction={callToAction} />
-                        <>
+                    </div>
-                          <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>
               )
@@ -60,15 +57,9 @@ const {
                   {typeof callToAction2 === 'string' ? (
                     <Fragment set:html={callToAction2} />
                   ) : (
-                    <a class="btn w-full" href={callToAction2?.href}>
+                    <div class="btn w-full">
-                      {callToAction2?.icon && (
+                      <CTA callToAction={callToAction2} />
-                        <>
+                    </div>
-                          <Icon name={callToAction2.icon} class="w-5 h-5 mr-1 -ml-1.5" />
-                          &nbsp;
-                        </>
-                      )}
-                      {callToAction2.text}
-                    </a>
                   )}
                 </div>
               )

src/components/widgets/Hero2.astro

@@ -1,7 +1,7 @@
 ---
-import { Icon } from 'astro-icon/components';
 import Image from '~/components/common/Image.astro';
 import type { CallToAction } from '~/types';
+import CTA from '../ui/CTA.astro';
 
 export interface Props {
   title?: string;
@@ -30,12 +30,14 @@ const {
     <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
     <div class="py-12 md:py-20 lg:py-0 lg:flex lg:items-center lg:h-screen lg:gap-8">
       <div class="basis-1/2 text-center lg:text-left pb-10 md:pb-16 mx-auto">
-        {tagline && (
+        {
-          <p
+          tagline && (
-            class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
+            <p
-            set:html={tagline}
+              class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
-          />
+              set:html={tagline}
-        )}
+            />
+          )
+        }
         {
           title && (
             <h1
@@ -55,14 +57,9 @@ const {
                   {typeof callToAction === 'string' ? (
                     <Fragment set:html={callToAction} />
                   ) : (
-                    <a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
+                    <div class="btn btn-primary sm:mb-0 w-full">
-                      {callToAction?.icon && (
+                      <CTA callToAction={callToAction} />
-                        <>
+                    </div>
-                          <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>
               )
@@ -73,14 +70,9 @@ const {
                   {typeof callToAction2 === 'string' ? (
                     <Fragment set:html={callToAction2} />
                   ) : (
-                    <a class="btn w-full" href={callToAction2?.href}>
+                    <div class="btn w-full">
-                      {callToAction2?.icon && (
+                      <CTA callToAction={callToAction2} />
-                        <>
+                    </div>
-                          <Icon name={callToAction2.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}
-                        </>
-                      )}
-                      {callToAction2.text}
-                    </a>
                   )}
                 </div>
               )

src/pages/homes/mobile-app.astro

@@ -19,7 +19,12 @@ const metadata = {
 
   <Hero2
     tagline="Mobile App Web Demo"
-    callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
+    callToAction={{
+      targetBlank: true,
+      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-1535303311164-664fc9ec6532?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80',
@@ -42,6 +47,7 @@ const metadata = {
   <!-- Features3 Widget ************** -->
 
   <Features3
+    id="features"
     title="How to use our app?"
     subtitle="Tired of spending hours crafting documents from scratch? Our app offers an innovative solution. With a wide array of professionally designed templates, you can now create stunning documents in minutes. Explore our templates now and experience the difference."
     tagline="Step-by-step guide"

src/pages/homes/personal.astro

@@ -40,7 +40,12 @@ const metadata = {
 
   <!-- Hero2 Widget ******************* -->
 
-  <Hero id="hero" title="Sarah Johnson" tagline="Personal Web Demo" callToAction={{ text: 'Hire me', href: '/' }}>
+  <Hero
+    id="hero"
+    title="Sarah Johnson"
+    tagline="Personal Web Demo"
+    callToAction={{ targetBlank: true, 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

src/pages/homes/saas.astro

@@ -41,7 +41,7 @@ const metadata = {
 
   <Hero2
     tagline="SaaS Web Demo"
-    callToAction={{ text: 'Get Started', href: 'https://github.com/onwidget/astrowind' }}
+    callToAction={{ targetBlank: true, text: 'Get Started', href: 'https://github.com/onwidget/astrowind' }}
     callToAction2={{ text: 'Learn more', href: '#features' }}
     image={{
       src: 'https://images.unsplash.com/photo-1580481072645-022f9a6dbf27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',

src/pages/homes/startup.astro

@@ -21,7 +21,12 @@ const metadata = {
 
   <Hero
     tagline="Startup Web Demo"
-    callToAction={{ text: 'Get templates', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
+    callToAction={{
+      targetBlank: true,
+      text: 'Get templates',
+      href: 'https://github.com/onwidget/astrowind',
+      icon: 'tabler:download',
+    }}
     callToAction2={{ text: 'Learn more', href: '#features' }}
   >
     <Fragment slot="title">

src/pages/index.astro

@@ -22,7 +22,12 @@ const metadata = {
   <!-- Hero Widget ******************* -->
 
   <Hero
-    callToAction={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
+    callToAction={{
+      targetBlank: true,
+      text: 'Get template',
+      href: 'https://github.com/onwidget/astrowind',
+      icon: 'tabler:download',
+    }}
     callToAction2={{ text: 'Learn more', href: '#features' }}
     image={{ src: '~/assets/images/hero.png', alt: 'AstroWind Hero Image' }}
   >
@@ -320,7 +325,7 @@ const metadata = {
     title="Frequently Asked Questions"
     subtitle="Dive into the following questions to gain insights into the powerful features that AstroWind offers and how it can elevate your web development journey."
     tagline="FAQs"
-    classes={{ container: 'max-w-6xl'}}
+    classes={{ container: 'max-w-6xl' }}
     items={[
       {
         title: 'Why AstroWind?',

src/pages/services.astro

@@ -18,7 +18,7 @@ const metadata = {
     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: '/' }}
+    callToAction={{ targetBlank: true, text: 'Start exploring', href: '/' }}
     image={{
       src: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80',
       alt: 'AstroWind Hero Image',