Skip to content

Commit 17900c9

Browse files
parthratra11parthratra11
committed
FAQs + learn-more made responsive
1 parent 273f103 commit 17900c9

File tree

4 files changed

+121
-92
lines changed

4 files changed

+121
-92
lines changed

‎app/FAQ/component/contact-section.tsx

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
1-
import { Button } from "@/components/ui/button"
2-
import { Mail, Phone } from 'lucide-react'
1+
import { Button } from "@/components/ui/button";
2+
import { Mail, Phone } from "lucide-react";
33

44
export default function ContactSection() {
55
return (
66
<div className="mt-16 bg-white rounded-lg p-8 text-center">
7-
<h2 className="text-2xl font-bold text-purple-800 mb-4">Still have questions?</h2>
8-
<p className="text-purple-600 mb-6">Our support team is here to help you</p>
9-
<div className="flex justify-center space-x-4">
7+
<h2 className="text-2xl font-bold text-purple-800 mb-4">
8+
Still have questions?
9+
</h2>
10+
<p className="text-purple-600 mb-6">
11+
Our support team is here to help you
12+
</p>
13+
<div className="flex justify-center space-x-4 flex-row">
14+
{/* Changed the alignment of buttons for small width devices */}
1015
<Button
11-
variant="outline"
12-
className="flex items-center space-x-2 bg-white hover:bg-purple-300 text-black hover:text-black"
16+
variant="outline"
17+
className="flex items-center space-x-2 bg-white hover:bg-purple-300 text-black hover:text-black"
1318
>
14-
<Mail size={20} />
15-
<span>Email Us</span>
19+
<Mail size={20} />
20+
<span>Email Us</span>
1621
</Button>
1722
<Button
18-
variant="outline"
19-
className="flex items-center space-x-2 bg-white hover:bg-purple-300 text-black hover:text-black"
23+
variant="outline"
24+
className="flex items-center space-x-2 bg-white hover:bg-purple-300 text-black hover:text-black"
2025
>
21-
<Phone size={20} />
22-
<span>Call Us</span>
26+
<Phone size={20} />
27+
<span>Call Us</span>
2328
</Button>
2429
</div>
2530
</div>
26-
)
31+
);
2732
}
28-

‎app/FAQ/component/faq-component.tsx

Lines changed: 58 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,60 @@
1-
'use client'
1+
"use client";
22

3-
import { useState } from 'react'
4-
import { Input } from "@/components/ui/input"
3+
import { useState } from "react";
4+
import { Input } from "@/components/ui/input";
55
import {
66
Accordion,
77
AccordionContent,
88
AccordionItem,
99
AccordionTrigger,
10-
} from "@/components/ui/accordion"
11-
import { Search } from 'lucide-react'
10+
} from "@/components/ui/accordion";
11+
import { Search } from "lucide-react";
1212

1313
const faqs = [
14-
{
15-
question: "What is Leetcode Journal, and how can it help me?",
16-
answer: "Leetcode Journal is a tool designed to help developers track, organize, and review their Leetcode solutions. It provides an intuitive interface to save solutions, categorize problems, monitor progress, and analyze performance. It's great for personal learning and showcasing problem-solving skills."
17-
},
18-
{
19-
question: "Can I import my existing Leetcode solutions into the platform?",
20-
answer: "Yes, Leetcode Journal supports solution imports. You can upload your solutions as files or manually enter them to categorize and analyze them within the platform."
21-
},
22-
{
23-
question: "How does the progress monitoring feature work?",
24-
answer: "The progress monitoring feature provides detailed statistics on your problem-solving journey, including the number of problems solved by difficulty, topic, and monthly trends. It also shows your streaks and acceptance rates to keep you motivated."
25-
},
26-
{
27-
question: "Is my data secure on Leetcode Journal?",
28-
answer: "We take data security seriously. All your solutions and progress data are encrypted and securely stored on our servers. You have complete control over your data, and it is never shared without your consent."
29-
},
30-
{
31-
question: "Can I share my Leetcode Journal with others?",
32-
answer: "Yes, you can create a shareable portfolio of your solutions to showcase your problem-solving skills to potential employers or peers. You can customize what information is shared."
33-
},
34-
{
35-
question: "Does Leetcode Journal support team collaboration?",
36-
answer: "Currently, Leetcode Journal is focused on individual users. However, we are exploring features for team collaboration and knowledge sharing in future updates."
37-
}
38-
]
14+
{
15+
question: "What is Leetcode Journal, and how can it help me?",
16+
answer:
17+
"Leetcode Journal is a tool designed to help developers track, organize, and review their Leetcode solutions. It provides an intuitive interface to save solutions, categorize problems, monitor progress, and analyze performance. It's great for personal learning and showcasing problem-solving skills.",
18+
},
19+
{
20+
question: "Can I import my existing Leetcode solutions into the platform?",
21+
answer:
22+
"Yes, Leetcode Journal supports solution imports. You can upload your solutions as files or manually enter them to categorize and analyze them within the platform.",
23+
},
24+
{
25+
question: "How does the progress monitoring feature work?",
26+
answer:
27+
"The progress monitoring feature provides detailed statistics on your problem-solving journey, including the number of problems solved by difficulty, topic, and monthly trends. It also shows your streaks and acceptance rates to keep you motivated.",
28+
},
29+
{
30+
question: "Is my data secure on Leetcode Journal?",
31+
answer:
32+
"We take data security seriously. All your solutions and progress data are encrypted and securely stored on our servers. You have complete control over your data, and it is never shared without your consent.",
33+
},
34+
{
35+
question: "Can I share my Leetcode Journal with others?",
36+
answer:
37+
"Yes, you can create a shareable portfolio of your solutions to showcase your problem-solving skills to potential employers or peers. You can customize what information is shared.",
38+
},
39+
{
40+
question: "Does Leetcode Journal support team collaboration?",
41+
answer:
42+
"Currently, Leetcode Journal is focused on individual users. However, we are exploring features for team collaboration and knowledge sharing in future updates.",
43+
},
44+
];
3945

4046
export default function FAQComponent() {
41-
const [searchTerm, setSearchTerm] = useState('')
47+
const [searchTerm, setSearchTerm] = useState("");
4248

43-
const filteredFaqs = faqs.filter(faq =>
44-
faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
45-
faq.answer.toLowerCase().includes(searchTerm.toLowerCase())
46-
)
49+
const filteredFaqs = faqs.filter(
50+
(faq) =>
51+
faq.question.toLowerCase().includes(searchTerm.toLowerCase()) ||
52+
faq.answer.toLowerCase().includes(searchTerm.toLowerCase())
53+
);
4754

4855
return (
49-
<div className="max-w-3xl mx-auto">
56+
<div className="max-w-3xl mx-auto px-4 md:px-0">
57+
{/* Added x-padding for small width devices */}
5058
<div className="mb-8 relative">
5159
<Input
5260
type="text"
@@ -55,32 +63,37 @@ export default function FAQComponent() {
5563
onChange={(e) => setSearchTerm(e.target.value)}
5664
className="w-full pl-10 pr-4 py-2 rounded-full border-2 border-purple-300 focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50 transition duration-300"
5765
/>
58-
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-400" size={20} />
66+
<Search
67+
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-400"
68+
size={20}
69+
/>
5970
</div>
6071
<Accordion type="single" collapsible className="w-full space-y-4">
6172
{filteredFaqs.map((faq, index) => (
62-
<AccordionItem
63-
value={`item-${index}`}
73+
<AccordionItem
74+
value={`item-${index}`}
6475
key={index}
6576
className="border-2 border-purple-400 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"
6677
>
6778
<AccordionTrigger className="text-left px-6 py-4 light:bg-purple-200 dark:bg-white hover:bg-purple-50 transition duration-300">
68-
<span className="text-lg font-medium text-purple-800">{faq.question}</span>
79+
<span className="text-lg font-medium text-purple-800">
80+
{faq.question}
81+
</span>
6982
</AccordionTrigger>
7083
<AccordionContent className="px-6 py-4 bg-purple-200">
71-
<p className="text-purple-700 text-left">
72-
{faq.answer}
73-
</p>
84+
<p className="text-purple-700 text-left">{faq.answer}</p>
7485
</AccordionContent>
7586
</AccordionItem>
7687
))}
7788
</Accordion>
7889
{filteredFaqs.length === 0 && (
7990
<div className="text-center text-purple-600 mt-8 p-6 bg-purple-100 rounded-lg">
80-
<p className="text-xl font-semibold mb-2">No matching questions found.</p>
91+
<p className="text-xl font-semibold mb-2">
92+
No matching questions found.
93+
</p>
8194
<p>Try adjusting your search terms or browse all FAQs above.</p>
8295
</div>
8396
)}
8497
</div>
85-
)
98+
);
8699
}

‎app/FAQ/page.tsx

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,35 @@
1-
import { Metadata } from 'next'
2-
import FAQComponent from './component/faq-component'
3-
import ContactSection from './component/contact-section'
4-
import Navbar1 from '@/components/navbar'
5-
import Footer from '@/components/footer'
1+
import { Metadata } from "next";
2+
import FAQComponent from "./component/faq-component";
3+
import ContactSection from "./component/contact-section";
4+
import Navbar1 from "@/components/navbar";
5+
import Footer from "@/components/footer";
66

77
export const metadata: Metadata = {
8-
title: 'FAQ - Your Company Name',
9-
description: 'Frequently Asked Questions about our products and services',
10-
}
8+
title: "FAQ - Your Company Name",
9+
description: "Frequently Asked Questions about our products and services",
10+
};
1111

1212
export default function FAQPage() {
1313
return (
1414
<div className="min-h-screen space-y-12">
1515
<Navbar1 />
1616
<div className="text-center mb-12">
1717
<div className="text-center mb-12">
18-
<h1 className="text-4xl font-bold mb-4 text-purple-500" >Frequently Asked Questions</h1>
19-
<p className="text-xl text-purple-600">Find answers to common questions about our products and services</p>
18+
<h1 className="text-4xl font-bold mb-4 text-purple-500">
19+
Frequently Asked Questions
20+
</h1>
21+
<p className="text-xl text-purple-600 px-4">
22+
{/* Added x-padding */}
23+
Find answers to common questions about our products and services
24+
</p>
2025
</div>
2126
<FAQComponent />
22-
<div className="rounded-lg text-center w-[50%] mx-auto">
27+
<div className="rounded-lg text-center w-[100%] px-4 md:w-[60%] md:px-0 mx-auto">
28+
{/* Changed the width for small devices */}
2329
<ContactSection />
2430
</div>
2531
</div>
2632
<Footer />
2733
</div>
28-
)
34+
);
2935
}
30-

‎app/learn-more/page.tsx

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
'use client'
1+
"use client";
22

3-
import Link from 'next/link'
4-
import { motion } from 'framer-motion'
5-
import { TabContainer } from './components/TabContainer'
6-
import Navbar1 from '@/components/navbar'
7-
import Footer from '@/components/footer'
8-
import ShinyButton from '@/components/ui/shiny-button'
3+
import Link from "next/link";
4+
import { motion } from "framer-motion";
5+
import { TabContainer } from "./components/TabContainer";
6+
import Navbar1 from "@/components/navbar";
7+
import Footer from "@/components/footer";
8+
import ShinyButton from "@/components/ui/shiny-button";
99

1010
export default function LearnMorePage() {
1111
return (
1212
<div className="">
1313
<Navbar1 />
1414
<div className="min-h-screen bg-grey-500 bg-texture">
15-
<div className="container mx-auto px-32 py-16">
16-
<motion.h1
15+
<div className="container mx-auto px-4 md:px-32 pb-16 pt-8 md:pt-16">
16+
{/* Changed the x-padding for small devices + reduced y-padding-top for small devices */}
17+
<motion.h1
1718
className="text-5xl font-bold text-center mb-8 text-white-800 dark:text-grey-300"
1819
initial={{ y: -20, opacity: 0 }}
1920
animate={{ y: 0, opacity: 1 }}
@@ -24,25 +25,31 @@ export default function LearnMorePage() {
2425

2526
<TabContainer />
2627

27-
<motion.div
28+
<motion.div
2829
className="text-center bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-lg p-8 shadow-lg mt-16"
2930
initial={{ y: 20, opacity: 0 }}
3031
animate={{ y: 0, opacity: 1 }}
3132
transition={{ delay: 0.4, duration: 0.5 }}
3233
>
33-
<h2 className="text-3xl font-bold mb-4 text-grey-800 dark:text-grey-300">Want to Contribute ?</h2>
34-
<p className="text-xl mb-8 text-grey-700 dark:text-grey-200">Join hundreds of developers who have contributed to making LeetCode Journal better for everyone.</p>
34+
<h2 className="text-3xl font-bold mb-4 text-grey-800 dark:text-grey-300">
35+
Want to Contribute ?
36+
</h2>
37+
<p className="text-xl mb-8 text-grey-700 dark:text-grey-200">
38+
Join hundreds of developers who have contributed to making
39+
LeetCode Journal better for everyone.
40+
</p>
3541
<ShinyButton>
3642
<Link
37-
href='https://github.com/yashksaini-coder/Leetcode-Journal'
38-
target='_blank'
39-
>Contribute Now</Link>
40-
</ShinyButton>
43+
href="https://github.com/yashksaini-coder/Leetcode-Journal"
44+
target="_blank"
45+
>
46+
Contribute Now
47+
</Link>
48+
</ShinyButton>
4149
</motion.div>
4250
</div>
4351
</div>
44-
<Footer/>
52+
<Footer />
4553
</div>
46-
)
54+
);
4755
}
48-

0 commit comments

Comments
 (0)