Skip to content

Commit 03fd5e4

Browse files
sintaherenasintaherena
authored
Fix: Fix faq accordion (#31)
1 parent ba4a2e8 commit 03fd5e4

File tree

3 files changed

+87
-86
lines changed

3 files changed

+87
-86
lines changed

‎app/(inferenceai)/inferenceai/[lang]/home.tsx‎

Lines changed: 71 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -107,20 +107,18 @@ function HowItWorks({ lang }: { lang: SupportedLanguage }) {
107107
{getHowItWorks(lang).map((item, i) => (
108108
<AccordionItem key={i} value={`faq-${i}`} asChild>
109109
<Card className="my-4 w-full border-none bg-[#1B1728] shadow-sm transition-all duration-300">
110-
<CardHeader className="px-4 py-2">
110+
<CardHeader className="py-0 md:py-2">
111111
<AccordionTrigger className="flex items-center justify-between no-underline hover:no-underline focus:no-underline">
112-
<div className="flex flex-col">
113-
<div className="text-left text-xl font-medium text-white">
114-
{item.title}
115-
</div>
116-
<div className="text-left font-medium text-[#AFB0C3]">
117-
{item.description}
118-
</div>
112+
<div className="text-left text-xl font-medium text-white">
113+
{item.title}
119114
</div>
120115
</AccordionTrigger>
121116
</CardHeader>
122117
<AccordionContent asChild>
123-
<CardContent className="px-4 pb-4 pt-0 text-base text-[#CDCED8] lg:text-lg">
118+
<CardContent className="flex flex-col py-0 text-base text-[#CDCED8] lg:text-lg">
119+
<div className="mb-4 text-left font-medium text-[#AFB0C3]">
120+
{item.description}
121+
</div>
124122
<div className="relative aspect-[4/3] w-full overflow-hidden rounded-xl">
125123
<Image
126124
src={item.image}
@@ -255,67 +253,75 @@ function CaseStudies({ lang }: { lang: SupportedLanguage }) {
255253

256254
function AboutUs({ lang }: { lang: SupportedLanguage }) {
257255
return (
258-
<GridItemsContainerBlack id="about-us" bgClassName="bg-multilayer-gradient">
259-
<GridItemsTitleBlack
260-
title={inferenceaiAboutUsHeading(lang)}
261-
description={inferenceaiAboutUsDesc(lang)}
262-
/>
263-
<div className="my-6" />
264-
<motion.div
265-
initial={{ opacity: 0 }}
266-
whileInView={{ opacity: 1 }}
267-
viewport={{ once: true, amount: 0.3 }}
268-
transition={{ duration: 0.6 }}
269-
className="mx-auto flex h-[400px] w-full max-w-full items-center overflow-hidden rounded-xl xl:w-[1100px]">
270-
<Image
271-
src="/images/inferenceai/about-us.webp"
272-
alt="image"
273-
width={1100}
274-
height={600}
275-
className="h-full w-full object-cover object-center"
276-
/>
277-
</motion.div>
278-
</GridItemsContainerBlack>
256+
<section id="about-us" className="bg-inference-ai scroll-mt-20">
257+
<div className="mx-auto flex flex-col flex-wrap items-center justify-center px-4 py-7 md:flex-row md:px-6 md:py-[60px]">
258+
<div className="w-full max-w-5xl">
259+
<GridItemsTitleBlack
260+
title={inferenceaiAboutUsHeading(lang)}
261+
description={inferenceaiAboutUsDesc(lang)}
262+
/>
263+
<div className="my-6" />
264+
<motion.div
265+
initial={{ opacity: 0 }}
266+
whileInView={{ opacity: 1 }}
267+
viewport={{ once: true, amount: 0.3 }}
268+
transition={{ duration: 0.6 }}
269+
className="mx-auto flex h-52 w-full max-w-full items-center overflow-hidden rounded-xl md:h-[400px] xl:w-[1100px]">
270+
<Image
271+
src="/images/inferenceai/about-us.webp"
272+
alt="image"
273+
width={1100}
274+
height={600}
275+
className="h-full w-full object-cover object-center"
276+
/>
277+
</motion.div>
278+
</div>
279+
</div>
280+
</section>
279281
);
280282
}
281283

282284
function Faqs({ lang }: { lang: SupportedLanguage }) {
283285
return (
284-
<GridItemsContainerBlack id="faqs" bgClassName="bg-inference-ai">
285-
<GridItemsTitleBlack
286-
title={inferenceaiFaqHeading(lang)}
287-
description={inferenceaiFaqDesc(lang)}
288-
layout="vertical"
289-
/>
290-
<div className="my-6" />
291-
<motion.div
292-
initial={{ opacity: 0 }}
293-
whileInView={{ opacity: 1 }}
294-
viewport={{ once: true, amount: 0.3 }}
295-
transition={{ duration: 0.6 }}>
296-
<Accordion
297-
type="single"
298-
collapsible
299-
className="mx-auto mt-8 w-full max-w-4xl space-y-4">
300-
{getFaqs(lang).map((item, i) => (
301-
<AccordionItem key={i} value={`faq-${i}`} asChild>
302-
<Card className="w-full border-none bg-[#1B1728] shadow-sm transition-all duration-300">
303-
<CardHeader className="px-4 py-2">
304-
<AccordionTrigger className="flex w-full items-center justify-between gap-2 text-left text-lg font-medium text-white no-underline hover:no-underline focus:no-underline md:text-[22px]">
305-
{item.question}
306-
</AccordionTrigger>
307-
</CardHeader>
308-
<AccordionContent asChild>
309-
<CardContent className="px-4 pb-4 pt-0 text-base text-[#CDCED8] lg:text-lg">
310-
{item.answer}
311-
</CardContent>
312-
</AccordionContent>
313-
</Card>
314-
</AccordionItem>
315-
))}
316-
</Accordion>
317-
</motion.div>
318-
</GridItemsContainerBlack>
286+
<section id="faqs" className="bg-inference-ai scroll-mt-20">
287+
<div className="mx-auto flex flex-wrap items-center justify-center px-4 py-7 md:px-6 md:py-[60px]">
288+
<div className="w-full max-w-3xl">
289+
<GridItemsTitleBlack
290+
title={inferenceaiFaqHeading(lang)}
291+
description={inferenceaiFaqDesc(lang)}
292+
layout="vertical"
293+
/>
294+
<div className="my-6" />
295+
<motion.div
296+
initial={{ opacity: 0 }}
297+
whileInView={{ opacity: 1 }}
298+
viewport={{ once: true, amount: 0.3 }}
299+
transition={{ duration: 0.6 }}>
300+
<Accordion
301+
type="single"
302+
collapsible
303+
className="mx-auto mt-8 w-full max-w-4xl space-y-4">
304+
{getFaqs(lang).map((item, i) => (
305+
<AccordionItem key={i} value={`faq-${i}`} asChild>
306+
<Card className="card-border-gradient w-full shadow-sm transition-all duration-300">
307+
<CardHeader className="py-0 md:py-2">
308+
<AccordionTrigger className="flex w-full items-center justify-between text-left text-xl font-medium text-white no-underline transition hover:no-underline focus:no-underline md:gap-2">
309+
{item.question}
310+
</AccordionTrigger>
311+
</CardHeader>
312+
<AccordionContent asChild className="py-0">
313+
<CardContent className="text-base text-[#CDCED8] lg:text-lg">
314+
{item.answer}
315+
</CardContent>
316+
</AccordionContent>
317+
</Card>
318+
</AccordionItem>
319+
))}
320+
</Accordion>
321+
</motion.div>
322+
</div>
323+
</div>
324+
</section>
319325
);
320326
}
321327

‎app/(inferenceai)/inferenceai/rag-chatbot/[lang]/home.tsx‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -47,20 +47,14 @@ function KeyFeatures({ lang }: { lang: SupportedLanguage }) {
4747
bgClassName="bg-[#050013]">
4848
<GridItemsTitleBlack title={ragChatbotKeyFeaturesHeading(lang)} />
4949
<div className="my-6" />
50-
<motion.div
51-
initial={{ opacity: 0 }}
52-
whileInView={{ opacity: 1 }}
53-
viewport={{ once: true, amount: 0.3 }}
54-
transition={{ duration: 0.6 }}>
55-
<GridItems
56-
items={getKeyFeatures(lang)}
57-
columns={{ base: 1, sm: 2, md: 3, lg: 3, xl: 5 }}
58-
cardClassName="rounded-xl"
59-
borderClassName="card-border-gradient"
60-
titleClassName="text-white md:text-lg"
61-
lang={lang}
62-
/>
63-
</motion.div>
50+
<GridItems
51+
items={getKeyFeatures(lang)}
52+
columns={{ base: 1, sm: 2, md: 3, lg: 3, xl: 5 }}
53+
cardClassName="rounded-xl"
54+
borderClassName="card-border-gradient"
55+
titleClassName="text-white md:text-lg"
56+
lang={lang}
57+
/>
6458
</GridItemsContainerBlack>
6559
);
6660
}
@@ -71,8 +65,7 @@ function HowItWorks({ lang }: { lang: SupportedLanguage }) {
7165
<div className="mx-auto flex flex-wrap items-center justify-center px-4 py-7 md:px-6 md:py-[60px]">
7266
<div className="w-full max-w-3xl">
7367
<GridItemsTitleBlack title={ragChatbotHowItWorksHeading(lang)} />
74-
<div className="my-6" />
75-
<div className="space-y-6">
68+
<div className="my-6 space-y-6">
7669
{getHowItWorks(lang).map((item, i) => (
7770
<motion.div
7871
key={i}
@@ -103,7 +96,7 @@ function WhatIsIncluded({ lang }: { lang: SupportedLanguage }) {
10396
bgClassName="bg-multilayer-gradient">
10497
<GridItemsTitleBlack title={ragChatbotWhatIsIncludedHeading(lang)} />
10598
<div className="my-6" />
106-
<div className="grid grid-cols-2 gap-10 bg-[#0A0713] pt-8 text-white lg:grid-cols-4">
99+
<div className="grid grid-cols-2 gap-10 bg-transparent pt-8 text-white lg:grid-cols-4">
107100
{getWhatIsIncluded(lang).map((item, idx) => (
108101
<motion.div
109102
initial={{ opacity: 0 }}
@@ -140,16 +133,19 @@ function Faqs({ lang }: { lang: SupportedLanguage }) {
140133
whileInView={{ opacity: 1 }}
141134
viewport={{ once: true, amount: 0.3 }}
142135
transition={{ duration: 0.6 }}>
143-
<Accordion type="single" collapsible className="space-y-6">
136+
<Accordion
137+
type="single"
138+
collapsible
139+
className="mx-auto w-full max-w-4xl space-y-4">
144140
{getFaqs(lang).map((item, i) => (
145141
<AccordionItem key={i} value={`faq-${i}`} asChild>
146142
<Card className="card-border-gradient w-full shadow-sm transition-all duration-300">
147-
<CardHeader className="py-4 md:p-6">
143+
<CardHeader className="py-0 md:py-2">
148144
<AccordionTrigger className="flex w-full items-center justify-between text-left text-xl font-medium text-white no-underline transition hover:no-underline focus:no-underline md:gap-2">
149145
{item.question}
150146
</AccordionTrigger>
151147
</CardHeader>
152-
<AccordionContent asChild>
148+
<AccordionContent asChild className="py-0">
153149
<CardContent className="text-base text-[#CDCED8] lg:text-lg">
154150
{item.answer}
155151
</CardContent>

‎app/components/grid-items.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -483,7 +483,6 @@ export const GridItemsTitleBlack = ({
483483
) : (
484484
<motion.h1
485485
{...sharedMotionProps}
486-
transition={{ delay: 0.1, duration: 0.6 }}
487486
className="w-full text-center text-4xl font-medium leading-tight text-white md:text-[40px]">
488487
{title}
489488
</motion.h1>

0 commit comments

Comments
 (0)