Include some content widgets in mobile-app page

src/pages/landing/mobile-app.astro

@@ -5,6 +5,7 @@ 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';
+import Content from '~/components/widgets/Content.astro';
 
 const metadata = {
   title: 'Mobile App Landing Page',
@@ -91,6 +92,90 @@ const metadata = {
     }}
   />
 
+  <!-- Content Widget **************** -->
+
+  <Content
+    items={[
+      {
+        title: 'High-Quality Designs',
+        description: 'Pellentesque dui nibh, cursus ac eros eget, pharetra malesuada tortor.',
+        icon: 'tabler:wand',
+      },
+      {
+        title: 'Customization Tools',
+        description: 'Nulla vulputate sollicitudin massa, id rutrum tellus tristique et.',
+        icon: 'tabler:settings',
+      },
+      {
+        title: 'Pre-Designed Elements',
+        description: 'Mauris eget urna non leo fringilla auctor quis efficitur sem.',
+        icon: 'tabler:presentation',
+      },
+      {
+        title: 'Preview and Mockup Views',
+        description: ' Donec lorem metus, maximus vitae magna sed, tincidunt interdum magna.',
+        icon: 'tabler:carousel-horizontal',
+      },
+      {
+        title: 'Offline Access',
+        description:
+          'Sed accumsan, purus facilisis efficitur accumsan, lectus lacus vestibulum diam, in sollicitudin orci tellus in libero.',
+        icon: 'tabler:wifi-off',
+      },
+    ]}
+    image={{
+      src: 'https://cdn.pixabay.com/photo/2023/07/22/19/25/ai-generated-8144026_1280.jpg',
+      alt: 'Features Image',
+    }}
+  >
+    <Fragment slot="content">
+      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Main Features</h3>
+    </Fragment>
+  </Content>
+
+  <!-- Content Widget **************** -->
+
+  <Content
+    isReversed
+    isAfterContent
+    items={[
+      {
+        title: 'Time Savings',
+        description: 'Sed condimentum dui vel lorem cursus molestie duis id tristique justo.',
+        icon: 'tabler:clock',
+      },
+      {
+        title: 'Professional Appearance',
+        description: 'Cras purus velit, finibus quis dui nec, faucibus porttitor purus.',
+        icon: 'tabler:school',
+      },
+      {
+        title: 'Accessibility for Non-Designers',
+        description: 'Morbi volutpat ultricies dictum. In eu nunc id odio congue porttitor.',
+        icon: 'tabler:accessible',
+      },
+      {
+        title: 'Cost-Efficiency',
+        description: 'Fusce vitae odio sed lacus tempor aliquam sit amet ut velit pellentesque sagittis cursus nisi.',
+        icon: 'tabler:coin',
+      },
+      {
+        title: 'Instant Download',
+        description:
+          'Sed semper tempus dolor, non pretium velit lacinia tristique, fusce hendrerit fermentum lorem dignissim convallis.',
+        icon: 'tabler:file-download',
+      },
+    ]}
+    image={{
+      src: 'https://cdn.pixabay.com/photo/2020/07/25/22/26/rocket-5438053_1280.jpg',
+      alt: 'Benefits Image',
+    }}
+  >
+    <Fragment slot="content">
+      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Benefits</h3>
+    </Fragment>
+  </Content>
+
   <!-- CallToAction Widget *********** -->
 
   <CallToAction