Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -6,12 +6,30 @@ import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonia
 import ProductCardThree from "@/components/sections/product/ProductCardThree";
 import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
 import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
-import ContactText from "@/components/sections/contact/ContactText";
+import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import FaqDouble from "@/components/sections/faq/FaqDouble";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import { Heart } from "lucide-react";
+import { Heart, MapPin, Phone, Clock, Users, Calendar, Utensils, MapPinCheck } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [reservationData, setReservationData] = useState({
+    name: "",    phone: "",    partySize: "",    date: "",    time: ""});
+
+  const handleReservationChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setReservationData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleReservationSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const message = `Reservation Request:%0AName: ${reservationData.name}%0APhone: ${reservationData.phone}%0AParty Size: ${reservationData.partySize}%0ADate: ${reservationData.date}%0ATime: ${reservationData.time}`;
+    window.open(`https://wa.me/919418283555?text=${message}`, "_blank");
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -34,6 +52,7 @@ export default function LandingPage() {
             { name: "About", id: "about" },
             { name: "Reviews", id: "reviews" },
             { name: "Location", id: "location" },
+            { name: "Contact", id: "contact" },
           ]}
           button={{
             text: "Reserve Table",            href: "#reservation"
@@ -156,51 +175,278 @@ export default function LandingPage() {
       </div>
 
       <div id="location" data-section="location">
-        <ContactText
+        <FaqSplitMedia
-          text="Ready to visit? Find us at Kompally, beside Nikhil Fuel Filling Station. Easy location, ample parking, and warm hospitality await you!"
+          faqs={[
-          animationType="entrance-slide"
+            {
-          background={{ variant: "plain" }}
+              id: "1",              title: "Where is Polam Restaurant located?",              content: "We are located <strong>beside Nikhil Fuel Filling Station in Kompally, Hyderabad</strong>. Easy to find with plenty of parking available. Check Google Maps for directions and street view."
+            },
+            {
+              id: "2",              title: "What are your opening hours?",              content: "We are <strong>open until 11:30 PM daily</strong>. Perfect for lunch, dinner, and late-night dining. We recommend calling ahead during peak hours (lunch 12-2 PM, dinner 7-9 PM) to ensure availability."
+            },
+            {
+              id: "3",              title: "Is parking available?",              content: "Yes! We have <strong>ample parking available</strong> for all our guests. Located beside Nikhil Fuel Filling Station, parking is easy and free. No hassle for family dinners."
+            },
+            {
+              id: "4",              title: "How do I contact Polam?",              content: "Call us at <strong>+91 9418283555</strong> or WhatsApp us directly for instant communication. We're available during business hours and respond quickly to queries and orders."
+            },
+            {
+              id: "5",              title: "Do you deliver orders?",              content: "Yes! We offer <strong>delivery and takeaway services</strong>. Order through WhatsApp at <strong>+91 9418283555</strong> for quick preparation and delivery. Fresh food prepared on order."
+            },
+            {
+              id: "6",              title: "What's your seating capacity?",              content: "We have comfortable seating for groups and families. We also have a <strong>private dining area</strong> for special celebrations and business meetings. Contact us to check availability."
+            },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/top-view-map-showing-location_23-2148960814.jpg"
+          imageAlt="Polam Restaurant Location Map"
+          mediaAnimation="blur-reveal"
+          title="Find Us at Polam Restaurant"
+          description="Easy location in Kompally with ample parking and warm hospitality"
+          tag="Location & Hours"
+          textboxLayout="default"
+          faqsAnimation="blur-reveal"
           useInvertedBackground={false}
+          mediaPosition="right"
           buttons={[
             {
               text: "📍 Get Directions",              href: "https://maps.google.com/?q=Polam+Restaurant+Kompally+Hyderabad"
             },
-            {
-              text: "📞 Call Restaurant",              href: "tel:+919418283555"
-            },
           ]}
         />
       </div>
 
+      <div id="contact" data-section="contact">
+        <section id="contact-info" className="py-16 px-4 md:px-8">
+          <div className="max-w-4xl mx-auto">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl md:text-4xl font-bold mb-4">Contact Information & Hours</h2>
+              <p className="text-lg text-gray-600">Get in touch with us for reservations, orders, and inquiries</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {/* Contact Details */}
+              <div className="space-y-6">
+                <div className="flex items-start gap-4">
+                  <Phone className="w-6 h-6 mt-1 flex-shrink-0" />
+                  <div>
+                    <h3 className="font-bold text-lg mb-1">Phone</h3>
+                    <p className="text-gray-600"><a href="tel:+919418283555" className="hover:underline">+91 9418283555</a></p>
+                    <p className="text-sm text-gray-500 mt-1">Call for reservations and orders</p>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-4">
+                  <MapPin className="w-6 h-6 mt-1 flex-shrink-0" />
+                  <div>
+                    <h3 className="font-bold text-lg mb-1">Address</h3>
+                    <p className="text-gray-600">Beside Nikhil Fuel Filling Station</p>
+                    <p className="text-gray-600">Kompally, Hyderabad</p>
+                    <p className="text-sm text-gray-500 mt-1"><a href="https://maps.google.com/?q=Polam+Restaurant+Kompally" target="_blank" rel="noopener noreferrer" className="hover:underline">View on Google Maps</a></p>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-4">
+                  <Clock className="w-6 h-6 mt-1 flex-shrink-0" />
+                  <div>
+                    <h3 className="font-bold text-lg mb-1">Opening Hours</h3>
+                    <p className="text-gray-600">Open until <strong>11:30 PM</strong></p>
+                    <p className="text-sm text-gray-500 mt-1">Lunch: 12:00 PM - 3:00 PM</p>
+                    <p className="text-sm text-gray-500">Dinner: 7:00 PM - 11:30 PM</p>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-4">
+                  <Utensils className="w-6 h-6 mt-1 flex-shrink-0" />
+                  <div>
+                    <h3 className="font-bold text-lg mb-1">Services</h3>
+                    <ul className="text-sm text-gray-600 space-y-1">
+                      <li>✓ Dine-in</li>
+                      <li>✓ Takeaway</li>
+                      <li>✓ Delivery</li>
+                      <li>✓ Private Dining Area</li>
+                      <li>✓ Ample Parking</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              {/* WhatsApp & Social Links */}
+              <div className="space-y-6">
+                <div className="bg-green-50 border border-green-200 rounded-lg p-6">
+                  <h3 className="font-bold text-lg mb-3 flex items-center gap-2">
+                    <span className="text-2xl">💬</span> WhatsApp Order
+                  </h3>
+                  <p className="text-gray-600 mb-4">Quick and easy ordering via WhatsApp. Just message us your order and we'll prepare it fresh for you.</p>
+                  <a
+                    href="https://wa.me/919418283555?text=Hi%2C%20I%27d%20like%20to%20order%20from%20Polam%20Restaurant"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-block bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-lg transition"
+                  >
+                    WhatsApp Us Now
+                  </a>
+                </div>
+
+                <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
+                  <h3 className="font-bold text-lg mb-3">Follow Us</h3>
+                  <p className="text-gray-600 mb-4">Stay updated with latest offers and food updates</p>
+                  <div className="flex gap-3">
+                    <a href="#" className="text-blue-600 hover:text-blue-800 font-bold">Facebook</a>
+                    <a href="#" className="text-pink-600 hover:text-pink-800 font-bold">Instagram</a>
+                    <a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer" className="text-red-600 hover:text-red-800 font-bold">Google Reviews</a>
+                  </div>
+                </div>
+
+                <div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
+                  <h3 className="font-bold text-lg mb-3 flex items-center gap-2">
+                    <MapPinCheck className="w-5 h-5" /> Quick Info
+                  </h3>
+                  <ul className="text-sm text-gray-600 space-y-2">
+                    <li>✓ Family-friendly atmosphere</li>
+                    <li>✓ Authentic biryani & starters</li>
+                    <li>✓ Fresh ingredients daily</li>
+                    <li>✓ Competitive pricing</li>
+                    <li>✓ Friendly & quick service</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
       <div id="reservation" data-section="reservation">
-        <FaqDouble
+        <section id="reservation-form" className="py-16 px-4 md:px-8 bg-gray-50">
-          title="Reserve Your Table"
+          <div className="max-w-2xl mx-auto">
-          description="Quick reservation FAQs - Call or WhatsApp us directly for instant bookings"
+            <div className="text-center mb-12">
-          tag="Reservations"
+              <h2 className="text-3xl md:text-4xl font-bold mb-4 flex items-center justify-center gap-2">
-          textboxLayout="default"
+                <Calendar className="w-8 h-8" /> Reserve Your Table
-          useInvertedBackground={false}
+              </h2>
-          faqsAnimation="blur-reveal"
+              <p className="text-lg text-gray-600">Book a table for your next dining experience at Polam Restaurant</p>
-          faqs={[
+            </div>
-            {
+
-              id: "1",              title: "How do I reserve a table?",              content: "Simply call us at <strong>094182 83555</strong> or WhatsApp us directly. Our friendly staff will confirm your reservation for the date and time you prefer. Reservations are recommended for groups and weekend dining."
+            <form onSubmit={handleReservationSubmit} className="bg-white rounded-lg shadow-lg p-8 space-y-6">
-            },
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {
+                <div>
-              id: "2",              title: "What are your opening hours?",              content: "We are open until <strong>11:30 PM</strong> daily. Perfect for lunch, dinner, and late-night bites. We recommend calling ahead during peak hours to ensure availability."
+                  <label className="block text-sm font-bold mb-2" htmlFor="name">
-            },
+                    <span className="flex items-center gap-2">
-            {
+                      <span>👤</span> Your Name
-              id: "3",              title: "Do you have a private dining area?",              content: "Yes! We have a comfortable <strong>private dining room</strong> perfect for celebrations, meetings, and group gatherings. Contact us to check availability and discuss your requirements."
+                    </span>
-            },
+                  </label>
-            {
+                  <input
-              id: "4",              title: "What vegetarian options do you offer?",              content: "We offer delicious <strong>vegetarian biryani</strong> options including Paneer Kaju Biryani and Mushroom Biryani, along with various veg starters. All dishes are prepared with fresh ingredients and authentic spices."
+                    type="text"
-            },
+                    id="name"
-            {
+                    name="name"
-              id: "5",              title: "Is there parking available?",              content: "Yes, we have <strong>ample parking</strong> available for our guests. Located beside Nikhil Fuel Filling Station in Kompally, we're easy to find and park without any hassle."
+                    value={reservationData.name}
-            },
+                    onChange={handleReservationChange}
-            {
+                    placeholder="Enter your full name"
-              id: "6",              title: "Can I place an order for delivery?",              content: "Absolutely! Order directly through <strong>WhatsApp</strong> at <strong>094182 83555</strong> or call us. We prepare fresh food on order. Quick turnaround time for dine-in and takeaway orders."
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
-            },
+                    required
-          ]}
+                  />
-        />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-bold mb-2" htmlFor="phone">
+                    <span className="flex items-center gap-2">
+                      <span>📞</span> Phone Number
+                    </span>
+                  </label>
+                  <input
+                    type="tel"
+                    id="phone"
+                    name="phone"
+                    value={reservationData.phone}
+                    onChange={handleReservationChange}
+                    placeholder="Enter your phone number"
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-bold mb-2" htmlFor="partySize">
+                    <span className="flex items-center gap-2">
+                      <Users className="w-4 h-4" /> Party Size
+                    </span>
+                  </label>
+                  <select
+                    id="partySize"
+                    name="partySize"
+                    value={reservationData.partySize}
+                    onChange={handleReservationChange}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                    required
+                  >
+                    <option value="">Select party size</option>
+                    <option value="1">1 Person</option>
+                    <option value="2">2 People</option>
+                    <option value="3">3 People</option>
+                    <option value="4">4 People</option>
+                    <option value="5">5 People</option>
+                    <option value="6">6 People</option>
+                    <option value="7+">7 or more</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-bold mb-2" htmlFor="date">
+                    <span className="flex items-center gap-2">
+                      <Calendar className="w-4 h-4" /> Date
+                    </span>
+                  </label>
+                  <input
+                    type="date"
+                    id="date"
+                    name="date"
+                    value={reservationData.date}
+                    onChange={handleReservationChange}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-bold mb-2" htmlFor="time">
+                  <span className="flex items-center gap-2">
+                    <Clock className="w-4 h-4" /> Time
+                  </span>
+                </label>
+                <input
+                  type="time"
+                  id="time"
+                  name="time"
+                  value={reservationData.time}
+                  onChange={handleReservationChange}
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+                  required
+                />
+              </div>
+
+              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-gray-700">
+                <p className="font-bold mb-2">ℹ️ Reservation Info</p>
+                <ul className="space-y-1 text-gray-600">
+                  <li>• Reservations are confirmed via WhatsApp</li>
+                  <li>• We recommend booking on peak hours (12-2 PM, 7-9 PM)</li>
+                  <li>• Private dining area available for groups</li>
+                  <li>• Cancellations: Please notify at least 2 hours before</li>
+                </ul>
+              </div>
+
+              <button
+                type="submit"
+                className="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg transition flex items-center justify-center gap-2"
+              >
+                <span>💬</span> Reserve via WhatsApp
+              </button>
+
+              <div className="text-center text-sm text-gray-600">
+                <p>Or call us directly at <a href="tel:+919418283555" className="font-bold hover:underline">+91 9418283555</a></p>
+              </div>
+            </form>
+          </div>
+        </section>
       </div>
 
       <div id="footer" data-section="footer">
@@ -217,7 +463,7 @@ export default function LandingPage() {
             },
             {
               title: "Contact",              items: [
-                { label: "📞 Call: 094182 83555", href: "tel:+919418283555" },
+                { label: "📞 Call: +91 9418283555", href: "tel:+919418283555" },
                 { label: "💬 WhatsApp Order", href: "https://wa.me/919418283555" },
                 {
                   label: "📍 Get Directions",                  href: "https://maps.google.com/?q=Polam+Restaurant+Kompally"
@@ -226,7 +472,7 @@ export default function LandingPage() {
               ],
             },
             {
-              title: "Location",              items: [
+              title: "Location & Hours",              items: [
                 { label: "Beside Nikhil Fuel Filling Station", href: "#" },
                 { label: "Kompally, Hyderabad", href: "#" },
                 { label: "Open until 11:30 PM", href: "#" },
@@ -237,12 +483,12 @@ export default function LandingPage() {
               title: "Follow Us",              items: [
                 { label: "Facebook", href: "#" },
                 { label: "Instagram", href: "#" },
-                { label: "Twitter", href: "#" },
+                { label: "Google Reviews", href: "#" },
-                { label: "Google Maps", href: "#" },
+                { label: "WhatsApp Community", href: "https://wa.me/919418283555" },
               ],
             },
           ]}
-          copyrightText="© 2025 Polam Restaurant | Best Biryani in Kompally, Hyderabad"
+          copyrightText="© 2025 Polam Restaurant | Best Biryani in Kompally, Hyderabad | Authentic Flavors, Warm Hospitality"
         />
       </div>
     </ThemeProvider>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f6f0e9;
+  --background: #f5e6d3;
-  --card: #efe7dd;
+  --card: #f0dcc2;
-  --foreground: #2b180a;
+  --foreground: #3d2817;
-  --primary-cta: #2b180a;
+  --primary-cta: #8b3a1a;
   --primary-cta-text: #f6f0e9;
-  --secondary-cta: #efe7dd;
+  --secondary-cta: #f0dcc2;
   --secondary-cta-text: #2b180a;
-  --accent: #94877c;
+  --accent: #d4a574;
-  --background-accent: #afa094;
+  --background-accent: #c9925f;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);