Merge version_5_1782370154794 into main #7
@@ -73,15 +73,24 @@ export default function Layout() {
|
||||
title: "Hours",
|
||||
items: [
|
||||
{
|
||||
label: "Mon-Fri: 7am-9pm",
|
||||
label: "Daily: 6:00 AM - 12:00 AM",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Sat-Sun: 8am-10pm",
|
||||
label: "يومياً: من 6 صباحاً حتى 12 منتصف الليل",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Location",
|
||||
items: [
|
||||
{
|
||||
label: "Sana'a, Yemen",
|
||||
href: "#",
|
||||
}
|
||||
]
|
||||
},
|
||||
]}
|
||||
copyright="© 2024 Lithos Specialty Coffee. All rights reserved."
|
||||
links={[
|
||||
|
||||
@@ -11,9 +11,10 @@ import GallerySection from './HomePage/sections/Gallery';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
import BookingSection from './HomePage/sections/Booking';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
@@ -30,7 +31,8 @@ export default function HomePage(): React.JSX.Element {
|
||||
|
||||
<FaqSection />
|
||||
|
||||
<ContactSection />
|
||||
<ContactSection />
|
||||
<BookingSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
205
src/pages/HomePage/sections/Booking.tsx
Normal file
205
src/pages/HomePage/sections/Booking.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import React, { useState } from 'react';
|
||||
import { MapPin, Phone, MessageCircle } from 'lucide-react';
|
||||
|
||||
export default function BookingSection() {
|
||||
const [orderName, setOrderName] = useState('');
|
||||
const [orderDrink, setOrderDrink] = useState('');
|
||||
|
||||
const handleOrderSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
alert(`Order placed for ${orderName}: ${orderDrink}`);
|
||||
};
|
||||
|
||||
const handleBookingSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
alert('Table booked successfully!');
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="booking" data-webild-section="booking">
|
||||
<section className="relative w-full py-24 bg-background">
|
||||
<div className="w-content-width mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Visit & Order</h2>
|
||||
<p className="text-lg text-accent max-w-2xl mx-auto">
|
||||
Find us in Sana'a, order your favorite drinks ahead of time, or book a quiet table for your next meeting.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Contact Info & Map */}
|
||||
<div className="card p-8 flex flex-col gap-6 rounded-lg">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-foreground mb-6">Contact Us</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin className="w-5 h-5 text-accent mt-1" />
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Location</p>
|
||||
<p className="text-accent">Sana'a, Yemen</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Phone className="w-5 h-5 text-accent mt-1" />
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Phone</p>
|
||||
<a href="tel:+967730725728" className="text-accent hover:text-foreground transition-colors">
|
||||
+967 730725728
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 mt-2">
|
||||
<a
|
||||
href="tel:+967730725728"
|
||||
className="secondary-button w-full py-3 rounded-md text-center font-medium flex items-center justify-center"
|
||||
>
|
||||
Call Now
|
||||
</a>
|
||||
<a
|
||||
href="https://wa.me/967730725728"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 w-full py-3 rounded-md font-medium transition-colors bg-[#25D366] hover:bg-[#128C7E] text-white"
|
||||
>
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
WhatsApp Ordering
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto pt-6 rounded-lg overflow-hidden h-48 relative">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d123115.34027786435!2d44.12766324024888!3d15.35010619717163!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1603db129e928231%3A0x101037599292820!2sSana'a%2C%20Yemen!5e0!3m2!1sen!2sus!4v1700000000000!5m2!1sen!2sus"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen={false}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
className="absolute inset-0"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order Ahead Form */}
|
||||
<div className="card p-8 rounded-lg">
|
||||
<h3 className="text-2xl font-bold text-foreground mb-2">Order Ahead</h3>
|
||||
<p className="text-accent mb-6">Skip the line and pick up your favorites.</p>
|
||||
|
||||
<form onSubmit={handleOrderSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-medium text-foreground">Your Name</label>
|
||||
<input
|
||||
id="name"
|
||||
placeholder="Enter your name"
|
||||
value={orderName}
|
||||
onChange={(e) => setOrderName(e.target.value)}
|
||||
required
|
||||
className="w-full h-10 px-3 py-2 rounded-md border border-foreground/20 bg-background text-foreground focus:outline-none focus:border-foreground/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="drink" className="text-sm font-medium text-foreground">Select Drink</label>
|
||||
<select
|
||||
id="drink"
|
||||
className="w-full h-10 px-3 py-2 rounded-md border border-foreground/20 bg-background text-foreground focus:outline-none focus:border-foreground/50"
|
||||
value={orderDrink}
|
||||
onChange={(e) => setOrderDrink(e.target.value)}
|
||||
required
|
||||
>
|
||||
<option value="" disabled>Choose a drink...</option>
|
||||
<option value="flat-white">Flat White</option>
|
||||
<option value="v60">V60 Pour Over</option>
|
||||
<option value="cortado">Cortado</option>
|
||||
<option value="matcha">Matcha Latte</option>
|
||||
<option value="cold-brew">Cold Brew</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="notes" className="text-sm font-medium text-foreground">Special Instructions</label>
|
||||
<textarea
|
||||
id="notes"
|
||||
placeholder="Oat milk, extra hot, etc."
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 rounded-md border border-foreground/20 bg-background text-foreground focus:outline-none focus:border-foreground/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<button type="submit" className="primary-button w-full py-3 rounded-md font-medium">
|
||||
Submit Order
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Table Booking Widget */}
|
||||
<div className="card p-8 rounded-lg">
|
||||
<h3 className="text-2xl font-bold text-foreground mb-2">Book a Table</h3>
|
||||
<p className="text-accent mb-6">Reserve a quiet spot for studying or meetings.</p>
|
||||
|
||||
<form onSubmit={handleBookingSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="booking-name" className="text-sm font-medium text-foreground">Name</label>
|
||||
<input
|
||||
id="booking-name"
|
||||
placeholder="Enter your name"
|
||||
required
|
||||
className="w-full h-10 px-3 py-2 rounded-md border border-foreground/20 bg-background text-foreground focus:outline-none focus:border-foreground/50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="date" className="text-sm font-medium text-foreground">Date</label>
|
||||
<input
|
||||
id="date"
|
||||
type="date"
|
||||
required
|
||||
className="w-full h-10 px-3 py-2 rounded-md border border-foreground/20 bg-background text-foreground focus:outline-none focus:border-foreground/50"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="time" className="text-sm font-medium text-foreground">Time</label>
|
||||
<input
|
||||
id="time"
|
||||
type="time"
|
||||
required
|
||||
className="w-full h-10 px-3 py-2 rounded-md border border-foreground/20 bg-background text-foreground focus:outline-none focus:border-foreground/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="guests" className="text-sm font-medium text-foreground">Number of Guests</label>
|
||||
<select
|
||||
id="guests"
|
||||
className="w-full h-10 px-3 py-2 rounded-md border border-foreground/20 bg-background text-foreground focus:outline-none focus:border-foreground/50"
|
||||
required
|
||||
defaultValue="1"
|
||||
>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<button type="submit" className="primary-button w-full py-3 rounded-md font-medium">
|
||||
Confirm Booking
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,23 +1,187 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
import React, { useState } from 'react';
|
||||
import { MapPin, Phone, MessageCircle } from 'lucide-react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Label from '@/components/ui/Label';
|
||||
import Textarea from '@/components/ui/Textarea';
|
||||
import Card from '@/components/ui/Card';
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
export default function ContactSection() {
|
||||
const [orderName, setOrderName] = useState('');
|
||||
const [orderDrink, setOrderDrink] = useState('');
|
||||
|
||||
const handleOrderSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
alert(`Order placed for ${orderName}: ${orderDrink}`);
|
||||
};
|
||||
|
||||
const handleBookingSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
alert('Table booked successfully!');
|
||||
};
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Visit Us"
|
||||
text="Join us at Lithos and experience the difference today."
|
||||
primaryButton={{
|
||||
text: "Get Directions", href: "#footer"}}
|
||||
secondaryButton={{
|
||||
text: "Call Now", href: "tel:5550123"}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
<section id="contact" data-webild-section="contact" className="relative w-full py-24 bg-background">
|
||||
<div className="w-content-width mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Visit & Order</h2>
|
||||
<p className="text-lg text-accent max-w-2xl mx-auto">
|
||||
Find us in Sana'a, order your favorite drinks ahead of time, or book a quiet table for your next meeting.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Contact Info & Map */}
|
||||
<Card className="p-8 flex flex-col gap-6">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-foreground mb-6">Contact Us</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin className="w-5 h-5 text-accent mt-1" />
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Location</p>
|
||||
<p className="text-accent">Sana'a, Yemen</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Phone className="w-5 h-5 text-accent mt-1" />
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Phone</p>
|
||||
<a href="tel:+967730725728" className="text-accent hover:text-foreground transition-colors">
|
||||
+967 730725728
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 mt-2">
|
||||
<Button
|
||||
text="Call Now"
|
||||
href="tel:+967730725728"
|
||||
variant="secondary"
|
||||
className="w-full justify-center"
|
||||
/>
|
||||
<a
|
||||
href="https://wa.me/967730725728"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 w-full h-12 px-6 rounded-md font-medium transition-colors bg-[#25D366] hover:bg-[#128C7E] text-white"
|
||||
>
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
WhatsApp Ordering
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto pt-6 rounded-lg overflow-hidden h-48 relative">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d123115.34027786435!2d44.12766324024888!3d15.35010619717163!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1603db129e928231%3A0x101037599292820!2sSana'a%2C%20Yemen!5e0!3m2!1sen!2sus!4v1700000000000!5m2!1sen!2sus"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen={false}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
className="absolute inset-0"
|
||||
></iframe>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Order Ahead Form */}
|
||||
<Card className="p-8">
|
||||
<h3 className="text-2xl font-bold text-foreground mb-2">Order Ahead</h3>
|
||||
<p className="text-accent mb-6">Skip the line and pick up your favorites.</p>
|
||||
|
||||
<form onSubmit={handleOrderSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Your Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder="Enter your name"
|
||||
value={orderName}
|
||||
onChange={(e) => setOrderName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="drink">Select Drink</Label>
|
||||
<select
|
||||
id="drink"
|
||||
className="w-full h-10 px-3 py-2 rounded-md border border-input bg-background text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-foreground"
|
||||
value={orderDrink}
|
||||
onChange={(e) => setOrderDrink(e.target.value)}
|
||||
required
|
||||
>
|
||||
<option value="" disabled>Choose a drink...</option>
|
||||
<option value="flat-white">Flat White</option>
|
||||
<option value="v60">V60 Pour Over</option>
|
||||
<option value="cortado">Cortado</option>
|
||||
<option value="matcha">Matcha Latte</option>
|
||||
<option value="cold-brew">Cold Brew</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="notes">Special Instructions</Label>
|
||||
<Textarea id="notes" placeholder="Oat milk, extra hot, etc." rows={3} />
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<Button text="Submit Order" variant="primary" className="w-full justify-center" />
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
{/* Table Booking Widget */}
|
||||
<Card className="p-8">
|
||||
<h3 className="text-2xl font-bold text-foreground mb-2">Book a Table</h3>
|
||||
<p className="text-accent mb-6">Reserve a quiet spot for studying or meetings.</p>
|
||||
|
||||
<form onSubmit={handleBookingSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="booking-name">Name</Label>
|
||||
<Input id="booking-name" placeholder="Enter your name" required />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="date">Date</Label>
|
||||
<div className="relative">
|
||||
<Input id="date" type="date" required className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="time">Time</Label>
|
||||
<div className="relative">
|
||||
<Input id="time" type="time" required className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="guests">Number of Guests</Label>
|
||||
<select
|
||||
id="guests"
|
||||
className="w-full h-10 px-3 py-2 rounded-md border border-input bg-background text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-foreground"
|
||||
required
|
||||
defaultValue="1"
|
||||
>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<Button text="Confirm Booking" variant="primary" className="w-full justify-center" />
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,18 +10,11 @@ export default function FaqSection(): React.JSX.Element {
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSimple
|
||||
tag="Support"
|
||||
title="Common Inquiries"
|
||||
description="Answers to your burning coffee questions."
|
||||
items={[
|
||||
{
|
||||
question: "Do you offer plant-based milks?", answer: "Yes, we offer oat, almond, and soy alternatives."},
|
||||
{
|
||||
question: "Can I work from your cafe?", answer: "Absolutely, our space is designed for comfort and focused work."},
|
||||
{
|
||||
question: "Do you host brewing workshops?", answer: "Yes, subscribe to our newsletter for event announcements."},
|
||||
]}
|
||||
/>
|
||||
tag="Support"
|
||||
title="Common Inquiries"
|
||||
description="Answers to your burning coffee questions."
|
||||
items={[{"answer":"We roast our beans weekly to ensure maximum freshness and flavor.","question":"When are your beans roasted?"},{"answer":"Yes, we offer fast, complimentary WiFi for all our guests.","question":"Is there WiFi available?"},{"answer":"Yes, we offer oat, almond, and soy alternatives.","question":"Do you offer plant-based milks?"}]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user