Compare commits
5 Commits
version_13
...
version_15
| Author | SHA1 | Date | |
|---|---|---|---|
|
c24ff1996b | ||
| c210f3c561 | |||
|
|
e2dcc2d5e5 | ||
| ea750d0b01 | |||
| 3618dd9836 |
@@ -1,76 +1,76 @@
|
||||
"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 Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
|
||||
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 Peak Pilsner",
|
||||
style: "Pilsner",
|
||||
description: "Crisp and refreshing with a floral hop aroma and a clean, snappy finish. Perfect for a sunny day on the trails.",
|
||||
imageSrc: "",
|
||||
imageAlt: "Glass of crisp Mountain Peak Pilsner beer on a wooden table"
|
||||
},
|
||||
{
|
||||
name: "Pine Ridge IPA",
|
||||
style: "India Pale Ale",
|
||||
description: "Bold pine and citrus notes balanced by a sturdy malt backbone. A true Vermont-style IPA with a resinous kick.",
|
||||
imageSrc: "",
|
||||
imageAlt: "Pint of hazy Pine Ridge IPA beer with hops in the background"
|
||||
},
|
||||
{
|
||||
name: "Black Bear Stout",
|
||||
style: "Stout",
|
||||
description: "Rich and complex with deep flavors of roasted coffee, dark chocolate, and a hint of vanilla. Smooth and warming.",
|
||||
imageSrc: "",
|
||||
imageAlt: "Dark and rich Black Bear Stout beer in a snifter glass"
|
||||
}
|
||||
];
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
return (
|
||||
<section id="beers" className="bg-background">
|
||||
<div className="max-w-content-width mx-auto px-6">
|
||||
<div className="text-center">
|
||||
<TextAnimation text="Our Beers" variant="slide-up" gradientText={false} tag="h2" className="text-4xl md:text-5xl font-bold text-foreground mb-4" />
|
||||
<ScrollReveal variant="slide-up" delay={0.1}>
|
||||
<p className="text-lg text-muted-foreground max-w-content-width mx-auto">
|
||||
Discover our core lineup of artisanal brews, crafted with passion and the finest local ingredients.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{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-1 transition-transform duration-300">
|
||||
<div className="relative h-64 overflow-hidden">
|
||||
<img
|
||||
src={beer.imageSrc}
|
||||
alt={beer.imageAlt}
|
||||
className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
|
||||
/>
|
||||
<div className="absolute top-4 right-4 bg-background/90 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-medium text-foreground">
|
||||
{beer.style}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 flex flex-col flex-grow">
|
||||
<h3 className="text-xl font-bold text-foreground mb-2">{beer.name}</h3>
|
||||
<p className="text-muted-foreground mb-6 flex-grow">{beer.description}</p>
|
||||
<Button text="Explore Our Brews" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</Card>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<ScrollReveal variant="slide-up" delay={0.4}>
|
||||
<Button text="Find Your Favorite Beer" variant="secondary" href="#taproom" />
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user