Merge version_2 into main #8
210
src/app/page.tsx
210
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" },
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user