Merge pull request #210 from widgeter/main

Include testimonials widget in mobile-app page

src/components/widgets/Testimonials.astro

@@ -0,0 +1,65 @@
+---
+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';
+
+const {
+  title = '',
+  subtitle = '',
+  tagline = '',
+  testimonials = [],
+  callToAction,
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render('bg'),
+} = Astro.props as Testimonials;
+---
+
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
+  <Headline title={title} subtitle={subtitle} tagline={tagline} />
+
+  <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+    {
+      testimonials &&
+        testimonials.map(({ title, testimonial, name, job, image }) => (
+          <div class="flex h-auto">
+            <div class="flex flex-col p-4 md:p-6 rounded-md shadow-xl dark:shadow-none dark:border dark:border-slate-600">
+              {title && <h2 class="text-lg font-medium leading-6 pb-4">{title}</h2>}
+              {testimonial && (
+                <blockquote class="flex-auto">
+                  <p class="text-muted">" {testimonial} "</p>
+                </blockquote>
+              )}
+
+              <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"
+                  />
+                )}
+
+                <div class="grow ml-3">
+                  {name && <p class="text-base font-semibold">{name}</p>}
+                  {job && <p class="text-xs text-muted">{job}</p>}
+                </div>
+              </div>
+            </div>
+          </div>
+        ))
+    }
+  </div>
+  {
+    callToAction && (
+      <div class="btn flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium">
+        <CTA callToAction={callToAction} />
+      </div>
+    )
+  }
+</WidgetWrapper>

src/pages/landing/mobile-app.astro

@@ -6,6 +6,7 @@ import Hero2 from '~/components/widgets/Hero2.astro';
 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';
 
 const metadata = {
   title: 'Mobile App Landing Page',
@@ -176,6 +177,50 @@ const metadata = {
     </Fragment>
   </Content>
 
+  <!-- Testimonials Widget *********** -->
+
+  <Testimonials
+    tagline="What our users say about us?"
+    testimonials={[
+      {
+        testimonial:
+          'Vestibulum auctor dui vel nunc rutrum, quis elementum dui tristique. Sed hendrerit at lacus eget consectetur. In elementum scelerisque scelerisque. Nulla vel venenatis velit.',
+        name: 'Cary Kennedy',
+        job: 'Film director',
+        image: {
+          src: 'https://cdn.pixabay.com/photo/2023/07/22/19/25/ai-generated-8144026_1280.jpg',
+          alt: 'Cary Kennedy Image',
+        },
+      },
+      {
+        testimonial:
+          'Mauris condimentum at tellus eget lacinia. Integer at ipsum eget urna rhoncus tincidunt. Curabitur condimentum scelerisque lobortis. Cras semper purus egestas sem blandit, in volutpat nibh rutrum.',
+        name: 'Josh Wilkinson',
+        job: 'Product Manager',
+        image: {
+          src: 'https://cdn.pixabay.com/photo/2023/07/18/21/40/astronaut-8135685_1280.jpg',
+          alt: 'Josh Wilkinson Image',
+        },
+      },
+      {
+        testimonial:
+          'Praesent laoreet metus ac vehicula venenatis. Vivamus ullamcorper enim neque, sit amet eleifend sapien volutpat a. Proin quis varius metus. Etiam ut neque ipsum.',
+        name: 'Sidney Hansen',
+        job: 'Decorator',
+        image: {
+          src: 'https://cdn.pixabay.com/photo/2020/07/25/22/26/rocket-5438053_1280.jpg',
+          alt: 'Sidney Hansen Image',
+        },
+      },
+    ]}
+    callToAction={{
+      targetBlank: true,
+      text: 'Read more testimonials',
+      href: 'https://github.com/onwidget/astrowind',
+      icon: 'tabler:chevron-right',
+    }}
+  />
+
   <!-- CallToAction Widget *********** -->
 
   <CallToAction