Merge pull request #250 from prototypa/astro-v3

Replace props in CallToAction widget: 'callToAction' to 'actions' and minor fixes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@onwidget/astrowind",
   "description": "AstroWind: A free template using Astro 3.0 and Tailwind CSS. Astro starter theme.",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -18,7 +18,7 @@
     "@astrolib/analytics": "^0.4.2",
     "@astrolib/seo": "^1.0.0-beta.4",
     "@fontsource-variable/inter": "^5.0.8",
-    "astro": "^3.0.2",
+    "astro": "^3.0.7",
     "astro-icon": "^1.0.0-next.2",
     "limax": "4.1.0",
     "lodash.merge": "^4.6.2",
@@ -34,7 +34,7 @@
     "@types/lodash.merge": "^4.6.7",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
-    "astro-compress": "^2.0.14",
+    "astro-compress": "^2.0.15",
     "eslint": "^8.48.0",
     "eslint-plugin-astro": "^0.29.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",

src/components/ui/Button.astro

@@ -16,7 +16,7 @@ const variants = {
   primary: 'btn-primary' ,
   secondary: 'btn-secondary',
   tertiary: 'btn btn-tertiary',
-  link: 'hover:text-primary',
+  link: 'cursor-pointer hover:text-primary',
 };
 ---
 

src/components/widgets/CallToAction.astro

@@ -9,13 +9,14 @@ interface Props extends Widget {
   subtitle?: string;
   tagline?: string;
   callToAction?: CallToAction;
+  actions?: string | CallToAction[];
 }
 
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
   tagline = await Astro.slots.render('tagline'),
-  callToAction = await Astro.slots.render('callToAction'),
+  actions = await Astro.slots.render('actions'),
 
   id,
   isDark = false,
@@ -39,15 +40,18 @@ const {
       }}
     />
     {
-      typeof callToAction === 'string' ? (
+      actions && (
-        <Fragment set:html={callToAction} />
+        <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 mt-6">
-      ) : (
+          {Array.isArray(actions) ? (
-        callToAction &&
+            actions.map((action) => (
-        callToAction.text && (
+              <div class="flex w-full sm:w-auto">
-          <div class="mt-6 max-w-xs mx-auto">
+                <Button {...(action || {})} class="w-full sm:mb-0" />
-            <Button variant="primary" {...callToAction} class="w-full sm:w-auto" />
+              </div>
+            ))
+          ) : (
+            <Fragment set:html={actions} />
+          )}
         </div>
-        )
       )
     }
   </div>

src/components/widgets/Header.astro

@@ -70,7 +70,6 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
         <Logo />
       </a>
       <div class="flex items-center md:hidden">
-        {/* <ToggleTheme /> */}
         <ToggleMenu />
       </div>
     </div>

src/navigation.js

@@ -6,7 +6,7 @@ export const headerData = {
       text: 'Homes',
       links: [
         {
-          text: 'Sass',
+          text: 'SaaS',
           href: getPermalink('/homes/saas'),
         },
         {

src/pages/homes/mobile-app.astro

@@ -1,6 +1,8 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
 
+import Header from '~/components/widgets/Header.astro';
+
 import Hero2 from '~/components/widgets/Hero2.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
 import Features3 from '~/components/widgets/Features3.astro';
@@ -9,34 +11,54 @@ import Testimonials from '~/components/widgets/Testimonials.astro';
 import FAQs from '~/components/widgets/FAQs.astro';
 import Stats from '~/components/widgets/Stats.astro';
 
+import Button from '~/components/ui/Button.astro';
+import Image from '~/components/common/Image.astro';
+
+import appStoreImg from '~/assets/images/app-store.png';
+import googlePlayImg from '~/assets/images/google-play.png';
+
+const appStoreDownloadLink = 'https://github.com/onwidget/astrowind';
+const googlePlayDownloadLink = 'https://github.com/onwidget/astrowind';
+
 const metadata = {
   title: 'Mobile App Homepage',
 };
 ---
 
 <Layout metadata={metadata}>
+  <Fragment slot="announcement"></Fragment>
+  <Fragment slot="header">
+    <Header
+      position="left"
+      links={[
+        { text: 'Services', href: '#' },
+        { text: 'Features', href: '#' },
+        { text: 'About', href: '#' },
+      ]}
+      actions={[
+        {
+          text: 'Download',
+          href: '#download',
+        },
+      ]}
+      isSticky
+      showToggleTheme
+    />
+  </Fragment>
+
   <!-- Hero2 Widget ******************* -->
 
   <Hero2
     tagline="Mobile App Web Demo"
-    actions={[
-      {
-        variant:"primary",
-        target: '_blank',
-        text: 'Download App',
-        href: 'https://github.com/onwidget/astrowind',
-        icon: 'tabler:download',
-      },
-      { 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',
     }}
   >
     <Fragment slot="title">
-      AstroWind <span class="text-accent dark:text-white highlight">App</span>: <br /> building professional websites
+      <span class="text-accent dark:text-white highlight">AstroWind App</span>: <br /> professional websites <span
-      made easy
+        class="hidden xl:inline">made easy</span
+      >
     </Fragment>
 
     <Fragment slot="subtitle">
@@ -45,6 +67,16 @@ const metadata = {
       </span>
        Download now and embark on a journey to elevate your projects like never before.
     </Fragment>
+
+    <div slot="actions" class="flex max-w-sm gap-4">
+      <Button variant="link" href={appStoreDownloadLink}>
+        <Image src={appStoreImg} alt="App Store Image" width={200} />
+      </Button>
+
+      <Button variant="link" href={googlePlayDownloadLink}>
+        <Image src={googlePlayImg} alt="Google Play Image" width={200} />
+      </Button>
+    </div>
   </Hero2>
 
   <!-- Features3 Widget ************** -->
@@ -248,12 +280,18 @@ const metadata = {
   <!-- CallToAction Widget *********** -->
 
   <CallToAction
-    title="Instant access to beautiful templates"
+    id="download"
+    title="Download our app now!"
     subtitle="Access a variety of stunning templates, simplify your creative process, and elevate your online presence."
-    callToAction={{
+  >
-      text: 'Download App',
+    <div slot="actions" class="flex max-w-sm gap-4">
-      href: 'https://github.com/onwidget/astrowind',
+      <Button variant="link" href={appStoreDownloadLink}>
-      icon: 'tabler:download',
+        <Image src={appStoreImg} alt="App Store Image" width={200} />
-    }}
+      </Button>
-  />
+
+      <Button variant="link" href={googlePlayDownloadLink}>
+        <Image src={googlePlayImg} alt="Google Play Image" width={200} />
+      </Button>
+    </div>
+  </CallToAction>
 </Layout>

src/pages/homes/personal.astro

@@ -380,10 +380,10 @@ const metadata = {
   <CallToAction
     title="Let's create together"
     subtitle="Ready to transform your vision into captivating designs?"
-    callToAction={{
+    actions={[{
       text: 'Hire me',
       href: '/',
-    }}
+    }]}
   />
 
   <!-- BlogLatestPost Widget **************** -->

src/pages/homes/startup.astro

@@ -300,12 +300,12 @@ const metadata = {
   <!-- CallToAction Widget *********** -->
 
   <CallToAction
-    callToAction={{
+    actions={[{
       target: '_blank',
       text: 'Get templates',
       href: 'https://github.com/onwidget/astrowind',
       icon: 'tabler:download',
-    }}
+    }]}
   >
     <Fragment slot="title">Be a part of our vision</Fragment>
 

src/pages/index.astro

@@ -377,11 +377,11 @@ const metadata = {
   <!-- CallToAction Widget *********** -->
 
   <CallToAction
-    callToAction={{
+    actions={[{
       text: 'Get template',
       href: 'https://github.com/onwidget/astrowind',
       icon: 'tabler:download',
-    }}
+    }]}
   >
     <Fragment slot="title">
       Astro&nbsp;+&nbsp;<br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>

src/pages/landing/click-through.astro

@@ -2,7 +2,7 @@
 import Layout from '~/layouts/LandingLayout.astro';
 
 import Hero2 from '~/components/widgets/Hero2.astro';
-import CallToAction from "~/components/widgets/CallToAction.astro"
+import CallToAction from '~/components/widgets/CallToAction.astro';
 
 const metadata = {
   title: 'Click-through Landing Page Demo',
@@ -16,7 +16,10 @@ 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."
-    actions={[{ variant:"primary", text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' }, { text: 'Learn more', href: '#' }]}
+    actions={[
+      { variant: 'primary', text: 'Call to Action', href: '#', icon: 'tabler:square-rounded-arrow-right' },
+      { 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',
@@ -26,10 +29,13 @@ const metadata = {
   <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={{
+    actions={[
-      text: 'Get template',
+      {
+        variant: 'primary',
+        text: 'Download Template',
         href: 'https://github.com/onwidget/astrowind',
         icon: 'tabler:download',
-    }}
+      },
+    ]}
   />
 </Layout>

src/pages/landing/lead-generation.astro

@@ -26,10 +26,11 @@ const metadata = {
   <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={{
+  actions={[{
-      text: 'Get template',
+    variant: "primary",
+    text: 'Download Template',
     href: 'https://github.com/onwidget/astrowind',
     icon: 'tabler:download',
-    }}
+  }]}
 />
 </Layout>

src/pages/landing/pre-launch.astro

@@ -29,10 +29,11 @@ const metadata = {
   <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={{
+  actions={[{
-      text: 'Get template',
+    variant: "primary",
+    text: 'Download Template',
     href: 'https://github.com/onwidget/astrowind',
     icon: 'tabler:download',
-    }}
+  }]}
 />
 </Layout>

src/pages/landing/product.astro

@@ -29,10 +29,11 @@ const metadata = {
   <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={{
+  actions={[{
-      text: 'Get template',
+    variant: "primary",
+    text: 'Download Template',
     href: 'https://github.com/onwidget/astrowind',
     icon: 'tabler:download',
-    }}
+  }]}
 />
 </Layout>

src/pages/landing/sales.astro

@@ -26,10 +26,11 @@ const metadata = {
   <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={{
+  actions={[{
-      text: 'Get template',
+    variant: "primary",
+    text: 'Download Template',
     href: 'https://github.com/onwidget/astrowind',
     icon: 'tabler:download',
-    }}
+  }]}
 />
 </Layout>

src/pages/landing/subscription.astro

@@ -26,10 +26,11 @@ const metadata = {
   <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={{
+  actions={[{
-      text: 'Get template',
+    variant: "primary",
+    text: 'Download Template',
     href: 'https://github.com/onwidget/astrowind',
     icon: 'tabler:download',
-    }}
+  }]}
 />
 </Layout>

src/pages/services.astro

@@ -211,10 +211,10 @@ const metadata = {
   <!-- CallToAction Widget *********** -->
 
   <CallToAction
-    callToAction={{
+    actions={[{
       text: 'Start exploring',
       href: '/',
-    }}
+    }]}
     title="Dive into our template collection"
     subtitle="Whether you're in business, design, or education, our templates are here to elevate your projects."
   />