Merge version_5 into main

Merge version_5 into main

src/app/feed/page.tsx

@@ -5,7 +5,7 @@ import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import { Heart, MessageCircle, Share2, MoreHorizontal } from "lucide-react";
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 
 const POSTS_DATA = [
   { id: "1", author: "Alex J.", content: "Just launched the new version of our platform! So excited to share it with everyone. #tech #launch", likes: 120, comments: 45 },
@@ -18,6 +18,7 @@ const POSTS_DATA = [
 export default function FeedPage() {
   const [posts, setPosts] = useState(POSTS_DATA);
   const [loading, setLoading] = useState(false);
+  const lenisRef = useRef<any>(null);
 
   const loadMore = useCallback(() => {
     if (loading) return;
@@ -28,16 +29,6 @@ export default function FeedPage() {
     }, 1000);
   }, [loading]);
 
-  useEffect(() => {
-    const handleScroll = () => {
-      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
-        loadMore();
-      }
-    };
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [loadMore]);
-
   return (
     <ThemeProvider
         defaultButtonVariant="directional-hover"
@@ -51,7 +42,7 @@ export default function FeedPage() {
         secondaryButtonStyle="solid"
         headingFontWeight="bold"
     >
-      <ReactLenis root>
+      <ReactLenis root ref={lenisRef}>
         <NavbarStyleApple
           navItems={[
             { name: "Home", id: "/" },
@@ -63,7 +54,15 @@ export default function FeedPage() {
         <main className="pt-32 pb-20 px-4 max-w-2xl mx-auto space-y-6">
           <h1 className="text-4xl font-bold mb-8">Community Feed</h1>
           {posts.map((post) => (
-            <div key={post.id} className="p-6 rounded-2xl border bg-card shadow-sm hover:shadow-md transition-shadow">
+            <div 
+              key={post.id} 
+              onClick={() => {
+                 const lenis = lenisRef.current?.lenis;
+                 if (lenis) lenis.scrollTo(`#post-${post.id}`, { offset: -100 });
+              }}
+              id={`post-${post.id}`}
+              className="p-6 rounded-2xl border bg-card shadow-sm hover:shadow-md transition-shadow cursor-pointer"
+            >
               <div className="flex items-center justify-between mb-4">
                 <div className="flex items-center gap-3">
                   <div className="w-10 h-10 rounded-full bg-accent" />
@@ -89,4 +88,4 @@ export default function FeedPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/login/page.tsx

@@ -11,6 +11,11 @@ export default function LoginPage() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
+  const navLinks = [
+    { name: "Home", id: "/" },
+    { name: "Login", id: "/login" },
+  ];
+
   return (
     <ThemeProvider 
       defaultButtonVariant="text-stagger" 
@@ -25,10 +30,12 @@ export default function LoginPage() {
       headingFontWeight="normal"
     >
       <div className="min-h-screen flex flex-col">
-        <NavbarStyleApple 
-          brandName="Connect" 
-          navItems={[{ name: "Home", id: "/" }]} 
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple 
+            brandName="Connect" 
+            navItems={navLinks} 
+          />
+        </div>
         <main className="flex-grow flex items-center justify-center p-6">
           <div className="w-full max-w-md p-8 bg-card rounded-xl border border-border space-y-6">
             <h1 className="text-3xl font-bold">Welcome Back</h1>
@@ -39,7 +46,14 @@ export default function LoginPage() {
             </div>
           </div>
         </main>
-        <FooterBaseReveal logoText="Connect" columns={[]} />
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal 
+              logoText="Connect" 
+              columns={[
+                  { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Login", href: "/login" }] }
+              ]} 
+          />
+        </div>
       </div>
     </ThemeProvider>
   );

src/app/notifications/page.tsx

@@ -4,13 +4,14 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { Bell, Heart, MessageCircle, UserPlus, Settings } from "lucide-react";
+import { Bell, Heart, MessageCircle, UserPlus } from "lucide-react";
 
 export default function NotificationsPage() {
   const notifications = [
-    { id: 1, type: 'like', text: 'Sarah liked your post', time: '2m ago', icon: Heart },
-    { id: 2, type: 'comment', text: 'Mark commented on your photo', time: '1h ago', icon: MessageCircle },
-    { id: 3, type: 'follow', text: 'David started following you', time: '3h ago', icon: UserPlus },
+    { id: "1", type: "like", user: "Alex J.", content: "liked your photo", icon: Heart, time: "2m ago" },
+    { id: "2", type: "comment", user: "Jamie R.", content: "commented on your post", icon: MessageCircle, time: "1h ago" },
+    { id: "3", type: "follow", user: "Sam K.", content: "started following you", icon: UserPlus, time: "3h ago" },
+    { id: "4", type: "like", user: "Jordan L.", content: "liked your comment", icon: Heart, time: "5h ago" },
   ];
 
   return (
@@ -27,46 +28,46 @@ export default function NotificationsPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Notifications", id: "/notifications" },
-          ]}
-          brandName="Connect"
-        />
-        
-        <main className="pt-32 pb-20 px-6 max-w-3xl mx-auto min-h-screen">
-          <div className="flex items-center justify-between mb-8">
-            <h1 className="text-4xl font-bold">Notifications</h1>
-            <button className="p-2 rounded-full hover:bg-neutral-100">
-              <Settings className="w-6 h-6" />
-            </button>
-          </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Notifications", id: "/notifications" },
+            ]}
+            brandName="Connect"
+          />
+        </div>
 
+        <main className="pt-32 pb-20 px-6 max-w-4xl mx-auto min-h-screen">
+          <h1 className="text-4xl font-bold mb-10 flex items-center gap-3">
+            <Bell className="w-8 h-8" /> Notifications
+          </h1>
           <div className="space-y-4">
             {notifications.map((n) => (
-              <div key={n.id} className="flex items-center p-4 bg-white border border-neutral-200 rounded-xl shadow-sm hover:border-blue-500 transition-colors">
-                <div className="p-2 mr-4 bg-blue-50 rounded-full text-blue-600">
-                  <n.icon className="w-5 h-5" />
+              <div key={n.id} className="p-4 rounded-xl border border-border flex items-center gap-4 bg-card">
+                <div className="p-3 rounded-full bg-primary/10">
+                  <n.icon className="w-5 h-5 text-primary" />
                 </div>
-                <div className="flex-grow">
-                  <p className="font-medium">{n.text}</p>
-                  <p className="text-sm text-neutral-500">{n.time}</p>
+                <div>
+                  <p className="font-medium">{n.user} {n.content}</p>
+                  <p className="text-sm text-muted-foreground">{n.time}</p>
                 </div>
               </div>
             ))}
           </div>
         </main>
 
-        <FooterBaseReveal
-          logoText="Connect"
-          columns={[
-            { title: "Product", items: [{ label: "Features", href: "/" }, { label: "Community", href: "/" }] },
-            { title: "Company", items: [{ label: "About", href: "/" }, { label: "Careers", href: "/" }] },
-            { title: "Legal", items: [{ label: "Privacy", href: "/" }, { label: "Terms", href: "/" }] },
-          ]}
-        />
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Connect"
+            columns={[
+              { title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Community", href: "/#testimonials" }] },
+              { title: "Company", items: [{ label: "About", href: "/#about" }, { label: "Careers", href: "#" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -32,14 +32,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "Features",          id: "features"},
-        {
-          name: "Community",          id: "testimonials"},
-        {
-          name: "FAQ",          id: "faq"},
+        { name: "Home", id: "hero" },
+        { name: "Features", id: "features" },
+        { name: "Community", id: "testimonials" },
+        { name: "FAQ", id: "faq" },
       ]}
       brandName="Connect"
     />
@@ -48,57 +44,33 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroSplitTestimonial
       useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars"}}
+      background={{ variant: "gradient-bars" }}
       title="Your world, connected."
       description="Experience the next generation of social interaction. Share, connect, and discover your community in one seamless interface."
       testimonials={[
-        {
-          name: "Alex J.",          handle: "@alexj",          testimonial: "The best platform for connecting with like-minded creators.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328340.jpg"},
-        {
-          name: "Sam K.",          handle: "@samk",          testimonial: "Finally, a social app that values privacy and design.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/dining-office_1098-15489.jpg"},
-        {
-          name: "Jamie R.",          handle: "@jamier",          testimonial: "My go-to space for daily inspiration.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/glad-young-man-with-african-hairstyle-posing-with-arms-crossed-his-office-with-other-employees-male-manager-blue-shirt-smiling-conference-workplace_197531-3748.jpg"},
-        {
-          name: "Jordan L.",          handle: "@jordanl",          testimonial: "Incredibly smooth and intuitive, highly recommended.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-cheerful-businesswoman-drinking-coffee-smiling-workplace-office_176420-6974.jpg"},
-        {
-          name: "Casey B.",          handle: "@caseyb",          testimonial: "The community features are simply unmatched.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-camera-with-crossed-arms-happy-confident-satisfied-expression-lateral-view_1194-632052.jpg"},
-      ]}
-      buttons={[
-        {
-          text: "Get Started",          href: "#"},
+        { name: "Alex J.", handle: "@alexj", testimonial: "The best platform for connecting with like-minded creators.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328340.jpg" },
+        { name: "Sam K.", handle: "@samk", testimonial: "Finally, a social app that values privacy and design.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/dining-office_1098-15489.jpg" },
+        { name: "Jamie R.", handle: "@jamier", testimonial: "My go-to space for daily inspiration.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/glad-young-man-with-african-hairstyle-posing-with-arms-crossed-his-office-with-other-employees-male-manager-blue-shirt-smiling-conference-workplace_197531-3748.jpg" },
+        { name: "Jordan L.", handle: "@jordanl", testimonial: "Incredibly smooth and intuitive, highly recommended.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-cheerful-businesswoman-drinking-coffee-smiling-workplace-office_176420-6974.jpg" },
+        { name: "Casey B.", handle: "@caseyb", testimonial: "The community features are simply unmatched.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-camera-with-crossed-arms-happy-confident-satisfied-expression-lateral-view_1194-632052.jpg" },
       ]}
+      buttons={[{ text: "Get Started", href: "#" }]}
       imageSrc="http://img.b2bpic.net/free-photo/cool-different-types-buttons_23-2150170585.jpg"
       imageAlt="social media interface mockup"
       mediaAnimation="blur-reveal"
       avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/person-using-smartphone-his-automated-home_23-2149036912.jpg",          alt: "User avatar 1"},
-        {
-          src: "http://img.b2bpic.net/free-photo/man-holding-smartphone-with-home-automation-app_23-2149036830.jpg",          alt: "User avatar 2"},
-        {
-          src: "http://img.b2bpic.net/free-photo/man-controlling-smart-lamp-with-his-phone_23-2149036887.jpg",          alt: "User avatar 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671596.jpg",          alt: "User avatar 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg",          alt: "User avatar 5"},
+        { src: "http://img.b2bpic.net/free-photo/person-using-smartphone-his-automated-home_23-2149036912.jpg", alt: "User avatar 1" },
+        { src: "http://img.b2bpic.net/free-photo/man-holding-smartphone-with-home-automation-app_23-2149036830.jpg", alt: "User avatar 2" },
+        { src: "http://img.b2bpic.net/free-photo/man-controlling-smart-lamp-with-his-phone_23-2149036887.jpg", alt: "User avatar 3" },
+        { src: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671596.jpg", alt: "User avatar 4" },
+        { src: "http://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg", alt: "User avatar 5" },
       ]}
       marqueeItems={[
-        {
-          type: "text",          text: "Connect with creators"},
-        {
-          type: "text",          text: "Privacy-first design"},
-        {
-          type: "text",          text: "Global interaction"},
-        {
-          type: "text",          text: "Real-time updates"},
-        {
-          type: "text",          text: "Join the revolution"},
+        { type: "text", text: "Connect with creators" },
+        { type: "text", text: "Privacy-first design" },
+        { type: "text", text: "Global interaction" },
+        { type: "text", text: "Real-time updates" },
+        { type: "text", text: "Join the revolution" },
       ]}
     />
   </div>
@@ -108,10 +80,7 @@ export default function LandingPage() {
       useInvertedBackground={true}
       title="Built for Connection"
       description="We believe social media should be an empowering space. Our platform focuses on quality interactions, intuitive design, and user-centric features."
-      buttons={[
-        {
-          text: "Learn More"},
-      ]}
+      buttons={[{ text: "Learn More" }]}
       imageSrc="http://img.b2bpic.net/free-photo/woman-property-engineer-searching-layout-details-laptop-office_482257-130146.jpg"
       imageAlt="digital connection ui concept"
     />
@@ -124,12 +93,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Real-time Messaging",          description: "Instant connections with end-to-end encryption.",          imageSrc: "http://img.b2bpic.net/free-photo/geometric-abstract-phone-wallpaper-technology-concept-connecting-dots-design_53876-160212.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160210.jpg",          buttonText: "Discover"},
-        {
-          title: "Media Creation",          description: "Powerful tools to edit and share text, images, and video.",          imageSrc: "http://img.b2bpic.net/free-vector/business-elements-technology_1257-252.jpg",          titleImageSrc: "http://img.b2bpic.net/free-vector/website-design-proposal-template-design_742173-25243.jpg",          buttonText: "Create"},
-        {
-          title: "Smart Notifications",          description: "Never miss what matters with our intelligent alert system.",          imageSrc: "http://img.b2bpic.net/free-photo/speech-bubble-chat-message-icon-with-bell-notification-alert-notice-reminder-symbol-conversation-button-icon-symbol-background-3d-illustration_56104-2083.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg",          buttonText: "Configure"},
+        { title: "Real-time Messaging", description: "Instant connections with end-to-end encryption.", imageSrc: "http://img.b2bpic.net/free-photo/geometric-abstract-phone-wallpaper-technology-concept-connecting-dots-design_53876-160212.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160210.jpg", buttonText: "Discover" },
+        { title: "Media Creation", description: "Powerful tools to edit and share text, images, and video.", imageSrc: "http://img.b2bpic.net/free-vector/business-elements-technology_1257-252.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/website-design-proposal-template-design_742173-25243.jpg", buttonText: "Create" },
+        { title: "Smart Notifications", description: "Never miss what matters with our intelligent alert system.", imageSrc: "http://img.b2bpic.net/free-photo/speech-bubble-chat-message-icon-with-bell-notification-alert-notice-reminder-symbol-conversation-button-icon-symbol-background-3d-illustration_56104-2083.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/closeup-calendar-app_116348-5.jpg", buttonText: "Configure" },
       ]}
       title="Feature Rich Experience"
       description="Powerful tools designed to keep you connected and inspired."
@@ -142,15 +108,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       metrics={[
-        {
-          id: "m1",          icon: Users,
-          title: "Active Users",          value: "1M+"},
-        {
-          id: "m2",          icon: MessageCircle,
-          title: "Messages Daily",          value: "50M"},
-        {
-          id: "m3",          icon: Share2,
-          title: "Posts Shared",          value: "10M"},
+        { id: "m1", icon: Users, title: "Active Users", value: "1M+" },
+        { id: "m2", icon: MessageCircle, title: "Messages Daily", value: "50M" },
+        { id: "m3", icon: Share2, title: "Posts Shared", value: "10M" },
       ]}
       title="Our Community"
       description="Growing rapidly with a global user base."
@@ -161,8 +121,7 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="default"
       useInvertedBackground={false}
-      names={[
-        "TechCorp",        "Innovate",        "GlobalConnect",        "CreatorBase",        "SocialWave"]}
+      names={["TechCorp", "Innovate", "GlobalConnect", "CreatorBase", "SocialWave"]}
       title="Trusted by Communities"
       description="Our platform is growing worldwide."
     />
@@ -173,16 +132,11 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       testimonials={[
-        {
-          id: "1",          title: "Amazing",          quote: "The best social experience ever.",          name: "Sarah",          role: "User",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153830.jpg"},
-        {
-          id: "2",          title: "Love it",          quote: "I find so much inspiration here.",          name: "Mark",          role: "Creator",          imageSrc: "http://img.b2bpic.net/free-photo/nervous-puzzled-woman-banker-bites-lips-worries_273609-45620.jpg"},
-        {
-          id: "3",          title: "Great features",          quote: "The messaging system is flawless.",          name: "Anna",          role: "User",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-it-technician-using-pc-innovative-startup-office_482257-125548.jpg"},
-        {
-          id: "4",          title: "Highly recommend",          quote: "Community feel is unmatched.",          name: "David",          role: "User",          imageSrc: "http://img.b2bpic.net/free-photo/confident-senior-executive-looking-camera_1262-2374.jpg"},
-        {
-          id: "5",          title: "Fantastic app",          quote: "My favorite social platform.",          name: "Elena",          role: "Creator",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-caucasian-man-with-poker-face-wearing-glasses-with-red-light-effect_181624-25965.jpg"},
+        { id: "1", title: "Amazing", quote: "The best social experience ever.", name: "Sarah", role: "User", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153830.jpg" },
+        { id: "2", title: "Love it", quote: "I find so much inspiration here.", name: "Mark", role: "Creator", imageSrc: "http://img.b2bpic.net/free-photo/nervous-puzzled-woman-banker-bites-lips-worries_273609-45620.jpg" },
+        { id: "3", title: "Great features", quote: "The messaging system is flawless.", name: "Anna", role: "User", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-it-technician-using-pc-innovative-startup-office_482257-125548.jpg" },
+        { id: "4", title: "Highly recommend", quote: "Community feel is unmatched.", name: "David", role: "User", imageSrc: "http://img.b2bpic.net/free-photo/confident-senior-executive-looking-camera_1262-2374.jpg" },
+        { id: "5", title: "Fantastic app", quote: "My favorite social platform.", name: "Elena", role: "Creator", imageSrc: "http://img.b2bpic.net/free-photo/closeup-caucasian-man-with-poker-face-wearing-glasses-with-red-light-effect_181624-25965.jpg" },
       ]}
       title="Community Voices"
       description="Hear what our users are saying."
@@ -194,12 +148,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "f1",          title: "Is the account free?",          content: "Yes, basic account features are free."},
-        {
-          id: "f2",          title: "How to verify?",          content: "Follow the instructions in your profile settings."},
-        {
-          id: "f3",          title: "Privacy settings?",          content: "You can customize visibility in settings."},
+        { id: "f1", title: "Is the account free?", content: "Yes, basic account features are free." },
+        { id: "f2", title: "How to verify?", content: "Follow the instructions in your profile settings." },
+        { id: "f3", title: "Privacy settings?", content: "You can customize visibility in settings." },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/orange-crystal-background_1017-3751.jpg"
       title="Need Help?"
@@ -212,13 +163,9 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={true}
-      background={{
-        variant: "sparkles-gradient"}}
+      background={{ variant: "sparkles-gradient" }}
       text="Ready to join the network?"
-      buttons={[
-        {
-          text: "Sign Up Now"},
-      ]}
+      buttons={[{ text: "Sign Up Now" }]}
     />
   </div>
 
@@ -228,26 +175,20 @@ export default function LandingPage() {
       columns={[
         {
           title: "Product",          items: [
-            {
-              label: "Features",              href: "#features"},
-            {
-              label: "Community",              href: "#testimonials"},
+            { label: "Features", href: "#features" },
+            { label: "Community", href: "#testimonials" },
           ],
         },
         {
           title: "Company",          items: [
-            {
-              label: "About",              href: "#"},
-            {
-              label: "Careers",              href: "#"},
+            { label: "About", href: "#" },
+            { label: "Careers", href: "#" },
           ],
         },
         {
           title: "Legal",          items: [
-            {
-              label: "Privacy",              href: "#"},
-            {
-              label: "Terms",              href: "#"},
+            { label: "Privacy", href: "#" },
+            { label: "Terms", href: "#" },
           ],
         },
       ]}

src/app/profile/page.tsx

@@ -4,11 +4,8 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { useState } from 'react';
 
 export default function ProfilePage() {
-  const [isFollowing, setIsFollowing] = useState(false);
-  
   return (
     <ThemeProvider
         defaultButtonVariant="directional-hover"
@@ -26,54 +23,47 @@ export default function ProfilePage() {
         <NavbarStyleApple
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Profile", id: "/profile" }
+            { name: "Features", id: "/#features" },
+            { name: "Community", id: "/#testimonials" },
+            { name: "FAQ", id: "/#faq" },
+            { name: "Profile", id: "/profile" },
           ]}
           brandName="Connect"
         />
-
-        <main className="py-24 px-6 md:px-12 max-w-5xl mx-auto min-h-screen">
-          <section className="flex flex-col items-center text-center mb-16">
-            <img 
-              src="http://img.b2bpic.net/free-photo/young-co-worker-spending-time-office_23-2149328340.jpg" 
-              alt="Profile" 
-              className="w-32 h-32 rounded-full object-cover mb-6 border-4 border-white shadow-lg"
-            />
-            <h1 className="text-4xl font-bold mb-2">Alex J.</h1>
-            <p className="text-muted-foreground mb-6">@alexj • Digital Creator & Social Innovator</p>
-            <div className="flex gap-4">
-              <button 
-                onClick={() => setIsFollowing(!isFollowing)}
-                className="px-6 py-2 rounded-full font-semibold transition-all bg-primary text-white hover:opacity-90"
-              >
-                {isFollowing ? "Unfollow" : "Follow"}
-              </button>
-              <button className="px-6 py-2 rounded-full font-semibold bg-secondary border border-gray-200 transition-all">
-                Edit Profile
-              </button>
-            </div>
-          </section>
-
-          <section>
-            <h2 className="text-2xl font-bold mb-8">Recent Posts</h2>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-              {[1, 2, 3, 4, 5, 6].map((i) => (
-                <div key={i} className="aspect-square bg-gray-100 rounded-2xl overflow-hidden hover:scale-105 transition-transform">
-                  <img 
-                    src={`http://img.b2bpic.net/free-photo/young-beautiful-cheerful-businesswoman-drinking-coffee-smiling-workplace-office_176420-6974.jpg?i=${i}`} 
-                    alt="Post" 
-                    className="w-full h-full object-cover"
-                  />
+        <main className="pt-24 pb-12 min-h-screen px-6">
+          <div className="max-w-4xl mx-auto space-y-8">
+            <h1 className="text-4xl font-bold">User Profile</h1>
+            <div className="bg-[var(--card)] p-8 rounded-lg shadow-sm border border-[var(--background-accent)]">
+              <div className="flex items-center gap-6">
+                <div className="w-24 h-24 rounded-full bg-[var(--background-accent)] flex items-center justify-center text-2xl font-bold">JD</div>
+                <div>
+                  <h2 className="text-2xl font-semibold">John Doe</h2>
+                  <p className="text-[var(--foreground)] opacity-70">@johndoe</p>
                 </div>
-              ))}
+              </div>
+              <div className="mt-8">
+                <h3 className="text-lg font-medium">Bio</h3>
+                <p className="mt-2 opacity-80">Creative soul, photography enthusiast, and tech explorer. Always looking for new connections!</p>
+              </div>
             </div>
-          </section>
+            <div className="bg-[var(--card)] p-8 rounded-lg shadow-sm border border-[var(--background-accent)]">
+               <h3 className="text-xl font-semibold mb-6">Account Settings</h3>
+               <div className="space-y-4">
+                   <button className="px-6 py-2 bg-[var(--primary-cta)] text-white rounded">Edit Profile</button>
+                   <button className="px-6 py-2 bg-[var(--secondary-cta)] text-[var(--foreground)] rounded ml-4">Change Password</button>
+               </div>
+            </div>
+          </div>
         </main>
-
         <FooterBaseReveal
           logoText="Connect"
-          columns={[]}
+          columns={[
+            { title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Community", href: "/#testimonials" }] },
+            { title: "Company", items: [{ label: "About", href: "/#" }, { label: "Careers", href: "/#" }] },
+            { title: "Legal", items: [{ label: "Privacy", href: "/#" }, { label: "Terms", href: "/#" }] },
+          ]}
         />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #ffffffe6;
-  --primary-cta: #e6e6e6;
-  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #000612e6;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);