Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -9,9 +9,32 @@ import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNinete
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Crown, Utensils, Users, Award, Flame, Star, UtensilsCrossed, MapPin } from 'lucide-react';
+import { Crown, Utensils, Users, Award, Flame, Star, UtensilsCrossed, MapPin, Phone, Clock, MapPinIcon, Facebook, Instagram, Twitter, MessageCircle, ShoppingCart } from 'lucide-react';
+import React, { useState } from 'react';
 
 export default function LandingPage() {
+  const [formData, setFormData] = useState({ name: '', email: '', phone: '', date: '', time: '', guests: '' });
+  const [showOrderButton, setShowOrderButton] = useState(false);
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      setShowOrderButton(window.scrollY > 300);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('Reservation submitted:', formData);
+    setFormData({ name: '', email: '', phone: '', date: '', time: '', guests: '' });
+  };
+
+  const handleFormChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -25,6 +48,35 @@ export default function LandingPage() {
       secondaryButtonStyle="solid"
       headingFontWeight="medium"
     >
+      {/* Special Offers Banner */}
+      <div className="fixed top-0 left-0 right-0 bg-gradient-to-r from-orange-500 to-red-500 text-white py-2 px-4 text-center text-sm z-50 animate-pulse">
+        <p className="font-semibold">🎉 Special Offer: 20% OFF on orders above ₹500 | Use Code: SKYROOFX20</p>
+      </div>
+
+      {/* Floating WhatsApp Order Button */}
+      <a
+        href="https://wa.me/919876543210?text=Hi%20Sky%20Roof%2C%20I%20would%20like%20to%20place%20an%20order"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="fixed bottom-24 right-6 bg-green-500 hover:bg-green-600 text-white p-4 rounded-full shadow-lg z-40 transition-all duration-300 transform hover:scale-110 flex items-center justify-center"
+        aria-label="Order via WhatsApp"
+      >
+        <MessageCircle size={24} />
+      </a>
+
+      {/* Sticky Order Now Button */}
+      {showOrderButton && (
+        <div className="fixed bottom-6 right-6 z-40 animate-bounce">
+          <a
+            href="#reservations"
+            className="bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white px-6 py-3 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 flex items-center gap-2"
+          >
+            <ShoppingCart size={20} />
+            Order Now
+          </a>
+        </div>
+      )}
+
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
           brandName="Sky Roof"
@@ -161,6 +213,160 @@ export default function LandingPage() {
         />
       </div>
 
+      {/* Contact & Location Section with Reservation Form and Google Maps Integration */}
+      <div id="location" data-section="location" className="relative py-16 md:py-24 px-4 md:px-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
+            {/* Location Info and Reservation Form */}
+            <div className="space-y-8">
+              <div>
+                <h2 className="text-3xl md:text-4xl font-bold mb-4">Visit Sky Roof</h2>
+                <p className="text-lg text-gray-600 mb-8">Experience premium Indian dining in the heart of Vadodara</p>
+              </div>
+
+              {/* Address, Phone, Hours */}
+              <div className="space-y-6">
+                <div className="flex items-start gap-4 p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
+                  <MapPinIcon className="text-orange-500 flex-shrink-0 mt-1" size={24} />
+                  <div>
+                    <h3 className="font-semibold text-lg mb-1">Location</h3>
+                    <p className="text-gray-600">123 Rooftop Avenue, Vadodara, Gujarat 390001</p>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-4 p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
+                  <Phone className="text-orange-500 flex-shrink-0 mt-1" size={24} />
+                  <div>
+                    <h3 className="font-semibold text-lg mb-1">Phone</h3>
+                    <p className="text-gray-600"><a href="tel:+919876543210" className="hover:text-orange-500 transition-colors">+91-9876-543-210</a></p>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-4 p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
+                  <Clock className="text-orange-500 flex-shrink-0 mt-1" size={24} />
+                  <div>
+                    <h3 className="font-semibold text-lg mb-1">Opening Hours</h3>
+                    <p className="text-gray-600">11:00 AM - 11:00 PM (Daily)</p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Reservation Form */}
+              <form onSubmit={handleFormSubmit} className="bg-gradient-to-br from-orange-50 to-red-50 p-6 rounded-lg shadow-md">
+                <h3 className="text-xl font-bold mb-4">Book a Table</h3>
+                <div className="space-y-4">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <input
+                      type="text"
+                      name="name"
+                      placeholder="Your Name"
+                      value={formData.name}
+                      onChange={handleFormChange}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all duration-300"
+                      required
+                    />
+                    <input
+                      type="email"
+                      name="email"
+                      placeholder="Email Address"
+                      value={formData.email}
+                      onChange={handleFormChange}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all duration-300"
+                      required
+                    />
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <input
+                      type="tel"
+                      name="phone"
+                      placeholder="Phone Number"
+                      value={formData.phone}
+                      onChange={handleFormChange}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all duration-300"
+                      required
+                    />
+                    <input
+                      type="date"
+                      name="date"
+                      value={formData.date}
+                      onChange={handleFormChange}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all duration-300"
+                      required
+                    />
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <input
+                      type="time"
+                      name="time"
+                      value={formData.time}
+                      onChange={handleFormChange}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all duration-300"
+                      required
+                    />
+                    <select
+                      name="guests"
+                      value={formData.guests}
+                      onChange={handleFormChange}
+                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 transition-all duration-300"
+                      required
+                    >
+                      <option value="">Select Number of Guests</option>
+                      <option value="1">1 Guest</option>
+                      <option value="2">2 Guests</option>
+                      <option value="3">3 Guests</option>
+                      <option value="4">4 Guests</option>
+                      <option value="5">5+ Guests</option>
+                    </select>
+                  </div>
+                  <button
+                    type="submit"
+                    className="w-full bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white font-semibold py-3 rounded-lg transition-all duration-300 transform hover:scale-105"
+                  >
+                    Reserve Table
+                  </button>
+                </div>
+              </form>
+            </div>
+
+            {/* Google Maps Embed and Info */}
+            <div className="space-y-6">
+              {/* Google Maps Iframe */}
+              <div className="w-full h-96 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
+                <iframe
+                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3671.5454823919677!2d73.19447!3d22.30720!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395fc5f9bffffff%3A0x0!2sVadodara%2C%20Gujarat!5e0!3m2!1sen!2sin!4v1234567890"
+                  width="100%"
+                  height="100%"
+                  style={{ border: 0 }}
+                  allowFullScreen={true}
+                  loading="lazy"
+                  referrerPolicy="no-referrer-when-downgrade"
+                ></iframe>
+              </div>
+
+              {/* Quick Actions */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <a
+                  href="tel:+919876543210"
+                  className="flex items-center justify-center gap-2 bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105"
+                >
+                  <Phone size={20} />
+                  Call Now
+                </a>
+                <a
+                  href="https://wa.me/919876543210?text=Hi%20Sky%20Roof%2C%20I%20would%20like%20to%20reserve%20a%20table"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-center gap-2 bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105"
+                >
+                  <MessageCircle size={20} />
+                  WhatsApp
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="reservations" data-section="reservations">
         <ContactCTA
           tag="Ready to Dine?"
@@ -212,7 +418,7 @@ export default function LandingPage() {
           tag="Get in Touch"
           tagIcon={MapPin}
           title="Visit Sky Roof Restaurant & Cafe"
-          description="Located in the heart of Vadodara, Gujarat. Open daily from 11 AM to 11 PM. Call us at +91-XXXX-XXXX-XXX or reach us via WhatsApp for reservations and inquiries."
+          description="Located in the heart of Vadodara, Gujarat. Open daily from 11 AM to 11 PM. Call us at +91-9876-543-210 or reach us via WhatsApp for reservations and inquiries."
           background={{ variant: "plain" }}
           buttons={[
             { text: "Call Now", href: "tel:+919876543210" },

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffedda;
-  --card: #1a1410;
-  --foreground: #000000;
+  --background: #1a1410;
+  --card: #2d2416;
+  --foreground: #f5e6d3;
   --primary-cta: #d4af37;
   --primary-cta-text: #0f0a05;
   --secondary-cta: #8b4513;
   --secondary-cta-text: #f5e6d3;
   --accent: #c41e3a;
-  --background-accent: #2d2416;
+  --background-accent: #8b4513;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);