Modify stats widget and include on mobile-app page

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">
+<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">
     {
-    (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>
+      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 && (
-          <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}
-          />
+              <h6 class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
+                {title}
+              </h6>
             )}
-        {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">
-    {
-      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}
-          </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>

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' },
     ]}
   />
 

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

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' },
     ]}
   />