Update src/app/search/page.tsx

src/app/feed/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function FeedPage() {
+  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">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[{ name: "Home", id: "/" }, { name: "Feed", id: "/feed" }, { name: "Profile", id: "/profile" }, { name: "Messages", id: "/messaging" }, { name: "Search", id: "/search" }, { name: "Contact", id: "/contact" }]}
+            brandName="Connect"
+          />
+        </div>
+        <main className="container mx-auto py-24 min-h-screen">
+          <h1 className="text-4xl font-bold mb-8">Feed & Timeline</h1>
+          <p className="text-lg">This is your main social feed. Stay connected with the latest updates from your network.</p>
+        </main>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal logoText="Connect" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/messaging/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function MessagingPage() {
+  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">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[{ name: "Home", id: "/" }, { name: "Feed", id: "/feed" }, { name: "Profile", id: "/profile" }, { name: "Messages", id: "/messaging" }, { name: "Search", id: "/search" }, { name: "Contact", id: "/contact" }]}
+            brandName="Connect"
+          />
+        </div>
+        <main className="container mx-auto py-24 min-h-screen">
+          <h1 className="text-4xl font-bold mb-8">Messaging & Chat</h1>
+          <p className="text-lg">Securely connect with others through encrypted, high-speed private messaging.</p>
+        </main>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal logoText="Connect" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -14,37 +14,29 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="directional-hover"
+        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
+        borderRadius="pill"
-        contentWidth="compact"
+        contentWidth="medium"
-        sizing="medium"
+        sizing="mediumLargeSizeLargeTitles"
-        background="noise"
+        background="fluid"
-        cardStyle="gradient-radial"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="double-inset"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="layered"
+        secondaryButtonStyle="glass"
-        headingFontWeight="bold"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "home"},
-          id: "home",
-        },
         {
-          name: "About",
+          name: "About",          id: "about"},
-          id: "about",
-        },
         {
-          name: "Features",
+          name: "Features",          id: "features"},
-          id: "features",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "contact"},
-          id: "contact",
-        },
       ]}
       brandName="Connect"
     />
@@ -53,44 +45,23 @@ export default function LandingPage() {
   <div id="home" data-section="home">
       <HeroBillboardGallery
       background={{
-        variant: "gradient-bars",
+        variant: "sparkles-gradient"}}
-      }}
       title="The Next Era of Social"
       description="Experience a curated social platform designed for creators, thinkers, and visionaries. Seamless connectivity in a premium environment."
       tag="Connect Exclusive"
       buttons={[
         {
-          text: "Get Started",
+          text: "Get Started",          href: "#contact"},
-          href: "#contact",
-        },
       ]}
       mediaItems={[
         {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/a-high-end-social-media-mobile-app-inter-1774834476250-b8b62d4c.png",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/a-high-end-social-media-mobile-app-inter-1774834476250-b8b62d4c.png",          imageAlt: "Social Feed"},
-          imageAlt: "Social Feed",
-        },
         {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/a-person-holding-a-modern-smartphone-in--1774834475294-ca36108e.png",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/a-person-holding-a-modern-smartphone-in--1774834475294-ca36108e.png",          imageAlt: "Interaction"},
-          imageAlt: "Interaction",
-        },
         {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/a-vibrant-digital-network-visualization--1774834476004-050ee581.png",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/a-vibrant-digital-network-visualization--1774834476004-050ee581.png",          imageAlt: "Digital Networking"},
-          imageAlt: "Digital Networking",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/close-up-of-an-advanced-camera-lens-capt-1774834476209-bb3793d3.png",
-          imageAlt: "Creative Lens",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/abstract-geometric-shapes-in-a-dark-meta-1774834475390-20f479ce.png",
-          imageAlt: "Geometric Abstract",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/a-sophisticated-social-platform-dashboar-1774834476237-0fc8dfbc.png",
-          imageAlt: "Platform Dashboard",
-        },
       ]}
-      mediaAnimation="slide-up"
+      mediaAnimation="blur-reveal"
     />
   </div>
 
@@ -101,17 +72,11 @@ export default function LandingPage() {
       description="We are redefining the digital social experience. Our platform focuses on quality, depth, and genuine engagement without the noise."
       metrics={[
         {
-          value: "1M+",
+          value: "1M+",          title: "Active Users"},
-          title: "Active Users",
-        },
         {
-          value: "99%",
+          value: "99%",          title: "User Satisfaction"},
-          title: "User Satisfaction",
-        },
         {
-          value: "50+",
+          value: "50+",          title: "Curated Features"},
-          title: "Curated Features",
-        },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/a-group-of-professional-creatives-workin-1774834476389-9c648e06.png"
       imageAlt="Team Collaboration"
@@ -122,29 +87,17 @@ export default function LandingPage() {
 
   <div id="features" data-section="features">
       <FeatureCardTwentySeven
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="split"
       gridVariant="timeline"
       useInvertedBackground={true}
       features={[
         {
-          id: "1",
+          id: "1",          title: "Secure Encryption",          description: "Privacy is at the core. Your conversations and data are fully encrypted.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/digital-lock-icon-representing-premium-s-1774834476458-6aa042b4.png"},
-          title: "Secure Encryption",
-          description: "Privacy is at the core. Your conversations and data are fully encrypted.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/digital-lock-icon-representing-premium-s-1774834476458-6aa042b4.png",
-        },
         {
-          id: "2",
+          id: "2",          title: "Global Reach",          description: "Connect with creators and visionaries from every corner of the world.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/global-connection-abstract-visualization-1774834475624-d7ee36d0.png"},
-          title: "Global Reach",
-          description: "Connect with creators and visionaries from every corner of the world.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/global-connection-abstract-visualization-1774834475624-d7ee36d0.png",
-        },
         {
-          id: "3",
+          id: "3",          title: "AI Content Curation",          description: "Discover content you love with our advanced intelligent filtering.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/ai-driven-content-feed-icon-minimalist-g-1774834475466-85653f49.png"},
-          title: "AI Content Curation",
-          description: "Discover content you love with our advanced intelligent filtering.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/ai-driven-content-feed-icon-minimalist-g-1774834475466-85653f49.png",
-        },
       ]}
       title="Sophisticated Features"
       description="Powering your social life with advanced tools that matter."
@@ -156,23 +109,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "TechCorp",
+        "TechCorp",        "InnovateLab",        "GrowthCo",        "StartupXYZ",        "DigitalWave",        "CreativeStudio",        "FuturePulse"]}
-        "InnovateLab",
-        "GrowthCo",
-        "StartupXYZ",
-        "DigitalWave",
-        "CreativeStudio",
-        "FuturePulse",
-      ]}
-      logos={[
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/minimalist-tech-company-logo-on-dark-bac-1774834475208-72fd2ac7.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/minimalist-tech-company-logo-on-dark-bac-1774834477370-19579415.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/minimalist-tech-company-logo-on-dark-bac-1774834477428-86e0553a.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/minimalist-tech-company-logo-on-dark-bac-1774834476105-fa67f331.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/minimalist-tech-company-logo-on-dark-bac-1774834474980-856ad8a9.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/minimalist-tech-company-logo-on-dark-bac-1774834475237-8572f3df.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/minimalist-tech-company-logo-on-dark-bac-1774834475279-27f42a9f.png",
-      ]}
       title="Trusted by Leaders"
       description="Join a community of professionals and visionaries driving the future."
     />
@@ -186,25 +123,9 @@ export default function LandingPage() {
       author="Sarah Johnson, CEO"
       avatars={[
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/portrait-of-a-young-creative-professiona-1774834475524-aea647f3.png",
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/portrait-of-a-young-creative-professiona-1774834475524-aea647f3.png",          alt: "Sarah"},
-          alt: "Sarah",
-        },
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/portrait-of-a-mature-tech-executive-look-1774834477412-143e5da5.png",
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/portrait-of-a-mature-tech-executive-look-1774834477412-143e5da5.png",          alt: "Michael"},
-          alt: "Michael",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/portrait-of-a-designer-working-on-a-tabl-1774834475907-2b04d903.png",
-          alt: "Emily",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/portrait-of-a-social-media-influencer-lo-1774834475873-c07767b9.png",
-          alt: "David",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BcPuHaMEIfEQKdhC1n860kkVjp/portrait-of-a-young-creative-professiona-1774834475524-aea647f3.png",
-          alt: "Alex",
-        },
       ]}
       ratingAnimation="blur-reveal"
       avatarsAnimation="slide-up"
@@ -215,8 +136,7 @@ export default function LandingPage() {
       <ContactCenter
       useInvertedBackground={false}
       background={{
-        variant: "rotated-rays-static",
+        variant: "sparkles-gradient"}}
-      }}
       tag="Join Now"
       title="Request Your Invite"
       description="Apply today for early access to the Connect ecosystem. Limited spots available for the premium experience."
@@ -227,13 +147,9 @@ export default function LandingPage() {
       <FooterLogoReveal
       logoText="Connect"
       leftLink={{
-        text: "Privacy Policy",
+        text: "Privacy Policy",        href: "#"}}
-        href: "#",
-      }}
       rightLink={{
-        text: "Terms of Service",
+        text: "Terms of Service",        href: "#"}}
-        href: "#",
-      }}
     />
   </div>
       </ReactLenis>

src/app/profile/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ProfilePage() {
+  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">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[{ name: "Home", id: "/" }, { name: "Feed", id: "/feed" }, { name: "Profile", id: "/profile" }, { name: "Messages", id: "/messaging" }, { name: "Search", id: "/search" }, { name: "Contact", id: "/contact" }]}
+            brandName="Connect"
+          />
+        </div>
+        <main className="container mx-auto py-24 min-h-screen">
+          <h1 className="text-4xl font-bold mb-8">User Profile</h1>
+          <p className="text-lg">Manage your personal identity, settings, and showcase your creative works.</p>
+        </main>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal logoText="Connect" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/search/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function SearchPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="compact"
+        sizing="medium"
+        background="noise"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Feed", id: "/feed" },
+              { name: "Profile", id: "/profile" },
+              { name: "Messages", id: "/messaging" },
+              { name: "Search", id: "/search" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Connect"
+          />
+        </div>
+        <div className="min-h-screen pt-32 px-6 flex flex-col items-center justify-center">
+          <h1 className="text-5xl font-bold mb-8">Explore & Discover</h1>
+          <input 
+            type="text" 
+            placeholder="Search for creators, topics, or trending hashtags..."
+            className="w-full max-w-lg p-4 rounded-lg bg-white/10 backdrop-blur-md border border-white/20"
+          />
+          <div className="mt-12 w-full max-w-4xl">
+            <h2 className="text-2xl font-semibold mb-6">Trending Hashtags</h2>
+            <div className="flex flex-wrap gap-4">
+              {['#innovation', '#creators', '#techtrends', '#future', '#networking'].map(tag => (
+                <span key={tag} className="px-4 py-2 bg-white/5 rounded-full border border-white/10 hover:bg-white/10 transition-colors cursor-pointer">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter 
+            tag="Join Now"
+            title="Stay Connected"
+            description="Join our community to see personalized recommendations based on your interests."
+            background={{ variant: "rotated-rays-static" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Connect"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Service", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #0a0a0a;
-  --card: #1a1a1a;
+  --card: #171717;
-  --foreground: #f0f8ffe6;
+  --foreground: #ffffff;
-  --primary-cta: #cee7ff;
+  --primary-cta: #ffffff;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #333333;
   --secondary-cta-text: #f0f8ffe6;
-  --accent: #737373;
+  --accent: #5e5e5e;
-  --background-accent: #737373;
+  --background-accent: #1a1a1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);