src/app/page.tsx

@@ -9,10 +9,25 @@ import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Award, Heart, Phone, Sparkles, Star, TrendingUp, Utensils } from 'lucide-react';
+import { Award, Heart, Phone, Sparkles, Star, TrendingUp, Utensils, Mail, MapPin, Clock } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [reservationEmail, setReservationEmail] = useState('');
+  const [newsletterEmail, setNewsletterEmail] = useState('');
+
+  const handleReservationSubmit = (email: string) => {
+    console.log('Reservation request from:', email);
+    setReservationEmail('');
+  };
+
+  const handleNewsletterSubmit = (email: string) => {
+    console.log('Newsletter signup:', email);
+    setNewsletterEmail('');
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -34,6 +49,7 @@ export default function LandingPage() {
             { name: "About", id: "about" },
             { name: "Menu", id: "products" },
             { name: "Reviews", id: "testimonials" },
+            { name: "Reservations", id: "booking" },
             { name: "Contact", id: "contact" }
           ]}
           bottomLeftText="Fine Dining Experience"
@@ -49,7 +65,7 @@ export default function LandingPage() {
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Reserve Your Table", href: "#contact" },
+            { text: "Reserve Your Table", href: "#booking" },
             { text: "View Menu", href: "#products" }
           ]}
           buttonAnimation="blur-reveal"
@@ -165,16 +181,16 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="booking" data-section="booking">
         <ContactCTA
-          tag="Get In Touch"
-          tagIcon={Phone}
+          tag="Make Your Reservation"
+          tagIcon={Calendar}
           tagAnimation="slide-up"
-          title="Reserve Your Culinary Journey"
-          description="Experience an unforgettable evening at Delicioso. Call us or use our online reservation system to secure your table."
+          title="Reserve Your Table"
+          description="Book your dining experience at Delicioso. Our team ensures every reservation receives personalized attention and exceptional service."
           buttons={[
-            { text: "Reserve Now", href: "#" },
-            { text: "Call +1 (555) 123-4567", href: "tel:+15551234567" }
+            { text: "Book Online", href: "#" },
+            { text: "Call Now", href: "tel:+15551234567" }
           ]}
           buttonAnimation="blur-reveal"
           background={{ variant: "radial-gradient" }}
@@ -182,6 +198,23 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="contact" data-section="contact">
+        <ContactSplit
+          tag="Get In Touch"
+          tagIcon={MapPin}
+          tagAnimation="slide-up"
+          title="Visit Us"
+          description="Experience Delicioso in person. Located in the heart of the city, our restaurant offers an elegant setting for unforgettable dining moments."
+          background={{ variant: "radial-gradient" }}
+          useInvertedBackground={false}
+          mediaPosition="right"
+          inputPlaceholder="Enter your email"
+          buttonText="Subscribe"
+          termsText="By subscribing, you agree to receive updates about special events and new menu offerings."
+          onSubmit={handleNewsletterSubmit}
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterLogoEmphasis
           logoText="Delicioso"
@@ -196,7 +229,7 @@ export default function LandingPage() {
             },
             {
               items: [
-                { label: "Reserve a Table", href: "#contact" },
+                { label: "Reserve a Table", href: "#booking" },
                 { label: "Private Events", href: "#" },
                 { label: "Catering", href: "#" },
                 { label: "Gift Cards", href: "#" }
@@ -231,4 +264,7 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
+
+// Import Calendar icon
+import { Calendar } from 'lucide-react';

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1f3251;
+  --background: #f6f0e9;
+  --card: #efe7dd;
+  --foreground: #2b180a;
+  --primary-cta: #8b6f47;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #efe7dd;
   --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
-  --background-accent: #a8cce8;
+  --accent: #c89b6e;
+  --background-accent: #d4a574;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);