diff --git a/src/app/Components/navBar.tsx b/src/app/Components/navBar.tsx index fec4e2a..2c8ee4f 100644 --- a/src/app/Components/navBar.tsx +++ b/src/app/Components/navBar.tsx @@ -52,6 +52,12 @@ export default function Navbar() { > COMMUNITY + + Help Center +
diff --git a/src/app/help-center/page.tsx b/src/app/help-center/page.tsx index 5e9e409..458672a 100644 --- a/src/app/help-center/page.tsx +++ b/src/app/help-center/page.tsx @@ -1,3 +1,353 @@ -export default function Help() { - return

hello

; +"use client"; + +import { useState } from "react"; +import { + ChevronDown, + ChevronUp, + Search, + BookOpen, + Users, + Wallet, + TrendingUp, + Shield, + HelpCircle, + MessageCircle, + ExternalLink, + ArrowLeft, +} from "lucide-react"; +import Link from "next/link"; +import Image from "next/image"; + +interface FAQItem { + question: string; + answer: string; + category: string; +} + +const faqData: FAQItem[] = [ + { + question: "What is PrediFi?", + answer: + "PrediFi is a decentralized prediction platform built on Starknet where users can create and join prediction pools. Users can predict outcomes of various events and earn rewards for accurate predictions.", + category: "general", + }, + { + question: "How do I create a prediction pool?", + answer: + "To create a pool, navigate to the dashboard and click 'Create Pool'. You'll need to provide basic information, set prediction rules, and stake an initial amount. The pool will be active once created and can accept participants.", + category: "pools", + }, + { + question: "How do I join a prediction pool?", + answer: + "Browse available pools in the Pool Market section. Click on any pool to view details, then click 'Join Pool' and stake your prediction amount. Make sure to read the pool rules before participating.", + category: "pools", + }, + { + question: "How are rewards distributed?", + answer: + "Rewards are distributed based on prediction accuracy. Correct predictions receive a share of the total pool rewards proportional to their stake. The more accurate your prediction and the higher your stake, the more rewards you earn.", + category: "rewards", + }, + { + question: "What happens if my prediction is wrong?", + answer: + "If your prediction is incorrect, you lose your staked amount. The staked amounts from incorrect predictions are distributed among participants with correct predictions as rewards.", + category: "rewards", + }, + { + question: "How do I connect my wallet?", + answer: + "Click the 'Connect Wallet' button in the top navigation. We support various Starknet-compatible wallets. Make sure you have some ETH in your wallet for gas fees.", + category: "wallet", + }, + { + question: "What are gas fees?", + answer: + "Gas fees are transaction costs on the Starknet network. You'll need ETH in your wallet to pay for creating pools, joining pools, and other transactions. Gas fees vary based on network congestion.", + category: "wallet", + }, + { + question: "How do I become a validator?", + answer: + "Validators help resolve prediction outcomes. To become a validator, navigate to the Validator section in your dashboard. You'll need to stake a certain amount and demonstrate reliability in resolving disputes.", + category: "validation", + }, + { + question: "What if there's a dispute about a prediction outcome?", + answer: + "Disputes are resolved through our validator system. Multiple validators review the evidence and vote on the correct outcome. The majority decision becomes the final result.", + category: "validation", + }, + { + question: "Can I cancel my participation in a pool?", + answer: + "Pool cancellation depends on the pool creator's settings. Some pools allow cancellation before the prediction deadline, while others are locked once created. Check the pool details for cancellation policies.", + category: "pools", + }, + { + question: "How do I track my prediction history?", + answer: + "Your prediction history is available in your dashboard under the Profile section. You can view all your active and completed predictions, along with your earnings and performance statistics.", + category: "general", + }, + { + question: "What types of predictions can I make?", + answer: + "PrediFi supports various prediction types including price movements, event outcomes, sports results, and more. Pool creators define the specific prediction criteria and rules for each pool.", + category: "pools", + }, +]; + +const categories = [ + { id: "all", name: "All Questions", icon: HelpCircle }, + { id: "general", name: "General", icon: BookOpen }, + { id: "pools", name: "Prediction Pools", icon: TrendingUp }, + { id: "rewards", name: "Rewards & Earnings", icon: TrendingUp }, + { id: "wallet", name: "Wallet & Payments", icon: Wallet }, + { id: "validation", name: "Validation", icon: Shield }, +]; + +export default function HelpCenter() { + const [selectedCategory, setSelectedCategory] = useState("all"); + const [searchQuery, setSearchQuery] = useState(""); + const [openItems, setOpenItems] = useState([]); + + const toggleItem = (index: number) => { + setOpenItems((prev) => + prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index] + ); + }; + + const filteredFAQs = faqData.filter((faq) => { + const matchesCategory = + selectedCategory === "all" || faq.category === selectedCategory; + const matchesSearch = + faq.question.toLowerCase().includes(searchQuery.toLowerCase()) || + faq.answer.toLowerCase().includes(searchQuery.toLowerCase()); + return matchesCategory && matchesSearch; + }); + + return ( +
+ {/* Back Button */} +
+ + + Back to Home + +
+ + {/* Hero Section */} +
+
+
+

+ Help Center +

+

+ Find answers to your questions about PrediFi, prediction pools, and + how to maximize your earnings. +

+ + {/* Search Bar */} +
+ + setSearchQuery(e.target.value)} + className="w-full pl-10 pr-4 py-3 bg-[#00262A] border border-slate-700 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:border-cyan-400 transition-colors" + /> +
+
+
+ + {/* Main Content */} +
+ {/* Category Filter */} +
+

+ Browse by Category +

+
+ {categories.map((category) => { + const Icon = category.icon; + return ( + + ); + })} +
+
+ + {/* FAQ Section */} +
+

+ Frequently Asked Questions + {selectedCategory !== "all" && ( + + ({filteredFAQs.length} questions) + + )} +

+ + {filteredFAQs.length === 0 ? ( +
+ +

+ No questions found matching your search. +

+ +
+ ) : ( +
+ {filteredFAQs.map((faq, index) => ( +
+ + {openItems.includes(index) && ( +
+

+ {faq.answer} +

+
+ )} +
+ ))} +
+ )} +
+ + {/* Quick Actions */} +
+
+

+ + Still Need Help? +

+

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

+ +
+ +
+

+ + Getting Started +

+

+ New to PrediFi? Start your prediction journey with these + resources. +

+
+ + + Explore prediction pools + + + + Create your first pool + +
+
+
+ + {/* Stats Section */} +
+

+ Platform Statistics +

+
+
+
99%
+
Prediction Accuracy
+
+
+
$44k+
+
Amount Predicted
+
+
+
5k+
+
+ Active Prediction Pools +
+
+
+
2k+
+
Total Coin Flips
+
+
+
+
+
+ ); }