Merge version_2 into main

Merge version_2 into main

src/app/certificates/page.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import TextBox from "@/components/Textbox";
+import ButtonTextShift from "@/components/button/ButtonTextShift/ButtonTextShift";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function CertificatePage() {
+  const downloadCertificate = () => {
+    alert("Certificate download triggered!");
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeLargeTitles"
+      background="none"
+      cardStyle="inset"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Dashboard", id: "/" },
+            { name: "Modules", id: "/" },
+            { name: "Leaderboard", id: "/" },
+            { name: "Rewards", id: "/" },
+          ]}
+          brandName="AI Learner"
+        />
+        
+        <div className="min-h-screen pt-32 pb-16 px-4 md:px-8">
+          <TextBox
+            title="Your Achievement"
+            description="Personalized certificate earned through your learning milestones."
+            textboxLayout="default"
+            center={true}
+          />
+          
+          <div className="flex flex-col items-center justify-center mt-12 gap-8">
+            <div className="w-full max-w-2xl aspect-[1.414] bg-gradient-to-br from-gray-50 to-gray-200 border-4 border-gray-300 rounded-lg flex flex-col items-center justify-center p-8 text-center">
+                <h2 className="text-4xl font-bold text-gray-800">Certificate of Achievement</h2>
+                <p className="text-xl mt-4 text-gray-600">This is to certify that</p>
+                <p className="text-3xl font-semibold mt-2 text-indigo-600">Learner Name</p>
+                <p className="text-lg mt-4 text-gray-600">has successfully completed the AI Fundamentals course.</p>
+            </div>
+
+            <ButtonTextShift 
+                text="Download Certificate" 
+                onClick={downloadCertificate} 
+                className="mt-4"
+            />
+          </div>
+        </div>
+
+        <FooterSimple
+          columns={[]}
+          bottomLeftText="© 2024 AI Learner Platform"
+          bottomRightText="All Rights Reserved"
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/leaderboard/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Trophy, Star, Users, Medal } from "lucide-react";
+
+export default function LeaderboardPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="compact"
+        sizing="mediumLargeSizeLargeTitles"
+        background="none"
+        cardStyle="inset"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+            navItems={[
+              { name: "Dashboard", id: "/" },
+              { name: "Modules", id: "/" },
+              { name: "Leaderboard", id: "/leaderboard" },
+            ]}
+            brandName="AI Learner"
+          />
+        </div>
+
+        <div id="leaderboard" data-section="leaderboard" className="pt-24">
+            <MetricCardOne
+                title="Global Leaderboard"
+                description="See how you stack up against top learners worldwide."
+                gridVariant="bento-grid"
+                animationType="slide-up"
+                textboxLayout="split"
+                useInvertedBackground={false}
+                metrics={[
+                    { id: "1", title: "Alex M.", value: "#1", description: "15,420 Points", icon: Trophy },
+                    { id: "2", title: "Jamie L.", value: "#2", description: "14,890 Points", icon: Medal },
+                    { id: "3", title: "Taylor R.", value: "#3", description: "14,100 Points", icon: Star },
+                    { id: "4", title: "Sam K.", value: "#4", description: "13,950 Points", icon: Users },
+                ]}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterSimple
+            columns={[
+              { title: "Platform", items: [{ label: "Dashboard", href: "/" }] },
+              { title: "Social", items: [{ label: "Leaderboard", href: "/leaderboard" }] },
+            ]}
+            bottomLeftText="© 2024 AI Learner Platform"
+            bottomRightText="All Rights Reserved"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -30,21 +30,11 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Dashboard",
-          id: "#dashboard",
-        },
+          name: "Dashboard",          id: "#dashboard"},
         {
-          name: "Modules",
-          id: "#modules",
-        },
+          name: "Modules",          id: "#modules"},
         {
-          name: "Leaderboard",
-          id: "#leaderboard",
-        },
-        {
-          name: "Rewards",
-          id: "#rewards",
-        },
+          name: "Certificates",          id: "/certificates"},
       ]}
       brandName="AI Learner"
     />
@@ -56,35 +46,21 @@ export default function LandingPage() {
       description="Level up your knowledge with our AI-powered, personalized, and gamified learning platform."
       buttons={[
         {
-          text: "Start Journey",
-          href: "#modules",
-        },
+          text: "Start Journey",          href: "#modules"},
       ]}
       slides={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/education-day-elements-with-tablet_23-2148721225.jpg",
-          imageAlt: "AI Learning Dashboard",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/education-day-elements-with-tablet_23-2148721225.jpg",          imageAlt: "AI Learning Dashboard"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/person-using-smartphone-his-automated-home_23-2149036912.jpg?_wi=1",
-          imageAlt: "Gamified App Interaction",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/person-using-smartphone-his-automated-home_23-2149036912.jpg?_wi=1",          imageAlt: "Gamified App Interaction"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg",
-          imageAlt: "AI Neural Network Concept",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg",          imageAlt: "AI Neural Network Concept"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/lamp-design-with-fantasy-style_23-2151101658.jpg",
-          imageAlt: "Achievement Badges",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/lamp-design-with-fantasy-style_23-2151101658.jpg",          imageAlt: "Achievement Badges"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/senior-women-spending-time-together-cafe-talking-working_23-2149260275.jpg",
-          imageAlt: "AI Tutor Analytics",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/senior-women-spending-time-together-cafe-talking-working_23-2149260275.jpg",          imageAlt: "AI Tutor Analytics"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/smart-home-app-phone_23-2149036818.jpg",
-          imageAlt: "Leaderboard Ranking",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/smart-home-app-phone_23-2149036818.jpg",          imageAlt: "Leaderboard Ranking"},
       ]}
     />
   </div>
@@ -96,19 +72,13 @@ export default function LandingPage() {
       metrics={[
         {
           icon: Zap,
-          label: "Points",
-          value: "2,540",
-        },
+          label: "Points",          value: "2,540"},
         {
           icon: Award,
-          label: "Badges",
-          value: "12",
-        },
+          label: "Badges",          value: "12"},
         {
           icon: Flame,
-          label: "Daily Streak",
-          value: "15 Days",
-        },
+          label: "Daily Streak",          value: "15 Days"},
       ]}
       metricsAnimation="slide-up"
     />
@@ -120,23 +90,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "AI Fundamentals",
-          description: "Master the basics of machine learning models.",
-          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-data-center-cityscape_23-2152020917.jpg",
-          imageAlt: "AI Fundamentals",
-        },
+          title: "AI Fundamentals",          description: "Master the basics of machine learning models.",          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-data-center-cityscape_23-2152020917.jpg",          imageAlt: "AI Fundamentals"},
         {
-          title: "Interactive Quizzes",
-          description: "Test your knowledge with adaptive difficulty levels.",
-          imageSrc: "http://img.b2bpic.net/free-vector/flat-back-school-elements-collection_23-2149480117.jpg",
-          imageAlt: "Interactive Quizzes",
-        },
+          title: "Interactive Quizzes",          description: "Test your knowledge with adaptive difficulty levels.",          imageSrc: "http://img.b2bpic.net/free-vector/flat-back-school-elements-collection_23-2149480117.jpg",          imageAlt: "Interactive Quizzes"},
         {
-          title: "Achievement Tracker",
-          description: "Stay motivated with daily streaks and milestones.",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-dice-nature_23-2151110389.jpg",
-          imageAlt: "Achievement Tracker",
-        },
+          title: "Achievement Tracker",          description: "Stay motivated with daily streaks and milestones.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-dice-nature_23-2151110389.jpg",          imageAlt: "Achievement Tracker"},
       ]}
       title="Learning Modules"
       description="Discover personalized topics tailored to your performance and behavior."
@@ -150,59 +108,28 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
-          name: "Sarah J.",
-          role: "Student",
-          company: "TechAcademy",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-teenage-girl-sitting-cafe_1262-3048.jpg",
-        },
+          id: "1",          name: "Sarah J.",          role: "Student",          company: "TechAcademy",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-teenage-girl-sitting-cafe_1262-3048.jpg"},
         {
-          id: "2",
-          name: "Mark C.",
-          role: "Developer",
-          company: "StartupX",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-brainstorming_1098-14293.jpg",
-        },
+          id: "2",          name: "Mark C.",          role: "Developer",          company: "StartupX",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/man-brainstorming_1098-14293.jpg"},
         {
-          id: "3",
-          name: "Emily R.",
-          role: "Designer",
-          company: "CreativeLab",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-smiling-while-holding-her-laptop_23-2147611480.jpg",
-        },
+          id: "3",          name: "Emily R.",          role: "Designer",          company: "CreativeLab",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-smiling-while-holding-her-laptop_23-2147611480.jpg"},
         {
-          id: "4",
-          name: "David K.",
-          role: "Engineer",
-          company: "CodeFlow",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-female-standing-hall-with-laptop-smiling-camera-girl-student-working-freelance-from-coffee-shop-cafe-manager-using-computer-browsing-internet-shopping-online_197531-30490.jpg",
-        },
+          id: "4",          name: "David K.",          role: "Engineer",          company: "CodeFlow",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-female-standing-hall-with-laptop-smiling-camera-girl-student-working-freelance-from-coffee-shop-cafe-manager-using-computer-browsing-internet-shopping-online_197531-30490.jpg"},
         {
-          id: "5",
-          name: "Anna S.",
-          role: "Learner",
-          company: "GlobalEdu",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5055.jpg",
-        },
+          id: "5",          name: "Anna S.",          role: "Learner",          company: "GlobalEdu",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5055.jpg"},
       ]}
       kpiItems={[
         {
-          value: "10k+",
-          label: "Active Learners",
-        },
+          value: "10k+",          label: "Active Learners"},
         {
-          value: "98%",
-          label: "Completion Rate",
-        },
+          value: "98%",          label: "Completion Rate"},
         {
-          value: "5M+",
-          label: "Quizzes Solved",
-        },
+          value: "5M+",          label: "Quizzes Solved"},
       ]}
       title="Learner Success"
       description="Hear what our community says about their learning journeys."
@@ -213,8 +140,7 @@ export default function LandingPage() {
       <ContactSplit
       useInvertedBackground={false}
       background={{
-        variant: "sparkles-gradient",
-      }}
+        variant: "sparkles-gradient"}}
       tag="Get Started"
       title="Join the AI Learner Community"
       description="Sign up today and start your personalized gamified learning journey."
@@ -228,42 +154,19 @@ export default function LandingPage() {
       <FooterSimple
       columns={[
         {
-          title: "Platform",
-          items: [
+          title: "Platform",          items: [
             {
-              label: "Dashboard",
-              href: "#dashboard",
-            },
+              label: "Dashboard",              href: "#dashboard"},
             {
-              label: "Modules",
-              href: "#modules",
-            },
+              label: "Modules",              href: "#modules"},
           ],
         },
         {
-          title: "Social",
-          items: [
+          title: "Support",          items: [
             {
-              label: "Leaderboard",
-              href: "#leaderboard",
-            },
+              label: "Help Center",              href: "#"},
             {
-              label: "Badges",
-              href: "#rewards",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Help Center",
-              href: "#",
-            },
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
+              label: "Privacy Policy",              href: "#"},
           ],
         },
       ]}
@@ -274,4 +177,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/quiz/page.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function QuizPage() {
+  const [currentQuestion, setCurrentQuestion] = useState(0);
+  const [score, setScore] = useState(0);
+  const [finished, setFinished] = useState(false);
+
+  const questions = [
+    {
+      question: "What does AI stand for?",      options: ["Artificial Intelligence", "Automated Internet", "Advanced Imaging", "Applied Informatics"],
+      correct: 0,
+    },
+    {
+      question: "Which of these is a machine learning technique?",      options: ["Supervised Learning", "Manual Coding", "Hard-coding Rules", "Data Deletion"],
+      correct: 0,
+    },
+  ];
+
+  const handleAnswer = (index: number) => {
+    if (index === questions[currentQuestion].correct) {
+      setScore(score + 100);
+    }
+    if (currentQuestion + 1 < questions.length) {
+      setCurrentQuestion(currentQuestion + 1);
+    } else {
+      setFinished(true);
+    }
+  };
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="compact"
+        sizing="mediumLargeSizeLargeTitles"
+        background="none"
+        cardStyle="inset"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+    >
+      <NavbarStyleFullscreen
+          navItems={[{ name: "Home", id: "/" }, { name: "Quiz", id: "/quiz" }]}
+          brandName="AI Learner"
+      />
+      <main className="min-h-screen flex items-center justify-center p-8">
+        {!finished ? (
+          <div className="bg-card p-8 rounded-lg shadow-xl w-full max-w-lg">
+            <h2 className="text-2xl font-bold mb-6">{questions[currentQuestion].question}</h2>
+            <div className="grid gap-4">
+              {questions[currentQuestion].options.map((option, idx) => (
+                <button 
+                    key={idx}
+                    onClick={() => handleAnswer(idx)}
+                    className="p-4 bg-background-accent hover:bg-accent transition-colors rounded-lg text-left"
+                >
+                    {option}
+                </button>
+              ))}
+            </div>
+            <p className="mt-6 text-sm opacity-70">Score: {score}</p>
+          </div>
+        ) : (
+          <div className="text-center">
+            <h1 className="text-4xl font-bold mb-4">Quiz Complete!</h1>
+            <p className="text-xl">Final Score: {score}</p>
+            <button onClick={() => window.location.href = "/"} className="mt-8 px-6 py-3 bg-primary-cta rounded-lg">
+                Back Home
+            </button>
+          </div>
+        )}
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/rewards/page.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Trophy, Star, Zap, ShieldCheck, Target } from "lucide-react";
+
+export default function RewardsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumLargeSizeLargeTitles"
+      background="none"
+      cardStyle="inset"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Dashboard", id: "/" },
+              { name: "Modules", id: "/#modules" },
+              { name: "Rewards", id: "/rewards" },
+            ]}
+            brandName="AI Learner"
+          />
+        </div>
+
+        <div id="badges" data-section="badges">
+          <MetricCardSeven
+            title="Achievement Badges"
+            description="Collect badges as you master new skills and reach learning milestones."
+            animationType="blur-reveal"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "1", value: "7", title: "Expert Developer", items: ["Mastered Python", "Built 5 AI Models"] },
+              { id: "2", value: "12", title: "Quiz Master", items: ["100% Accuracy", "Streak of 20"] },
+              { id: "3", value: "5", title: "Early Bird", items: ["Learned at 6 AM", "Completed 10 Tasks"] },
+            ]}
+          />
+        </div>
+
+        <div id="rewards" data-section="rewards">
+          <FeatureCardTwelve
+            title="Reward System"
+            description="Redeem your points for exclusive content and platform perks."
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { id: "r1", label: "Gold Tier", title: "Premium Content", items: ["Access advanced AI modules", "1-on-1 tutor session"] },
+              { id: "r2", label: "Silver Tier", title: "Visual Assets", items: ["Custom dashboard themes", "Exclusive badge icons"] },
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "Platform", items: [{ label: "Dashboard", href: "/" }] },
+              { title: "Rewards", items: [{ label: "Badges", href: "/rewards" }] },
+            ]}
+            bottomLeftText="© 2024 AI Learner Platform"
+            bottomRightText="All Rights Reserved"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}