From fc13e8328a0cd5e81f8ec792c3273cf730375440 Mon Sep 17 00:00:00 2001
From: widgeter <onwidget.developer@gmail.com>
Date: Mon, 7 Aug 2023 18:56:09 +0200
Subject: [PATCH 1/3] Change images in the Features3 and Testimonials

---
 src/components/widgets/Content.astro      | 22 +++-------------------
 src/components/widgets/Features3.astro    | 22 ++++++++++++++++++++--
 src/components/widgets/Testimonials.astro | 22 ++++++++++++++++------
 src/pages/landing/mobile-app.astro        | 18 +++++++++---------
 src/types.d.ts                            |  8 +++++---
 5 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro
index 8c3f678..7417285 100644
--- a/src/components/widgets/Content.astro
+++ b/src/components/widgets/Content.astro
@@ -1,23 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
-
-interface Item {
-  title: string;
-  description?: string;
-  icon?: string;
-}
-
-export interface Props {
-  title?: string;
-  subtitle?: string;
-  tagline?: string;
-  content?: string;
-  items?: Array<Item>;
-  image?: string | any; // TODO: find HTMLElementProps
-  isReversed?: boolean;
-  isAfterContent?: boolean;
-}
+import type { Content } from '~/types';
 
 const {
   title = await Astro.slots.render('title'),
@@ -28,7 +12,7 @@ const {
   image = await Astro.slots.render('image'),
   isReversed = false,
   isAfterContent = false,
-} = Astro.props;
+} = Astro.props as Content;
 ---
 
 <section class:list={[{ 'pt-0 md:pt-0': isAfterContent }, 'bg-blue-50 dark:bg-page py-16 md:py-20 not-prose']}>
@@ -95,7 +79,7 @@ const {
                   widths={[400, 768]}
                   sizes="(max-width: 768px) 100vw, 432px"
                   aspectRatio="500:500"
-                  {...image}
+                  {...(image as any)}
                 />
               )}
             </div>
diff --git a/src/components/widgets/Features3.astro b/src/components/widgets/Features3.astro
index 843652f..ea2575e 100644
--- a/src/components/widgets/Features3.astro
+++ b/src/components/widgets/Features3.astro
@@ -1,4 +1,5 @@
 ---
+import { Picture } from '@astrojs/image/components';
 import Headline from '~/components/ui/Headline.astro';
 import ItemGrid from '~/components/ui/ItemGrid.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
@@ -22,8 +23,25 @@ const {
 <WidgetWrapper id={id} isDark={isDark} containerClass={classes?.container} bg={bg}>
   <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline} />
 
-  <div class="aspect-w-16 aspect-h-7">
-    {image && image.src && <img src={image.src} alt={image.alt || ''} class="w-full h-80 object-cover rounded-xl" />}
+  <div aria-hidden="true" class="aspect-w-16 aspect-h-7">
+    {
+      image && (
+        <div class="w-full h-80 object-cover rounded-xl mx-auto bg-gray-500 shadow-lg">
+          {typeof image === 'string' ? (
+            <Fragment set:html={image} />
+          ) : (
+            <Picture
+              class="w-full h-80 object-cover rounded-xl mx-auto bg-gray-500 shadow-lg"
+              width={0}
+              height={320}
+              widths={[400, 768]}
+              aspectRatio="16:7"
+              {...(image as any)}
+            />
+          )}
+        </div>
+      )
+    }
   </div>
 
   <ItemGrid
diff --git a/src/components/widgets/Testimonials.astro b/src/components/widgets/Testimonials.astro
index 0feb864..eb0ce62 100644
--- a/src/components/widgets/Testimonials.astro
+++ b/src/components/widgets/Testimonials.astro
@@ -3,6 +3,7 @@ import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import type { Testimonials } from '~/types';
 import CTA from '../ui/CTA.astro';
+import { Picture } from '@astrojs/image/components';
 
 const {
   title = '',
@@ -37,12 +38,21 @@ const {
               <hr class="border-slate-200 dark:border-slate-600 my-4" />
 
               <div class="flex items-center">
-                {image && image.src && (
-                  <img
-                    src={image.src}
-                    alt={image.alt}
-                    class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600"
-                  />
+                {image && (
+                  <div class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600">
+                    {typeof image === 'string' ? (
+                      <Fragment set:html={image} />
+                    ) : (
+                      <Picture
+                        class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600"
+                        width={40}
+                        height={40}
+                        widths={[400, 768]}
+                        aspectRatio="1:1"
+                        {...(image as any)}
+                      />
+                    )}
+                  </div>
                 )}
 
                 <div class="grow ml-3">
diff --git a/src/pages/landing/mobile-app.astro b/src/pages/landing/mobile-app.astro
index 76348dc..1331c76 100644
--- a/src/pages/landing/mobile-app.astro
+++ b/src/pages/landing/mobile-app.astro
@@ -88,8 +88,8 @@ const metadata = {
       },
     ]}
     image={{
-      src: 'https://cdn.pixabay.com/photo/2023/07/18/21/40/astronaut-8135685_1280.jpg',
-      alt: 'Astronaut Image',
+      src: import('~/assets/images/colors.jpg'),
+      alt: 'Colorful Image',
     }}
   />
 
@@ -125,8 +125,8 @@ const metadata = {
       },
     ]}
     image={{
-      src: 'https://cdn.pixabay.com/photo/2023/07/22/19/25/ai-generated-8144026_1280.jpg',
-      alt: 'Features Image',
+      src: import('~/assets/images/caos.jpg'),
+      alt: 'Colorful Image',
     }}
   >
     <Fragment slot="content">
@@ -168,8 +168,8 @@ const metadata = {
       },
     ]}
     image={{
-      src: 'https://cdn.pixabay.com/photo/2020/07/25/22/26/rocket-5438053_1280.jpg',
-      alt: 'Benefits Image',
+      src: import('~/assets/images/vintage.jpg'),
+      alt: 'Vintage Image',
     }}
   >
     <Fragment slot="content">
@@ -188,7 +188,7 @@ const metadata = {
         name: 'Cary Kennedy',
         job: 'Film director',
         image: {
-          src: 'https://cdn.pixabay.com/photo/2023/07/22/19/25/ai-generated-8144026_1280.jpg',
+          src: import('~/assets/images/colors.jpg'),
           alt: 'Cary Kennedy Image',
         },
       },
@@ -198,7 +198,7 @@ const metadata = {
         name: 'Josh Wilkinson',
         job: 'Product Manager',
         image: {
-          src: 'https://cdn.pixabay.com/photo/2023/07/18/21/40/astronaut-8135685_1280.jpg',
+          src: import('~/assets/images/vintage.jpg'),
           alt: 'Josh Wilkinson Image',
         },
       },
@@ -208,7 +208,7 @@ const metadata = {
         name: 'Sidney Hansen',
         job: 'Decorator',
         image: {
-          src: 'https://cdn.pixabay.com/photo/2020/07/25/22/26/rocket-5438053_1280.jpg',
+          src: import('~/assets/images/caos.jpg'),
           alt: 'Sidney Hansen Image',
         },
       },
diff --git a/src/types.d.ts b/src/types.d.ts
index 963d00b..6361d53 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -149,7 +149,7 @@ export interface Testimonial {
   testimonial?: string;
   name?: string;
   job?: string;
-  image?: Image;
+  image?: string | unknown;
 }
 
 // COMPONENTS
@@ -207,7 +207,7 @@ export interface Clients extends Headline, Widget {
 }
 
 export interface Features extends Headline, Widget {
-  image?: Image;
+  image?: string | unknown;
   video?: Video;
   items: Array<Item>;
   columns: number;
@@ -235,8 +235,10 @@ export interface Steps extends Headline, Widget {
 }
 
 export interface Content extends Headline, Widget {
-  image?: string;
+  content?: string;
+  image?: string | unknown;
   items?: Array<Item>;
   columns?: number;
   isReversed?: boolean;
+  isAfterContent?: boolean;
 }

From 9c18e021c2b2be8a8c6a670df5ddfe8df21ca54f Mon Sep 17 00:00:00 2001
From: widgeter <onwidget.developer@gmail.com>
Date: Mon, 7 Aug 2023 19:37:02 +0200
Subject: [PATCH 2/3] Include FAQ widget on mobile app page

---
 src/pages/landing/mobile-app.astro | 41 +++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/pages/landing/mobile-app.astro b/src/pages/landing/mobile-app.astro
index 1331c76..9f0d04c 100644
--- a/src/pages/landing/mobile-app.astro
+++ b/src/pages/landing/mobile-app.astro
@@ -7,6 +7,7 @@ import CallToAction from '~/components/widgets/CallToAction.astro';
 import Features3 from '~/components/widgets/Features3.astro';
 import Content from '~/components/widgets/Content.astro';
 import Testimonials from '~/components/widgets/Testimonials.astro';
+import FAQs from '~/components/widgets/FAQs.astro';
 
 const metadata = {
   title: 'Mobile App Landing Page',
@@ -221,6 +222,42 @@ const metadata = {
     }}
   />
 
+  <!-- FAQs Widget ******************* -->
+
+  <FAQs
+    title="Still have some doubts?"
+    items={[
+      {
+        title: 'What does this app do?',
+        description:
+          'Cras ac velit laoreet, congue enim nec, ultrices ante. Suspendisse aliquam mi id sollicitudin faucibus.',
+      },
+      {
+        title: 'How can this app solve my problem?',
+        description:
+          'Proin at turpis eget elit sagittis laoreet. Proin id nisl elit mi risus viverra eros. Aenean egestas arcu sed laoreet venenatis. Proin venenatis porta fermentum. Nulla ex lorem, aliquam sed volutpat sed, auctor vel libero.',
+      },
+      {
+        title: 'Is it available for my device?',
+        description:
+          'Sed malesuada nisl turpis, et aliquet ex facilisis a. Proin in tortor ante. Quisque congue, lacus eu feugiat feugia.',
+      },
+      {
+        title: 'What makes this app different from others?',
+        description: 'Sed nulla nibh, facilisis non volutpat non, dictum quis nunc. Nullam mollis tempus odio.',
+      },
+      {
+        title: 'Are there any costs involved?',
+        description:
+          'Proin aliquet, arcu in semper consectetur, ipsum urna pellentesque ipsum, sit amet aliquam odio nunc ac orci.',
+      },
+    ]}
+  >
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+    </Fragment>
+  </FAQs>
+
   <!-- CallToAction Widget *********** -->
 
   <CallToAction
@@ -230,9 +267,7 @@ const metadata = {
       icon: 'tabler:download',
     }}
   >
-    <Fragment slot="title">
-      Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap"> Tailwind CSS</span>
-    </Fragment>
+    <Fragment slot="title">Get Started Now</Fragment>
 
     <Fragment slot="subtitle">
       Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't

From ebd1ec70cb9d9d8f081277506850c7c74538f765 Mon Sep 17 00:00:00 2001
From: widgeter <onwidget.developer@gmail.com>
Date: Mon, 7 Aug 2023 20:43:46 +0200
Subject: [PATCH 3/3] Modify stats widget and include on mobile-app page

---
 src/components/widgets/Stats.astro | 79 +++++++++++++-----------------
 src/pages/index.astro              | 27 +++++-----
 src/pages/landing/mobile-app.astro | 11 +++++
 src/pages/landing/startup.astro    | 10 ++--
 4 files changed, 64 insertions(+), 63 deletions(-)

diff --git a/src/components/widgets/Stats.astro b/src/components/widgets/Stats.astro
index 9c1ae16..db52bef 100644
--- a/src/components/widgets/Stats.astro
+++ b/src/components/widgets/Stats.astro
@@ -1,57 +1,46 @@
 ---
-interface Item {
-  name: string;
-  value: string;
-}
-
-export interface Props {
-  title?: string;
-  subtitle?: string;
-  tagline?: string;
-  items?: Array<Item>;
-}
+import { Stats } from '~/types';
+import WidgetWrapper from '../ui/WidgetWrapper.astro';
+import Headline from '../ui/Headline.astro';
+import { Icon } from 'astro-icon/components';
 
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
   tagline,
-  items = [],
-} = Astro.props;
+  stats = [],
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render('bg'),
+} = Astro.props as Stats;
 ---
 
-<div class="px-4 py-4 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl not-prose">
-  {
-    (title || subtitle || tagline) && (
-      <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
-        {tagline && (
-          <p class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase">
-            {tagline}
-          </p>
-        )}
-        {title && (
-          <h2
-            class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading"
-            set:html={title}
-          />
-        )}
-        {subtitle && (
-          <p class="max-w-3xl mx-auto text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
-        )}
-      </div>
-    )
-  }
-  <div class="grid grid-cols-2 row-gap-8 md:grid-cols-4">
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
+  <Headline title={title} subtitle={subtitle} tagline={tagline} />
+  <div class="flex flex-wrap justify-center -m-4 text-center">
     {
-      items.map(({ name, value }) => (
-        <div class="text-center md:border-r md:last:border-none dark:md:border-slate-500 mb-12 md:mb-0">
-          <div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary dark:text-blue-600 font-heading">
-            {value}
+      stats &&
+        stats.map(({ amount, title, icon }) => (
+          <div class="p-4 md:w-1/4 sm:w-1/2 w-full min-w-[220px] mb-12 text-center md:mb-0 md:border-r md:last:border-none dark:md:border-slate-500">
+            {icon && (
+              <div class="flex items-center justify-center mx-auto mb-4 text-primary">
+                <Icon name={icon} class="w-10 h-10" />
+              </div>
+            )}
+            {amount && (
+              <div class="font-heading text-primary text-[2.6rem] font-bold dark:text-white lg:text-5xl xl:text-6xl">
+                {amount}
+              </div>
+            )}
+            {title && (
+              <h6 class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
+                {title}
+              </h6>
+            )}
           </div>
-          <p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
-            {name}
-          </p>
-        </div>
-      ))
+        ))
     }
   </div>
-</div>
+</WidgetWrapper>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 46a53b5..efd03f0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -13,7 +13,7 @@ import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
 
 const metadata = {
-  title: "AstroWind — Free template for create a website with Astro + Tailwind CSS",
+  title: 'AstroWind — Free template for create a website with Astro + Tailwind CSS',
   dontUseTitleTemplate: true,
 };
 ---
@@ -28,15 +28,16 @@ const metadata = {
   >
     <Fragment slot="title">
       Free template for <span class="hidden xl:inline">creating websites with</span>
-      <span class="text-accent dark:text-white highlight"> Astro 2.0</span> + Tailwind CSS    </Fragment>
+      <span class="text-accent dark:text-white highlight"> Astro 2.0</span> + Tailwind CSS
+    </Fragment>
 
     <Fragment slot="subtitle">
       <span class="hidden sm:inline">
-        <span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 2.0 +
-        Tailwind CSS.</span
+        <span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 2.0
+        + Tailwind CSS.</span
       >
-      <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span> Suitable for Startups,
-      Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
+      <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span> Suitable for
+      Startups, Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
     </Fragment>
   </Hero>
 
@@ -120,8 +121,8 @@ const metadata = {
   >
     <Fragment slot="content">
       <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
-      Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod
-      tacimates.
+       Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
+      euismod tacimates.
     </Fragment>
   </Content>
 
@@ -311,11 +312,11 @@ const metadata = {
   <!-- Stats Widget ****************** -->
 
   <Stats
-    items={[
-      { name: 'Downloads', value: '132K' },
-      { name: 'Stars', value: '24.8K' },
-      { name: 'Forks', value: '10.3K' },
-      { name: 'Users', value: '48.4K' },
+    stats={[
+      { title: 'Downloads', amount: '132K' },
+      { title: 'Stars', amount: '24.8K' },
+      { title: 'Forks', amount: '10.3K' },
+      { title: 'Users', amount: '48.4K' },
     ]}
   />
 
diff --git a/src/pages/landing/mobile-app.astro b/src/pages/landing/mobile-app.astro
index 9f0d04c..d919239 100644
--- a/src/pages/landing/mobile-app.astro
+++ b/src/pages/landing/mobile-app.astro
@@ -8,6 +8,7 @@ import Features3 from '~/components/widgets/Features3.astro';
 import Content from '~/components/widgets/Content.astro';
 import Testimonials from '~/components/widgets/Testimonials.astro';
 import FAQs from '~/components/widgets/FAQs.astro';
+import Stats from '~/components/widgets/Stats.astro';
 
 const metadata = {
   title: 'Mobile App Landing Page',
@@ -178,6 +179,16 @@ const metadata = {
     </Fragment>
   </Content>
 
+  <!-- Stats Widget ****************** -->
+
+  <Stats
+    stats={[
+      { amount: '20K', icon: 'tabler:download' },
+      { amount: '18.5K', icon: 'tabler:users' },
+      { amount: '4.7', icon: 'tabler:user-star' },
+    ]}
+  />
+
   <!-- Testimonials Widget *********** -->
 
   <Testimonials
diff --git a/src/pages/landing/startup.astro b/src/pages/landing/startup.astro
index a71ed6f..06f32d2 100644
--- a/src/pages/landing/startup.astro
+++ b/src/pages/landing/startup.astro
@@ -57,11 +57,11 @@ const metadata = {
   <!-- Stats Widget ****************** -->
 
   <Stats
-    items={[
-      { name: 'Templates', value: '56' },
-      { name: 'Downloads', value: '182K' },
-      { name: 'User Ratings', value: '4.8' },
-      { name: 'Satisfied Clients', value: '116K' },
+    stats={[
+      { title: 'Templates', amount: '56' },
+      { title: 'Downloads', amount: '182K' },
+      { title: 'User Ratings', amount: '4.8' },
+      { title: 'Satisfied Clients', amount: '116K' },
     ]}
   />