22 Commits

Author SHA1 Message Date
21b8c93e97 Update src/app/page.tsx 2026-01-24 17:33:20 +00:00
ce9df4fe51 Update src/app/page.tsx 2026-01-24 17:31:01 +00:00
490370b7c8 Update src/app/layout.tsx 2026-01-24 17:31:00 +00:00
7f1dd866f7 Update src/app/shop/page.tsx 2026-01-24 17:29:22 +00:00
f39e98c884 Update src/app/page.tsx 2026-01-24 17:29:21 +00:00
5e3b200bd8 Update src/app/layout.tsx 2026-01-24 17:29:21 +00:00
54c06d035f Update src/app/contact/page.tsx 2026-01-24 17:29:20 +00:00
260ccb6986 Update src/app/blog/page.tsx 2026-01-24 17:29:19 +00:00
d011ae251d Update src/app/about/page.tsx 2026-01-24 17:29:18 +00:00
4970e1b0ef Update src/app/shop/page.tsx 2026-01-24 17:25:12 +00:00
84ebc55b0b Update src/app/page.tsx 2026-01-24 17:25:11 +00:00
567052fca2 Update src/app/layout.tsx 2026-01-24 17:25:10 +00:00
60f8812eab Update src/app/contact/page.tsx 2026-01-24 17:25:09 +00:00
75f2be31fb Update src/app/blog/page.tsx 2026-01-24 17:25:08 +00:00
6b2d152775 Update src/app/about/page.tsx 2026-01-24 17:25:08 +00:00
11b6cbda19 Update src/app/shop/page.tsx 2026-01-24 17:21:40 +00:00
27132c78a9 Update src/app/page.tsx 2026-01-24 17:21:39 +00:00
f442060a8c Update src/app/layout.tsx 2026-01-24 17:21:38 +00:00
118f073913 Update src/app/globals.css 2026-01-24 17:21:38 +00:00
be2f9f44cd Update src/app/contact/page.tsx 2026-01-24 17:21:37 +00:00
d9234c87e8 Update src/app/blog/page.tsx 2026-01-24 17:21:36 +00:00
dbbe4494b8 Update src/app/about/page.tsx 2026-01-24 17:21:35 +00:00
7 changed files with 138 additions and 128 deletions

View File

@@ -23,34 +23,34 @@ export default function AboutPage() {
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
brandName="Upcycled Threads" brandName="Geüpcycled Threads"
navItems={[ navItems={[
{ name: "Home", id: "/" }, { name: "Home", id: "/" },
{ name: "About", id: "/about" }, { name: "Over mij", id: "/about" },
{ name: "Shop", id: "/shop" }, { name: "Shop", id: "/shop" },
{ name: "Contact", id: "/contact" } { name: "Contact", id: "/contact" }
]} ]}
bottomLeftText="Sustainable Fashion" bottomLeftText="Duurzame Mode"
bottomRightText="hello@upcycledthreads.com" bottomRightText="hallo@geupycyledthreads.nl"
/> />
</div> </div>
<div id="process" data-section="process"> <div id="process" data-section="process">
<FeatureCardTwentyFour <FeatureCardTwentyFour
title="The Upcycling Process" title="Het Geüpcycling Proces"
description="Discover how I transform vintage and pre-loved garments into stunning new creations through careful curation, design, and craftsmanship." description="Ontdek hoe ik vintage en voorgekochte kledingstukken transformeer in prachtige nieuwe creaties door zorgvuldige selectie, ontwerp en vakmanschap."
features={[ features={[
{ {
id: "1", title: "Sourcing Quality Materials", author: "Step 1", description: "I carefully hunt for vintage, secondhand, and surplus garments with great potential. Each piece is inspected for quality, durability, and unique characteristics that will shine in its new form.", tags: ["Selection", "Sourcing"], id: "1", title: "Duurzame Materialen Selecteren", author: "Stap 1", description: "Ik zoek zorgvuldig naar vintage, tweedehands en overschotkledingstukken met groot potentieel. Elk stuk wordt gecontroleerd op kwaliteit, duurzaamheid en unieke kenmerken die zullen opvallen in zijn nieuwe vorm.", tags: ["Selectie", "Sourcing"],
imageSrc: "https://img.b2bpic.net/free-photo/woman-shopping-thrift-store_23-2150952333.jpg" imageSrc: "https://img.b2bpic.net/free-photo/woman-shopping-thrift-store_23-2150952333.jpg"
}, },
{ {
id: "2", title: "Design & Planning", author: "Step 2", description: "I sketch and plan the transformation, envisioning how the fabric and original design elements can be reimagined. This is where creativity meets sustainability.", tags: ["Design", "Planning"], id: "2", title: "Ontwerp & Planning", author: "Stap 2", description: "Ik schets en plan de transformatie, stellend hoe de stof en originele ontwerpelementen kunnen worden herontworpen. Dit is waar creativiteit duurzaamheid ontmoet.", tags: ["Ontwerp", "Planning"],
imageSrc: "https://img.b2bpic.net/free-photo/man-owner-counter-packing-clothes-yellow-plastic-bag_23-2148175679.jpg" imageSrc: "https://img.b2bpic.net/free-photo/man-owner-counter-packing-clothes-yellow-plastic-bag_23-2148175679.jpg"
}, },
{ {
id: "3", id: "3",
title: "Handcrafted Construction", author: "Step 3", description: "Each piece is carefully cut, sewn, and finished by hand. This meticulous process ensures quality and allows for unique details that make each garment one-of-a-kind.", tags: ["Crafting", "Handmade"], title: "Handgemaakte Constructie", author: "Stap 3", description: "Elk stuk wordt voorzichtig gesneden, genaamd en afgewerkt met de hand. Dit nauwgezet proces garandeert kwaliteit en maakt unieke details mogelijk die elk kledingstuk uniiek maken.", tags: ["Ambacht", "Handgemaakt"],
imageSrc: "https://img.b2bpic.net/free-photo/various-type-clothes-clothing-store_23-2148175674.jpg" imageSrc: "https://img.b2bpic.net/free-photo/various-type-clothes-clothing-store_23-2148175674.jpg"
} }
]} ]}
@@ -62,21 +62,21 @@ export default function AboutPage() {
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardFourteen <MetricCardFourteen
title="Every piece matters. By choosing upcycled fashion, you're making a real difference for our planet and supporting sustainable, ethical creation." title="Elk stuk is belangrijk. Door geüpcycled mode te kiezen, maakt u echt verschil voor onze planeet en steunt u duurzame, ethische creatie."
tag="Impact" tag="Impact"
metrics={[ metrics={[
{ {
id: "1", value: "80%", description: "Less water used compared to conventional clothing production" id: "1", value: "80%", description: "Minder water gebruikt vergeleken met conventionele kledingproductie"
}, },
{ {
id: "2", value: "Zero", description: "Waste sent to landfill from our production process" id: "2", value: "Nul", description: "Afval naar stortplaats van ons productieproces"
} }
]} ]}
useInvertedBackground="invertDefault" useInvertedBackground="invertDefault"
/> />
</div> </div>
<FooterLogoReveal logoText="Upcycled Threads" /> <FooterLogoReveal logoText="Geüpcycled Threads" />
</ThemeProvider> </ThemeProvider>
); );
} }

View File

@@ -22,16 +22,16 @@ type BlogPost = {
const defaultPosts: BlogPost[] = [ const defaultPosts: BlogPost[] = [
{ {
id: "1", category: "Design", title: "UX review presentations", excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Abstract design with purple and silver tones", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder3.avif", date: "20 Jan 2025", onBlogClick: () => console.log("Blog 1 clicked"), id: "1", category: "Ontwerp", title: "UX review presentaties", excerpt: "Hoe create je indrukwekkende presentaties die je collega's wow en je managers imponeren?", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Abstract ontwerp met paarse en zilveren tinten", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder3.avif", date: "20 Jan 2025", onBlogClick: () => console.log("Blog 1 clicked"),
}, },
{ {
id: "2", category: "Development", title: "Building scalable applications", excerpt: "Learn the best practices for building applications that can handle millions of users.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Development workspace", authorName: "John Smith", authorAvatar: "/placeholders/placeholder4.webp", date: "18 Jan 2025", onBlogClick: () => console.log("Blog 2 clicked"), id: "2", category: "Ontwikkeling", title: "Bouw schaalbare applicaties", excerpt: "Leer de best practices voor het bouwen van applicaties die miljoenen gebruikers aankunnen.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Ontwikkelingswerkruimte", authorName: "John Smith", authorAvatar: "/placeholders/placeholder4.webp", date: "18 Jan 2025", onBlogClick: () => console.log("Blog 2 clicked"),
}, },
{ {
id: "3", category: "Marketing", title: "Content strategy essentials", excerpt: "Discover how to create a content strategy that drives engagement and conversions.", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Marketing strategy board", authorName: "Sarah Johnson", authorAvatar: "/placeholders/placeholder3.avif", date: "15 Jan 2025", onBlogClick: () => console.log("Blog 3 clicked"), id: "3", category: "Marketing", title: "Essentiële inhoudsstrategie", excerpt: "Ontdek hoe je een inhoudsstrategie maakt die engagement en conversies voortdrijft.", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Marketingstrategie bord", authorName: "Sarah Johnson", authorAvatar: "/placeholders/placeholder3.avif", date: "15 Jan 2025", onBlogClick: () => console.log("Blog 3 clicked"),
}, },
{ {
id: "4", category: "Product", title: "Product management 101", excerpt: "Everything you need to know to become an effective product manager in 2025.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Product planning session", authorName: "Mike Davis", authorAvatar: "/placeholders/placeholder4.webp", date: "12 Jan 2025", onBlogClick: () => console.log("Blog 4 clicked"), id: "4", category: "Product", title: "Productbeheer 101", excerpt: "Alles wat je moet weten om een effectieve productmanager in 2025 te worden.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Productplanningssessie", authorName: "Mike Davis", authorAvatar: "/placeholders/placeholder4.webp", date: "12 Jan 2025", onBlogClick: () => console.log("Blog 4 clicked"),
}, },
]; ];
@@ -46,7 +46,7 @@ export default function BlogPage() {
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID; const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) { if (!apiUrl || !projectId) {
console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured, using default posts"); console.warn("NEXT_PUBLIC_API_URL of NEXT_PUBLIC_PROJECT_ID niet geconfigureerd, gebruik standaard posts");
setIsLoading(false); setIsLoading(false);
return; return;
} }
@@ -54,7 +54,8 @@ export default function BlogPage() {
const url = `${apiUrl}/posts/${projectId}?status=published`; const url = `${apiUrl}/posts/${projectId}?status=published`;
const response = await fetch(url, { const response = await fetch(url, {
method: "GET", headers: { method: "GET", headers: {
"Content-Type": "application/json"}, "Content-Type": "application/json"
},
}); });
if (response.ok) { if (response.ok) {
@@ -63,16 +64,16 @@ export default function BlogPage() {
if (Array.isArray(data) && data.length > 0) { if (Array.isArray(data) && data.length > 0) {
const mappedPosts = data.map((post: any) => ({ const mappedPosts = data.map((post: any) => ({
id: post.id || String(Math.random()), id: post.id || String(Math.random()),
category: post.category || "General", title: post.title || "Untitled", excerpt: post.excerpt || post.content.slice(0, 30) || "", imageSrc: post.imageUrl || "/placeholders/placeholder3.avif", imageAlt: post.imageAlt || post.title || "", authorName: post.author?.name || "Anonymous", authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif", date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }), category: post.category || "Algemeen", title: post.title || "Zonder titel", excerpt: post.excerpt || post.content.slice(0, 30) || "", imageSrc: post.imageUrl || "/placeholders/placeholder3.avif", imageAlt: post.imageAlt || post.title || "", authorName: post.author?.name || "Anoniem", authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif", date: post.date || post.createdAt || new Date().toLocaleDateString("nl-NL", { day: "numeric", month: "short", year: "numeric" }),
onBlogClick: () => console.log(`Blog ${post.id} clicked`), onBlogClick: () => console.log(`Blog ${post.id} clicked`),
})); }));
setPosts(mappedPosts); setPosts(mappedPosts);
} }
} else { } else {
console.warn(`API request failed with status ${response.status}, using default posts`); console.warn(`API-verzoek mislukt met status ${response.status}, gebruik standaard posts`);
} }
} catch (error) { } catch (error) {
console.error("Error fetching posts:", error); console.error("Fout bij het ophalen van posts:", error);
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
@@ -97,28 +98,28 @@ export default function BlogPage() {
<ReactLenis root> <ReactLenis root>
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
<NavbarStyleFullscreen <NavbarStyleFullscreen
brandName="Upcycled Threads" brandName="Geüpcycled Threads"
navItems={[ navItems={[
{ name: "Home", id: "/home" }, { name: "Home", id: "/home" },
{ name: "Home", id: "home" }, { name: "Home", id: "home" },
{ name: "About", id: "about" }, { name: "Over mij", id: "about" },
{ name: "Shop", id: "products" }, { name: "Shop", id: "products" },
{ name: "Process", id: "process" }, { name: "Proces", id: "process" },
{ name: "Contact", id: "contact" } { name: "Contact", id: "contact" }
]} ]}
bottomLeftText="Sustainable Fashion" bottomLeftText="Duurzame Mode"
bottomRightText="hello@upcycledthreads.com" bottomRightText="hallo@geupycyledthreads.nl"
/> />
{isLoading ? ( {isLoading ? (
<div className="w-content-width mx-auto py-20 text-center"> <div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p> <p className="text-foreground">Posts laden...</p>
</div> </div>
) : ( ) : (
<BlogCardTwo <BlogCardTwo
blogs={posts} blogs={posts}
title="Sustainable Fashion Insights" title="Inzichten Duurzame Mode"
description="Discover the latest trends and tips in sustainable fashion and upcycling" description="Ontdek de nieuwste trends en tips in duurzame mode en upcycling"
textboxLayout="default" textboxLayout="default"
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
animationType="slide-up" animationType="slide-up"
@@ -127,7 +128,7 @@ export default function BlogPage() {
)} )}
<FooterLogoReveal <FooterLogoReveal
logoText="Upcycled Threads" logoText="Geüpcycled Threads"
/> />
</div> </div>
</ReactLenis> </ReactLenis>

View File

@@ -23,60 +23,61 @@ export default function ContactPage() {
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
brandName="Upcycled Threads" brandName="Geüpcycled Threads"
navItems={[ navItems={[
{ name: "Home", id: "/" }, { name: "Home", id: "/" },
{ name: "About", id: "/about" }, { name: "Over mij", id: "/about" },
{ name: "Shop", id: "/shop" }, { name: "Shop", id: "/shop" },
{ name: "Contact", id: "/contact" } { name: "Contact", id: "/contact" }
]} ]}
bottomLeftText="Sustainable Fashion" bottomLeftText="Duurzame Mode"
bottomRightText="hello@upcycledthreads.com" bottomRightText="hallo@geupycyledthreads.nl"
/> />
</div> </div>
<div id="contact-main" data-section="contact-main"> <div id="contact-main" data-section="contact-main">
<ContactText <ContactText
text="Ready to discover your perfect upcycled piece? Get in touch with questions, custom requests, or just to share your passion for sustainable fashion." 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" animationType="entrance-slide"
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
buttons={[ buttons={[
{ text: "Email Me", href: "mailto:hello@upcycledthreads.com" }, { text: "E-mail Mij", href: "mailto:hallo@geupycyledthreads.nl" },
{ text: "Instagram", href: "https://instagram.com" } { text: "Instagram", href: "https://instagram.com" }
]} ]}
buttonClassName="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>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqSplitText <FaqSplitText
sideTitle="Frequently Asked Questions" sideTitle="Veelgestelde Vragen"
sideDescription="Everything you need to know about our upcycled fashion and ordering process" sideDescription="Alles wat je moet weten over onze geüpcycled mode en bestelproces"
textPosition="left" textPosition="left"
useInvertedBackground="invertDefault" useInvertedBackground="invertDefault"
faqs={[ faqs={[
{ {
id: "1", title: "Are all pieces truly one-of-a-kind?", content: "Yes! Each garment is handcrafted from unique vintage and secondhand materials. While I may create similar styles, no two pieces are exactly alike. This is what makes upcycled fashion so special." id: "1", title: "Zijn alle stukken echt uniek?", content: "Ja! Elk kledingstuk is handgemaakt van unieke vintage en tweedehands materialen. Hoewel ik vergelijkbare stijlen kan creëren, is geen twee stukken hetzelfde. Dit is wat geüpcycled mode zo bijzonder maakt."
}, },
{ {
id: "2", title: "How are garments sized?", content: "Each item includes detailed measurements and sizing information. Since pieces are upcycled, they may vary slightly. I recommend checking the specific measurements for your chosen garment." id: "2", title: "Hoe worden kledingstukken gemeten?", content: "Elk artikel bevat gedetailleerde metingen en maatgegevens. Aangezien stukken geüpcycled zijn, kunnen ze licht afwijken. Ik raad aan de specifieke metingen voor je gekozen kledingstuk te controleren."
}, },
{ {
id: "3", title: "What materials do you use?", content: "I source vintage clothing, deadstock fabrics, and quality secondhand garments. All materials are carefully selected for durability and beauty. No virgin polyester—only sustainable choices." id: "3", title: "Welke materialen gebruik je?", content: "Ik breng vintage kleding, deadstock stoffen en kwaliteit tweedehands kledingstukken in. Alle materialen worden zorgvuldig geselecteerd op duurzaamheid en schoonheid. Geen maagdelijk polyester—alleen duurzame keuzes."
}, },
{ {
id: "4", title: "How long does shipping take?", content: "Orders are handcrafted to order. Typical processing time is 2-3 weeks, plus 5-10 business days for shipping within Europe. Custom requests may take longer." id: "4", title: "Hoe lang duurt verzending?", content: "Orders worden op maat gemaakt. Typische verwerkingstijd is 2-3 weken, plus 5-10 werkdagen voor verzending binnen Europa. Aangepaste verzoeken kunnen langer duren."
}, },
{ {
id: "5", title: "Can I request custom pieces?", content: "Absolutely! I love creating custom upcycled pieces. Please reach out with your vision, and we can discuss materials, style, and timeline for your unique garment." id: "5", title: "Kan ik aangepaste stukken aanvragen?", content: "Absoluut! Ik hou ervan om aangepaste geüpcycled stukken te creëren. Neem contact op met je visie, en we kunnen materialen, stijl en tijdlijn voor je unieke kledingstuk bespreken."
}, },
{ {
id: "6", title: "What's your return policy?", content: "Since each piece is handcrafted and unique, returns are accepted within 14 days if the item is unworn and in original condition. Please contact me to discuss any issues." id: "6", title: "Wat is je retourbeleid?", content: "Omdat elk stuk handgemaakt en uniek is, worden retouren binnen 14 dagen geaccepteerd als het artikel ongedragen en in originele staat is. Neem contact met me op om eventuele problemen te bespreken."
} }
]} ]}
/> />
</div> </div>
<FooterLogoReveal logoText="Upcycled Threads" /> <FooterLogoReveal logoText="Geüpcycled Threads" />
</ThemeProvider> </ThemeProvider>
); );
} }

View File

@@ -4,21 +4,21 @@
/* Base units */ /* Base units */
/* --vw is set by ThemeProvider */ /* --vw is set by ThemeProvider */
/* --background: #f9f5f0;; /* --background: #fafffb;;
--card: #efe5d8;; --card: #f7fffa;;
--foreground: #3d2817;; --foreground: #001a0a;;
--primary-cta: #c8704c;; --primary-cta: #0a7039;;
--secondary-cta: #f9f5f0;; --secondary-cta: #ffffff;;
--accent: #d9a884;; --accent: #a8d9be;;
--background-accent: #c4926f;; */ --background-accent: #6bbf8e;; */
--background: #f9f5f0;; --background: #fafffb;;
--card: #efe5d8;; --card: #f7fffa;;
--foreground: #3d2817;; --foreground: #001a0a;;
--primary-cta: #c8704c;; --primary-cta: #0a7039;;
--secondary-cta: #f9f5f0;; --secondary-cta: #ffffff;;
--accent: #d9a884;; --accent: #a8d9be;;
--background-accent: #c4926f;; --background-accent: #6bbf8e;;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

View File

@@ -8,11 +8,13 @@ const poppins = Poppins({
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Upcycled Threads | Sustainable Fashion & Handcrafted Clothing", description: "Transform your wardrobe with unique, handcrafted upcycled fashion. Shop one-of-a-kind pieces made from vintage & sustainable materials. Eco-conscious style.", keywords: ["upcycled fashion", "sustainable clothing", "handmade garments", "vintage fashion", "eco-friendly apparel", "second-hand style"], title: "Geüpcycled Threads | Duurzame Mode & Handgemaakte Kleding", description: "Transformeer je garderobe met unieke, handgemaakte geüpcycled mode. Shop eenmalige stukken gemaakt van vintage & duurzame materialen. Eco-bewuste stijl.", keywords: ["geüpcycled mode", "duurzame kleding", "handgemaakte kledingstukken", "vintage mode", "eco-vriendelijke apparel", "tweedehandsestijl"],
openGraph: { openGraph: {
title: "Upcycled Threads | Sustainable Fashion", description: "Discover unique, handcrafted upcycled fashion pieces that celebrate creativity and environmental responsibility.", siteName: "Upcycled Threads", type: "website"}, title: "Geüpcycled Threads | Duurzame Mode", description: "Ontdek unieke, handgemaakte geüpcycled modestukken die creativiteit en milieuverantwoordelijkheid vieren.", siteName: "Geüpcycled Threads", type: "website"
},
twitter: { twitter: {
card: "summary_large_image", title: "Upcycled Threads | Sustainable Fashion", description: "Transform your wardrobe with unique, handcrafted upcycled pieces"}, card: "summary_large_image", title: "Geüpcycled Threads | Duurzame Mode", description: "Transformeer je garderobe met unieke, handgemaakte geüpcycled stukken"
},
robots: { robots: {
index: true, index: true,
follow: true, follow: true,
@@ -25,7 +27,7 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="nl">
<body className={`${poppins.variable} antialiased`}> <body className={`${poppins.variable} antialiased`}>
{children} {children}

View File

@@ -28,65 +28,69 @@ export default function HomePage() {
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
brandName="Upcycled Threads" brandName="Geüpcycled Threads"
navItems={[ navItems={[
{ name: "Home", id: "/" }, { name: "Home", id: "/" },
{ name: "About", id: "/about" }, { name: "Over mij", id: "/about" },
{ name: "Shop", id: "/shop" }, { name: "Shop", id: "/shop" },
{ name: "Contact", id: "/contact" } { name: "Contact", id: "/contact" }
]} ]}
bottomLeftText="Sustainable Fashion" bottomLeftText="Duurzame Mode"
bottomRightText="hello@upcycledthreads.com" bottomRightText="hallo@geupycyledthreads.nl"
/> />
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboard <HeroBillboard
title="Transform Old Into New" title="Transformeer Oud in Nieuw"
description="Discover sustainably crafted fashion pieces made from upcycled materials. Each garment tells a story of transformation, creativity, and environmental responsibility." 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."
background={{ variant: "sparkles-gradient" }} background={{ variant: "sparkles-gradient" }}
tag="Eco-Conscious Fashion" tag="Eco-Bewuste Mode"
tagIcon={Leaf} tagIcon={Leaf}
imageSrc="https://img.b2bpic.net/free-photo/full-shot-woman-posing-fast-fashion-concept_23-2150805333.jpg" imageSrc="https://img.b2bpic.net/free-photo/full-shot-woman-posing-fast-fashion-concept_23-2150805333.jpg"
imageAlt="Upcycled fashion transformation showcase" imageAlt="Geüpcycled mode transformatie showcase"
imageClassName="w-1/2 h-auto object-cover object-center"
buttons={[ buttons={[
{ text: "Explore Shop", href: "/shop" }, { text: "Verken Winkel", href: "/shop" },
{ text: "Learn Our Story", href: "/about" } { text: "Lees Ons Verhaal", href: "/about" }
]} ]}
buttonClassName="px-8 py-4 text-lg font-semibold"
mediaWrapperClassName="flex justify-center items-center"
/> />
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<AboutMetric <AboutMetric
title="I transform old, forgotten garments into beautiful, wearable art. Every piece I create is unique—a celebration of creativity, sustainability, and second chances." 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" useInvertedBackground="invertDefault"
metrics={[ metrics={[
{ icon: Recycle, label: "Garments Upcycled", value: "500+" }, { icon: Recycle, label: "Kledingstukken Geüpcycled", value: "500+" },
{ icon: Leaf, label: "Waste Diverted", value: "2,000 kg" }, { icon: Leaf, label: "Afval Afgeleid", value: "2.000 kg" },
{ icon: Heart, label: "Happy Customers", value: "1,200+" }, { icon: Heart, label: "Tevreden Klanten", value: "1.200+" },
{ icon: Zap, label: "Years Experience", value: "5+" } { icon: Zap, label: "Jaren Ervaring", value: "5+" }
]} ]}
/> />
</div> </div>
<div id="products" data-section="products"> <div id="products" data-section="products">
<ProductCardOne <ProductCardOne
title="Featured Collection" title="Aanbevolen Collectie"
description="Browse our latest upcycled creations. Each piece is unique and ready to find its new home." description="Blader door onze nieuwste geüpcycled creaties. Elk stuk is uniek en klaar om zijn nieuwe thuis te vinden."
tag="Shop Now" tag="Shop Nu"
tagIcon={ShoppingBag} tagIcon={ShoppingBag}
products={[ products={[
{ {
id: "1", name: "Vintage Denim Jacket", price: "€75", imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-young-women-posing-outdoors_23-2149412643.jpg", imageAlt: "Upcycled vintage denim jacket" 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 Summer Dress", price: "€95", imageSrc: "https://img.b2bpic.net/free-photo/front-view-woman-wearing-vacation-outfit_23-2150668926.jpg", imageAlt: "Handcrafted patchwork summer dress" 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: "Organic Cotton Shirt", price: "€65", imageSrc: "https://img.b2bpic.net/free-photo/casual-curly-man-handrail_23-2147678271.jpg", imageAlt: "Sustainable organic cotton shirt" 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: "Upcycled Joggers", price: "€85", imageSrc: "https://img.b2bpic.net/free-photo/woman-holding-bag-fruit-park_23-2148595056.jpg", imageAlt: "Comfortable upcycled joggers" 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" gridVariant="four-items-2x2-equal-grid"
@@ -94,33 +98,34 @@ export default function HomePage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
buttons={[ buttons={[
{ text: "View Full Shop", href: "/shop" } { 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>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardOne <TestimonialCardOne
title="What Customers Love" title="Wat Klanten Ervan Houden"
description="Real reviews from people who've discovered their perfect upcycled piece" description="1,200+ glückliche Kunden vertrauen uns - Echte recensies van mensen die hun perfecte geüpcycled stuk hebben ontdekt"
testimonials={[ testimonials={[
{ {
id: "1", name: "Emma S.", role: "Fashion Lover", company: "Amsterdam", rating: 5, 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: "Customer Emma" imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg", imageAlt: "Klant Emma"
}, },
{ {
id: "2", name: "Sophie D.", role: "Sustainability Advocate", id: "2", name: "Sophie D.", role: "Duurzaamheid Voorstander",
company: "Paris", rating: 5, company: "Parijs", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "Customer Sophie" imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "Klant Sophie"
}, },
{ {
id: "3", name: "Marcus B.", role: "Design Professional", company: "Berlin", id: "3", name: "Marcus B.", role: "Ontwerp Professional", company: "Berlijn",
rating: 5, rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", imageAlt: "Customer Marcus" 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-Warrior", company: "Copenhagen", rating: 5, 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: "Customer Lisa" 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" gridVariant="uniform-all-items-equal"
@@ -132,17 +137,17 @@ export default function HomePage() {
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactText <ContactText
text="Ready to discover your perfect upcycled piece? Get in touch with questions, custom requests, or just to share your passion for sustainable fashion." 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" animationType="entrance-slide"
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
buttons={[ buttons={[
{ text: "Contact Me", href: "/contact" }, { text: "Neem Contact Op", href: "/contact" },
{ text: "Follow @upcycledthreads", href: "https://instagram.com" } { text: "Volg @geupycledthreads", href: "https://instagram.com" }
]} ]}
/> />
</div> </div>
<FooterLogoReveal logoText="Upcycled Threads" /> <FooterLogoReveal logoText="Geüpcycled Threads" />
</ThemeProvider> </ThemeProvider>
); );
} }

View File

@@ -24,42 +24,42 @@ export default function ShopPage() {
> >
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
brandName="Upcycled Threads" brandName="Geüpcycled Threads"
navItems={[ navItems={[
{ name: "Home", id: "/" }, { name: "Home", id: "/" },
{ name: "About", id: "/about" }, { name: "Over mij", id: "/about" },
{ name: "Shop", id: "/shop" }, { name: "Shop", id: "/shop" },
{ name: "Contact", id: "/contact" } { name: "Contact", id: "/contact" }
]} ]}
bottomLeftText="Sustainable Fashion" bottomLeftText="Duurzame Mode"
bottomRightText="hello@upcycledthreads.com" bottomRightText="hallo@geupycyledthreads.nl"
/> />
</div> </div>
<div id="shop-featured" data-section="shop-featured"> <div id="shop-featured" data-section="shop-featured">
<ProductCardOne <ProductCardOne
title="Complete Collection" title="Volledige Collectie"
description="Explore our full range of handcrafted upcycled fashion pieces. Each garment is one-of-a-kind, made with love and attention to sustainability." description="Verken ons volledige assortiment handgemaakte geüpcycled modestukken. Elk kledingstuk is uniek, gemaakt met liefde en aandacht voor duurzaamheid."
tag="Available Now" tag="Nu Beschikbaar"
tagIcon={ShoppingBag} tagIcon={ShoppingBag}
products={[ products={[
{ {
id: "1", name: "Vintage Denim Jacket", price: "€75", imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-young-women-posing-outdoors_23-2149412643.jpg", imageAlt: "Upcycled vintage denim jacket" 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 Summer Dress", price: "€95", imageSrc: "https://img.b2bpic.net/free-photo/front-view-woman-wearing-vacation-outfit_23-2150668926.jpg", imageAlt: "Handcrafted patchwork summer dress" 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: "Organic Cotton Shirt", price: "€65", imageSrc: "https://img.b2bpic.net/free-photo/casual-curly-man-handrail_23-2147678271.jpg", imageAlt: "Sustainable organic cotton shirt" 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: "Upcycled Joggers", price: "€85", imageSrc: "https://img.b2bpic.net/free-photo/woman-holding-bag-fruit-park_23-2148595056.jpg", imageAlt: "Comfortable upcycled joggers" 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"
}, },
{ {
id: "5", name: "Reworked Blazer", price: "€110", imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-young-women-posing-outdoors_23-2149412643.jpg", imageAlt: "Professional reworked blazer" id: "5", name: "Verwerkt Colbert", price: "€110", imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-young-women-posing-outdoors_23-2149412643.jpg", imageAlt: "Professioneel verwerkt colbert"
}, },
{ {
id: "6", name: "Sustainable Skirt", price: "€55", imageSrc: "https://img.b2bpic.net/free-photo/front-view-woman-wearing-vacation-outfit_23-2150668926.jpg", imageAlt: "Eco-friendly sustainable skirt" id: "6", name: "Duurzame Rok", price: "€55", imageSrc: "https://img.b2bpic.net/free-photo/front-view-woman-wearing-vacation-outfit_23-2150668926.jpg", imageAlt: "Eco-vriendelijke duurzame rok"
} }
]} ]}
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
@@ -67,23 +67,24 @@ export default function ShopPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground="noInvert" useInvertedBackground="noInvert"
buttons={[ buttons={[
{ text: "Custom Order", href: "/contact" } { text: "Aangepaste Bestelling", href: "/contact" }
]} ]}
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>
<div id="reviews" data-section="reviews"> <div id="reviews" data-section="reviews">
<TestimonialCardOne <TestimonialCardOne
title="Customer Reviews" title="Klantbeoordelingen"
description="See what our customers say about their upcycled fashion experience" description="Zie wat onze klanten zeggen over hun geüpcycled modefervaring"
testimonials={[ testimonials={[
{ {
id: "1", name: "Emma S.", role: "Fashion Enthusiast", company: "Amsterdam", rating: 5, id: "1", name: "Emma S.", role: "Mode Enthousiast", company: "Amsterdam", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg", imageAlt: "Customer Emma" imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg", imageAlt: "Klant Emma"
}, },
{ {
id: "2", name: "Sophie D.", role: "Eco Advocate", company: "Paris", rating: 5, id: "2", name: "Sophie D.", role: "Eco Voorstander", company: "Parijs", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "Customer Sophie" imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "Klant Sophie"
} }
]} ]}
gridVariant="uniform-all-items-equal" gridVariant="uniform-all-items-equal"
@@ -93,7 +94,7 @@ export default function ShopPage() {
/> />
</div> </div>
<FooterLogoReveal logoText="Upcycled Threads" /> <FooterLogoReveal logoText="Geüpcycled Threads" />
</ThemeProvider> </ThemeProvider>
); );
} }