Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -33,14 +33,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Features",          id: "#features"},
-        {
-          name: "Pricing",          id: "#pricing"},
-        {
-          name: "Testimonials",          id: "#testimonials"},
-        {
-          name: "FAQ",          id: "#faq"},
+        { name: "Menu", id: "#menu" },
+        { name: "Gallery", id: "#gallery" },
+        { name: "Reservations", id: "#reservations" },
+        { name: "Features", id: "#features" },
+        { name: "Pricing", id: "#pricing" },
       ]}
       brandName="NovaFlow"
     />
@@ -51,16 +48,36 @@ export default function LandingPage() {
       logoText="NovaFlow: The Future of Automation."
       description="Streamline your digital workflow with AI-driven precision and real-time intelligence designed for modern teams."
       buttons={[
-        {
-          text: "Start Free",          href: "#"},
-        {
-          text: "Book Demo",          href: "#contact"},
+        { text: "Start Free", href: "#" },
+        { text: "Book Demo", href: "#contact" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/face-recognition-personal-identification-collage_23-2150165577.jpg"
       imageAlt="saas dashboard neon blue"
     />
   </div>
 
+  <div id="reservations" data-section="reservations">
+      <ContactSplit
+        tag="Booking"
+        title="Table Reservations"
+        description="Secure your spot with our automated booking system."
+        background={{ variant: "plain" }}
+        useInvertedBackground={false}
+        onSubmit={(email) => console.log("Booking for: ", email)}
+      />
+  </div>
+
+  <div id="location" data-section="location">
+      <ContactSplit
+        tag="Visit Us"
+        title="Find Our Location"
+        description="We are located at the heart of the tech district. Visit us for a personalized demo or consultation."
+        background={{ variant: "animated-grid" }}
+        useInvertedBackground={false}
+        imageSrc="http://img.b2bpic.net/free-photo/3d-motion-flow-background-with-digital-particles_1048-12441.jpg"
+      />
+  </div>
+
   <div id="about" data-section="about">
       <TextAbout
       useInvertedBackground={false}
@@ -77,35 +94,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "AI Automation",          description: "Automate routine tasks with sophisticated machine learning models.",          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/transparent-tablet-with-smart-speaker-smart-home-technology_53876-98543.jpg",            imageAlt: "ai neural network visualization"},
-          items: [
-            {
-              text: "Workflow orchestration",              icon: Zap,
-            },
-            {
-              text: "Predictive insights",              icon: Sparkles,
-            },
-            {
-              text: "Self-healing pipelines",              icon: Shield,
-            },
-          ],
+          title: "AI Automation", description: "Automate routine tasks with sophisticated machine learning models.", media: {
+            imageSrc: "http://img.b2bpic.net/free-photo/transparent-tablet-with-smart-speaker-smart-home-technology_53876-98543.jpg", imageAlt: "ai neural network visualization"},
+          items: [{ text: "Workflow orchestration", icon: Zap }, { text: "Predictive insights", icon: Sparkles }, { text: "Self-healing pipelines", icon: Shield }],
           reverse: false
         },
         {
-          title: "Real-time Analytics",          description: "Monitor your performance with live, data-rich dashboards.",          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/3d-render-flowing-network-connections-design-with-connecting-lines-dots_1048-13615.jpg",            imageAlt: "analytics dashboard real-time data"},
-          items: [
-            {
-              text: "Instant reporting",              icon: BarChart,
-            },
-            {
-              text: "Custom event tracking",              icon: Target,
-            },
-            {
-              text: "Data visualization",              icon: Layers,
-            },
-          ],
+          title: "Real-time Analytics", description: "Monitor your performance with live, data-rich dashboards.", media: {
+            imageSrc: "http://img.b2bpic.net/free-photo/3d-render-flowing-network-connections-design-with-connecting-lines-dots_1048-13615.jpg", imageAlt: "analytics dashboard real-time data"},
+          items: [{ text: "Instant reporting", icon: BarChart }, { text: "Custom event tracking", icon: Target }, { text: "Data visualization", icon: Layers }],
           reverse: true
         },
       ]}
@@ -120,12 +117,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",          value: "99.9%",          title: "Uptime",          description: "Always available",          imageSrc: "http://img.b2bpic.net/free-vector/flat-time-logo-templates-collection_23-2148944209.jpg",          imageAlt: "tech uptime icon minimalist"},
-        {
-          id: "m2",          value: "24/7",          title: "Support",          description: "Global assistance",          imageSrc: "http://img.b2bpic.net/free-vector/discord-social-media-marketing-background_271628-348.jpg",          imageAlt: "tech support icon futuristic"},
-        {
-          id: "m3",          value: "500+",          title: "Integrations",          description: "Connect easily",          imageSrc: "http://img.b2bpic.net/free-photo/settings-icon-front-side-white-background_187299-40209.jpg",          imageAlt: "tech integration icon minimal"},
+        { id: "m1", value: "99.9%", title: "Uptime", description: "Always available", imageSrc: "http://img.b2bpic.net/free-vector/flat-time-logo-templates-collection_23-2148944209.jpg", imageAlt: "tech uptime icon minimalist" },
+        { id: "m2", value: "24/7", title: "Support", description: "Global assistance", imageSrc: "http://img.b2bpic.net/free-vector/discord-social-media-marketing-background_271628-348.jpg", imageAlt: "tech support icon futuristic" },
+        { id: "m3", value: "500+", title: "Integrations", description: "Connect easily", imageSrc: "http://img.b2bpic.net/free-photo/settings-icon-front-side-white-background_187299-40209.jpg", imageAlt: "tech integration icon minimal" },
       ]}
       title="Impact at Scale"
       description="Proven results for innovative teams."
@@ -137,7 +131,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "Stripe",        "Linear",        "Notion",        "Vercel",        "Slack",        "Figma",        "GitHub"]}
+        "Stripe", "Linear", "Notion", "Vercel", "Slack", "Figma", "GitHub"]}
       title="Trusted by leaders"
       description="Join the world's most innovative organizations."
     />
@@ -149,16 +143,11 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",          name: "Jane Doe",          handle: "@jane",          testimonial: "Transformative software.",          imageSrc: "http://img.b2bpic.net/free-photo/pensive-middle-aged-man-with-beard-hairstyle-dressed-elegant-blue-suit-textured-dark-background-studio_613910-19917.jpg",          imageAlt: "executive portrait professional dark"},
-        {
-          id: "t2",          name: "John Smith",          handle: "@john",          testimonial: "Incredible speed.",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-suit-sunglasses-dark-grey-background_613910-12487.jpg",          imageAlt: "software developer portrait professional"},
-        {
-          id: "t3",          name: "Alice Wong",          handle: "@alice",          testimonial: "Essential platform.",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-cv_23-2149927574.jpg",          imageAlt: "creative designer professional portrait"},
-        {
-          id: "t4",          name: "Bob Chen",          handle: "@bob",          testimonial: "Game changer for us.",          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-using-phone-office-staying-late-by-night_1303-27097.jpg",          imageAlt: "manager professional corporate headshot"},
-        {
-          id: "t5",          name: "Eve Davis",          handle: "@eve",          testimonial: "Best in class tools.",          imageSrc: "http://img.b2bpic.net/free-photo/manufacturing-analyst-reviewing-solar-panel-production-workflow_482257-125954.jpg",          imageAlt: "engineer professional portrait tech"},
+        { id: "t1", name: "Jane Doe", handle: "@jane", testimonial: "Transformative software.", imageSrc: "http://img.b2bpic.net/free-photo/pensive-middle-aged-man-with-beard-hairstyle-dressed-elegant-blue-suit-textured-dark-background-studio_613910-19917.jpg", imageAlt: "executive portrait professional dark" },
+        { id: "t2", name: "John Smith", handle: "@john", testimonial: "Incredible speed.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-suit-sunglasses-dark-grey-background_613910-12487.jpg", imageAlt: "software developer portrait professional" },
+        { id: "t3", name: "Alice Wong", handle: "@alice", testimonial: "Essential platform.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-cv_23-2149927574.jpg", imageAlt: "creative designer professional portrait" },
+        { id: "t4", name: "Bob Chen", handle: "@bob", testimonial: "Game changer for us.", imageSrc: "http://img.b2bpic.net/free-photo/business-woman-using-phone-office-staying-late-by-night_1303-27097.jpg", imageAlt: "manager professional corporate headshot" },
+        { id: "t5", name: "Eve Davis", handle: "@eve", testimonial: "Best in class tools.", imageSrc: "http://img.b2bpic.net/free-photo/manufacturing-analyst-reviewing-solar-panel-production-workflow_482257-125954.jpg", imageAlt: "engineer professional portrait tech" },
       ]}
       title="Loved by builders"
       description="See why teams choose NovaFlow."
@@ -171,18 +160,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
-        {
-          id: "p1",          badge: "Entry",          price: "$29/mo",          subtitle: "For individuals",          features: [
-            "Feature A",            "Feature B",            "Support"],
-        },
-        {
-          id: "p2",          badge: "Pro",          price: "$79/mo",          subtitle: "Best for teams",          features: [
-            "All Entry features",            "Advanced API",            "Priority"],
-        },
-        {
-          id: "p3",          badge: "Enterprise",          price: "$199/mo",          subtitle: "For scaleups",          features: [
-            "Dedicated support",            "Custom Integrations",            "SLA"],
-        },
+        { id: "p1", badge: "Entry", price: "$29/mo", subtitle: "For individuals", features: ["Feature A", "Feature B", "Support"] },
+        { id: "p2", badge: "Pro", price: "$79/mo", subtitle: "Best for teams", features: ["All Entry features", "Advanced API", "Priority"] },
+        { id: "p3", badge: "Enterprise", price: "$199/mo", subtitle: "For scaleups", features: ["Dedicated support", "Custom Integrations", "SLA"] },
       ]}
       title="Simple Pricing"
       description="Transparent plans for your scaling startup."
@@ -193,68 +173,28 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "f1",          title: "Can I upgrade anytime?",          content: "Yes, scale easily."},
-        {
-          id: "f2",          title: "Do you offer trials?",          content: "Yes, 14 days free."},
-        {
-          id: "f3",          title: "Is support included?",          content: "Yes, 24/7 included."},
-        {
-          id: "f4",          title: "Can I request custom features?",          content: "Our Enterprise team loves feedback."},
-        {
-          id: "f5",          title: "Is my data secure?",          content: "We employ enterprise-grade security."},
+        { id: "f1", title: "Can I upgrade anytime?", content: "Yes, scale easily." },
+        { id: "f2", title: "Do you offer trials?", content: "Yes, 14 days free." },
+        { id: "f3", title: "Is support included?", content: "Yes, 24/7 included." },
+        { id: "f4", title: "Can I request custom features?", content: "Our Enterprise team loves feedback." },
+        { id: "f5", title: "Is my data secure?", content: "We employ enterprise-grade security." },
       ]}
       sideTitle="Questions?"
       faqsAnimation="slide-up"
     />
   </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "animated-grid"}}
-      tag="Get Started"
-      title="Ready to build?"
-      description="Join thousands of builders today."
-      mediaAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/3d-motion-flow-background-with-digital-particles_1048-12441.jpg"
-      imageAlt="3D motion flow background with digital particles"
-    />
-  </div>
-
   <div id="footer" data-section="footer">
       <FooterBaseCard
       logoText="NovaFlow"
       columns={[
-        {
-          title: "Product",          items: [
-            {
-              label: "Features",              href: "#features"},
-            {
-              label: "Pricing",              href: "#pricing"},
-          ],
-        },
-        {
-          title: "Social",          items: [
-            {
-              label: "Twitter",              href: "#"},
-            {
-              label: "GitHub",              href: "#"},
-          ],
-        },
-        {
-          title: "Company",          items: [
-            {
-              label: "About",              href: "#"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
+        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
+        { title: "Social", items: [{ label: "Twitter", href: "#" }, { label: "GitHub", href: "#" }] },
+        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#contact" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
-  --card: #0c0c0c;
-  --foreground: #ffffff;
-  --primary-cta: #106EFB;
+  --background: #f6f0e9;
+  --card: #efe7dd;
+  --foreground: #2b180a;
+  --primary-cta: #2b180a;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #000000;
+  --secondary-cta: #efe7dd;
   --secondary-cta-text: #ffffff;
-  --accent: #535353;
-  --background-accent: #106EFB;
+  --accent: #94877c;
+  --background-accent: #afa094;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);