Merge version_4 into main

Merge version_4 into main

src/app/contact/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <NavbarLayoutFloatingOverlay
+        navItems={[
+          { name: "Shop", id: "/products" },
+          { name: "Story", id: "/story" },
+          { name: "FAQ", id: "/faq" },
+          { name: "Contact", id: "/contact" },
+          { name: "Drop List", id: "/newsletter" },
+        ]}
+        brandName="Everthread Vintage"
+      />
+      <ContactSplit
+        tag="Get in Touch"
+        title="How can we help?"
+        description="Our team is dedicated to supporting your vintage journey. Send us a message and we'll be in touch shortly."
+        background={{ variant: "plain" }}
+        useInvertedBackground={false}
+      />
+      <FooterBase
+        columns={[
+          { title: "Shop", items: [{ label: "All Drops", href: "/products" }, { label: "Best Sellers", href: "#" }] },
+          { title: "Company", items: [{ label: "Our Story", href: "/story" }, { label: "Sustainability", href: "#" }] },
+          { title: "Support", items: [{ label: "Contact", href: "/contact" }, { label: "FAQ", href: "/faq" }, { label: "Shipping", href: "#" }] },
+        ]}
+        logoText="Everthread Vintage"
+      />
+    </ThemeProvider>
+  );
+}

src/app/faq/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function FaqPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <NavbarLayoutFloatingOverlay
+        navItems={[
+          { name: "Shop", id: "/products" },
+          { name: "Story", id: "/story" },
+          { name: "FAQ", id: "/faq" },
+          { name: "Contact", id: "/contact" },
+          { name: "Drop List", id: "/newsletter" },
+        ]}
+        brandName="Everthread Vintage"
+      />
+      <FaqDouble 
+        title="Frequently Asked Questions" 
+        description="Everything you need to know about our curation and shipping process."
+        faqsAnimation="slide-up"
+        textboxLayout="default"
+        useInvertedBackground={false}
+        faqs={[
+          { id: "1", title: "How do you source your vintage?", content: "We source pieces through curated collections and verified archives to ensure quality and authenticity." },
+          { id: "2", title: "What is your shipping policy?", content: "We offer worldwide shipping with tracking information provided for every order." }
+        ]}
+      />
+      <FooterBase
+        columns={[
+          { title: "Shop", items: [{ label: "All Drops", href: "/products" }, { label: "Best Sellers", href: "#" }] },
+          { title: "Company", items: [{ label: "Our Story", href: "/story" }, { label: "Sustainability", href: "#" }] },
+          { title: "Support", items: [{ label: "Contact", href: "/contact" }, { label: "FAQ", href: "/faq" }, { label: "Shipping", href: "#" }] },
+        ]}
+        logoText="Everthread Vintage"
+      />
+    </ThemeProvider>
+  );
+}

src/app/how-it-works/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function HowItWorksPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="mediumSizeLargeTitles"
+        background="aurora"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Shop", id: "/#products" },
+              { name: "How It Works", id: "/how-it-works" },
+              { name: "Subscription Plans", id: "/subscription-plans" },
+              { name: "Story", id: "/#story" },
+              { name: "Drop List", id: "/#newsletter" },
+            ]}
+            brandName="Everthread Vintage"
+        />
+
+        <div className="pt-32 pb-20">
+            <TimelinePhoneView
+                title="The Vintage Curation Process"
+                description="From sourcing rare finds to restoring quality, here is how we bring you the ultimate vintage experience."
+                textboxLayout="split-description"
+                animationType="opacity"
+                items={[
+                    {
+                        trigger: "1. Sourcing",                        content: "Our team travels globally to handpick one-of-a-kind vintage items, focusing on high-quality fabrics and timeless streetwear silhouettes.",                        imageOne: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C374B1YD0AKUmGNpzIynXP84Ag/uploaded-1775602334039-leqsugjz.png?_wi=2"
+                    },
+                    {
+                        trigger: "2. Restoration",                        content: "Every piece undergoes a careful cleaning and restoration process to ensure it meets modern quality standards without losing its history.",                        imageOne: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C374B1YD0AKUmGNpzIynXP84Ag/uploaded-1775602334039-leqsugjz.png?_wi=3"
+                    },
+                    {
+                        trigger: "3. Curation",                        content: "The final collection is dropped exclusively to our community, ensuring you get first access to our rarest, most unique pieces.",                        imageOne: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C374B1YD0AKUmGNpzIynXP84Ag/uploaded-1775602334039-leqsugjz.png?_wi=4"
+                    }
+                ]}
+            />
+        </div>
+
+        <FooterBase
+            columns={[
+                { title: "Shop", items: [{ label: "All Drops", href: "/#products" }, { label: "Best Sellers", href: "#" }] },
+                { title: "Company", items: [{ label: "Our Story", href: "/#story" }, { label: "Sustainability", href: "#" }] },
+                { title: "Support", items: [{ label: "Contact", href: "/#newsletter" }, { label: "Shipping", href: "#" }] },
+            ]}
+            logoText="Everthread Vintage"
+            className="bg-[#1a1a1a] text-[#fcfaf7]"
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -29,9 +29,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        { name: "Shop", id: "products" },
-        { name: "Story", id: "story" },
-        { name: "Drop List", id: "newsletter" },
+        { name: "Shop", id: "/products" },
+        { name: "Story", id: "/story" },
+        { name: "FAQ", id: "/faq" },
+        { name: "Contact", id: "/contact" },
+        { name: "Drop List", id: "/newsletter" },
       ]}
       brandName="Everthread Vintage"
     />
@@ -42,7 +44,7 @@ export default function LandingPage() {
       background={{ variant: "sparkles-gradient" }}
       title="Timeless Pieces. Curated for You."
       description="Handpicked vintage that never goes out of style. Discover one-of-one gems from eras past, carefully restored for your modern wardrobe."
-      buttons={[{ text: "Shop the Drop", href: "#products" }]}
+      buttons={[{ text: "Shop the Drop", href: "/products" }]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C374B1YD0AKUmGNpzIynXP84Ag/uploaded-1775602334039-leqsugjz.png?_wi=1"
       imageAlt="Everthread Vintage collection hero"
       mediaAnimation="blur-reveal"
@@ -88,6 +90,7 @@ export default function LandingPage() {
       useInvertedBackground={true}
       title="Every piece tells a story of craftsmanship and character."
       buttons={[{ text: "Read Our Brand Story", href: "#" }]}
+      className="bg-[#2a2a2a] text-[#fcfaf7]"
     />
   </div>
 
@@ -97,7 +100,8 @@ export default function LandingPage() {
       title="Join the Circle"
       description="Get notified before every new vintage collection drops. Members get early access."
       background={{ variant: "gradient-bars" }}
-      useInvertedBackground={false}
+      useInvertedBackground={true}
+      className="bg-[#f4f0e9]"
     />
   </div>
 
@@ -105,18 +109,20 @@ export default function LandingPage() {
       <TextAbout
       useInvertedBackground={false}
       title="Ready to refine your style?"
-      buttons={[{ text: "Shop All Pieces", href: "#products" }]}
+      buttons={[{ text: "Shop All Pieces", href: "/products" }]}
+      className="bg-[#d1c7b7] text-[#1a1a1a]"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBase
       columns={[
-        { title: "Shop", items: [{ label: "All Drops", href: "#products" }, { label: "Best Sellers", href: "#" }] },
-        { title: "Company", items: [{ label: "Our Story", href: "#story" }, { label: "Sustainability", href: "#" }] },
-        { title: "Support", items: [{ label: "Contact", href: "#newsletter" }, { label: "Shipping", href: "#" }] },
+        { title: "Shop", items: [{ label: "All Drops", href: "/products" }, { label: "Best Sellers", href: "#" }] },
+        { title: "Company", items: [{ label: "Our Story", href: "/story" }, { label: "Sustainability", href: "#" }] },
+        { title: "Support", items: [{ label: "Contact", href: "/contact" }, { label: "FAQ", href: "/faq" }, { label: "Shipping", href: "#" }] },
       ]}
       logoText="Everthread Vintage"
+      className="bg-[#1a1a1a] text-[#fcfaf7]"
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcfaf7;
-  --card: #f4f0e9;
-  --foreground: #1a1a1a;
-  --primary-cta: #2a2a2a;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #c89bff;
   --primary-cta-text: #fcfaf7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #1a1a1a;
-  --accent: #d1c7b7;
-  --background-accent: #c4b59d;
+  --accent: #663cff;
+  --background-accent: #1a1a1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/subscription-plans/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Star, Sparkles, Gem } from "lucide-react";
+
+export default function SubscriptionPlansPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="mediumSizeLargeTitles"
+        background="aurora"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Shop", id: "/#products" },
+              { name: "How It Works", id: "/how-it-works" },
+              { name: "Subscription Plans", id: "/subscription-plans" },
+              { name: "Story", id: "/#story" },
+              { name: "Drop List", id: "/#newsletter" },
+            ]}
+            brandName="Everthread Vintage"
+        />
+
+        <div className="pt-32 pb-20">
+            <PricingCardOne
+                title="Premium Membership Tiers"
+                description="Choose the plan that fits your style. Unlock exclusive drops, early access, and curated vintage selections."
+                animationType="depth-3d"
+                textboxLayout="split-description"
+                useInvertedBackground={false}
+                plans={[
+                    {
+                        id: "essential",                        badge: "Starter",                        badgeIcon: Star,
+                        price: "$29/mo",                        subtitle: "For the casual collector",                        features: ["Monthly curated selection", "Early access to drops", "10% member discount"]
+                    },
+                    {
+                        id: "premium",                        badge: "Pro Collector",                        badgeIcon: Sparkles,
+                        price: "$59/mo",                        subtitle: "For the true enthusiast",                        features: ["Unlimited curated selections", "Priority access to rare drops", "Free shipping on all items", "25% member discount"]
+                    },
+                    {
+                        id: "elite",                        badge: "Elite Member",                        badgeIcon: Gem,
+                        price: "$99/mo",                        subtitle: "For the ultimate curator",                        features: ["Handpicked monthly haul", "VIP drop invites", "Complimentary restoration services", "40% member discount", "Exclusive event access"]
+                    }
+                ]}
+            />
+        </div>
+
+        <FooterBase
+            columns={[
+                { title: "Shop", items: [{ label: "All Drops", href: "/#products" }, { label: "Best Sellers", href: "#" }] },
+                { title: "Company", items: [{ label: "Our Story", href: "/#story" }, { label: "Sustainability", href: "#" }] },
+                { title: "Support", items: [{ label: "Contact", href: "/#newsletter" }, { label: "Shipping", href: "#" }] },
+            ]}
+            logoText="Everthread Vintage"
+            className="bg-[#1a1a1a] text-[#fcfaf7]"
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}