Fix route and theme

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,134 @@
+// 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 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-900 via-gray-900 to-black">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden bg-gradient-to-r from-blue-900 via-purple-900 to-blue-900">
+        <div className="absolute inset-0 bg-grid-white/5" />
+        <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-gray-300">
+              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-white 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."
+              color="from-blue-600 to-cyan-600"
+            />
+            <HelpCategoryCard
+              icon={<Globe className="h-8 w-8" />}
+              title="Features & Usage"
+              description="Discover how to use all BrowsePing features effectively."
+              color="from-purple-600 to-pink-600"
+            />
+            <HelpCategoryCard
+              icon={<Users className="h-8 w-8" />}
+              title="Social Features"
+              description="Learn about sharing, groups, and social browsing."
+              color="from-green-600 to-emerald-600"
+            />
+            <HelpCategoryCard
+              icon={<Shield className="h-8 w-8" />}
+              title="Privacy & Security"
+              description="Understand how BrowsePing protects your data and privacy."
+              color="from-orange-600 to-red-600"
+            />
+            <HelpCategoryCard
+              icon={<FileText className="h-8 w-8" />}
+              title="Troubleshooting"
+              description="Fix common issues and problems with BrowsePing."
+              color="from-indigo-600 to-blue-600"
+            />
+            <HelpCategoryCard
+              icon={<AlertTriangle className="h-8 w-8" />}
+              title="FAQ"
+              description="Quick answers to frequently asked questions."
+              color="from-yellow-600 to-amber-600"
+            />
+          </div>
+        </section>
+
+        {/* Popular Articles */}
+        <section className="mb-16">
+          <h2 className="text-2xl font-bold text-white mb-8">
+            Popular Articles
+          </h2>
+          <div className="grid gap-6 md:grid-cols-2">
+            <article className="bg-gray-800/60 backdrop-blur-sm rounded-xl border border-gray-700 p-6 hover:bg-gray-800 transition-all duration-200">
+              <div className="flex items-start gap-4">
+                <div className="bg-blue-900/50 p-3 rounded-lg">
+                  <HelpCircle className="h-6 w-6 text-blue-400" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-white mb-2">
+                    How to create and join browsing groups
+                  </h3>
+                  <p className="text-gray-400 mb-4">
+                    Learn how to create your own browsing groups or join
+                    existing ones to browse with friends.
+                  </p>
+                </div>
+              </div>
+            </article>
+            <article className="bg-gray-800/60 backdrop-blur-sm rounded-xl border border-gray-700 p-6 hover:bg-gray-800 transition-all duration-200">
+              <div className="flex items-start gap-4">
+                <div className="bg-purple-900/50 p-3 rounded-lg">
+                  <Shield className="h-6 w-6 text-purple-400" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-white mb-2">
+                    Privacy controls and data management
+                  </h3>
+                  <p className="text-gray-400 mb-4">
+                    Understand how to control your privacy settings and manage
+                    your shared browsing data.
+                  </p>
+                </div>
+              </div>
+            </article>
+          </div>
+        </section>
+
+        {/* Still Need Help Section */}
+        <section className="mt-20">
+          <ContactSupport />
+        </section>
+      </main>
+    </div>
+  );
+}

src/components/helpcenter/ContactSupport.tsx

@@ -0,0 +1,30 @@
+// components/helpcenter/ContactSupport.tsx
+import React from "react";
+import { MessageCircle, Mail } from "lucide-react";
+
+export default function ContactSupport() {
+  return (
+    <div className="rounded-2xl bg-gradient-to-r from-gray-800 to-gray-900 border border-gray-700 p-8 md:p-10">
+      <div className="text-center max-w-2xl mx-auto">
+        <h2 className="text-2xl font-bold text-white mb-4">Still need help?</h2>
+        <p className="text-gray-400 mb-8">
+          {`Can't find what you're looking for? Our support team is here to help.`}
+        </p>
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <button className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium">
+            <MessageCircle className="h-5 w-5" />
+            Start a conversation
+          </button>
+          <button className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors font-medium">
+            <Mail className="h-5 w-5" />
+            Send us an email
+          </button>
+        </div>
+        <p className="text-sm text-gray-500 mt-6">
+          Average response time:{" "}
+          <span className="text-gray-400">&lt; 24 hours</span>
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/helpcenter/HelpCategoryCard.tsx

@@ -0,0 +1,38 @@
+// components/helpcenter/HelpCategoryCard.tsx
+import React from "react";
+
+interface HelpCategoryCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  count?: number;
+  color: string;
+}
+
+export default function HelpCategoryCard({
+  icon,
+  title,
+  description,
+  count,
+  color,
+}: HelpCategoryCardProps) {
+  return (
+    <div className="group relative overflow-hidden rounded-2xl bg-gray-800/50 backdrop-blur-sm border border-gray-700 p-6 hover:bg-gray-800 transition-all duration-200 hover:scale-[1.02] cursor-pointer">
+      <div className={`absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity bg-gradient-to-r ${color}`} />
+      <div className="relative">
+        <div className={`inline-flex p-3 rounded-lg bg-gradient-to-r ${color} bg-opacity-10 text-white mb-4`}>
+          {icon}
+        </div>
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="text-lg font-semibold text-white">{title}</h3>
+          {count && (
+            <span className="text-sm text-gray-400 bg-gray-700 px-2 py-1 rounded-full">
+              {count} articles
+            </span>
+          )}
+        </div>
+        <p className="text-gray-400 text-sm leading-relaxed">{description}</p>
+      </div>
+    </div>
+  );
+}

src/components/layout/Footer.tsx

@@ -1,7 +1,13 @@
-import React from 'react';
-import Link from 'next/link';
-import Image from 'next/image';
-import { FiGithub, FiMail, FiHeart, FiTwitter, FiLinkedin } from 'react-icons/fi';
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import {
+  FiGithub,
+  FiMail,
+  FiHeart,
+  FiTwitter,
+  FiLinkedin,
+} from "react-icons/fi";
 
 const Footer = () => {
   const currentYear = new Date().getFullYear();
@@ -26,12 +32,15 @@ const Footer = () => {
                 <span className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                   BrowsePing
                 </span>
-                <div className="text-sm text-gray-400">Socialize Your Browsing</div>
+                <div className="text-sm text-gray-400">
+                  Socialize Your Browsing
+                </div>
               </div>
             </div>
             <p className="text-gray-300 mb-6 max-w-md leading-relaxed text-lg">
-              Transform your solitary browsing into a vibrant social experience. Connect with friends,
-              share your digital presence, and discover what&apos;s capturing everyone&apos;s attention across the web.
+              Transform your solitary browsing into a vibrant social experience.
+              Connect with friends, share your digital presence, and discover
+              what&apos;s capturing everyone&apos;s attention across the web.
             </p>
 
             {/* Product Hunt Badge */}
@@ -54,18 +63,38 @@ const Footer = () => {
 
             <div className="flex space-x-6">
               {[
-                { icon: FiGithub, href: 'https://github.com/browseping', label: 'GitHub' },
-                { icon: FiTwitter, href: 'https://x.com/BrowsePing', label: 'Twitter' },
-                { icon: FiLinkedin, href: 'http://linkedin.com/company/browseping', label: 'LinkedIn' },
-                { icon: FiMail, href: 'mailto:support@browseping.com', label: 'Email' },
+                {
+                  icon: FiGithub,
+                  href: "https://github.com/browseping",
+                  label: "GitHub",
+                },
+                {
+                  icon: FiTwitter,
+                  href: "https://x.com/BrowsePing",
+                  label: "Twitter",
+                },
+                {
+                  icon: FiLinkedin,
+                  href: "http://linkedin.com/company/browseping",
+                  label: "LinkedIn",
+                },
+                {
+                  icon: FiMail,
+                  href: "mailto:support@browseping.com",
+                  label: "Email",
+                },
               ].map((social) => (
                 <a
                   key={social.label}
                   href={social.href}
                   className="w-12 h-12 bg-gray-800/50 rounded-xl flex items-center justify-center text-gray-400 hover:text-white hover:bg-gray-700/50 transition-all duration-300 hover:scale-110 group border border-gray-800 hover:border-gray-600"
                   aria-label={social.label}
                 >
-                  <social.icon size={20} className="group-hover:animate-pulse" aria-hidden="true" />
+                  <social.icon
+                    size={20}
+                    className="group-hover:animate-pulse"
+                    aria-hidden="true"
+                  />
                 </a>
               ))}
             </div>
@@ -76,10 +105,10 @@ const Footer = () => {
             <h3 className="font-bold text-xl mb-6 text-white">Quick Links</h3>
             <ul className="space-y-4">
               {[
-                { href: '/download', label: 'Download' },
-                { href: '/leaderboard', label: 'Leaderboard' },
-                { href: '/privacy', label: 'Privacy Policy' },
-                { href: '/terms', label: 'Terms of Service' },
+                { href: "/download", label: "Download" },
+                { href: "/leaderboard", label: "Leaderboard" },
+                { href: "/privacy", label: "Privacy Policy" },
+                { href: "/terms", label: "Terms of Service" },
               ].map((link) => (
                 <li key={link.href}>
                   <Link
@@ -99,9 +128,9 @@ const Footer = () => {
             <h3 className="font-bold text-xl mb-6 text-white">Support</h3>
             <ul className="space-y-4">
               {[
-                { href: '/help', label: 'Help Center' },
-                { href: '/contact', label: 'Contact Us' },
-                { href: '/about', label: 'About Us' }
+                { href: "/help", label: "Help Center" },
+                { href: "/contact", label: "Contact Us" },
+                { href: "/about", label: "About Us" },
               ].map((link) => (
                 <li key={link.href}>
                   <Link
@@ -123,7 +152,11 @@ const Footer = () => {
           </div>
           <div className="flex items-center space-x-2 text-gray-400 text-sm mt-4 md:mt-0">
             <span>Made with</span>
-            <FiHeart size={16} className="text-red-500 animate-pulse" aria-hidden="true" />
+            <FiHeart
+              size={16}
+              className="text-red-500 animate-pulse"
+              aria-hidden="true"
+            />
             <span>for better browsing</span>
           </div>
         </div>
@@ -132,4 +165,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export default Footer;