Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added FAQ #270

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added FAQ #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
149e010
Update App.js
ananyag309 Oct 29, 2024
b6e6502
Update tailwind.css
ananyag309 Oct 29, 2024
9796bc4
Add files via upload
ananyag309 Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 16 additions & 83 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div
className={`min-h-screen ${
Expand All @@ -44,6 +44,7 @@ function BackgroundWrapper({ children }) {
);
}

// Main App Component
export default function App() {
return (
<AuthProvider>
Expand All @@ -55,90 +56,22 @@ export default function App() {
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route
path="/dashboard"
element={
<ProtectedRoute>
<DashboardPage />
</ProtectedRoute>
}
/>
<Route
path="/profile"
element={
<ProtectedRoute>
<ProfilePage />
</ProtectedRoute>
}
/>
<Route
path="/qr-code"
element={
<ProtectedRoute>
<QRCodePage />
</ProtectedRoute>
}
/>
<Route
path="/support"
element={
<ProtectedRoute>
<Support />
</ProtectedRoute>
}
/>
<Route
path="/settings"
element={
<ProtectedRoute>
<Settings />
</ProtectedRoute>
}
/>
<Route path="/dashboard" element={<ProtectedRoute><DashboardPage /></ProtectedRoute>} />
<Route path="/profile" element={<ProtectedRoute><ProfilePage /></ProtectedRoute>} />
<Route path="/qr-code" element={<ProtectedRoute><QRCodePage /></ProtectedRoute>} />
<Route path="/support" element={<ProtectedRoute><Support /></ProtectedRoute>} />
<Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
<Route path="/more-info" element={<Moreinfo />} />
<Route
path="/image-qr-code"
element={
<ProtectedRoute>
<ImageQRCodeGenerator />
</ProtectedRoute>
}
/>
<Route
path="/social-media-qr"
element={
<ProtectedRoute>
<SocialMedia />
</ProtectedRoute>
}
/>
<Route
path="/bulk-qr-code"
element={
<ProtectedRoute>
<BulkQRCode />
</ProtectedRoute>
}
/>
<Route
path="/qr-scanner"
element={
<ProtectedRoute>
<QRScanner />
</ProtectedRoute>
}
/>
<Route
path="/pdf-qr-code"
element={
<ProtectedRoute>
<PdfQRCodeGenerator />
</ProtectedRoute>
}
/>
<Route path="/image-qr-code" element={<ProtectedRoute><ImageQRCodeGenerator /></ProtectedRoute>} />
<Route path="/social-media-qr" element={<ProtectedRoute><SocialMedia /></ProtectedRoute>} />
<Route path="/bulk-qr-code" element={<ProtectedRoute><BulkQRCode /></ProtectedRoute>} />
<Route path="/qr-scanner" element={<ProtectedRoute><QRScanner /></ProtectedRoute>} />
<Route path="/pdf-qr-code" element={<ProtectedRoute><PdfQRCodeGenerator /></ProtectedRoute>} />
<Route path="/faq" element={<FAQ />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
<ScrollButton />
<FAQ />
</BackgroundWrapper>
<Toaster />
</Router>
Expand Down
31 changes: 31 additions & 0 deletions src/components/FAQ.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="faq-container">
<h2>Frequently Asked Questions</h2>
{faqs.map((faq, index) => (
<div className="faq-item" key={index} onClick={() => toggleFAQ(index)}>
<h3>{faq.question} <span>{openIndex === index ? "-" : "+"}</span></h3>
{openIndex === index && <p>{faq.answer}</p>} {/* Show answer if open */}
</div>
))}
</div>
);
}

export default FAQ;
89 changes: 88 additions & 1 deletion src/css/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -65,4 +109,47 @@ body {
background-color: white !important;
color: black !important;
box-shadow: 0 0 0px 1000px white inset !important;
}
}

.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 */
}
Loading