Merge pull request #248 from prototypa/astro-v3

Replace component CTA with Button with new props

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@onwidget/astrowind",
-  "description": "A template to make your website using Astro + Tailwind CSS.",
+  "description": "AstroWind: A free template using Astro 3.0 and Tailwind CSS. Astro starter theme.",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "private": true,
   "scripts": {
     "dev": "astro dev",

src/assets/styles/tailwind.css

@@ -2,10 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-.dd *:first-child {
-  margin-top: 0;
-}
-
 @layer utilities {
   .bg-page {
     background-color: var(--aw-color-bg-page);
@@ -13,31 +9,32 @@
   .bg-dark {
     background-color: var(--aw-color-bg-page-dark);
   }
-}
-
-@layer components {
-  .text-page {
-    color: var(--aw-color-text-page);
-  }
-
-  .text-muted {
-    color: var(--aw-color-text-muted);
-  }
-
   .bg-light {
     background-color: var(--aw-color-bg-page);
   }
-
+  .text-page {
-  .btn {
+    color: var(--aw-color-text-page);
-    @apply inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
+  }
+  .text-muted {
+    color: var(--aw-color-text-muted);
+  }
 }
 
-  .btn-ghost {
+@layer components {
-    @apply border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
+  .btn {
+    @apply inline-flex items-center justify-center rounded-full border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800 cursor-pointer;
   }
 
   .btn-primary {
-    @apply font-semibold bg-primary text-white border-primary hover:bg-secondary hover:border-secondary hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-secondary dark:hover:bg-secondary;
+    @apply btn font-semibold bg-primary text-white border-primary hover:bg-secondary hover:border-secondary hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-secondary dark:hover:bg-secondary;
+  }
+
+  .btn-secondary {
+    @apply btn;
+  }
+
+  .btn-tertiary {
+    @apply btn border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
   }
 }
 
@@ -85,3 +82,9 @@
 [data-aw-toggle-menu].expanded g > path:last-child {
   @apply rotate-45 translate-y-[-8px] translate-x-[14px];
 }
+
+/* To deprecated */
+
+.dd *:first-child {
+  margin-top: 0;
+}

src/components/blog/Pagination.astro

@@ -1,6 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { getPermalink } from '~/utils/permalinks';
+import Button from '~/components/ui/Button.astro';
 
 export interface Props {
   prevUrl: string;
@@ -16,18 +17,19 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
   (prevUrl || nextUrl) && (
     <div class="container flex">
       <div class="flex flex-row mx-auto container justify-between">
-        <a href={getPermalink(prevUrl)} class={`btn btn-ghost md:px-3 px-3 mr-2 ${!prevUrl ? 'invisible' : ''}`}>
+        <Button
-          <div class="flex flex-row align-middle">
+          variant="tertiary"
+          class={`md:px-3 px-3 mr-2 ${!prevUrl ? 'invisible' : ''}`}
+          href={getPermalink(prevUrl)}
+        >
           <Icon name="tabler:chevron-left" class="w-6 h-6" />
           <p class="ml-2">{prevText}</p>
-          </div>
+        </Button>
-        </a>
+
-        <a href={getPermalink(nextUrl)} class={`btn btn-ghost md:px-3 px-3 ${!nextUrl ? 'invisible' : ''}`}>
+        <Button variant="tertiary" class={`md:px-3 px-3 ${!nextUrl ? 'invisible' : ''}`} href={getPermalink(nextUrl)}>
-          <div class="flex flex-row align-middle">
           <span class="mr-2">{nextText}</span>
           <Icon name="tabler:chevron-right" class="w-6 h-6" />
-          </div>
+        </Button>
-        </a>
       </div>
     </div>
   )

src/components/blog/ToBlogLink.astro

@@ -2,16 +2,19 @@
 import { Icon } from 'astro-icon/components';
 import { getBlogPermalink } from '~/utils/permalinks';
 import { I18N } from '~/utils/config';
+import Button from '~/components/ui/Button.astro';
 
 const { textDirection } = I18N;
 ---
 
 <div class="mx-auto px-6 sm:px-6 max-w-3xl pt-8 md:pt-4 pb-12 md:pb-20">
-  <a class="btn btn-ghost px-3 md:px-3" href={getBlogPermalink()}
+  <Button variant="tertiary" class="px-3 md:px-3" href={getBlogPermalink()}>
-    >
+    {
-    {textDirection === "rtl" ?
+      textDirection === 'rtl' ? (
         <Icon name="tabler:chevron-right" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
-    :
+      ) : (
-    <Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />} Back to Blog</a
+        <Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
-  >
+      )
+    } Back to Blog
+  </Button>
 </div>

src/components/ui/Button.astro

@@ -0,0 +1,26 @@
+---
+import { Icon } from 'astro-icon/components';
+import { twMerge } from 'tailwind-merge';
+import type { CallToAction } from '~/types';
+
+const {
+  variant = 'secondary',
+  target,
+  text = Astro.slots.render("default"),
+  icon = '',
+  class: className = '',
+  ...rest
+} = Astro.props as CallToAction;
+
+const variants = {
+  primary: 'btn-primary' ,
+  secondary: 'btn-secondary',
+  tertiary: 'btn btn-tertiary',
+  link: 'hover:text-primary',
+};
+---
+
+<a class={twMerge(variants[variant] || '', className)} {...target ? { target: target, rel: 'noopener noreferrer' } : {}} {...rest}>
+  <Fragment set:html={text} />
+  {icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
+</a>

src/components/ui/CTA.astro

@@ -1,38 +0,0 @@
----
-import { Icon } from "astro-icon/components";
-import type { CallToAction } from "~/types";
-
-const { callToAction } = Astro.props;
-
-const {
-  targetBlank,
-  text = "",
-  icon = "",
-  href = "",
-} = callToAction as CallToAction;
----
-
-<div class="flex w-auto">
-  {
-    targetBlank ? (
-      <a
-        class="inline-flex items-center justify-center"
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {text}
-        {icon && (
-          <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5" />
-        )}
-      </a>
-    ) : (
-      <a class="inline-flex items-center justify-center" href={href}>
-        {text}
-        {icon && (
-          <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5" />
-        )}
-      </a>
-    )
-  }
-</div>

src/components/ui/Form.astro

@@ -1,5 +1,6 @@
 ---
 import type { Form } from '~/types';
+import Button from '~/components/ui/Button.astro';
 
 const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props as Form;
 ---
@@ -69,9 +70,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
   {
     button && (
       <div class="mt-10 grid">
-        <button type="submit" class="btn btn-primary cursor-pointer">
+        <Button variant="primary" type="submit">{button}</Button>
-          {button}
-        </button>
       </div>
     )
   }

src/components/ui/ItemGrid.astro

@@ -1,7 +1,7 @@
 ---
 import { twMerge } from 'tailwind-merge';
 import type { ItemGrid } from '~/types';
-import CTA from './CTA.astro';
+import Button from './Button.astro';
 import { Icon } from 'astro-icon/components';
 
 const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props as ItemGrid;
@@ -54,12 +54,12 @@ const {
               {callToAction && (
                 <div
                   class={twMerge(
-                    `${title || description ? 'mt-3' : ''} text-primary cursor-pointer`,
+                    `${title || description ? 'mt-3' : ''}`,
                     actionClass,
                     itemClasses?.actionClass
                   )}
                 >
-                  <CTA callToAction={callToAction} />
+                  <Button variant="link" {...callToAction} />
                 </div>
               )}
             </div>

src/components/ui/ItemGrid2.astro

@@ -2,7 +2,7 @@
 import { Icon } from "astro-icon/components";
 import { twMerge } from "tailwind-merge";
 import type { ItemGrid } from "~/types";
-import CTA from "./CTA.astro";
+import Button from "./Button.astro";
 
 const {
   items = [],
@@ -82,8 +82,8 @@ const {
               />
             )}
             {callToAction && (
-              <div class="mt-2 text-primary cursor-pointer">
+              <div class="mt-2">
-                <CTA callToAction={callToAction} />
+                <Button {...callToAction} />
               </div>
             )}
           </div>

src/components/widgets/BlogLatestPosts.astro

@@ -7,6 +7,7 @@ import { getBlogPermalink } from "~/utils/permalinks";
 import { findLatestPosts } from "~/utils/blog";
 import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
 import type { Widget } from "~/types";
+import Button from "../ui/Button.astro";
 
 export interface Props extends Widget {
   title?: string;
@@ -43,12 +44,7 @@ const posts = APP_BLOG.isEnabled ? await findLatestPosts({ count }) : [];
               set:html={title}
             />
             {APP_BLOG.list.isEnabled && linkText && linkUrl && (
-              <a
+              <Button variant="link" href={linkUrl}> {linkText} »</Button>
-                class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 lg:mb-0"
-                href={linkUrl}
-              >
-                {linkText} »
-              </a>
             )}
           </div>
         )}

src/components/widgets/CallToAction.astro

@@ -1,8 +1,8 @@
 ---
-import { Icon } from 'astro-icon/components';
 import WidgetWrapper from '../ui/WidgetWrapper.astro';
 import type { CallToAction, Widget } from '~/types';
-import Headline from '../ui/Headline.astro';
+import Headline from '~/components/ui/Headline.astro';
+import Button from "~/components/ui/Button.astro"
 
 interface Props extends Widget {
   title?: string;
@@ -43,13 +43,9 @@ const {
         <Fragment set:html={callToAction} />
       ) : (
         callToAction &&
-        callToAction.text &&
+        callToAction.text && (
-        callToAction.href && (
           <div class="mt-6 max-w-xs mx-auto">
-            <a class="btn btn-primary w-full sm:w-auto" href={callToAction.href} target="_blank" rel="noopener">
+            <Button variant="primary" {...callToAction} class="w-full sm:w-auto" />
-              {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>
         )
       )

src/components/widgets/Content.astro

@@ -3,7 +3,7 @@ import type { Content } from '~/types';
 import Headline from '../ui/Headline.astro';
 import WidgetWrapper from '../ui/WidgetWrapper.astro';
 import Image from '~/components/common/Image.astro';
-import CTA from '../ui/CTA.astro';
+import Button from '~/components/ui/Button.astro';
 import ItemGrid from '../ui/ItemGrid.astro';
 
 const {
@@ -48,8 +48,8 @@ const {
 
         {
           callToAction && (
-            <div class="mt-[-40px] mb-8 text-primary cursor-pointer">
+            <div class="mt-[-40px] mb-8 text-primary">
-              <CTA callToAction={callToAction} />
+              <Button variant="link" {...callToAction} />
             </div>
           )
         }

src/components/widgets/Header.astro

@@ -3,9 +3,11 @@ import { Icon } from "astro-icon/components";
 import Logo from "~/components/Logo.astro";
 import ToggleTheme from "~/components/common/ToggleTheme.astro";
 import ToggleMenu from "~/components/common/ToggleMenu.astro";
+import Button from "~/components/ui/Button.astro"
 
 import { getHomePermalink } from "~/utils/permalinks";
 import { trimSlash, getAsset } from "~/utils/permalinks";
+import type { CallToAction } from "~/types";
 
 interface Link {
   text?: string;
@@ -14,10 +16,7 @@ interface Link {
   icon?: string;
 }
 
-interface ActionLink extends Link {
+interface ActionLink extends CallToAction {}
-  class?: string;
-  type?: string;
-}
 
 interface MenuLink extends Link {
   links?: Array<MenuLink>;
@@ -146,10 +145,8 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
         {
           actions?.length ? (
             <span class="ml-4 rtl:ml-0 rtl:mr-4">
-              {actions.map(({ text, href, class: className }) => (
+              {actions.map((btnProps) => (
-                <a class:list={["btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm", className]} href={href}>
+                <Button {...btnProps} class="ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm w-auto"/>
-                  <Fragment set:html={text} />
-                </a>
               ))}
             </span>
           ) : (

src/components/widgets/Hero.astro

@@ -1,19 +1,30 @@
 ---
 import Image from '~/components/common/Image.astro';
-import CTA from '../ui/CTA.astro';
+import Button from '~/components/ui/Button.astro';
+import type { CallToAction } from '~/types';
+
+export interface Props {
+  id?: string;
+  title?: string;
+  subtitle?: string;
+  tagline?: string;
+  content?: string;
+  actions?: string | CallToAction[];
+  image?: string | any; // TODO: find HTMLElementProps
+}
 
 const {
+  id,
   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'),
+  actions = await Astro.slots.render('actions'),
-  callToAction2 = await Astro.slots.render('callToAction2'),
   image = await Astro.slots.render('image'),
 } = Astro.props;
 ---
 
-<section class="relative md:-mt-[76px] not-prose">
+<section class="relative md:-mt-[76px] not-prose" {...id ? { id } : {}}>
   <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>
@@ -37,34 +48,21 @@ const {
         }
         <div class="max-w-3xl mx-auto">
           {subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />}
+          {
+            actions && (
               <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
-            {
+                {Array.isArray(actions) ? (
-              callToAction && (
+                  actions.map((action) => (
                     <div class="flex w-full sm:w-auto">
-                  {typeof callToAction === 'string' ? (
+                      <Button {...(action || {})} class="w-full sm:mb-0" />
-                    <Fragment set:html={callToAction} />
-                  ) : (
-                    <div class="btn btn-primary sm:mb-0 w-full">
-                      <CTA callToAction={callToAction} />
                     </div>
+                  ))
+                ) : (
+                  <Fragment set:html={actions} />
                 )}
               </div>
             )
           }
-            {
-              callToAction2 && (
-                <div class="flex w-full sm:w-auto">
-                  {typeof callToAction2 === 'string' ? (
-                    <Fragment set:html={callToAction2} />
-                  ) : (
-                    <div class="btn w-full">
-                      <CTA callToAction={callToAction2} />
-                    </div>
-                  )}
-                </div>
-              )
-            }
-          </div>
         </div>
         {content && <Fragment set:html={content} />}
       </div>

src/components/widgets/Hero2.astro

@@ -1,15 +1,14 @@
 ---
 import Image from '~/components/common/Image.astro';
 import type { CallToAction } from '~/types';
-import CTA from '../ui/CTA.astro';
+import Button from '~/components/ui/Button.astro';
 
 export interface Props {
   title?: string;
   subtitle?: string;
   tagline?: string;
   content?: string;
-  callToAction?: string | CallToAction;
+  actions?: string | CallToAction[];
-  callToAction2?: string | CallToAction;
   image?: string | any; // TODO: find HTMLElementProps
 }
 
@@ -18,8 +17,7 @@ const {
   subtitle = await Astro.slots.render('subtitle'),
   tagline,
   content = await Astro.slots.render('content'),
-  callToAction = await Astro.slots.render('callToAction'),
+  actions = await Astro.slots.render('actions'),
-  callToAction2 = await Astro.slots.render('callToAction2'),
   image = await Astro.slots.render('image'),
 } = Astro.props;
 ---
@@ -48,36 +46,22 @@ const {
         }
         <div class="max-w-3xl mx-auto lg:max-w-none">
           {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 lg:justify-start lg:m-0 lg:max-w-7xl"
-          >
           {
-              callToAction && (
+            actions && (
+              <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 lg:justify-start lg:m-0 lg:max-w-7xl">
+                {Array.isArray(actions) ? (
+                  actions.map((action) => (
                     <div class="flex w-full sm:w-auto">
-                  {typeof callToAction === 'string' ? (
+                      <Button {...(action || {})} class="w-full sm:mb-0" />
-                    <Fragment set:html={callToAction} />
-                  ) : (
-                    <div class="btn btn-primary sm:mb-0 w-full">
-                      <CTA callToAction={callToAction} />
                     </div>
+                  ))
+                ) : (
+                  <Fragment set:html={actions} />
                 )}
               </div>
             )
           }
-            {
-              callToAction2 && (
-                <div class="flex w-full sm:w-auto">
-                  {typeof callToAction2 === 'string' ? (
-                    <Fragment set:html={callToAction2} />
-                  ) : (
-                    <div class="btn w-full">
-                      <CTA callToAction={callToAction2} />
-                    </div>
-                  )}
-                </div>
-              )
-            }
-          </div>
         </div>
         {content && <Fragment set:html={content} />}
       </div>

src/components/widgets/HeroText.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon/components';
+import Button from '~/components/ui/Button.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -40,14 +40,7 @@ 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">
+                    <Button variant="primary" {...callToAction} />
-                      {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>
               )
@@ -58,15 +51,7 @@ const {
                   {typeof callToAction2 === 'string' ? (
                     <Fragment set:html={callToAction2} />
                   ) : (
-                    <a class="btn w-full" href={callToAction2?.href}>
+                    <Button {...callToAction2} />
-                      {callToAction2?.icon && (
-                        <>
-                          <Icon name={callToAction2.icon} class="w-5 h-5 mr-1 -ml-1.5" />
-                          &nbsp;
-                        </>
-                      )}
-                      {callToAction2.text}
-                    </a>
                   )}
                 </div>
               )

src/components/widgets/Pricing.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components';
-import CTA from '~/components/ui/CTA.astro';
+import Button from '~/components/ui/Button.astro';
 import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import type { Pricing } from '~/types';
@@ -64,11 +64,11 @@ const {
                     )}
                   </div>
                   {callToAction && (
-                    <div class={`flex justify-center btn ${hasRibbon ? 'btn-primary' : ''}`}>
+                    <div class={`flex justify-center`}>
                       {typeof callToAction === 'string' ? (
                         <Fragment set:html={callToAction} />
                       ) : (
-                        callToAction && callToAction.text && callToAction.href && <CTA callToAction={callToAction} />
+                        callToAction && callToAction.text && callToAction.href && <Button {...hasRibbon ? { variant:'primary' } : {}} {...callToAction}/>
                       )}
                     </div>
                   )}

src/components/widgets/Steps2.astro

@@ -1,8 +1,9 @@
 ---
 import { Icon } from 'astro-icon/components';
-import Headline from '../ui/Headline.astro';
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+import Headline from '~/components/ui/Headline.astro';
+import Button from '~/components/ui/Button.astro';
 import type { Steps } from '~/types';
-import WidgetWrapper from '../ui/WidgetWrapper.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -42,10 +43,7 @@ const {
             callToAction &&
             callToAction.text &&
             callToAction.href && (
-              <a class="btn btn-primary mb-12" href={callToAction.href} target="_blank" rel="noopener">
+              <Button variant="primary" {...callToAction} class="mb-12 w-auto"/>
-                {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>
             )
           )
         }

src/components/widgets/Testimonials.astro

@@ -1,7 +1,7 @@
 ---
 import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import CTA from '~/components/ui/CTA.astro';
+import Button from '~/components/ui/Button.astro';
 import Image from '~/components/common/Image.astro';
 import type { Testimonials } from '~/types';
 
@@ -68,8 +68,8 @@ const {
   </div>
   {
     callToAction && (
-      <div class="btn flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium">
+      <div class="flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium">
-        <CTA callToAction={callToAction} />
+        <Button {...callToAction} />
       </div>
     )
   }

src/pages/homes/mobile-app.astro

@@ -19,13 +19,16 @@ const metadata = {
 
   <Hero2
     tagline="Mobile App Web Demo"
-    callToAction={{
+    actions={[
-      targetBlank: true,
+      {
+        variant:"primary",
+        target: '_blank',
         text: 'Download App',
         href: 'https://github.com/onwidget/astrowind',
         icon: 'tabler:download',
-    }}
+      },
-    callToAction2={{ text: 'Learn more', href: '#features' }}
+      { 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',
       alt: 'AstroWind Hero Image',
@@ -203,7 +206,7 @@ const metadata = {
       },
     ]}
     callToAction={{
-      targetBlank: true,
+      target: '_blank',
       text: 'Read more testimonials',
       href: 'https://github.com/onwidget/astrowind',
       icon: 'tabler:chevron-right',

src/pages/homes/personal.astro

@@ -25,7 +25,7 @@ const metadata = {
         { text: 'Resume', href: '#resume' },
         { text: 'Porfolio', href: '#porfolio' },
         { text: 'Blog', href: '#blog' },
-        { text: 'Github', href: '#' },
+        { text: 'Github', href: 'https://github.com/onwidget' },
       ]}
       actions={[
         {
@@ -44,7 +44,7 @@ const metadata = {
     id="hero"
     title="Sarah Johnson"
     tagline="Personal Web Demo"
-    callToAction={{ targetBlank: true, text: 'Hire me', href: '/' }}
+    actions={[{ variant: "primary", target: '_blank', 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
@@ -62,7 +62,7 @@ const metadata = {
       {
         icon: 'tabler:brand-dribbble',
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Dribbble',
           href: '#',
         },
@@ -70,7 +70,7 @@ const metadata = {
       {
         icon: 'tabler:brand-behance',
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Behance',
           href: '#',
         },
@@ -78,7 +78,7 @@ const metadata = {
       {
         icon: 'tabler:brand-pinterest',
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Pinterest',
           href: '#',
         },
@@ -220,7 +220,7 @@ const metadata = {
       alt: 'Tech Design Image',
     }}
     callToAction={{
-      targetBlank: true,
+      target: '_blank',
       text: 'Go to the project',
       icon: 'tabler:chevron-right',
       href: '#',
@@ -258,7 +258,7 @@ const metadata = {
       alt: 'Art and Music Poster Image',
     }}
     callToAction={{
-      targetBlank: true,
+      target: '_blank',
       text: 'Go to the project',
       icon: 'tabler:chevron-right',
       href: '#',
@@ -295,7 +295,7 @@ const metadata = {
       alt: 'Fashion e-commerce Image',
     }}
     callToAction={{
-      targetBlank: true,
+      target: '_blank',
       text: 'Go to the project',
       icon: 'tabler:chevron-right',
       href: '#',

src/pages/homes/saas.astro

@@ -13,7 +13,7 @@ import FAQs from '~/components/widgets/FAQs.astro';
 import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
 
 const metadata = {
-  title: 'Saas Landing Page',
+  title: 'SaaS Landing Page',
 };
 ---
 
@@ -23,12 +23,12 @@ const metadata = {
       {...headerData}
       actions={[
         {
-          type: 'ghost',
+          variant: 'secondary',
           text: 'Login',
           href: '#',
         },
         {
-          type: 'primary',
+          variant: 'primary',
           text: 'Sign Up',
           href: '#',
         },
@@ -41,8 +41,10 @@ const metadata = {
 
   <Hero2
     tagline="SaaS Web Demo"
-    callToAction={{ targetBlank: true, text: 'Get Started', href: 'https://github.com/onwidget/astrowind' }}
+    actions={[
-    callToAction2={{ text: 'Learn more', href: '#features' }}
+      { variant: "primary", target: '_blank', text: 'Get Started', href: 'https://github.com/onwidget/astrowind' },
+      { 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',
       alt: 'AstroWind Hero Image',
@@ -240,7 +242,7 @@ const metadata = {
         price: '0',
         period: '/ month',
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Get Started for Free',
           href: '#',
         },
@@ -251,7 +253,7 @@ const metadata = {
         price: 15,
         period: '/ Month',
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Upgrade to Pro',
           href: '#',
         },
@@ -264,7 +266,7 @@ const metadata = {
         price: 45,
         period: '/ Month',
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Unlock Enterprise Features',
           href: '#',
         },

src/pages/homes/startup.astro

@@ -21,13 +21,16 @@ const metadata = {
 
   <Hero
     tagline="Startup Web Demo"
-    callToAction={{
+    actions={[
-      targetBlank: true,
+      {
+        variant: 'primary',
+        target: '_blank',
         text: 'Get templates',
         href: 'https://github.com/onwidget/astrowind',
         icon: 'tabler:download',
-    }}
+      },
-    callToAction2={{ text: 'Learn more', href: '#features' }}
+      { text: 'Learn more', href: '#features' },
+    ]}
   >
     <Fragment slot="title">
       Improve <span class="hidden sm:inline">the online presence of</span> your <span
@@ -255,36 +258,40 @@ const metadata = {
         title: 'Phone',
         icon: 'tabler:phone',
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Call us',
           href: '/',
+          variant: 'link',
         },
       },
       {
         title: 'Email',
         icon: 'tabler:mail',
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Write to us',
           href: '/',
+          variant: 'link',
         },
       },
       {
         title: 'Chat with sales',
         icon: 'tabler:message-circle',
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Start chatting',
           href: '/',
+          variant: 'link',
         },
       },
       {
         title: 'Chat with support',
         icon: 'tabler:message-circle',
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Start chatting',
           href: '/',
+          variant: 'link',
         },
       },
     ]}
@@ -294,7 +301,7 @@ const metadata = {
 
   <CallToAction
     callToAction={{
-      targetBlank: true,
+      target: '_blank',
       text: 'Get templates',
       href: 'https://github.com/onwidget/astrowind',
       icon: 'tabler:download',

src/pages/index.astro

@@ -22,13 +22,16 @@ const metadata = {
   <!-- Hero Widget ******************* -->
 
   <Hero
-    callToAction={{
+    actions={[
-      targetBlank: true,
+      {
+        variant: 'primary',
+        target: '_blank',
         text: 'Get template',
         href: 'https://github.com/onwidget/astrowind',
         icon: 'tabler:download',
-    }}
+      },
-    callToAction2={{ text: 'Learn more', href: '#features' }}
+      { text: 'Learn more', href: '#features' },
+    ]}
     image={{ src: '~/assets/images/hero.png', alt: 'AstroWind Hero Image' }}
   >
     <Fragment slot="title">

src/pages/landing/click-through.astro

@@ -16,8 +16,7 @@ const metadata = {
     tagline="Click-through Demo"
     title="Click-through Landing Page: The Perfect Bridge to Conversion!"
     subtitle="Learn how to design a Click-Through Landing Page that seamlessly guides visitors to your main offer."
-    callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
+    actions={[{ variant:"primary", text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }, { text: 'Learn more', href: '#' }]}
-    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: 'Click-through Landing Page Hero Image',

src/pages/landing/lead-generation.astro

@@ -16,8 +16,7 @@ const metadata = {
     tagline="Lead Generation Landing Demo"
     title="Effective Lead Generation Landing Page: Unlock the Secrets"
     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: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
+    actions={[{ variant:"primary", text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }, { text: 'Learn more', href: '#' }]}
-    callToAction2={{ text: 'Learn more', href: '#' }}
     image={{
       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: 'Magnet attracting screws. Lead generation landing page demo',

src/pages/landing/pre-launch.astro

@@ -16,8 +16,10 @@ const metadata = {
     tagline="Pre-launch Demo"
     title="Pre-launch Landing Page: Build the Hype Before the Big Reveal!"
     subtitle="Craft a tantalizing Coming Soon or Pre-Launch Landing Page that leaves visitors eagerly awaiting your launch."
-    callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
+    actions={[
-    callToAction2={{ text: 'Learn more', href: '#' }}
+      { variant: 'primary', text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' },
+      { text: 'Learn more', href: '#' },
+    ]}
     image={{
       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: 'Store with a Coming Soon sign. Pre-launch Landing Page',

src/pages/landing/product.astro

@@ -16,8 +16,10 @@ const metadata = {
     tagline="Product Details Demo"
     title="Product Landing Page: Showcase with Precision and Passion!"
     subtitle="Step-by-step guide to designing a Landing Page that highlights every facet of your product or service."
-    callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
+    actions={[
-    callToAction2={{ text: 'Learn more', href: '#' }}
+      { variant: 'primary', text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' },
+      { text: 'Learn more', href: '#' },
+    ]}
     image={{
       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: 'A spotlight on a product. Product Details Landing Page Demo',

src/pages/landing/sales.astro

@@ -16,8 +16,7 @@ const metadata = {
     tagline="Long-form Sales Demo"
     title="Long-form Sales: Sell with a Story: The Long-form Way!"
     subtitle="Dive deep into crafting a Landing Page that narrates, persuades, and converts."
-    callToAction={{ text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }}
+    actions={[{ variant: "primary", text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }, { text: 'Learn more', href: '#' }]}
-    callToAction2={{ text: 'Learn more', href: '#' }}
     image={{
       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: 'Children telling a story. Long-form Sales Landing Page demo',

src/pages/landing/subscription.astro

@@ -16,8 +16,7 @@ const metadata = {
     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' }}
+    actions={[{ variant: "primary", text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' },{ text: 'Learn more', href: '#' } ]}
-    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',

src/pages/pricing.astro

@@ -47,7 +47,7 @@ const metadata = {
           },
         ],
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Get started',
           href: '#',
         },
@@ -75,7 +75,7 @@ const metadata = {
           },
         ],
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Get started',
           href: '#',
         },
@@ -102,7 +102,7 @@ const metadata = {
           },
         ],
         callToAction: {
-          targetBlank: true,
+          target: '_blank',
           text: 'Get started',
           href: '#',
         },

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={{ targetBlank: true, text: 'Start exploring', href: '/' }}
+    actions={[{ variant:"primary", target: '_blank', 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',
@@ -201,7 +201,7 @@ const metadata = {
       },
     ]}
     callToAction={{
-      targetBlank: true,
+      target: '_blank',
       text: 'More testimonials...',
       href: 'https://github.com/onwidget/astrowind',
       icon: 'tabler:chevron-right',

src/types.d.ts

@@ -1,4 +1,5 @@
 import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
+import type { HTMLAttributes } from 'astro/types';
 
 export interface Post {
   /** A unique ID number that identifies a post. */
@@ -174,11 +175,10 @@ export interface Disclaimer {
 }
 
 // COMPONENTS
-export interface CallToAction {
+export interface CallToAction extends HTMLAttributes<a> {
-  targetBlank?: boolean;
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'link';
   text?: string;
   icon?: string;
-  href?: string;
   classes?: Record<string, string>;
 }