Skip to content

Commit 35f6070

Browse files
author
254jlc
committed
Faq section added, preview of faq page
 modified: client/src/App.tsx new file: client/src/assets/faq.png modified: client/src/components/landing/FAQSection.tsx modified: client/src/index.css new file: client/src/pages/FAQPage.tsx modified: client/src/pages/Home.tsx
1 parent 9516cdd commit 35f6070

6 files changed

Lines changed: 263 additions & 96 deletions

File tree

‎client/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ import { Toaster } from "@/components/ui/toaster";
55
import { TooltipProvider } from "@/components/ui/tooltip";
66
import { ThemeProvider } from "@/contexts/ThemeContext";
77
import Home from "@/pages/Home";
8+
import FAQPage from "@/pages/FAQPage";
89
import NotFound from "@/pages/not-found";
910

1011
function Router() {
1112
return (
1213
<Switch>
1314
<Route path="/" component={Home} />
15+
<Route path="/faqpage" component={FAQPage} />
1416
<Route component={NotFound} />
1517
</Switch>
1618
);

‎client/src/assets/faq.png‎

209 KB
Loading

‎client/src/components/landing/FAQSection.tsx‎

Lines changed: 90 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import { Plus } from "lucide-react";
22
import { Button } from "@/components/ui/button";
3-
import {
4-
Accordion,
5-
AccordionContent,
6-
AccordionItem,
7-
AccordionTrigger,
8-
} from "@/components/ui/accordion";
3+
import { useState } from "react";
4+
import { useLocation } from "wouter";
5+
import faqImage from "@/assets/faq.png";
96

107
const faqData = [
118
{
@@ -31,127 +28,125 @@ const faqData = [
3128
];
3229

3330
export default function FAQSection() {
31+
const [expandedItems, setExpandedItems] = useState<number[]>([]);
32+
const [, setLocation] = useLocation();
33+
34+
const toggleItem = (index: number) => {
35+
setExpandedItems(prev =>
36+
prev.includes(index)
37+
? prev.filter(item => item !== index) // Close the clicked item if it's already open
38+
: [index] // Open only the clicked item, closing all others
39+
);
40+
};
41+
42+
const handleBrowseFAQs = () => {
43+
setLocation("/faqpage");
44+
};
45+
3446
return (
3547
<section
3648
id="faq"
37-
className="py-20 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800"
49+
className="py-20"
50+
style={{
51+
backgroundColor: 'var(--faq-bg)',
52+
color: 'var(--faq-text)'
53+
}}
3854
>
3955
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
4056
{/* Header */}
4157
<div className="text-center mb-16">
42-
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
58+
<h2 className="text-4xl md:text-5xl font-bold mb-6" style={{ color: 'var(--faq-text)' }}>
4359
Frequently Asked Questions
4460
</h2>
45-
<p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
61+
<p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed" style={{ color: 'var(--faq-text)' }}>
4662
Answers to the questions you're most likely to have—whether you're new to DevOps or already deep in the game.
4763
We're here to make things clear, simple, and welcoming.
4864
</p>
4965
</div>
5066

5167
<div className="grid lg:grid-cols-2 gap-12 items-center">
52-
{/* Left Side - Illustration */}
68+
{/* Left Side - FAQ Image */}
5369
<div className="relative">
5470
<div className="relative w-full h-96 lg:h-[500px] flex items-center justify-center">
55-
{/* Main FAQ Illustration */}
56-
<div className="relative w-80 h-80 lg:w-96 lg:h-96">
57-
{/* Speech Bubble */}
58-
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-32 h-32 bg-purple-500 rounded-full flex items-center justify-center shadow-lg">
59-
<span className="text-white text-4xl font-bold">?!</span>
60-
</div>
61-
62-
{/* FAQ Letters */}
63-
<div className="absolute top-20 left-1/2 transform -translate-x-1/2 flex space-x-2">
64-
<div className="w-16 h-20 bg-purple-500 rounded-lg shadow-lg flex items-center justify-center">
65-
<span className="text-white text-2xl font-bold">F</span>
66-
</div>
67-
<div className="w-16 h-20 bg-yellow-400 rounded-lg shadow-lg flex items-center justify-center">
68-
<span className="text-white text-2xl font-bold">A</span>
69-
</div>
70-
<div className="w-16 h-20 bg-purple-500 rounded-lg shadow-lg flex items-center justify-center">
71-
<span className="text-white text-2xl font-bold">Q</span>
72-
</div>
73-
</div>
74-
75-
{/* Human Figures */}
76-
<div className="absolute top-16 left-1/2 transform -translate-x-1/2 -ml-8">
77-
<div className="w-8 h-8 bg-yellow-400 rounded-full"></div>
78-
<div className="w-6 h-4 bg-blue-500 rounded-full mt-1"></div>
79-
</div>
80-
81-
<div className="absolute top-16 left-1/2 transform -translate-x-1/2 ml-8">
82-
<div className="w-8 h-8 bg-orange-400 rounded-full"></div>
83-
<div className="w-6 h-4 bg-blue-500 rounded-full mt-1"></div>
84-
</div>
85-
86-
{/* Magnifying Glass */}
87-
<div className="absolute top-32 -left-4">
88-
<div className="w-8 h-8 bg-purple-500 rounded-full border-2 border-white"></div>
89-
<div className="w-2 h-6 bg-orange-400 rounded-full ml-6 mt-2"></div>
90-
</div>
91-
92-
{/* Gears */}
93-
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-4">
94-
<div className="w-4 h-4 bg-purple-500 rounded-full"></div>
95-
<div className="w-4 h-4 bg-yellow-400 rounded-full"></div>
96-
<div className="w-4 h-4 bg-purple-500 rounded-full"></div>
97-
</div>
98-
99-
{/* Plants */}
100-
<div className="absolute bottom-4 -left-8">
101-
<div className="w-3 h-6 bg-green-500 rounded-full"></div>
102-
<div className="w-4 h-2 bg-green-600 rounded-full mt-1"></div>
103-
</div>
104-
105-
<div className="absolute bottom-4 -right-8">
106-
<div className="w-3 h-6 bg-green-500 rounded-full"></div>
107-
<div className="w-4 h-2 bg-green-600 rounded-full mt-1"></div>
108-
</div>
109-
</div>
71+
<img
72+
src={faqImage}
73+
alt="FAQ Illustration"
74+
className="w-full h-full object-contain"
75+
/>
11076
</div>
11177
</div>
11278

113-
{/* Right Side - FAQ Accordion */}
79+
{/* Right Side - FAQ Cards */}
11480
<div className="space-y-4">
115-
<Accordion type="single" collapsible className="w-full">
116-
{faqData.map((faq, index) => (
117-
<AccordionItem
118-
key={index}
119-
value={`item-${index}`}
120-
className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700"
81+
{faqData.map((faq, index) => (
82+
<div
83+
key={index}
84+
className="rounded-lg shadow-sm border overflow-hidden"
85+
style={{
86+
backgroundColor: 'var(--faq-bg)',
87+
borderColor: 'var(--faq-text)',
88+
opacity: 0.9
89+
}}
90+
>
91+
{/* Question Card */}
92+
<div
93+
className="flex items-center justify-between px-6 py-4 cursor-pointer transition-colors"
94+
style={{
95+
backgroundColor: 'var(--faq-bg)',
96+
color: 'var(--faq-text)'
97+
}}
98+
onClick={() => toggleItem(index)}
12199
>
122-
<AccordionTrigger className="px-6 py-4 text-left hover:no-underline">
123-
<span className="text-gray-900 dark:text-white font-medium">
124-
{faq.question}
125-
</span>
126-
</AccordionTrigger>
127-
<AccordionContent className="px-6 pb-4">
128-
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
100+
<span className="font-medium flex-1" style={{ color: 'var(--faq-text)' }}>
101+
{faq.question}
102+
</span>
103+
<button
104+
className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white hover:bg-[#023047] transition-colors ml-4"
105+
onClick={(e) => {
106+
e.stopPropagation();
107+
toggleItem(index);
108+
}}
109+
>
110+
<Plus
111+
className={`w-4 h-4 transition-transform duration-200 ${
112+
expandedItems.includes(index) ? 'rotate-45' : ''
113+
}`}
114+
/>
115+
</button>
116+
</div>
117+
118+
{/* Answer Content */}
119+
{expandedItems.includes(index) && (
120+
<div className="px-6 pb-4 border-t" style={{ borderColor: 'var(--faq-text)', opacity: 0.8 }}>
121+
<p className="leading-relaxed pt-4" style={{ color: 'var(--faq-text)' }}>
129122
{faq.answer}
130123
</p>
131-
</AccordionContent>
132-
</AccordionItem>
133-
))}
134-
</Accordion>
124+
</div>
125+
)}
126+
</div>
127+
))}
135128
</div>
136129
</div>
137130

138131
{/* Browse Full FAQs Button */}
139132
<div className="text-center mt-16">
140133
<Button
141134
size="lg"
142-
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-200"
143-
onClick={() => {
144-
// Navigate to full FAQ page or expand all FAQs
145-
const accordionItems = document.querySelectorAll('[data-state="closed"]');
146-
accordionItems.forEach((item, index) => {
147-
const trigger = item.querySelector('[role="button"]');
148-
if (trigger) {
149-
setTimeout(() => {
150-
(trigger as HTMLElement).click();
151-
}, index * 200);
152-
}
153-
});
135+
className="px-8 py-4 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 text-white"
136+
style={{
137+
backgroundColor: '#3B82F6',
138+
color: '#ffffff',
139+
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
140+
}}
141+
onMouseEnter={(e) => {
142+
e.currentTarget.style.backgroundColor = '#2563EB';
143+
e.currentTarget.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)';
144+
}}
145+
onMouseLeave={(e) => {
146+
e.currentTarget.style.backgroundColor = '#3B82F6';
147+
e.currentTarget.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
154148
}}
149+
onClick={handleBrowseFAQs}
155150
>
156151
Browse Full FAQs
157152
</Button>

‎client/src/index.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
--ring: hsl(207, 90%, 54%);
2525
--radius: 0.5rem;
2626
--nairobi-dark: #023047;
27+
--faq-bg: hsla(209, 56%, 88%, 1);
28+
--faq-text: #000000;
2729
}
2830

2931
.dark {
@@ -39,14 +41,16 @@
3941
--input: hsl(240, 3.7%, 15.9%);
4042
--primary: hsl(207, 90%, 54%);
4143
--primary-foreground: hsl(0, 0%, 100%);
42-
--secondary: hsl(158, 64%, 52%);
44+
--secondary: hsla(0, 0%, 20%, 1);
4345
--secondary-foreground: hsl(0, 0%, 100%);
4446
--accent: hsl(240, 3.7%, 15.9%);
4547
--accent-foreground: hsl(0, 0%, 98%);
4648
--destructive: hsl(0, 62.8%, 30.6%);
4749
--destructive-foreground: hsl(0, 0%, 98%);
4850
--ring: hsl(240, 4.9%, 83.9%);
4951
--nairobi-dark: #023047;
52+
--faq-bg: #333333;
53+
--faq-text: #ffffff;
5054
}
5155

5256
.text-nairobi-dark {

0 commit comments

Comments
 (0)