Update src/app/page.tsx

src/app/globals.css

@@ -4,13 +4,13 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  --background: #000000;;
+  --background: #fffef5;
-  --card: #1b1b1b;;
+  --card: #fffbeb;
-  --foreground: #ffffff;;
+  --foreground: #121200e6;
-  --primary-cta: #ff0000;;
+  --primary-cta: #ffcf40;
-  --secondary-cta: #151515;;
+  --secondary-cta: #ffffff;
-  --accent: #303030;;
+  --accent: #e2e2e2;
-  --background-accent: #303030;;
+  --background-accent: #fef3c7;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
@@ -495,7 +495,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-jetbrains-mono), sans-serif;
+  font-family: var(--font-inter-tight), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -508,5 +508,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-jetbrains-mono), sans-serif;
+  font-family: var(--font-inter-tight), sans-serif;
 }

src/app/page.tsx

@@ -1,16 +1,11 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
+import { useState } from "react";
-import HeroLogoBillboardSplitImage from '@/components/sections/hero/HeroLogoBillboardSplitImage';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import FeatureCardFourteen from '@/components/sections/feature/FeatureCardFourteen';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import ContactFaq from '@/components/sections/contact/ContactFaq';
-import FooterSocial from '@/components/sections/footer/FooterSocial';
-import { Heart, Star, Calendar, Instagram, Facebook, Linkedin } from 'lucide-react';
 
 export default function LandingPage() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -24,223 +19,310 @@ export default function LandingPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
-      <div id="nav" data-section="nav">
+      {/* Navigation */}
-        <NavbarStyleMinimal
+      <nav className="fixed top-0 left-0 w-full bg-white/90 backdrop-blur-sm z-50 border-b border-gray-200">
-          brandName="Viva"
+        <div className="max-w-6xl mx-auto px-6 py-4">
-          button={{ text: "Reserve Now", href: "contact" }}
+          <div className="flex items-center justify-between">
-        />
+            <h1 className="text-2xl font-bold text-gray-900">Viva</h1>
-      </div>
+            <div className="hidden md:flex items-center space-x-8">
+              <a href="#hero" className="text-gray-700 hover:text-gray-900 transition-colors">Home</a>
+              <a href="#about" className="text-gray-700 hover:text-gray-900 transition-colors">About</a>
+              <a href="#menu" className="text-gray-700 hover:text-gray-900 transition-colors">Menu</a>
+              <a href="#testimonials" className="text-gray-700 hover:text-gray-900 transition-colors">Reviews</a>
+              <a href="#contact" className="text-gray-700 hover:text-gray-900 transition-colors">Contact</a>
+              <button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
+                Reserve Now
+              </button>
+            </div>
+            <button 
+              className="md:hidden"
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+            >
+              <div className="w-6 h-6 flex flex-col justify-center space-y-1">
+                <div className="w-full h-0.5 bg-gray-700"></div>
+                <div className="w-full h-0.5 bg-gray-700"></div>
+                <div className="w-full h-0.5 bg-gray-700"></div>
+              </div>
+            </button>
+          </div>
+          {isMenuOpen && (
+            <div className="md:hidden mt-4 pb-4 border-t border-gray-200 pt-4">
+              <div className="flex flex-col space-y-2">
+                <a href="#hero" className="text-gray-700 hover:text-gray-900 transition-colors py-2">Home</a>
+                <a href="#about" className="text-gray-700 hover:text-gray-900 transition-colors py-2">About</a>
+                <a href="#menu" className="text-gray-700 hover:text-gray-900 transition-colors py-2">Menu</a>
+                <a href="#testimonials" className="text-gray-700 hover:text-gray-900 transition-colors py-2">Reviews</a>
+                <a href="#contact" className="text-gray-700 hover:text-gray-900 transition-colors py-2">Contact</a>
+                <button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors mt-2 w-full">
+                  Reserve Now
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </nav>
 
-      <div id="hero" data-section="hero">
+      {/* Hero Section */}
-        <HeroLogoBillboardSplitImage
+      <section id="hero" className="pt-20 min-h-screen flex items-center bg-gradient-to-br from-gray-50 to-blue-50">
-          logoText="VIVA"
+        <div className="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
-          description="Experience culinary excellence in an elegant atmosphere. Discover authentic flavors and impeccable service."
+          <div>
-          buttons={[
+            <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">VIVA</h1>
-            { text: "Reserve Table", href: "contact" },
+            <p className="text-xl text-gray-600 mb-8 leading-relaxed">
-            { text: "Explore Menu", href: "menu" }
+              Experience culinary excellence in an elegant atmosphere. Discover authentic flavors and impeccable service.
-          ]}
+            </p>
-          layoutOrder="default"
+            <div className="flex flex-col sm:flex-row gap-4">
-          splitImageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766416778445-zl3jwowr.jpg"
+              <button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
-          splitImageAlt="Restaurant Interior"
+                Reserve Table
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766762603989-3tcb4zsk.jpg"
+              </button>
-          imageAlt="Fine Dining Experience"
+              <button className="border border-gray-300 text-gray-700 px-8 py-3 rounded-lg hover:border-gray-400 transition-colors">
-          frameStyle="card"
+                Explore Menu
-        />
+              </button>
-      </div>
+            </div>
+          </div>
+          <div className="relative">
+            <img 
+              src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766416778445-zl3jwowr.jpg" 
+              alt="Restaurant Interior" 
+              className="w-full h-96 object-cover rounded-2xl shadow-2xl"
+            />
+          </div>
+        </div>
+      </section>
 
-      <div id="about" data-section="about">
+      {/* About Section */}
-        <MediaAbout
+      <section id="about" className="py-20 bg-white">
-          title="Our Story"
+        <div className="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
-          description="Founded with a passion for culinary innovation, Viva brings together world-class cuisine, impeccable service, and an unforgettable dining experience. Every dish is crafted with precision and love."
+          <div className="relative">
-          tag="About Us"
+            <img 
-          tagIcon={Heart}
+              src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766764501852-mmy7v2k1.jpg" 
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766764501852-mmy7v2k1.jpg"
+              alt="Restaurant ambiance" 
-          imageAlt="Restaurant ambiance"
+              className="w-full h-96 object-cover rounded-2xl shadow-xl"
-          buttons={[{ text: "Learn More", href: "#" }]}
+            />
-          useInvertedBackground="noInvert"
+          </div>
-        />
+          <div>
-      </div>
+            <div className="flex items-center gap-2 mb-4">
+              <span className="text-red-500">❤️</span>
+              <span className="text-sm font-medium text-gray-500 uppercase tracking-wide">About Us</span>
+            </div>
+            <h2 className="text-4xl font-bold text-gray-900 mb-6">Our Story</h2>
+            <p className="text-lg text-gray-600 mb-8 leading-relaxed">
+              Founded with a passion for culinary innovation, Viva brings together world-class cuisine, impeccable service, and an unforgettable dining experience. Every dish is crafted with precision and love.
+            </p>
+            <button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
+              Join us
+            </button>
+          </div>
+        </div>
+      </section>
 
-      <div id="menu" data-section="menu">
+      {/* Menu Section */}
-        <FeatureCardFourteen
+      <section id="menu" className="py-20 bg-gray-50">
-          title="Signature Specialties"
+        <div className="max-w-6xl mx-auto px-6">
-          description="Indulge in our carefully curated selection of dishes that define Viva's culinary identity"
+          <div className="text-center mb-16">
-          textboxLayout="default"
+            <span className="text-sm font-medium text-gray-500 uppercase tracking-wide">Menu</span>
-          useInvertedBackground="noInvert"
+            <h2 className="text-4xl font-bold text-gray-900 mt-2 mb-4">Signature Specialties</h2>
-          tag="Menu"
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-          tagIcon={Star}
+              Indulge in our carefully curated selection of dishes that define Viva's culinary identity
-          features={[
+            </p>
-            {
+          </div>
-              id: "1",
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-              title: "Handmade Pasta",
+            <div className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
-              description: "Traditional Italian pasta prepared fresh daily with premium ingredients. 5 stars",
+              <img 
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766760339172-wtq2r8qq.jpg",
+                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766760339172-wtq2r8qq.jpg" 
-              imageAlt: "Signature Pasta Dish"
+                alt="Signature Pasta Dish" 
-            },
+                className="w-full h-48 object-cover"
-            {
+              />
-              id: "2",
+              <div className="p-6">
-              title: "Fresh Seafood",
+                <h3 className="text-xl font-semibold text-gray-900 mb-2">Handmade Pasta</h3>
-              description: "Ocean-to-table selections featuring the finest catch of the day. 5 stars",
+                <p className="text-gray-600">Traditional Italian pasta prepared fresh daily with premium ingredients. 5 stars</p>
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766760341776-od1mgbjg.jpg",
+              </div>
-              imageAlt: "Seafood Specialty"
+            </div>
-            },
+            <div className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
-            {
+              <img 
-              id: "3",
+                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766760341776-od1mgbjg.jpg" 
-              title: "Decadent Desserts",
+                alt="Seafood Specialty" 
-              description: "Artisanal sweet creations that end your meal on a perfect note. 5 stars",
+                className="w-full h-48 object-cover"
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766760342753-3muw0pvy.jpg",
+              />
-              imageAlt: "Premium Dessert"
+              <div className="p-6">
-            },
+                <h3 className="text-xl font-semibold text-gray-900 mb-2">Fresh Seafood</h3>
-            {
+                <p className="text-gray-600">Ocean-to-table selections featuring the finest catch of the day. 5 stars</p>
-              id: "4",
+              </div>
-              title: "Premium Steaks",
+            </div>
-              description: "Expertly aged cuts grilled to perfection with signature preparations. 5 stars",
+            <div className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766416782593-h8zdw91t.jpg",
+              <img 
-              imageAlt: "Prime Steak Selection"
+                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766760342753-3muw0pvy.jpg" 
-            }
+                alt="Premium Dessert" 
-          ]}
+                className="w-full h-48 object-cover"
-        />
+              />
-      </div>
+              <div className="p-6">
+                <h3 className="text-xl font-semibold text-gray-900 mb-2">Decadent Desserts</h3>
+                <p className="text-gray-600">Artisanal sweet creations that end your meal on a perfect note. 5 stars</p>
+              </div>
+            </div>
+            <div className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
+              <img 
+                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766416782593-h8zdw91t.jpg" 
+                alt="Prime Steak Selection" 
+                className="w-full h-48 object-cover"
+              />
+              <div className="p-6">
+                <h3 className="text-xl font-semibold text-gray-900 mb-2">Premium Steaks</h3>
+                <p className="text-gray-600">Expertly aged cuts grilled to perfection with signature preparations. 5 stars</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
 
-      <div id="testimonials" data-section="testimonials">
+      {/* Testimonials Section */}
-        <TestimonialCardThirteen
+      <section id="testimonials" className="py-20 bg-white">
-          testimonials={[
+        <div className="max-w-6xl mx-auto px-6">
-            {
+          <div className="text-center mb-16">
-              id: "1",
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">What Our Guests Say</h2>
-              name: "Margaret Chen",
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-              handle: "@margaretchen",
+              Hear from those who have experienced Viva's culinary excellence
-              testimonial: "Viva has become our favorite restaurant. The food is exceptional, the service is impeccable, and the atmosphere is simply perfect. We celebrate every special occasion here.",
+            </p>
-              rating: 5,
+          </div>
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414401529-6db20epg.jpg",
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-              imageAlt: "Margaret Chen"
+            <div className="bg-gray-50 rounded-2xl p-6">
-            },
+              <div className="flex items-center gap-3 mb-4">
-            {
+                <img 
-              id: "2",
+                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414401529-6db20epg.jpg" 
-              name: "James Wilson",
+                  alt="Margaret Chen" 
-              handle: "@jameswilson",
+                  className="w-12 h-12 rounded-full object-cover"
-              testimonial: "Outstanding culinary experience. The chef's attention to detail is remarkable, and every course was a masterpiece.",
+                />
-              rating: 5,
+                <div>
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg",
+                  <h4 className="font-semibold text-gray-900">Margaret Chen</h4>
-              imageAlt: "James Wilson"
+                  <p className="text-sm text-gray-500">@margaretchen</p>
-            },
+                </div>
-            {
+              </div>
-              id: "3",
+              <div className="flex mb-3">
-              name: "Sofia Rodriguez",
+                <span className="text-yellow-400">⭐⭐⭐⭐⭐</span>
-              handle: "@sofiar",
+              </div>
-              testimonial: "The finest dining experience in the city. Worth every penny for the quality and sophistication.",
+              <p className="text-gray-600">
-              rating: 5,
+                Viva has become our favorite restaurant. The food is exceptional, the service is impeccable, and the atmosphere is simply perfect. We celebrate every special occasion here.
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502911819-f5rnce5q.jpg",
+              </p>
-              imageAlt: "Sofia Rodriguez"
+            </div>
-            },
+            <div className="bg-gray-50 rounded-2xl p-6">
-            {
+              <div className="flex items-center gap-3 mb-4">
-              id: "4",
+                <img 
-              name: "David Kim",
+                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg" 
-              handle: "@davidkim",
+                  alt="James Wilson" 
-              testimonial: "Brought my family for a special celebration and they loved every moment. Highly recommended for special occasions.",
+                  className="w-12 h-12 rounded-full object-cover"
-              rating: 5,
+                />
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502912600-84fr3x4z.jpg",
+                <div>
-              imageAlt: "David Kim"
+                  <h4 className="font-semibold text-gray-900">James Wilson</h4>
-            },
+                  <p className="text-sm text-gray-500">@jameswilson</p>
-            {
+                </div>
-              id: "5",
+              </div>
-              name: "Emma Thompson",
+              <div className="flex mb-3">
-              handle: "@emmathompson",
+                <span className="text-yellow-400">⭐⭐⭐⭐⭐</span>
-              testimonial: "A culinary journey I'll never forget. The wine pairing was expertly curated and enhanced every dish.",
+              </div>
-              rating: 5,
+              <p className="text-gray-600">
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502913367-8j5yog7q.jpg",
+                Outstanding culinary experience. The chef's attention to detail is remarkable, and every course was a masterpiece.
-              imageAlt: "Emma Thompson"
+              </p>
-            },
+            </div>
-            {
+            <div className="bg-gray-50 rounded-2xl p-6">
-              id: "6",
+              <div className="flex items-center gap-3 mb-4">
-              name: "Michael Santos",
+                <img 
-              handle: "@michaelsantos",
+                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502911819-f5rnce5q.jpg" 
-              testimonial: "Professional service, exquisite food, elegant ambiance. Viva sets the standard for fine dining.",
+                  alt="Sofia Rodriguez" 
-              rating: 5,
+                  className="w-12 h-12 rounded-full object-cover"
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914201-sdgv9pae.jpg",
+                />
-              imageAlt: "Michael Santos"
+                <div>
-            }
+                  <h4 className="font-semibold text-gray-900">Sofia Rodriguez</h4>
-          ]}
+                  <p className="text-sm text-gray-500">@sofiar</p>
-          showRating={true}
+                </div>
-          title="What Our Guests Say"
+              </div>
-          description="Hear from those who have experienced Viva's culinary excellence"
+              <div className="flex mb-3">
-          textboxLayout="default"
+                <span className="text-yellow-400">⭐⭐⭐⭐⭐</span>
-          animationType="opacity"
+              </div>
-          useInvertedBackground="invertCard"
+              <p className="text-gray-600">
-        />
+                The finest dining experience in the city. Worth every penny for the quality and sophistication.
-      </div>
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
 
-      <div id="contact" data-section="contact">
+      {/* Contact Section */}
-        <ContactFaq
+      <section id="contact" className="py-20 bg-gray-50">
-          faqs={[
+        <div className="max-w-6xl mx-auto px-6">
-            {
+          <div className="grid lg:grid-cols-2 gap-16">
-              id: "1",
+            <div>
-              title: "How far in advance should I make a reservation?",
+              <h2 className="text-4xl font-bold text-gray-900 mb-8">Frequently Asked Questions</h2>
-              content: "We recommend reservations at least 2-3 weeks in advance for optimal table selection. However, we do accommodate walk-ins based on availability."
+              <div className="space-y-6">
-            },
+                <div className="bg-white rounded-xl p-6 shadow-sm">
-            {
+                  <h3 className="font-semibold text-gray-900 mb-2">How far in advance should I make a reservation?</h3>
-              id: "2",
+                  <p className="text-gray-600">We recommend reservations at least 2-3 weeks in advance for optimal table selection. However, we do accommodate walk-ins based on availability.</p>
-              title: "Do you offer private dining options?",
+                </div>
-              content: "Yes, we offer exclusive private dining experiences for special occasions. Please contact us directly to discuss your event requirements."
+                <div className="bg-white rounded-xl p-6 shadow-sm">
-            },
+                  <h3 className="font-semibold text-gray-900 mb-2">Do you offer private dining options?</h3>
-            {
+                  <p className="text-gray-600">Yes, we offer exclusive private dining experiences for special occasions. Please contact us directly to discuss your event requirements.</p>
-              id: "3",
+                </div>
-              title: "What is your dress code?",
+                <div className="bg-white rounded-xl p-6 shadow-sm">
-              content: "Smart casual is recommended. Jackets are appreciated but not required. We want our guests to feel comfortable while maintaining our refined atmosphere."
+                  <h3 className="font-semibold text-gray-900 mb-2">What is your dress code?</h3>
-            },
+                  <p className="text-gray-600">Smart casual is recommended. Jackets are appreciated but not required. We want our guests to feel comfortable while maintaining our refined atmosphere.</p>
-            {
+                </div>
-              id: "4",
+              </div>
-              title: "Do you accommodate dietary restrictions?",
+            </div>
-              content: "Absolutely. Please inform us of any dietary requirements when booking, and our chef will create a custom menu to suit your needs."
+            <div className="bg-white rounded-2xl p-8 shadow-lg">
-            },
+              <div className="flex items-center gap-3 mb-6">
-            {
+                <span className="text-blue-600">📅</span>
-              id: "5",
+                <h3 className="text-2xl font-bold text-gray-900">Reserve Your Table</h3>
-              title: "Can I bring my own wine?",
+              </div>
-              content: "We have a curated wine selection. Outside wine is not permitted, but our sommelier can recommend excellent pairings from our collection."
+              <p className="text-gray-600 mb-6">
-            },
+                Book your next culinary experience at Viva. Experience excellence with every bite.
-            {
+              </p>
-              id: "6",
+              <button className="w-full bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
-              title: "What is your cancellation policy?",
+                Book Now
-              content: "Reservations cancelled within 48 hours may incur a charge. We appreciate advance notice for any changes to your reservation."
+              </button>
-            }
+            </div>
-          ]}
+          </div>
-          ctaTitle="Reserve Your Table"
+        </div>
-          ctaDescription="Book your next culinary experience at Viva. Experience excellence with every bite."
+      </section>
-          ctaButton={{ text: "Book Now", href: "#" }}
-          ctaIcon={Calendar}
-          useInvertedBackground="noInvert"
-          animationType="slide-up"
-        />
-      </div>
 
-      <div id="footer" data-section="footer">
+      {/* Footer */}
-        <FooterSocial
+      <footer id="footer" className="py-16 bg-gray-900 text-white">
-          logoText="Viva"
+        <div className="max-w-6xl mx-auto px-6">
-          copyrightText="© 2025 Viva Restaurant. All rights reserved."
+          <div className="grid md:grid-cols-4 gap-8">
-          columns={[
+            <div>
-            {
+              <h3 className="text-2xl font-bold mb-4">Viva</h3>
-              title: "Restaurant",
+              <p className="text-gray-400">© 2025 Viva Restaurant. All rights reserved.</p>
-              items: [
+            </div>
-                { label: "About Us", href: "#about" },
+            <div>
-                { label: "Menu", href: "#menu" },
+              <h4 className="font-semibold mb-4">Restaurant</h4>
-                { label: "Reservations", href: "#contact" }
+              <div className="space-y-2">
-              ]
+                <a href="#about" className="block text-gray-400 hover:text-white transition-colors">About Us</a>
-            },
+                <a href="#menu" className="block text-gray-400 hover:text-white transition-colors">Menu</a>
-            {
+                <a href="#contact" className="block text-gray-400 hover:text-white transition-colors">Reservations</a>
-              title: "Visit",
+              </div>
-              items: [
+            </div>
-                { label: "Hours", href: "#" },
+            <div>
-                { label: "Location", href: "#" },
+              <h4 className="font-semibold mb-4">Visit</h4>
-                { label: "Private Dining", href: "#" }
+              <div className="space-y-2">
-              ]
+                <a href="#" className="block text-gray-400 hover:text-white transition-colors">Hours</a>
-            }
+                <a href="#" className="block text-gray-400 hover:text-white transition-colors">Location</a>
-          ]}
+                <a href="#" className="block text-gray-400 hover:text-white transition-colors">Private Dining</a>
-          socialLinks={[
+              </div>
-            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
+            </div>
-            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
+            <div>
-            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" }
+              <h4 className="font-semibold mb-4">Connect</h4>
-          ]}
+              <div className="flex space-x-4">
-        />
+                <a href="https://instagram.com" className="text-gray-400 hover:text-white transition-colors" aria-label="Instagram">
-      </div>
+                  📷
+                </a>
+                <a href="https://facebook.com" className="text-gray-400 hover:text-white transition-colors" aria-label="Facebook">
+                  📘
+                </a>
+                <a href="https://linkedin.com" className="text-gray-400 hover:text-white transition-colors" aria-label="LinkedIn">
+                  💼
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </footer>
     </ThemeProvider>
   );
 }