Merge version_1 into main #2
213
src/app/page.tsx
213
src/app/page.tsx
@@ -25,8 +25,7 @@ export default function HomePage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Navigate",
|
||||
items: [
|
||||
title: "Navigate", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Shop", href: "#products" },
|
||||
{ label: "Donate", href: "/donate" },
|
||||
@@ -34,8 +33,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
items: [
|
||||
title: "Community", items: [
|
||||
{ label: "Get Involved", href: "/donate" },
|
||||
{ label: "Volunteer", href: "/donate" },
|
||||
{ label: "Events", href: "/donate" },
|
||||
@@ -43,8 +41,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Support", items: [
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "/donate" },
|
||||
{ label: "Shipping Info", href: "#" },
|
||||
@@ -52,8 +49,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Accessibility", href: "#" },
|
||||
@@ -79,9 +75,7 @@ export default function HomePage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Donate Clothing",
|
||||
href: "/donate",
|
||||
}}
|
||||
text: "Donate Clothing", href: "/donate"}}
|
||||
brandName="The Traveling Thread"
|
||||
/>
|
||||
</div>
|
||||
@@ -96,42 +90,27 @@ export default function HomePage() {
|
||||
imageSrc="http://img.b2bpic.net/free-photo/arrangement-colorful-fabric-shelf_23-2148180386.jpg"
|
||||
imageAlt="Kids and adults sorting clothing together"
|
||||
imagePosition="right"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Sustainable Clothing",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Shop Sustainable Clothing", href: "#products"},
|
||||
{
|
||||
text: "Donate Clothing",
|
||||
href: "/donate",
|
||||
},
|
||||
text: "Donate Clothing", href: "/donate"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Maria Garcia",
|
||||
handle: "Parent, Community Member",
|
||||
testimonial:
|
||||
"The Traveling Thread gave my kids a creative place to learn and give back. Seeing them excited about sustainability changed our family forever.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-joyful-woman_23-2148369593.jpg",
|
||||
},
|
||||
name: "Maria Garcia", handle: "Parent, Community Member", testimonial:
|
||||
"The Traveling Thread gave my kids a creative place to learn and give back. Seeing them excited about sustainability changed our family forever.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-joyful-woman_23-2148369593.jpg"},
|
||||
{
|
||||
name: "James Chen",
|
||||
handle: "Local Business Owner",
|
||||
testimonial:
|
||||
"This initiative is transforming how we think about fashion waste. The community impact is incredible and inspiring.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-wearing-casual-clothes-with-happy-cool-smile-face-lucky-person_839833-3198.jpg",
|
||||
},
|
||||
name: "James Chen", handle: "Local Business Owner", testimonial:
|
||||
"This initiative is transforming how we think about fashion waste. The community impact is incredible and inspiring.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-wearing-casual-clothes-with-happy-cool-smile-face-lucky-person_839833-3198.jpg"},
|
||||
{
|
||||
name: "Sophia Rodriguez",
|
||||
handle: "Volunteer, Designer",
|
||||
testimonial:
|
||||
"Upcycling with purpose feels amazing. Every piece tells a story and makes a real difference.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-redhead-caucasian-woman-smiling-cheerfully_273609-9095.jpg",
|
||||
},
|
||||
name: "Sophia Rodriguez", handle: "Volunteer, Designer", testimonial:
|
||||
"Upcycling with purpose feels amazing. Every piece tells a story and makes a real difference.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-redhead-caucasian-woman-smiling-cheerfully_273609-9095.jpg"},
|
||||
]}
|
||||
testimonialRotationInterval={5000}
|
||||
mediaAnimation="slide-up"
|
||||
@@ -143,15 +122,10 @@ export default function HomePage() {
|
||||
<TextSplitAbout
|
||||
title="Our Mission"
|
||||
description={[
|
||||
"The Traveling Thread is more than clothing. It's a movement celebrating community, sustainability, and intergenerational connection.",
|
||||
"We collect donated clothing from our community, then reduce fast fashion waste, upcycle clothing into unique pieces, sell affordable sustainable fashion, and donate 50% of proceeds back to community projects.",
|
||||
"We believe fashion should connect generations, protect the planet, and uplift people.",
|
||||
]}
|
||||
"The Traveling Thread is more than clothing. It's a movement celebrating community, sustainability, and intergenerational connection.", "We collect donated clothing from our community, then reduce fast fashion waste, upcycle clothing into unique pieces, sell affordable sustainable fashion, and donate 50% of proceeds back to community projects.", "We believe fashion should connect generations, protect the planet, and uplift people."]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More About Impact",
|
||||
href: "#metrics",
|
||||
},
|
||||
text: "Learn More About Impact", href: "#metrics"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
showBorder={true}
|
||||
@@ -166,22 +140,16 @@ export default function HomePage() {
|
||||
features={[
|
||||
{
|
||||
icon: Gift,
|
||||
title: "Donate Clothing",
|
||||
description:
|
||||
"Community members donate gently used clothes and help fund sustainable fashion initiatives.",
|
||||
},
|
||||
title: "Donate Clothing", description:
|
||||
"Community members donate gently used clothes and help fund sustainable fashion initiatives."},
|
||||
{
|
||||
icon: Scissors,
|
||||
title: "Sort & Create",
|
||||
description:
|
||||
"Kids, volunteers, and elders work together to sort, redesign, and upcycle donated garments into treasured pieces.",
|
||||
},
|
||||
title: "Sort & Create", description:
|
||||
"Kids, volunteers, and elders work together to sort, redesign, and upcycle donated garments into treasured pieces."},
|
||||
{
|
||||
icon: Heart,
|
||||
title: "Give Back",
|
||||
description:
|
||||
"50% of proceeds support local community projects including education, mentorship, and environmental initiatives.",
|
||||
},
|
||||
title: "Give Back", description:
|
||||
"50% of proceeds support local community projects including education, mentorship, and environmental initiatives."},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
@@ -202,35 +170,15 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "community-closet-1",
|
||||
name: "Community Closet Essentials",
|
||||
price: "$25-45",
|
||||
variant: "Everyday Basics · Multiple Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-girl-field-wearing-sunglasses_23-2148504809.jpg?_wi=1",
|
||||
imageAlt: "Casual everyday clothing collection",
|
||||
},
|
||||
id: "community-closet-1", name: "Community Closet Essentials", price: "$25-45", variant: "Everyday Basics · Multiple Colors", imageSrc: "http://img.b2bpic.net/free-photo/smiley-girl-field-wearing-sunglasses_23-2148504809.jpg", imageAlt: "Casual everyday clothing collection"},
|
||||
{
|
||||
id: "upcycled-original-1",
|
||||
name: "Upcycled Original Pieces",
|
||||
price: "$55-85",
|
||||
variant: "One-of-a-Kind · Handcrafted",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-adult-reusing-fabric-material_23-2149400652.jpg?_wi=1",
|
||||
imageAlt: "Unique upcycled fashion piece",
|
||||
},
|
||||
id: "upcycled-original-1", name: "Upcycled Original Pieces", price: "$55-85", variant: "One-of-a-Kind · Handcrafted", imageSrc: "http://img.b2bpic.net/free-photo/young-adult-reusing-fabric-material_23-2149400652.jpg", imageAlt: "Unique upcycled fashion piece"},
|
||||
{
|
||||
id: "vintage-finds-1",
|
||||
name: "Vintage Finds",
|
||||
price: "$35-65",
|
||||
variant: "Rare & Unique · Curated Selection",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/ancient-typeface_1284-46594.jpg?_wi=1",
|
||||
imageAlt: "Vintage thrift store treasures",
|
||||
},
|
||||
id: "vintage-finds-1", name: "Vintage Finds", price: "$35-65", variant: "Rare & Unique · Curated Selection", imageSrc: "http://img.b2bpic.net/free-vector/ancient-typeface_1284-46594.jpg", imageAlt: "Vintage thrift store treasures"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Browse Full Collection",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Browse Full Collection", href: "#products"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
@@ -245,26 +193,11 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Pounds of Clothing Saved",
|
||||
subtitle: "From landfills and waste",
|
||||
category: "Environmental",
|
||||
value: "1,000+",
|
||||
},
|
||||
id: "1", title: "Pounds of Clothing Saved", subtitle: "From landfills and waste", category: "Environmental", value: "1,000+"},
|
||||
{
|
||||
id: "2",
|
||||
title: "Community Members Helped",
|
||||
subtitle: "Employed and supported",
|
||||
category: "Social Impact",
|
||||
value: "300+",
|
||||
},
|
||||
id: "2", title: "Community Members Helped", subtitle: "Employed and supported", category: "Social Impact", value: "300+"},
|
||||
{
|
||||
id: "3",
|
||||
title: "Profits Reinvested",
|
||||
subtitle: "Back into local programs",
|
||||
category: "Community",
|
||||
value: "50%",
|
||||
},
|
||||
id: "3", title: "Profits Reinvested", subtitle: "Back into local programs", category: "Community", value: "50%"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -278,29 +211,13 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
members={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Mitchell",
|
||||
role: "Founder & Community Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glasses-smiling-arm-horizontal-front_1262-2739.jpg?_wi=1",
|
||||
},
|
||||
id: "1", name: "Sarah Mitchell", role: "Founder & Community Director", imageSrc: "http://img.b2bpic.net/free-photo/glasses-smiling-arm-horizontal-front_1262-2739.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marcus Lee",
|
||||
role: "Upcycling Designer Lead",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glassblower-polishing-grinding-glassware_107420-74259.jpg?_wi=1",
|
||||
},
|
||||
id: "2", name: "Marcus Lee", role: "Upcycling Designer Lead", imageSrc: "http://img.b2bpic.net/free-photo/glassblower-polishing-grinding-glassware_107420-74259.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Eleanor Johnson",
|
||||
role: "Senior Mentor & Guide",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/child-spending-time-with-their-parents_23-2149453363.jpg?_wi=1",
|
||||
},
|
||||
id: "3", name: "Eleanor Johnson", role: "Senior Mentor & Guide", imageSrc: "http://img.b2bpic.net/free-photo/child-spending-time-with-their-parents_23-2149453363.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Alex Patel",
|
||||
role: "Youth Outreach Coordinator",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-protesting-with-placard-world-environment-day-outdoors_23-2149571876.jpg",
|
||||
},
|
||||
id: "4", name: "Alex Patel", role: "Youth Outreach Coordinator", imageSrc: "http://img.b2bpic.net/free-photo/person-protesting-with-placard-world-environment-day-outdoors_23-2149571876.jpg"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
@@ -316,21 +233,13 @@ export default function HomePage() {
|
||||
author="Maria Garcia, Parent & Community Member"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-beautiful-joyful-woman_23-2148369593.jpg",
|
||||
alt: "Maria Garcia",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-beautiful-joyful-woman_23-2148369593.jpg", alt: "Maria Garcia"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-handsome-man-wearing-casual-clothes-with-happy-cool-smile-face-lucky-person_839833-3198.jpg",
|
||||
alt: "Community Member",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/young-handsome-man-wearing-casual-clothes-with-happy-cool-smile-face-lucky-person_839833-3198.jpg", alt: "Community Member"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-redhead-caucasian-woman-smiling-cheerfully_273609-9095.jpg",
|
||||
alt: "Community Member",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-redhead-caucasian-woman-smiling-cheerfully_273609-9095.jpg", alt: "Community Member"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-vertical-image-smiling-african-man-looking_171337-9837.jpg",
|
||||
alt: "Community Member",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-vertical-image-smiling-african-man-looking_171337-9837.jpg", alt: "Community Member"},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
@@ -348,41 +257,23 @@ export default function HomePage() {
|
||||
animationType="smooth"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What types of clothing do you accept for donation?",
|
||||
content:
|
||||
"We accept gently used clothing in good condition: casual wear, dresses, shirts, pants, sweaters, jackets, and accessories. Items should be clean and free of major tears or stains. We're especially grateful for seasonal items, kids clothing, and vintage pieces.",
|
||||
},
|
||||
id: "1", title: "What types of clothing do you accept for donation?", content:
|
||||
"We accept gently used clothing in good condition: casual wear, dresses, shirts, pants, sweaters, jackets, and accessories. Items should be clean and free of major tears or stains. We're especially grateful for seasonal items, kids clothing, and vintage pieces."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How do I donate clothing?",
|
||||
content:
|
||||
"Visit our donation page to find drop-off locations near you or schedule a pickup. You can also bring items directly to our community center during business hours. We provide pickup service for large donations.",
|
||||
},
|
||||
id: "2", title: "How do I donate clothing?", content:
|
||||
"Visit our donation page to find drop-off locations near you or schedule a pickup. You can also bring items directly to our community center during business hours. We provide pickup service for large donations."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Where does the money from sales go?",
|
||||
content:
|
||||
"50% of all profits are reinvested directly into our community programs: youth creativity workshops, elder mentorship initiatives, and support for families in need. The remaining proceeds support operations and sustainable growth.",
|
||||
},
|
||||
id: "3", title: "Where does the money from sales go?", content:
|
||||
"50% of all profits are reinvested directly into our community programs: youth creativity workshops, elder mentorship initiatives, and support for families in need. The remaining proceeds support operations and sustainable growth."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Can I volunteer with The Traveling Thread?",
|
||||
content:
|
||||
"Absolutely! We welcome volunteers of all ages and skill levels. Whether you're interested in sorting, designing, teaching, or community organizing, there's a place for you. Contact us to learn about current opportunities.",
|
||||
},
|
||||
id: "4", title: "Can I volunteer with The Traveling Thread?", content:
|
||||
"Absolutely! We welcome volunteers of all ages and skill levels. Whether you're interested in sorting, designing, teaching, or community organizing, there's a place for you. Contact us to learn about current opportunities."},
|
||||
{
|
||||
id: "5",
|
||||
title: "What makes your upcycled pieces unique?",
|
||||
content:
|
||||
"Each upcycled original is handcrafted by our design team, often collaboratively with community members and volunteers. No two pieces are alike—they're truly one-of-a-kind creations that transform donated clothing into wearable art.",
|
||||
},
|
||||
id: "5", title: "What makes your upcycled pieces unique?", content:
|
||||
"Each upcycled original is handcrafted by our design team, often collaboratively with community members and volunteers. No two pieces are alike—they're truly one-of-a-kind creations that transform donated clothing into wearable art."},
|
||||
{
|
||||
id: "6",
|
||||
title: "Do you ship orders?",
|
||||
content:
|
||||
"Yes! We ship domestically and internationally. Orders typically ship within 3-5 business days. We use sustainable packaging materials to minimize environmental impact. Shipping costs vary by location.",
|
||||
},
|
||||
id: "6", title: "Do you ship orders?", content:
|
||||
"Yes! We ship domestically and internationally. Orders typically ship within 3-5 business days. We use sustainable packaging materials to minimize environmental impact. Shipping costs vary by location."},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,51 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from "react";
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text: string;
|
||||
className?: string;
|
||||
fontSize?: number;
|
||||
fontWeight?: string | number;
|
||||
letterSpacing?: string | number;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
|
||||
text,
|
||||
className = "", fontSize = 24,
|
||||
fontWeight = 700,
|
||||
letterSpacing = 0,
|
||||
}) => {
|
||||
const viewBoxWidth = text.length * (fontSize * 0.6) + 40;
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
viewBox={`0 0 ${viewBoxWidth} ${fontSize + 20}`}
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
x="20"
|
||||
y={fontSize + 2}
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
letterSpacing={letterSpacing}
|
||||
fill="currentColor"
|
||||
dominantBaseline="middle"
|
||||
textAnchor="start"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
};
|
||||
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user