[V0_FILE]typescriptreact:file="app/projects/page.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { ArrowLeft } from "lucide-react" export default function ProjectsPage() { return (

Shuaib Karim

All Projects

A collection of my work across various industries and design challenges.

{/* Project 1 */}

View Project

Finance App Redesign

Reimagining a personal finance application with improved usability and visual design.

UX Research

UI Design

Prototyping

{/* Project 2 */}

View Project

Health Tracker App

A comprehensive health monitoring application designed for accessibility and ease of use.

User Testing

Interaction Design

Visual Design

{/* Project 3 */}

View Project

Travel Platform

A travel booking platform with an intuitive booking flow and personalized recommendations.

UX Strategy

Information Architecture

UI Design

{/* Project 4 */}

View Project

E-commerce Redesign

Revamping an online shopping experience with a focus on conversion and user satisfaction.

Conversion Optimization

UI Design

A/B Testing

{/* Project 5 */}

View Project

Education Platform

An online learning platform designed to enhance student engagement and knowledge retention.

Educational UX

Accessibility

UI Design

{/* Project 6 */}

View Project

Social Networking App

A community-focused social platform that prioritizes meaningful connections and user privacy.

Social UX

Interaction Design

Prototyping

) } [V0_FILE]typescriptreact:file="app/projects/[slug]/page.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { ArrowLeft, ExternalLink } from "lucide-react" export default function ProjectPage({ params }: { params: { slug: string } }) { // In a real application, you would fetch project data based on the slug const projectData = { title: "Finance App Redesign", description: "Reimagining a personal finance application with improved usability and visual design.", client: "FinTech Solutions Inc.", duration: "3 months", role: "Lead UI/UX Designer", tags: ["UX Research", "UI Design", "Prototyping"], overview: "The client approached me to redesign their existing finance application which was suffering from poor user engagement and high drop-off rates. The goal was to create a more intuitive, visually appealing interface that would help users better manage their finances.", challenge: "The existing application had a complex information architecture and outdated visual design. Users found it difficult to navigate and complete basic tasks like checking their balance or making transactions.", process: [ { title: "Research", description: "I conducted user interviews, competitive analysis, and heuristic evaluation to understand pain points and opportunities.", }, { title: "Information Architecture", description: "I reorganized the app structure to create a more logical flow and reduce cognitive load.", }, { title: "Wireframing", description: "I created low-fidelity wireframes to test different layouts and navigation patterns.", }, { title: "Visual Design", description: "I developed a modern visual language with a clean, accessible interface that aligned with the brand.", }, { title: "Prototyping & Testing", description: "I built interactive prototypes and conducted usability testing to validate design decisions.", }, ], outcome: "The redesigned application saw a 45% increase in daily active users and a 60% reduction in support tickets related to usability issues. The client reported a 30% increase in transaction volume within the first month after launch.", } return (

Shuaib Karim

{projectData.title}

{projectData.description}

Client

{projectData.client}

Duration

{projectData.duration}

Role

{projectData.role}

{projectData.tags.map((tag, index) => (

{tag}

))}

Overview

{projectData.overview}

Challenge

{projectData.challenge}

Process

{projectData.process.map((step, index) => (

{index + 1}

{step.title}

{step.description}

))}

Outcome

{projectData.outcome}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Shuaib Karim | UI/UX Designer", description: "Professional portfolio of Shuaib Karim, UI/UX Designer based in Gilgit, Pakistan", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 270 50% 40%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 270 50% 40%; --accent-foreground: 0 0% 98%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 270 50% 40%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 270 50% 60%; --primary-foreground: 0 0% 98%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 270 50% 60%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 270 50% 60%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .gradient-text { @apply bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-indigo-600; } .gradient-border { position: relative; border-radius: 0.5rem; overflow: hidden; } .gradient-border::before { content: ""; position: absolute; inset: 0; border-radius: 0.5rem; padding: 2px; background: linear-gradient(to right, #a78bfa, #818cf8); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { useToast } from "@/hooks/use-toast" import { Download, Send, Linkedin, ExternalLink, Mail, Phone, MapPin, Menu, X } from "lucide-react" export default function Home() { const { toast } = useToast() const [name, setName] = useState("") const [email, setEmail] = useState("") const [message, setMessage] = useState("") const [isSubmitting, setIsSubmitting] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [activeSection, setActiveSection] = useState("home") useEffect(() => { const handleScroll = () => { const sections = ["home", "about", "work", "contact"] for (const section of sections) { const element = document.getElementById(section) if (element) { const rect = element.getBoundingClientRect() if (rect.top <= 100 && rect.bottom >= 100) { setActiveSection(section) break } } } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { // In a real implementation, you would send this data to your backend // For now, we'll simulate a successful submission await new Promise((resolve) => setTimeout(resolve, 1000)) toast({ title: "Message sent!", description: "Thank you for reaching out. I'll get back to you soon.", }) // Reset form setName("") setEmail("") setMessage("") } catch (error) { toast({ title: "Something went wrong", description: "Your message couldn't be sent. Please try again.", variant: "destructive", }) } finally { setIsSubmitting(false) } } const scrollToSection = (sectionId: string) => { const element = document.getElementById(sectionId) if (element) { element.scrollIntoView({ behavior: "smooth" }) } setMobileMenuOpen(false) } return (

{/* Header */}

Shuaib Karim {/* Desktop Navigation */}

{/* Mobile Menu Button */}

{/* Mobile Navigation */} {mobileMenuOpen && (

)}

{/* Hero Section */}

Hi, I'm Shuaib Karim

UI/UX Designer

Creative and detail-focused designer with 5 years of experience crafting user-friendly and visually stunning digital experiences.

{/* About Section */}

About Me

I'm a UI/UX Designer with 5 years of experience crafting user-friendly and visually stunning designs. My expertise spans UX research, UI design, app development, and website creation.

Experience

UI/UX Designer

Dot Austere | 04/2020 - 12/2024

Designed user-centric interfaces for 10+ mobile and web applications
Conducted UX research and usability testing
Built and maintained scalable design systems

Freelance UI/UX Designer

Upwork/Fiverr | 12/2017 - Present

Completed over 100+ projects with 100% Job Success Score
Delivered customized designs tailored to clients' needs

Skills & Education

Design Skills

Figma, Adobe XD, Sketch, Photoshop, Illustrator, InVision, Proto.io, Zeplin

Specialties

UX Research, Wireframing, Prototyping, Interaction Design, Usability Testing

Education

BS (GIS) & Remote Sensing

Karakoram International University | 2020 - Present

{/* Work Section */}

My Work

Check out my portfolio on Behance to see my latest projects and designs.

View My Portfolio

Explore my UI/UX design projects, including mobile apps, websites, and design systems.

UI Design

Creating visually appealing interfaces with a focus on aesthetics and brand consistency.

UX Research

Conducting user research to understand needs and behaviors for informed design decisions.

Interaction Design

Designing intuitive interactions that enhance the overall user experience.

{/* Contact Section */}

Get In Touch

Contact Information

shuaibkarim302@gmail.com

+92 316 746 9390

Gilgit, Pakistan

Connect With Me

Send Me a Message

Name setName(e.target.value)} placeholder="Your name" required />

Email setEmail(e.target.value)} placeholder="Your email" required />

Message

setMessage(e.target.value)}
                        placeholder="Your message"
                        rows={4}
                        required
                      />
                    </div>
                    <Button type="submit" className="w-full" disabled={isSubmitting}>
                      {isSubmitting ? (
                        <span className="flex items-center">
                          <svg
                            className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              className="opacity-25"
                              cx="12"
                              cy="12"
                              r="10"
                              stroke="currentColor"
                              strokeWidth="4"
                            ></circle>
                            <path
                              className="opacity-75"
                              fill="currentColor"
                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                            ></path>
                          </svg>
                          Sending...
                        </span>
                      ) : (
                        <span className="flex items-center">
                          <Send className="mr-2 h-4 w-4" />
                          Send Message
                        </span>
                      )}
                    </Button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

{/* Footer */}
      <footer className="py-6 border-t border-border">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-sm text-muted-foreground">
              © {new Date().getFullYear()} Shuaib Karim. All rights reserved.
            </p>
            <div className="flex space-x-6 mt-4 md:mt-0">
              <a
                href="https://www.linkedin.com/in/shuaib-karim-551841232/"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground hover:text-primary"
              >
                LinkedIn
              </a>
              <a
                href="https://www.behance.net/shuaibkarim"
                target="_blank"
                rel="noopener noreferrer"
                className="text-muted-foreground hover:text-primary"
              >
                Behance
              </a>
              <a href="mailto:shuaibkarim302@gmail.com" className="text-muted-foreground hover:text-primary">
                Email
              </a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/api/contact/route.ts"
import { NextResponse } from "next/server"

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { name, email, message } = body

// Validate the request
    if (!name || !email || !message) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

// In a real implementation, you would send an email here
    // For example, using a service like SendGrid, Mailgun, or AWS SES

// Example code for sending email (commented out)
    /*
    const emailData = {
      to: "shuaibkarim302@gmail.com",
      from: "your-verified-sender@example.com",
      subject: `New message from ${name}`,
      text: `
        Name: ${name}
        Email: ${email}
        
        Message:
        ${message}
      `,
    }
    
    await sendEmail(emailData)
    */

// For now, we'll just return a success response
    return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error in contact form submission:", error)
    return NextResponse.json({ error: "Failed to send message" }, { status: 500 })
  }
}

[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

type ToastVariants = VariantProps<typeof toastVariants>

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}

[V0_FILE]typescriptreact:file="components/ui/toaster.tsx"
"use client"

import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast"
import { useToast } from "@/hooks/use-toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(({ id, title, description, action, ...props }) => (
        <Toast key={id} {...props}>
          <div className="grid gap-1">
            {title && <ToastTitle>{title}</ToastTitle>}
            {description && <ToastDescription>{description}</ToastDescription>}
          </div>
          {action}
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </ToastProvider>
  )
}

[V0_FILE]typescriptreact:file="hooks/use-toast.ts"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type { ToastActionElement, ToastProps } from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_VALUE
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }

[V0_FILE]typescriptreact:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        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",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
</article></body></html>