Finish services component

src/components/services.astro

@@ -0,0 +1,92 @@
+---
+import { Icon } from 'astro-icon/components'
+
+const features = [
+  {
+    name: 'Weekly Mowing',
+    description:
+      'Starting at $35 weekly. Our mowing service includes mowing, trimming, and blowing off the driveway. Edging the sidewalk and driveway is included for weekly mowing clients.',
+    icon: 'truck',
+    href: '/mowing',
+  },
+  {
+    name: 'Spring Cleanups',
+    description:
+      'No longer offered.',
+    icon: 'home',
+    href: '/',
+  },
+  {
+    name: 'Leaf Cleanups',
+    description:
+      'Starting at $200.',
+    icon: 'sun',
+    href: '/leafremoval',
+  },
+  {
+    name: 'Snow Removal',
+    description:
+      'No longer offered.',
+    icon: 'cloud',
+    href: '/canceled',
+  },
+  {
+    name: 'Leaf Curbside Pickup',
+    description:
+      'Starting at $100. pile your leaves at the curb and we will bring our leaf vacuum to clean them up!',
+    icon: 'truck',
+    href: '/leafremoval',
+    
+  },
+  {
+    name: 'Bed Maintenance',
+    description:
+      'No longer offered. ',
+    icon: 'truck',
+    href: '/canceled',
+  },
+]
+---
+
+<div class='bg-gray-100 py-12 dark:bg-gray-800'>
+  <div class='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+    <div class='lg:text-center'>
+      <h2
+        class='text-base font-semibold uppercase tracking-wide text-sky-800 dark:text-sky-300'
+      >
+        Sommer Lawn & Landscape
+      </h2>
+      <p
+        class='mt-2 text-3xl font-extrabold leading-8 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl'
+      >
+        Services
+      </p>
+      <p class='mt-4 max-w-2xl text-xl text-gray-600 dark:text-gray-300 lg:mx-auto'>
+        Sommer Lawn & Landscape offer a range of services
+        listed below. We offer FREE ESTIMATES for all services provided.
+      </p>
+    </div>
+
+    <div class='mt-10'>
+      <dl class='space-y-10 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10 md:space-y-0'>
+        {
+          features.map((feature) => (
+            <div class='relative'>
+              <dt>
+                <div class='absolute flex h-12 w-12 items-center justify-center rounded-md bg-sky-500 text-white dark:bg-sky-400 dark:text-black'>
+                  <Icon class='h-6 w-6' aria-hidden='true' name={'heroicons:' + feature.icon} />
+                </div>
+                <p class='ml-16 text-lg font-medium leading-6 text-gray-900 dark:text-gray-200'>
+                  {feature.name}
+                </p>
+              </dt>
+              <dd class='ml-16 mt-2 text-base text-gray-600 dark:text-gray-400'>
+                {feature.description}
+              </dd>
+            </div>
+          ))
+        }
+      </dl>
+    </div>
+  </div>
+</div>

src/pages/index.astro

@@ -3,9 +3,9 @@ import type { CollectionEntry } from 'astro:content'
 import { SiteMetadata, getPosts } from '../config'
 import Base from '../layouts/base.astro'
 import Hero from '../components/hero.astro'
-import Features from '../components/features.astro'
-import FindOutMore from '../components/findoutmore.astro'
-import LatestArticles from '../components/latestarticles.astro'
+import Services from '../components/services.astro'
+// import FindOutMore from '../components/findoutmore.astro'
+// import LatestArticles from '../components/latestarticles.astro'
 import CTA from '../components/cta.astro'
 import coverSVG from '../assets/svg/undraw/undraw_design_inspiration.svg'
 import socialImage from '../assets/undraw/undraw_design_inspiration.png'
@@ -22,9 +22,9 @@ const posts = await getPosts()
 
 <Base frontmatter={frontmatter}>
   <Hero />
-  <Features />
-  <FindOutMore />
-  <LatestArticles {posts} />
+  <Services />
+  <!-- <FindOutMore /> -->
+  <!-- <LatestArticles {posts} /> -->
   <CTA />
   <div class='bg-white p-24 dark:bg-black md:p-12'></div>
 </Base>