Merge pull request #13 from kinotio/develop

feat: add faq section

package.json

@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.2.1",

src/components/sections/faq.tsx

@@ -0,0 +1,30 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from '@/components/ui/accordion'
+
+import { DATA } from '@/data'
+
+export const FAQ = () => {
+  return (
+    <section id='faq' className='container md:w-[700px] py-24 sm:py-32 m-auto'>
+      <div className='text-center mb-8'>
+        <h2 className='text-lg text-primary text-center mb-2 tracking-wider'>FAQS</h2>
+
+        <h2 className='text-3xl md:text-4xl text-center font-bold'>Common Questions</h2>
+      </div>
+
+      <Accordion type='single' collapsible className='AccordionRoot'>
+        {DATA.faq.map(({ question, answer }, idx) => (
+          <AccordionItem key={idx} value={idx.toString()}>
+            <AccordionTrigger className='text-left'>{question}</AccordionTrigger>
+
+            <AccordionContent>{answer}</AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </section>
+  )
+}

src/components/ui/accordion.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/pages/index.tsx

@@ -7,9 +7,12 @@ import { ThemeProvider } from '@/components/theme-provider'
 import { Header } from '@/components/common/header'
 import { Footer } from '@/components/common/footer'
 import { Hero } from '@/components/sections/hero'
+import { FAQ } from '@/components/sections/faq'
 
 import { DATA } from '@/data'
 
+import { cn } from '@/lib/utils'
+
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
@@ -52,7 +55,7 @@ export const metadata = {
 export default function Home() {
   return (
     <ThemeProvider attribute='class' defaultTheme='system' enableSystem disableTransitionOnChange>
-      <div className={inter.className}>
+      <div className={cn([inter.className])}>
         <Head>
           <title>{metadata.title.default}</title>
           <meta name='description' content={metadata.description} />
@@ -76,6 +79,7 @@ export default function Home() {
 
         <Header />
         <Hero />
+        <FAQ />
         <Footer />
       </div>
     </ThemeProvider>

tailwind.config.ts

@@ -58,13 +58,31 @@ const config: Config = {
   			sm: 'calc(var(--radius) - 4px)'
   		},
   		animation: {
-  			gradient: 'gradient 8s linear infinite'
+  			gradient: 'gradient 8s linear infinite',
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
   		},
   		keyframes: {
   			gradient: {
   				to: {
   					backgroundPosition: 'var(--bg-size) 0'
   				}
+  			},
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
   			}
   		}
   	}