Merge version_3 into main

Merge version_3 into main
This commit was merged in pull request #4.
This commit is contained in:
2025-12-25 16:24:05 +00:00

View File

@@ -1,11 +1,15 @@
"use client"; "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Card } from "@/components/ui/card"; import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import { Button } from "@/components/ui/button"; import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
import { Badge } from "@/components/ui/badge"; import SplitAbout from '@/components/sections/about/SplitAbout';
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"; import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';
import { Leaf, Zap, Star, Heart, MapPin } from 'lucide-react'; import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Coffee, Leaf, Zap, Star, Heart } from 'lucide-react';
export default function CoffeePage() { export default function CoffeePage() {
return ( return (
@@ -22,399 +26,198 @@ export default function CoffeePage() {
headingFontWeight="medium" headingFontWeight="medium"
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<nav className="sticky top-0 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> <NavbarStyleMinimal
<div className="container mx-auto px-4"> logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766573457718-zh216nxd.jpg"
<div className="flex h-16 items-center justify-between"> links={[
<div className="flex items-center space-x-4"> { label: "Menu", href: "features" },
<h1 className="text-xl font-bold">Gloria</h1> { label: "About", href: "about" },
</div> { label: "Products", href: "products" },
<Button variant="default" asChild> { label: "Contact", href: "contact" }
<a href="#contact">Book a Table</a> ]}
</Button> cta="Book a Table"
</div> ctaLink="contact"
</div> />
</nav>
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<section className="py-24 px-4"> <HeroBillboardMetrics
<div className="container mx-auto"> title="Welcome to Gloria Coffee"
<div className="grid lg:grid-cols-2 gap-12 items-center"> description="Experience the finest specialty coffee in a warm, inviting atmosphere. From our carefully sourced beans to expertly crafted beverages, every cup tells a story."
<div className="space-y-8"> primaryCta="Explore Menu"
<Badge variant="secondary">Specialty Coffee House</Badge> primaryCtaLink="features"
<h1 className="text-5xl font-bold leading-tight">Welcome to Gloria Coffee</h1> secondaryCta="Visit Us"
<p className="text-xl text-muted-foreground">Experience the finest specialty coffee in a warm, inviting atmosphere. From our carefully sourced beans to expertly crafted beverages, every cup tells a story.</p> secondaryCtaLink="contact"
<div className="flex gap-4"> metrics={[
<Button size="lg" asChild> { label: "Years of Excellence", value: "15+" },
<a href="#products">Explore Menu</a> { label: "Happy Customers Daily", value: "1000+" },
</Button> { label: "Premium Coffee Blends", value: "50+" }
<Button size="lg" variant="outline" asChild> ]}
<a href="#contact">Visit Us</a> image="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766573457718-zh216nxd.jpg"
</Button> badge="Specialty Coffee House"
</div> />
<div className="grid grid-cols-3 gap-8 pt-8">
<div className="text-center">
<div className="text-3xl font-bold">15+</div>
<div className="text-sm text-muted-foreground">Years of Excellence</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold">1000+</div>
<div className="text-sm text-muted-foreground">Happy Customers Daily</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold">50+</div>
<div className="text-sm text-muted-foreground">Premium Coffee Blends</div>
</div>
</div>
</div>
<div className="relative">
<Card className="overflow-hidden">
<img
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766573457718-zh216nxd.jpg"
alt="Gloria Coffee House"
className="w-full h-96 object-cover"
/>
</Card>
</div>
</div>
</div>
</section>
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<section className="py-24 px-4"> <SplitAbout
<div className="container mx-auto"> description="Gloria Coffee was founded with a simple passion: to bring the world's finest coffees to your cup. We believe every sip should be a moment of joy and connection. We partner directly with sustainable coffee farms, employ expert baristas who craft each drink with precision, maintain premium quality standards, and focus on being a community gathering place for meaningful moments."
<div className="grid lg:grid-cols-2 gap-12 items-center"> />
<div className="space-y-8">
<h2 className="text-4xl font-bold">Our Story</h2>
<p className="text-lg text-muted-foreground">Gloria Coffee was founded with a simple passion: to bring the world's finest coffees to your cup. We believe every sip should be a moment of joy and connection.</p>
<div className="space-y-6">
<div className="flex gap-4">
<div className="flex-shrink-0">
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
<Leaf className="w-6 h-6 text-primary" />
</div>
</div>
<div>
<h3 className="font-semibold mb-2">Ethically Sourced</h3>
<p className="text-muted-foreground">We partner directly with sustainable coffee farms around the world</p>
</div>
</div>
<div className="flex gap-4">
<div className="flex-shrink-0">
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
<Zap className="w-6 h-6 text-primary" />
</div>
</div>
<div>
<h3 className="font-semibold mb-2">Expert Baristas</h3>
<p className="text-muted-foreground">Our trained professionals craft each drink with precision and care</p>
</div>
</div>
<div className="flex gap-4">
<div className="flex-shrink-0">
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
<Star className="w-6 h-6 text-primary" />
</div>
</div>
<div>
<h3 className="font-semibold mb-2">Premium Quality</h3>
<p className="text-muted-foreground">Only the finest beans and ingredients make it to your cup</p>
</div>
</div>
<div className="flex gap-4">
<div className="flex-shrink-0">
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
<Heart className="w-6 h-6 text-primary" />
</div>
</div>
<div>
<h3 className="font-semibold mb-2">Community Focus</h3>
<p className="text-muted-foreground">More than coffee - we're a gathering place for meaningful moments</p>
</div>
</div>
</div>
</div>
<div className="relative">
<Card className="overflow-hidden">
<img
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766504475843-rx4nokgi.jpg"
alt="Gloria Coffee Interior"
className="w-full h-96 object-cover"
/>
</Card>
</div>
</div>
</div>
</section>
</div> </div>
<div id="features" data-section="features"> <div id="features" data-section="features">
<section className="py-24 px-4"> <FeatureCardFifteen
<div className="container mx-auto"> title="Our Specialty Drinks"
<div className="text-center mb-16"> description="Handcrafted beverages that elevate your coffee experience"
<Badge variant="secondary" className="mb-4">Signature Selection</Badge> features={[
<h2 className="text-4xl font-bold mb-4">Our Specialty Drinks</h2> {
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">Handcrafted beverages that elevate your coffee experience</p> title: "Caramel Macchiato",
</div> description: "Espresso with steamed milk and signature caramel drizzle",
<div className="grid md:grid-cols-3 gap-8"> image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414392169-w4l2sncs.jpg",
<Card className="overflow-hidden"> icon: Coffee
<img },
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414392169-w4l2sncs.jpg" {
alt="Caramel Macchiato" title: "Single Origin Espresso",
className="w-full h-48 object-cover" description: "Pure, bold, and perfectly extracted from premium beans",
/> image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414395178-77w1rchc.jpg",
<div className="p-6"> icon: Star
<h3 className="font-semibold text-lg mb-2">Caramel Macchiato</h3> },
<p className="text-muted-foreground">Espresso with steamed milk and signature caramel drizzle</p> {
</div> title: "Iced Vanilla Latte",
</Card> description: "Smooth, refreshing, and perfect for warm days",
<Card className="overflow-hidden"> image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414393098-5j3dbjps.jpg",
<img icon: Heart
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414395178-77w1rchc.jpg" }
alt="Single Origin Espresso" ]}
className="w-full h-48 object-cover" badge="Signature Selection"
/> />
<div className="p-6">
<h3 className="font-semibold text-lg mb-2">Single Origin Espresso</h3>
<p className="text-muted-foreground">Pure, bold, and perfectly extracted from premium beans</p>
</div>
</Card>
<Card className="overflow-hidden">
<img
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414393098-5j3dbjps.jpg"
alt="Iced Vanilla Latte"
className="w-full h-48 object-cover"
/>
<div className="p-6">
<h3 className="font-semibold text-lg mb-2">Iced Vanilla Latte</h3>
<p className="text-muted-foreground">Smooth, refreshing, and perfect for warm days</p>
</div>
</Card>
</div>
</div>
</section>
</div> </div>
<div id="products" data-section="products"> <div id="products" data-section="products">
<section className="py-24 px-4"> <ProductCardSeven
<div className="container mx-auto"> title="Featured Menu Items"
<div className="text-center mb-16"> description="Discover our most loved offerings"
<Badge variant="secondary" className="mb-4">Must Try</Badge> products={[
<h2 className="text-4xl font-bold mb-4">Featured Menu Items</h2> {
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">Discover our most loved offerings</p> name: "Morning Croissant",
</div> price: "$5.99",
<div className="grid md:grid-cols-3 gap-8"> image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766573458620-djq2znw8.jpg",
<Card className="overflow-hidden"> rating: 4.8,
<img ctaText: "Order Now",
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766573458620-djq2znw8.jpg" ctaLink: "contact"
alt="Butter Croissant" },
className="w-full h-48 object-cover" {
/> name: "Caprese Sandwich",
<div className="p-6"> price: "$9.99",
<div className="flex items-center justify-between mb-2"> image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414396263-ecaeakat.jpg",
<h3 className="font-semibold text-lg">Morning Croissant</h3> rating: 4.9,
<div className="flex items-center gap-1"> ctaText: "Order Now",
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400" /> ctaLink: "contact"
<span className="text-sm">4.8</span> },
</div> {
</div> name: "Chocolate Cake",
<div className="text-2xl font-bold text-primary">$5.99</div> price: "$6.99",
</div> image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766573460458-6fck1vod.jpg",
</Card> rating: 4.7,
<Card className="overflow-hidden"> ctaText: "Order Now",
<img ctaLink: "contact"
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414396263-ecaeakat.jpg" }
alt="Fresh Caprese Sandwich" ]}
className="w-full h-48 object-cover" badge="Must Try"
/> />
<div className="p-6">
<div className="flex items-center justify-between mb-2">
<h3 className="font-semibold text-lg">Caprese Sandwich</h3>
<div className="flex items-center gap-1">
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
<span className="text-sm">4.9</span>
</div>
</div>
<div className="text-2xl font-bold text-primary">$9.99</div>
</div>
</Card>
<Card className="overflow-hidden">
<img
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766573460458-6fck1vod.jpg"
alt="Rich Chocolate Cake"
className="w-full h-48 object-cover"
/>
<div className="p-6">
<div className="flex items-center justify-between mb-2">
<h3 className="font-semibold text-lg">Chocolate Cake</h3>
<div className="flex items-center gap-1">
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
<span className="text-sm">4.7</span>
</div>
</div>
<div className="text-2xl font-bold text-primary">$6.99</div>
</div>
</Card>
</div>
</div>
</section>
</div> </div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<section className="py-24 px-4"> <TestimonialCardNine
<div className="container mx-auto"> title="What Our Customers Say"
<div className="text-center mb-16"> description="Join thousands who've made Gloria their favorite coffeehouse"
<h2 className="text-4xl font-bold mb-4">What Our Customers Say</h2> testimonials={[
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">Join thousands who've made Gloria their favorite coffeehouse</p> {
</div> quote: "The best espresso I've had outside of Italy. Every barista knows how to perfect each drink.",
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> author: "Maria Rodriguez",
<Card className="p-6"> role: "Regular Customer",
<div className="flex items-center gap-3 mb-4"> avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766679215769-8spgigse.jpg"
<Avatar> },
<AvatarImage src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766679215769-8spgigse.jpg" alt="Maria Rodriguez" /> {
<AvatarFallback>MR</AvatarFallback> quote: "Gloria is my creative sanctuary. Great coffee, peaceful ambiance, and amazing staff.",
</Avatar> author: "James Chen",
<div> role: "Freelancer",
<div className="font-semibold">Maria Rodriguez</div> avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508653705-qp2xy5s6.jpg"
<div className="text-sm text-muted-foreground">Regular Customer</div> },
</div> {
</div> quote: "I bring all my clients here for meetings. The atmosphere and quality coffee make the perfect impression.",
<p className="text-muted-foreground">"The best espresso I've had outside of Italy. Every barista knows how to perfect each drink."</p> author: "Sarah Thompson",
</Card> role: "Business Owner",
<Card className="p-6"> avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766679217178-y1zjo42n.jpg"
<div className="flex items-center gap-3 mb-4"> },
<Avatar> {
<AvatarImage src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508653705-qp2xy5s6.jpg" alt="James Chen" /> quote: "The team remembers my order and always greets me with a smile. That's customer service done right.",
<AvatarFallback>JC</AvatarFallback> author: "Michael Park",
</Avatar> role: "Morning Regular",
<div> avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766679218140-bhsns38m.jpg"
<div className="font-semibold">James Chen</div> }
<div className="text-sm text-muted-foreground">Freelancer</div> ]}
</div> />
</div>
<p className="text-muted-foreground">"Gloria is my creative sanctuary. Great coffee, peaceful ambiance, and amazing staff."</p>
</Card>
<Card className="p-6">
<div className="flex items-center gap-3 mb-4">
<Avatar>
<AvatarImage src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766679217178-y1zjo42n.jpg" alt="Sarah Thompson" />
<AvatarFallback>ST</AvatarFallback>
</Avatar>
<div>
<div className="font-semibold">Sarah Thompson</div>
<div className="text-sm text-muted-foreground">Business Owner</div>
</div>
</div>
<p className="text-muted-foreground">"I bring all my clients here for meetings. The atmosphere and quality coffee make the perfect impression."</p>
</Card>
<Card className="p-6">
<div className="flex items-center gap-3 mb-4">
<Avatar>
<AvatarImage src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766679218140-bhsns38m.jpg" alt="Michael Park" />
<AvatarFallback>MP</AvatarFallback>
</Avatar>
<div>
<div className="font-semibold">Michael Park</div>
<div className="text-sm text-muted-foreground">Morning Regular</div>
</div>
</div>
<p className="text-muted-foreground">"The team remembers my order and always greets me with a smile. That's customer service done right."</p>
</Card>
</div>
</div>
</section>
</div> </div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<section className="py-24 px-4"> <ContactFaq
<div className="container mx-auto"> title="Visit Gloria Coffee"
<div className="grid lg:grid-cols-2 gap-12"> description="Join us for your next coffee break. We're open seven days a week."
<div className="space-y-8"> ctaText="Get Directions"
<div className="flex items-center gap-3 mb-4"> ctaLink="https://maps.google.com"
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center"> faqs={[
<MapPin className="w-6 h-6 text-primary" /> {
</div> question: "What are your opening hours?",
<div> answer: "Monday - Friday: 6:00 AM - 8:00 PM. Saturday - Sunday: 8:00 AM - 9:00 PM. We're closed on major holidays."
<h2 className="text-3xl font-bold">Visit Gloria Coffee</h2> },
</div> {
</div> question: "Do you offer WiFi?",
<p className="text-lg text-muted-foreground">Join us for your next coffee break. We're open seven days a week.</p> answer: "Yes, free WiFi is available to all customers. Password is displayed at the counter."
<Button size="lg" asChild> },
<a href="https://maps.google.com">Get Directions</a> {
</Button> question: "Can I reserve a table?",
</div> answer: "For groups of 6 or more, we recommend calling ahead at (555) 123-4567 to reserve seating."
<Card className="p-6"> },
<div className="space-y-6"> {
<div> question: "Do you have vegan options?",
<h3 className="font-semibold mb-3">What are your opening hours?</h3> answer: "Absolutely! We offer plant-based milk alternatives and vegan pastries. Ask our baristas for recommendations."
<p className="text-muted-foreground">Monday - Friday: 6:00 AM - 8:00 PM. Saturday - Sunday: 8:00 AM - 9:00 PM. We're closed on major holidays.</p> }
</div> ]}
<div> />
<h3 className="font-semibold mb-3">Do you offer WiFi?</h3>
<p className="text-muted-foreground">Yes, free WiFi is available to all customers. Password is displayed at the counter.</p>
</div>
<div>
<h3 className="font-semibold mb-3">Can I reserve a table?</h3>
<p className="text-muted-foreground">For groups of 6 or more, we recommend calling ahead at (555) 123-4567 to reserve seating.</p>
</div>
<div>
<h3 className="font-semibold mb-3">Do you have vegan options?</h3>
<p className="text-muted-foreground">Absolutely! We offer plant-based milk alternatives and vegan pastries. Ask our baristas for recommendations.</p>
</div>
</div>
</Card>
</div>
</div>
</section>
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<footer className="bg-card py-16"> <FooterMedia
<div className="container mx-auto px-4"> logoText="Gloria"
<div className="grid lg:grid-cols-2 gap-12 mb-12"> description="Premium specialty coffee house serving the finest beverages since 2010."
<div className="space-y-6"> copyright="© 2025 Gloria Coffee. All rights reserved."
<img links={[
src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766565658398-rzdk67xj.jpg" {
alt="Premium Coffee Beans" title: "Hours",
className="w-full h-64 object-cover rounded-lg" items: [
/> { label: "Monday - Friday: 6 AM - 8 PM", href: "contact" },
</div> { label: "Saturday - Sunday: 8 AM - 9 PM", href: "contact" },
<div className="grid md:grid-cols-3 gap-8"> { label: "Contact: (555) 123-4567", href: "contact" }
<div> ]
<h3 className="font-semibold mb-4">Hours</h3> },
<div className="space-y-2 text-muted-foreground"> {
<div>Monday - Friday: 6 AM - 8 PM</div> title: "Location",
<div>Saturday - Sunday: 8 AM - 9 PM</div> items: [
<div>Contact: (555) 123-4567</div> { label: "123 Coffee Street", href: "https://maps.google.com" },
</div> { label: "Downtown District", href: "https://maps.google.com" },
</div> { label: "Get Directions", href: "https://maps.google.com" }
<div> ]
<h3 className="font-semibold mb-4">Location</h3> },
<div className="space-y-2 text-muted-foreground"> {
<a href="https://maps.google.com" className="block hover:text-primary">123 Coffee Street</a> title: "Follow Us",
<a href="https://maps.google.com" className="block hover:text-primary">Downtown District</a> items: [
<a href="https://maps.google.com" className="block hover:text-primary">Get Directions</a> { label: "Instagram", href: "https://instagram.com" },
</div> { label: "Facebook", href: "https://facebook.com" },
</div> { label: "Contact Us", href: "contact" }
<div> ]
<h3 className="font-semibold mb-4">Follow Us</h3> }
<div className="space-y-2 text-muted-foreground"> ]}
<a href="https://instagram.com" className="block hover:text-primary">Instagram</a> media="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766565658398-rzdk67xj.jpg"
<a href="https://facebook.com" className="block hover:text-primary">Facebook</a> />
<a href="#contact" className="block hover:text-primary">Contact Us</a>
</div>
</div>
</div>
</div>
<div className="border-t pt-8">
<div className="flex items-center justify-between">
<div className="text-xl font-bold">Gloria</div>
<div className="text-muted-foreground">© 2025 Gloria Coffee. All rights reserved.</div>
</div>
</div>
</div>
</footer>
</div> </div>
</ThemeProvider> </ThemeProvider>
); );