Merge version_5_1782370154794 into main

Merge version_5_1782370154794 into main

src/components/Layout.tsx

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

src/pages/HomePage.tsx

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

src/pages/HomePage/sections/Booking.tsx

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

src/pages/HomePage/sections/Contact.tsx

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

src/pages/HomePage/sections/Faq.tsx

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