From 149e010eecdbf32c5db2fd138feba55e25f893e9 Mon Sep 17 00:00:00 2001 From: Ananya Gupta <145869907+ananyag309@users.noreply.github.com> Date: Tue, 29 Oct 2024 23:47:42 +0530 Subject: [PATCH 1/3] Update App.js --- src/App.js | 99 +++++++++--------------------------------------------- 1 file changed, 16 insertions(+), 83 deletions(-) diff --git a/src/App.js b/src/App.js index b6dd0f9..9bc7dc1 100644 --- a/src/App.js +++ b/src/App.js @@ -25,12 +25,12 @@ import { ThemeProvider } from "./context/ThemeContext"; import { Toaster } from "react-hot-toast"; import ProtectedRoute from "./components/ProtectedRoute"; import NotFoundPage from "./components/Error404"; +import ScrollButton from "./components/ScrollButton"; +import FAQ from "./components/FAQ"; -import ScrollButton from "./components/ScrollButton"; // Import the ScrollButton - +// Background Wrapper for applying different backgrounds function BackgroundWrapper({ children }) { const location = useLocation(); - return (
@@ -55,90 +56,22 @@ export default function App() { } /> } /> } /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> + } /> + } /> + } /> + } /> + } /> } /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> + } /> + } /> + } /> + } /> + } /> + } /> } /> + From b6e650223fa56a2e776cbfb5291e20c5d809f789 Mon Sep 17 00:00:00 2001 From: Ananya Gupta <145869907+ananyag309@users.noreply.github.com> Date: Tue, 29 Oct 2024 23:48:08 +0530 Subject: [PATCH 2/3] Update tailwind.css --- src/css/tailwind.css | 89 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 88 insertions(+), 1 deletion(-) diff --git a/src/css/tailwind.css b/src/css/tailwind.css index ca39a0d..a1ecf10 100644 --- a/src/css/tailwind.css +++ b/src/css/tailwind.css @@ -2,6 +2,50 @@ @tailwind components; @tailwind utilities; +.container_1 { + max-width: 800px; + margin: 0 auto; +} + +.accordion__wrapper { + padding: 1rem; +} + +.accordion__title { + font-size: 2rem; + text-align: center; + margin-bottom: 1rem; +} + +.accordion { + border: 1px solid #ddd; + border-radius: 5px; + margin-bottom: 10px; + overflow: hidden; + transition: height 0.3s ease; +} + +.accordion__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + background-color: #f9f9f9; + cursor: pointer; +} + +.accordion__content { + padding: 1rem; + height: 0; + overflow: hidden; + transition: height 0.3s ease; +} + +.accordion__icon i { + transition: transform 0.3s ease; +} + + svg.scan-region-highlight-svg { stroke: #3b82f6 !important; animation: none !important; @@ -65,4 +109,47 @@ body { background-color: white !important; color: black !important; box-shadow: 0 0 0px 1000px white inset !important; - } \ No newline at end of file + } + +.faq-item { + background-color: rgba(59, 130, 246, 0.8); /* Semi-transparent blue background */ + border-radius: 5px; /* Rounded corners */ + padding: 1rem; /* Padding inside the item */ + margin: 0 auto; /* Center the item */ + margin-bottom: 1rem; /* Space between items */ + transition: background-color 0.3s; /* Smooth transition */ + max-width: 600px; /* Set a max width for the items */ +} + +.faq-item:hover { + background-color: rgba(37, 99, 235, 0.8); /* Darker blue on hover */ +} + +.faq-item h3 { + cursor: pointer; /* Pointer cursor for questions */ + display: flex; /* Flexbox for alignment */ + justify-content: center; /* Center question text */ + align-items: center; /* Center vertically */ +} + +.faq-item p { + margin: 0; /* Remove default margin */ + padding-top: 0.5rem; /* Space above the answer */ + text-align: center; /* Center align answer text */ +} + +/* FAQ Section Styles */ +.faq-container { + background: transparent; /* Make the background transparent to match the page */ + color: white; /* Text color */ + padding: 2rem; /* Padding around the FAQ section */ + border-radius: 8px; /* Rounded corners */ + margin-top: 2rem; /* Space above the FAQ section */ + text-align: center; /* Center align text */ +} + +.faq-container h2 { + font-size: 2rem; /* Title size */ + font-weight: bold; /* Title weight */ + margin-bottom: 1rem; /* Space below the title */ +} From 9796bc4a50aaa1f69c1bde8baa85f5cae7b4ecb0 Mon Sep 17 00:00:00 2001 From: Ananya Gupta <145869907+ananyag309@users.noreply.github.com> Date: Tue, 29 Oct 2024 23:48:51 +0530 Subject: [PATCH 3/3] Add files via upload --- src/components/FAQ.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/components/FAQ.js diff --git a/src/components/FAQ.js b/src/components/FAQ.js new file mode 100644 index 0000000..78c4c49 --- /dev/null +++ b/src/components/FAQ.js @@ -0,0 +1,31 @@ +// src/components/FAQ.js +import React, { useState } from "react"; + +function FAQ() { + const [openIndex, setOpenIndex] = useState(null); // State to track which FAQ is open + + const faqs = [ + { question: "What is this app about?", answer: "This app provides QR code generation and scanning features." }, + { question: "How do I generate a QR code?", answer: "Go to the QR Code page after logging in, and follow the instructions." }, + { question: "Can I bulk generate QR codes?", answer: "Yes, our app supports bulk QR code generation." }, + { question: "How do I switch between dark and light themes?", answer: "You can easily switch between dark and light themes by clicking the theme toggle button." }, + ]; + + const toggleFAQ = (index) => { + setOpenIndex(openIndex === index ? null : index); // Toggle the open index + }; + + return ( +
+

Frequently Asked Questions

+ {faqs.map((faq, index) => ( +
toggleFAQ(index)}> +

{faq.question} {openIndex === index ? "-" : "+"}

+ {openIndex === index &&

{faq.answer}

} {/* Show answer if open */} +
+ ))} +
+ ); +} + +export default FAQ;