155 lines
7.8 KiB
TypeScript
155 lines
7.8 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Leaf, Recycle, Heart, Zap, ShoppingBag } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="Geüpcycled Threads"
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Over mij", id: "/about" },
|
|
{ name: "Shop", id: "/shop" },
|
|
{ name: "Contact", id: "/contact" }
|
|
]}
|
|
bottomLeftText="Duurzame Mode"
|
|
bottomRightText="hallo@geupycyledthreads.nl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Transformeer Oud in Nieuw"
|
|
titleClassName="text-7xl md:text-8xl lg:text-9xl"
|
|
description="Ontdek duurzaam vervaardigde modestukken gemaakt van geüpcycled materialen. Elk kledingstuk vertelt een verhaal van transformatie, creativiteit en milieuverantwoordelijkheid."
|
|
descriptionClassName="text-lg md:text-xl pt-8 md:pt-12"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Eco-Bewuste Mode"
|
|
tagIcon={Leaf}
|
|
imageSrc="https://img.b2bpic.net/free-photo/full-shot-woman-posing-fast-fashion-concept_23-2150805333.jpg"
|
|
imageAlt="Geüpcycled mode transformatie showcase"
|
|
imageClassName="w-1/2 h-auto object-cover object-center crop-20"
|
|
buttons={[
|
|
{ text: "Verken Winkel", href: "/shop" },
|
|
{ text: "Lees Ons Verhaal", href: "/about" }
|
|
]}
|
|
buttonClassName="px-8 py-4 text-lg font-semibold"
|
|
mediaWrapperClassName="flex justify-center items-center"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="Ik transformeer oude, verwaaide kledingstukken in prachtige, draagbare kunst. Elk stuk dat ik creëer is uniek—een viering van creativiteit, duurzaamheid en tweede kansen."
|
|
useInvertedBackground="invertDefault"
|
|
metrics={[
|
|
{ icon: Recycle, label: "Kledingstukken Geüpcycled", value: "500+" },
|
|
{ icon: Leaf, label: "Afval Afgeleid", value: "2.000 kg" },
|
|
{ icon: Heart, label: "Tevreden Klanten", value: "1.200+" },
|
|
{ icon: Zap, label: "Jaren Ervaring", value: "5+" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Aanbevolen Collectie"
|
|
description="Blader door onze nieuwste geüpcycled creaties. Elk stuk is uniek en klaar om zijn nieuwe thuis te vinden."
|
|
tag="Shop Nu"
|
|
tagIcon={ShoppingBag}
|
|
products={[
|
|
{
|
|
id: "1", name: "Vintage Denim Jas", price: "€75", imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-young-women-posing-outdoors_23-2149412643.jpg", imageAlt: "Geüpcycled vintage denim jas"
|
|
},
|
|
{
|
|
id: "2", name: "Patchwork Zomerjurk", price: "€95", imageSrc: "https://img.b2bpic.net/free-photo/front-view-woman-wearing-vacation-outfit_23-2150668926.jpg", imageAlt: "Handgemaakte patchwork zomerjurk"
|
|
},
|
|
{
|
|
id: "3", name: "Biologisch Katoenen Shirt", price: "€65", imageSrc: "https://img.b2bpic.net/free-photo/casual-curly-man-handrail_23-2147678271.jpg", imageAlt: "Duurzaam biologisch katoenen shirt"
|
|
},
|
|
{
|
|
id: "4", name: "Geüpcycled Joggingbroek", price: "€85", imageSrc: "https://img.b2bpic.net/free-photo/woman-holding-bag-fruit-park_23-2148595056.jpg", imageAlt: "Comfortabele geüpcycled joggingbroek"
|
|
}
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{ text: "Bekijk Volledige Winkel", href: "/shop" }
|
|
]}
|
|
textBoxButtonClassName="bg-primary-cta hover:bg-primary-cta/90 text-white px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="Wat Klanten Ervan Houden"
|
|
description="1,200+ glückliche Kunden vertrauen uns - Echte recensies van mensen die hun perfecte geüpcycled stuk hebben ontdekt"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Emma S.", role: "Mode Liefhebber", company: "Amsterdam", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg", imageAlt: "Klant Emma"
|
|
},
|
|
{
|
|
id: "2", name: "Sophie D.", role: "Duurzaamheid Voorstander",
|
|
company: "Parijs", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "Klant Sophie"
|
|
},
|
|
{
|
|
id: "3", name: "Marcus B.", role: "Ontwerp Professional", company: "Berlijn",
|
|
rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", imageAlt: "Klant Marcus"
|
|
},
|
|
{
|
|
id: "4", name: "Lisa M.", role: "Eco-Krijger", company: "Kopenhagen", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smiling-enthusiastic-standing-white-background_1258-85600.jpg", imageAlt: "Klant Lisa"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Klaar om je perfecte geüpcycled stuk te ontdekken? Neem contact op voor vragen, aangepaste verzoeken, of om gewoon je passie voor duurzame mode te delen."
|
|
animationType="entrance-slide"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{ text: "Neem Contact Op", href: "/contact" },
|
|
{ text: "Volg @geupycledthreads", href: "https://instagram.com" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<FooterLogoReveal logoText="Geüpcycled Threads" />
|
|
</ThemeProvider>
|
|
);
|
|
}
|