9 Commits

Author SHA1 Message Date
kudinDmitriyUp
e769151865 Bob AI: Fix styling of booking section forms and buttons 2026-06-25 06:54:44 +00:00
kudinDmitriyUp
0f5b3d9173 Bob AI: Update FAQ and footer with hours and location 2026-06-25 06:51:24 +00:00
0bf1edb8d5 Merge version_4_1782370059791 into main
Merge version_4_1782370059791 into main
2026-06-25 06:48:54 +00:00
7e4471a4c7 Update src/pages/HomePage/sections/Menu.tsx 2026-06-25 06:48:51 +00:00
0564b54b92 Merge version_4_1782370059791 into main
Merge version_4_1782370059791 into main
2026-06-25 06:48:44 +00:00
kudinDmitriyUp
7f9f8ae097 Bob AI: Update the menu section to include 4 new categories (Dessert & Pastries, Croissa 2026-06-25 06:48:41 +00:00
b2bcfdc5bd Merge version_3_1782369682406 into main
Merge version_3_1782369682406 into main
2026-06-25 06:46:46 +00:00
kudinDmitriyUp
a92a48dc84 Bob AI: Update the menu section with the provided bilingual (English/Arabic) items and p 2026-06-25 06:46:43 +00:00
ca71cf51d1 Merge version_2_1782369314842 into main
Merge version_2_1782369314842 into main
2026-06-25 06:38:54 +00:00
6 changed files with 432 additions and 46 deletions

View File

@@ -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={[

View File

@@ -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 />
</>
);
}

View 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&#39;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>
);
}

View File

@@ -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&#39;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>
);
}

View File

@@ -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>
);

View File

@@ -7,30 +7,43 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MenuSection(): React.JSX.Element {
return (
<div id="menu" data-section="menu">
<div id="menu" data-section="menu" className="flex flex-col gap-16 py-12">
<SectionErrorBoundary name="menu">
<FeaturesRevealCardsBento
tag="The Menu"
title="Curated Experiences"
description="From single-origin pours to delicate pastries, every item is selected for quality."
tag="Menu / المنيو"
title="Hot Drinks / مشروبات حارة"
description="Carefully crafted hot beverages to warm your soul."
items={[
{
title: "Signature Espresso", description: "Robust and refined, our signature blend.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-coffee-with-milk-cream_23-2148865608.jpg"},
title: "Ethiopian Drip / قهوة مقطرة إثيوبية", description: "Large: 12 | Small: 9", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/man-pouring-syrup-coffee-mixed-with-milk_140725-7036.jpg?_wi=1"},
{
title: "Cold Brew", description: "Steeped for 24 hours, velvet smooth.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/glasses-with-tasty-coffee-assortment_23-2149514291.jpg"},
title: "Brazilian Drip / قهوة مقطرة برازيلية", description: "Large: 10 | Small: 7", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-coffee-with-milk-cream_23-2148865608.jpg?_wi=1"},
{
title: "Gourmet Pastries", description: "Freshly baked every single morning.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/blue-plate-two-sweet-doughnuts-with-colorful-sprinkles_114579-87208.jpg"},
title: "Americano / أمريكانو", description: "Large: 13 | Small: 10", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/small-business-items-serving-coffee_23-2149458023.jpg?_wi=1"},
{
title: "Flat White", description: "Perfectly steamed, silky texture.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/small-business-items-serving-coffee_23-2149458023.jpg"},
title: "Espresso / إسبريسو", description: "Price: 8", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/glasses-with-tasty-coffee-assortment_23-2149514291.jpg?_wi=1"},
{
title: "Iced Latte", description: "Refreshing and bold caffeine lift.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/refreshing-iced-coffee-glass-with-condensation-ice_84443-83820.jpg"},
title: "Cortado/Piccolo / كورتادو/بيكولو", description: "Price: 10", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-coffee-with-milk-cream_23-2148865608.jpg?_wi=2"},
{
title: "Artisan Danishes", description: "Layers of buttery, flaky perfection.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/strawberry-pie-table_140725-6826.jpg"},
title: "Latte / لاتيه", description: "Large: 13 | Small: 10", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/man-pouring-syrup-coffee-mixed-with-milk_140725-7036.jpg?_wi=2"},
{
title: "Pour Over", description: "Clean flavors, vibrant origin notes.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/man-pouring-syrup-coffee-mixed-with-milk_140725-7036.jpg"},
title: "Cappuccino / كابتشينو", description: "Large: 13 | Small: 10", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/small-business-items-serving-coffee_23-2149458023.jpg?_wi=2"},
]}
/>
<FeaturesRevealCardsBento
tag="Menu / المنيو"
title="Iced Drinks / مشروبات باردة"
description="Refreshing iced beverages to cool you down."
items={[
{
title: "Iced Latte / لاتيه بارد", description: "Large: 15 | Small: 12", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/refreshing-iced-coffee-glass-with-condensation-ice_84443-83820.jpg?_wi=1"},
{
title: "Iced Americano / أمريكانو بارد", description: "Large: 14 | Small: 11", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/refreshing-iced-coffee-glass-with-condensation-ice_84443-83820.jpg?_wi=2"},
{
title: "Cold Brew / كولد برو", description: "Price: 16", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/glasses-with-tasty-coffee-assortment_23-2149514291.jpg?_wi=2"},
]}
/>
</SectionErrorBoundary>
</div>
);
}
}