bender/df642fc6-e0b3-4a23-ade3-cef983e153b1
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Bob AI: Add custom Menu section with pricing cards

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-06-14 12:14:58 +00:00
parent bc29ee95ed
commit ba51557793
2 changed files with 71 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/HomePage.tsx
View File

@@ -12,7 +12,8 @@ import StatsSection from './HomePage/sections/Stats';
import FaqSection from './HomePage/sections/Faq';
import FooterSection from './HomePage/sections/Footer';
export default function HomePage(): React.JSX.Element {
import MenuSection from './HomePage/sections/Menu';export default function HomePage(): React.JSX.Element {
return (
<ThemeProvider
defaultButtonVariant="gradient"
@@ -31,6 +32,7 @@ export default function HomePage(): React.JSX.Element {
<HeroSection />
<AboutSection />
<MenuSection />
<StatsSection />

68
src/pages/HomePage/sections/Menu.tsx Normal file
View File

@@ -0,0 +1,68 @@
import { motion } from "motion/react";
import TextAnimation from "@/components/ui/TextAnimation";
import ScrollReveal from "@/components/ui/ScrollReveal";
import Tag from "@/components/ui/Tag";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
export default function MenuSection() {
const menus = [
{
name: "Klassik Menyu",
price: "50 AZN / nəfər",
imageSrc: "http://img.b2bpic.net/free-photo/delicious-food-table_23-2148028522.jpg",
},
{
name: "Premium Menyu",
price: "80 AZN / nəfər",
imageSrc: "http://img.b2bpic.net/free-photo/gourmet-restaurant-steak-with-vegetables_23-2148285574.jpg",
},
{
name: "VIP Menyu",
price: "120 AZN / nəfər",
imageSrc: "http://img.b2bpic.net/free-photo/luxury-dinner-table-setting_23-2148028525.jpg",
},
];
return (
<section id="menu" data-webild-section="menu" className="relative w-full py-24 bg-background">
<div className="w-content-width mx-auto px-6">
<div className="text-center mb-16">
<ScrollReveal variant="fade">
<Tag text="Menyu" className="mb-4 mx-auto" />
</ScrollReveal>
<TextAnimation
text="Zəngin və Ləziz Menyu Seçimləri"
variant="slide-up"
gradientText={false}
tag="h2"
className="text-4xl md:text-5xl font-bold text-foreground mb-6"
/>
<ScrollReveal variant="fade" delay={0.2}>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Qonaqlarınız üçün xüsusi olaraq hazırlanmış zəngin və dadlı menyularımızla tanış olun. Hər bir detal sizin istəyinizə uyğunlaşdırılır.
</p>
</ScrollReveal>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{menus.map((menu, index) => (
<ScrollReveal variant="fade" key={index} delay={0.1 * (index + 1)}>
<div className="card overflow-hidden rounded-theme h-full flex flex-col bg-card border border-border">
<div className="relative h-64 w-full">
<ImageOrVideo
imageSrc={menu.imageSrc}
className="w-full h-full object-cover"
/>
</div>
<div className="p-6 flex flex-col flex-grow">
<h3 className="text-2xl font-semibold text-foreground mb-2">{menu.name}</h3>
<p className="text-xl text-primary-cta font-medium mt-auto">{menu.price}</p>
</div>
</div>
</ScrollReveal>
))}
</div>
</div>
</section>
);
}