bender/1fc64612-1e1a-4be9-ac98-72213d4ce8e4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bob AI: Review and fix the images within the 'Our Beers' section to

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-06-02 15:00:54 +00:00
parent 69582c45b1
commit 73138225a9
1 changed files with 39 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/pages/HomePage/sections/Beers.tsx
View File

@@ -1,63 +1,72 @@
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 Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
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"
description: "Crisp, clean, and refreshing with a subtle floral hop aroma.",
abv: "5.2%",
ibu: "35",
alt: "Glass of crisp 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"
description: "Bold citrus and pine notes balanced by a sturdy malt backbone.",
abv: "6.8%",
ibu: "65",
alt: "Hazy IPA beer in a glass with hops in 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"
description: "Rich and complex with deep flavors of roasted coffee and dark chocolate.",
abv: "8.5%",
ibu: "40",
alt: "Dark stout beer in a snifter glass",
}
];
return (
<section id="beers" className="bg-background">
<section id="beers" className="bg-background relative">
<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">
<TextAnimation
text="Our Beers"
variant="fade-blur"
gradientText={false}
tag="h2"
className="text-4xl md:text-5xl font-bold text-foreground mb-4"
/>
</ScrollReveal>
<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.
Crafted with passion and precision, our core lineup represents the best of Vermont brewing.
</p>
</ScrollReveal>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{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">
<img
src={beer.imageSrc}
alt={beer.imageAlt}
className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
<Card className="h-full flex flex-col overflow-hidden bg-card border-none">
<div className="relative h-64 w-full overflow-hidden">
<img
src=""
alt={beer.alt}
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>
<h3 className="text-2xl font-bold text-foreground mb-2">{beer.name}</h3>
<p className="text-muted-foreground mb-4 flex-grow">{beer.description}</p>
<div className="flex justify-between items-center text-sm font-medium text-foreground mb-6">
<span>ABV: {beer.abv}</span>
<span>IBU: {beer.ibu}</span>
</div>
<Button text="Explore Our Brews" variant="primary" className="w-full" />
</div>
</Card>
@@ -67,7 +76,7 @@ export default function BeersSection() {
<div className="text-center">
<ScrollReveal variant="slide-up" delay={0.4}>
<Button text="Find Your Favorite Beer" variant="secondary" href="#taproom" />
<Button text="Find Your Favorite" variant="secondary" />
</ScrollReveal>
</div>
</div>