Merge pull request #212 from widgeter/main

Include some widgets on mobile-app page

src/components/widgets/Content.astro

@@ -1,23 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
-
+import type { Content } from '~/types';
-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;
-}
 
 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>

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">
+  <div aria-hidden="true" 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" />}
+    {
+      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

src/components/widgets/Stats.astro

@@ -1,57 +1,46 @@
 ---
-interface Item {
+import { Stats } from '~/types';
-  name: string;
+import WidgetWrapper from '../ui/WidgetWrapper.astro';
-  value: string;
+import Headline from '../ui/Headline.astro';
-}
+import { Icon } from 'astro-icon/components';
-
-export interface Props {
-  title?: string;
-  subtitle?: string;
-  tagline?: string;
-  items?: Array<Item>;
-}
 
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
   tagline,
-  items = [],
+  stats = [],
-} = Astro.props;
+
+  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) && (
+      stats &&
-      <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
+        stats.map(({ amount, title, icon }) => (
-        {tagline && (
+          <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">
-          <p class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase">
+            {icon && (
-            {tagline}
+              <div class="flex items-center justify-center mx-auto mb-4 text-primary">
-          </p>
+                <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
+              <h6 class="text-sm font-medium uppercase tracking-widest text-gray-800 dark:text-slate-400 lg:text-base">
-            class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading"
+                {title}
-            set:html={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/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,13 +38,22 @@ const {
               <hr class="border-slate-200 dark:border-slate-600 my-4" />
 
               <div class="flex items-center">
-                {image && image.src && (
+                {image && (
-                  <img
+                  <div class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600">
-                    src={image.src}
+                    {typeof image === 'string' ? (
-                    alt={image.alt}
+                      <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">
                   {name && <p class="text-base font-semibold">{name}</p>}

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 +
+        <span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 2.0
-        Tailwind CSS.</span
+        + Tailwind CSS.</span
       >
-      <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span> Suitable for Startups,
+      <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span> Suitable for
-      Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
+      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
+       Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
-      tacimates.
+      euismod tacimates.
     </Fragment>
   </Content>
 
@@ -311,11 +312,11 @@ const metadata = {
   <!-- Stats Widget ****************** -->
 
   <Stats
-    items={[
+    stats={[
-      { name: 'Downloads', value: '132K' },
+      { title: 'Downloads', amount: '132K' },
-      { name: 'Stars', value: '24.8K' },
+      { title: 'Stars', amount: '24.8K' },
-      { name: 'Forks', value: '10.3K' },
+      { title: 'Forks', amount: '10.3K' },
-      { name: 'Users', value: '48.4K' },
+      { title: 'Users', amount: '48.4K' },
     ]}
   />
 

src/pages/landing/mobile-app.astro

@@ -7,6 +7,8 @@ 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';
+import Stats from '~/components/widgets/Stats.astro';
 
 const metadata = {
   title: 'Mobile App Landing Page',
@@ -88,8 +90,8 @@ const metadata = {
       },
     ]}
     image={{
-      src: 'https://cdn.pixabay.com/photo/2023/07/18/21/40/astronaut-8135685_1280.jpg',
+      src: import('~/assets/images/colors.jpg'),
-      alt: 'Astronaut Image',
+      alt: 'Colorful Image',
     }}
   />
 
@@ -125,8 +127,8 @@ const metadata = {
       },
     ]}
     image={{
-      src: 'https://cdn.pixabay.com/photo/2023/07/22/19/25/ai-generated-8144026_1280.jpg',
+      src: import('~/assets/images/caos.jpg'),
-      alt: 'Features Image',
+      alt: 'Colorful Image',
     }}
   >
     <Fragment slot="content">
@@ -168,8 +170,8 @@ const metadata = {
       },
     ]}
     image={{
-      src: 'https://cdn.pixabay.com/photo/2020/07/25/22/26/rocket-5438053_1280.jpg',
+      src: import('~/assets/images/vintage.jpg'),
-      alt: 'Benefits Image',
+      alt: 'Vintage Image',
     }}
   >
     <Fragment slot="content">
@@ -177,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
@@ -188,7 +200,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 +210,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 +220,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',
         },
       },
@@ -221,6 +233,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 +278,7 @@ const metadata = {
       icon: 'tabler:download',
     }}
   >
-    <Fragment slot="title">
+    <Fragment slot="title">Get Started Now</Fragment>
-      Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap"> Tailwind CSS</span>
-    </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

src/pages/landing/startup.astro

@@ -57,11 +57,11 @@ const metadata = {
   <!-- Stats Widget ****************** -->
 
   <Stats
-    items={[
+    stats={[
-      { name: 'Templates', value: '56' },
+      { title: 'Templates', amount: '56' },
-      { name: 'Downloads', value: '182K' },
+      { title: 'Downloads', amount: '182K' },
-      { name: 'User Ratings', value: '4.8' },
+      { title: 'User Ratings', amount: '4.8' },
-      { name: 'Satisfied Clients', value: '116K' },
+      { title: 'Satisfied Clients', amount: '116K' },
     ]}
   />
 

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;
 }