From e34fd6f089dcb28aa0b9b111cb2cc3994e0fa29d Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 9 Mar 2026 06:09:02 +0000
Subject: [PATCH] Add src/app/cyberattacks/page.tsx

---
 src/app/cyberattacks/page.tsx | 349 ++++++++++++++++++++++++++++++++++
 1 file changed, 349 insertions(+)
 create mode 100644 src/app/cyberattacks/page.tsx

diff --git a/src/app/cyberattacks/page.tsx b/src/app/cyberattacks/page.tsx
new file mode 100644
index 0000000..39bcb37
--- /dev/null
+++ b/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",              title: "Phishing Red Flags",              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",              title: "Malware Protection",              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",              title: "DDoS Impact",              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",              title: "SE Defense",              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>
+  );
+}