Merge version_22_1780414314385 into main

Merge version_22_1780414314385 into main

src/pages/HomePage.tsx

@@ -13,6 +13,13 @@ import ContactSection from './HomePage/sections/Contact';
 
 
 
+
+
+
+import EventsSection from './HomePage/sections/Events';{/* webild-stub @2026-06-02T15:24:31.770Z: To make testimonials more impactful, ensure each quote includes an avatar or photo of the reviewer, along with their name and, if possible, their location or a brief title, to build greater trust. */}
+
+{/* webild-stub @2026-06-02T15:14:24.839Z: Introduce a dedicated section for upcoming events, live music, or special releases to encourage repeat visits and community engagement, transforming passive viewers into active participants. */}
+
 {/* webild-stub @2026-06-02T14:34:15.285Z: make badges in hero sections each on in different color */}
 
 {/* webild-stub @2026-06-02T14:28:11.483Z: make badges in hero sections each on in different color */}
@@ -24,6 +31,7 @@ export default function HomePage(): React.JSX.Element {
       <BeersSection />
       <StorySection />
       <TaproomSection />
+      <EventsSection />
       <TestimonialQuoteCardsSection />
       <FaqSimpleSection />
       <ContactSection />

src/pages/HomePage/sections/Beers.tsx

@@ -1,76 +1,86 @@
-"use client";
-import { ImageOrVideo, ScrollReveal, TextAnimation } from '@/components/ui';
-
-const beers = [
-  {
-    name: "Mountain IPA",
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/mountain-ipa.jpg",
-    abv: "6.5%",
-    ibu: "60",
-    description: "A vibrant, hop-forward IPA bursting with notes of pine, citrus, and a hint of tropical fruit. Its crisp bitterness is balanced by a smooth malt backbone, leading to a refreshing finish. Pairs perfectly with spicy tacos, grilled burgers, or sharp cheddar cheese."
-  },
-  {
-    name: "Riverbend Lager",
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/riverbend-lager.jpg",
-    abv: "5.0%",
-    ibu: "20",
-    description: "A clean, crisp, and exceptionally smooth lager with subtle notes of toasted grain and a delicate floral hop aroma. Its light body and refreshing character make it incredibly drinkable. Excellent with light salads, seafood, or classic pub fare like fish and chips."
-  },
-  {
-    name: "Forest Stout",
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/forest-stout.jpg",
-    abv: "7.2%",
-    ibu: "35",
-    description: "A rich and robust stout with deep flavors of roasted coffee, dark chocolate, and a hint of caramel. Its creamy texture and warming finish make it a perfect companion for cooler evenings. Ideal with hearty stews, barbecued ribs, or decadent chocolate desserts."
-  },
-  {
-    name: "Sunset Wheat Ale",
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/sunset-wheat-ale.jpg",
-    abv: "5.2%",
-    ibu: "15",
-    description: "A refreshing and hazy wheat ale with bright notes of orange peel and coriander. Its smooth, effervescent body and subtle sweetness make it perfect for a warm afternoon. Pairs wonderfully with grilled chicken, fruit tarts, or goat cheese salads."
-  },
-  {
-    name: "Trailblazer Pale Ale",
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/trailblazer-pale-ale.jpg",
-    abv: "5.8%",
-    ibu: "40",
-    description: "A classic American Pale Ale with a balanced hop profile, offering aromas of grapefruit and floral notes. Its medium body and crisp finish make it a versatile choice for any occasion. Great with pizza, burgers, or a variety of cheeses."
-  }
-];
+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() {
-  return (
-    <div data-webild-section="beers-section" id="beers" className="relative w-full bg-background">
-      <div className="max-w-content-width mx-auto px-6">
-        <ScrollReveal variant="slide-up" delay={0.1}>
-          <TextAnimation
-            text="Our Craft Beers"
-            tag="h2"
-            variant="slide-up"
-            gradientText
-            className="text-4xl md:text-5xl font-bold text-center"
-          />
-        </ScrollReveal>
-        <ScrollReveal variant="slide-up" delay={0.2}>
-          <p className="mt-4 text-lg text-muted-foreground text-center max-w-content-width mx-auto">
-            Explore our diverse selection of handcrafted beers, brewed with passion and the finest ingredients.
-          </p>
-        </ScrollReveal>
+  const beers = [
+    {
+      name: "Mountain Pale Ale",
+      type: "Pale Ale",
+      abv: "5.5%",
+      description: "A crisp and refreshing pale ale with notes of pine and citrus, brewed with local mountain spring water.",
+      alt: "Glass of pale ale craft beer with pine background"
+    },
+    {
+      name: "Cedar Stout",
+      type: "Stout",
+      abv: "7.2%",
+      description: "Rich and complex with deep roasted coffee and dark chocolate flavors, perfect for chilly evenings.",
+      alt: "Pint of dark stout craft beer with roasted coffee beans"
+    },
+    {
+      name: "Valley IPA",
+      type: "IPA",
+      abv: "6.8%",
+      description: "A hop-forward India Pale Ale bursting with tropical fruit aromas and a smooth, bitter finish.",
+      alt: "Glass of IPA craft beer with tropical fruits"
+    },
+    {
+      name: "Sunset Amber",
+      type: "Amber Ale",
+      abv: "5.0%",
+      description: "A perfectly balanced amber ale featuring toasted caramel malts and a subtle earthy hop profile.",
+      alt: "Glass of amber ale craft beer on a wooden table"
+    }
+  ];
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+  return (
+    <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">
+        <div className="text-center">
+          <ScrollReveal variant="slide-up">
+            <TextAnimation 
+              text="Our Beers" 
+              variant="fade-blur" 
+              gradientText={false} 
+              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>
+
+        <GridOrCarousel>
           {beers.map((beer, index) => (
-            <ScrollReveal key={beer.name} variant="slide-up" delay={0.3 + index * 0.1}>
-              <div className="bg-card p-6 rounded-lg shadow-lg flex flex-col items-center text-center">
-                <ImageOrVideo imageSrc={beer.imageSrc} className="w-32 h-32 object-cover rounded-full mb-4" />
-                <h3 className="text-2xl font-semibold text-foreground">{beer.name}</h3>
-                <p className="text-muted-foreground mt-2">ABV: {beer.abv} | IBU: {beer.ibu}</p>
-                <p className="text-sm text-muted-foreground mt-4 max-w-prose">{beer.description}</p>
-              </div>
+            <ScrollReveal key={index} variant="slide-up" delay={index * 0.1}>
+              <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-72 w-full bg-muted/50">
+                  <img 
+                    src="" 
+                    alt={beer.alt}
+                    className="w-full h-full object-cover" 
+                  />
+                  <div className="absolute top-4 right-4 flex flex-col gap-2 items-end">
+                    <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-8 flex-grow flex flex-col">
+                  <h3 className="text-2xl font-bold text-foreground mb-3">{beer.name}</h3>
+                  <p className="text-muted-foreground flex-grow leading-relaxed">{beer.description}</p>
+                </div>
+              </Card>
             </ScrollReveal>
           ))}
-        </div>
+        </GridOrCarousel>
       </div>
-    </div>
+    </section>
   );
 }

src/pages/HomePage/sections/Events.tsx

@@ -0,0 +1,52 @@
+// Created by create_section tool.
+
+import React from 'react';
+import Tag from '@/components/ui/Tag';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { Calendar, Music, Beer } from 'lucide-react';
+
+export default function EventsSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="events" className="bg-background">
+      <div className="container mx-auto px-4">
+        <div className="text-center">
+          <Tag text="Upcoming Events" className="mb-4" />
+          <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">Join the Community</h2>
+          <p className="text-lg text-muted-foreground max-w-content-width mx-auto">
+            From live music to special beer releases, there's always something happening at Cedar Mountain Brewery.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <Card className="p-6 flex flex-col h-full">
+            <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-6 text-primary">
+              <Music className="w-6 h-6" />
+            </div>
+            <h3 className="text-xl font-bold text-foreground mb-2">Live Music Fridays</h3>
+            <p className="text-sm text-muted-foreground mb-4">Every Friday, 7 PM - 10 PM</p>
+            <p className="text-muted-foreground flex-grow mb-6">Kick off your weekend with local bands, great beer, and a lively atmosphere in our taproom.</p>
+            <Button text="View Lineup" variant="secondary" className="w-full" />
+          </Card>
+          <Card className="p-6 flex flex-col h-full">
+            <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-6 text-primary">
+              <Beer className="w-6 h-6" />
+            </div>
+            <h3 className="text-xl font-bold text-foreground mb-2">Seasonal Release Party</h3>
+            <p className="text-sm text-muted-foreground mb-4">October 15th, 12 PM - 8 PM</p>
+            <p className="text-muted-foreground flex-grow mb-6">Be the first to taste our new Winter Stout. Food trucks, games, and exclusive merchandise available.</p>
+            <Button text="RSVP Now" variant="secondary" className="w-full" />
+          </Card>
+          <Card className="p-6 flex flex-col h-full">
+            <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-6 text-primary">
+              <Calendar className="w-6 h-6" />
+            </div>
+            <h3 className="text-xl font-bold text-foreground mb-2">Brewery Tours</h3>
+            <p className="text-sm text-muted-foreground mb-4">Saturdays & Sundays, 2 PM</p>
+            <p className="text-muted-foreground flex-grow mb-6">Get a behind-the-scenes look at our brewing process and enjoy a guided tasting of our core lineup.</p>
+            <Button text="Book a Tour" variant="secondary" className="w-full" />
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}