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/layout.tsx

@@ -4,7 +4,6 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import "@/lib/gsap-setup";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Poppins } from "next/font/google";
 
@@ -36,7 +35,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body className={`${poppins.variable} antialiased`}>
-          <Tag />
+          
           {children}
           <script
               dangerouslySetInnerHTML={{

src/app/page.tsx

@@ -29,12 +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,55 +41,30 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplit
-      background={{
-        variant: "sparkles-gradient"}}
+      background={{ variant: "sparkles-gradient" }}
       title="Timeless Pieces. Curated for You."
-      description="Handpicked vintage that never goes out of style."
-      buttons={[
-        {
-          text: "Shop the Drop",          href: "#products"},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-posing-with-old-phone_23-2150908624.jpg"
-      imageAlt="Curated rack of vintage clothing"
+      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" }]}
+      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"
-      avatars={[
-        {
-          src: "https://img.b2bpic.net/free-photo/young-man-wearing-black-hoodie-studio_23-2148281116.jpg",          alt: "Customer 1"},
-        {
-          src: "https://img.b2bpic.net/free-photo/stylish-woman-posing-with-hat_23-2148301736.jpg",          alt: "Customer 2"},
-        {
-          src: "https://img.b2bpic.net/free-photo/handsome-man-portrait_23-2148281116.jpg",          alt: "Customer 3"},
-        {
-          src: "https://img.b2bpic.net/free-photo/woman-smiling-outdoors_23-2148301736.jpg",          alt: "Customer 4"},
-        {
-          src: "https://img.b2bpic.net/free-photo/young-man-with-vintage-style_23-2148301736.jpg",          alt: "Customer 5"},
-      ]}
-      avatarText="Trusted by 1000+ fashion enthusiasts."
       marqueeItems={[
-        {
-          type: "text",          text: "One-of-one pieces"},
-        {
-          type: "text-icon",          text: "Sustainable",          icon: Leaf,
-        },
-        {
-          type: "text",          text: "Curated quality"},
-        {
-          type: "text-icon",          text: "Worldwide shipping",          icon: Globe,
-        },
-        {
-          type: "text",          text: "Verified authentic"},
+        { type: "text", text: "One-of-one pieces" },
+        { type: "text-icon", text: "Sustainable", icon: Leaf },
+        { type: "text", text: "Curated quality" },
+        { type: "text-icon", text: "Worldwide shipping", icon: Globe },
+        { type: "text", text: "Verified authentic" },
       ]}
     />
   </div>
 
   <div id="trust" data-section="trust">
       <SocialProofOne
-      textboxLayout="default"
+      textboxLayout="split-description"
+      title="Trusted by Fashion Enthusiasts"
+      description="We partner with eco-conscious creators to bring you the best in vintage streetwear."
+      names={["Vogue Vintage", "Urban Outfitters Archive", "Sustainable Threads", "Retro Revival", "Street Style Mag"]}
       useInvertedBackground={false}
-      names={[
-        "Curated vintage.",        "No fast fashion.",        "Every piece is one-of-one.",        "Sustainably sourced.",        "Trusted by 1000+ lovers"]}
-      title="Built on Values"
-      description="We are rethinking vintage."
     />
   </div>
 
@@ -101,88 +75,54 @@ export default function LandingPage() {
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
-          id: "1",          name: "Vintage Washed Carhartt Hoodie",          price: "$120",          imageSrc: "http://img.b2bpic.net/free-photo/view-hipster-male-man-looking-camera_197531-33424.jpg"},
-        {
-          id: "2",          name: "Distressed Denim Jacket",          price: "$180",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-asian-woman-autumn-clothes_23-2149071329.jpg"},
-        {
-          id: "3",          name: "90s Graphic Band Tee",          price: "$65",          imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-still-life_23-2150176758.jpg?_wi=1"},
-        {
-          id: "4",          name: "Plaid Earth-Tone Flannel",          price: "$85",          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-long-legs-brunette-model-long-black-cloak-posed-outdoor-winter-day-against-old-grunge-wall_627829-14032.jpg"},
-        {
-          id: "5",          name: "Heavy Canvas Utility Bag",          price: "$45",          imageSrc: "http://img.b2bpic.net/free-photo/spring-wardrobe-switch-still-life_23-2150176758.jpg?_wi=2"},
-        {
-          id: "6",          name: "Faded Black Worker Jacket",          price: "$140",          imageSrc: "http://img.b2bpic.net/free-photo/mid-section-mechanic-with-wrench-tool-his-pocket_1170-1317.jpg"},
+        { id: "1", name: "Vintage Washed Carhartt Hoodie", price: "$120", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C374B1YD0AKUmGNpzIynXP84Ag/uploaded-1775602334039-leqsugjz.png?_wi=2" },
+        { id: "2", name: "Distressed Denim Jacket", price: "$180", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C374B1YD0AKUmGNpzIynXP84Ag/uploaded-1775602334039-leqsugjz.png?_wi=3" },
+        { id: "3", name: "90s Graphic Band Tee", price: "$65", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C374B1YD0AKUmGNpzIynXP84Ag/uploaded-1775602334039-leqsugjz.png?_wi=4" },
+        { id: "4", name: "Plaid Earth-Tone Flannel", price: "$85", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C374B1YD0AKUmGNpzIynXP84Ag/uploaded-1775602334039-leqsugjz.png?_wi=5" },
       ]}
-      title="Featured Drop"
-      description="Limited pieces, hand-selected."
+      title="Featured Collection"
+      description="Limited drops. Once they're gone, they're gone forever."
     />
   </div>
 
   <div id="story" data-section="story">
       <TextAbout
-      useInvertedBackground={false}
-      title="The Everthread Philosophy"
-      buttons={[
-        {
-          text: "Our Mission",          href: "#"},
-      ]}
+      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>
+
+  <div id="newsletter" data-section="newsletter">
+      <ContactCenter
+      tag="Drop List"
+      title="Join the Circle"
+      description="Get notified before every new vintage collection drops. Members get early access."
+      background={{ variant: "gradient-bars" }}
+      useInvertedBackground={true}
+      className="bg-[#f4f0e9]"
     />
   </div>
 
   <div id="closing" data-section="closing">
       <TextAbout
       useInvertedBackground={false}
-      title="Don't miss the next drop."
-      buttons={[
-        {
-          text: "Shop Now",          href: "#products"},
-      ]}
-    />
-  </div>
-
-  <div id="newsletter" data-section="newsletter">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
-      tag="Stay Connected"
-      title="Get Early Access to Every Drop"
-      description="Limited pieces. Once they’re gone, they’re gone."
-      inputPlaceholder="Enter your email"
-      buttonText="Join Now"
+      title="Ready to refine your style?"
+      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: "Story",              href: "#story"},
-            {
-              label: "About",              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>
+  );
+}