Bob AI: add contact form with image

src/app/page.tsx

@@ -9,6 +9,8 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Users, TrendingUp, Award, Star } from "lucide-react";
 import Link from "next/link";
 import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 
 export default function HomePage() {
   return (
@@ -118,28 +120,31 @@ export default function HomePage() {
       </div>
 
       <div id="metrics" data-section="metrics">
-        <MetricCardOne
-          metrics={[
-            {
-              id: "1",              value: "5000",              title: "Students",              description: "Successfully trained and certified professionals",              icon: Users
-            },
-            {
-              id: "2",              value: "95",              title: "%",              description: "Job placement rate within 3 months",              icon: TrendingUp
-            },
-            {
-              id: "3",              value: "20",              title: "+",              description: "Expert instructors on our team",              icon: Award
-            },
-            {
-              id: "4",              value: "4.9",              title: "/5",              description: "Average student satisfaction rating",              icon: Star
-            }
-          ]}
-          title="Our Impact"
-          description="Trusted by thousands of students worldwide"
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground="invertDefault"
-        />
+      <MetricCardOne
+      metrics={[
+      {
+      id: "1",              value: "5000",              title: "Students",              description: "Successfully trained and certified professionals",              icon: Users
+      },
+      {
+      id: "2",              value: "95",              title: "%",              description: "Job placement rate within 3 months",              icon: TrendingUp
+      },
+      {
+      id: "3",              value: "20",              title: "+",              description: "Expert instructors on our team",              icon: Award
+      },
+      {
+      id: "4",              value: "4.9",              title: "/5",              description: "Average student satisfaction rating",              icon: Star
+      }
+      ]}
+      carouselMode="auto"
+      gridVariant="uniform-all-items-equal"
+      animationType="slide-up"
+      title="TechAcademy Metrics"
+      description="See the impact of our courses on student success and our growing network of expert instructors."
+      tag="Metrics"
+      buttons={[{ text: "Explore Courses", label: "Explore Courses", href: "#" }, { text: "Meet Our Team", label: "Meet Our Team", href: "#" }]}
+      textboxLayout="default"
+      useInvertedBackground="invertDefault"
+      />
       </div>
 
       <div id="testimonials" data-section="testimonials">
@@ -171,6 +176,25 @@ export default function HomePage() {
         />
       </div>
 
+      <div id="contact_center" data-section="contact_center">
+        <ContactCenter
+          tag="Label"
+          title="Reach Out to Us"
+          description="Have questions? Our dedicated team is here to assist you."
+          useInvertedBackground="noInvert"
+        />
+      </div>
+      <div id="contact_split_form" data-section="contact_split_form">
+        <ContactSplitForm
+          title="Get in Touch"
+          description="We're here to answer any questions you have about our courses and how we can help you achieve your tech career goals."
+          inputs={[{ name: "name", type: "text", placeholder: "Your Full Name", required: true }, { name: "email", type: "email", placeholder: "Your Email Address", required: true }, { name: "message", type: "textarea", placeholder: "Your Message to TechAcademy", required: false }]}
+          textarea={{ name: "", placeholder: "" }}
+          useInvertedBackground="noInvert"
+          imageSrc="https://placehold.co/600x400"
+          mediaPosition="left"
+        />
+      </div>
       <div id="footer" data-section="footer">
         <FooterMedia
           imageSrc="https://img.b2bpic.net/free-photo/html-css-collage-concept-with-person_23-2150061986.jpg"