Merge pull request #31 from knowlyai/feature/faq

Feature - Add "FAQ" section to Home Page

Author: enzosakamoto

src/features/home/pages/home-page.tsx

@@ -3,8 +3,27 @@ import { Background } from '@/shared/components/background'
 import { Layout } from '@/shared/components/layout'
 import { motion } from 'framer-motion'
 import { Button } from '@/shared/components/button'
+import { Accordion, AccordionItem } from '@/shared/components/accordion'
 import { DotLottieReact } from '@lottiefiles/dotlottie-react'
 
+const faqs = [
+  {
+    title: 'What kind of file can I upload?',
+    content:
+      'Currently, you can upload PDF files. We are working on adding support for other file types in the future.'
+  },
+  {
+    title: 'Can I create more than one model?',
+    content:
+      'Yes, you can create multiple models with different knowledge bases.'
+  },
+  {
+    title: 'Do I need to code?',
+    content:
+      'No, you only need to upload the files and we take care of the rest.'
+  }
+]
+
 function BackgroundBlobs() {
   return (
     <>
@@ -163,6 +182,19 @@ export function HomePage() {
           <Card></Card>
           */}
         </section>
+        <section
+          id="faq"
+          className="flex h-screen flex-col items-center justify-center"
+        >
+          <h1 className="mb-12 text-6xl font-semibold">FAQ</h1>
+          <Accordion className="w-250">
+            {faqs.map((faq, i) => (
+              <AccordionItem key={i} title={faq.title}>
+                {faq.content}
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </section>
       </Layout>
     </Background>
   )

src/shared/components/accordion.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { cn } from '../utils/cn'
+
+export type AccordionItemProps = {
+  title: string
+  children: React.ReactNode
+  defaultOpen?: boolean
+  className?: string
+}
+
+export const AccordionItem = React.forwardRef<
+  HTMLDivElement,
+  AccordionItemProps
+>(({ title, children, defaultOpen = false, className }, ref) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [maxHeight, setMaxHeight] = useState<string>('0px')
+
+  useEffect(() => {
+    if (contentRef.current) {
+      const scrollHeight = contentRef.current.scrollHeight
+      setMaxHeight(isOpen ? `${scrollHeight}px` : '0px')
+    }
+  }, [isOpen, children])
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'border-b border-white/10 py-4 transition-colors',
+        className
+      )}
+    >
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full items-center justify-between text-left"
+      >
+        <svg
+          className={cn(
+            'h-6 w-6 transform transition-transform',
+            isOpen ? 'rotate-45 text-white' : 'text-white/80'
+          )}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 4v16m8-8H4"
+          />
+        </svg>
+        <span
+          className={cn(
+            'ml-2 flex-1 text-left font-semibold transition-colors',
+            isOpen ? 'text-white' : 'text-white/80'
+          )}
+        >
+          {title}
+        </span>
+      </button>
+
+      <div
+        ref={contentRef}
+        style={{ maxHeight }}
+        className="transition-max-height overflow-hidden duration-300 ease-in-out"
+      >
+        <div className="mt-2 font-medium text-white/70">{children}</div>
+      </div>
+    </div>
+  )
+})
+
+AccordionItem.displayName = 'AccordionItem'
+
+export type AccordionProps = {
+  children: React.ReactElement<AccordionItemProps>[]
+  className?: string
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  children,
+  className
+}) => {
+  return (
+    <div
+      className={cn(
+        'w-full rounded-2xl bg-[#2c2c54]/60 p-6 shadow-lg backdrop-blur-md',
+        className
+      )}
+    >
+      {React.Children.map(children, (child, idx) =>
+        React.cloneElement(child, {
+          key: idx
+        })
+      )}
+    </div>
+  )
+}
+
+Accordion.displayName = 'Accordion'

src/shared/components/navbar.tsx

@@ -24,7 +24,7 @@ export function Navbar() {
           <a href="#how-knowly-works">Our product</a>
           <a href="">About us</a>
           <a href="">Pricing</a>
-          <a href="">FAQ</a>
+          <a href="#faq">FAQ</a>
           <Button className="px-6">Login</Button>
         </div>
       </div>