Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -11,7 +11,7 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import TextAbout from '@/components/sections/about/TextAbout';
-import { Award, Facebook, Heart, Home, Instagram, Leaf, Star, Twitter, Sprout, Smile, Gem } from "lucide-react";
+import { Award, Facebook, Heart, Home, Instagram, Leaf, Star, Twitter, Sprout, Smile, Gem, Phone, MessageCircle } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -117,6 +117,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       tag="Our Heritage"
       title="A Culinary Journey of Passion & Perfection"
+      buttons={[
+        { text: "Contact Us", href: "#contact" },
+        { text: "Call Now", href: "tel:+919876543210" },
+        { text: "WhatsApp", href: "https://wa.me/919876543210" }
+      ]}
     />
   </div>
 
@@ -148,6 +153,9 @@ export default function LandingPage() {
       ]}
       title="Our Signature Creations"
       description="Discover Nini's Kitchen's celebrated dishes, expertly crafted by our chefs. Each plate is a masterpiece of flavor and presentation, a true reflection of our culinary passion."
+      buttons={[
+        { text: "Call to Order", href: "tel:+919876543210" }
+      ]}
     />
   </div>
 
@@ -172,6 +180,9 @@ export default function LandingPage() {
       title="Why Guests Choose Nini's Kitchen"
       description="At Nini's Kitchen, we're dedicated to crafting memorable moments through exceptional food and unparalleled service. Here's what sets us apart:"
       tag="Our Promise"
+      buttons={[
+        { text: "Contact Us", href: "#contact" }
+      ]}
     />
   </div>
 
@@ -213,6 +224,9 @@ export default function LandingPage() {
       title="Frequently Asked Questions"
       description="Find quick answers to common questions about Nini's Kitchen, our services, and your dining experience."
       faqsAnimation="slide-up"
+      buttons={[
+        { text: "Contact Us", href: "#contact" }
+      ]}
     />
   </div>
 
@@ -223,7 +237,7 @@ export default function LandingPage() {
         variant: "plain"}}
       tag="Connect with Us"
       title="Visit Us or Make a Reservation"
-      description="We look forward to welcoming you to Nini's Kitchen. Contact us for inquiries or use the form below to send a reservation request. Our team will get back to you promptly to confirm your booking."
+      description="We look forward to welcoming you to Nini's Kitchen. For inquiries or to reserve a table, you can reach us via phone at +91-9876543210, WhatsApp at +91-9876543210, or use the form below to send a reservation request. Our team will get back to you promptly to confirm your booking."
       imageSrc="http://img.b2bpic.net/free-photo/dining-table-with-chairs-tableware_140725-7823.jpg"
       imageAlt="Elegant restaurant interior at Nini's Kitchen"
       mediaAnimation="slide-up"
@@ -243,13 +257,13 @@ export default function LandingPage() {
       socialLinks={[
         {
           icon: Facebook,
-          href: "#",          ariaLabel: "Facebook"},
+          href: "https://facebook.com/niniskitchen",          ariaLabel: "Facebook"},
         {
           icon: Instagram,
-          href: "#",          ariaLabel: "Instagram"},
+          href: "https://instagram.com/niniskitchen",          ariaLabel: "Instagram"},
         {
           icon: Twitter,
-          href: "#",          ariaLabel: "Twitter"},
+          href: "https://twitter.com/niniskitchen",          ariaLabel: "Twitter"},
       ]}
     />
   </div>

src/app/reserve/page.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import Input from '@/components/form/Input';
+import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
+import { Facebook, Instagram, Twitter } from "lucide-react";
+
+export default function ReservationPage() {
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [guests, setGuests] = useState("1");
+  const [date, setDate] = useState("");
+  const [time, setTime] = useState("");
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Here you would typically send the data to a backend or an API
+    console.log({ name, phone, guests, date, time });
+    setIsSubmitted(true);
+    // Optionally clear form fields after submission
+    // setName('');
+    // setPhone('');
+    // setGuests('1');
+    // setDate('');
+    // setTime('');
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="mediumLarge"
+        background="none"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "About Us", id: "about" },
+              { name: "Menu", id: "menu" },
+              { name: "Why Choose Us", id: "features" },
+              { name: "Reviews", id: "testimonials" },
+              { name: "FAQ", id: "faq" },
+              { name: "Reservations", id: "/reserve" }
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/retro-golden-restaurant-logo-collection_23-2148379344.jpg"
+            logoAlt="Nini's Kitchen Logo"
+            brandName="Nini's Kitchen"
+            button={{ text: "Reserve Now", href: "/reserve" }}
+          />
+        </div>
+
+        <div id="reservation" data-section="reservation" className="flex flex-col items-center justify-center min-h-screen py-16 px-4 sm:px-6 lg:px-8">
+          <div className="w-full max-w-md bg-card p-8 rounded-lg shadow-xl text-foreground">
+            <h2 className="text-3xl font-bold text-center mb-6">Make a Reservation</h2>
+            {
+              isSubmitted ? (
+                <div className="text-center text-primary-cta font-semibold">
+                  <p className="mb-4">Your reservation request has been sent successfully!</p>
+                  <p>We will contact you shortly to confirm your booking.</p>
+                </div>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">Name</label>
+                    <Input
+                      id="name"
+                      type="text"
+                      value={name}
+                      onChange={setName}
+                      placeholder="Your Full Name"
+                      required
+                      className="w-full text-foreground bg-background-accent border border-background-accent focus:border-primary-cta focus:ring focus:ring-primary-cta focus:ring-opacity-50"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="phone" className="block text-sm font-medium text-foreground mb-1">Phone Number</label>
+                    <Input
+                      id="phone"
+                      type="tel"
+                      value={phone}
+                      onChange={setPhone}
+                      placeholder="(123) 456-7890"
+                      required
+                      className="w-full text-foreground bg-background-accent border border-background-accent focus:border-primary-cta focus:ring focus:ring-primary-cta focus:ring-opacity-50"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="guests" className="block text-sm font-medium text-foreground mb-1">Number of Guests</label>
+                    <Input
+                      id="guests"
+                      type="number"
+                      value={guests}
+                      onChange={setGuests}
+                      required
+                      className="w-full text-foreground bg-background-accent border border-background-accent focus:border-primary-cta focus:ring focus:ring-primary-cta focus:ring-opacity-50"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="date" className="block text-sm font-medium text-foreground mb-1">Date</label>
+                    <Input
+                      id="date"
+                      type="date"
+                      value={date}
+                      onChange={setDate}
+                      required
+                      className="w-full text-foreground bg-background-accent border border-background-accent focus:border-primary-cta focus:ring focus:ring-primary-cta focus:ring-opacity-50"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="time" className="block text-sm font-medium text-foreground mb-1">Time</label>
+                    <Input
+                      id="time"
+                      type="time"
+                      value={time}
+                      onChange={setTime}
+                      required
+                      className="w-full text-foreground bg-background-accent border border-background-accent focus:border-primary-cta focus:ring focus:ring-primary-cta focus:ring-opacity-50"
+                    />
+                  </div>
+                  <ButtonTextShift
+                    text="Submit Reservation"
+                    type="submit"
+                    className="w-full py-2 px-4 rounded-md text-sm font-medium"
+                  />
+                </form>
+              )
+            }
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoSrc="http://img.b2bpic.net/free-vector/retro-golden-restaurant-logo-collection_23-2148379344.jpg"
+            logoAlt="Nini's Kitchen Logo"
+            logoText="Nini's Kitchen"
+            copyrightText="© 2024 Nini's Kitchen. All rights reserved."
+            socialLinks={[
+              { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+              { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+              { icon: Twitter, href: "#", ariaLabel: "Twitter" }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}