31 Commits

Author SHA1 Message Date
6f13e0bc68 Update src/app/page.tsx 2026-01-24 17:40:20 +00:00
0943ac7a97 Update src/app/layout.tsx 2026-01-24 17:40:19 +00:00
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
bc6d3cfa38 Update src/app/shop/page.tsx 2026-01-24 17:17:37 +00:00
b2c93f4d41 Update src/app/page.tsx 2026-01-24 17:17:37 +00:00
ea0644f5d5 Update src/app/layout.tsx 2026-01-24 17:17:36 +00:00
b8ea73173c Update src/app/globals.css 2026-01-24 17:17:35 +00:00
7ed4909ead Update src/app/contact/page.tsx 2026-01-24 17:17:34 +00:00
1df7093b01 Update src/app/blog/page.tsx 2026-01-24 17:17:33 +00:00
165a23fa5a Update src/app/about/page.tsx 2026-01-24 17:17:32 +00:00
7 changed files with 135 additions and 229 deletions

View File

@@ -15,7 +15,7 @@ export default function AboutPage() {
borderRadius="rounded" borderRadius="rounded"
contentWidth="mediumSmall" contentWidth="mediumSmall"
sizing="largeSizeMediumTitles" sizing="largeSizeMediumTitles"
background="circleGradient" background="floatingGradient"
cardStyle="gradient-mesh" cardStyle="gradient-mesh"
primaryButtonStyle="diagonal-gradient" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
@@ -23,45 +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", 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"],
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"],
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", 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"],
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"],
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", 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"],
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"],
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"
} }
]} ]}
@@ -73,25 +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", id: "1", value: "80%", description: "Minder water gebruikt vergeleken met conventionele kledingproductie"
value: "80%",
description: "Less water used compared to conventional clothing production"
}, },
{ {
id: "2", id: "2", value: "Nul", description: "Afval naar stortplaats van ons productieproces"
value: "Zero",
description: "Waste sent to landfill from our production process"
} }
]} ]}
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);
} }
@@ -88,7 +89,7 @@ export default function BlogPage() {
borderRadius="rounded" borderRadius="rounded"
contentWidth="mediumSmall" contentWidth="mediumSmall"
sizing="largeSizeMediumTitles" sizing="largeSizeMediumTitles"
background="circleGradient" background="floatingGradient"
cardStyle="gradient-mesh" cardStyle="gradient-mesh"
primaryButtonStyle="diagonal-gradient" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
@@ -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,10 +128,10 @@ export default function BlogPage() {
)} )}
<FooterLogoReveal <FooterLogoReveal
logoText="Upcycled Threads" logoText="Geüpcycled Threads"
/> />
</div> </div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }

View File

@@ -15,7 +15,7 @@ export default function ContactPage() {
borderRadius="rounded" borderRadius="rounded"
contentWidth="mediumSmall" contentWidth="mediumSmall"
sizing="largeSizeMediumTitles" sizing="largeSizeMediumTitles"
background="circleGradient" background="floatingGradient"
cardStyle="gradient-mesh" cardStyle="gradient-mesh"
primaryButtonStyle="diagonal-gradient" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
@@ -23,72 +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", 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."
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: "2", 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."
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: "3", 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."
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: "4", 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."
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: "5", 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."
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: "6", 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."
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."
} }
]} ]}
/> />
</div> </div>
<FooterLogoReveal logoText="Upcycled Threads" /> <FooterLogoReveal logoText="Geüpcycled Threads" />
</ThemeProvider> </ThemeProvider>
); );
} }

View File

@@ -578,7 +578,7 @@ html {
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: var(--font-source-sans-3), sans-serif; font-family: var(--font-poppins), sans-serif;
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overscroll-behavior: none; overscroll-behavior: none;
@@ -591,5 +591,5 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-source-sans-3), sans-serif; font-family: var(--font-poppins), sans-serif;
} }

View File

@@ -1,26 +1,19 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Source_Sans_3 } from "next/font/google"; import { Poppins } from "next/font/google";
import "./globals.css"; import "./globals.css";
const sourceSans3 = Source_Sans_3({ const poppins = Poppins({
variable: "--font-source-sans-3", variable: "--font-poppins", subsets: ["latin"],
subsets: ["latin"], weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Upcycled Threads | Sustainable Fashion & Handcrafted Clothing", 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"],
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"],
openGraph: { openGraph: {
title: "Upcycled Threads | Sustainable Fashion", title: "Geüpcycled Threads | Duurzame Mode", description: "Ontdek unieke, handgemaakte geüpcycled modestukken die creativiteit en milieuverantwoordelijkheid vieren.", siteName: "Geüpcycled Threads", type: "website"
description: "Discover unique, handcrafted upcycled fashion pieces that celebrate creativity and environmental responsibility.",
siteName: "Upcycled Threads",
type: "website",
}, },
twitter: { twitter: {
card: "summary_large_image", card: "summary_large_image", title: "Geüpcycled Threads | Duurzame Mode", description: "Transformeer je garderobe met unieke, handgemaakte geüpcycled stukken"
title: "Upcycled Threads | Sustainable Fashion",
description: "Transform your wardrobe with unique, handcrafted upcycled pieces",
}, },
robots: { robots: {
index: true, index: true,
@@ -34,8 +27,8 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="nl">
<body className={`${sourceSans3.variable} antialiased`}> <body className={`${poppins.variable} antialiased`}>
{children} {children}
<script <script
@@ -1258,4 +1251,4 @@ export default function RootLayout({
</body> </body>
</html> </html>
); );
} }

View File

@@ -20,7 +20,7 @@ export default function HomePage() {
borderRadius="rounded" borderRadius="rounded"
contentWidth="mediumSmall" contentWidth="mediumSmall"
sizing="largeSizeMediumTitles" sizing="largeSizeMediumTitles"
background="circleGradient" background="floatingGradient"
cardStyle="gradient-mesh" cardStyle="gradient-mesh"
primaryButtonStyle="diagonal-gradient" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
@@ -28,81 +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 crop-20"
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", 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"
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: "2", 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"
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: "3", 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"
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: "4", 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"
name: "Upcycled Joggers",
price: "€85",
imageSrc: "https://img.b2bpic.net/free-photo/woman-holding-bag-fruit-park_23-2148595056.jpg",
imageAlt: "Comfortable upcycled joggers"
} }
]} ]}
gridVariant="four-items-2x2-equal-grid" gridVariant="four-items-2x2-equal-grid"
@@ -110,51 +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", id: "1", name: "Emma S.", role: "Mode Liefhebber", company: "Amsterdam", rating: 5,
name: "Emma S.", imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg", imageAlt: "Klant Emma"
role: "Fashion Lover",
company: "Amsterdam",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",
imageAlt: "Customer Emma"
}, },
{ {
id: "2", id: "2", name: "Sophie D.", role: "Duurzaamheid Voorstander",
name: "Sophie D.", company: "Parijs", rating: 5,
role: "Sustainability Advocate", imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "Klant Sophie"
company: "Paris",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",
imageAlt: "Customer Sophie"
}, },
{ {
id: "3", id: "3", name: "Marcus B.", role: "Ontwerp Professional", company: "Berlijn",
name: "Marcus B.",
role: "Design Professional",
company: "Berlin",
rating: 5, rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", imageAlt: "Klant Marcus"
imageAlt: "Customer Marcus"
}, },
{ {
id: "4", id: "4", name: "Lisa M.", role: "Eco-Krijger", company: "Kopenhagen", rating: 5,
name: "Lisa M.", 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"
role: "Eco-Warrior",
company: "Copenhagen",
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"
} }
]} ]}
gridVariant="uniform-all-items-equal" gridVariant="uniform-all-items-equal"
@@ -166,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

@@ -16,7 +16,7 @@ export default function ShopPage() {
borderRadius="rounded" borderRadius="rounded"
contentWidth="mediumSmall" contentWidth="mediumSmall"
sizing="largeSizeMediumTitles" sizing="largeSizeMediumTitles"
background="circleGradient" background="floatingGradient"
cardStyle="gradient-mesh" cardStyle="gradient-mesh"
primaryButtonStyle="diagonal-gradient" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
@@ -24,66 +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", 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"
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: "2", 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"
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: "3", 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"
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: "4", 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"
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: "5", 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"
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: "6", 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"
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"
} }
]} ]}
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
@@ -91,33 +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", id: "1", name: "Emma S.", role: "Mode Enthousiast", company: "Amsterdam", rating: 5,
name: "Emma S.", imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg", imageAlt: "Klant Emma"
role: "Fashion Enthusiast",
company: "Amsterdam",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",
imageAlt: "Customer Emma"
}, },
{ {
id: "2", id: "2", name: "Sophie D.", role: "Eco Voorstander", company: "Parijs", rating: 5,
name: "Sophie D.", imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "Klant Sophie"
role: "Eco Advocate",
company: "Paris",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",
imageAlt: "Customer Sophie"
} }
]} ]}
gridVariant="uniform-all-items-equal" gridVariant="uniform-all-items-equal"
@@ -127,7 +94,7 @@ export default function ShopPage() {
/> />
</div> </div>
<FooterLogoReveal logoText="Upcycled Threads" /> <FooterLogoReveal logoText="Geüpcycled Threads" />
</ThemeProvider> </ThemeProvider>
); );
} }