Compare commits
18 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7d17fde42e | |||
| 05dce2b450 | |||
| 4428c826b3 | |||
| 309cf3cc21 | |||
| 92bba9acb0 | |||
| be06770278 | |||
| 62415903e8 | |||
| f7bfb86e13 | |||
| 34491cb05d | |||
| 866d449930 | |||
| 7c33147dcc | |||
| 434ed99ae5 | |||
| b200a0b1eb | |||
| 72cfa84c39 | |||
| 1b3033d2b7 | |||
| d2c7a47db9 | |||
| 317c8914b5 | |||
| bbda474f45 |
204
src/app/page.tsx
204
src/app/page.tsx
@@ -2,8 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { useState } from "react";
|
||||
import { ShoppingCart, X, Plus, Minus, Trash2 } from "lucide-react";
|
||||
import { useState, useMemo } from "react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||||
@@ -16,204 +15,25 @@ import TestimonialCardSixteen from '@/components/sections/testimonial/Testimonia
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [isCartOpen, setIsCartOpen] = useState(false);
|
||||
const [cart, setCart] = useState<any[]>([]);
|
||||
|
||||
const addToCart = (product: any) => {
|
||||
setCart((prev) => {
|
||||
const existing = prev.find((item) => item.id === product.id);
|
||||
if (existing) {
|
||||
return prev.map((item) => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item);
|
||||
}
|
||||
return [...prev, { ...product, quantity: 1 }];
|
||||
});
|
||||
setIsCartOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ThemeProvider defaultButtonVariant="shift-hover" defaultTextAnimation="reveal-blur" borderRadius="pill" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<ReactLenis root>
|
||||
{isCartOpen && (
|
||||
<div className="fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm" onClick={() => setIsCartOpen(false)}>
|
||||
<div className="absolute right-0 top-0 h-full w-full max-w-sm bg-white p-6 shadow-xl overflow-y-auto" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-xl font-semibold">Dein Warenkorb</h2>
|
||||
<button onClick={() => setIsCartOpen(false)}><X /></button>
|
||||
</div>
|
||||
{cart.length === 0 ? <p>Warenkorb ist leer.</p> : (
|
||||
<div className="space-y-4">
|
||||
{cart.map((item) => (
|
||||
<div key={item.id} className="flex items-center gap-4 border-b pb-4">
|
||||
<img src={item.imageSrc} alt={item.name} className="w-16 h-16 object-cover rounded" />
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium">{item.name}</h4>
|
||||
<p className="text-sm text-gray-500">{item.price} x {item.quantity}</p>
|
||||
</div>
|
||||
<button onClick={() => setCart(cart.filter(i => i.id !== item.id))}><Trash2 className="text-red-500 w-4 h-4" /></button>
|
||||
</div>
|
||||
))}
|
||||
<button className="w-full bg-black text-white py-3 rounded-full mt-4">Zur Kasse</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Highlights", id: "hero" },
|
||||
{ name: "Steak-Döner", id: "products" },
|
||||
{ name: "Resonanz", id: "testimonials" },
|
||||
{ name: "Kontakt", id: "contact" },
|
||||
]}
|
||||
brandName="BABA Kebab"
|
||||
button={{ text: "Warenkorb", onClick: () => setIsCartOpen(true) }}
|
||||
/>
|
||||
<NavbarLayoutFloatingInline navItems={[{ name: "Highlights", id: "hero" }, { name: "Steak-Döner", id: "products" }, { name: "Kontakt", id: "contact" }]} brandName="BABA Kebab" button={{ text: "Bestellen" }} />
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
title="Kiel's bester Steak-Döner"
|
||||
description="Erleben Sie echte Qualität, wo Handwerk auf Leidenschaft trifft. Unser Steak-Döner setzt neue Standards."
|
||||
carouselItems={[
|
||||
{ id: "c1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497784360-n05h6bum.png", imageAlt: "gourmet steak kebab grill" },
|
||||
{ id: "c2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497440511-n7q0vrbz.png", imageAlt: "fresh turkish street food" },
|
||||
{ id: "c3", imageSrc: "http://img.b2bpic.net/free-photo/top-view-lamb-steak-doner-flatbread-served-with-fries-pickled-cucumber_140725-2659.jpg", imageAlt: "grilled meat doner knife" },
|
||||
{ id: "c4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497847677-hyu4zp6e.png", imageAlt: "gourmet meat slices grill" },
|
||||
{ id: "c5", imageSrc: "http://img.b2bpic.net/free-photo/slices-pizza-staked-with-tomatoes-vegetables_23-2148753760.jpg", imageAlt: "artisan bread fresh kebab" },
|
||||
{ id: "c6", imageSrc: "http://img.b2bpic.net/free-photo/side-view-beef-doner-kebab-plate-with-grilled-vegetables_140725-11844.jpg", imageAlt: "meat roasting doner spit" },
|
||||
]}
|
||||
/>
|
||||
<HeroBillboardRotatedCarousel title="Kiel's bester Steak-Döner" description="Erleben Sie echte Qualität." background={{ variant: "plain" }} carouselItems={[{ id: "c1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497784360-n05h6bum.png?_wi=1" }, { id: "c2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497440511-n7q0vrbz.png?_wi=1" }, { id: "c3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497784360-n05h6bum.png?_wi=2" }, { id: "c4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497440511-n7q0vrbz.png?_wi=2" }, { id: "c5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497784360-n05h6bum.png?_wi=3" }, { id: "c6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497440511-n7q0vrbz.png?_wi=3" }]} />
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
tag="Unsere Geschichte"
|
||||
title="Mehr als nur Döner – eine Kieler Adresse"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={true}
|
||||
title="Warum BABA Kebab?"
|
||||
description="Qualität, der man vertraut. Frisch zubereitet und mit Charakter gewürzt."
|
||||
accordionItems={[
|
||||
{ id: "f1", title: "Steak-Döner", content: "Zartes, kräftig gewürztes Fleisch ohne Standard – ein echter Wiedererkennungswert." },
|
||||
{ id: "f2", title: "Signature-Finish", content: "Petersilie, Zwiebeln, Sumach und Zitrone für den ultimativen Frischekick." },
|
||||
{ id: "f3", title: "Hausgemachtes Handwerk", content: "Vom Brot bis zur Sauce – hier schmeckt man den Unterschied." },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/juicy-meat-cutlets-with-cranberry-sauce-salad-wooden-table-rustic-style-top-view_2829-6764.jpg"
|
||||
imageAlt="Juicy meat cutlets with cranberry sauce and salad"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about"><TextAbout title="Mehr als nur Döner" useInvertedBackground={false} /></div>
|
||||
<div id="features" data-section="features"><FeatureCardTwentyOne title="Warum BABA?" description="Frische aus Prinzip." accordionItems={[{ id: "f1", title: "Qualität", content: "Steak-Döner vom Feinsten." }]} mediaPosition="left" mediaAnimation="slide-up" useInvertedBackground={false} imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497784360-n05h6bum.png?_wi=4" /></div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "BABA Spezial Döner", price: "ab 8,50€", imageSrc: "http://img.b2bpic.net/free-photo/delicious-arabic-fast-food-meat-skewers-top-view_23-2148651131.jpg?_wi=1", onProductClick: () => addToCart({ id: "p1", name: "BABA Spezial Döner", price: "8,50€", imageSrc: "http://img.b2bpic.net/free-photo/delicious-arabic-fast-food-meat-skewers-top-view_23-2148651131.jpg?_wi=2" }) },
|
||||
{ id: "p2", name: "Steak Döner", price: "ab 9,50€", imageSrc: "http://img.b2bpic.net/free-photo/lahmajun-with-meat-mixed-vegetables_140725-1157.jpg?_wi=1", onProductClick: () => addToCart({ id: "p2", name: "Steak Döner", price: "9,50€", imageSrc: "http://img.b2bpic.net/free-photo/lahmajun-with-meat-mixed-vegetables_140725-1157.jpg?_wi=2" }) },
|
||||
{ id: "p3", name: "Hausgemachter Lahmacun", price: "ab 6,00€", imageSrc: "http://img.b2bpic.net/free-photo/top-view-seed-bread-concept_23-2148648796.jpg?_wi=1", onProductClick: () => addToCart({ id: "p3", name: "Hausgemachter Lahmacun", price: "6,00€", imageSrc: "http://img.b2bpic.net/free-photo/top-view-seed-bread-concept_23-2148648796.jpg?_wi=2" }) },
|
||||
{ id: "p4", name: "Sesam-Sauerteigbrot", price: "ab 2,50€", imageSrc: "http://img.b2bpic.net/free-photo/close-up-caesar-salad-with-fresh-lettuce-parmesan-fried-croutons-roast-beef_176474-901.jpg" },
|
||||
{ id: "p5", name: "Veggie Mix", price: "ab 7,50€", imageSrc: "http://img.b2bpic.net/free-photo/meat-steaks-with-fried-potatoes-rice-garnish-inside-white-plate_114579-4421.jpg" },
|
||||
{ id: "p6", name: "Döner-Box Spezial", price: "ab 8,00€", imageSrc: "http://img.b2bpic.net/free-photo/meat-kabab-served-with-mangal-salad-onions-greens-pickles_140725-7975.jpg" },
|
||||
]}
|
||||
title="Unsere Highlights"
|
||||
description="Kulinarische Kunst direkt vom Grill für den anspruchsvollen Gaumen."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah Müller", role: "Stammkundin", company: "Kiel-Gaarden", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fashionable-male-with-beard-appeasing-hunger-while-dining-alone-modern-restaurant-sunny-day-eating-meal-with-knife-fork_273609-1966.jpg" },
|
||||
{ id: "t2", name: "Marc Schmidt", role: "Fan", company: "Gaarden", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-goodlooking-tender-friendly-pretty-middleaged-30s-woman-extend-arm-hold-camera-hand-smiling-broadly-taking-selfie-photographing-record-videomessage-calling-husband_176420-51274.jpg" },
|
||||
{ id: "t3", name: "Lisa Weber", role: "Gourmet", company: "Kiel", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cropped-shot-dark-skinned-smiling-young-woman-with-afro-hairstyle-dressed-casual-summer-clothing_273609-3169.jpg" },
|
||||
{ id: "t4", name: "Tom Wagner", role: "Döner-Liebhaber", company: "Kiel", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/iskender-doner-meat-pepper-tomato-side-view_140725-9129.jpg" },
|
||||
{ id: "t5", name: "Julia Klein", role: "Besucherin", company: "Kiel", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-satisfied-happy-young-man-glasses-working-cafe-sitting-coworking-space-with-laptop-showing-thumbs-up-like-approve-smth-good-chatting-giving-online-lessons_1258-314620.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "4.9/5", label: "Google Rating" },
|
||||
{ value: "2022", label: "Seit" },
|
||||
{ value: "100%", label: "Leidenschaft" },
|
||||
]}
|
||||
title="Was Kiel über uns sagt"
|
||||
description="Gäste kommen als Besucher und gehen als Stammgäste. Hier ist, warum."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialproof" data-section="socialproof">
|
||||
<SocialProofOne
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
names={["Google Maps", "Instagram Community", "Kieler Lokal Guide", "Food Blogger Netzwerk", "Lokale Gazette", "Gaarden News", "Kiel Stadt Magazin"]}
|
||||
title="BABA Community"
|
||||
description="Tausende begeisterte Gäste und eine wachsende Community auf Social Media."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Wo liegt ihr?", content: "Vinetaplatz 5, 24143 Kiel-Gaarden." },
|
||||
{ id: "q2", title: "Wie sind die Öffnungszeiten?", content: "Täglich von 10:00 bis 23:00 Uhr." },
|
||||
{ id: "q3", title: "Gibt es auch vegetarische Optionen?", content: "Ja, wir bieten auch leckere vegetarische Spezialitäten an." },
|
||||
]}
|
||||
title="Häufige Fragen"
|
||||
description="Alles Wichtige für deinen Besuch."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Besuch uns in Gaarden"
|
||||
description="Hast du Fragen? Wir freuen uns auf deinen Besuch oder Anruf."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Dein Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Deine E-Mail", required: true },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-composition-mexican-food-with-copyspace_23-2148140321.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="BABA Kebab"
|
||||
columns={[
|
||||
{
|
||||
title: "Menü", items: [{ label: "Steak-Döner", href: "#products" }, { label: "Spezial-Döner", href: "#products" }],
|
||||
},
|
||||
{
|
||||
title: "Über", items: [{ label: "Unsere Story", href: "#about" }, { label: "Kontakt", href: "#contact" }],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProductCardThree animationType="slide-up" textboxLayout="split" gridVariant="uniform-all-items-equal" products={[{ id: "p1", name: "Döner", price: "8,50€", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497784360-n05h6bum.png?_wi=5" }]} title="Unsere Highlights" description="Vom Grill direkt zu dir." useInvertedBackground={false} />
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials"><TestimonialCardSixteen animationType="slide-up" textboxLayout="split" useInvertedBackground={true} testimonials={[{ id: "t1", name: "Max", role: "Gast", company: "Kiel", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497440511-n7q0vrbz.png?_wi=4" }, { id: "t2", name: "Anna", role: "Gast", company: "Kiel", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CWJ7mGhwFAJPdUvYBdyh2tfWG7/uploaded-1776497440511-n7q0vrbz.png?_wi=5" }]} kpiItems={[{ value: "4.9", label: "Google" }, { value: "2022", label: "Seit" }, { value: "100%", label: "Genuss" }]} title="Stimmen" description="Das sagen Gäste." /></div>
|
||||
<div id="socialproof" data-section="socialproof"><SocialProofOne names={["Google Maps"]} title="Community" useInvertedBackground={false} description="Von unseren Kunden empfohlen." textboxLayout="default" /></div>
|
||||
<div id="faq" data-section="faq"><FaqDouble faqs={[{ id: "q1", title: "Lieferung?", content: "3,50€ Gebühr, ab 30€ frei. MBW 15€." }]} title="Fragen" faqsAnimation="slide-up" textboxLayout="split" useInvertedBackground={false} description="Alles was Sie wissen müssen." /></div>
|
||||
<div id="contact" data-section="contact"><ContactSplitForm title="Kontakt" description="Vinetaplatz 5, Kiel." inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]} useInvertedBackground={false} /></div>
|
||||
<div id="footer" data-section="footer"><FooterBaseCard logoText="BABA Kebab" columns={[{ title: "Links", items: [{ label: "Home", href: "#" }] }]} /></div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user