Update src/app/signup/page.tsx

src/app/create-post/page.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import Input from '@/components/form/Input';
+import { Upload, FileText, CheckCircle } from "lucide-react";
+
+export default function CreatePostPage() {
+  const [content, setContent] = useState("");
+  const [title, setTitle] = useState("");
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="mediumLarge"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="bold"
+    >
+      <NavbarStyleApple
+      navItems={[
+        { name: "Home", id: "/" },
+        { name: "Features", id: "/#features" },
+        { name: "Community", id: "/#testimonials" },
+        { name: "FAQ", id: "/#faq" },
+        { name: "Create Post", id: "/create-post" },
+      ]}
+      brandName="Connect"
+    />
+
+    <main className="min-h-screen pt-32 pb-20 px-6">
+        <div className="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-sm border border-slate-200">
+            <h1 className="text-3xl font-bold mb-8">Create a New Post</h1>
+            
+            <div className="space-y-6">
+                <div>
+                    <label className="block text-sm font-medium mb-2">Title</label>
+                    <Input value={title} onChange={setTitle} placeholder="Enter post title" />
+                </div>
+
+                <div>
+                    <label className="block text-sm font-medium mb-2">Content</label>
+                    <textarea 
+                        value={content}
+                        onChange={(e) => setContent(e.target.value)}
+                        className="w-full min-h-[200px] p-4 border border-slate-200 rounded-md"
+                        placeholder="Write your story..."
+                    />
+                </div>
+
+                <div className="border-2 border-dashed border-slate-300 rounded-lg p-8 flex flex-col items-center justify-center text-center">
+                    <Upload className="w-10 h-10 text-slate-400 mb-4" />
+                    <p className="text-slate-600">Drag & drop media or click to upload</p>
+                </div>
+
+                <button 
+                    className="w-full bg-blue-600 text-white py-3 rounded-md font-semibold hover:bg-blue-700 flex items-center justify-center gap-2"
+                    onClick={() => alert("Post published!")}
+                >
+                    <CheckCircle className="w-5 h-5" />
+                    Publish Post
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <FooterBaseReveal
+      logoText="Connect"
+      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: "#" }] },
+      ]}
+    />
+    </ThemeProvider>
+  );
+}

src/app/feed/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+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 { Heart, MessageCircle, Share2, MoreHorizontal } from "lucide-react";
+import { useState, useEffect, useCallback } 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 },
+  { id: "2", author: "Sam K.", content: "Beautiful morning in the office. Productive day ahead! ☕", likes: 85, comments: 12 },
+  { id: "3", author: "Jamie R.", content: "Exploring new design patterns today. What do you think about minimalism?", likes: 210, comments: 89 },
+  { id: "4", author: "Jordan L.", content: "Finally finished that project. Time for a long break.", likes: 300, comments: 56 },
+  { id: "5", author: "Casey B.", content: "Check out these cool new features coming soon to the app!", likes: 450, comments: 120 },
+];
+
+export default function FeedPage() {
+  const [posts, setPosts] = useState(POSTS_DATA);
+  const [loading, setLoading] = useState(false);
+
+  const loadMore = useCallback(() => {
+    if (loading) return;
+    setLoading(true);
+    setTimeout(() => {
+      setPosts(prev => [...prev, ...POSTS_DATA.map(p => ({ ...p, id: Math.random().toString() }))]);
+      setLoading(false);
+    }, 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"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="mediumLarge"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Feed", id: "/feed" },
+          ]}
+          brandName="Connect"
+        />
+        
+        <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 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" />
+                  <span className="font-semibold">{post.author}</span>
+                </div>
+                <MoreHorizontal className="text-muted-foreground cursor-pointer" />
+              </div>
+              <p className="text-lg mb-6">{post.content}</p>
+              <div className="flex gap-6 text-muted-foreground">
+                <button className="flex items-center gap-2 hover:text-primary"><Heart size={20} /> {post.likes}</button>
+                <button className="flex items-center gap-2 hover:text-primary"><MessageCircle size={20} /> {post.comments}</button>
+                <button className="flex items-center gap-2 hover:text-primary"><Share2 size={20} /></button>
+              </div>
+            </div>
+          ))}
+          {loading && <div className="text-center py-4">Loading more posts...</div>}
+        </main>
+
+        <FooterBaseReveal
+          logoText="Connect"
+          columns={[]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from 'react';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import Input from '@/components/form/Input';
+import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  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"
+    >
+      <div className="min-h-screen flex flex-col">
+        <NavbarStyleApple 
+          brandName="Connect" 
+          navItems={[{ name: "Home", id: "/" }]} 
+        />
+        <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>
+            <div className="space-y-4">
+              <Input value={email} onChange={setEmail} placeholder="Email" />
+              <Input value={password} onChange={setPassword} placeholder="Password" type="password" />
+              <ButtonTextShift text="Login" className="w-full" />
+            </div>
+          </div>
+        </main>
+        <FooterBaseReveal logoText="Connect" columns={[]} />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/messaging/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import { useState } from 'react';
+import { MessageCircle, Send, Search, ChevronLeft } from 'lucide-react';
+
+export default function MessagingPage() {
+  const [activeChat, setActiveChat] = useState<string | null>(null);
+
+  const conversations = [
+    { id: '1', name: 'Alex J.', lastMessage: 'See you later!', time: '10:30 AM' },
+    { id: '2', name: 'Sam K.', lastMessage: 'Great idea!', time: '9:15 AM' },
+    { id: '3', name: 'Jamie R.', lastMessage: 'Thanks for the help.', time: 'Yesterday' },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="mediumLarge"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="bold"
+    >
+      <div className="min-h-screen flex flex-col">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Messaging", id: "/messaging" }
+          ]}
+          brandName="Connect"
+        />
+        
+        <main className="flex-1 flex max-w-6xl mx-auto w-full pt-24 pb-12 gap-6 px-4">
+          <div className={`w-full md:w-1/3 border rounded-xl p-4 flex flex-col gap-4 ${activeChat ? 'hidden md:flex' : 'flex'}`}>
+            <div className="flex items-center gap-2 border-b pb-4">
+              <Search className="w-5 h-5 text-gray-500" />
+              <input placeholder="Search chats..." className="flex-1 outline-none" />
+            </div>
+            {conversations.map(chat => (
+              <button key={chat.id} onClick={() => setActiveChat(chat.id)} className="flex justify-between items-center p-3 hover:bg-gray-100 rounded-lg">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"><MessageCircle className="w-5 h-5 text-blue-600" /></div>
+                  <div>
+                    <p className="font-semibold">{chat.name}</p>
+                    <p className="text-sm text-gray-500 text-left">{chat.lastMessage}</p>
+                  </div>
+                </div>
+                <span className="text-xs text-gray-400">{chat.time}</span>
+              </button>
+            ))}
+          </div>
+
+          <div className={`w-full md:w-2/3 border rounded-xl p-6 flex flex-col ${activeChat ? 'flex' : 'hidden md:flex items-center justify-center text-gray-400'}`}>
+            {activeChat ? (
+              <div className="flex flex-col h-full">
+                <button onClick={() => setActiveChat(null)} className="md:hidden flex items-center mb-4">
+                  <ChevronLeft /> Back
+                </button>
+                <div className="flex-1 space-y-4">
+                  <p className="text-center text-sm text-gray-400">Today</p>
+                  <div className="max-w-[70%] p-3 rounded-lg bg-blue-600 text-white self-end ml-auto">Hey, how are you?</div>
+                  <div className="max-w-[70%] p-3 rounded-lg bg-gray-100 self-start">Doing great, thanks!</div>
+                </div>
+                <div className="flex gap-2 mt-4">
+                    <input className="flex-1 border rounded-lg px-4 py-2" placeholder="Type a message..." />
+                    <button className="bg-blue-600 text-white px-4 py-2 rounded-lg"><Send className="w-5 h-5" /></button>
+                </div>
+              </div>
+            ) : (
+              <p>Select a conversation to start messaging</p>
+            )}
+          </div>
+        </main>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/notifications/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+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";
+
+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 },
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="mediumLarge"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="solid"
+        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 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>
+                <div className="flex-grow">
+                  <p className="font-medium">{n.text}</p>
+                  <p className="text-sm text-neutral-500">{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: "/" }] },
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -33,21 +33,13 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",
-          id: "hero",
-        },
+          name: "Home",          id: "hero"},
         {
-          name: "Features",
-          id: "features",
-        },
+          name: "Features",          id: "features"},
         {
-          name: "Community",
-          id: "testimonials",
-        },
+          name: "Community",          id: "testimonials"},
         {
-          name: "FAQ",
-          id: "faq",
-        },
+          name: "FAQ",          id: "faq"},
       ]}
       brandName="Connect"
     />
@@ -57,99 +49,56 @@ export default function LandingPage() {
       <HeroSplitTestimonial
       useInvertedBackground={false}
       background={{
-        variant: "gradient-bars",
-      }}
+        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: "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: "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: "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: "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",
-        },
+          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: "#",
-        },
+          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/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-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/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/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/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: "Connect with creators"},
         {
-          type: "text",
-          text: "Privacy-first design",
-        },
+          type: "text",          text: "Privacy-first design"},
         {
-          type: "text",
-          text: "Global interaction",
-        },
+          type: "text",          text: "Global interaction"},
         {
-          type: "text",
-          text: "Real-time updates",
-        },
+          type: "text",          text: "Real-time updates"},
         {
-          type: "text",
-          text: "Join the revolution",
-        },
+          type: "text",          text: "Join the revolution"},
       ]}
     />
   </div>
@@ -161,8 +110,7 @@ export default function LandingPage() {
       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",
-        },
+          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"
@@ -177,26 +125,11 @@ export default function LandingPage() {
       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: "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: "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: "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."
@@ -210,23 +143,14 @@ export default function LandingPage() {
       useInvertedBackground={true}
       metrics={[
         {
-          id: "m1",
-          icon: Users,
-          title: "Active Users",
-          value: "1M+",
-        },
+          id: "m1",          icon: Users,
+          title: "Active Users",          value: "1M+"},
         {
-          id: "m2",
-          icon: MessageCircle,
-          title: "Messages Daily",
-          value: "50M",
-        },
+          id: "m2",          icon: MessageCircle,
+          title: "Messages Daily",          value: "50M"},
         {
-          id: "m3",
-          icon: Share2,
-          title: "Posts Shared",
-          value: "10M",
-        },
+          id: "m3",          icon: Share2,
+          title: "Posts Shared",          value: "10M"},
       ]}
       title="Our Community"
       description="Growing rapidly with a global user base."
@@ -238,12 +162,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "TechCorp",
-        "Innovate",
-        "GlobalConnect",
-        "CreatorBase",
-        "SocialWave",
-      ]}
+        "TechCorp",        "Innovate",        "GlobalConnect",        "CreatorBase",        "SocialWave"]}
       title="Trusted by Communities"
       description="Our platform is growing worldwide."
     />
@@ -255,45 +174,15 @@ export default function LandingPage() {
       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: "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: "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: "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: "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: "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."
@@ -306,20 +195,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "f1",
-          title: "Is the account free?",
-          content: "Yes, basic account features are free.",
-        },
+          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: "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: "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?"
@@ -333,13 +213,11 @@ export default function LandingPage() {
       <ContactText
       useInvertedBackground={true}
       background={{
-        variant: "sparkles-gradient",
-      }}
+        variant: "sparkles-gradient"}}
       text="Ready to join the network?"
       buttons={[
         {
-          text: "Sign Up Now",
-        },
+          text: "Sign Up Now"},
       ]}
     />
   </div>
@@ -349,42 +227,27 @@ export default function LandingPage() {
       logoText="Connect"
       columns={[
         {
-          title: "Product",
-          items: [
+          title: "Product",          items: [
             {
-              label: "Features",
-              href: "#features",
-            },
+              label: "Features",              href: "#features"},
             {
-              label: "Community",
-              href: "#testimonials",
-            },
+              label: "Community",              href: "#testimonials"},
           ],
         },
         {
-          title: "Company",
-          items: [
+          title: "Company",          items: [
             {
-              label: "About",
-              href: "#",
-            },
+              label: "About",              href: "#"},
             {
-              label: "Careers",
-              href: "#",
-            },
+              label: "Careers",              href: "#"},
           ],
         },
         {
-          title: "Legal",
-          items: [
+          title: "Legal",          items: [
             {
-              label: "Privacy",
-              href: "#",
-            },
+              label: "Privacy",              href: "#"},
             {
-              label: "Terms",
-              href: "#",
-            },
+              label: "Terms",              href: "#"},
           ],
         },
       ]}
@@ -393,4 +256,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/profile/page.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+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"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="mediumLarge"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { 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"
+                  />
+                </div>
+              ))}
+            </div>
+          </section>
+        </main>
+
+        <FooterBaseReveal
+          logoText="Connect"
+          columns={[]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/signup/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from 'react';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import Input from '@/components/form/Input';
+import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function SignupPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  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"
+    >
+      <div className="min-h-screen flex flex-col">
+        <NavbarStyleApple 
+          brandName="Connect" 
+          navItems={[{ name: "Home", id: "/" }]} 
+        />
+        <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">Create Account</h1>
+            <div className="space-y-4">
+              <Input value={email} onChange={setEmail} placeholder="Email" />
+              <Input value={password} onChange={setPassword} placeholder="Password" type="password" />
+              <ButtonTextShift text="Sign Up" className="w-full" />
+            </div>
+          </div>
+        </main>
+        <FooterBaseReveal logoText="Connect" columns={[]} />
+      </div>
+    </ThemeProvider>
+  );
+}