bender/f6f13eec-8989-4be2-bf57-0a2a95eecbe3
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:main
Branches Tags
bender:main bender:version_2 bender:version_1
...
pull from: bender:version_2
Branches Tags
bender:main bender:version_2 bender:version_1

2 Commits

Author SHA1 Message Date
bender
41a4c9a442 Update src/app/page.tsx 2026-05-14 21:36:55 +00:00
bender
924500c367 Update src/app/page.tsx 2026-05-14 21:34:55 +00:00
1 changed files with 151 additions and 373 deletions
Expand all files Collapse all files

524
src/app/page.tsx
View File

@@ -12,6 +12,7 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne'; import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen'; import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Zap, Cake, Wifi, Coffee, MapPin } from 'lucide-react';
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -28,388 +29,165 @@ export default function LandingPage() {
headingFontWeight="extrabold" headingFontWeight="extrabold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
navItems={[ navItems={[
{ { name: "Početna", id: "hero" },
name: "Početna", { name: "O nama", id: "about" },
id: "hero", { name: "Ponuda", id: "product" },
}, { name: "Kontakt", id: "contact" },
{ ]}
name: "O nama", brandName="Caffe Bar"
id: "about", />
}, </div>
{
name: "Ponuda",
id: "product",
},
{
name: "Kontakt",
id: "contact",
},
]}
brandName="Caffe Bar"
/>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardCarousel <HeroBillboardCarousel
background={{ background={{ variant: "gradient-bars" }}
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."
title="Vaš omiljeni kutak u gradu" buttons={[{ text: "Pogledaj ponudu", href: "#product" }]}
description="Uživajte u najboljoj kavi i opuštenoj atmosferi svakog dana u našem caffeu." mediaItems={[
buttons={[ { 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" },
text: "Pogledaj ponudu", { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-table-with-elegant-setting-restaurant-hall-evening_181624-24706.jpg", imageAlt: "elegant caffe interior" },
href: "#product", { 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" },
mediaItems={[ ]}
{ />
imageSrc: "http://img.b2bpic.net/free-photo/tanned-lady-is-sitting-cafe-with-wooden-furniture-watching-video-phone_197531-17107.jpg?_wi=1", </div>
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"> <div id="about" data-section="about">
<MetricSplitMediaAbout <MetricSplitMediaAbout
useInvertedBackground={false} useInvertedBackground={false}
title="Tradicija i kvaliteta" title="Tradicija i kvaliteta"
description="Već desetljećima nudimo samo najfinije zrno kave za naše vjerne posjetitelje." description="Već desetljećima nudimo samo najfinije zrno kave za naše vjerne posjetitelje."
metrics={[ metrics={[
{ { value: "15+", title: "Godina iskustva" },
value: "15+", { value: "20+", title: "Vrsta kave" },
title: "Godina iskustva", { value: "5000+", title: "Sretnih gostiju" },
}, ]}
{ imageSrc="http://img.b2bpic.net/free-photo/young-male-barista-preparing-coffee-coffee-shop_1303-31774.jpg?_wi=1"
value: "20+", mediaAnimation="slide-up"
title: "Vrsta kave", metricsAnimation="opacity"
}, imageAlt="professional barista preparing coffee"
{ />
value: "5000+", </div>
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="features" data-section="features"> <div id="features" data-section="features">
<FeatureCardTwentySix <FeatureCardTwentySix
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
features={[ 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: "Brza usluga", { 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: "cakes" },
description: "Kava je spremna dok trepnete.", { 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: "wifi" },
buttonIcon: "Zap", { 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: "ambience" },
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", { 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: "location" },
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."
title: "Domaći kolači", />
description: "Svježe pečeno svako jutro.", </div>
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="product" data-section="product"> <div id="product" data-section="product">
<ProductCardOne <ProductCardOne
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
gridVariant="uniform-all-items-equal" gridVariant="uniform-all-items-equal"
useInvertedBackground={false} useInvertedBackground={false}
products={[ 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" },
id: "1", { 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" },
name: "Espresso", { id: "3", name: "Latte", price: "2.20 €", imageSrc: "http://img.b2bpic.net/free-photo/homemade-croissant-with-chocolate-plate-marble_114579-87008.jpg" },
price: "1.50 €", { id: "4", name: "Ledena kava", price: "2.50 €", imageSrc: "http://img.b2bpic.net/free-photo/trendy-coffee-shop-city_53876-30213.jpg" },
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-coffee-cup_23-2148865587.jpg?_wi=2", { id: "5", name: "Croissant", price: "1.80 €", imageSrc: "http://img.b2bpic.net/free-photo/cup-cappuccino-wooden-table-closeup_169016-30389.jpg" },
imageAlt: "cappuccino art close up", { id: "6", name: "Macchiato", price: "1.70 €", imageSrc: "http://img.b2bpic.net/free-photo/coffee-cup_74190-2977.jpg" },
}, ]}
{ title="Naša ponuda"
id: "2", description="Odaberite svoju omiljenu kombinaciju."
name: "Cappuccino", />
price: "2.00 €", </div>
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="metric" data-section="metric"> <div id="metric" data-section="metric">
<MetricCardTwo <MetricCardTwo
textboxLayout="default" textboxLayout="default"
gridVariant="uniform-all-items-equal" gridVariant="uniform-all-items-equal"
useInvertedBackground={false} animationType="slide-up"
metrics={[ useInvertedBackground={false}
{ metrics={[
id: "1", { id: "1", value: "100%", description: "Prirodni sastojci" },
value: "100%", { id: "2", value: "4.9", description: "Prosječna ocjena" },
description: "Prirodni sastojci", { id: "3", value: "24/7", description: "Dostupni vama" },
}, { id: "4", value: "500+", description: "Recepata" },
{ { id: "5", value: "15+", description: "Godina uspjeha" },
id: "2", ]}
value: "4.9", title="Naše brojke"
description: "Prosječna ocjena", description="Kvaliteta koja se osjeti."
}, />
{ </div>
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"> <div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen <TestimonialCardSixteen
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[ 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: "1", { 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" },
name: "Ana Marković", { 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" },
role: "Dizajnerica", { 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" },
company: "Studio X", { 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" },
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", kpiItems={[
imageAlt: "smiling customer coffee shop", { value: "5k+", label: "Gostiju" },
}, { value: "15", label: "Godina" },
{ { value: "4.9", label: "Ocjena" },
id: "2", ]}
name: "Ivana Horvat", title="Što kažu naši gosti?"
role: "Studentica", description="Povjerenje naših gostiju nam je na prvom mjestu."
company: "Sveučilište", />
rating: 5, </div>
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="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqSplitMedia <FaqSplitMedia
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
faqs={[ faqsAnimation="slide-up"
{ faqs={[
id: "f1", { id: "f1", title: "Radno vrijeme?", content: "Radimo od 07:00 do 23:00." },
title: "Radno vrijeme?", { id: "f2", title: "Imate li veganske opcije?", content: "Naravno, nudimo biljna mlijeka." },
content: "Radimo od 07:00 do 23:00.", { 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." },
id: "f2", ]}
title: "Imate li veganske opcije?", imageSrc="http://img.b2bpic.net/free-photo/cute-asian-girl-barista-cafe-processing-contactless-payment-insert-credit-card-into-pos-terminal_1258-199469.jpg"
content: "Naravno, nudimo biljna mlijeka.", title="Često postavljana pitanja"
}, description="Saznajte više o našem radu."
{ />
id: "f3", </div>
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="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCenter <ContactCenter
useInvertedBackground={false} useInvertedBackground={false}
background={{ background={{ variant: "plain" }}
variant: "plain", tag="Kontakt"
}} title="Pišite nam"
tag="Kontakt" description="Javite nam se za sve upite."
title="Pišite nam" buttonText="Pošalji"
description="Javite nam se za sve upite." />
buttonText="Pošalji" </div>
/>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterBaseCard <FooterBaseCard
logoText="Caffe Bar" logoText="Caffe Bar"
columns={[ columns={[
{ { title: "Linkovi", items: [{ label: "Početna", href: "#hero" }, { label: "Ponuda", href: "#product" }] },
title: "Linkovi", { title: "Info", items: [{ label: "Kontakt", href: "#contact" }] },
items: [ ]}
{ />
label: "Početna", </div>
href: "#hero",
},
{
label: "Ponuda",
href: "#product",
},
],
},
{
title: "Info",
items: [
{
label: "Kontakt",
href: "#contact",
},
],
},
]}
/>
</div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );