Merge version_2 into main #1

Merged
bender merged 1 commits from version_2 into main 2026-04-20 13:34:51 +00:00

View File

@@ -2,16 +2,16 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import SplitAbout from '@/components/sections/about/SplitAbout';
import { Award, Star, Users } from "lucide-react";
export default function LandingPage() {
@@ -23,419 +23,146 @@ export default function LandingPage() {
contentWidth="medium"
sizing="mediumLargeSizeLargeTitles"
background="fluid"
cardStyle="gradient-mesh"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="normal"
cardStyle="glass-elevated"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Over ons",
id: "about",
},
{
name: "Diensten",
id: "features",
},
{
name: "Prijzen",
id: "pricing",
},
{
name: "Contact",
id: "contact",
},
{ name: "Home", id: "hero" },
{ name: "Over ons", id: "about" },
{ name: "Diensten", id: "features" },
{ name: "Prijzen", id: "pricing" },
{ name: "Contact", id: "contact" },
]}
brandName="STER MODE"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
background={{
variant: "gradient-bars",
}}
<HeroBillboardRotatedCarousel
background={{ variant: "gradient-bars" }}
title="STER MODE: Specialist in Kledingreparatie & Stomerij"
description="Uw kleding in vertrouwde handen. Wij bieden vakkundige reparaties en professionele stomerij voor al uw textiel, van alledaagse kleding tot haute couture."
leftCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/creative-atelier-shop-workspace_482257-95822.jpg",
imageAlt: "Reperatie",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-female-tailor-working-studio_23-2148834119.jpg",
imageAlt: "Stomerij",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/elements-fashion-designing-studio_23-2150407894.jpg",
imageAlt: "Kwaliteit",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-seamstress-drawing-with-soap-pink-textile-modern-sewing-workshop_574295-3700.jpg",
imageAlt: "Service",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/client-examining-tie-shirt-store_482257-78702.jpg",
imageAlt: "Vakmanschap",
},
]}
rightCarouselItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/racks-filled-with-basic-shirt_482257-78330.jpg",
imageAlt: "Stomerij",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/owner-getting-ready-reopening_23-2149142190.jpg",
imageAlt: "Reperatie",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/portrait-modern-man-performing-housework-gentle-dreamy-atmosphere_23-2151469347.jpg",
imageAlt: "Service",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/different-pieces-materials-different-colors_23-2148742280.jpg",
imageAlt: "Kwaliteit",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/suitcase-packed-with-travel-paraphernalia_23-2149433947.jpg",
imageAlt: "Betrouwbaar",
},
]}
buttons={[
{
text: "Bekijk diensten",
href: "#features",
},
{
text: "Contact",
href: "#contact",
},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/scene-with-miscellaneous-items-being-sold-yard-sale-bargains_23-2151216782.jpg",
alt: "Klant 1",
},
{
src: "http://img.b2bpic.net/free-photo/empty-clothing-store-with-casual-formal-wear-design-retail-shop-with-clothes-hangers-racks-department-store-inside-shopping-center-fashion-merchandise-sale_482257-59961.jpg",
alt: "Klant 2",
},
{
src: "http://img.b2bpic.net/free-photo/woman-sitting-thrift-shop-full-shot_23-2149726861.jpg",
alt: "Klant 3",
},
{
src: "http://img.b2bpic.net/free-photo/atelier-shop-full-sartorial-outfits_482257-90452.jpg",
alt: "Klant 4",
},
{
src: "http://img.b2bpic.net/free-photo/man-tailor-working-his-factory_1303-28516.jpg",
alt: "Klant 5",
},
]}
avatarText="Vertrouwd door duizenden tevreden klanten."
marqueeItems={[
{
type: "image",
src: "http://img.b2bpic.net/free-photo/close-up-client-measurement_482257-101884.jpg",
alt: "Merk 1",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/female-designer-looking-fashion-sketch_23-2147874999.jpg",
alt: "Merk 2",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/professional-beautiful-asian-female-fashion-designer-working-measuring-dress-mannequin-clothing_7861-786.jpg",
alt: "Merk 3",
},
{
type: "text",
text: "Kwaliteit",
},
{
type: "text",
text: "Duurzaamheid",
},
description="Uw kleding in vertrouwde handen. Wij bieden vakkundige reparaties en professionele stomerij voor al uw textiel."
carouselItems={[
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/creative-atelier-shop-workspace_482257-95822.jpg" },
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-female-tailor-working-studio_23-2148834119.jpg" },
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/elements-fashion-designing-studio_23-2150407894.jpg" },
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/close-up-seamstress-drawing-with-soap-pink-textile-modern-sewing-workshop_574295-3700.jpg" },
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/client-examining-tie-shirt-store_482257-78702.jpg" },
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/racks-filled-with-basic-shirt_482257-78330.jpg" }
]}
buttons={[{ text: "Bekijk diensten", href: "#features" }, { text: "Contact", href: "#contact" }]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
<SplitAbout
title="Vakmanschap sinds jaar en dag"
description={[
"Bij STER MODE combineren we jarenlange ervaring met een passie voor textielonderhoud. Of het nu gaat om een ritssluiting vervangen, een kledingstuk vermaken of een delicate stomerij-opdracht, wij staan garant voor de hoogste kwaliteit.",
"Ons team is toegewijd aan het verlengen van de levensduur van uw favoriete kledingstukken door zorgvuldig en duurzaam onderhoud.",
description="Bij STER MODE combineren we jarenlange ervaring met een passie voor textielonderhoud."
textboxLayout="split"
useInvertedBackground={false}
bulletPoints={[
{ title: "Kwaliteit", description: "Hoogste standaard in reparaties." },
{ title: "Duurzaamheid", description: "Verleng de levensduur van uw kleding." }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyNine
animationType="slide-up"
<FeatureCardTwentySix
title="Onze Specialisaties"
description="Vakkundige zorg voor uw kleding."
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
features={[
{
title: "Kledingreparatie",
description: "Van knopen aanzetten tot ingewikkelde kledingvermaak, wij maken uw kleding weer als nieuw.",
imageSrc: "http://img.b2bpic.net/free-photo/vintage-sewing-machine-with-thread-measuring-tape_23-2148739406.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/top-view-sewing-supplies-arrangement_23-2149552371.jpg",
buttonText: "Meer",
},
{
title: "Professionele Stomerij",
description: "Uw delicate textiel en pakken krijgen de zorgvuldige reiniging die ze verdienen.",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-adult-loading-washing-machine_23-2149535091.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/lady-closing-washing-machine-door_23-2148387010.jpg",
buttonText: "Meer",
},
{
title: "Leder & Accessoires",
description: "Wij herstellen ook lederen jassen, tassen en andere accessoires met precisie.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-cobbler-doing-measurments-shoe_171337-12243.jpg",
titleImageSrc: "http://img.b2bpic.net/free-photo/high-angle-thimbles-with-thread-buttons_23-2148527945.jpg",
buttonText: "Meer",
},
{ title: "Kledingreparatie", description: "Knopen, naden en meer.", buttonIcon: Award },
{ title: "Professionele Stomerij", description: "Zorgvuldige reiniging.", buttonIcon: Award },
{ title: "Leder & Accessoires", description: "Leren jassen en tassen.", buttonIcon: Award },
{ title: "Spoedservice", description: "Snelle service beschikbaar.", buttonIcon: Award }
]}
title="Onze Specialisaties"
description="Een volledig overzicht van onze vakkundige diensten."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "basic",
tag: "Basis",
price: "€10",
period: "Vanaf",
description: "Eenvoudige reparaties zoals knopen of kleine naden.",
button: {
text: "Contact",
},
featuresTitle: "Inclusief:",
features: [
"Snel uitgevoerd",
"Professionele afwerking",
],
},
{
id: "standard",
tag: "Standaard",
price: "€25",
period: "Vanaf",
description: "Vermaken van broeken, jurken en rokken.",
button: {
text: "Contact",
},
featuresTitle: "Inclusief:",
features: [
"Perfecte pasvorm",
"Korte levertijd",
],
},
{
id: "premium",
tag: "Premium",
price: "€45",
period: "Vanaf",
description: "Reiniging van pakken, jassen en delicate stoffen.",
button: {
text: "Contact",
},
featuresTitle: "Inclusief:",
features: [
"Stoomreiniging",
"Opfrisbeurt",
"Kwaliteitsgarantie",
],
},
]}
<PricingCardThree
title="Transparante Prijzen"
description="Eerlijke prijzen voor professioneel vakwerk."
textboxLayout="split"
useInvertedBackground={false}
animationType="slide-up"
plans={[
{ id: "basic", name: "Basis", price: "€10", buttons: [{ text: "Contact" }], features: ["Snel uitgevoerd", "Professioneel"] },
{ id: "standard", name: "Standaard", price: "€25", buttons: [{ text: "Contact" }], features: ["Perfecte pasvorm", "Korte levertijd"] },
{ id: "premium", name: "Premium", price: "€45", buttons: [{ text: "Contact" }], features: ["Stoomreiniging", "Kwaliteitsgarantie"] }
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "15+",
title: "Jaar ervaring",
description: "Gespecialiseerd vakmanschap",
icon: Award,
},
{
id: "m2",
value: "5000+",
title: "Tevreden klanten",
description: "Met zorg geholpen",
icon: Users,
},
{
id: "m3",
value: "98%",
title: "Klanttevredenheid",
description: "Gemiddelde beoordeling",
icon: Star,
},
]}
<MetricCardTwo
title="Onze Cijfers"
description="Vertrouwd door velen in de regio."
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground={true}
metrics={[
{ id: "1", value: "15+", description: "Jaar ervaring" },
{ id: "2", value: "5000+", description: "Tevreden klanten" },
{ id: "3", value: "98%", description: "Klanttevredenheid" }
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="default"
<TestimonialCardTwelve
cardTitle="Klantervaringen"
cardTag="Recensies"
cardAnimation="slide-up"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Jan de Vries",
handle: "@janv",
testimonial: "Fantastische service. Mijn pak is weer als nieuw!",
imageSrc: "http://img.b2bpic.net/free-photo/frustrated-handsome-business-man-wearing-suit-looking-camera-going-wild-by-taking-off-his-suit-standing-white-background_141793-53852.jpg",
},
{
id: "2",
name: "Sophie Janssen",
handle: "@sophie",
testimonial: "Zeer deskundig in het vermaken van mijn trouwjurk.",
imageSrc: "http://img.b2bpic.net/free-photo/man-helping-his-wife-iron-shirt_23-2149117079.jpg",
},
{
id: "3",
name: "Mark Peters",
handle: "@markp",
testimonial: "Snelle reparatie en altijd vriendelijk geholpen.",
imageSrc: "http://img.b2bpic.net/free-photo/serviceman-does-checkup-client-car_482257-76119.jpg",
},
{
id: "4",
name: "Lisa Bakker",
handle: "@lisab",
testimonial: "Top stomerij! Mijn jas ziet er weer fris uit.",
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-employees-looking-laptop-laughing_74855-4007.jpg",
},
{
id: "5",
name: "Koen Smit",
handle: "@koens",
testimonial: "Al jaren de beste in de regio voor al mijn kleding.",
imageSrc: "http://img.b2bpic.net/free-photo/wardrobe-renovation-winter_23-2149183991.jpg",
},
{ id: "1", name: "Jan de Vries", imageSrc: "http://img.b2bpic.net/free-photo/frustrated-handsome-business-man-wearing-suit-looking-camera-going-wild-by-taking-off-his-suit-standing-white-background_141793-53852.jpg" },
{ id: "2", name: "Sophie Janssen", imageSrc: "http://img.b2bpic.net/free-photo/man-helping-his-wife-iron-shirt_23-2149117079.jpg" }
]}
title="Klantervaringen"
description="Wat onze klanten over ons zeggen."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
<FaqDouble
title="Veelgestelde vragen"
description="Antwoorden op veelgestelde vragen."
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{
id: "f1",
title: "Wat zijn de levertijden?",
content: "Gemiddeld duurt een kleine reparatie 2-3 werkdagen. Voor stomerij is dit meestal 48 uur.",
},
{
id: "f2",
title: "Moet ik een afspraak maken?",
content: "Nee, u kunt altijd langskomen tijdens onze openingstijden voor advies of het inleveren van kleding.",
},
{
id: "f3",
title: "Kunnen jullie alle stoffen reinigen?",
content: "Wij zijn getraind in het behandelen van de meeste materialen. Bij twijfel adviseren we u graag vooraf.",
},
{ id: "1", title: "Wat zijn de levertijden?", content: "Gemiddeld 2-3 werkdagen." },
{ id: "2", title: "Moet ik een afspraak maken?", content: "Nee, loop gerust binnen." }
]}
imageSrc="http://img.b2bpic.net/free-photo/side-view-man-woman-garage-sale_23-2150540755.jpg"
title="Veelgestelde vragen"
description="Antwoorden op de meest gestelde vragen over onze service."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
<ContactCTA
tag="Contact"
title="Direct contact"
description="Wij helpen u graag verder."
buttons={[{ text: "Bel nu", href: "tel:+3100000000" }]}
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
text="Neem gerust contact op voor al uw vragen of kom langs in onze winkel. Wij helpen u graag verder met professioneel kledingonderhoud."
buttons={[
{
text: "Bel ons direct",
href: "tel:+3100000000",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/man-brown-tshirt-ironing_23-2149400046.jpg"
<FooterLogoReveal
logoText="STER MODE"
columns={[
{
title: "Navigatie",
items: [
{
label: "Home",
href: "#hero",
},
{
label: "Over ons",
href: "#about",
},
{
label: "Diensten",
href: "#features",
},
],
},
{
title: "Service",
items: [
{
label: "Prijzen",
href: "#pricing",
},
{
label: "Contact",
href: "#contact",
},
],
},
]}
leftLink={{ text: "Privacy", href: "/privacy" }}
rightLink={{ text: "Contact", href: "#contact" }}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}