Update src/app/page.tsx

Merge version_3 into main

src/app/about/page.tsx

@@ -2,16 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import SplitAbout from "@/components/sections/about/SplitAbout";
-import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
-
-const navItems = [
-  { name: "Home", id: "/" },
-  { name: "About", id: "/about" }
-];
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import AboutMetric from "@/components/sections/about/AboutMetric";
+import { ChefHat, Sparkles, Award } from "lucide-react";
 
 export default function AboutPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Contact", id: "/contact" }
+  ];
+
   return (
     <ThemeProvider
         defaultButtonVariant="bounce-effect"
@@ -26,41 +27,17 @@ export default function AboutPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-        <div id="nav" data-section="nav">
-          <NavbarLayoutFloatingInline 
-            navItems={navItems} 
-            brandName="ChefSelect" 
-            button={{ text: "Book Now" }} 
-          />
-        </div>
-        <div className="pt-24">
-          <div id="about-split" data-section="about-split">
-            <SplitAbout 
-              title="Our History & Mission"
-              description="Founded on the belief that dining is an art form, ChefSelect has spent years perfecting the private culinary experience. Our mission is to transform your home into the finest restaurant in the city, using only the freshest ingredients and culinary expertise."
-              textboxLayout="default"
-              useInvertedBackground={false}
-              bulletPoints={[
-                { title: "Established 2015", description: "Started with a passion for local ingredients." },
-                { title: "Our Mission", description: "To deliver unparalleled luxury dining experiences." }
-              ]}
-            />
-          </div>
-          <div id="team-section" data-section="team-section">
-            <TeamCardTwo 
-              title="Meet The Team"
-              description="The culinary experts and visionaries behind ChefSelect."
-              gridVariant="uniform-all-items-equal"
-              animationType="slide-up"
-              textboxLayout="default"
-              useInvertedBackground={false}
-              members={[
-                { id: "1", name: "Elena Rossi", role: "Founder & Executive Chef", description: "A Michelin-star background with a vision for intimate dining." },
-                { id: "2", name: "Marcus Thorne", role: "Director of Operations", description: "Ensuring every detail of your event is flawless." }
-              ]}
-            />
-          </div>
-        </div>
+        <NavbarStyleFullscreen navItems={navItems} brandName="ChefSelect" />
+        <AboutMetric 
+          title="Our Culinary Journey"
+          metrics={[
+            { icon: ChefHat, label: "Professional Chefs", value: "50+" },
+            { icon: Sparkles, label: "Events Served", value: "1,000+" },
+            { icon: Award, label: "Satisfied Clients", value: "99%" }
+          ]}
+          metricsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
       </ReactLenis>
     </ThemeProvider>
   );

src/app/contact/page.tsx

@@ -3,11 +3,12 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 
 export default function ContactPage() {
   const navItems = [
     { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
     { name: "Contact", id: "/contact" }
   ];
 
@@ -26,12 +27,15 @@ export default function ContactPage() {
     >
       <ReactLenis root>
         <NavbarStyleFullscreen navItems={navItems} brandName="ChefSelect" />
-        <ContactCenter
-            tag="Contact Us"
-            title="Get in Touch"
-            description="We're here to help elevate your next dining experience. Reach out for bookings, inquiries, or business opportunities."
-            background={{ variant: "plain" }}
-            useInvertedBackground={false}
+        <ContactSplitForm
+          title="Get in Touch"
+          description="Have questions about our private dining services? We'd love to hear from you."
+          inputs={[
+            { name: "name", type: "text", placeholder: "Your Name", required: true },
+            { name: "email", type: "email", placeholder: "Your Email", required: true }
+          ]}
+          textarea={{ name: "message", placeholder: "How can we assist you?", rows: 4 }}
+          useInvertedBackground={false}
         />
       </ReactLenis>
     </ThemeProvider>

src/app/page.tsx

@@ -7,6 +7,7 @@ import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/Nav
 export default function LandingPage() {
   const navItems = [
     { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
     { name: "Contact", id: "/contact" }
   ];
 
@@ -26,7 +27,7 @@ export default function LandingPage() {
       <ReactLenis root>
         <NavbarStyleFullscreen navItems={navItems} brandName="ChefSelect" />
         <div className="min-h-screen flex items-center justify-center">
-          <h1 className="text-4xl">Project Scrapped</h1>
+          <h1 className="text-4xl">Welcome to ChefSelect</h1>
         </div>
       </ReactLenis>
     </ThemeProvider>