Merge version_1 into main #2

Merged
bender merged 2 commits from version_1 into main 2026-04-04 11:48:55 +00:00
2 changed files with 158 additions and 360 deletions

View File

@@ -8,129 +8,70 @@ import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import { MousePointer, ShoppingBag, TrendingUp } from "lucide-react";
export default function LandingPage() {
export default function AnalyticsPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Analytics",
id: "/analytics",
},
]}
brandName="UrbanThreads"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Analytics", id: "/analytics" }
]}
brandName="UrbanThreads"
/>
</div>
<div id="analytics-stats" data-section="analytics-stats">
<MetricCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "$12,400",
title: "Total Revenue",
description: "Last 30 days",
icon: TrendingUp,
},
{
id: "m2",
value: "1,204",
title: "Units Sold",
description: "T-shirt inventory",
icon: ShoppingBag,
},
{
id: "m3",
value: "14.2%",
title: "Conversion Rate",
description: "Visitor to buyer",
icon: MousePointer,
},
]}
title="Creator Analytics"
description="Real-time sales performance and revenue metrics."
/>
</div>
<div id="analytics-stats" data-section="analytics-stats">
<MetricCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "$12,400", title: "Total Revenue", description: "Last 30 days", icon: TrendingUp },
{ id: "m2", value: "1,204", title: "Units Sold", description: "T-shirt inventory", icon: ShoppingBag },
{ id: "m3", value: "14.2%", title: "Conversion Rate", description: "Visitor to buyer", icon: MousePointer }
]}
title="Creator Analytics"
description="Real-time sales performance and revenue metrics."
/>
</div>
<div id="blog" data-section="blog">
<BlogCardOne
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Analytics Insights"
description="Latest trends in fashion retail data."
blogs={[
{
id: "b1",
category: "Insights",
title: "Summer Drops Analysis",
excerpt: "Deep dive into Q2 sales performance.",
imageSrc: "http://img.b2bpic.net/free-photo/computer-dark-room-with-graphs-screen_169016-57872.jpg?_wi=1",
authorName: "Jane Doe",
authorAvatar: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-blue-shirt_158595-1023.jpg",
date: "Oct 12",
},
{
id: "b2",
category: "Reports",
title: "2025 Forecasting",
excerpt: "Predicting the next wave of urban style.",
imageSrc: "http://img.b2bpic.net/free-photo/computer-dark-room-with-graphs-screen_169016-57872.jpg?_wi=2",
authorName: "John Smith",
authorAvatar: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-girl-posing-standing-white-wall_176420-8515.jpg",
date: "Nov 01",
},
]}
/>
</div>
<div id="blog" data-section="blog">
<BlogCardOne
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Analytics Insights"
description="Latest trends in fashion retail data."
blogs={[
{ id: "b1", category: "Insights", title: "Summer Drops Analysis", excerpt: "Deep dive into Q2 sales performance.", imageSrc: "http://img.b2bpic.net/free-photo/computer-dark-room-with-graphs-screen_169016-57872.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-blue-shirt_158595-1023.jpg", date: "Oct 12" },
{ id: "b2", category: "Reports", title: "2025 Forecasting", excerpt: "Predicting the next wave of urban style.", imageSrc: "http://img.b2bpic.net/free-photo/computer-dark-room-with-graphs-screen_169016-57872.jpg", authorName: "John Smith", authorAvatar: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-girl-posing-standing-white-wall_176420-8515.jpg", date: "Nov 01" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="UrbanThreads"
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "/about",
},
{
label: "Careers",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "FAQ",
href: "#",
},
{
label: "Contact",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="UrbanThreads"
columns={[
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Careers", href: "#" }] },
{ title: "Support", items: [{ label: "FAQ", href: "#" }, { label: "Contact", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);

View File

@@ -16,261 +16,118 @@ export default function LandingPage() {
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Analytics",
id: "/analytics",
},
]}
brandName="UrbanThreads"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Analytics", id: "/analytics" }
]}
brandName="UrbanThreads"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{
variant: "gradient-bars",
}}
title="Minimalist Streetwear, Redefined."
description="Discover high-quality, sustainably produced t-shirts designed for the modern individual."
buttons={[
{
text: "Shop Now",
href: "#products",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/trendy-teenager-boy-girl-posing-together_23-2149085193.jpg?_wi=1"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-blue-shirt_158595-1023.jpg",
alt: "User 1",
},
{
src: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-girl-posing-standing-white-wall_176420-8515.jpg",
alt: "User 2",
},
{
src: "http://img.b2bpic.net/free-photo/young-beautiful-worker-woman-wearing-staff-uniform-tshirt-isolated-yellow-background-doing-ok-gesture-shocked-with-surprised-face-eye-looking-through-fingers-unbelieving-expression_839833-5943.jpg",
alt: "User 3",
},
{
src: "http://img.b2bpic.net/free-photo/football-composition-with-jersey-trousers_23-2147827723.jpg",
alt: "User 4",
},
{
src: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448758.jpg",
alt: "User 5",
},
]}
marqueeItems={[
{
type: "text",
text: "Sustainable",
},
{
type: "text",
text: "Minimalist",
},
{
type: "text",
text: "High Quality",
},
{
type: "text",
text: "Ethical",
},
{
type: "text",
text: "Modern",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{ variant: "gradient-bars" }}
title="Minimalist Streetwear, Redefined."
description="Discover high-quality, sustainably produced t-shirts designed for the modern individual."
buttons={[{ text: "Shop Now", href: "#products" }]}
imageSrc="http://img.b2bpic.net/free-photo/trendy-teenager-boy-girl-posing-together_23-2149085193.jpg"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-blue-shirt_158595-1023.jpg", alt: "User 1" },
{ src: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-girl-posing-standing-white-wall_176420-8515.jpg", alt: "User 2" },
{ src: "http://img.b2bpic.net/free-photo/young-beautiful-worker-woman-wearing-staff-uniform-tshirt-isolated-yellow-background-doing-ok-gesture-shocked-with-surprised-face-eye-looking-through-fingers-unbelieving-expression_839833-5943.jpg", alt: "User 3" },
{ src: "http://img.b2bpic.net/free-photo/football-composition-with-jersey-trousers_23-2147827723.jpg", alt: "User 4" },
{ src: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448758.jpg", alt: "User 5" }
]}
marqueeItems={[
{ type: "text", text: "Sustainable" },
{ type: "text", text: "Minimalist" },
{ type: "text", text: "High Quality" },
{ type: "text", text: "Ethical" },
{ type: "text", text: "Modern" }
]}
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Urban Basic - Black",
price: "45$",
variant: "Essential",
imageSrc: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-blue-shirt_158595-1023.jpg?_wi=1",
},
{
id: "p2",
name: "Urban Basic - White",
price: "45$",
variant: "Essential",
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-girl-posing-standing-white-wall_176420-8515.jpg",
},
{
id: "p3",
name: "Graphic Print - Mono",
price: "55$",
variant: "Graphic",
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-worker-woman-wearing-staff-uniform-tshirt-isolated-yellow-background-doing-ok-gesture-shocked-with-surprised-face-eye-looking-through-fingers-unbelieving-expression_839833-5943.jpg",
},
{
id: "p4",
name: "Aero Tee - Slate",
price: "60$",
variant: "Premium",
imageSrc: "http://img.b2bpic.net/free-photo/football-composition-with-jersey-trousers_23-2147827723.jpg?_wi=1",
},
{
id: "p5",
name: "Oversized - Charcoal",
price: "65$",
variant: "Essential",
imageSrc: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448758.jpg",
},
{
id: "p6",
name: "Limited Drop - 001",
price: "85$",
variant: "Collector",
imageSrc: "http://img.b2bpic.net/free-photo/composition-father-s-day-clothing_23-2148868940.jpg",
},
]}
title="Our Collection"
description="Explore our limited edition t-shirt drops."
/>
</div>
<div id="products" data-section="products">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Urban Basic - Black", price: "45$", variant: "Essential", imageSrc: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-blue-shirt_158595-1023.jpg" },
{ id: "p2", name: "Urban Basic - White", price: "45$", variant: "Essential", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-girl-posing-standing-white-wall_176420-8515.jpg" },
{ id: "p3", name: "Graphic Print - Mono", price: "55$", variant: "Graphic", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-worker-woman-wearing-staff-uniform-tshirt-isolated-yellow-background-doing-ok-gesture-shocked-with-surprised-face-eye-looking-through-fingers-unbelieving-expression_839833-5943.jpg" },
{ id: "p4", name: "Aero Tee - Slate", price: "60$", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/football-composition-with-jersey-trousers_23-2147827723.jpg" },
{ id: "p5", name: "Oversized - Charcoal", price: "65$", variant: "Essential", imageSrc: "http://img.b2bpic.net/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448758.jpg" },
{ id: "p6", name: "Limited Drop - 001", price: "85$", variant: "Collector", imageSrc: "http://img.b2bpic.net/free-photo/composition-father-s-day-clothing_23-2148868940.jpg" }
]}
title="Our Collection"
description="Explore our limited edition t-shirt drops."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
title="Frequently Asked Questions"
description="Everything you need to know about our products and analytics."
imageSrc="http://img.b2bpic.net/free-photo/football-composition-with-jersey-trousers_23-2147827723.jpg?_wi=2"
mediaAnimation="slide-up"
faqsAnimation="blur-reveal"
faqs={[
{
id: "f1",
title: "How do I access analytics?",
content: "Analytics are available for verified creator accounts. Sign in to your dashboard.",
},
{
id: "f2",
title: "What is the return policy?",
content: "We accept returns within 30 days of purchase for all unworn apparel.",
},
{
id: "f3",
title: "Are materials sustainable?",
content: "Yes, we use 100% organic cotton and recycled materials in our manufacturing.",
},
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
title="Frequently Asked Questions"
description="Everything you need to know about our products and analytics."
imageSrc="http://img.b2bpic.net/free-photo/football-composition-with-jersey-trousers_23-2147827723.jpg"
mediaAnimation="slide-up"
faqsAnimation="blur-reveal"
faqs={[
{ id: "f1", title: "How do I access analytics?", content: "Analytics are available for verified creator accounts. Sign in to your dashboard." },
{ id: "f2", title: "What is the return policy?", content: "We accept returns within 30 days of purchase for all unworn apparel." },
{ id: "f3", title: "Are materials sustainable?", content: "Yes, we use 100% organic cotton and recycled materials in our manufacturing." }
]}
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
title="Trusted by Creators"
description="Join a community of forward-thinking fashion influencers."
names={[
"Vogue Daily",
"Streetwear Weekly",
"Urban Trendz",
"Modern Apparel Co",
"Style Hub",
]}
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
title="Trusted by Creators"
description="Join a community of forward-thinking fashion influencers."
names={["Vogue Daily", "Streetwear Weekly", "Urban Trendz", "Modern Apparel Co", "Style Hub"]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Creator Plans"
description="Unlock advanced analytics and drops."
plans={[
{
id: "s1",
title: "Basic",
price: "Free",
period: "/mo",
features: [
"Basic dashboard",
"Standard support",
],
button: {
text: "Get Started",
},
imageSrc: "http://img.b2bpic.net/free-photo/trendy-teenager-boy-girl-posing-together_23-2149085193.jpg?_wi=2",
imageAlt: "urban fashion model streetwear",
},
{
id: "s2",
title: "Pro",
price: "$29",
period: "/mo",
features: [
"Advanced analytics",
"Priority support",
"Trend forecasting",
],
button: {
text: "Upgrade Now",
},
imageSrc: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-blue-shirt_158595-1023.jpg?_wi=2",
imageAlt: "minimalist cotton t-shirt black",
},
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Creator Plans"
description="Unlock advanced analytics and drops."
plans={[
{ id: "s1", title: "Basic", price: "Free", period: "/mo", features: ["Basic dashboard", "Standard support"], button: { text: "Get Started" }, imageSrc: "http://img.b2bpic.net/free-photo/trendy-teenager-boy-girl-posing-together_23-2149085193.jpg", imageAlt: "urban fashion model streetwear" },
{ id: "s2", title: "Pro", price: "$29", period: "/mo", features: ["Advanced analytics", "Priority support", "Trend forecasting"], button: { text: "Upgrade Now" }, imageSrc: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-blue-shirt_158595-1023.jpg", imageAlt: "minimalist cotton t-shirt black" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="UrbanThreads"
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "/about",
},
{
label: "Careers",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "FAQ",
href: "#",
},
{
label: "Contact",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="UrbanThreads"
columns={[
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Careers", href: "#" }] },
{ title: "Support", items: [{ label: "FAQ", href: "#" }, { label: "Contact", href: "#" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);