Include WidgetWrapper in the Hero widget

src/components/widgets/Hero.astro

@@ -1,6 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
+import WidgetWrapper from '../ui/WidgetWrapper.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -9,10 +10,20 @@ const {
   callToAction = await Astro.slots.render('callToAction'),
   callToAction2 = await Astro.slots.render('callToAction2'),
   image = await Astro.slots.render('image'),
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render('bg'),
 } = Astro.props;
 ---
 
-<section class="relative md:-mt-[76px] not-prose">
+<WidgetWrapper
+  id={id}
+  isDark={isDark}
+  containerClass={`relative md:-mt-[76px] not-prose py-0 md:py-0 lg:py-0 ${classes?.container ?? ''}`}
+  bg={bg}
+>
   <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
     <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
@@ -94,4 +105,4 @@ const {
       </div>
     </div>
   </div>
-</section>
+</WidgetWrapper>

src/pages/services.astro

@@ -1,5 +1,6 @@
 ---
 import Features2 from '~/components/widgets/Features2.astro';
+import Hero from '~/components/widgets/Hero.astro';
 import Layout from '~/layouts/PageLayout.astro';
 
 const metadata = {
@@ -8,6 +9,27 @@ const metadata = {
 ---
 
 <Layout metadata={metadata}>
+  <!-- Hero Widget ******************* -->
+
+  <Hero callToAction={{ text: 'Buy now', href: '/' }}>
+    <Fragment slot="title">
+      <span class="text-gray-200">Elevate your projects with our stunning templates</span>
+    </Fragment>
+
+    <Fragment slot="subtitle">
+      <span class="text-gray-300"
+        >Explore our meticulously crafted templates tailored to various industries and purposes. From captivating
+        presentations to functional website designs, we offer the tools you need to succeed.</span
+      >
+    </Fragment>
+
+    <div
+      slot="bg"
+      class="absolute inset-0 bg-dark overflow-hidden brightness-[0.25] bg-cover bg-[url('~/assets/images/hero.png')]"
+    >
+    </div>
+  </Hero>
+
   <!-- Features2 Widget ************** -->
 
   <Features2