Bob AI: User wants to fix images in the 'Our Beers' section, but the

Merge version_16_1780412346762 into main

src/pages/HomePage/sections/Beers.tsx

@@ -1,74 +1,85 @@
 import React from 'react';
 import ScrollReveal from '@/components/ui/ScrollReveal';
+import TextAnimation from '@/components/ui/TextAnimation';
+import GridOrCarousel from '@/components/ui/GridOrCarousel';
 import Card from '@/components/ui/Card';
 import Tag from '@/components/ui/Tag';
 
 export default function BeersSection() {
   const beers = [
     {
-      name: "Mountain Peak Pilsner",
+      name: "Mountain Pale Ale",
-      style: "Crisp & Refreshing Pilsner",
+      type: "Pale Ale",
-      description: "Crisp and brilliantly clear, this classic pilsner delivers delicate floral hop aromas over a crackery malt base, finishing with a refreshing, snappy bite.",
+      abv: "5.5%",
-      alt: "Glass of crisp pilsner beer on a wooden table",
+      description: "A crisp and refreshing pale ale with notes of pine and citrus, brewed with local mountain spring water.",
-      abv: "4.8% ABV"
+      alt: "Glass of pale ale craft beer with pine background"
     },
     {
-      name: "Pine Ridge IPA",
+      name: "Cedar Stout",
-      style: "West Coast IPA",
+      type: "Stout",
-      description: "A bold West Coast classic bursting with resinous pine and bright grapefruit zest. Supported by a lean caramel malt backbone for a perfectly bitter, dry finish.",
+      abv: "7.2%",
-      alt: "Pint of hazy IPA beer with a thick head",
+      description: "Rich and complex with deep roasted coffee and dark chocolate flavors, perfect for chilly evenings.",
-      abv: "6.5% ABV"
+      alt: "Pint of dark stout craft beer with roasted coffee beans"
     },
     {
-      name: "Amber Glow Ale",
+      name: "Valley IPA",
-      style: "American Amber Ale",
+      type: "IPA",
-      description: "Deep copper in color, offering rich layers of toasted biscuit and sweet caramel. Balanced by a gentle earthy hop profile for a smooth, highly drinkable experience.",
+      abv: "6.8%",
-      alt: "Glass of amber ale beer with condensation",
+      description: "A hop-forward India Pale Ale bursting with tropical fruit aromas and a smooth, bitter finish.",
-      abv: "5.2% ABV"
+      alt: "Glass of IPA craft beer with tropical fruits"
     },
     {
-      name: "Midnight Stout",
+      name: "Sunset Amber",
-      style: "Oatmeal Stout",
+      type: "Amber Ale",
-      description: "Velvety and pitch-black, featuring decadent notes of dark chocolate, espresso, and roasted barley. A luxurious, full-bodied stout with a remarkably smooth finish.",
+      abv: "5.0%",
-      alt: "Pint of dark stout beer with a creamy tan head",
+      description: "A perfectly balanced amber ale featuring toasted caramel malts and a subtle earthy hop profile.",
-      abv: "7.0% ABV"
+      alt: "Glass of amber ale craft beer on a wooden table"
     }
   ];
 
   return (
-    <section id="beers" className="bg-background">
+    <section id="beers" className="relative bg-background overflow-hidden">
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-primary-cta/5 blur-[120px] rounded-full pointer-events-none -z-10" />
+      
       <div className="max-w-content-width mx-auto px-6">
-        <ScrollReveal variant="slide-up" className="text-center flex flex-col items-center">
+        <div className="text-center">
-          <Tag text="Our Signature Collection" className="mb-6" />
+          <ScrollReveal variant="slide-up">
-          <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">Crafted for Every Palate</h2>
+            <TextAnimation 
-          <p className="text-lg text-muted-foreground max-w-content-width mx-auto">
+              text="Our Beers" 
-            Discover our core lineup of artisanal beers, brewed with passion, precision, and the finest local ingredients.
+              variant="fade-blur" 
-          </p>
+              gradientText={false} 
-        </ScrollReveal>
+              tag="h2" 
+              className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6" 
+            />
+            <p className="text-lg md:text-xl text-muted-foreground max-w-content-width mx-auto">
+              Crafted with passion and precision, our core lineup features something for every palate.
+            </p>
+          </ScrollReveal>
+        </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+        <GridOrCarousel>
           {beers.map((beer, index) => (
             <ScrollReveal key={index} variant="slide-up" delay={index * 0.1}>
-              <Card className="h-full flex flex-col overflow-hidden group border border-border/50">
+              <Card className="h-full flex flex-col overflow-hidden border border-border/50 bg-card hover:-translate-y-2 transition-all duration-300 hover:shadow-xl">
-                <div className="relative h-64 overflow-hidden bg-card">
+                <div className="relative h-72 w-full bg-muted/50">
                   <img 
                     src="" 
                     alt={beer.alt}
-                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
+                    className="w-full h-full object-cover" 
                   />
-                  <div className="absolute top-4 right-4">
+                  <div className="absolute top-4 right-4 flex flex-col gap-2 items-end">
-                    <Tag text={beer.abv} className="bg-background/90 backdrop-blur-sm text-foreground" />
+                    <Tag text={beer.type} className="bg-background/90 backdrop-blur-md border-none shadow-sm" />
+                    <Tag text={`ABV ${beer.abv}`} className="bg-primary-cta text-primary-cta-text border-none shadow-sm" />
                   </div>
                 </div>
-                <div className="p-6 flex flex-col flex-grow">
+                <div className="p-8 flex-grow flex flex-col">
-                  <p className="text-xs font-bold text-accent mb-2 uppercase tracking-widest">{beer.style}</p>
+                  <h3 className="text-2xl font-bold text-foreground mb-3">{beer.name}</h3>
-                  <h3 className="text-xl font-bold text-foreground mb-3">{beer.name}</h3>
+                  <p className="text-muted-foreground flex-grow leading-relaxed">{beer.description}</p>
-                  <p className="text-muted-foreground text-sm flex-grow leading-relaxed">{beer.description}</p>
                 </div>
               </Card>
             </ScrollReveal>
           ))}
-        </div>
+        </GridOrCarousel>
       </div>
     </section>
   );