bender/9d4e0654-85f2-44e9-a8d8-929294c7125d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bob AI: Change the hero section's main headline to 'Taste the Tradit

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-06-07 21:27:33 +00:00
parent 253154625c
commit b67bf3b1e0
1 changed files with 72 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/pages/HomePage/sections/Hero.tsx Normal file
View File

@@ -0,0 +1,72 @@
import React from 'react';
import TextAnimation from '@/components/ui/TextAnimation';
import ScrollReveal from '@/components/ui/ScrollReveal';
import Button from '@/components/ui/Button';
import Tag from '@/components/ui/Tag';
export default function HeroSection() {
return (
<section id="hero" className="relative w-full overflow-hidden flex items-center min-h-svh">
<div className="max-w-content-width mx-auto px-6 grid lg:grid-cols-2 items-center relative z-10">
<div className="flex flex-col items-start gap-6">
<ScrollReveal variant="slide-up">
<Tag text="Daily Fresh" />
</ScrollReveal>
<TextAnimation
text="Taste the Tradition: Handcrafted Baked Goods Daily"
variant="fade-blur"
gradientText={false}
tag="h1"
className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-foreground"
/>
<ScrollReveal variant="slide-up" delay={0.2}>
<p className="text-lg md:text-xl text-muted-foreground max-w-content-width">
Artisan breads, pastries, and custom cakes crafted with premium ingredients. Order online or visit us today.
</p>
</ScrollReveal>
<ScrollReveal variant="slide-up" delay={0.3} className="flex flex-wrap gap-4 mt-4">
<Button text="Order Now" variant="primary" href="#products" />
<Button text="Our Story" variant="secondary" href="#about" />
</ScrollReveal>
</div>
<div className="grid grid-cols-2 gap-4 relative">
<div className="flex flex-col gap-4">
<ScrollReveal variant="slide-up" delay={0.2}>
<div className="w-full aspect-square rounded-theme overflow-hidden shadow-sm">
<img src="" alt="Colorful macarons on a plate" className="w-full h-full object-cover" />
</div>
</ScrollReveal>
<ScrollReveal variant="slide-up" delay={0.4}>
<div className="w-full aspect-square rounded-theme overflow-hidden shadow-sm">
<img src="" alt="Baker's hands kneading fresh dough" className="w-full h-full object-cover" />
</div>
</ScrollReveal>
<ScrollReveal variant="slide-up" delay={0.6}>
<div className="w-full aspect-video rounded-theme overflow-hidden shadow-sm">
<img src="" alt="Assorted breakfast pastries" className="w-full h-full object-cover" />
</div>
</ScrollReveal>
</div>
<div className="flex flex-col gap-4">
<ScrollReveal variant="slide-up" delay={0.3}>
<div className="w-full aspect-video rounded-theme overflow-hidden shadow-sm">
<img src="" alt="Slicing a loaf of crusty bread" className="w-full h-full object-cover" />
</div>
</ScrollReveal>
<ScrollReveal variant="slide-up" delay={0.5}>
<div className="w-full aspect-square rounded-theme overflow-hidden shadow-sm">
<img src="" alt="Freshly baked artisan bread loaf" className="w-full h-full object-cover" />
</div>
</ScrollReveal>
<ScrollReveal variant="slide-up" delay={0.7}>
<div className="w-full aspect-square rounded-theme overflow-hidden shadow-sm">
<img src="" alt="Fruit tarts with fresh berries" className="w-full h-full object-cover" />
</div>
</ScrollReveal>
</div>
</div>
</div>
</section>
);
}