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..27fb892 --- /dev/null +++ b/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 ( +
+ {/* 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." + color="from-blue-600 to-cyan-600" + /> + } + title="Features & Usage" + description="Discover how to use all BrowsePing features effectively." + color="from-purple-600 to-pink-600" + /> + } + title="Social Features" + description="Learn about sharing, groups, and social browsing." + color="from-green-600 to-emerald-600" + /> + } + title="Privacy & Security" + description="Understand how BrowsePing protects your data and privacy." + color="from-orange-600 to-red-600" + /> + } + title="Troubleshooting" + description="Fix common issues and problems with BrowsePing." + color="from-indigo-600 to-blue-600" + /> + } + title="FAQ" + description="Quick answers to frequently asked questions." + color="from-yellow-600 to-amber-600" + /> +
+
+ + {/* Popular Articles */} +
+

+ Popular Articles +

+
+
+
+
+ +
+
+

+ How to create and join browsing groups +

+

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

+
+
+
+
+
+
+ +
+
+

+ Privacy controls and data management +

+

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

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

Still need help?

+

+ {`Can't find what you're looking for? Our support team is here to help.`} +

+
+ + +
+

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

+
+
+ ); +} diff --git a/src/components/helpcenter/HelpCategoryCard.tsx b/src/components/helpcenter/HelpCategoryCard.tsx new file mode 100644 index 0000000..eaa259d --- /dev/null +++ b/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 ( +
+
+
+
+ {icon} +
+
+

{title}

+ {count && ( + + {count} articles + + )} +
+

{description}

+
+
+ ); +} \ 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