Skip to content

Commit fa9af2d

Browse files
Abhash-ChakrabortyAbhash-Chakraborty
committed
style: enhance FAQ and testimonial components with improved layout and styling
1 parent cebba41 commit fa9af2d

2 files changed

Lines changed: 198 additions & 84 deletions

File tree

‎src/components/faqs/faqs.tsx‎

Lines changed: 193 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -65,101 +65,215 @@ const FAQs: React.FC = () => {
6565
padding: "2rem 0",
6666
}}
6767
>
68-
<div className="mx-auto px-2 sm:px-4 lg:px-6">
69-
<div className="flex flex-col items-center justify-center gap-x-8 gap-y-12 lg:flex-row lg:justify-between xl:gap-28">
70-
<div className="w-full">
71-
<div className="mb-8 lg:mb-16">
72-
<h6
73-
className="mb-2 text-center text-lg font-medium lg:text-left"
74-
style={{
75-
color: isDark ? "#a78bfa" : "#8b5cf6",
76-
fontWeight: 600,
77-
}}
78-
>
79-
FAQs
80-
</h6>
81-
<h2
82-
className={`text-center text-4xl font-bold lg:text-left ${
83-
isDark ? "text-gray-100" : "text-gray-900"
84-
} leading-snug`}
85-
>
86-
Looking for answers?
87-
</h2>
88-
<p
89-
className={`${
90-
isDark ? "text-gray-400" : "text-gray-600"
91-
} text-center lg:text-left`}
92-
>
93-
Find answers to the most common questions about recode hive.
94-
</p>
95-
</div>
68+
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
69+
<div className="w-full">
70+
<div className="mb-10 text-center lg:mb-14">
71+
<h6
72+
className="mb-2 text-lg font-medium"
73+
style={{
74+
color: isDark ? "#a78bfa" : "#8b5cf6",
75+
fontWeight: 600,
76+
}}
77+
>
78+
FAQs
79+
</h6>
80+
<h2
81+
className={`text-5xl font-bold leading-snug md:text-6xl ${
82+
isDark ? "text-gray-100" : "text-gray-900"
83+
}`}
84+
>
85+
Looking for answers?
86+
</h2>
87+
<p
88+
className={`mx-auto mt-3 max-w-3xl text-base ${
89+
isDark ? "text-gray-400" : "text-gray-600"
90+
}`}
91+
>
92+
Find answers to the most common questions about recode hive.
93+
</p>
94+
</div>
95+
96+
<div className="mx-auto flex max-w-5xl flex-col items-start gap-4 md:flex-row md:gap-6">
97+
<div className="flex w-full flex-1 flex-col gap-4 md:gap-6">
98+
{faqData.filter((_, index) => index % 2 === 0).map((faq, idx) => {
99+
const originalIndex = idx * 2;
100+
const isOpen = activeIndex === originalIndex;
96101

97-
{/* Accordion Masonry Columns to prevent sibling expansion */}
98-
<div className="columns-1 md:columns-2 md:gap-x-6">
99-
{faqData.map((faq, index) => (
100-
<motion.div
101-
key={index}
102-
className="accordion mb-4 h-fit break-inside-avoid border-gray-200 pb-4 dark:border-gray-700"
103-
initial={{ opacity: 0, y: 10 }}
104-
animate={{ opacity: 1, y: 0 }}
105-
transition={{ duration: 0.3 }}
106-
>
107-
<button
108-
className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between rounded-lg p-4 text-lg font-medium transition-all duration-300 focus:outline-none ${
109-
isDark
110-
? "text-gray-200 hover:text-indigo-400"
111-
: "text-gray-700 hover:text-indigo-600"
112-
}`}
102+
return (
103+
<motion.div
104+
key={originalIndex}
105+
className="accordion overflow-hidden rounded-xl"
106+
initial={{ opacity: 0, y: 10 }}
107+
animate={{ opacity: 1, y: 0 }}
108+
transition={{ duration: 0.3 }}
113109
style={{
114110
background: isDark
115-
? "rgba(30, 27, 75, 0.6)"
116-
: "rgba(237, 233, 254, 0.6)",
111+
? "rgba(30, 27, 75, 0.45)"
112+
: "rgba(237, 233, 254, 0.5)",
117113
border: isDark
118-
? "1px solid rgba(139, 92, 246, 0.2)"
119-
: "1px solid rgba(139, 92, 246, 0.3)",
114+
? "1px solid rgba(139, 92, 246, 0.25)"
115+
: "1px solid rgba(139, 92, 246, 0.35)",
120116
backdropFilter: "blur(10px)",
121117
}}
122-
onClick={() => toggleAccordion(index)}
123118
>
124-
{faq.question}
125-
<motion.span
126-
className="transform transition-transform duration-300"
127-
animate={{ rotate: activeIndex === index ? 180 : 0 }}
119+
<button
120+
className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between gap-4 p-4 text-left text-base font-semibold transition-all duration-300 focus:outline-none md:p-5 ${
121+
isDark
122+
? "text-gray-100 hover:text-indigo-300"
123+
: "text-gray-800 hover:text-indigo-700"
124+
}`}
125+
style={{
126+
background: isDark
127+
? isOpen
128+
? "rgba(67, 56, 202, 0.18)"
129+
: "rgba(30, 27, 75, 0.45)"
130+
: isOpen
131+
? "rgba(221, 214, 254, 0.85)"
132+
: "rgba(237, 233, 254, 0.45)",
133+
}}
134+
onClick={() => toggleAccordion(originalIndex)}
135+
aria-expanded={isOpen}
136+
aria-controls={`faq-panel-${originalIndex}`}
137+
>
138+
<span>{faq.question}</span>
139+
<motion.span
140+
className="transform transition-transform duration-300"
141+
animate={{ rotate: isOpen ? 180 : 0 }}
142+
>
143+
<FiChevronDown size={22} />
144+
</motion.span>
145+
</button>
146+
<motion.div
147+
id={`faq-panel-${originalIndex}`}
148+
className="accordion-content overflow-hidden"
149+
initial={{ height: 0, opacity: 0 }}
150+
animate={{
151+
height: isOpen ? "auto" : 0,
152+
opacity: isOpen ? 1 : 0,
153+
}}
154+
transition={{ duration: 0.3, ease: "easeInOut" }}
128155
>
129-
<FiChevronDown size={22} />
130-
</motion.span>
131-
</button>
156+
<div
157+
className={`text-base transition-colors duration-200 ${
158+
isDark ? "text-gray-300" : "text-gray-900"
159+
}`}
160+
style={{
161+
borderTop: isDark
162+
? "1px solid rgba(99, 102, 241, 0.3)"
163+
: "1px solid rgba(129, 140, 248, 0.45)",
164+
background: isDark
165+
? "rgba(17, 24, 39, 0.5)"
166+
: "rgba(255, 255, 255, 0.72)",
167+
color: isDark ? "#d1d5db" : "#111827",
168+
padding: "1rem 1.25rem 1.25rem",
169+
}}
170+
dangerouslySetInnerHTML={{
171+
__html: faq.answer
172+
.replace(
173+
/<strong>/g,
174+
`<strong style="color: ${isDark ? "#f3f4f6" : "#000000"}; font-weight: 600;">`,
175+
)
176+
.replace(
177+
/<a /g,
178+
`<a style="color: ${isDark ? "#818cf8" : "#4f46e5"};" `,
179+
),
180+
}}
181+
/>
182+
</motion.div>
183+
</motion.div>
184+
);
185+
})}
186+
</div>
187+
188+
<div className="flex w-full flex-1 flex-col gap-4 md:gap-6">
189+
{faqData.filter((_, index) => index % 2 !== 0).map((faq, idx) => {
190+
const originalIndex = idx * 2 + 1;
191+
const isOpen = activeIndex === originalIndex;
192+
193+
return (
132194
<motion.div
133-
className="accordion-content overflow-hidden"
134-
initial={{ height: 0, opacity: 0 }}
135-
animate={{
136-
height: activeIndex === index ? "auto" : 0,
137-
opacity: activeIndex === index ? 1 : 0,
195+
key={originalIndex}
196+
className="accordion overflow-hidden rounded-xl"
197+
initial={{ opacity: 0, y: 10 }}
198+
animate={{ opacity: 1, y: 0 }}
199+
transition={{ duration: 0.3 }}
200+
style={{
201+
background: isDark
202+
? "rgba(30, 27, 75, 0.45)"
203+
: "rgba(237, 233, 254, 0.5)",
204+
border: isDark
205+
? "1px solid rgba(139, 92, 246, 0.25)"
206+
: "1px solid rgba(139, 92, 246, 0.35)",
207+
backdropFilter: "blur(10px)",
138208
}}
139-
transition={{ duration: 0.3, ease: "easeInOut" }}
140209
>
141-
<div
142-
className={`mt-2 text-base transition-colors duration-200 ${
143-
isDark ? "text-gray-300" : "text-gray-900"
210+
<button
211+
className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between gap-4 p-4 text-left text-base font-semibold transition-all duration-300 focus:outline-none md:p-5 ${
212+
isDark
213+
? "text-gray-100 hover:text-indigo-300"
214+
: "text-gray-800 hover:text-indigo-700"
144215
}`}
145216
style={{
146-
color: isDark ? "#d1d5db" : "#111827",
217+
background: isDark
218+
? isOpen
219+
? "rgba(67, 56, 202, 0.18)"
220+
: "rgba(30, 27, 75, 0.45)"
221+
: isOpen
222+
? "rgba(221, 214, 254, 0.85)"
223+
: "rgba(237, 233, 254, 0.45)",
147224
}}
148-
dangerouslySetInnerHTML={{
149-
__html: faq.answer
150-
.replace(
151-
/<strong>/g,
152-
`<strong style="color: ${isDark ? "#f3f4f6" : "#000000"}; font-weight: 600;">`,
153-
)
154-
.replace(
155-
/<a /g,
156-
`<a style="color: ${isDark ? "#818cf8" : "#4f46e5"};" `,
157-
),
225+
onClick={() => toggleAccordion(originalIndex)}
226+
aria-expanded={isOpen}
227+
aria-controls={`faq-panel-${originalIndex}`}
228+
>
229+
<span>{faq.question}</span>
230+
<motion.span
231+
className="transform transition-transform duration-300"
232+
animate={{ rotate: isOpen ? 180 : 0 }}
233+
>
234+
<FiChevronDown size={22} />
235+
</motion.span>
236+
</button>
237+
<motion.div
238+
id={`faq-panel-${originalIndex}`}
239+
className="accordion-content overflow-hidden"
240+
initial={{ height: 0, opacity: 0 }}
241+
animate={{
242+
height: isOpen ? "auto" : 0,
243+
opacity: isOpen ? 1 : 0,
158244
}}
159-
/>
245+
transition={{ duration: 0.3, ease: "easeInOut" }}
246+
>
247+
<div
248+
className={`text-base transition-colors duration-200 ${
249+
isDark ? "text-gray-300" : "text-gray-900"
250+
}`}
251+
style={{
252+
borderTop: isDark
253+
? "1px solid rgba(99, 102, 241, 0.3)"
254+
: "1px solid rgba(129, 140, 248, 0.45)",
255+
background: isDark
256+
? "rgba(17, 24, 39, 0.5)"
257+
: "rgba(255, 255, 255, 0.72)",
258+
color: isDark ? "#d1d5db" : "#111827",
259+
padding: "1rem 1.25rem 1.25rem",
260+
}}
261+
dangerouslySetInnerHTML={{
262+
__html: faq.answer
263+
.replace(
264+
/<strong>/g,
265+
`<strong style="color: ${isDark ? "#f3f4f6" : "#000000"}; font-weight: 600;">`,
266+
)
267+
.replace(
268+
/<a /g,
269+
`<a style="color: ${isDark ? "#818cf8" : "#4f46e5"};" `,
270+
),
271+
}}
272+
/>
273+
</motion.div>
160274
</motion.div>
161-
</motion.div>
162-
))}
275+
);
276+
})}
163277
</div>
164278
</div>
165279
</div>

‎src/components/testimonials/TestimonialCard.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,14 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
5656
<div className="relative flex h-full flex-col p-6">
5757
{/* Header */}
5858
<div className="mb-6 flex items-center gap-4">
59-
<div className="relative">
60-
<Avatar className="h-16 w-16 border-2 border-gradient-to-r from-purple-500 to-pink-500">
61-
<AvatarImage src={avatar} className="object-contain" />
59+
<div className="relative shrink-0">
60+
<Avatar className="h-16 w-16 overflow-hidden border-2 border-gradient-to-r from-purple-500 to-pink-500 bg-white/90 shadow-md">
61+
<AvatarImage src={avatar} className="h-full w-full scale-[2.3] object-cover transition-transform duration-500" />
6262
<AvatarFallback className="bg-gradient-to-br from-purple-500 to-pink-500 text-white font-semibold">
6363
{name.charAt(0)}
6464
</AvatarFallback>
6565
</Avatar>
66-
<div className="absolute -bottom-1 -right-1 h-5 w-5 rounded-full bg-green-500 border-2 border-white" />
66+
<div className="absolute bottom-0 right-0 h-4 w-4 rounded-full border-2 border-white bg-green-500 shadow-sm" />
6767
</div>
6868
<div className="flex-1">
6969
<h3 className={`text-lg font-bold ${
@@ -139,4 +139,4 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
139139
);
140140
};
141141

142-
export default TestimonialCard;
142+
export default TestimonialCard;

0 commit comments

Comments
 (0)