diff --git a/client/app/components/Header/Header.tsx b/client/app/components/Header/Header.tsx index ef15d94..3caa0f3 100644 --- a/client/app/components/Header/Header.tsx +++ b/client/app/components/Header/Header.tsx @@ -10,6 +10,7 @@ import { HomeIcon, XMarkIcon, Bars3Icon, + QuestionMarkCircleIcon, } from "@heroicons/react/24/outline"; import Web3Connect from "../Helper/Web3Connect"; import Image from "next/image"; @@ -18,6 +19,7 @@ const menuItems = [ { name: "Home", href: "/", icon: HomeIcon }, { name: "Create", href: "/create", icon: PlusCircleIcon }, { name: "Profile", href: "/profile", icon: UserIcon }, + { name: "Help", href: "/help", icon: QuestionMarkCircleIcon }, ]; const Header = () => { diff --git a/client/app/globals.css b/client/app/globals.css index c898587..0b3a94c 100644 --- a/client/app/globals.css +++ b/client/app/globals.css @@ -5,7 +5,7 @@ body { background-color: #ffffff; margin: 0; - overflow: hidden; + overflow-y: auto; } html { diff --git a/client/app/help/page.tsx b/client/app/help/page.tsx new file mode 100644 index 0000000..73b0aa2 --- /dev/null +++ b/client/app/help/page.tsx @@ -0,0 +1,325 @@ +"use client"; +import React, { useState } from "react"; +import { motion, AnimatePresence } from "framer-motion"; +import { + ChevronDownIcon, + MagnifyingGlassIcon, + ChatBubbleLeftRightIcon, + EnvelopeIcon, + BookOpenIcon, +} from "@heroicons/react/24/outline"; + +interface FAQ { + question: string; + answer: string; + category: string; +} + +const faqs: FAQ[] = [ + { + category: "Getting Started", + question: "What is Agora Blockchain?", + answer: + "Agora Blockchain is a decentralized voting platform that ensures secure, transparent, and tamper-proof elections using blockchain technology. It supports multiple voting algorithms and provides complete anonymity for voters.", + }, + { + category: "Getting Started", + question: "How do I connect my wallet?", + answer: + "Click the 'Connect Wallet' button in the top-right corner of the page. You'll need a Web3 wallet like MetaMask installed in your browser. Follow the prompts to connect your wallet and you'll be ready to participate in elections.", + }, + { + category: "Getting Started", + question: "Which networks are supported?", + answer: + "Agora Blockchain currently supports Ethereum Sepolia testnet, Polygon Amoy testnet, Avalanche Fuji testnet, and BSC testnet. Make sure your wallet is connected to one of these networks.", + }, + { + category: "Voting", + question: "How do I participate in an election?", + answer: + "First, connect your wallet. Then browse available elections from the home page. Click on an election to view details and cast your vote. Your vote is recorded on the blockchain and cannot be changed once submitted.", + }, + { + category: "Voting", + question: "Can I change my vote after submitting?", + answer: + "No, once your vote is recorded on the blockchain, it becomes immutable. This ensures the integrity of the election process. Please review your choice carefully before submitting.", + }, + { + category: "Voting", + question: "What voting algorithms are supported?", + answer: + "Agora supports multiple voting algorithms including Borda Count, Instant Runoff Voting (IRV), Moore's Voting Algorithm, and Oklahoma Voting System. Each election specifies which algorithm will be used for counting votes.", + }, + { + category: "Creating Elections", + question: "How do I create an election?", + answer: + "Navigate to the 'Create' page from the header menu. Fill in the election details including title, description, candidates, start/end dates, and select your preferred voting algorithm. You'll need to pay a small gas fee to deploy the election smart contract.", + }, + { + category: "Creating Elections", + question: "What are the requirements for creating an election?", + answer: + "You need a connected Web3 wallet with sufficient funds for gas fees, at least 2 candidates, and valid start/end dates. The election duration must be at least 1 hour.", + }, + { + category: "Security & Privacy", + question: "Is my vote anonymous?", + answer: + "Yes! Agora Blockchain uses zero-knowledge proofs (ZK-SNARKs) to ensure complete voter anonymity. Your vote is recorded on the blockchain without revealing your identity.", + }, + { + category: "Security & Privacy", + question: "How secure is the platform?", + answer: + "The platform uses blockchain technology which provides immutability and transparency. All smart contracts are audited and votes are cryptographically secured. The decentralized nature of the platform prevents single points of failure.", + }, + { + category: "Troubleshooting", + question: "My transaction failed. What should I do?", + answer: + "Transaction failures can occur due to insufficient gas fees, network congestion, or wallet configuration issues. Check your wallet balance, ensure you're on the correct network, and try again with higher gas settings.", + }, + { + category: "Troubleshooting", + question: "I can't see my election after creating it", + answer: + "Elections may take a few moments to appear after creation due to blockchain confirmation times. Refresh the page after waiting 30-60 seconds. If the issue persists, check your transaction status on a block explorer.", + }, +]; + +const categories = [ + "All", + "Getting Started", + "Voting", + "Creating Elections", + "Security & Privacy", + "Troubleshooting", +]; + +export default function HelpPage() { + const [searchQuery, setSearchQuery] = useState(""); + const [selectedCategory, setSelectedCategory] = useState("All"); + const [expandedFAQ, setExpandedFAQ] = useState(null); + + // Generate stable ID from question text + const generatePanelId = (question: string): string => { + return `faq-panel-${question.replace(/\s+/g, '-').toLowerCase().replace(/[^a-z0-9-]/g, '')}`; + }; + + const filteredFAQs = faqs.filter((faq) => { + const matchesSearch = + faq.question.toLowerCase().includes(searchQuery.toLowerCase()) || + faq.answer.toLowerCase().includes(searchQuery.toLowerCase()); + const matchesCategory = + selectedCategory === "All" || faq.category === selectedCategory; + return matchesSearch && matchesCategory; + }); + + const toggleFAQ = (id: string) => { + setExpandedFAQ(expandedFAQ === id ? null : id); + }; + + return ( +
+
+ {/* Header Section */} + +

+ Help & Support +

+

+ Find answers to common questions and get the help you need +

+ + + {/* Search Bar */} + +
+ + setSearchQuery(e.target.value)} + className="w-full pl-12 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 transition-colors duration-200" + /> +
+ + + {/* Category Filter */} + + {categories.map((category) => ( + + ))} + + + {/* FAQ Section */} +
+

+ Frequently Asked Questions +

+
+ {filteredFAQs.length > 0 ? ( + filteredFAQs.map((faq, index) => { + const panelId = generatePanelId(faq.question); + return ( + + + + {expandedFAQ === faq.question && ( + +

+ {faq.answer} +

+ + )} + + + ); + }) + ) : ( +
+

+ No FAQs found matching your search. +

+
+ )} +
+
+ + {/* Contact & Support Section */} + +

+ Still Need Help? +

+
+
+
+ +
+

+ Documentation +

+

+ Read our comprehensive guides and tutorials +

+ + View Docs → + +
+ +
+
+ +
+

+ Community +

+

+ Join our community on Discord or Slack +

+ + Join Community → + +
+ +
+
+ +
+

+ Email Support +

+

+ Send us an email and we'll get back to you +

+ + Contact Us → + +
+
+ +
+
+ ); +}