Fix routes /help

package.json

@@ -10,6 +10,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "lucide-react": "^0.563.0",
     "next": "15.5.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",

src/app/help/page.tsx

@@ -0,0 +1,170 @@
+// app/help/page.tsx
+import React from "react";
+import {
+  MessageCircle,
+  HelpCircle,
+  FileText,
+  AlertTriangle,
+  Globe,
+  Shield,
+  Users,
+} from "lucide-react";
+import HelpCategoryCard from "../../components/helpcenter/HelpCategoryCard";
+import FAQSection from "../../components/helpcenter/FAQSection";
+import ContactSupport from "../../components/helpcenter/ContactSupport";
+
+export const metadata = {
+  title: "Help Center | BrowsePing",
+  description:
+    "Get help with BrowsePing - the open-source browser extension that transforms solitary browsing into a vibrant social experience.",
+};
+
+export default function HelpCenterPage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600">
+        <div className="absolute inset-0 bg-grid-white/10" />
+        <div className="container relative mx-auto px-4 py-16 sm:px-6 lg:px-8">
+          <div className="text-center">
+            <h1 className="text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
+              How can we help you?
+            </h1>
+            <p className="mx-auto mt-6 max-w-2xl text-lg text-blue-100">
+              Find answers to common questions, troubleshoot issues, and learn
+              how to make the most of your BrowsePing experience.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <main className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
+        {/* Categories Grid */}
+        <section className="mb-16">
+          <h2 className="text-2xl font-bold text-gray-900 mb-8">
+            Browse by category
+          </h2>
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            <HelpCategoryCard
+              icon={<MessageCircle className="h-8 w-8" />}
+              title="Getting Started"
+              description="Learn how to install and set up BrowsePing on your browser."
+              link="/help/getting-started"
+              count={5}
+              color="from-blue-500 to-cyan-500"
+            />
+            <HelpCategoryCard
+              icon={<Globe className="h-8 w-8" />}
+              title="Features & Usage"
+              description="Discover how to use all BrowsePing features effectively."
+              link="/help/features"
+              count={12}
+              color="from-purple-500 to-pink-500"
+            />
+            <HelpCategoryCard
+              icon={<Users className="h-8 w-8" />}
+              title="Social Features"
+              description="Learn about sharing, groups, and social browsing."
+              link="/help/social"
+              count={8}
+              color="from-green-500 to-emerald-500"
+            />
+            <HelpCategoryCard
+              icon={<Shield className="h-8 w-8" />}
+              title="Privacy & Security"
+              description="Understand how BrowsePing protects your data and privacy."
+              link="/help/privacy"
+              count={6}
+              color="from-orange-500 to-red-500"
+            />
+            <HelpCategoryCard
+              icon={<FileText className="h-8 w-8" />}
+              title="Troubleshooting"
+              description="Fix common issues and problems with BrowsePing."
+              link="/help/troubleshooting"
+              count={15}
+              color="from-indigo-500 to-blue-500"
+            />
+            <HelpCategoryCard
+              icon={<AlertTriangle className="h-8 w-8" />}
+              title="FAQ"
+              description="Quick answers to frequently asked questions."
+              link="/help/faq"
+              count={25}
+              color="from-yellow-500 to-amber-500"
+            />
+          </div>
+        </section>
+
+        {/* Popular Articles */}
+        <section className="mb-16">
+          <div className="flex items-center justify-between mb-8">
+            <h2 className="text-2xl font-bold text-gray-900">
+              Popular Articles
+            </h2>
+            <a
+              href="/help/articles"
+              className="text-blue-600 hover:text-blue-800 font-medium"
+            >
+              View all articles →
+            </a>
+          </div>
+          <div className="grid gap-6 md:grid-cols-2">
+            <article className="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow">
+              <div className="flex items-start gap-4">
+                <div className="bg-blue-50 p-3 rounded-lg">
+                  <HelpCircle className="h-6 w-6 text-blue-600" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-gray-900 mb-2">
+                    How to create and join browsing groups
+                  </h3>
+                  <p className="text-gray-600 mb-4">
+                    Learn how to create your own browsing groups or join
+                    existing ones to browse with friends.
+                  </p>
+                  <a
+                    href="/help/article/create-join-groups"
+                    className="text-blue-600 hover:text-blue-800 text-sm font-medium"
+                  >
+                    Read article →
+                  </a>
+                </div>
+              </div>
+            </article>
+            <article className="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow">
+              <div className="flex items-start gap-4">
+                <div className="bg-purple-50 p-3 rounded-lg">
+                  <Shield className="h-6 w-6 text-purple-600" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-gray-900 mb-2">
+                    Privacy controls and data management
+                  </h3>
+                  <p className="text-gray-600 mb-4">
+                    Understand how to control your privacy settings and manage
+                    your shared browsing data.
+                  </p>
+                  <a
+                    href="/help/article/privacy-controls"
+                    className="text-blue-600 hover:text-blue-800 text-sm font-medium"
+                  >
+                    Read article →
+                  </a>
+                </div>
+              </div>
+            </article>
+          </div>
+        </section>
+
+        {/* FAQ Section */}
+        <FAQSection />
+
+        {/* Still Need Help Section */}
+        <section className="mt-20">
+          <ContactSupport />
+        </section>
+      </main>
+    </div>
+  );
+}

src/components/helpcenter/ContactSupport.tsx

@@ -0,0 +1,78 @@
+// components/ContactSupport.tsx
+import React from "react";
+import { Mail, MessageSquare, Github, BookOpen } from "lucide-react";
+
+export default function ContactSupport() {
+  return (
+    <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 text-white">
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center mb-10">
+          <h2 className="text-3xl font-bold mb-4">Still need help?</h2>
+          <p className="text-blue-100 text-lg">
+            Our team and community are here to assist you
+          </p>
+        </div>
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          <a
+            href="mailto:support@browsePing.com"
+            className="bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-xl p-6 text-center transition-all group"
+          >
+            <div className="bg-white/20 w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+              <Mail className="h-7 w-7" />
+            </div>
+            <h3 className="font-semibold mb-2">Email Support</h3>
+            <p className="text-blue-100 text-sm">
+              Get personalized help from our team
+            </p>
+          </a>
+          <a
+            href="https://github.com/browsePing/browsePing/discussions"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-xl p-6 text-center transition-all group"
+          >
+            <div className="bg-white/20 w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+              <MessageSquare className="h-7 w-7" />
+            </div>
+            <h3 className="font-semibold mb-2">Community Forum</h3>
+            <p className="text-blue-100 text-sm">
+              Ask questions and share with users
+            </p>
+          </a>
+          <a
+            href="https://github.com/browsePing/browsePing/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-xl p-6 text-center transition-all group"
+          >
+            <div className="bg-white/20 w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+              <Github className="h-7 w-7" />
+            </div>
+            <h3 className="font-semibold mb-2">GitHub Issues</h3>
+            <p className="text-blue-100 text-sm">
+              Report bugs and request features
+            </p>
+          </a>
+          <a
+            href="/docs"
+            className="bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-xl p-6 text-center transition-all group"
+          >
+            <div className="bg-white/20 w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
+              <BookOpen className="h-7 w-7" />
+            </div>
+            <h3 className="font-semibold mb-2">Documentation</h3>
+            <p className="text-blue-100 text-sm">
+              Technical guides and API references
+            </p>
+          </a>
+        </div>
+        <div className="mt-10 pt-8 border-t border-white/20 text-center">
+          <p className="text-blue-100">
+            Average response time:{" "}
+            <span className="font-semibold text-white">Under 24 hours</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/helpcenter/FAQSection.tsx

@@ -0,0 +1,83 @@
+// components/FAQSection.tsx
+'use client';
+
+import React, { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+const faqs = [
+  {
+    question: 'Is BrowsePing really free and open-source?',
+    answer: 'Yes! BrowsePing is completely free to use and open-source under the MIT License. You can view, modify, and contribute to our code on GitHub. We believe in transparent, community-driven development.',
+  },
+  {
+    question: 'Which browsers does BrowsePing support?',
+    answer: 'BrowsePing currently supports Chrome, Firefox, Edge, and Brave browsers. We\'re working on Safari support. All extensions are available on their respective browser stores.',
+  },
+  {
+    question: 'How does BrowsePing protect my privacy?',
+    answer: 'Privacy is our top priority. All social interactions are opt-in, and you control exactly what you share. We use end-to-end encryption for private messages and never sell your data. Learn more in our Privacy Policy.',
+  },
+  {
+    question: 'Can I use BrowsePing without creating an account?',
+    answer: 'Yes! You can use basic features anonymously. For social features like creating groups and persistent profiles, you\'ll need to create a free account with just an email address.',
+  },
+  {
+    question: 'How do I report inappropriate content or users?',
+    answer: 'You can report directly from any shared link or user profile. Our moderation team reviews reports promptly. We also provide community moderation tools for group admins.',
+  },
+];
+
+export default function FAQSection() {
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+  const toggleFAQ = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  return (
+    <section className="bg-gradient-to-br from-gray-50 to-blue-50 rounded-2xl p-8">
+      <div className="text-center mb-10">
+        <h2 className="text-3xl font-bold text-gray-900 mb-4">Frequently Asked Questions</h2>
+        <p className="text-gray-600 max-w-2xl mx-auto">
+          Quick answers to the most common questions about BrowsePing
+        </p>
+      </div>
+      <div className="space-y-4 max-w-3xl mx-auto">
+        {faqs.map((faq, index) => (
+          <div
+            key={index}
+            className="bg-white rounded-xl border border-gray-200 overflow-hidden hover:border-blue-300 transition-colors"
+          >
+            <button
+              onClick={() => toggleFAQ(index)}
+              className="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset rounded-xl"
+            >
+              <span className="font-semibold text-gray-900 pr-4">{faq.question}</span>
+              <ChevronDown
+                className={`h-5 w-5 text-gray-500 transition-transform duration-200 ${
+                  openIndex === index ? 'transform rotate-180' : ''
+                }`}
+              />
+            </button>
+            <div
+              className={`px-6 overflow-hidden transition-all duration-300 ${
+                openIndex === index ? 'pb-4 max-h-96' : 'max-h-0'
+              }`}
+            >
+              <p className="text-gray-600">{faq.answer}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="text-center mt-10">
+        <a
+          href="/help/faq"
+          className="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium"
+        >
+          View all frequently asked questions
+          <ChevronDown className="ml-2 h-4 w-4 rotate-270" />
+        </a>
+      </div>
+    </section>
+  );
+}