Feat help center routing

src/app/faq/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Layout from '@/components/layout/Layout';
+import FrequentlyAskedQuestions from '@/components/faq/FrequentlyAskedQuestions';
+
+export default function TermsPage() {
+  return (
+    <Layout>
+      <FrequentlyAskedQuestions />
+    </Layout>
+  );
+}

src/components/faq/FrequentlyAskedQuestions.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import React, { useState } from 'react';
+import { FaRegQuestionCircle } from 'react-icons/fa';
+import {FiGithub, FiMail} from 'react-icons/fi';
+import Image from 'next/image';
+import Snap1 from '../../assets/Snap1.png'
+import Snap2 from '../../assets/Snap2.png'
+import Snap3 from '../../assets/Snap3.png'
+import { Accordion, AccordionContent, AccordionTrigger } from '../ui/Accord';
+
+const FrequentlyAskedQuestions = () => {
+
+
+  return (
+    <section className="py-20 bg-gray-900 min-h-screen">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="text-center mb-16">
+          <div className="inline-flex items-center space-x-3 bg-purple-500/10 border border-purple-500/20 rounded-full px-6 py-3 mb-8">
+            <FaRegQuestionCircle className="text-purple-400" size={20} />
+            <span className="text-purple-300 font-medium">Frequently Asked Questions</span>
+          </div>
+
+          <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
+            Frequently Asked  <span className="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">Questions</span>
+          </h1>
+
+          <p className="text-xl text-gray-300 leading-relaxed">
+           All the essential information you might be looking for, explained simply to help you make informed decisions without confusion or guesswork.
+          </p>
+        </div>
+
+
+        {/* Main Content */}
+        <div className="space-y-12">
+
+        {/* First Question */}
+          <div className="flex flex-col gap-4 bg-gray-800/30 backdrop-blur-sm border border-gray-700 rounded-2xl px-8 p-4 ">
+        <Accordion>
+          <AccordionTrigger>
+            <div className='text-2xl font-bold text-white '>1. How can we download BrowserPing ?</div>
+          </AccordionTrigger>
+          <AccordionContent>
+          <span className="space-y-4 text-gray-300 text-xl">You can download BrowserPing by going to <a className='text-purple-500' target='./' href='https://www.browseping.com/download'>Download page.</a> There you can find links to download it for diffrent browser and versions. </span>
+          </AccordionContent>
+          </Accordion>
+          </div>
+
+
+        {/* Second Question */}
+          <div className="flex flex-col gap-4 bg-gray-800/30 backdrop-blur-sm border border-gray-700 rounded-2xl px-8 p-4 ">
+            <Accordion>
+                <AccordionTrigger >
+                  <div className="text-2xl font-bold text-white">2. How can I add friends on BrowserPing ?</div></AccordionTrigger>
+                <AccordionContent>
+                <div className='flex flex-col justify-center items-start space-y-4 text-gray-300 text-xl'>
+                    <h1 className='font-bold mb-6'>You can add a friend by following the steps below:</h1>
+                    <div className='flex flex-col gap-2'>
+                    <a>1. Click on extensions in your browser and find BrowserPing  </a>
+                    <a>2. Open BrowserPing and go to Friends section in bottom navigation dock right next to &quot;Home&quot;</a>
+                    <div className='flex justify-center w-full'>
+                        <Image src={Snap1} alt="snapshot1" className='w-[300px] rounded-md m-4'/>
+                    </div>
+                    <a>3. In friends section select &quot;Search&quot; in top navigation bar </a>
+                    <div className='flex justify-center w-full'>
+                        <Image src={Snap2} alt="snapshot1" className='w-[300px] rounded-md m-4'/>
+                    </div>
+                    <a>4. Here you can search your friend by their name or username</a>
+                    <div className='flex justify-center w-full'>
+                        <Image src={Snap3} alt="snapshot1" className='w-[300px] rounded-md m-4'/>
+                    </div>
+
+                    </div>
+                </div>
+                </AccordionContent>
+            </Accordion>
+           </div>
+
+
+        {/* Third Question */}
+          <div className="bg-gray-800/30 backdrop-blur-sm border border-gray-700 rounded-2xl px-8 p-4">
+            <Accordion>
+                <AccordionTrigger>
+                  <div className="text-2xl font-bold text-white text-left">
+                  3. Do I have control over what information others see from my browsing?
+                  </div>
+                  </AccordionTrigger>
+                <AccordionContent>
+                <div className='flex flex-col justify-center items-start gap-3 space-y-4 text-gray-300 text-xl pt-4'>
+                    <span>Yes. With Privacy Controls, you can decide who can see your data, including Online Status, Last Seen, Tab Activity, and more.</span>
+                    <span>To manage your privacy, simply navigate to your account Privacy Settings section and review the available control options.</span>
+                    <span className='w-full flex justify-center'>More {'->'}  Account {'->'} Privacy & Security</span>
+                </div>
+                </AccordionContent>
+            </Accordion>
+           </div>
+
+
+        {/* Forth Question */}
+          <div className="bg-gray-800/30 backdrop-blur-sm border border-gray-700 rounded-2xl px-8 p-4">
+            <Accordion>
+                <AccordionTrigger>
+                  <div className="text-2xl font-bold text-white">4. How does the BrowserPing leaderboard works ?</div>
+                  </AccordionTrigger>
+                <AccordionContent>
+                <div className='flex flex-col justify-center items-start gap-3 space-y-4 text-gray-300 text-xl pt-4'>
+                    <span>BrowserPing tracks each user&apos;s total online hours throughout the month and uses this data to automatically generate a monthly leaderboard, ranking users based on their overall activity.</span>
+                    <span>Access your leaderboard by visiting the Analytics section from the main menu</span>
+                    <span className='w-full flex justify-center'>Analytics {'->'}  Account {'->'} Leaderboard</span>
+                </div>
+                </AccordionContent>
+            </Accordion>
+           </div>
+
+
+        {/* Contact Methods */}
+        <div className="grid md:grid-cols-2 gap-8 mb-16">
+
+          {/* General Contact */}
+          <div className="bg-gray-800/30 backdrop-blur-sm border border-gray-700 rounded-2xl p-8">
+            <div className="flex items-center space-x-3 mb-6">
+              <div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
+                <FiMail className="text-blue-400" size={24} />
+              </div>
+              <div>
+                <h3 className="text-xl font-bold text-white">Can&apos;t find your question</h3>
+                <p className="text-gray-400">Contact Us on our mail address</p>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <p className="text-gray-300">
+                For general questions, feedback, or support requests, reach out to us via email.
+              </p>
+              <a
+                href="mailto:hello@browseping.com"
+                className="inline-flex items-center space-x-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors"
+              >
+                <FiMail size={16} />
+                <span>support@browseping.com</span>
+              </a>
+            </div>
+          </div>
+
+          {/* Development & Contributions */}
+          <div className="bg-gray-800/30 backdrop-blur-sm border border-gray-700 rounded-2xl p-8">
+            <div className="flex items-center space-x-3 mb-6">
+              <div className="w-12 h-12 bg-gray-500/20 rounded-xl flex items-center justify-center">
+                <FiGithub className="text-gray-400" size={24} />
+              </div>
+              <div>
+                <h3 className="text-xl font-bold text-white">Found a Bug ? </h3>
+                <p className="text-gray-400">Report the bug to out GitHub repo</p>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <p className="text-gray-300">
+                Want to contribute? Check out our GitHub repository.
+              </p>
+              <a
+                href="https://github.com/browseping"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center space-x-2 bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors"
+              >
+                <FiGithub size={16} />
+                <span>GitHub Repository</span>
+              </a>
+            </div>
+          </div>
+
+        </div>
+
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FrequentlyAskedQuestions;

src/components/layout/Footer.tsx

@@ -99,7 +99,7 @@ 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: '/faq', label: 'Help Center' },
                 { href: '/contact', label: 'Contact Us' },
                 { href: '/about', label: 'About Us' }
               ].map((link) => (

src/components/ui/Accord.tsx

@@ -0,0 +1,82 @@
+import { createContext, useContext, useState } from "react";
+import { RiArrowDropDownLine, RiArrowDropUpLine } from 'react-icons/ri';
+
+
+type AccordionContextType = {
+    isOpen: boolean;
+    toggle: () => void;
+}
+
+const AccordionContext = createContext<AccordionContextType | null>(null)
+
+const useAccordion = () => {
+    const ctx = useContext(AccordionContext)
+    if(!ctx){
+        throw new Error('Accordion component must be used inside <Accordion>')
+    }
+    return ctx
+}
+
+type AccordionProps = {
+    children: React.ReactNode
+}
+
+export function Accordion({children}: AccordionProps){
+    const [isOpen, setIsOpen] = useState(false)
+
+    const toggle = () => setIsOpen(prev => !prev)
+
+    return(
+        <AccordionContext.Provider value={{isOpen, toggle}}>
+            {children}
+        </AccordionContext.Provider>
+    )
+}
+
+
+
+
+type AccordionTriggerProps = {
+  children: React.ReactNode;
+};
+
+export function AccordionTrigger({ children }: AccordionTriggerProps) {
+  const { isOpen, toggle } = useAccordion();
+
+  return (
+    <button
+      onClick={toggle}
+      className="flex flex-row justify-between items-center w-full"
+      aria-expanded={isOpen}
+    >
+      <div className="text-2xl font-bold text-white">
+        {children}
+      </div>
+
+      {isOpen ? (
+        <RiArrowDropUpLine color="gray" size={30} />
+      ) : (
+        <RiArrowDropDownLine color="gray" size={30} />
+      )}
+    </button>
+  );
+}
+
+
+
+type AccordionContentProps = {
+  children: React.ReactNode;
+};
+
+export function AccordionContent({ children }: AccordionContentProps) {
+  const { isOpen } = useAccordion();
+
+  return (
+    <span
+      className={`${isOpen ? "block" : "hidden"} space-y-4 text-gray-300 text-xl`}
+    >
+      {children}
+    </span>
+  );
+}
+