Merge version_2 into main

Merge version_2 into main

src/app/cyberattacks/page.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import { AlertTriangle, BookOpen, Eye, Key, Lock, Mail, Shield, Target, AlertCircle, Users, CheckCircle } from "lucide-react";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import FeatureBento from "@/components/sections/feature/FeatureBento";
+import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
+import FaqSplitText from "@/components/sections/faq/FaqSplitText";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function CyberattacksPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="largeSmall"
+      background="noise"
+      cardStyle="outline"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="CyberSafe"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "#about" },
+            { name: "Resources", id: "#" },
+            { name: "Learn", id: "#" },
+            { name: "Cyberattacks", id: "/cyberattacks" },
+            { name: "Contact", id: "#contact" },
+          ]}
+          bottomLeftText="Student Safety First"
+          bottomRightText="cybersafe@education.org"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="Cyberattack Types Explained"
+          description="Understanding different attack vectors is essential for staying safe online. Learn how each attack works, what risks they pose, and how to defend yourself against them."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Comprehensive Guide"
+          tagIcon={BookOpen}
+          buttons={[
+            { text: "Back Home", href: "/" },
+            { text: "Explore Attacks", href: "#phishing" },
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhDKxFCpV5bg4ztrn7jE8G2nbj/a-modern-digital-shield-icon-with-glowin-1773035939981-ea68fe6d.png"
+          imageAlt="Cyberattack Defense"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="phishing" data-section="phishing">
+        <FeatureBento
+          title="Phishing Attacks"
+          description="The most common attack vector used against students. Phishing attempts to trick you into revealing sensitive information through deceptive emails and messages."
+          tag="Email-Based Attacks"
+          tagIcon={Mail}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={true}
+          features={[
+            {
+              title: "Email Phishing",              description: "Fraudulent emails impersonating legitimate organizations to steal credentials",              bentoComponent: "icon-info-cards",              items: [
+                { icon: Mail, label: "Fake Sender", value: "Spoofed Address" },
+                { icon: AlertTriangle, label: "Urgency Tactic", value: "Fear-Based" },
+                { icon: Key, label: "Credential Request", value: "Password Theft" },
+              ],
+            },
+            {
+              title: "Spear Phishing",              description: "Targeted phishing using personal information to appear more convincing",              bentoComponent: "3d-stack-cards",              items: [
+                {
+                  icon: Target,
+                  title: "Personalized",                  subtitle: "Uses your name and details",                  detail: "Higher success rate than generic phishing"},
+                {
+                  icon: Eye,
+                  title: "Research-Based",                  subtitle: "Information from public sources",                  detail: "LinkedIn, social media, and company websites"},
+                {
+                  icon: AlertCircle,
+                  title: "Contextual",                  subtitle: "References real situations",                  detail: "Makes the attack more believable"},
+              ],
+            },
+            {
+              title: "Phishing Red Flags",              description: "Signs to watch for to identify phishing attempts",              bentoComponent: "3d-task-list",              items: [
+                { icon: AlertTriangle, label: "Check Sender Address", time: "1 min" },
+                { icon: Eye, label: "Hover Over Links", time: "1 min" },
+                { icon: Lock, label: "Verify via Official Contact", time: "2 min" },
+              ],
+            },
+            {
+              title: "Phishing Defense",              description: "Best practices to protect yourself from phishing attacks",              bentoComponent: "marquee",              centerIcon: Shield,
+              variant: "text",              texts: [
+                "Never click unsolicited links",                "Verify sender identity first",                "Use two-factor authentication",                "Keep software updated",                "Report suspicious emails"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="malware" data-section="malware">
+        <FeatureBento
+          title="Malware & Viruses"
+          description="Malicious software designed to damage your device, steal data, or give attackers control of your system."
+          tag="Software-Based Threats"
+          tagIcon={AlertTriangle}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          features={[
+            {
+              title: "Ransomware",              description: "Encrypts your files and demands payment for their recovery",              bentoComponent: "icon-info-cards",              items: [
+                { icon: Lock, label: "File Encryption", value: "Inaccessible" },
+                { icon: AlertCircle, label: "Ransom Demand", value: "Often Fails" },
+                { icon: Eye, label: "No Guarantee", value: "May Not Decrypt" },
+              ],
+            },
+            {
+              title: "Trojans & Worms",              description: "Self-replicating or disguised malware that opens backdoors to your system",              bentoComponent: "3d-stack-cards",              items: [
+                {
+                  icon: AlertTriangle,
+                  title: "Trojans",                  subtitle: "Disguised as legitimate software",                  detail: "Opens unauthorized access to your device"},
+                {
+                  icon: Users,
+                  title: "Worms",                  subtitle: "Self-replicating",                  detail: "Spreads to other computers automatically"},
+                {
+                  icon: Eye,
+                  title: "Spyware",                  subtitle: "Monitors your activity",                  detail: "Steals passwords, browsing data, and personal info"},
+              ],
+            },
+            {
+              title: "Malware Protection",              description: "Steps to prevent and remove malware infections",              bentoComponent: "3d-task-list",              items: [
+                { icon: Lock, label: "Install Antivirus Software", time: "15 min" },
+                { icon: Shield, label: "Keep System Updated", time: "10 min" },
+                { icon: Eye, label: "Scan Downloads Before Opening", time: "5 min" },
+              ],
+            },
+            {
+              title: "Safe Download Practices",              description: "How to avoid downloading malware",              bentoComponent: "marquee",              centerIcon: Shield,
+              variant: "text",              texts: [
+                "Download from official sources only",                "Check file integrity and signatures",                "Use antivirus scanning for downloads",                "Be cautious with email attachments",                "Verify software authenticity"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="ddos" data-section="ddos">
+        <FeatureBento
+          title="DDoS Attacks"
+          description="Distributed Denial of Service attacks that overwhelm services with traffic, causing outages and disruptions."
+          tag="Network-Based Attacks"
+          tagIcon={AlertCircle}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={true}
+          features={[
+            {
+              title: "How DDoS Works",              description: "Understanding the mechanics of distributed denial of service attacks",              bentoComponent: "icon-info-cards",              items: [
+                { icon: Users, label: "Botnet", value: "Compromised Devices" },
+                { icon: AlertTriangle, label: "Flood Attack", value: "Massive Traffic" },
+                { icon: AlertCircle, label: "Service Down", value: "Unavailable" },
+              ],
+            },
+            {
+              title: "Types of DDoS",              description: "Different DDoS attack methods targeting different network layers",              bentoComponent: "3d-stack-cards",              items: [
+                {
+                  icon: AlertTriangle,
+                  title: "Volumetric",                  subtitle: "Bandwidth consumption",                  detail: "Floods with massive amounts of traffic"},
+                {
+                  icon: Target,
+                  title: "Protocol",                  subtitle: "Exploits network protocols",                  detail: "Sends malformed or oversized packets"},
+                {
+                  icon: AlertCircle,
+                  title: "Application",                  subtitle: "Targets web applications",                  detail: "Sends seemingly legitimate requests"},
+              ],
+            },
+            {
+              title: "DDoS Impact",              description: "How DDoS attacks affect services and users",              bentoComponent: "3d-task-list",              items: [
+                { icon: AlertCircle, label: "Service Unavailability", time: "Varies" },
+                { icon: Eye, label: "Financial Loss", time: "Significant" },
+                { icon: Shield, label: "Data Exposure Risk", time: "Indirect" },
+              ],
+            },
+            {
+              title: "DDoS Mitigation",              description: "Strategies to defend against or mitigate DDoS attacks",              bentoComponent: "marquee",              centerIcon: Shield,
+              variant: "text",              texts: [
+                "Use DDoS protection services",                "Implement rate limiting",                "Deploy redundant infrastructure",                "Monitor traffic patterns",                "Have incident response plans"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="social-engineering" data-section="social-engineering">
+        <FeatureBento
+          title="Social Engineering"
+          description="Psychological manipulation tactics used to trick people into revealing confidential information or granting unauthorized access."
+          tag="Human-Focused Attacks"
+          tagIcon={Users}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          features={[
+            {
+              title: "Common SE Tactics",              description: "Manipulation techniques attackers use to exploit human psychology",              bentoComponent: "icon-info-cards",              items: [
+                { icon: Target, label: "Pretexting", value: "False Scenarios" },
+                { icon: AlertTriangle, label: "Baiting", value: "Enticing Offers" },
+                { icon: Eye, label: "Impersonation", value: "False Identity" },
+              ],
+            },
+            {
+              title: "Attack Methods",              description: "Different approaches to social engineering attacks",              bentoComponent: "3d-stack-cards",              items: [
+                {
+                  icon: Mail,
+                  title: "Email SE",                  subtitle: "Fake emails requesting info",                  detail: "Pretending to be IT support or authority"},
+                {
+                  icon: Users,
+                  title: "Phone SE",                  subtitle: "Voice calls for manipulation",                  detail: "Creating urgency and trust"},
+                {
+                  icon: AlertCircle,
+                  title: "Physical SE",                  subtitle: "In-person social engineering",                  detail: "Tailgating or pretexting access"},
+              ],
+            },
+            {
+              title: "SE Defense",              description: "How to protect yourself from social engineering",              bentoComponent: "3d-task-list",              items: [
+                { icon: Shield, label: "Verify Identity Always", time: "2 min" },
+                { icon: Eye, label: "Question Requests", time: "1 min" },
+                { icon: Lock, label: "Never Share Passwords", time: "Always" },
+              ],
+            },
+            {
+              title: "Red Flags",              description: "Warning signs of social engineering attempts",              bentoComponent: "marquee",              centerIcon: AlertTriangle,
+              variant: "text",              texts: [
+                "Unexpected requests for sensitive info",                "Pressure and urgency tactics",                "Authority figure impersonation",                "Too good to be true offers",                "Requests to bypass normal procedures"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardTen
+          title="Attack Statistics & Impact"
+          description="Real data about cyberattack prevalence and their consequences on students and organizations"
+          tag="By The Numbers"
+          tagIcon={AlertCircle}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={true}
+          metrics={[
+            {
+              id: "1",              title: "Phishing",              subtitle: "Most common attack vector against students",              category: "Attack Prevalence",              value: "90%+",              buttons: [{ text: "Learn More", href: "#phishing" }],
+            },
+            {
+              id: "2",              title: "Credential Theft",              subtitle: "Primary goal of phishing and social engineering",              category: "Attack Success",              value: "Daily Threat",              buttons: [{ text: "Defense Tips", href: "#phishing" }],
+            },
+            {
+              id: "3",              title: "Malware Variants",              subtitle: "New malware strains discovered continuously",              category: "Ongoing Threat",              value: "Evolving",              buttons: [{ text: "Protection Guide", href: "#malware" }],
+            },
+            {
+              id: "4",              title: "Data Breaches",              subtitle: "Student data frequently exposed in breaches",              category: "Privacy Risk",              value: "Regular Occurrence",              buttons: [{ text: "Stay Protected", href: "/" }],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqSplitText
+          sideTitle="Cyberattack FAQ"
+          sideDescription="Answers to common questions about different attack types and protection strategies"
+          textPosition="left"
+          useInvertedBackground={false}
+          faqsAnimation="slide-up"
+          faqs={[
+            {
+              id: "1",              title: "What's the difference between phishing and spear phishing?",              content: "Phishing is a generic attack sent to many people, while spear phishing is targeted and uses personal information about the victim. Spear phishing is more convincing because it references specific details about you, your organization, or your contacts, making it much more likely to succeed."},
+            {
+              id: "2",              title: "Can I get malware just from visiting a website?",              content: "Yes, through a technique called drive-by download. Malicious websites can exploit browser vulnerabilities to automatically download malware without your action. This is why keeping your browser and operating system updated is crucial—updates patch security vulnerabilities that malware exploits."},
+            {
+              id: "3",              title: "What should I do if I become a victim of social engineering?",              content: "If you've provided sensitive information: change passwords immediately, enable two-factor authentication, monitor accounts for unauthorized activity, and alert the relevant organizations. If it involved your institution, report it to IT and security teams so they can implement protective measures and warn others."},
+            {
+              id: "4",              title: "How do attackers create botnets for DDoS attacks?",              content: "Attackers infect computers with malware that remotely controls them without the owner's knowledge. These compromised computers (bots) are organized into networks called botnets. The attacker can then command all bots to simultaneously send traffic to a target, creating a DDoS attack that's difficult to trace back to the source."},
+            {
+              id: "5",              title: "Is there a way to completely eliminate cyberattack risk?",              content: "No, but you can significantly reduce it through defense-in-depth strategies: use strong, unique passwords with two-factor authentication, keep software updated, use antivirus protection, be skeptical of unsolicited requests, and maintain security awareness. The goal is to make yourself a harder target than easier victims."},
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Questions?"
+          tagIcon={Mail}
+          title="Need Help Understanding Cyberattacks?"
+          description="Have questions about specific attack types or how to protect yourself? Reach out to our cyber safety experts or join our community forums for peer support."
+          buttons={[
+            { text: "Contact Support", href: "#" },
+            { text: "Join Community", href: "#" },
+          ]}
+          background={{ variant: "gradient-bars" }}
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="CyberSafe"
+          columns={[
+            {
+              title: "Attack Types",              items: [
+                { label: "Phishing", href: "#phishing" },
+                { label: "Malware", href: "#malware" },
+                { label: "DDoS", href: "#ddos" },
+                { label: "Social Engineering", href: "#social-engineering" },
+              ],
+            },
+            {
+              title: "Learning",              items: [
+                { label: "Back to Home", href: "/" },
+                { label: "Defense Strategies", href: "#" },
+                { label: "Best Practices", href: "#" },
+                { label: "FAQ", href: "#faq" },
+              ],
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Blog", href: "#" },
+                { label: "Webinars", href: "#" },
+                { label: "Tools & Guides", href: "#" },
+                { label: "Community", href: "#" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact Us", href: "#contact" },
+                { label: "Report Issues", href: "#" },
+                { label: "Help Center", href: "#" },
+                { label: "Feedback", href: "#" },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 CyberSafe. Understanding and defending against cyberattacks."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,58 +1,47 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
-import { Public_Sans } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
+const geist = Geist({
+  variable: "--font-geist-sans",  subsets: ["latin"],
 });
 
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const publicSans = Public_Sans({
-  variable: "--font-public-sans",  subsets: ["latin"],
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "CyberSafe - Student Cyber Safety & Awareness System",  description: "Learn essential cyber security skills to protect yourself online. Access resources, tools, and expert guidance for student digital safety and awareness.",  keywords: "cyber safety, student security, digital literacy, online protection, cybersecurity education, phishing detection, password security",  metadataBase: new URL("https://cybersafe.education"),
-  alternates: {
-    canonical: "https://cybersafe.education"},
-  openGraph: {
-    title: "CyberSafe - Protect Your Digital Life",    description: "Empower yourself with essential cyber safety knowledge. Learn how to stay safe online and protect your personal information.",    type: "website",    siteName: "CyberSafe",    images: [
-      {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhDKxFCpV5bg4ztrn7jE8G2nbj/a-modern-digital-shield-icon-with-glowin-1773035939981-ea68fe6d.png",        alt: "CyberSafe - Digital Shield Protection"},
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",    title: "CyberSafe - Student Cyber Safety",    description: "Learn to protect yourself from cyber threats with our comprehensive safety education platform.",    images: [
-      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhDKxFCpV5bg4ztrn7jE8G2nbj/a-modern-digital-shield-icon-with-glowin-1773035939981-ea68fe6d.png"],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+  title: "CyberSafe - Student Cyber Awareness",  description: "Empower yourself with essential cyber safety knowledge. Learn how to navigate the digital world securely and protect your personal information."};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${publicSans.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+      <body
+        className={`${geist.variable} ${geistMono.variable} antialiased`}
+        suppressHydrationWarning
+      >
+        {children}
+        <script
+          id="__LENIS_SCRIPT__"
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                const e = new Event('lenis-scroll');
+                const t = new Event('lenis-scroll-velocity');
+                window.scrollVelocity = 0;
+                window.addEventListener('wheel', (r) => {
+                  window.scrollVelocity = r.deltaY;
+                  window.dispatchEvent(t);
+                });
+              })();
+            `,
+          }}
+        />
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1420,7 +1409,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertCircle, AlertTriangle, BookOpen, CheckCircle, Eye, Key, Lock, Mail, Shield, Target, Users } from "lucide-react";
+import { AlertCircle, AlertTriangle, BookOpen, CheckCircle, Eye, Key, Lock, Mail, Shield, Target, Users, Zap } from "lucide-react";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
 import HeroBillboard from "@/components/sections/hero/HeroBillboard";
 import TextAbout from "@/components/sections/about/TextAbout";
@@ -34,6 +34,7 @@ export default function CyberSafePage() {
             { name: "About", id: "about" },
             { name: "Resources", id: "features" },
             { name: "Learn", id: "metrics" },
+            { name: "Quiz", id: "quiz" },
             { name: "Contact", id: "contact" },
           ]}
           bottomLeftText="Student Safety First"
@@ -50,7 +51,7 @@ export default function CyberSafePage() {
           tagIcon={Shield}
           buttons={[
             { text: "Start Learning", href: "#features" },
-            { text: "Explore Resources", href: "#metrics" },
+            { text: "Take Quiz", href: "#quiz" },
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhDKxFCpV5bg4ztrn7jE8G2nbj/a-modern-digital-shield-icon-with-glowin-1773035939981-ea68fe6d.png"
           imageAlt="Digital Shield Protection"
@@ -66,7 +67,7 @@ export default function CyberSafePage() {
           useInvertedBackground={false}
           buttons={[
             { text: "Learn Our Approach", href: "#features" },
-            { text: "Join Community", href: "#contact" },
+            { text: "Test Your Knowledge", href: "#quiz" },
           ]}
         />
       </div>
@@ -128,16 +129,62 @@ export default function CyberSafePage() {
           useInvertedBackground={false}
           metrics={[
             {
-              id: "1",              title: "Identity Theft",              subtitle: "Criminals stealing personal information for fraud",              category: "High Risk",              value: "Growing Threat",              buttons: [{ text: "Learn Protection", href: "#" }],
+              id: "1",              title: "Identity Theft",              subtitle: "Criminals stealing personal information for fraud",              category: "High Risk",              value: "Growing Threat",              buttons: [{ text: "Learn Protection", href: "#quiz" }],
             },
             {
               id: "2",              title: "Cyberbullying",              subtitle: "Harassment and abuse through digital channels",              category: "Mental Health",              value: "Widespread",              buttons: [{ text: "Get Help", href: "#" }],
             },
             {
-              id: "3",              title: "Malware & Viruses",              subtitle: "Malicious software compromising device security",              category: "Technical",              value: "Always Present",              buttons: [{ text: "Prevention Guide", href: "#" }],
+              id: "3",              title: "Malware & Viruses",              subtitle: "Malicious software compromising device security",              category: "Technical",              value: "Always Present",              buttons: [{ text: "Prevention Guide", href: "#quiz" }],
             },
             {
-              id: "4",              title: "Social Engineering",              subtitle: "Manipulation tactics to gain unauthorized access",              category: "High Risk",              value: "Constantly Evolving",              buttons: [{ text: "Recognize Tactics", href: "#" }],
+              id: "4",              title: "Social Engineering",              subtitle: "Manipulation tactics to gain unauthorized access",              category: "High Risk",              value: "Constantly Evolving",              buttons: [{ text: "Recognize Tactics", href: "#quiz" }],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="quiz" data-section="quiz">
+        <FeatureBento
+          title="Test Your Cyber Safety Knowledge"
+          description="Interactive quizzes to assess your understanding and track your progress. Challenge yourself with real-world cyber security scenarios."
+          tag="Awareness Assessment"
+          tagIcon={Zap}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={true}
+          features={[
+            {
+              title: "Password Security Quiz",              description: "Test your knowledge on creating and managing secure passwords",              button: { text: "Start Quiz", href: "/quiz/password-security" },
+              bentoComponent: "icon-info-cards",              items: [
+                { icon: Lock, label: "Questions", value: "10" },
+                { icon: Target, label: "Time Limit", value: "5 min" },
+                { icon: CheckCircle, label: "Difficulty", value: "Beginner" },
+              ],
+            },
+            {
+              title: "Phishing Detection Quiz",              description: "Learn to identify phishing emails and malicious links",              button: { text: "Start Quiz", href: "/quiz/phishing-detection" },
+              bentoComponent: "icon-info-cards",              items: [
+                { icon: AlertTriangle, label: "Questions", value: "12" },
+                { icon: Target, label: "Time Limit", value: "7 min" },
+                { icon: CheckCircle, label: "Difficulty", value: "Intermediate" },
+              ],
+            },
+            {
+              title: "Social Media Safety Quiz",              description: "Evaluate your social media safety practices and privacy awareness",              button: { text: "Start Quiz", href: "/quiz/social-media-safety" },
+              bentoComponent: "icon-info-cards",              items: [
+                { icon: Users, label: "Questions", value: "8" },
+                { icon: Target, label: "Time Limit", value: "5 min" },
+                { icon: CheckCircle, label: "Difficulty", value: "Beginner" },
+              ],
+            },
+            {
+              title: "Comprehensive Security Quiz",              description: "Complete assessment covering all cyber safety topics",              button: { text: "Start Quiz", href: "/quiz/comprehensive" },
+              bentoComponent: "icon-info-cards",              items: [
+                { icon: Shield, label: "Questions", value: "30" },
+                { icon: Target, label: "Time Limit", value: "20 min" },
+                { icon: CheckCircle, label: "Difficulty", value: "Advanced" },
+              ],
             },
           ]}
         />

src/app/quiz/page.tsx

@@ -0,0 +1,381 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { ArrowRight, CheckCircle, XCircle, RotateCcw } from "lucide-react";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+
+interface QuizQuestion {
+  id: string;
+  question: string;
+  options: string[];
+  correctAnswer: number;
+  explanation: string;
+}
+
+const quizzes: Record<string, { title: string; questions: QuizQuestion[] }> = {
+  "password-security": {
+    title: "Password Security Quiz",    questions: [
+      {
+        id: "1",        question: "What is the minimum recommended password length?",        options: ["8 characters", "10 characters", "12 characters", "6 characters"],
+        correctAnswer: 2,
+        explanation: "Security experts recommend at least 12 characters for strong passwords to resist brute force attacks."},
+      {
+        id: "2",        question: "Which of these is the strongest password?",        options: [
+          "Password123",          "MyDog2024!",          "X9#kL@mP2$wQ",          "1234567890"],
+        correctAnswer: 2,
+        explanation: "Random combinations of letters, numbers, and special characters are strongest. Predictable patterns and personal information make passwords vulnerable."},
+      {
+        id: "3",        question: "What does Two-Factor Authentication (2FA) add to your account security?",        options: [
+          "A longer password",          "A second layer of verification",          "Password encryption",          "Automatic password changes"],
+        correctAnswer: 1,
+        explanation: "2FA requires a second verification method (like a code from your phone) after entering your password, significantly increasing security."},
+      {
+        id: "4",        question: "Should you use the same password for multiple accounts?",        options: [
+          "Yes, it's easier to remember",          "No, use unique passwords for each account",          "Only for unimportant accounts",          "Yes, with slight variations"],
+        correctAnswer: 1,
+        explanation: "Using unique passwords for each account means if one is compromised, others remain secure. Use a password manager to help manage them."},
+      {
+        id: "5",        question: "How often should you change your passwords?",        options: [
+          "Every day",          "Every month",          "Every year",          "When compromised or every 90 days"],
+        correctAnswer: 3,
+        explanation: "Change passwords immediately if compromised. For regular maintenance, change every 90 days. More frequent changes can lead to weaker passwords."},
+    ],
+  },
+  "phishing-detection": {
+    title: "Phishing Detection Quiz",    questions: [
+      {
+        id: "1",        question: "What is a red flag for phishing emails?",        options: [
+          "Professional formatting",          "Request for personal information",          "Official company logo",          "Clear sender address"],
+        correctAnswer: 1,
+        explanation: "Phishing emails often ask for passwords, social security numbers, or bank details. Legitimate companies never ask for sensitive info via email."},
+      {
+        id: "2",        question: "How should you verify suspicious email links?",        options: [
+          "Click and see if it's legitimate",          "Hover over the link to see the actual URL",          "Ask friends if they received it",          "Contact the company through the email"],
+        correctAnswer: 1,
+        explanation: "Always hover over links to see their true destination before clicking. This reveals if the link actually goes where it claims to go."},
+      {
+        id: "3",        question: "What common technique do phishers use?",        options: [
+          "Formal business language",          "Creating urgency or fear",          "Providing too much information",          "Using official company names"],
+        correctAnswer: 1,
+        explanation: "Phishing emails create artificial urgency (account locked, limited time) to make you act without thinking carefully."},
+      {
+        id: "4",        question: "How can poor grammar indicate a phishing email?",        options: [
+          "It doesn't matter",          "Legitimate companies always have typos",          "Professional emails are carefully proofread",          "Grammar is unrelated to security"],
+        correctAnswer: 2,
+        explanation: "Legitimate companies proofread communications carefully. Numerous errors, awkward phrasing, or grammatical mistakes are phishing warning signs."},
+      {
+        id: "5",        question: "What should you do if you suspect a phishing email?",        options: [
+          "Reply asking them to stop",          "Report it and don't click links",          "Forward it to friends",          "Click to check if it's real"],
+        correctAnswer: 1,
+        explanation: "Report phishing emails to your email provider and the company being impersonated. Never click links or provide information."},
+    ],
+  },
+  "social-media-safety": {
+    title: "Social Media Safety Quiz",    questions: [
+      {
+        id: "1",        question: "What personal information should you never post on social media?",        options: [
+          "Your hobbies",          "Your exact location and home address",          "Your favorite movies",          "Your name"],
+        correctAnswer: 1,
+        explanation: "Never share your home address, phone number, or location. This information can be used for stalking, theft, or identity theft."},
+      {
+        id: "2",        question: "How often should you review your privacy settings?",        options: [
+          "Never",          "Once a year",          "Every few months",          "Social media platforms never change them"],
+        correctAnswer: 2,
+        explanation: "Social media platforms frequently update privacy settings. Review yours every few months to ensure your information is protected."},
+      {
+        id: "3",        question: "Is it safe to accept friend requests from strangers?",        options: [
+          "Yes, more friends is better",          "No, they could be scammers or stalkers",          "Only if they have a profile picture",          "Yes, if they have mutual friends"],
+        correctAnswer: 1,
+        explanation: "Strangers could be scammers, stalkers, or hackers. Always verify who you're connecting with before accepting requests."},
+      {
+        id: "4",        question: "Before posting something, what should you think about?",        options: [
+          "How many likes it will get",          "If your future employer might see it",          "If your parents will be proud",          "How quickly you can post it"],
+        correctAnswer: 1,
+        explanation: "Employers, colleges, and others research social media profiles. Once posted, content is permanent and can affect your future."},
+      {
+        id: "5",        question: "What is cyberbullying?",        options: [
+          "Making friends online",          "Harassment, threats, or humiliation online",          "Following your friends",          "Commenting on posts"],
+        correctAnswer: 1,
+        explanation: "Cyberbullying includes harassment, threats, and humiliation online. If you experience it, report it and reach out to trusted adults."},
+    ],
+  },
+};
+
+export default function QuizPage() {
+  const [currentQuestion, setCurrentQuestion] = useState(0);
+  const [score, setScore] = useState(0);
+  const [selectedAnswer, setSelectedAnswer] = useState<number | null>(null);
+  const [showResult, setShowResult] = useState(false);
+  const [quizComplete, setQuizComplete] = useState(false);
+  const [questions, setQuestions] = useState<QuizQuestion[]>([]);
+  const [quizTitle, setQuizTitle] = useState("");
+
+  useEffect(() => {
+    // Select a random quiz for demo
+    const quizKeys = Object.keys(quizzes);
+    const randomKey = quizKeys[Math.floor(Math.random() * quizKeys.length)];
+    const quiz = quizzes[randomKey];
+    setQuestions(quiz.questions);
+    setQuizTitle(quiz.title);
+  }, []);
+
+  if (questions.length === 0) return null;
+
+  const handleAnswerSelect = (answerIndex: number) => {
+    if (!showResult) {
+      setSelectedAnswer(answerIndex);
+      setShowResult(true);
+
+      if (answerIndex === questions[currentQuestion].correctAnswer) {
+        setScore(score + 1);
+      }
+    }
+  };
+
+  const handleNextQuestion = () => {
+    if (currentQuestion + 1 < questions.length) {
+      setCurrentQuestion(currentQuestion + 1);
+      setSelectedAnswer(null);
+      setShowResult(false);
+    } else {
+      setQuizComplete(true);
+    }
+  };
+
+  const handleRestartQuiz = () => {
+    setCurrentQuestion(0);
+    setScore(0);
+    setSelectedAnswer(null);
+    setShowResult(false);
+    setQuizComplete(false);
+  };
+
+  const percentage = Math.round((score / questions.length) * 100);
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="largeSmall"
+      background="noise"
+      cardStyle="outline"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="CyberSafe"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "#about" },
+            { name: "Resources", id: "#features" },
+            { name: "Learn", id: "#metrics" },
+            { name: "Quiz", id: "/quiz" },
+            { name: "Contact", id: "#contact" },
+          ]}
+          bottomLeftText="Student Safety First"
+          bottomRightText="cybersafe@education.org"
+        />
+      </div>
+
+      <div id="quiz" data-section="quiz" className="min-h-screen py-20 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-2xl mx-auto">
+          {!quizComplete ? (
+            <div className="space-y-8">
+              {/* Header */}
+              <div className="text-center space-y-2">
+                <h1 className="text-4xl font-bold">{quizTitle}</h1>
+                <p className="text-lg text-foreground/70">
+                  Question {currentQuestion + 1} of {questions.length}
+                </p>
+              </div>
+
+              {/* Progress Bar */}
+              <div className="w-full bg-background-accent rounded-pill h-2">
+                <div
+                  className="bg-primary-cta h-2 rounded-pill transition-all duration-300"
+                  style={{
+                    width: `${((currentQuestion + 1) / questions.length) * 100}%`,
+                  }}
+                />
+              </div>
+
+              {/* Question */}
+              <div className="bg-card rounded-pill p-8 border border-background-accent">
+                <h2 className="text-2xl font-semibold mb-6">
+                  {questions[currentQuestion].question}
+                </h2>
+
+                {/* Options */}
+                <div className="space-y-3">
+                  {questions[currentQuestion].options.map((option, index) => (
+                    <button
+                      key={index}
+                      onClick={() => handleAnswerSelect(index)}
+                      disabled={showResult}
+                      className={`w-full p-4 text-left rounded-pill border-2 transition-all ${
+                        selectedAnswer === index
+                          ? index === questions[currentQuestion].correctAnswer
+                            ? "border-green-500 bg-green-500/10"
+                            : "border-red-500 bg-red-500/10"
+                          : showResult &&
+                            index === questions[currentQuestion].correctAnswer
+                          ? "border-green-500 bg-green-500/10"
+                          : "border-background-accent hover:border-primary-cta"
+                      }`}
+                    >
+                      <div className="flex items-center justify-between">
+                        <span className="font-medium">{option}</span>
+                        {selectedAnswer === index && showResult && (
+                          index === questions[currentQuestion].correctAnswer ? (
+                            <CheckCircle className="w-5 h-5 text-green-500" />
+                          ) : (
+                            <XCircle className="w-5 h-5 text-red-500" />
+                          )
+                        )}
+                        {showResult &&
+                          index === questions[currentQuestion].correctAnswer &&
+                          selectedAnswer !== index && (
+                            <CheckCircle className="w-5 h-5 text-green-500" />
+                          )}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+
+                {/* Explanation */}
+                {showResult && (
+                  <div className="mt-6 p-4 bg-background-accent rounded-pill border border-primary-cta/30">
+                    <p className="text-sm font-semibold text-primary-cta mb-2">Explanation:</p>
+                    <p className="text-foreground/80">
+                      {questions[currentQuestion].explanation}
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              {/* Next Button */}
+              {showResult && (
+                <button
+                  onClick={handleNextQuestion}
+                  className="w-full py-3 px-6 bg-primary-cta text-background rounded-pill font-semibold flex items-center justify-center gap-2 hover:opacity-90 transition-opacity"
+                >
+                  {currentQuestion + 1 === questions.length ? "See Results" : "Next Question"}
+                  <ArrowRight className="w-5 h-5" />
+                </button>
+              )}
+            </div>
+          ) : (
+            /* Results Screen */
+            <div className="space-y-8 text-center">
+              <div>
+                <h1 className="text-4xl font-bold mb-4">Quiz Complete!</h1>
+                <div className="w-32 h-32 mx-auto mb-6 rounded-full bg-primary-cta/10 flex items-center justify-center">
+                  <div className="text-center">
+                    <p className="text-5xl font-bold text-primary-cta">{percentage}%</p>
+                    <p className="text-lg font-semibold text-foreground">
+                      {score}/{questions.length}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Result Message */}
+              <div className="bg-card rounded-pill p-8 border border-background-accent">
+                {percentage >= 80 ? (
+                  <div className="space-y-2">
+                    <p className="text-2xl font-bold text-green-600">Excellent!</p>
+                    <p className="text-foreground/80">
+                      You demonstrated strong cyber safety knowledge. Keep practicing to
+                      maintain your skills!
+                    </p>
+                  </div>
+                ) : percentage >= 60 ? (
+                  <div className="space-y-2">
+                    <p className="text-2xl font-bold text-yellow-600">Good Job!</p>
+                    <p className="text-foreground/80">
+                      You're on the right track! Review the explanations and try again to
+                      improve your score.
+                    </p>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    <p className="text-2xl font-bold text-red-600">Keep Learning!</p>
+                    <p className="text-foreground/80">
+                      Take time to review the core modules and try the quiz again to
+                      strengthen your cyber safety knowledge.
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex gap-4 justify-center">
+                <button
+                  onClick={handleRestartQuiz}
+                  className="py-3 px-8 bg-secondary-cta text-foreground rounded-pill font-semibold flex items-center gap-2 hover:opacity-90 transition-opacity"
+                >
+                  <RotateCcw className="w-5 h-5" />
+                  Try Again
+                </button>
+                <a
+                  href="/#quiz"
+                  className="py-3 px-8 bg-primary-cta text-background rounded-pill font-semibold flex items-center gap-2 hover:opacity-90 transition-opacity"
+                >
+                  <ArrowRight className="w-5 h-5" />
+                  More Quizzes
+                </a>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="CyberSafe"
+          columns={[
+            {
+              title: "Learning",              items: [
+                { label: "Core Modules", href: "/#features" },
+                { label: "Threat Awareness", href: "/#metrics" },
+                { label: "Best Practices", href: "/#features" },
+                { label: "FAQ", href: "/#faq" },
+              ],
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Blog", href: "#" },
+                { label: "Webinars", href: "#" },
+                { label: "Tools & Guides", href: "#" },
+                { label: "Community", href: "#" },
+              ],
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact Us", href: "/#contact" },
+                { label: "Report Issues", href: "#" },
+                { label: "Help Center", href: "#" },
+                { label: "Feedback", href: "#" },
+              ],
+            },
+            {
+              title: "Organization",              items: [
+                { label: "About Us", href: "/#about" },
+                { label: "Our Mission", href: "/#about" },
+                { label: "Partnerships", href: "#" },
+                { label: "Careers", href: "#" },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 CyberSafe. Empowering students with cyber safety knowledge."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
-  --card: #ffffff;
-  --foreground: #0c1325;
-  --primary-cta: #0b07ff;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000f06e6;
+  --primary-cta: #0a7039;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #0c1325;
-  --accent: #93b7ff;
-  --background-accent: #a8bae8;
+  --accent: #159c49;
+  --background-accent: #a8e8ba;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);