Bob AI: Can you add a trusted by 500 travelers with images

src/app/globals.css

@@ -1,18 +1,17 @@
 @import "tailwindcss";
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
 
 :root {
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  --background: #ffffff;;
+  --background: #f5f5f5;;
   --card: #ffffff;;
-  --foreground: #000000;;
+  --foreground: #1c1c1c;;
-  --primary-cta: #0070f3;;
+  --primary-cta: #341f51;;
   --secondary-cta: #ffffff;;
-  --accent: #00bfff;;
+  --accent: #6139e6;;
-  --background-accent: #e6f7ff;;
+  --background-accent: #b3a8e8;;
+
   /* Base spacing units */
   --vw-0_25: calc(var(--vw) * 0.25);
   --vw-0_5: calc(var(--vw) * 0.5);
@@ -522,7 +521,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-lora), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -535,5 +534,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-lora), sans-serif;
 }

src/app/page.tsx

@@ -12,6 +12,7 @@ import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { Sparkles, Plane, Instagram, Linkedin, Mail } from 'lucide-react';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 
 export default function LandingPage() {
   return (
@@ -255,6 +256,19 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="metric_card_seven" data-section="metric_card_seven">
+        <MetricCardSeven
+          metrics={[{ value: "98%", title: "Positive Reviews" }, { value: "365", title: "Days of Service" }, { value: "50+", title: "Unique Destinations" }]}
+          carouselMode="auto"
+          animationType="none"
+          title="Travel Excellence"
+          description="Experience unparalleled satisfaction with our dedicated service and diverse destinations."
+          tag="Metrics"
+          buttons={[{ text: "Explore Destinations", label: "Explore Destinations", href: "#" }, { text: "Read Reviews", label: "Read Reviews", href: "#" }]}
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+        />
+      </div>
       <div id="footer" data-section="footer">
         <FooterCard
           logoText="Lumina Journeys"