Skip to content

Commit

Permalink
Merge pull request #353 from Sumanbhadra/feat/344-help-page
Browse files Browse the repository at this point in the history
Created help page with FAQs
  • Loading branch information
RamakrushnaBiswal authored Oct 22, 2024
2 parents 23a9149 + 6fae5f5 commit 6b26f00
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 2 deletions.
116 changes: 116 additions & 0 deletions frontend/src/components/Pages/HelpAndSupport.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import React, { useState } from 'react';
import { MdKeyboardArrowDown } from 'react-icons/md';
import { IoMdCall, IoMdMail } from 'react-icons/io';

export default function HelpAndSupport() {
const FAqs = [
{
question: 'How to create an account?',
answer:
"To create an account, click on the 'Sign Up' button on the top right corner of the page. Fill in your details and click on 'Create Account'.",
},
{
question: 'How to reset password?',
answer:
"To reset your password, click on 'Forgot Password' on the login page. Enter your email address and follow the instructions sent to your email.",
},
{
question: 'What is Sip & Play?',
answer:
"Sip & Play is a board game cafe in Park Slope, Brooklyn. It's a place where you can come with friends and family to play board games, enjoy coffee, boba, sandwiches, and snacks.",
},
{
question: 'How does it work?',
answer:
"You can come in with your friends and family to play any board game from our library of 300+ games. There's no cover charge, just pay for your food and drinks.",
},
{
question: 'What kind of games do you have?',
answer:
'We have a wide variety of board games, including classics like Monopoly and Scrabble, as well as newer and more unique games.',
},
{
question: 'Can I bring my own food and drinks?',
answer:
'No, we do not allow outside food or drinks. We have a full menu of food and drinks available for purchase.',
},
{
question: 'Is there parking available?',
answer:
' There is limited street parking available near the cafe. You may also want to consider using public transportation.',
},
{
question: 'Is there a cover charge?',
answer:
'No, there is no cover charge. Just pay for your food and drinks.',
},
];

const [activeFAQ, setActiveFAQ] = useState(null);

const handleFAQClick = (index) => {
if (activeFAQ === index) {
setActiveFAQ(null);
} else {
setActiveFAQ(index);
}
};

return (
<>
<section className="w-full pt-10 md:pt-20 lg:pt-28">
<div className="container mx-auto space-y-10 xl:space-y-16">
<div className="flex flex-col items-center space-y-4 text-center">
<div className="space-y-2">
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl">
Lost? Let's find your way.
</h1>
<p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
Explore our FAQs, tutorials, and user guides to learn how to
make the most of our platform. If you can't find the answer
you're looking for, don't hesitate to contact our friendly
support team. We're always happy to help.
</p>
</div>
</div>
</div>
</section>

{/* FAQ section */}

<section className="pb-10">
<h1 className="my-4 text-3xl font-bold tracking-tighter text-center">
{' '}
Frequenty Asked Questions
</h1>
{FAqs.map((faq, index) => (
<div
key={index}
className="container mx-auto space-y-4 md:space-y-6 lg:space-y-8 mb-3"
>
<div className="flex flex-col items-center space-y-2 sm:w-full md:w-3/4 m-auto">
<div
className="flex items-center justify-between w-full rounded-lg pr-4 sm:text-lg md:text-xl lg:text-2xl bg-[#FDF3C7]"
onClick={() => {
handleFAQClick(index);
}}
>
<h1 className="font-bold tracking-tighter p-3">
{faq.question}
</h1>
<MdKeyboardArrowDown
className={`m1 ease-in-out duration-300 ${activeFAQ == index ? `rotate-180 ` : ``}`}
/>
</div>
<p
className={` mx-auto text-muted-foreground md:text-lg w-full p-2 ${activeFAQ == index ? `block` : `hidden`} `}
>
{faq.answer}
</p>
</div>
</div>
))}
</section>
</>
);
}
9 changes: 7 additions & 2 deletions frontend/src/components/Shared/footer/Content.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,9 @@ const Section2 = () => {
</div>
)}
<div
className={`flex ${isWide ? 'justify-between items-end' : 'flex-col items-center'
} text-white`}
className={`flex ${
isWide ? 'justify-between items-end' : 'flex-col items-center'
} text-white`}
>
<h1
className={`${isWide ? 'text-[9vw]' : 'text-[12vw]'} leading-[0.8]`}
Expand Down Expand Up @@ -79,6 +80,10 @@ const Nav = () => {
name: 'About',
link: '/about',
},
{
name: 'Help and Support',
link: '/help',
},
];
const socialLink = [
{
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/router/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import Admin from '../components/Pages/Admin';
import VerifyOtp from '../components/Pages/VerifyOtp';
import EmailVerify from '../components/Pages/EmailVerify';
import Membership from '../components/Membership';
import HelpAndSupport from '../components/Pages/HelpAndSupport';
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<App />}>
Expand All @@ -39,6 +40,7 @@ const router = createBrowserRouter(
<Route path="/verifyotp/:id" element={<VerifyOtp />} />
<Route path="/email-verify" element={<EmailVerify />} />
<Route path="/membership" element={<Membership />} />
<Route path="/help" element={<HelpAndSupport />} />

</Route>
)
Expand Down

0 comments on commit 6b26f00

Please sign in to comment.