diff --git a/package-lock.json b/package-lock.json index 8de0edc..6fdcef4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "browseping-web", "version": "0.1.0", "dependencies": { + "lucide-react": "^0.563.0", "next": "15.5.9", "react": "19.1.0", "react-dom": "19.1.0", @@ -6496,6 +6497,15 @@ "dev": true, "license": "ISC" }, + "node_modules/lucide-react": { + "version": "0.563.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.563.0.tgz", + "integrity": "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/lz-string": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", diff --git a/package.json b/package.json index a618c4f..006066e 100644 --- a/package.json +++ b/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", diff --git a/src/app/help/page.tsx b/src/app/help/page.tsx new file mode 100644 index 0000000..5852749 --- /dev/null +++ b/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 ( +
+ {/* Hero Section */} +
+
+
+
+

+ How can we help you? +

+

+ Find answers to common questions, troubleshoot issues, and learn + how to make the most of your BrowsePing experience. +

+
+
+
+ +
+ {/* Categories Grid */} +
+

+ Browse by category +

+
+ } + 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" + /> + } + title="Features & Usage" + description="Discover how to use all BrowsePing features effectively." + link="/help/features" + count={12} + color="from-purple-500 to-pink-500" + /> + } + title="Social Features" + description="Learn about sharing, groups, and social browsing." + link="/help/social" + count={8} + color="from-green-500 to-emerald-500" + /> + } + title="Privacy & Security" + description="Understand how BrowsePing protects your data and privacy." + link="/help/privacy" + count={6} + color="from-orange-500 to-red-500" + /> + } + title="Troubleshooting" + description="Fix common issues and problems with BrowsePing." + link="/help/troubleshooting" + count={15} + color="from-indigo-500 to-blue-500" + /> + } + title="FAQ" + description="Quick answers to frequently asked questions." + link="/help/faq" + count={25} + color="from-yellow-500 to-amber-500" + /> +
+
+ + {/* Popular Articles */} +
+
+

+ Popular Articles +

+ + View all articles → + +
+
+
+
+
+ +
+
+

+ How to create and join browsing groups +

+

+ Learn how to create your own browsing groups or join + existing ones to browse with friends. +

+ + Read article → + +
+
+
+
+
+
+ +
+
+

+ Privacy controls and data management +

+

+ Understand how to control your privacy settings and manage + your shared browsing data. +

+ + Read article → + +
+
+
+
+
+ + {/* FAQ Section */} + + + {/* Still Need Help Section */} +
+ +
+
+
+ ); +} diff --git a/src/components/helpcenter/ContactSupport.tsx b/src/components/helpcenter/ContactSupport.tsx new file mode 100644 index 0000000..c0a233a --- /dev/null +++ b/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 ( +
+
+
+

Still need help?

+

+ Our team and community are here to assist you +

+
+
+ +
+ +
+

Email Support

+

+ Get personalized help from our team +

+ + +
+ +
+

Community Forum

+

+ Ask questions and share with users +

+ + +
+ +
+

GitHub Issues

+

+ Report bugs and request features +

+ + +
+ +
+

Documentation

+

+ Technical guides and API references +

+ +
+
+

+ Average response time:{" "} + Under 24 hours +

+
+
+
+ ); +} diff --git a/src/components/helpcenter/FAQSection.tsx b/src/components/helpcenter/FAQSection.tsx new file mode 100644 index 0000000..4efcf64 --- /dev/null +++ b/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(0); + + const toggleFAQ = (index: number) => { + setOpenIndex(openIndex === index ? null : index); + }; + + return ( +
+
+

Frequently Asked Questions

+

+ Quick answers to the most common questions about BrowsePing +

+
+
+ {faqs.map((faq, index) => ( +
+ +
+

{faq.answer}

+
+
+ ))} +
+
+ + View all frequently asked questions + + +
+
+ ); +} \ No newline at end of file diff --git a/src/components/helpcenter/HelpCategoryCard.tsx b/src/components/helpcenter/HelpCategoryCard.tsx new file mode 100644 index 0000000..dcf8d0d --- /dev/null +++ b/src/components/helpcenter/HelpCategoryCard.tsx @@ -0,0 +1,45 @@ +// components/HelpCategoryCard.tsx +import React, { ReactNode } from 'react'; +import { ArrowRight } from 'lucide-react'; + +interface HelpCategoryCardProps { + icon: ReactNode; + title: string; + description: string; + link: string; + count: number; + color: string; +} + +export default function HelpCategoryCard({ + icon, + title, + description, + link, + count, + color +}: HelpCategoryCardProps) { + return ( + +
+
+
{icon}
+
+ + {count} articles + +
+

+ {title} +

+

{description}

+
+ View category + +
+ + ); +} \ No newline at end of file diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index 43cf909..0f5d336 100644 --- a/src/components/layout/Footer.tsx +++ b/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 = () => { BrowsePing -
Socialize Your Browsing
+
+ Socialize Your Browsing +

- Transform your solitary browsing into a vibrant social experience. Connect with friends, - share your digital presence, and discover what's capturing everyone's attention across the web. + Transform your solitary browsing into a vibrant social experience. + Connect with friends, share your digital presence, and discover + what's capturing everyone's attention across the web.

{/* Product Hunt Badge */} @@ -54,10 +63,26 @@ const Footer = () => {
{[ - { 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) => ( { 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} > - ))}
@@ -76,10 +105,10 @@ const Footer = () => {

Quick Links