-
Notifications
You must be signed in to change notification settings - Fork 90
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #301 from AswaniBolisetti/enhance-faq
Enhanced FAQ Page #301
- Loading branch information
Showing
4 changed files
with
171 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import React, { useState } from 'react'; | ||
| import '../css/Faq.css'; | ||
|
|
||
| const FAQ = () => { | ||
| const [openIndex, setOpenIndex] = useState(null); | ||
| const [visibleCount, setVisibleCount] = useState(5); // Initially show 5 FAQs | ||
|
|
||
| const toggleAnswer = (index) => { | ||
| setOpenIndex(openIndex === index ? null : index); | ||
| }; | ||
|
|
||
| const loadMoreFAQs = () => { | ||
| setVisibleCount((prevCount) => prevCount + 2); // Load 2 more FAQs | ||
| }; | ||
|
|
||
| const faqs = [ | ||
| { | ||
| question: "What is BitBox?", | ||
| answer: "BitBox is a user-friendly platform that simplifies version control and collaboration for developers.", | ||
| }, | ||
| { | ||
| question: "How does BitBox enhance collaboration?", | ||
| answer: "BitBox offers intuitive tools that enable both solo programmers and large teams to manage projects efficiently.", | ||
| }, | ||
| { | ||
| question: "How do I get started with BitBox?", | ||
| answer: "You can sign up for an account on BitBox and start managing your projects right away.", | ||
| }, | ||
| { | ||
| question: "Is BitBox compatible with modern development workflows?", | ||
| answer: "Yes, BitBox seamlessly integrates with modern development workflows, providing fast and reliable performance.", | ||
| }, | ||
| { | ||
| question: "How can I contact support if I need help?", | ||
| answer: "You can reach out to support through the 'Contact Us' page or by emailing [email protected].", | ||
| }, | ||
| { | ||
| question: "What programming languages does BitBox support?", | ||
| answer: "BitBox supports a wide range of programming languages including Python, Java, JavaScript, and more.", | ||
| }, | ||
| { | ||
| question: "Are there any tutorials available for BitBox?", | ||
| answer: "Yes, we offer comprehensive tutorials and documentation to help users get the most out of BitBox.", | ||
| }, | ||
| { | ||
| question: "Can I use BitBox for open-source projects?", | ||
| answer: "Absolutely! BitBox is designed to support both open-source and private projects.", | ||
| }, | ||
| { | ||
| question: "What are the system requirements for using BitBox?", | ||
| answer: "BitBox is a web-based platform, so you only need a modern web browser and an internet connection.", | ||
| }, | ||
| { | ||
| question: "Is there a mobile app for BitBox?", | ||
| answer: "Currently, BitBox does not have a dedicated mobile app, but the platform is mobile-friendly and accessible via web browsers.", | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <div className="faq-container"> | ||
| <h2>Frequently Asked Questions</h2> | ||
| <div className="faq-list"> | ||
| {faqs.slice(0, visibleCount).map((faq, index) => ( | ||
| <div key={index} className="faq-card"> | ||
| <h4 | ||
| className="faq-question" | ||
| onClick={() => toggleAnswer(index)} | ||
| aria-expanded={openIndex === index} | ||
| aria-controls={`faq-answer-${index}`} | ||
| tabIndex="0" | ||
| > | ||
| {faq.question} | ||
| </h4> | ||
| {openIndex === index && ( | ||
| <p id={`faq-answer-${index}`} className="faq-answer"> | ||
| {faq.answer} | ||
| </p> | ||
| )} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| {visibleCount < faqs.length && ( | ||
| <button className="view-more" onClick={loadMoreFAQs}> | ||
| View More | ||
| </button> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FAQ; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| .faq-container { | ||
| max-width: 700px; | ||
| margin: 40px auto; | ||
| padding: 30px; | ||
| background-color: #ffffff; | ||
| border-radius: 12px; | ||
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| h2 { | ||
| margin-top: 60px; | ||
| text-align: center; | ||
| color: #333; | ||
| margin-bottom: 30px; | ||
| font-size: 2rem; | ||
| font-family: 'Arial', sans-serif; | ||
| } | ||
|
|
||
| .faq-list { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 15px; | ||
| } | ||
|
|
||
| .faq-card { | ||
| background-color: #f7f7f7; | ||
| border-radius: 8px; | ||
| padding: 15px 20px; | ||
| transition: background-color 0.3s ease, transform 0.3s ease; | ||
| border-left: 4px solid #01356d; | ||
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | ||
| } | ||
| .view-more { | ||
| margin-top: 1rem; | ||
| padding: 10px 20px; | ||
| background-color: #003064; /* Bootstrap primary color */ | ||
| color: white; | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s; | ||
|
|
||
| } | ||
|
|
||
| .view-more:hover { | ||
| background-color: #054486; /* Darker shade on hover */ | ||
| } | ||
|
|
||
| .faq-card:hover { | ||
| background-color: #f5faff; | ||
| transform: translateY(-3px); | ||
| } | ||
|
|
||
| .faq-question { | ||
| cursor: pointer; | ||
| font-size: 1.1em; | ||
| color: #003a77; | ||
| margin: 0; | ||
| font-family: 'Arial', sans-serif; | ||
| } | ||
|
|
||
| .faq-question:hover { | ||
| color: #0056b3; | ||
| } | ||
|
|
||
| .faq-answer { | ||
| margin-top: 10px; | ||
| font-size: 0.95em; | ||
| color: #555; | ||
| line-height: 1.6; | ||
| } | ||
|
|