diff --git a/src/app/page.tsx b/src/app/page.tsx
index 94a5728..8808aea 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,14 +1,10 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
-import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';
-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 { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import { Leaf, Zap, Star, Heart, MapPin } from 'lucide-react';
 
 export default function CoffeePage() {
@@ -26,299 +22,399 @@ export default function CoffeePage() {
       headingFontWeight="medium"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleMinimal
-          brandName="Gloria"
-          button={{
-            text: "Book a Table",
-            href: "#contact"
-          }}
-        />
+        <nav className="sticky top-0 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+          <div className="container mx-auto px-4">
+            <div className="flex h-16 items-center justify-between">
+              <div className="flex items-center space-x-4">
+                <h1 className="text-xl font-bold">Gloria</h1>
+              </div>
+              <Button variant="default" asChild>
+                <a href="#contact">Book a Table</a>
+              </Button>
+            </div>
+          </div>
+        </nav>
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardMetrics
-          title="Welcome to Gloria Coffee"
-          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."
-          tag="Specialty Coffee House"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766573457718-zh216nxd.jpg"
-          imageAlt="Gloria Coffee House"
-          frameStyle="card"
-          metricsLabel="Trusted by coffee lovers and professionals worldwide"
-          metrics={[
-            {
-              id: "1",
-              value: "15+",
-              label: "Years of Excellence"
-            },
-            {
-              id: "2",
-              value: "1000+",
-              label: "Happy Customers Daily"
-            },
-            {
-              id: "3",
-              value: "50+",
-              label: "Premium Coffee Blends"
-            }
-          ]}
-          buttons={[
-            {
-              text: "Explore Menu",
-              href: "#products"
-            },
-            {
-              text: "Visit Us",
-              href: "#contact"
-            }
-          ]}
-        />
+        <section className="py-24 px-4">
+          <div className="container mx-auto">
+            <div className="grid lg:grid-cols-2 gap-12 items-center">
+              <div className="space-y-8">
+                <Badge variant="secondary">Specialty Coffee House</Badge>
+                <h1 className="text-5xl font-bold leading-tight">Welcome to Gloria Coffee</h1>
+                <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>
+                <div className="flex gap-4">
+                  <Button size="lg" asChild>
+                    <a href="#products">Explore Menu</a>
+                  </Button>
+                  <Button size="lg" variant="outline" asChild>
+                    <a href="#contact">Visit Us</a>
+                  </Button>
+                </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 id="about" data-section="about">
-        <SplitAbout
-          title="Our Story"
-          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."
-          imagePosition="right"
-          textboxLayout="default"
-          useInvertedBackground="noInvert"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766504475843-rx4nokgi.jpg"
-          imageAlt="Gloria Coffee Interior"
-          bulletPoints={[
-            {
-              title: "Ethically Sourced",
-              description: "We partner directly with sustainable coffee farms around the world",
-              icon: Leaf
-            },
-            {
-              title: "Expert Baristas",
-              description: "Our trained professionals craft each drink with precision and care",
-              icon: Zap
-            },
-            {
-              title: "Premium Quality",
-              description: "Only the finest beans and ingredients make it to your cup",
-              icon: Star
-            },
-            {
-              title: "Community Focus",
-              description: "More than coffee - we're a gathering place for meaningful moments",
-              icon: Heart
-            }
-          ]}
-        />
+        <section className="py-24 px-4">
+          <div className="container mx-auto">
+            <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 id="features" data-section="features">
-        <FeatureCardFifteen
-          title="Our Specialty Drinks"
-          description="Handcrafted beverages that elevate your coffee experience"
-          tag="Signature Selection"
-          features={[
-            {
-              id: "1",
-              title: "Caramel Macchiato",
-              description: "Espresso with steamed milk and signature caramel drizzle",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414392169-w4l2sncs.jpg",
-              imageAlt: "Caramel Macchiato"
-            },
-            {
-              id: "2",
-              title: "Single Origin Espresso",
-              description: "Pure, bold, and perfectly extracted from premium beans",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414395178-77w1rchc.jpg",
-              imageAlt: "Single Origin Espresso"
-            },
-            {
-              id: "3",
-              title: "Iced Vanilla Latte",
-              description: "Smooth, refreshing, and perfect for warm days",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414393098-5j3dbjps.jpg",
-              imageAlt: "Iced Vanilla Latte"
-            }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground="noInvert"
-        />
+        <section className="py-24 px-4">
+          <div className="container mx-auto">
+            <div className="text-center mb-16">
+              <Badge variant="secondary" className="mb-4">Signature Selection</Badge>
+              <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>
+            </div>
+            <div className="grid md:grid-cols-3 gap-8">
+              <Card className="overflow-hidden">
+                <img
+                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414392169-w4l2sncs.jpg"
+                  alt="Caramel Macchiato"
+                  className="w-full h-48 object-cover"
+                />
+                <div className="p-6">
+                  <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>
+              </Card>
+              <Card className="overflow-hidden">
+                <img
+                  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"
+                />
+                <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 id="products" data-section="products">
-        <ProductCardSeven
-          title="Featured Menu Items"
-          description="Discover our most loved offerings"
-          tag="Must Try"
-          products={[
-            {
-              id: "1",
-              name: "Morning Croissant",
-              price: "$5.99",
-              rating: 4.8,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766573458620-djq2znw8.jpg",
-              imageAlt: "Butter Croissant"
-            },
-            {
-              id: "2",
-              name: "Caprese Sandwich",
-              price: "$9.99",
-              rating: 4.9,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414396263-ecaeakat.jpg",
-              imageAlt: "Fresh Caprese Sandwich"
-            },
-            {
-              id: "3",
-              name: "Chocolate Cake",
-              price: "$6.99",
-              rating: 4.7,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766573460458-6fck1vod.jpg",
-              imageAlt: "Rich Chocolate Cake"
-            }
-          ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground="noInvert"
-          carouselMode="buttons"
-        />
+        <section className="py-24 px-4">
+          <div className="container mx-auto">
+            <div className="text-center mb-16">
+              <Badge variant="secondary" className="mb-4">Must Try</Badge>
+              <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>
+            </div>
+            <div className="grid md:grid-cols-3 gap-8">
+              <Card className="overflow-hidden">
+                <img
+                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766573458620-djq2znw8.jpg"
+                  alt="Butter Croissant"
+                  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">Morning Croissant</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.8</span>
+                    </div>
+                  </div>
+                  <div className="text-2xl font-bold text-primary">$5.99</div>
+                </div>
+              </Card>
+              <Card className="overflow-hidden">
+                <img
+                  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"
+                />
+                <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 id="testimonials" data-section="testimonials">
-        <TestimonialCardNine
-          title="What Our Customers Say"
-          description="Join thousands who've made Gloria their favorite coffeehouse"
-          textboxLayout="default"
-          useInvertedBackground="noInvert"
-          testimonials={[
-            {
-              id: "1",
-              quote: "The best espresso I've had outside of Italy. Every barista knows how to perfect each drink.",
-              name: "Maria Rodriguez",
-              role: "Regular Customer",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766679215769-8spgigse.jpg",
-              imageAlt: "Maria Rodriguez"
-            },
-            {
-              id: "2",
-              quote: "Gloria is my creative sanctuary. Great coffee, peaceful ambiance, and amazing staff.",
-              name: "James Chen",
-              role: "Freelancer",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766508653705-qp2xy5s6.jpg",
-              imageAlt: "James Chen"
-            },
-            {
-              id: "3",
-              quote: "I bring all my clients here for meetings. The atmosphere and quality coffee make the perfect impression.",
-              name: "Sarah Thompson",
-              role: "Business Owner",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766679217178-y1zjo42n.jpg",
-              imageAlt: "Sarah Thompson"
-            },
-            {
-              id: "4",
-              quote: "The team remembers my order and always greets me with a smile. That's customer service done right.",
-              name: "Michael Park",
-              role: "Morning Regular",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766679218140-bhsns38m.jpg",
-              imageAlt: "Michael Park"
-            }
-          ]}
-        />
+        <section className="py-24 px-4">
+          <div className="container mx-auto">
+            <div className="text-center mb-16">
+              <h2 className="text-4xl font-bold mb-4">What Our Customers Say</h2>
+              <p className="text-xl text-muted-foreground max-w-2xl mx-auto">Join thousands who've made Gloria their favorite coffeehouse</p>
+            </div>
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+              <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-1766679215769-8spgigse.jpg" alt="Maria Rodriguez" />
+                    <AvatarFallback>MR</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <div className="font-semibold">Maria Rodriguez</div>
+                    <div className="text-sm text-muted-foreground">Regular Customer</div>
+                  </div>
+                </div>
+                <p className="text-muted-foreground">"The best espresso I've had outside of Italy. Every barista knows how to perfect each drink."</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-1766508653705-qp2xy5s6.jpg" alt="James Chen" />
+                    <AvatarFallback>JC</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <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 id="contact" data-section="contact">
-        <ContactFaq
-          ctaTitle="Visit Gloria Coffee"
-          ctaDescription="Join us for your next coffee break. We're open seven days a week."
-          ctaButton={{
-            text: "Get Directions",
-            href: "https://maps.google.com"
-          }}
-          ctaIcon={MapPin}
-          useInvertedBackground="noInvert"
-          animationType="slide-up"
-          accordionAnimationType="smooth"
-          showCard={true}
-          faqs={[
-            {
-              id: "1",
-              title: "What are your opening hours?",
-              content: "Monday - Friday: 6:00 AM - 8:00 PM. Saturday - Sunday: 8:00 AM - 9:00 PM. We're closed on major holidays."
-            },
-            {
-              id: "2",
-              title: "Do you offer WiFi?",
-              content: "Yes, free WiFi is available to all customers. Password is displayed at the counter."
-            },
-            {
-              id: "3",
-              title: "Can I reserve a table?",
-              content: "For groups of 6 or more, we recommend calling ahead at (555) 123-4567 to reserve seating."
-            },
-            {
-              id: "4",
-              title: "Do you have vegan options?",
-              content: "Absolutely! We offer plant-based milk alternatives and vegan pastries. Ask our baristas for recommendations."
-            }
-          ]}
-        />
+        <section className="py-24 px-4">
+          <div className="container mx-auto">
+            <div className="grid lg:grid-cols-2 gap-12">
+              <div className="space-y-8">
+                <div className="flex items-center gap-3 mb-4">
+                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+                    <MapPin className="w-6 h-6 text-primary" />
+                  </div>
+                  <div>
+                    <h2 className="text-3xl font-bold">Visit Gloria Coffee</h2>
+                  </div>
+                </div>
+                <p className="text-lg text-muted-foreground">Join us for your next coffee break. We're open seven days a week.</p>
+                <Button size="lg" asChild>
+                  <a href="https://maps.google.com">Get Directions</a>
+                </Button>
+              </div>
+              <Card className="p-6">
+                <div className="space-y-6">
+                  <div>
+                    <h3 className="font-semibold mb-3">What are your opening hours?</h3>
+                    <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 id="footer" data-section="footer">
-        <FooterMedia
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766565658398-rzdk67xj.jpg"
-          imageAlt="Premium Coffee Beans"
-          logoText="Gloria"
-          copyrightText="© 2025 Gloria Coffee. All rights reserved."
-          columns={[
-            {
-              title: "Hours",
-              items: [
-                {
-                  label: "Monday - Friday: 6 AM - 8 PM"
-                },
-                {
-                  label: "Saturday - Sunday: 8 AM - 9 PM"
-                },
-                {
-                  label: "Contact: (555) 123-4567"
-                }
-              ]
-            },
-            {
-              title: "Location",
-              items: [
-                {
-                  label: "123 Coffee Street",
-                  href: "https://maps.google.com"
-                },
-                {
-                  label: "Downtown District",
-                  href: "https://maps.google.com"
-                },
-                {
-                  label: "Get Directions",
-                  href: "https://maps.google.com"
-                }
-              ]
-            },
-            {
-              title: "Follow Us",
-              items: [
-                {
-                  label: "Instagram",
-                  href: "https://instagram.com"
-                },
-                {
-                  label: "Facebook",
-                  href: "https://facebook.com"
-                },
-                {
-                  label: "Contact Us",
-                  href: "#contact"
-                }
-              ]
-            }
-          ]}
-        />
+        <footer className="bg-card py-16">
+          <div className="container mx-auto px-4">
+            <div className="grid lg:grid-cols-2 gap-12 mb-12">
+              <div className="space-y-6">
+                <img
+                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766565658398-rzdk67xj.jpg"
+                  alt="Premium Coffee Beans"
+                  className="w-full h-64 object-cover rounded-lg"
+                />
+              </div>
+              <div className="grid md:grid-cols-3 gap-8">
+                <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>
+                    <div>Saturday - Sunday: 8 AM - 9 PM</div>
+                    <div>Contact: (555) 123-4567</div>
+                  </div>
+                </div>
+                <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>
+                    <a href="https://maps.google.com" className="block hover:text-primary">Downtown District</a>
+                    <a href="https://maps.google.com" className="block hover:text-primary">Get Directions</a>
+                  </div>
+                </div>
+                <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>
+                    <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>
     </ThemeProvider>
   );