Update src/app/signup/page.tsx

Merge version_2 into main

src/app/community/page.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { MessageCircle, Users, Globe } from 'lucide-react';
+
+export default function CommunityPage() {
+  const communityChannels = [
+    {
+      icon: MessageCircle,
+      title: "Discussion Forum",      description: "Ask questions, share insights, and connect with other learners about financial topics.",      link: "#",      members: "5,234"
+    },
+    {
+      icon: Users,
+      title: "Study Groups",      description: "Join topic-specific study groups to learn together with peers on your level.",      link: "#",      members: "1,892"
+    },
+    {
+      icon: Globe,
+      title: "Global Events",      description: "Participate in live webinars, challenges, and networking events with the FinHub community.",      link: "#",      members: "8,456"
+    },
+  ];
+
+  const leaderboardData = [
+    { rank: 1, name: "Alex Chen", points: 2840, streak: "45 days" },
+    { rank: 2, name: "Sarah Williams", points: 2720, streak: "38 days" },
+    { rank: 3, name: "Marcus Johnson", points: 2590, streak: "32 days" },
+    { rank: 4, name: "Emma Rodriguez", points: 2410, streak: "28 days" },
+    { rank: 5, name: "James Park", points: 2280, streak: "24 days" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="noise"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Learn", id: "/" },
+            { name: "Courses", id: "/courses" },
+            { name: "Community", id: "/community" },
+            { name: "FAQ", id: "/" },
+            { name: "Login", id: "/login" },
+          ]}
+          button={{
+            text: "Join Community",            href: "/signup"
+          }}
+          brandName="FinHub"
+        />
+      </div>
+
+      <div className="min-h-screen bg-background pt-20 pb-20 px-4">
+        <div className="max-w-7xl mx-auto">
+          {/* Header */}
+          <div className="mb-12 text-center">
+            <h1 className="text-4xl font-bold text-foreground mb-4">FinHub Community</h1>
+            <p className="text-lg text-foreground opacity-75 max-w-2xl mx-auto">
+              Connect with thousands of learners, share experiences, and grow together in our supportive financial education community.
+            </p>
+          </div>
+
+          {/* Community Channels */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+            {communityChannels.map((channel, index) => {
+              const Icon = channel.icon;
+              return (
+                <div key={index} className="bg-card rounded-lg shadow-md p-8 hover:shadow-lg transition-shadow">
+                  <Icon className="text-primary-cta mb-4" size={40} />
+                  <h3 className="text-xl font-bold text-foreground mb-3">{channel.title}</h3>
+                  <p className="text-foreground opacity-75 mb-4">{channel.description}</p>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm text-foreground opacity-60">{channel.members} members</span>
+                    <a
+                      href={channel.link}
+                      className="text-primary-cta hover:underline font-semibold"
+                    >
+                      Join →
+                    </a>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Leaderboard */}
+          <div className="bg-card rounded-lg shadow-md p-8">
+            <h2 className="text-2xl font-bold text-foreground mb-6">Top Learners Leaderboard</h2>
+            <div className="space-y-4">
+              {leaderboardData.map((user) => (
+                <div key={user.rank} className="flex items-center justify-between p-4 bg-background rounded-lg">
+                  <div className="flex items-center gap-4">
+                    <div className="w-10 h-10 bg-primary-cta text-white rounded-full flex items-center justify-center font-bold">
+                      {user.rank}
+                    </div>
+                    <div>
+                      <p className="font-semibold text-foreground">{user.name}</p>
+                      <p className="text-sm text-foreground opacity-60">Streak: {user.streak}</p>
+                    </div>
+                  </div>
+                  <p className="text-lg font-bold text-primary-cta">{user.points} pts</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
+            <div className="bg-card rounded-lg p-8 text-center shadow-md">
+              <p className="text-4xl font-bold text-primary-cta mb-2">15K+</p>
+              <p className="text-foreground opacity-75">Active Members</p>
+            </div>
+            <div className="bg-card rounded-lg p-8 text-center shadow-md">
+              <p className="text-4xl font-bold text-primary-cta mb-2">500+</p>
+              <p className="text-foreground opacity-75">Daily Discussions</p>
+            </div>
+            <div className="bg-card rounded-lg p-8 text-center shadow-md">
+              <p className="text-4xl font-bold text-primary-cta mb-2">50+</p>
+              <p className="text-foreground opacity-75">Weekly Events</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png?_wi=6"
+          imageAlt="FinHub gradient background"
+          logoText="FinHub"
+          copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
+          columns={[
+            {
+              title: "Learning",              items: [
+                { label: "Courses", href: "/courses" },
+                { label: "Lessons", href: "/" },
+                { label: "Challenges", href: "#" },
+                { label: "Resources", href: "#" },
+              ],
+            },
+            {
+              title: "Community",              items: [
+                { label: "Forum", href: "#" },
+                { label: "Discord", href: "#" },
+                { label: "Leaderboard", href: "#" },
+                { label: "Events", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Contact", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/courses/page.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { BookOpen } from 'lucide-react';
+
+export default function CoursesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="noise"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Learn", id: "/" },
+            { name: "Courses", id: "/courses" },
+            { name: "Community", id: "/" },
+            { name: "FAQ", id: "/" },
+            { name: "Login", id: "/login" },
+          ]}
+          button={{
+            text: "Start Learning",            href: "/signup"
+          }}
+          brandName="FinHub"
+        />
+      </div>
+
+      <div className="pt-20 pb-10">
+        <div id="courses" data-section="courses" className="px-4 max-w-7xl mx-auto">
+          <h1 className="text-4xl font-bold text-foreground mb-4">All Courses</h1>
+          <p className="text-lg text-foreground opacity-75 mb-10">
+            Explore our complete library of financial education courses
+          </p>
+        </div>
+      </div>
+
+      <div id="learning" data-section="learning">
+        <ProductCardOne
+          title="Browse All Courses"
+          description="Find the perfect course to advance your financial knowledge"
+          tag="Complete Library"
+          tagIcon={BookOpen}
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "1",              name: "Beginner's Guide to Stocks",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png?_wi=2",              imageAlt: "Beginner stock market course"
+            },
+            {
+              id: "2",              name: "Crypto 101 Course",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/modern-illustration-of-cryptocurrency-an-1772485586614-526c5195.png?_wi=2",              imageAlt: "Cryptocurrency fundamentals"
+            },
+            {
+              id: "3",              name: "Advanced Portfolio Management",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/friendly-illustration-showing-budgeting--1772485586201-261e93c5.png?_wi=2",              imageAlt: "Portfolio management strategies"
+            },
+            {
+              id: "4",              name: "Financial Independence Path",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png?_wi=3",              imageAlt: "Path to financial independence"
+            },
+            {
+              id: "5",              name: "Real Estate Investment Basics",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png",              imageAlt: "Real estate investment course"
+            },
+            {
+              id: "6",              name: "Tax Planning Essentials",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/friendly-illustration-showing-budgeting--1772485586201-261e93c5.png?_wi=3",              imageAlt: "Tax planning course"
+            },
+            {
+              id: "7",              name: "Retirement Planning Guide",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/modern-illustration-of-cryptocurrency-an-1772485586614-526c5195.png?_wi=3",              imageAlt: "Retirement planning course"
+            },
+            {
+              id: "8",              name: "Business Finance Fundamentals",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png?_wi=3",              imageAlt: "Business finance course"
+            }
+          ]}
+          textboxLayout="default"
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Back to Home", href: "/" },
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png?_wi=4"
+          imageAlt="FinHub gradient background"
+          logoText="FinHub"
+          copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
+          columns={[
+            {
+              title: "Learning",              items: [
+                { label: "Courses", href: "/courses" },
+                { label: "Lessons", href: "/" },
+                { label: "Challenges", href: "#" },
+                { label: "Resources", href: "#" },
+              ],
+            },
+            {
+              title: "Community",              items: [
+                { label: "Forum", href: "#" },
+                { label: "Discord", href: "#" },
+                { label: "Leaderboard", href: "#" },
+                { label: "Events", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Contact", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/dashboard/page.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { BarChart3, Trophy, TrendingUp, Clock } from 'lucide-react';
+
+export default function DashboardPage() {
+  const stats = [
+    { icon: Clock, label: "Hours Learned", value: "24.5", color: "text-blue-500" },
+    { icon: Trophy, label: "Badges Earned", value: "12", color: "text-yellow-500" },
+    { icon: TrendingUp, label: "Courses Completed", value: "3", color: "text-green-500" },
+    { icon: BarChart3, label: "Current Streak", value: "7 days", color: "text-purple-500" },
+  ];
+
+  const recentCourses = [
+    { title: "Beginner's Guide to Stocks", progress: 75, status: "In Progress" },
+    { title: "Personal Budgeting", progress: 100, status: "Completed" },
+    { title: "Crypto 101 Course", progress: 45, status: "In Progress" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="noise"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Learn", id: "/" },
+            { name: "Courses", id: "/courses" },
+            { name: "Community", id: "/" },
+            { name: "FAQ", id: "/" },
+            { name: "Dashboard", id: "/dashboard" },
+          ]}
+          button={{
+            text: "Log Out",            href: "/login"
+          }}
+          brandName="FinHub"
+        />
+      </div>
+
+      <div className="min-h-screen bg-background pt-20 pb-20 px-4">
+        <div className="max-w-7xl mx-auto">
+          {/* Header */}
+          <div className="mb-12">
+            <h1 className="text-4xl font-bold text-foreground mb-2">Welcome Back, Learner!</h1>
+            <p className="text-lg text-foreground opacity-75">Here's your learning progress and achievements</p>
+          </div>
+
+          {/* Stats Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+            {stats.map((stat, index) => {
+              const Icon = stat.icon;
+              return (
+                <div key={index} className="bg-card rounded-lg p-6 shadow-md">
+                  <div className="flex items-center justify-between mb-4">
+                    <Icon className={`${stat.color}`} size={32} />
+                  </div>
+                  <p className="text-sm text-foreground opacity-75 mb-2">{stat.label}</p>
+                  <p className="text-3xl font-bold text-foreground">{stat.value}</p>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Recent Courses */}
+          <div className="bg-card rounded-lg shadow-md p-8 mb-12">
+            <h2 className="text-2xl font-bold text-foreground mb-6">Your Learning Progress</h2>
+            <div className="space-y-6">
+              {recentCourses.map((course, index) => (
+                <div key={index}>
+                  <div className="flex justify-between items-center mb-2">
+                    <h3 className="text-lg font-semibold text-foreground">{course.title}</h3>
+                    <span className={`px-3 py-1 rounded-full text-sm font-medium ${
+                      course.status === "Completed" 
+                        ? "bg-green-100 text-green-800" 
+                        : "bg-blue-100 text-blue-800"
+                    }`}>
+                      {course.status}
+                    </span>
+                  </div>
+                  <div className="w-full bg-background rounded-full h-3 overflow-hidden">
+                    <div
+                      className="bg-primary-cta h-full transition-all duration-500"
+                      style={{ width: `${course.progress}%` }}
+                    />
+                  </div>
+                  <p className="text-sm text-foreground opacity-75 mt-1">{course.progress}% Complete</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Call to Action */}
+          <div className="bg-gradient-to-r from-primary-cta to-accent rounded-lg p-8 text-center">
+            <h3 className="text-2xl font-bold text-white mb-4">Continue Your Learning Journey</h3>
+            <p className="text-white opacity-90 mb-6">
+              You're making great progress! Check out new courses to expand your financial knowledge.
+            </p>
+            <a
+              href="/courses"
+              className="inline-block bg-white text-primary-cta px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
+            >
+              Browse More Courses
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png?_wi=5"
+          imageAlt="FinHub gradient background"
+          logoText="FinHub"
+          copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
+          columns={[
+            {
+              title: "Learning",              items: [
+                { label: "Courses", href: "/courses" },
+                { label: "Lessons", href: "/" },
+                { label: "Challenges", href: "#" },
+                { label: "Resources", href: "#" },
+              ],
+            },
+            {
+              title: "Community",              items: [
+                { label: "Forum", href: "#" },
+                { label: "Discord", href: "#" },
+                { label: "Leaderboard", href: "#" },
+                { label: "Events", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Contact", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -22,25 +22,28 @@ const manrope = Manrope({
 export const metadata: Metadata = {
   title: "FinHub - Learn Finance Through Playful, Gamified Lessons",  description: "Master stocks, crypto, budgeting & investing with FinHub's interactive, Duolingo-style fintech learning platform. Free courses, gamified lessons, and supportive community.",  keywords: "fintech learning, financial education, investing course, cryptocurrency learning, budgeting app, stock market education, gamified learning",  metadataBase: new URL("https://finhub.com"),
   alternates: {
-    canonical: "https://finhub.com"},
+    canonical: "https://finhub.com"
+  },
   openGraph: {
     title: "FinHub - Learn Finance the Playful Way",    description: "Interactive fintech education with gamified lessons on stocks, crypto, and personal finance. Join thousands of learners today.",    url: "https://finhub.com",    siteName: "FinHub",    type: "website",    images: [
       {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/a-vibrant-playful-illustration-of-a-pers-1772485585732-ed859da8.png",        alt: "FinHub Learning Platform"},
-    ],
+        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/a-vibrant-playful-illustration-of-a-pers-1772485585732-ed859da8.png",        alt: "FinHub Learning Platform"
+      }
+    ]
   },
   twitter: {
     card: "summary_large_image",    title: "FinHub - Learn Finance Through Play",    description: "Free interactive fintech courses with gamified lessons on stocks, crypto, and investing.",    images: [
-      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/a-vibrant-playful-illustration-of-a-pers-1772485585732-ed859da8.png"],
+      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/a-vibrant-playful-illustration-of-a-pers-1772485585732-ed859da8.png"
+    ]
   },
   robots: {
     index: true,
-    follow: true,
-  },
+    follow: true
+  }
 };
 
 export default function RootLayout({
-  children,
+  children
 }: Readonly<{
   children: React.ReactNode;
 }>) {

src/app/login/page.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { LogIn } from 'lucide-react';
+import { useState } from 'react';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    // Add login logic here
+    setTimeout(() => setLoading(false), 1000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="noise"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Learn", id: "features" },
+            { name: "Courses", id: "learning" },
+            { name: "Community", id: "testimonials" },
+            { name: "FAQ", id: "faq" },
+            { name: "Login", id: "/login" },
+          ]}
+          button={{
+            text: "Start Learning",            href: "/"
+          }}
+          brandName="FinHub"
+        />
+      </div>
+
+      <div className="min-h-screen flex items-center justify-center px-4 py-20">
+        <div className="w-full max-w-md">
+          <div className="bg-card rounded-lg shadow-lg p-8">
+            <div className="flex items-center justify-center mb-6">
+              <LogIn className="text-primary-cta mr-2" size={32} />
+              <h1 className="text-3xl font-bold text-foreground">Welcome Back</h1>
+            </div>
+            
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="your@email.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
+                  Password
+                </label>
+                <input
+                  type="password"
+                  id="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="••••••••"
+                  required
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full bg-primary-cta text-primary-cta-text py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity disabled:opacity-50"
+              >
+                {loading ? 'Logging In...' : 'Log In'}
+              </button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-foreground text-sm">
+                Don't have an account?{' '}
+                <a href="/signup" className="text-primary-cta hover:underline font-semibold">
+                  Sign up here
+                </a>
+              </p>
+            </div>
+
+            <div className="mt-4 text-center">
+              <a href="#" className="text-primary-cta text-sm hover:underline">
+                Forgot your password?
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png?_wi=2"
+          imageAlt="FinHub gradient background"
+          logoText="FinHub"
+          copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
+          columns={[
+            {
+              title: "Learning",              items: [
+                { label: "Courses", href: "learning" },
+                { label: "Lessons", href: "features" },
+                { label: "Challenges", href: "#" },
+                { label: "Resources", href: "#" },
+              ],
+            },
+            {
+              title: "Community",              items: [
+                { label: "Forum", href: "#" },
+                { label: "Discord", href: "#" },
+                { label: "Leaderboard", href: "#" },
+                { label: "Events", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Contact", href: "contact" },
+                { label: "Privacy Policy", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,10 +32,11 @@ export default function LandingPage() {
             { name: "Courses", id: "learning" },
             { name: "Community", id: "testimonials" },
             { name: "FAQ", id: "faq" },
-            { name: "Blog", id: "blog" },
+            { name: "Login", id: "/login" },
           ]}
           button={{
-            text: "Start Learning",            href: "contact"}}
+            text: "Start Learning",            href: "contact"
+          }}
           brandName="FinHub"
         />
       </div>
@@ -49,7 +50,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           background={{ variant: "sparkles-gradient" }}
           buttons={[
-            { text: "Start Free Lesson", href: "contact" },
+            { text: "Start Free Lesson", href: "/signup" },
             { text: "View Courses", href: "learning" },
           ]}
           buttonAnimation="slide-up"
@@ -69,13 +70,17 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           accordionItems={[
             {
-              id: "1",              title: "Stock Market Mastery",              content: "Understand how stocks work, learn technical analysis, and discover investment strategies through gamified scenarios and real-time market simulations."},
+              id: "1",              title: "Stock Market Mastery",              content: "Understand how stocks work, learn technical analysis, and discover investment strategies through gamified scenarios and real-time market simulations."
+            },
             {
-              id: "2",              title: "Crypto & Blockchain",              content: "Demystify cryptocurrency, explore blockchain technology, and learn how to evaluate digital assets with our interactive crypto challenges."},
+              id: "2",              title: "Crypto & Blockchain",              content: "Demystify cryptocurrency, explore blockchain technology, and learn how to evaluate digital assets with our interactive crypto challenges."
+            },
             {
-              id: "3",              title: "Personal Budgeting",              content: "Master budgeting techniques, track spending habits, and build healthy financial routines with our intuitive budget planning tools."},
+              id: "3",              title: "Personal Budgeting",              content: "Master budgeting techniques, track spending habits, and build healthy financial routines with our intuitive budget planning tools."
+            },
             {
-              id: "4",              title: "Investment Strategies",              content: "Learn diversification, portfolio management, and risk assessment through case studies and virtual investment competitions."},
+              id: "4",              title: "Investment Strategies",              content: "Learn diversification, portfolio management, and risk assessment through case studies and virtual investment competitions."
+            }
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png?_wi=1"
           imageAlt="Stock market learning illustration"
@@ -83,7 +88,7 @@ export default function LandingPage() {
           useInvertedBackground={false}
           mediaPosition="right"
           buttons={[
-            { text: "Explore Lessons", href: "#" },
+            { text: "Try Interactive Lessons", href: "#" },
           ]}
           buttonAnimation="slide-up"
         />
@@ -98,13 +103,17 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           products={[
             {
-              id: "1",              name: "Beginner's Guide to Stocks",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png?_wi=2",              imageAlt: "Beginner stock market course"},
+              id: "1",              name: "Beginner's Guide to Stocks",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png?_wi=2",              imageAlt: "Beginner stock market course"
+            },
             {
-              id: "2",              name: "Crypto 101 Course",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/modern-illustration-of-cryptocurrency-an-1772485586614-526c5195.png",              imageAlt: "Cryptocurrency fundamentals"},
+              id: "2",              name: "Crypto 101 Course",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/modern-illustration-of-cryptocurrency-an-1772485586614-526c5195.png?_wi=1",              imageAlt: "Cryptocurrency fundamentals"
+            },
             {
-              id: "3",              name: "Advanced Portfolio Management",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/friendly-illustration-showing-budgeting--1772485586201-261e93c5.png",              imageAlt: "Portfolio management strategies"},
+              id: "3",              name: "Advanced Portfolio Management",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/friendly-illustration-showing-budgeting--1772485586201-261e93c5.png?_wi=1",              imageAlt: "Portfolio management strategies"
+            },
             {
-              id: "4",              name: "Financial Independence Path",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png?_wi=3",              imageAlt: "Path to financial independence"},
+              id: "4",              name: "Financial Independence Path",              price: "Free",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/colorful-illustration-of-stock-market-ch-1772485586013-5ec22a53.png?_wi=3",              imageAlt: "Path to financial independence"
+            }
           ]}
           textboxLayout="default"
           gridVariant="four-items-2x2-equal-grid"
@@ -124,22 +133,28 @@ export default function LandingPage() {
           testimonials={[
             {
               id: "1",              name: "Alex Johnson",              handle: "@alexjohn",              testimonial: "FinHub made learning about stocks so fun! The gamified lessons kept me engaged, and I actually understand the stock market now.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/portrait-photo-of-a-happy-young-adult-pr-1772485585642-16f79072.png?_wi=1",              imageAlt: "Alex Johnson"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/portrait-photo-of-a-happy-young-adult-pr-1772485585642-16f79072.png?_wi=1",              imageAlt: "Alex Johnson"
+            },
             {
               id: "2",              name: "Sarah Chen",              handle: "@sarahfinance",              testimonial: "The interactive crypto course broke down complex blockchain concepts into easy-to-understand lessons. Highly recommend!",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/portrait-photo-of-a-confident-woman-smil-1772485585769-a7ac5a64.png?_wi=1",              imageAlt: "Sarah Chen"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/portrait-photo-of-a-confident-woman-smil-1772485585769-a7ac5a64.png?_wi=1",              imageAlt: "Sarah Chen"
+            },
             {
               id: "3",              name: "Marcus Williams",              handle: "@marcusw",              testimonial: "I went from complete beginner to confidently managing my portfolio thanks to FinHub's structured learning paths.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/portrait-photo-of-a-friendly-man-with-a--1772485585558-9539445f.png",              imageAlt: "Marcus Williams"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/portrait-photo-of-a-friendly-man-with-a--1772485585558-9539445f.png",              imageAlt: "Marcus Williams"
+            },
             {
               id: "4",              name: "Emma Rodriguez",              handle: "@emmafintech",              testimonial: "Finally, a platform that makes financial education fun and accessible! The community aspect is incredible.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/portrait-photo-of-a-young-professional-w-1772485585796-0cb638e6.png",              imageAlt: "Emma Rodriguez"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/portrait-photo-of-a-young-professional-w-1772485585796-0cb638e6.png",              imageAlt: "Emma Rodriguez"
+            },
             {
               id: "5",              name: "James Park",              handle: "@jamespark",              testimonial: "The budgeting tools combined with lessons helped me save 30% more each month. Game changer!",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/portrait-photo-of-a-happy-young-adult-pr-1772485585642-16f79072.png?_wi=2",              imageAlt: "James Park"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/portrait-photo-of-a-happy-young-adult-pr-1772485585642-16f79072.png?_wi=2",              imageAlt: "James Park"
+            },
             {
               id: "6",              name: "Lisa Thompson",              handle: "@lisafinance",              testimonial: "Best fintech learning platform I've found. The lessons are bite-sized and perfect for busy professionals.",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/portrait-photo-of-a-confident-woman-smil-1772485585769-a7ac5a64.png?_wi=2",              imageAlt: "Lisa Thompson"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/portrait-photo-of-a-confident-woman-smil-1772485585769-a7ac5a64.png?_wi=2",              imageAlt: "Lisa Thompson"
+            }
           ]}
           showRating={true}
           textboxLayout="default"
@@ -154,17 +169,23 @@ export default function LandingPage() {
           sideDescription="Everything you need to know to get started with your financial learning journey"
           faqs={[
             {
-              id: "1",              title: "Is FinHub really free?",              content: "Yes! All core courses and lessons are completely free. We believe financial education should be accessible to everyone."},
+              id: "1",              title: "Is FinHub really free?",              content: "Yes! All core courses and lessons are completely free. We believe financial education should be accessible to everyone."
+            },
             {
-              id: "2",              title: "What topics does FinHub cover?",              content: "We cover stocks, cryptocurrencies, personal budgeting, investment strategies, financial planning, and more. New topics are added regularly."},
+              id: "2",              title: "What topics does FinHub cover?",              content: "We cover stocks, cryptocurrencies, personal budgeting, investment strategies, financial planning, and more. New topics are added regularly."
+            },
             {
-              id: "3",              title: "Can I learn at my own pace?",              content: "Absolutely! All lessons are self-paced. You can take weeks or months to complete a course, and your progress is saved automatically."},
+              id: "3",              title: "Can I learn at my own pace?",              content: "Absolutely! All lessons are self-paced. You can take weeks or months to complete a course, and your progress is saved automatically."
+            },
             {
-              id: "4",              title: "Do I need prior financial knowledge?",              content: "No! Our courses are designed for complete beginners. We start with fundamentals and progressively build more complex concepts."},
+              id: "4",              title: "Do I need prior financial knowledge?",              content: "No! Our courses are designed for complete beginners. We start with fundamentals and progressively build more complex concepts."
+            },
             {
-              id: "5",              title: "How is the content gamified?",              content: "Earn points and badges as you complete lessons, compete on leaderboards with friends, and unlock special achievements to stay motivated."},
+              id: "5",              title: "How is the content gamified?",              content: "Earn points and badges as you complete lessons, compete on leaderboards with friends, and unlock special achievements to stay motivated."
+            },
             {
-              id: "6",              title: "Can I track my learning progress?",              content: "Yes! Your dashboard shows detailed progress metrics, learning streaks, badges earned, and personalized recommendations for your next lessons."},
+              id: "6",              title: "Can I track my learning progress?",              content: "Yes! Your dashboard shows detailed progress metrics, learning streaks, badges earned, and personalized recommendations for your next lessons."
+            }
           ]}
           textPosition="left"
           useInvertedBackground={true}
@@ -190,15 +211,15 @@ export default function LandingPage() {
 
       <div id="footer" data-section="footer">
         <FooterMedia
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png?_wi=1"
           imageAlt="FinHub gradient background"
           logoText="FinHub"
           copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
           columns={[
             {
               title: "Learning",              items: [
-                { label: "Courses", href: "#learning" },
-                { label: "Lessons", href: "#features" },
+                { label: "Courses", href: "learning" },
+                { label: "Lessons", href: "features" },
                 { label: "Challenges", href: "#" },
                 { label: "Resources", href: "#" },
               ],
@@ -215,7 +236,7 @@ export default function LandingPage() {
               title: "Company",              items: [
                 { label: "About Us", href: "#" },
                 { label: "Blog", href: "#" },
-                { label: "Contact", href: "#contact" },
+                { label: "Contact", href: "contact" },
                 { label: "Privacy Policy", href: "#" },
               ],
             },

src/app/signup/page.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { UserPlus } from 'lucide-react';
+import { useState } from 'react';
+
+export default function SignupPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [fullName, setFullName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setLoading(true);
+    // Add signup logic here
+    setTimeout(() => setLoading(false), 1000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="noise"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Learn", id: "features" },
+            { name: "Courses", id: "learning" },
+            { name: "Community", id: "testimonials" },
+            { name: "FAQ", id: "faq" },
+            { name: "Login", id: "/login" },
+          ]}
+          button={{
+            text: "Start Learning",            href: "/"
+          }}
+          brandName="FinHub"
+        />
+      </div>
+
+      <div className="min-h-screen flex items-center justify-center px-4 py-20">
+        <div className="w-full max-w-md">
+          <div className="bg-card rounded-lg shadow-lg p-8">
+            <div className="flex items-center justify-center mb-6">
+              <UserPlus className="text-primary-cta mr-2" size={32} />
+              <h1 className="text-3xl font-bold text-foreground">Get Started</h1>
+            </div>
+            
+            {error && (
+              <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleSignup} className="space-y-4">
+              <div>
+                <label htmlFor="fullName" className="block text-sm font-medium text-foreground mb-2">
+                  Full Name
+                </label>
+                <input
+                  type="text"
+                  id="fullName"
+                  value={fullName}
+                  onChange={(e) => setFullName(e.target.value)}
+                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="John Doe"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="your@email.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
+                  Password
+                </label>
+                <input
+                  type="password"
+                  id="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="••••••••"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-2">
+                  Confirm Password
+                </label>
+                <input
+                  type="password"
+                  id="confirmPassword"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="••••••••"
+                  required
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full bg-primary-cta text-primary-cta-text py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity disabled:opacity-50"
+              >
+                {loading ? 'Creating Account...' : 'Create Account'}
+              </button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-foreground text-sm">
+                Already have an account?{' '}
+                <a href="/login" className="text-primary-cta hover:underline font-semibold">
+                  Log in here
+                </a>
+              </p>
+            </div>
+
+            <div className="mt-4 text-center text-xs text-foreground opacity-75">
+              <p>By signing up, you agree to our Terms and Privacy Policy</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png?_wi=3"
+          imageAlt="FinHub gradient background"
+          logoText="FinHub"
+          copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
+          columns={[
+            {
+              title: "Learning",              items: [
+                { label: "Courses", href: "learning" },
+                { label: "Lessons", href: "features" },
+                { label: "Challenges", href: "#" },
+                { label: "Resources", href: "#" },
+              ],
+            },
+            {
+              title: "Community",              items: [
+                { label: "Forum", href: "#" },
+                { label: "Discord", href: "#" },
+                { label: "Leaderboard", href: "#" },
+                { label: "Events", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Contact", href: "contact" },
+                { label: "Privacy Policy", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}