Update src/app/vendors/page.tsx

Merge version_2 into main

src/app/contact/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import { Mail } from "lucide-react";
+import { useState } from "react";
 
 export default function ContactPage() {
   const navItems = [
@@ -13,6 +13,18 @@ export default function ContactPage() {
     { name: "Contact", id: "/contact" },
   ];
 
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleEmailSubmit = (submittedEmail: string) => {
+    setEmail(submittedEmail);
+    setSubmitted(true);
+    setTimeout(() => {
+      setSubmitted(false);
+      setEmail("");
+    }, 3000);
+  };
+
   const footerColumns = [
     {
       title: "Product",      items: [
@@ -59,21 +71,103 @@ export default function ContactPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact-info" data-section="contact-info" className="py-20">
-        <ContactCTA
+        <div className="content-width mx-auto px-4 space-y-12">
-          tag="Get in Touch"
+          <div className="space-y-4 text-center max-w-2xl mx-auto">
-          tagIcon={Mail}
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">Get in Touch</h1>
-          title="Connect with @motivation_tomillions"
+            <p className="text-base md:text-lg opacity-75">
-          description="Ready to get premium vendor access? Reach out directly on Instagram to purchase vendor contacts, ask questions, or get personalized recommendations for your reselling business. We're here to help you succeed."
+              Have questions about our vendor services? Want to purchase vendor access or need more information? Reach out to us through any of the channels below.
-          buttons={[
+            </p>
-            { text: "DM on Instagram", href: "https://instagram.com/motivation_tomillions" },
+          </div>
-            { text: "Back to Home", href: "/" },
+
-          ]}
+          <div className="grid md:grid-cols-3 gap-8 max-w-3xl mx-auto">
+            <div className="text-center space-y-3">
+              <h3 className="text-lg font-semibold">Direct Contact</h3>
+              <p className="opacity-75 text-sm">DM us on Instagram for immediate support and vendor inquiries</p>
+              <a
+                href="https://instagram.com/motivation_tomillions"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-block text-primary-cta font-medium hover:underline"
+              >
+                @motivation_tomillions
+              </a>
+            </div>
+            <div className="text-center space-y-3">
+              <h3 className="text-lg font-semibold">Business Hours</h3>
+              <p className="opacity-75 text-sm">Available 24/7 for vendor access and purchase support</p>
+              <p className="font-medium">Always Open</p>
+            </div>
+            <div className="text-center space-y-3">
+              <h3 className="text-lg font-semibold">Response Time</h3>
+              <p className="opacity-75 text-sm">Quick responses to all vendor and purchase inquiries</p>
+              <p className="font-medium">Within 1 Hour</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="contact-form" data-section="contact-form">
+        <ContactCenter
+          tag="Newsletter"
+          title="Stay Updated on New Vendors"
+          description="Subscribe to receive updates about new vendors, exclusive deals, and platform improvements. We only send important updates."
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Subscribe"
+          onSubmit={handleEmailSubmit}
         />
       </div>
 
+      <div id="contact-details" data-section="contact-details" className="py-20">
+        <div className="content-width mx-auto px-4 max-w-2xl space-y-8">
+          <div className="space-y-4">
+            <h2 className="text-2xl md:text-3xl font-semibold">Why Contact Us?</h2>
+            <p className="opacity-75">
+              Whether you have questions about our vendor directory, need help with your purchase, want to become a vendor partner, or have feedback about our service, we're here to help.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <h3 className="font-semibold">Vendor Questions</h3>
+              <p className="opacity-75 text-sm">
+                Need details about specific vendors or product categories before purchasing?
+              </p>
+            </div>
+            <div className="space-y-2">
+              <h3 className="font-semibold">Purchase Support</h3>
+              <p className="opacity-75 text-sm">
+                Issues with your order or need help accessing vendor contacts after purchase?
+              </p>
+            </div>
+            <div className="space-y-2">
+              <h3 className="font-semibold">Vendor Partnerships</h3>
+              <p className="opacity-75 text-sm">
+                Interested in partnering with us or listing your vendor services?
+              </p>
+            </div>
+            <div className="space-y-2">
+              <h3 className="font-semibold">Feedback & Suggestions</h3>
+              <p className="opacity-75 text-sm">
+                Have ideas to improve VendorLinks or want to share your experience?
+              </p>
+            </div>
+          </div>
+
+          <div className="bg-card rounded-lg p-6 space-y-3 border border-accent/20">
+            <h3 className="font-semibold">Quick Start Guide</h3>
+            <ol className="space-y-2 text-sm opacity-75 list-decimal list-inside">
+              <li>Browse our vendor directory or get the complete bundle</li>
+              <li>Contact us via Instagram to confirm your purchase</li>
+              <li>Receive vendor WhatsApp numbers and direct links</li>
+              <li>Start connecting with suppliers immediately</li>
+            </ol>
+          </div>
+        </div>
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBaseCard
           logoText="VendorLinks"

src/app/vendors/page.tsx

@@ -2,11 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import { MessageCircle, ExternalLink, Share2 } from "lucide-react";
+import { Sparkles } from "lucide-react";
 
 export default function VendorsPage() {
   const navItems = [
@@ -15,16 +14,7 @@ export default function VendorsPage() {
     { name: "Contact", id: "/contact" },
   ];
 
-  const heroMediaItems = [
+  const vendorProducts = [
-    {
-      imageSrc: "http://img.b2bpic.net/free-photo/businessman-presenting-invisible-hologram-projecting-from-tablet-advanced-technology_53876-111206.jpg?_wi=2",      imageAlt: "vendor dashboard modern interface"},
-    {
-      imageSrc: "http://img.b2bpic.net/free-photo/diverse-amazed-colleagues-excited-by-online-win-result-achievement_1163-4618.jpg?_wi=1",      imageAlt: "vendor success team achievement"},
-    {
-      imageSrc: "http://img.b2bpic.net/free-vector/world-map-business-infographic_23-2148307428.jpg?_wi=2",      imageAlt: "global vendor network map"},
-  ];
-
-  const allVendors = [
     {
       id: "1",      name: "Cologne Vendor",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/top-view-valentines-day-present-fragnance-dark-surface-gift-perfume-love-color-couple-woman-ring-marriage_140725-108988.jpg?_wi=1",      imageAlt: "premium cologne fragrance bottle"},
     {
@@ -42,19 +32,17 @@ export default function VendorsPage() {
     {
       id: "8",      name: "Lululemon Jacket Vendor",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-posing-sportswear-towel_23-2148429331.jpg?_wi=1",      imageAlt: "lululemon yoga jacket athletic"},
     {
-      id: "9",      name: "Essentials Vendor",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/essentials-clothes-flat-lay_23-2149399999.jpg?_wi=1",      imageAlt: "essentials clothing collection"},
+      id: "9",      name: "Gucci Bag Vendor",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/beautiful-luxury-handbag-desk-elegant-fashion-accesories_1203-8206.jpg?_wi=1",      imageAlt: "designer luxury handbag gucci"},
     {
-      id: "10",      name: "Moissanite Earrings Vendor",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/diamond-earrings-luxury-jewelry_8353-10192.jpg?_wi=1",      imageAlt: "moissanite diamond earrings jewelry"},
+      id: "10",      name: "Nike SB Dunk Vendor",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/sneaker-shoes-advertising_23-2149387140.jpg?_wi=1",      imageAlt: "nike sb dunk sneaker shoes"},
-    {
-      id: "11",      name: "Premium Accessories Bundle",      price: "$15",      imageSrc: "http://img.b2bpic.net/free-photo/luxury-accessories-collection_23-2149400000.jpg?_wi=1",      imageAlt: "luxury accessories collection bundle"},
   ];
 
   const footerColumns = [
     {
       title: "Product",      items: [
-        { label: "Home", href: "/" },
         { label: "Vendors", href: "/vendors" },
         { label: "Pricing", href: "/" },
+        { label: "Bundle", href: "/vendors" },
       ],
     },
     {
@@ -95,38 +83,24 @@ export default function VendorsPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
+      <div id="vendors" data-section="vendors">
-        <HeroBillboardCarousel
-          title="Complete Vendor Directory"
-          description="Browse our complete collection of 11 premium vendors. Each listing includes WhatsApp contact information, direct product links, and referral messages for easy communication with suppliers."
-          tag="All Vendors"
-          background={{ variant: "rotated-rays-animated" }}
-          buttons={[
-            { text: "Get Bundle", href: "/contact" },
-            { text: "Back to Home", href: "/" },
-          ]}
-          mediaItems={heroMediaItems}
-        />
-      </div>
-
-      <div id="vendors-section" data-section="vendors-section">
         <ProductCardOne
-          products={allVendors}
+          products={vendorProducts}
-          title="All 11 Premium Vendors"
+          title="All Available Vendors"
-          description="Direct contact information, product links, and referral messages for each vendor. Access WhatsApp numbers and connect instantly."
+          description="Browse our complete collection of premium vendor contacts across fashion, jewelry, electronics, and lifestyle product categories. Click on any vendor to learn more and purchase access."
-          tag="Complete Directory"
+          tag="Complete Vendor Directory"
-          gridVariant="three-columns-all-equal-width"
+          gridVariant="four-items-2x2-equal-grid"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="cta" data-section="cta">
         <ContactCenter
-          tag="Ready to Connect?"
+          tag="Get Started"
-          title="Get Instant Vendor Access"
+          title="Purchase Vendor Access Today"
-          description="Purchase your vendor package today on Instagram @motivation_tomillions. Individual vendors for $15 each or complete bundle for $100. All contacts delivered instantly via email."
+          description="Choose individual vendors for $15 each or get the complete bundle of all 10 vendors for $100. Get instant access to WhatsApp contacts and direct product links."
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
         />