bender/dc8c41b7-d6d4-489d-bc42-457f8b484508
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #2

Merged
bender merged 3 commits from version_2 into main 2026-04-17 08:53:52 +00:00
Conversation 0 Commits 3 Files Changed 3 +67 -132
3 changed files with 67 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/app/page.tsx
View File

@@ -2,17 +2,17 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import TextAbout from '@/components/sections/about/TextAbout';
import { Globe, Layers, Users } from "lucide-react";
import { Globe, Layers, Users, Star } from "lucide-react";
export default function LandingPage() {
return (
@@ -32,14 +32,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home", id: "hero"},
{
name: "Drops", id: "products"},
{
name: "Story", id: "about"},
{
name: "FAQ", id: "faq"},
{ name: "Home", id: "hero" },
{ name: "Drops", id: "products" },
{ name: "Story", id: "about" },
{ name: "FAQ", id: "faq" },
]}
brandName="RARE"
/>
@@ -47,41 +43,13 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroSplit
background={{
variant: "plain"}}
background={{ variant: "plain" }}
title="RARE. DEFINED BY THE UNSEEN."
description="We don't follow trends. We craft them for the bold. Experience the next evolution of high-end streetwear."
buttons={[
{
text: "Shop The Drop", href: "#products"},
]}
buttons={[{ text: "Shop The Drop", href: "#products" }]}
imageSrc="http://img.b2bpic.net/free-photo/stylish-woman-wearing-blue-wig-sitting-stairs_158595-4336.jpg"
imageAlt="urban fashion model dark theme"
mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/stunning-african-man-posing-with-gently-smile-stairs-handsome-guy-checkered-jacket-sitting-steps-evening_197531-22068.jpg", alt: "Stunning african man posing with gently smile on stairs. Handsome guy in checkered jacket sitting on steps in evening."},
{
src: "http://img.b2bpic.net/free-photo/brutal-young-man-sunglasses-hat-island-travel_1321-3839.jpg", alt: "Brutal young man in sunglasses and a hat. Island travel."},
{
src: "http://img.b2bpic.net/free-photo/young-handsome-smiling-hipster-black-man-retro-vintage-style-suit-dancing-hip-hop-disco-night-club-having-fun_285396-10218.jpg", alt: "Young handsome smiling hipster black man in retro vintage style suit dancing hip hop in disco night club, having fun"},
{
src: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-white-hoodie-blue-jeans-posing-against-neon-background_89887-1131.jpg", alt: "Beautiful blonde woman in white hoodie and blue jeans posing against neon background"},
{
src: "http://img.b2bpic.net/free-photo/blue-jeans-fabric-details_150588-43.jpg", alt: "the blue jeans fabric details"},
]}
marqueeItems={[
{
type: "text", text: "LIMITED EDITION"},
{
type: "text", text: "RARE EXCLUSIVES"},
{
type: "text", text: "GLOBAL SHIPPING"},
{
type: "text", text: "PREMIUM FABRICS"},
{
type: "text", text: "AVANT-GARDE"},
]}
/>
</div>
@@ -89,10 +57,7 @@ export default function LandingPage() {
<TextAbout
useInvertedBackground={false}
title="The Philosophy of Rare"
buttons={[
{
text: "Learn More"},
]}
buttons={[{ text: "Learn More" }]}
/>
</div>
@@ -103,18 +68,9 @@ export default function LandingPage() {
animationType="slide-up"
useInvertedBackground={true}
products={[
{
id: "1", name: "Obsidian Sneaker", price: "$340", imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-man-outdoor_624325-3549.jpg"},
{
id: "2", name: "Architectural Hoodie", price: "$220", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2744.jpg"},
{
id: "3", name: "Tactical Utility Pant", price: "$280", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-outdoors_23-2151038555.jpg"},
{
id: "4", name: "Minimalist Tee", price: "$85", imageSrc: "http://img.b2bpic.net/free-vector/happy-new-year-2025-text-typography-design-element-flyer-banner-poster-design_460848-18792.jpg"},
{
id: "5", name: "Cargo Tech Vest", price: "$190", imageSrc: "http://img.b2bpic.net/free-photo/soldier-russian-s-war-ukraine-side-view_23-2149437803.jpg"},
{
id: "6", name: "Matte Accessory", price: "$60", imageSrc: "http://img.b2bpic.net/free-photo/skater-wearing-trucker-hat_23-2149431180.jpg"},
{ id: "1", name: "Obsidian Sneaker", price: "$340", imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-man-outdoor_624325-3549.jpg" },
{ id: "2", name: "Architectural Hoodie", price: "$220", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2744.jpg" },
{ id: "3", name: "Tactical Utility Pant", price: "$280", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-outdoors_23-2151038555.jpg" }
]}
title="Current Collection"
description="Each piece is limited. Once they are gone, they remain gone."
@@ -125,10 +81,9 @@ export default function LandingPage() {
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"Hypebeast", "Vogue", "GQ", "Complex", "Highsnobiety"]}
title="Seen In"
description="Cultural icons trust RARE."
names={["Hypebeast", "Vogue", "GQ", "Complex", "Highsnobiety"]}
title="Cultural Legacy"
description="RARE is recognized globally by visionaries and curators of style."
/>
</div>
@@ -138,97 +93,77 @@ export default function LandingPage() {
useInvertedBackground={true}
animationType="slide-up"
metrics={[
{
id: "m1", title: "Collectors", value: "10k+", icon: Users,
},
{
id: "m2", title: "Pieces Crafted", value: "50k+", icon: Layers,
},
{
id: "m3", title: "Global Drops", value: "120", icon: Globe,
},
{ id: "m1", title: "Active Collectors", value: "10k+", icon: Users },
{ id: "m2", title: "Artisan Pieces", value: "50k+", icon: Layers },
{ id: "m3", title: "Global Markets", value: "120", icon: Globe },
]}
title="Our Impact"
description="Built for the rare enthusiast."
title="Exclusivity Metrics"
description="Quantifying the impact of our limited releases."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
<TestimonialCardThirteen
showRating={true}
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "t1", title: "Incredible Quality", quote: "The fabric quality is unmatched. Truly rare.", name: "Alex R.", role: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/handsome-african-american-man-posing-outside-black-hat-beige-coat-with-folder-hand_627829-5454.jpg"},
{
id: "t2", title: "Distinct Aesthetic", quote: "Finally, streetwear that feels original.", name: "Maya S.", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/view-young-man-smiling-camera_197531-33438.jpg"},
{
id: "t3", title: "Elite Fits", quote: "My go-to brand for unique silhouettes.", name: "Leo P.", role: "Influencer", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478943.jpg"},
{
id: "t4", title: "Fast Shipping", quote: "Surprisingly quick shipping for a high-end drop.", name: "Sam D.", role: "Collector", imageSrc: "http://img.b2bpic.net/free-photo/portrait-lone-woman-bar_53876-165211.jpg"},
{
id: "t5", title: "Pure Hype", quote: "RARE always hits different.", name: "Jo K.", role: "Artist", imageSrc: "http://img.b2bpic.net/free-photo/birthday-warm-antique-white-friendship-handmade_1418-4.jpg"},
{ id: "t1", name: "Alex R.", handle: "@alexr", testimonial: "The fabric quality and design intent are genuinely on another level. Pure luxury.", rating: 5 },
{ id: "t2", name: "Maya S.", handle: "@mayas", testimonial: "RARE provides an experience that transcends mere clothing. It's sophisticated and bold.", rating: 5 },
{ id: "t3", name: "Leo P.", handle: "@leop", testimonial: "A truly premium customer experience. Every detail matters to them.", rating: 5 }
]}
title="Voices of the Rare"
description="What our community is saying."
description="Curated feedback from those who understand the value of exclusivity."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
<FaqBase
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{
id: "f1", title: "How limited is each drop?", content: "Every piece is limited to 500 units worldwide."},
{
id: "f2", title: "Do you ship internationally?", content: "Yes, we ship to over 50 countries globally."},
{
id: "f3", title: "Can I return items?", content: "We offer a 14-day return window for unworn items."},
{ id: "f1", title: "What makes RARE exclusive?", content: "We limit every design to 500 units worldwide, ensuring rarity and craftsmanship for our clients." },
{ id: "f2", title: "How is the customer experience different?", content: "From personalized unboxing to white-glove support, we prioritize your journey with us." },
{ id: "f3", title: "Global logistics?", content: "We provide bespoke worldwide shipping services for all our collectors."}
]}
title="Common Questions"
title="Bespoke Inquiries"
faqsAnimation="slide-up"
description="Everything you need to know about your order."
description="Sophisticated answers for the discerning collector."
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "sparkles-gradient"}}
text="Join the rare circle."
buttons={[
{
text: "Contact Support", href: "mailto:support@rare.com"},
]}
<ContactCenter
tag="Connect"
title="Join the Circle"
description="Apply for early access to upcoming drops and private events."
background={{ variant: "sparkles-gradient" }}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Shop", href: "#products"},
{
label: "About", href: "#about"},
],
},
{
items: [
{
label: "Support", href: "#contact"},
{
label: "FAQ", href: "#faq"},
],
},
]}
<FooterBase
logoText="RARE"
columns={[
{
title: "The Brand",
items: [
{ label: "Collection", href: "#products" },
{ label: "Our Story", href: "#about" }
]
},
{
title: "Experience",
items: [
{ label: "Support", href: "#contact" },
{ label: "Information", href: "#faq" }
]
}
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

4
src/app/styles/base.css
View File

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

12
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #000000;
--card: #0c0c0c;
--background: #0a0a0a;
--card: #121212;
--foreground: #ffffff;
--primary-cta: #cee7ff;
--primary-cta: #d4af37;
--primary-cta-text: #000000;
--secondary-cta: #000000;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #ffffff;
--accent: #535353;
--background-accent: #CEE7FF;
--accent: #d4af37;
--background-accent: #262626;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);