Skip to content

Commit e1d3e91

Browse files
HarshYadav152HarshYadav152
authored
Merge pull request #229 from DevAbhay07/feat/faq-page
feat: add FAQ page with accordion and navbar/footer links
2 parents 2910cf4 + 14a171e commit e1d3e91

3 files changed

Lines changed: 474 additions & 220 deletions

File tree

‎savebook/app/faq/page.js‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import { motion, AnimatePresence } from "framer-motion";
5+
import { ChevronDown, HelpCircle } from "lucide-react";
6+
7+
const faqs = [
8+
{
9+
question: "What is SaveBook?",
10+
answer:
11+
"SaveBook is a high-performance, modern web application designed for note-taking and knowledge management. It provides a fast, intuitive, and clutter-free environment for organizing your digital life.",
12+
},
13+
{
14+
question: "Do I need an account to use SaveBook?",
15+
answer:
16+
"You can explore SaveBook without an account, but creating a free account lets you securely save your notes to the cloud and access them from any device.",
17+
},
18+
{
19+
question: "How do I create a new note?",
20+
answer:
21+
"Once logged in, navigate to the Notes section and click the 'Add Note' button. You can then write, format, and save your note instantly.",
22+
},
23+
{
24+
question: "Is my data saved automatically?",
25+
answer:
26+
"Yes! SaveBook auto-saves your notes as you type, so you never have to worry about losing your work.",
27+
},
28+
{
29+
question: "Can I access my notes on mobile?",
30+
answer:
31+
"Absolutely. SaveBook is fully responsive and works seamlessly across mobile, tablet, and desktop devices.",
32+
},
33+
{
34+
question: "How do I organize my notes?",
35+
answer:
36+
"You can organize notes using tags and categories available in your notes dashboard. This makes it easy to find any note quickly.",
37+
},
38+
{
39+
question: "Is SaveBook free to use?",
40+
answer:
41+
"Yes, SaveBook is completely free. Create an account and start managing your notes at no cost.",
42+
},
43+
{
44+
question: "How do I report a bug or suggest a feature?",
45+
answer:
46+
"You can open an issue on our GitHub repository at github.com/HarshYadav152/SaveBook. We welcome all feedback and contributions!",
47+
},
48+
];
49+
50+
function FAQItem({ faq, index }) {
51+
const [isOpen, setIsOpen] = useState(false);
52+
53+
return (
54+
<motion.div
55+
initial={{ opacity: 0, y: 20 }}
56+
animate={{ opacity: 1, y: 0 }}
57+
transition={{ duration: 0.4, delay: index * 0.07 }}
58+
className="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden"
59+
>
60+
<button
61+
onClick={() => setIsOpen(!isOpen)}
62+
className="w-full flex items-center justify-between px-6 py-5 text-left bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all"
63+
>
64+
<span className="font-semibold text-gray-900 dark:text-white pr-4">
65+
{faq.question}
66+
</span>
67+
<motion.div
68+
animate={{ rotate: isOpen ? 180 : 0 }}
69+
transition={{ duration: 0.3 }}
70+
className="flex-shrink-0"
71+
>
72+
<ChevronDown className="w-5 h-5 text-blue-500" />
73+
</motion.div>
74+
</button>
75+
76+
<AnimatePresence>
77+
{isOpen && (
78+
<motion.div
79+
initial={{ height: 0, opacity: 0 }}
80+
animate={{ height: "auto", opacity: 1 }}
81+
exit={{ height: 0, opacity: 0 }}
82+
transition={{ duration: 0.3 }}
83+
>
84+
<div className="px-6 py-4 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700">
85+
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
86+
{faq.answer}
87+
</p>
88+
</div>
89+
</motion.div>
90+
)}
91+
</AnimatePresence>
92+
</motion.div>
93+
);
94+
}
95+
96+
export default function FAQPage() {
97+
return (
98+
<div className="min-h-screen">
99+
<div className="container mx-auto max-w-3xl px-4 py-16">
100+
{/* Header */}
101+
<motion.div
102+
initial={{ opacity: 0, y: 20 }}
103+
animate={{ opacity: 1, y: 0 }}
104+
transition={{ duration: 0.6 }}
105+
className="text-center mb-12"
106+
>
107+
<div className="flex justify-center mb-4">
108+
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-full">
109+
<HelpCircle className="w-8 h-8 text-blue-500" />
110+
</div>
111+
</div>
112+
<h1 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
113+
Frequently Asked Questions
114+
</h1>
115+
<p className="text-gray-600 dark:text-gray-400 text-lg">
116+
Everything you need to know about SaveBook
117+
</p>
118+
</motion.div>
119+
120+
{/* FAQ Items */}
121+
<div className="space-y-3">
122+
{faqs.map((faq, index) => (
123+
<FAQItem key={index} faq={faq} index={index} />
124+
))}
125+
</div>
126+
127+
{/* Footer CTA */}
128+
<motion.div
129+
initial={{ opacity: 0, y: 20 }}
130+
animate={{ opacity: 1, y: 0 }}
131+
transition={{ duration: 0.6, delay: 0.5 }}
132+
className="mt-12 p-6 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl text-center"
133+
>
134+
<p className="text-blue-700 dark:text-blue-400 font-medium mb-1">
135+
Still have questions?
136+
</p>
137+
<p className="text-blue-600 dark:text-blue-500 text-sm">
138+
Open an issue on our{" "}
139+
<a
140+
href="https://github.com/HarshYadav152/SaveBook/issues"
141+
target="_blank"
142+
rel="noopener noreferrer"
143+
className="underline hover:text-blue-800 dark:hover:text-blue-300 transition-colors"
144+
>
145+
GitHub repository
146+
</a>
147+
. We're happy to help!
148+
</p>
149+
</motion.div>
150+
</div>
151+
</div>
152+
);
153+
}

0 commit comments

Comments
 (0)