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. +

+
+ +
{ + e.preventDefault(); + alert("Message sent! We'll get back to you shortly."); + e.target.reset(); + }} + > +
+
+ + +
+
+ + +
+
+
+ + +
+
+ +