diff --git a/client/src/App.js b/client/src/App.js
index 74191df..e669f6c 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -18,6 +18,7 @@ import MindMapEditor from "./pages/MindMapEditor";
import Profile from "./pages/Profile.js";
import SubmitFeedback from "./pages/SubmitFeedback";
import Todo from "./pages/Todo";
+import HelpCenter from "./pages/HelpCenter";
const App = () => {
@@ -44,6 +45,7 @@ const App = () => {
} />
} />
} />
+ } />
diff --git a/client/src/components/Navbar.js b/client/src/components/Navbar.js
index e7e4c76..8024433 100644
--- a/client/src/components/Navbar.js
+++ b/client/src/components/Navbar.js
@@ -19,11 +19,12 @@ const primaryLinks = [
// Secondary links hidden inside "More" dropdown
const moreLinks = [
- { to: "/about", label: "About Us" },
- { to: "/analytics", label: "Analytics" },
- { to: "/tasks", label: "Tasks" },
- { to: "/mindmap", label: "Mind Map" },
- { to: "/faq", label: "FAQs" },
+ { to: "/about", label: "About Us" },
+ { to: "/analytics", label: "Analytics" },
+ { to: "/tasks", label: "Tasks" },
+ { to: "/mindmap", label: "Mind Map" },
+ { to: "/faq", label: "FAQs" },
+ { to: "/help", label: "Help Center" },
];
// All links for mobile menu
diff --git a/client/src/pages/HelpCenter.css b/client/src/pages/HelpCenter.css
new file mode 100644
index 0000000..eeda5a8
--- /dev/null
+++ b/client/src/pages/HelpCenter.css
@@ -0,0 +1,673 @@
+/* ═══════════════════════════════════════════════════════════
+ HelpCenter.css – StudyMatePlus Help Center Page
+ Inherits CSS variables from index.css (--bg, --text, etc.)
+ ═══════════════════════════════════════════════════════════ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
+.help-page {
+ font-family: 'Inter', sans-serif;
+ background: var(--bg);
+ color: var(--text);
+ min-height: 100vh;
+}
+
+/* ── Container ───────────────────────────────────────────── */
+.help-container {
+ max-width: 1100px;
+ margin: 0 auto;
+ padding: 0 1.5rem;
+}
+
+/* ══════════════════════════════════════════════════════════
+ HERO
+ ══════════════════════════════════════════════════════════ */
+.help-hero {
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%);
+ min-height: 52vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 4rem 1.5rem 3rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.help-hero::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(ellipse at 70% 40%, rgba(255,255,255,0.07) 0%, transparent 65%);
+ pointer-events: none;
+}
+
+.help-hero-container {
+ position: relative;
+ z-index: 1;
+ width: 100%;
+ max-width: 780px;
+}
+
+.help-hero-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+}
+
+.help-hero-badge {
+ display: inline-block;
+ background: rgba(255,255,255,0.18);
+ color: #fff;
+ font-size: 0.78rem;
+ font-weight: 700;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ padding: 0.35rem 1rem;
+ border-radius: 999px;
+ border: 1px solid rgba(255,255,255,0.3);
+ backdrop-filter: blur(6px);
+}
+
+.help-hero-title {
+ font-size: clamp(2rem, 5vw, 3rem);
+ font-weight: 800;
+ color: #fff !important;
+ margin: 0;
+ line-height: 1.2;
+}
+
+.help-brand {
+ background: linear-gradient(90deg, #fbbf24, #f472b6);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.help-hero-subtitle {
+ font-size: 1.1rem;
+ color: rgba(255,255,255,0.88);
+ max-width: 560px;
+ margin: 0;
+}
+
+/* Search Bar */
+.help-search-wrapper {
+ position: relative;
+ width: 100%;
+ max-width: 580px;
+ margin-top: 0.5rem;
+}
+
+.help-search-icon {
+ position: absolute;
+ left: 1.1rem;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #6b7280;
+ font-size: 1rem;
+ pointer-events: none;
+}
+
+.help-search-input {
+ width: 100%;
+ padding: 0.95rem 3rem 0.95rem 2.9rem;
+ border-radius: 12px;
+ border: 2px solid transparent;
+ font-size: 1rem;
+ font-family: 'Inter', sans-serif;
+ background: #fff;
+ color: #111;
+ box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+ outline: none;
+ transition: border-color 0.25s, box-shadow 0.25s;
+ box-sizing: border-box;
+}
+
+.help-search-input:focus {
+ border-color: #a78bfa;
+ box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 0 0 3px rgba(167,139,250,0.35);
+}
+
+.help-search-clear {
+ position: absolute;
+ right: 1rem;
+ top: 50%;
+ transform: translateY(-50%);
+ background: none;
+ border: none;
+ color: #9ca3af;
+ cursor: pointer;
+ font-size: 1rem;
+ line-height: 1;
+ padding: 0;
+ transition: color 0.2s;
+}
+
+.help-search-clear:hover { color: #4f46e5; }
+
+.help-search-meta {
+ font-size: 0.88rem;
+ color: rgba(255,255,255,0.8);
+ margin: 0;
+}
+
+/* ══════════════════════════════════════════════════════════
+ QUICK LINKS
+ ══════════════════════════════════════════════════════════ */
+.help-quicklinks-section {
+ padding: 3rem 0 1.5rem;
+}
+
+.help-quicklinks-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 1.2rem;
+}
+
+.help-quicklink-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.65rem;
+ padding: 1.6rem 1rem;
+ border-radius: 14px;
+ background: var(--card);
+ border: 1.5px solid var(--border);
+ text-decoration: none;
+ color: var(--text);
+ font-weight: 600;
+ font-size: 0.95rem;
+ transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+.help-quicklink-card:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 10px 28px rgba(0,0,0,0.12);
+ border-color: var(--accent, #4f46e5);
+ color: var(--text);
+}
+
+.help-quicklink-icon {
+ font-size: 1.7rem;
+ transition: transform 0.2s;
+}
+
+.help-quicklink-card:hover .help-quicklink-icon {
+ transform: scale(1.18);
+}
+
+.help-quicklink-label {
+ text-align: center;
+ line-height: 1.3;
+}
+
+/* ══════════════════════════════════════════════════════════
+ CATEGORY PILLS
+ ══════════════════════════════════════════════════════════ */
+.help-categories-section {
+ padding: 1rem 0 0.5rem;
+}
+
+.help-section-title {
+ font-size: 1.6rem;
+ font-weight: 700;
+ text-align: center;
+ margin-bottom: 1.5rem;
+ color: var(--heading);
+ position: relative;
+}
+
+.help-section-title::after {
+ content: "";
+ display: block;
+ width: 56px;
+ height: 4px;
+ background: linear-gradient(90deg, #4f46e5, #7c3aed);
+ border-radius: 999px;
+ margin: 0.5rem auto 0;
+}
+
+.help-pills {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.6rem;
+ justify-content: center;
+}
+
+.help-pill {
+ padding: 0.5rem 1.1rem;
+ border-radius: 999px;
+ border: 1.5px solid var(--border);
+ background: var(--card);
+ color: var(--text);
+ font-size: 0.88rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-family: 'Inter', sans-serif;
+}
+
+.help-pill:hover {
+ border-color: #4f46e5;
+ color: #4f46e5;
+ background: rgba(79,70,229,0.06);
+}
+
+.help-pill.active {
+ background: linear-gradient(135deg, #4f46e5, #7c3aed);
+ color: #fff;
+ border-color: transparent;
+ box-shadow: 0 4px 14px rgba(79,70,229,0.35);
+}
+
+/* ══════════════════════════════════════════════════════════
+ FAQ ACCORDION
+ ══════════════════════════════════════════════════════════ */
+.help-faq-section {
+ padding: 2.5rem 0 3rem;
+}
+
+.help-faq-group {
+ margin-bottom: 2.5rem;
+}
+
+.help-faq-group-title {
+ font-size: 1.15rem;
+ font-weight: 700;
+ color: var(--heading);
+ margin-bottom: 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding-bottom: 0.6rem;
+ border-bottom: 2px solid var(--border);
+}
+
+.help-faq-group-icon {
+ font-size: 1.3rem;
+}
+
+.help-faq-item {
+ border: 1.5px solid var(--border);
+ border-radius: 12px;
+ margin-bottom: 0.7rem;
+ background: var(--card);
+ overflow: hidden;
+ transition: border-color 0.25s, box-shadow 0.25s;
+}
+
+.help-faq-item:hover {
+ border-color: #4f46e5;
+ box-shadow: 0 4px 18px rgba(79,70,229,0.1);
+}
+
+.help-faq-item.open {
+ border-color: #7c3aed;
+ box-shadow: 0 4px 20px rgba(124,58,237,0.13);
+}
+
+.help-faq-question {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+ padding: 1.1rem 1.4rem;
+ background: none;
+ border: none;
+ font-size: 0.98rem;
+ font-weight: 600;
+ color: var(--text);
+ cursor: pointer;
+ text-align: left;
+ font-family: 'Inter', sans-serif;
+ transition: color 0.2s;
+}
+
+.help-faq-item.open .help-faq-question {
+ color: #4f46e5;
+}
+
+.help-faq-chevron {
+ flex-shrink: 0;
+ font-size: 0.85rem;
+ color: #6b7280;
+ transition: color 0.2s;
+}
+
+.help-faq-item.open .help-faq-chevron {
+ color: #7c3aed;
+}
+
+.help-faq-answer {
+ overflow: hidden;
+}
+
+.help-faq-answer p {
+ padding: 0 1.4rem 1.2rem;
+ font-size: 0.93rem;
+ color: var(--muted);
+ line-height: 1.7;
+ margin: 0;
+}
+
+/* Empty state */
+.help-empty {
+ text-align: center;
+ padding: 3rem 1rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ color: var(--muted);
+}
+
+.help-empty-icon {
+ font-size: 3rem;
+}
+
+.help-empty p {
+ font-size: 1rem;
+ max-width: 380px;
+}
+
+/* ══════════════════════════════════════════════════════════
+ CONTACT SECTION
+ ══════════════════════════════════════════════════════════ */
+.help-contact-section {
+ padding: 1rem 0 4rem;
+}
+
+.help-contact-card {
+ background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(124,58,237,0.06));
+ border: 1.5px solid var(--border);
+ border-radius: 20px;
+ padding: 3rem;
+ display: grid;
+ grid-template-columns: 1fr 1.5fr;
+ gap: 3rem;
+ align-items: start;
+}
+
+.help-contact-text h2 {
+ font-size: 1.6rem;
+ font-weight: 700;
+ color: var(--heading);
+ margin-bottom: 0.8rem;
+}
+
+.help-contact-text p {
+ color: var(--muted);
+ line-height: 1.7;
+ font-size: 0.95rem;
+}
+
+.help-contact-text a {
+ color: #4f46e5;
+ font-weight: 500;
+ text-decoration: none;
+}
+
+.help-contact-text a:hover {
+ text-decoration: underline;
+}
+
+/* Form */
+.help-contact-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.help-form-row {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+}
+
+.help-form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 0.4rem;
+}
+
+.help-form-group label {
+ font-size: 0.85rem;
+ font-weight: 600;
+ color: var(--muted);
+}
+
+.help-form-group input,
+.help-form-group select,
+.help-form-group textarea {
+ padding: 0.75rem 1rem;
+ border-radius: 10px;
+ border: 1.5px solid var(--border);
+ background: var(--bg);
+ color: var(--text);
+ font-size: 0.93rem;
+ font-family: 'Inter', sans-serif;
+ outline: none;
+ transition: border-color 0.22s, box-shadow 0.22s;
+ resize: vertical;
+}
+
+.help-form-group input:focus,
+.help-form-group select:focus,
+.help-form-group textarea:focus {
+ border-color: #4f46e5;
+ box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
+}
+
+.help-submit-btn {
+ padding: 0.9rem 1.5rem;
+ border-radius: 10px;
+ border: none;
+ background: linear-gradient(135deg, #4f46e5, #7c3aed);
+ color: #fff;
+ font-size: 0.98rem;
+ font-weight: 700;
+ font-family: 'Inter', sans-serif;
+ cursor: pointer;
+ transition: transform 0.2s, box-shadow 0.2s;
+ box-shadow: 0 4px 14px rgba(79,70,229,0.3);
+}
+
+.help-submit-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 24px rgba(79,70,229,0.4);
+}
+
+.help-submit-btn:active {
+ transform: translateY(0);
+}
+
+/* ══════════════════════════════════════════════════════════
+ FOOTER (reuses shared .footer from Faq/About etc.)
+ ══════════════════════════════════════════════════════════ */
+.help-page .footer {
+ background: #111827;
+ color: #e5e7eb;
+ padding: 3.5rem 1.5rem 1.5rem;
+ margin-top: 0;
+}
+
+.help-page .footer-content {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2.5rem;
+ max-width: 1100px;
+ margin: 0 auto;
+}
+
+.help-page .footer-section h3,
+.help-page .footer-section h4 {
+ color: #fff;
+ margin-bottom: 0.9rem;
+ font-size: 1rem;
+}
+
+.help-page .footer-section p {
+ font-size: 0.9rem;
+ color: #9ca3af;
+ line-height: 1.6;
+}
+
+.help-page .footer-section ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.help-page .footer-section ul li a {
+ font-size: 0.9rem;
+ color: #9ca3af;
+ text-decoration: none;
+ transition: color 0.2s;
+}
+
+.help-page .footer-section ul li a:hover {
+ color: #a78bfa;
+}
+
+.help-page .social-links {
+ display: flex;
+ gap: 0.75rem;
+ margin-top: 1rem;
+}
+
+.help-page .social-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.2rem;
+ height: 2.2rem;
+ border-radius: 8px;
+ font-size: 1rem;
+ background: rgba(255,255,255,0.07);
+ color: #d1d5db;
+ text-decoration: none;
+ transition: background 0.2s, color 0.2s, transform 0.2s;
+}
+
+.help-page .social-icon:hover {
+ background: rgba(167,139,250,0.2);
+ color: #a78bfa;
+ transform: translateY(-2px);
+}
+
+.help-page .footer-bottom {
+ max-width: 1100px;
+ margin: 2rem auto 0;
+ border-top: 1px solid rgba(255,255,255,0.08);
+ padding-top: 1.2rem;
+ text-align: center;
+ font-size: 0.85rem;
+ color: #6b7280;
+}
+
+/* ══════════════════════════════════════════════════════════
+ DARK MODE OVERRIDES
+ ══════════════════════════════════════════════════════════ */
+html[data-theme="dark"] .help-search-input {
+ background: #1e293b;
+ color: #f1f5ff;
+ border-color: #334155;
+}
+
+html[data-theme="dark"] .help-search-input::placeholder {
+ color: #64748b;
+}
+
+html[data-theme="dark"] .help-faq-question {
+ color: var(--text);
+}
+
+html[data-theme="dark"] .help-faq-item.open .help-faq-question {
+ color: #a78bfa;
+}
+
+html[data-theme="dark"] .help-contact-card {
+ background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(124,58,237,0.08));
+}
+
+html[data-theme="dark"] .help-submit-btn {
+ background: linear-gradient(135deg, #4f46e5, #7c3aed);
+}
+
+/* ══════════════════════════════════════════════════════════
+ RESPONSIVE
+ ══════════════════════════════════════════════════════════ */
+@media (max-width: 1024px) {
+ .help-contact-card {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ }
+}
+
+@media (max-width: 768px) {
+ .help-quicklinks-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .help-contact-card {
+ padding: 2rem 1.5rem;
+ }
+
+ .help-form-row {
+ grid-template-columns: 1fr;
+ }
+
+ .help-page .footer-content {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .help-hero {
+ padding: 3rem 1rem 2.5rem;
+ }
+
+ .help-hero-title {
+ font-size: 1.75rem;
+ }
+
+ .help-hero-subtitle {
+ font-size: 0.95rem;
+ }
+
+ .help-quicklinks-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.8rem;
+ }
+
+ .help-quicklink-card {
+ padding: 1.1rem 0.6rem;
+ font-size: 0.82rem;
+ }
+
+ .help-faq-question {
+ font-size: 0.9rem;
+ padding: 0.9rem 1rem;
+ }
+
+ .help-pills {
+ gap: 0.4rem;
+ }
+
+ .help-pill {
+ font-size: 0.8rem;
+ padding: 0.4rem 0.85rem;
+ }
+
+ .help-contact-card {
+ padding: 1.5rem 1rem;
+ }
+}
diff --git a/client/src/pages/HelpCenter.js b/client/src/pages/HelpCenter.js
new file mode 100644
index 0000000..de1b93e
--- /dev/null
+++ b/client/src/pages/HelpCenter.js
@@ -0,0 +1,479 @@
+import React, { useState, useEffect, useMemo } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Link } from "react-router-dom";
+import {
+ FaSearch, FaChevronDown, FaChevronUp, FaArrowUp,
+ FaBook, FaQuestionCircle, FaLifeRing, FaEnvelope,
+ FaGithub, FaLinkedin, FaDiscord,
+} from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+import "./HelpCenter.css";
+import "./ScrollToTop.css";
+
+/* ─── Animation Variants ─────────────────────────────────────── */
+const fadeInUp = {
+ hidden: { opacity: 0, y: 40 },
+ visible: { opacity: 1, y: 0, transition: { duration: 0.55, ease: "easeOut" } },
+};
+const staggerChildren = {
+ hidden: { opacity: 0 },
+ visible: { opacity: 1, transition: { staggerChildren: 0.12, delayChildren: 0.05 } },
+};
+const staggerFast = {
+ hidden: { opacity: 0 },
+ visible: { opacity: 1, transition: { staggerChildren: 0.08, delayChildren: 0.05 } },
+};
+const slideInLeft = { hidden: { opacity: 0, x: -50 }, visible: { opacity: 1, x: 0, transition: { duration: 0.55, ease: "easeOut" } } };
+const slideInRight = { hidden: { opacity: 0, x: 50 }, visible: { opacity: 1, x: 0, transition: { duration: 0.55, ease: "easeOut" } } };
+
+/* ─── Data ───────────────────────────────────────────────────── */
+const categories = [
+ {
+ id: "getting-started",
+ icon: "🚀",
+ label: "Getting Started",
+ faqs: [
+ { q: "What is StudyMatePlus?", a: "StudyMatePlus is an open-source academic resource hub for students — providing syllabus, PYQs, notes, mind maps, analytics, and community-driven tools, completely free." },
+ { q: "Do I need to create an account?", a: "No account is required to browse resources. Creating a profile lets you save notes, track tasks, and personalize your experience." },
+ { q: "Which browsers are supported?", a: "StudyMatePlus works on all modern browsers — Chrome, Firefox, Edge, and Safari. We recommend keeping your browser updated for the best experience." },
+ { q: "Is the platform free to use?", a: "Yes! Every feature on StudyMatePlus is completely free. We believe in equal access to quality academic resources for every student." },
+ ],
+ },
+ {
+ id: "resources",
+ icon: "📚",
+ label: "Resources & Content",
+ faqs: [
+ { q: "What resources are available?", a: "You get access to syllabus documents, Previous Year Questions (PYQs), student notes, study guides, and analytics on the most-accessed materials — all organized by branch and semester." },
+ { q: "Which engineering branches are supported?", a: "Currently CSE, ECE, ME, and CE are supported. More branches are being added as contributors onboard. Check the Contribute page to help add yours!" },
+ { q: "How do I find resources for a specific subject?", a: "Use the Syllabus or Notes page and filter by branch and semester. You can also use the search bar on any resource page to find specific topics." },
+ { q: "Can I download notes and PYQs?", a: "Yes, all resources are freely downloadable. Click the download icon on any resource card to save it locally." },
+ ],
+ },
+ {
+ id: "contributing",
+ icon: "🤝",
+ label: "Contributing",
+ faqs: [
+ { q: "How can I contribute my notes or PYQs?", a: "Head to the Contribute page, fill in the resource details, and upload your file. All submissions are reviewed by the community before going live." },
+ { q: "Can I contribute as a developer?", a: "Absolutely! StudyMatePlus is open-source on GitHub. Fork the repo, pick an issue labeled 'good first issue', and submit a PR. See CONTRIBUTING.md for the full guide." },
+ { q: "What file formats are accepted for uploads?", a: "We accept PDF, DOCX, and image files (PNG/JPG). PDFs are recommended for the best viewing experience across devices." },
+ { q: "Will I get credit for my contributions?", a: "Yes! Contributors are acknowledged on the About page and GitHub contributors list. Open-source contributions also look great on your portfolio." },
+ ],
+ },
+ {
+ id: "tools",
+ icon: "🛠️",
+ label: "Platform Tools",
+ faqs: [
+ { q: "What is the Mind Map tool?", a: "The Mind Map Editor lets you visually organize topics and concepts using an interactive drag-and-drop canvas. Great for revision and structuring complex subjects." },
+ { q: "How does the Task/Todo feature work?", a: "The Tasks page lets you create, manage, and track study tasks. Add deadlines, mark tasks complete, and stay on top of your study schedule." },
+ { q: "What does the Analytics page show?", a: "Analytics displays usage statistics like most-downloaded resources, trending topics, and community activity — helping you identify what peers find most valuable." },
+ { q: "How do I submit feedback about the platform?", a: "Use the Feedback page to rate your experience, report issues, or share suggestions. You can also submit directly via the Submit Feedback form." },
+ ],
+ },
+ {
+ id: "account",
+ icon: "👤",
+ label: "Account & Privacy",
+ faqs: [
+ { q: "How do I edit my profile?", a: "Click your avatar in the top-right navbar to go to your Profile page where you can update your display name and preferences." },
+ { q: "Does StudyMatePlus collect personal data?", a: "We collect minimal data necessary to provide the service. Please read our Privacy Policy for a full breakdown of what we collect and how it is used." },
+ { q: "How is my data protected?", a: "All data is stored securely on MongoDB Atlas with encrypted connections. We never sell personal data to third parties." },
+ { q: "Can I delete my account?", a: "Yes, account deletion can be requested by contacting us at support@studymateplus.com. All personal data will be removed within 7 days." },
+ ],
+ },
+];
+
+const quickLinks = [
+ { icon: , label: "Browse Syllabus", to: "/syllabus", color: "#3b82f6" },
+ { icon: , label: "View FAQs", to: "/faq", color: "#8b5cf6" },
+ { icon: , label: "Contact Support", to: "/contact", color: "#10b981" },
+ { icon: , label: "Send Feedback", to: "/feedback", color: "#f59e0b" },
+];
+
+/* ─── Component ──────────────────────────────────────────────── */
+const HelpCenter = () => {
+ const [query, setQuery] = useState("");
+ const [activeCategory, setActiveCategory] = useState(null);
+ const [openMap, setOpenMap] = useState({});
+ const [showScroll, setShowScroll] = useState(false);
+
+ useEffect(() => {
+ const onScroll = () => setShowScroll(window.scrollY > 300);
+ window.addEventListener("scroll", onScroll);
+ return () => window.removeEventListener("scroll", onScroll);
+ }, []);
+
+ const scrollToTop = () => window.scrollTo({ top: 0, behavior: "smooth" });
+
+ const filteredCategories = useMemo(() => {
+ const q = query.toLowerCase().trim();
+ if (!q) return categories;
+ return categories
+ .map((cat) => ({
+ ...cat,
+ faqs: cat.faqs.filter(
+ ({ q: question, a }) =>
+ (question || "").toLowerCase().includes(q) ||
+ a.toLowerCase().includes(q) ||
+ cat.label.toLowerCase().includes(q)
+ ),
+ }))
+ .filter((cat) => cat.faqs.length > 0);
+ }, [query]);
+
+ const displayedCategories = activeCategory
+ ? filteredCategories.filter((c) => c.id === activeCategory)
+ : filteredCategories;
+
+ const toggleFaq = (catId, idx) => {
+ const key = `${catId}-${idx}`;
+ setOpenMap((prev) => ({ ...prev, [key]: !prev[key] }));
+ };
+
+ const totalResults = displayedCategories.reduce((s, c) => s + c.faqs.length, 0);
+
+ return (
+
+
+ {/* ── Hero ──────────────────────────────────────────────── */}
+
+
+
+ Help Center
+
+ How can we help you?
+
+
+ Search our knowledge base, browse categories, or reach out to our support team.
+
+
+
+
+ { setQuery(e.target.value); setActiveCategory(null); }}
+ aria-label="Search help topics"
+ />
+ {query && (
+
+ )}
+
+
+ {query && (
+
+ {totalResults > 0
+ ? `Found ${totalResults} result${totalResults !== 1 ? "s" : ""} for "${query}"`
+ : `No results for "${query}"`}
+
+ )}
+
+
+
+
+ {/* ── Quick Links ───────────────────────────────────────── */}
+
+
+
+ {quickLinks.map(({ icon, label, to, color }) => (
+
+
+ {icon}
+ {label}
+
+
+ ))}
+
+
+
+
+ {/* ── Category Pills ────────────────────────────────────── */}
+
+
+
+ Browse by Category
+
+
+ setActiveCategory(null)}
+ >
+ 🗂️ All Topics
+
+ {categories.map((cat) => (
+ { setActiveCategory(cat.id); setQuery(""); }}
+ >
+ {cat.icon} {cat.label}
+
+ ))}
+
+
+
+
+ {/* ── FAQ Accordions ────────────────────────────────────── */}
+
+
+ {displayedCategories.length === 0 ? (
+
+ 🔍
+ No results found. Try a different search or browse a category.
+
+
+ ) : (
+ displayedCategories.map((cat) => (
+
+
+ {cat.icon}
+ {cat.label}
+
+
+ {cat.faqs.map((item, idx) => {
+ const key = `${cat.id}-${idx}`;
+ const isOpen = !!openMap[key];
+ return (
+
+
+
+
+ {isOpen && (
+
+ {item.a}
+
+ )}
+
+
+ );
+ })}
+
+ ))
+ )}
+
+
+
+ {/* ── Contact / Support ─────────────────────────────────── */}
+
+
+
+
+
Still need help?
+
+ Can't find what you're looking for? Our team is happy to assist.
+ Reach out at{" "}
+ support@studymateplus.com
+ {" "}or use the form below.
+
+
+
+
+
+
+
+
+ {/* ── Footer ────────────────────────────────────────────── */}
+
+
+
+
+ 📚 StudyMatePlus
+ Empowering students with comprehensive academic resources and peer-to-peer learning.
+
+
+
+
+ Quick Links
+
+ {[
+ { to: "/syllabus", text: "Syllabus" },
+ { to: "/pyqs", text: "Previous Papers" },
+ { to: "/feedback", text: "Feedback" },
+ { to: "/notes", text: "Notes" },
+ ].map((l) => (
+
+ {l.text}
+
+ ))}
+
+
+
+
+ Support
+
+ {[
+ { to: "/help", text: "Help Center" },
+ { to: "/contact", text: "Contact Us" },
+ { to: "/contribute", text: "Contribute" },
+ { to: "/privacy", text: "Privacy Policy" },
+ ].map((l) => (
+
+ {l.text}
+
+ ))}
+
+
+
+
+
+ © {new Date().getFullYear()} StudyMatePlus. Open-source educational platform for students.
+
+
+
+
+ {/* ── Scroll to Top ─────────────────────────────────────── */}
+
+ {showScroll && (
+
+
+
+ )}
+
+
+ );
+};
+
+export default HelpCenter;