Bob AI: Add metric section after contact form

src/app/page.tsx

@@ -9,6 +9,7 @@ import ContactSplit from '@/components/sections/contact/ContactSplit';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { BookOpen, Mail } from "lucide-react";
 import FooterBase from '@/components/sections/footer/FooterBase';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 
 export default function LandingPage() {
   return (
@@ -146,7 +147,20 @@ export default function LandingPage() {
           termsText="We respect your inbox. Unsubscribe anytime. By subscribing, you agree to receive updates about Chill Time."
         />
       </div>
-      <div id="footer" data-section="footer">
+
+      <div id="metric_card_one" data-section="metric_card_one">
+        <MetricCardOne
+          carouselMode="auto"
+          gridVariant="uniform-all-items-equal"
+          animationType="none"
+          title="Relaxation Levels"
+          description="Explore the impact of our tips on reducing stress and improving well-being."
+          tag="Metrics"
+          buttons={[{ label: "View Tips", href: "#" }, { label: "Join Community", href: "#" }]}
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+        />
+      </div>      <div id="footer" data-section="footer">
       <FooterBase
       columns={[
       {