|
|
|
|
@@ -1,75 +1,85 @@
|
|
|
|
|
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';
|
|
|
|
|
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",
|
|
|
|
|
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: "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: "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: "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: "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"
|
|
|
|
|
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"
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
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">
|
|
|
|
|
<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.
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 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 border border-border/50 bg-card hover:-translate-y-1 transition-transform duration-300">
|
|
|
|
|
<div className="relative h-64 overflow-hidden">
|
|
|
|
|
<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={beer.imageSrc}
|
|
|
|
|
alt={beer.imageAlt}
|
|
|
|
|
className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
|
|
|
|
|
src=""
|
|
|
|
|
alt={beer.alt}
|
|
|
|
|
className="w-full h-full object-cover"
|
|
|
|
|
/>
|
|
|
|
|
<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 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-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 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>
|
|
|
|
|
|
|
|
|
|
<div className="text-center">
|
|
|
|
|
<ScrollReveal variant="slide-up" delay={0.4}>
|
|
|
|
|
<Button text="Find Your Favorite Beer" variant="secondary" href="#taproom" />
|
|
|
|
|
</ScrollReveal>
|
|
|
|
|
</div>
|
|
|
|
|
</GridOrCarousel>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
);
|
|
|
|
|
|
