Update src/app/page.tsx

This commit is contained in:
2026-05-14 21:34:55 +00:00
parent 925d751eac
commit 924500c367

View File

@@ -12,6 +12,7 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Zap, Cake, Wifi, Coffee, MapPin } from 'lucide-react';
export default function LandingPage() {
return (
@@ -28,388 +29,165 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Početna",
id: "hero",
},
{
name: "O nama",
id: "about",
},
{
name: "Ponuda",
id: "product",
},
{
name: "Kontakt",
id: "contact",
},
]}
brandName="Caffe Bar"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Početna", id: "hero" },
{ name: "O nama", id: "about" },
{ name: "Ponuda", id: "product" },
{ name: "Kontakt", id: "contact" },
]}
brandName="Caffe Bar"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{
variant: "gradient-bars",
}}
title="Vaš omiljeni kutak u gradu"
description="Uživajte u najboljoj kavi i opuštenoj atmosferi svakog dana u našem caffeu."
buttons={[
{
text: "Pogledaj ponudu",
href: "#product",
},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/tanned-lady-is-sitting-cafe-with-wooden-furniture-watching-video-phone_197531-17107.jpg?_wi=1",
imageAlt: "elegant caffe interior",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/boiled-coffee-cups-sweets_140725-3711.jpg",
imageAlt: "elegant caffe interior",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-table-with-elegant-setting-restaurant-hall-evening_181624-24706.jpg",
imageAlt: "elegant caffe interior",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/view-from-couple-cafe_171337-16476.jpg",
imageAlt: "elegant caffe interior",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-red-sweater-lady-drinks-coffee_1157-40771.jpg",
imageAlt: "elegant caffe interior",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-drinking-coffee-cafe_1303-25716.jpg",
imageAlt: "elegant caffe interior",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{ variant: "gradient-bars" }}
title="Vaš omiljeni kutak u gradu"
description="Uživajte u najboljoj kavi i opuštenoj atmosferi svakog dana u našem caffeu."
buttons={[{ text: "Pogledaj ponudu", href: "#product" }]}
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/tanned-lady-is-sitting-cafe-with-wooden-furniture-watching-video-phone_197531-17107.jpg", imageAlt: "elegant caffe interior" },
{ imageSrc: "http://img.b2bpic.net/free-photo/boiled-coffee-cups-sweets_140725-3711.jpg", imageAlt: "elegant caffe interior" },
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-table-with-elegant-setting-restaurant-hall-evening_181624-24706.jpg", imageAlt: "elegant caffe interior" },
{ imageSrc: "http://img.b2bpic.net/free-photo/view-from-couple-cafe_171337-16476.jpg", imageAlt: "elegant caffe interior" },
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-red-sweater-lady-drinks-coffee_1157-40771.jpg", imageAlt: "elegant caffe interior" },
{ imageSrc: "http://img.b2bpic.net/free-photo/young-woman-drinking-coffee-cafe_1303-25716.jpg", imageAlt: "elegant caffe interior" },
]}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="Tradicija i kvaliteta"
description="Već desetljećima nudimo samo najfinije zrno kave za naše vjerne posjetitelje."
metrics={[
{
value: "15+",
title: "Godina iskustva",
},
{
value: "20+",
title: "Vrsta kave",
},
{
value: "5000+",
title: "Sretnih gostiju",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/young-male-barista-preparing-coffee-coffee-shop_1303-31774.jpg?_wi=1"
mediaAnimation="slide-up"
metricsAnimation="opacity"
imageAlt="professional barista preparing coffee"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="Tradicija i kvaliteta"
description="Već desetljećima nudimo samo najfinije zrno kave za naše vjerne posjetitelje."
metrics={[
{ value: "15+", title: "Godina iskustva" },
{ value: "20+", title: "Vrsta kave" },
{ value: "5000+", title: "Sretnih gostiju" },
]}
imageSrc="http://img.b2bpic.net/free-photo/young-male-barista-preparing-coffee-coffee-shop_1303-31774.jpg"
mediaAnimation="slide-up"
metricsAnimation="opacity"
imageAlt="professional barista preparing coffee"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentySix
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Brza usluga",
description: "Kava je spremna dok trepnete.",
buttonIcon: "Zap",
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-girl-with-dark-hair-beret-classic-beige-trench-coat-sitting-table-city-cafe-terrace-smiling-having-cheesecake-tea-breakfast_197531-24446.jpg",
imageAlt: "Cheerful young girl with dark hair, beret, classic beige trench coat sitting at table of city cafe terrace, smiling, having cheesecake and tea for breakfast ",
},
{
title: "Domaći kolači",
description: "Svježe pečeno svako jutro.",
buttonIcon: "Cake",
imageSrc: "http://img.b2bpic.net/free-photo/tanned-lady-is-sitting-cafe-with-wooden-furniture-watching-video-phone_197531-17107.jpg?_wi=2",
imageAlt: "Cheerful young girl with dark hair, beret, classic beige trench coat sitting at table of city cafe terrace, smiling, having cheesecake and tea for breakfast ",
},
{
title: "Besplatni Wi-Fi",
description: "Idealan prostor za rad.",
buttonIcon: "Wifi",
imageSrc: "http://img.b2bpic.net/free-photo/young-male-barista-preparing-coffee-coffee-shop_1303-31774.jpg?_wi=2",
imageAlt: "Cheerful young girl with dark hair, beret, classic beige trench coat sitting at table of city cafe terrace, smiling, having cheesecake and tea for breakfast ",
},
{
title: "Ugodan ambijent",
description: "Najbolje mjesto za opuštanje.",
buttonIcon: "Coffee",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-coffee-cup_23-2148865587.jpg?_wi=1",
imageAlt: "Cheerful young girl with dark hair, beret, classic beige trench coat sitting at table of city cafe terrace, smiling, having cheesecake and tea for breakfast ",
},
{
title: "Vrhunska lokacija",
description: "U samom centru gradske vreve.",
buttonIcon: "MapPin",
imageSrc: "http://img.b2bpic.net/free-photo/sackcloth-dried-raw-beans-placed-dark-surface_114579-88711.jpg?_wi=1",
imageAlt: "Cheerful young girl with dark hair, beret, classic beige trench coat sitting at table of city cafe terrace, smiling, having cheesecake and tea for breakfast ",
},
]}
title="Zašto nas posjetiti?"
description="Naša ponuda nudi puno više od samo šalice kave."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentySix
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "Brza usluga", description: "Kava je spremna dok trepnete.", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-girl-with-dark-hair-beret-classic-beige-trench-coat-sitting-table-city-cafe-terrace-smiling-having-cheesecake-tea-breakfast_197531-24446.jpg", imageAlt: "service" },
{ title: "Domaći kolači", description: "Svježe pečeno svako jutro.", buttonIcon: Cake, imageSrc: "http://img.b2bpic.net/free-photo/tanned-lady-is-sitting-cafe-with-wooden-furniture-watching-video-phone_197531-17107.jpg", imageAlt: "cakes" },
{ title: "Besplatni Wi-Fi", description: "Idealan prostor za rad.", buttonIcon: Wifi, imageSrc: "http://img.b2bpic.net/free-photo/young-male-barista-preparing-coffee-coffee-shop_1303-31774.jpg", imageAlt: "wifi" },
{ title: "Ugodan ambijent", description: "Najbolje mjesto za opuštanje.", buttonIcon: Coffee, imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-coffee-cup_23-2148865587.jpg", imageAlt: "ambience" },
{ title: "Vrhunska lokacija", description: "U samom centru gradske vreve.", buttonIcon: MapPin, imageSrc: "http://img.b2bpic.net/free-photo/sackcloth-dried-raw-beans-placed-dark-surface_114579-88711.jpg", imageAlt: "location" },
]}
title="Zašto nas posjetiti?"
description="Naša ponuda nudi puno više od samo šalice kave."
/>
</div>
<div id="product" data-section="product">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{
id: "1",
name: "Espresso",
price: "1.50 €",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-coffee-cup_23-2148865587.jpg?_wi=2",
imageAlt: "cappuccino art close up",
},
{
id: "2",
name: "Cappuccino",
price: "2.00 €",
imageSrc: "http://img.b2bpic.net/free-photo/sackcloth-dried-raw-beans-placed-dark-surface_114579-88711.jpg?_wi=2",
imageAlt: "coffee cup on table",
},
{
id: "3",
name: "Latte",
price: "2.20 €",
imageSrc: "http://img.b2bpic.net/free-photo/homemade-croissant-with-chocolate-plate-marble_114579-87008.jpg",
imageAlt: "delicious croissant plate",
},
{
id: "4",
name: "Ledena kava",
price: "2.50 €",
imageSrc: "http://img.b2bpic.net/free-photo/trendy-coffee-shop-city_53876-30213.jpg",
imageAlt: "latte art detail",
},
{
id: "5",
name: "Croissant",
price: "1.80 €",
imageSrc: "http://img.b2bpic.net/free-photo/cup-cappuccino-wooden-table-closeup_169016-30389.jpg",
imageAlt: "specialty coffee cup",
},
{
id: "6",
name: "Macchiato",
price: "1.70 €",
imageSrc: "http://img.b2bpic.net/free-photo/coffee-cup_74190-2977.jpg",
imageAlt: "espresso shot glass",
},
]}
title="Naša ponuda"
description="Odaberite svoju omiljenu kombinaciju."
/>
</div>
<div id="product" data-section="product">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{ id: "1", name: "Espresso", price: "1.50 €", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-coffee-cup_23-2148865587.jpg" },
{ id: "2", name: "Cappuccino", price: "2.00 €", imageSrc: "http://img.b2bpic.net/free-photo/sackcloth-dried-raw-beans-placed-dark-surface_114579-88711.jpg" },
{ id: "3", name: "Latte", price: "2.20 €", imageSrc: "http://img.b2bpic.net/free-photo/homemade-croissant-with-chocolate-plate-marble_114579-87008.jpg" },
{ id: "4", name: "Ledena kava", price: "2.50 €", imageSrc: "http://img.b2bpic.net/free-photo/trendy-coffee-shop-city_53876-30213.jpg" },
{ id: "5", name: "Croissant", price: "1.80 €", imageSrc: "http://img.b2bpic.net/free-photo/cup-cappuccino-wooden-table-closeup_169016-30389.jpg" },
{ id: "6", name: "Macchiato", price: "1.70 €", imageSrc: "http://img.b2bpic.net/free-photo/coffee-cup_74190-2977.jpg" },
]}
title="Naša ponuda"
description="Odaberite svoju omiljenu kombinaciju."
/>
</div>
<div id="metric" data-section="metric">
<MetricCardTwo
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{
id: "1",
value: "100%",
description: "Prirodni sastojci",
},
{
id: "2",
value: "4.9",
description: "Prosječna ocjena",
},
{
id: "3",
value: "24/7",
description: "Dostupni vama",
},
{
id: "4",
value: "500+",
description: "Recepata",
},
{
id: "5",
value: "15+",
description: "Godina uspjeha",
},
]}
title="Naše brojke"
description="Kvaliteta koja se osjeti."
/>
</div>
<div id="metric" data-section="metric">
<MetricCardTwo
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground={false}
metrics={[
{ id: "1", value: "100%", description: "Prirodni sastojci" },
{ id: "2", value: "4.9", description: "Prosječna ocjena" },
{ id: "3", value: "24/7", description: "Dostupni vama" },
{ id: "4", value: "500+", description: "Recepata" },
{ id: "5", value: "15+", description: "Godina uspjeha" },
]}
title="Naše brojke"
description="Kvaliteta koja se osjeti."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Ana Marković",
role: "Dizajnerica",
company: "Studio X",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-smiling-cute-barista-girl-pouring-filter-coffee-making-order-cafe-client_1258-203375.jpg",
imageAlt: "smiling customer coffee shop",
},
{
id: "2",
name: "Ivana Horvat",
role: "Studentica",
company: "Sveučilište",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-sitting-coffee-shop_273609-2850.jpg",
imageAlt: "young woman drinking coffee",
},
{
id: "3",
name: "Marko Perić",
role: "Programer",
company: "Tech",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-bearded-man-cafe-near-window_171337-18122.jpg",
imageAlt: "man reading book cafe",
},
{
id: "4",
name: "Petra Delić",
role: "Prodaja",
company: "Trgovina",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-friends-looking-phones_23-2148395315.jpg",
imageAlt: "friends laughing coffee shop",
},
{
id: "5",
name: "Luka Kovač",
role: "Inženjer",
company: "Gradnja",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-shy-young-asian-woman-standing-front-cafe-entrance-touching-her-neck_1258-199358.jpg",
imageAlt: "student working cafe coffee",
},
]}
kpiItems={[
{
value: "5k+",
label: "Gostiju",
},
{
value: "15",
label: "Godina",
},
{
value: "4.9",
label: "Ocjena",
},
]}
title="Što kažu naši gosti?"
description="Povjerenje naših gostiju nam je na prvom mjestu."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Ana Marković", role: "Dizajnerica", company: "Studio X", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-smiling-cute-barista-girl-pouring-filter-coffee-making-order-cafe-client_1258-203375.jpg" },
{ id: "2", name: "Ivana Horvat", role: "Studentica", company: "Sveučilište", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-sitting-coffee-shop_273609-2850.jpg" },
{ id: "3", name: "Marko Perić", role: "Programer", company: "Tech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-bearded-man-cafe-near-window_171337-18122.jpg" },
{ id: "4", name: "Petra Delić", role: "Prodaja", company: "Trgovina", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-friends-looking-phones_23-2148395315.jpg" },
{ id: "5", name: "Luka Kovač", role: "Inženjer", company: "Gradnja", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-shy-young-asian-woman-standing-front-cafe-entrance-touching-her-neck_1258-199358.jpg" },
]}
kpiItems={[
{ value: "5k+", label: "Gostiju" },
{ value: "15", label: "Godina" },
{ value: "4.9", label: "Ocjena" },
]}
title="Što kažu naši gosti?"
description="Povjerenje naših gostiju nam je na prvom mjestu."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Radno vrijeme?",
content: "Radimo od 07:00 do 23:00.",
},
{
id: "f2",
title: "Imate li veganske opcije?",
content: "Naravno, nudimo biljna mlijeka.",
},
{
id: "f3",
title: "Rezervacije stolova?",
content: "Primamo rezervacije telefonom.",
},
{
id: "f4",
title: "Dostava?",
content: "Dostavljamo putem aplikacija.",
},
{
id: "f5",
title: "Eventi?",
content: "Organiziramo privatne proslave.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/cute-asian-girl-barista-cafe-processing-contactless-payment-insert-credit-card-into-pos-terminal_1258-199469.jpg"
title="Često postavljana pitanja"
description="Saznajte više o našem radu."
faqsAnimation="slide-up"
imageAlt="coffee shop service desk"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
faqs={[
{ id: "f1", title: "Radno vrijeme?", content: "Radimo od 07:00 do 23:00." },
{ id: "f2", title: "Imate li veganske opcije?", content: "Naravno, nudimo biljna mlijeka." },
{ id: "f3", title: "Rezervacije stolova?", content: "Primamo rezervacije telefonom." },
{ id: "f4", title: "Dostava?", content: "Dostavljamo putem aplikacija." },
{ id: "f5", title: "Eventi?", content: "Organiziramo privatne proslave." },
]}
imageSrc="http://img.b2bpic.net/free-photo/cute-asian-girl-barista-cafe-processing-contactless-payment-insert-credit-card-into-pos-terminal_1258-199469.jpg"
title="Često postavljana pitanja"
description="Saznajte više o našem radu."
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Kontakt"
title="Pišite nam"
description="Javite nam se za sve upite."
buttonText="Pošalji"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Kontakt"
title="Pišite nam"
description="Javite nam se za sve upite."
buttonText="Pošalji"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Caffe Bar"
columns={[
{
title: "Linkovi",
items: [
{
label: "Početna",
href: "#hero",
},
{
label: "Ponuda",
href: "#product",
},
],
},
{
title: "Info",
items: [
{
label: "Kontakt",
href: "#contact",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Caffe Bar"
columns={[
{ title: "Linkovi", items: [{ label: "Početna", href: "#hero" }, { label: "Ponuda", href: "#product" }] },
{ title: "Info", items: [{ label: "Kontakt", href: "#contact" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);