✨ Add accordion component and integrate into homepage layout

app/page.tsx

@@ -1,4 +1,17 @@
-import { Bold, TypographyH2, TypographyP } from "@/components/typography";
+import {
+  Bold,
+  TypographyH2,
+  TypographyH4,
+  TypographyP,
+} from "@/components/typography";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@radix-ui/react-accordion";
+import { Separator } from "@radix-ui/react-dropdown-menu";
 
 export default function Home() {
   return (
@@ -9,6 +22,55 @@ export default function Home() {
         based in the heart of Paris, France, with a focus on crafting
         high-quality websites and applications.
       </TypographyP>
+      <Separator className="my-8" />
+
+      <TypographyH4>Creative Mindset</TypographyH4>
+      <TypographyP>
+        I love tackling projects with a creative approach. My process usually
+        starts with a good brainstorming session, lots of inspiration-hunting,
+        and diving deep into the latest tech tools. Whether it’s building from
+        scratch or refining an existing idea, I aim to create with both quality
+        and originality in mind.
+      </TypographyP>
+
+      <Separator className="my-8" />
+
+      <TypographyH4>FAQ</TypographyH4>
+
+      <div className="w-full max-w-2xl">
+        <Accordion type="single" collapsible className="w-full">
+          <AccordionItem value="item-1" className="border-b border-border">
+            <AccordionTrigger className="flex justify-between items-center py-4 font-medium transition-all   [&[data-state=open]>svg]:rotate-180">
+              Why imjustlucas?
+            </AccordionTrigger>
+            <AccordionContent className="pt-1 pb-4 text-muted-foreground">
+              It&apos;s my reminder to keep it real and stay humble, no matter
+              where I go in my career.
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="item-2" className="border-b border-border">
+            <AccordionTrigger className="flex justify-between items-center py-4 font-medium transition-all   [&[data-state=open]>svg]:rotate-180">
+              Favorite languages?
+            </AccordionTrigger>
+            <AccordionContent className="pt-1 pb-4 text-muted-foreground">
+              JavaScript and TypeScript. JavaScript for its versatility and
+              dynamic nature, and TypeScript for adding that extra layer of type
+              safety and structure. Together, they&apos;re the perfect duo for
+              building robust applications!
+            </AccordionContent>
+          </AccordionItem>
+
+          <AccordionItem value="item-3" className="border-b border-border">
+            <AccordionTrigger className="flex justify-between items-center py-4 font-medium transition-all   [&[data-state=open]>svg]:rotate-180">
+              Coffee or tea?
+            </AccordionTrigger>
+            <AccordionContent className="pt-1 pb-4 text-muted-foreground">
+              Definitely coffee. Paris runs on it, after all!
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
     </div>
   );
 }

components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+
+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, AccordionContent, AccordionItem, AccordionTrigger };

package.json

@@ -10,6 +10,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-separator": "^1.1.0",

tailwind.config.ts

@@ -55,6 +55,28 @@ const config: Config = {
   			lg: 'var(--radius)',
   			md: 'calc(var(--radius) - 2px)',
   			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
   		}
   	}
   },