Initial commit - Manoj Guttikonda portfolio

.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+.output
+.vinxi
+.tanstack/**
+.nitro
+*.local
+
+# Wrangler / Cloudflare
+.wrangler/
+.dev.vars
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.output
+.vinxi
+pnpm-lock.yaml
+package-lock.json
+bun.lock
+routeTree.gen.ts

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all"
+}

Dockerfile

@@ -0,0 +1,15 @@
+FROM oven/bun:1-slim
+
+WORKDIR /app
+
+COPY package.json bun.lock bunfig.toml ./
+RUN bun install --frozen-lockfile
+
+COPY . .
+RUN bun run build
+
+EXPOSE 7860
+ENV PORT=7860
+ENV HOST=0.0.0.0
+
+CMD ["node", ".output/server/index.mjs"]

README.md

@@ -0,0 +1,211 @@
+# Manoj Guttikonda — Portfolio
+
+Personal portfolio website for **Manoj Guttikonda** — MS Business Analytics @ UNT, ex-Accenture Cloud Operations Engineer.
+
+Live at: _[your deployed URL here]_
+
+---
+
+## Tech Stack
+
+| Layer | Technology |
+|---|---|
+| Framework | React 19 + TanStack Start (SSR) |
+| Routing | TanStack Router |
+| Styling | Tailwind CSS v4 |
+| Animations | Framer Motion |
+| Icons | Lucide React |
+| UI Components | shadcn/ui (Radix UI) |
+| Font (body) | Carlito (Calibri-equivalent, Google Fonts) |
+| Font (display) | Bebas Neue (Google Fonts) |
+| Package manager | Bun |
+| Build tool | Vite + Nitro |
+
+---
+
+## Project Structure
+
+```
+src/
+├── assets/
+│   └── manoj.jpg                  # Profile photo
+├── components/
+│   ├── portfolio/                 # All portfolio section components
+│   │   ├── Nav.tsx                # Navigation bar (desktop + mobile)
+│   │   ├── Hero.tsx               # Hero section (name, photo, intro)
+│   │   ├── Timeline.tsx           # Career journey (undergrad → Accenture → UNT)
+│   │   ├── Projects.tsx           # Featured projects + research publications
+│   │   ├── Skills.tsx             # Skills toolkit (4 categories)
+│   │   ├── Education.tsx          # Education + internships
+│   │   ├── Credentials.tsx        # Certifications, honors, campus experience
+│   │   ├── About.tsx              # About section
+│   │   └── Contact.tsx            # Contact section
+│   └── ui/                        # shadcn/ui base components (do not edit)
+├── hooks/
+│   └── use-mobile.tsx             # Mobile breakpoint hook
+├── lib/
+│   ├── links.ts                   # All URLs (email, resume, GitHub, LinkedIn, HF)
+│   ├── error-capture.ts           # Error capture utility
+│   ├── error-page.ts              # SSR error page renderer
+│   ├── lovable-error-reporting.ts # Error reporting (Lovable platform)
+│   └── utils.ts                   # Tailwind class merge utility
+├── routes/
+│   ├── __root.tsx                 # Root layout + global head meta
+│   └── index.tsx                  # Home page (assembles all sections)
+├── router.tsx                     # TanStack Router setup
+├── server.ts                      # SSR server entry
+├── start.ts                       # App start entry
+└── styles.css                     # Global CSS + Tailwind theme + custom fonts
+public/
+└── favicon.svg                    # MG favicon (navy + orange)
+```
+
+---
+
+## Customising Content
+
+All personalisation lives in just a few files:
+
+### 1. Links & URLs — `src/lib/links.ts`
+```ts
+export const CONTACT_EMAIL = "your@email.com";
+export const RESUME_URL    = "https://...";
+export const LINKEDIN_URL  = "https://linkedin.com/in/yourhandle";
+export const GITHUB_URL    = "https://github.com/yourhandle";
+export const HUGGING_FACE_URL = "https://huggingface.co/yourhandle";
+```
+
+### 2. Photo — `src/assets/manoj.jpg`
+Replace with your own photo. Keep the filename or update the import in `Hero.tsx`.
+
+### 3. Hero section — `src/components/portfolio/Hero.tsx`
+- Name, tagline, bio paragraphs
+- Role badges
+- Metric strip (GPA, months of experience, etc.)
+
+### 4. Projects — `src/components/portfolio/Projects.tsx`
+Each project is an object in the `projects` array:
+```ts
+{
+  id: "unique-id",
+  era: "UNT - Graduate" | "Accenture" | "Undergrad" | "Independent",
+  title: "Project Title",
+  tagline: "One-line description.",
+  period: "Jan 2025 - May 2025",
+  details: ["bullet 1", "bullet 2", "bullet 3"],
+  stack: ["Python", "AI"],
+  links: [{ label: "View Code", href: "https://github.com/..." }],
+}
+```
+
+### 5. Skills — `src/components/portfolio/Skills.tsx`
+Edit the `groups` array to add/remove skills.
+
+### 6. Timeline — `src/components/portfolio/Timeline.tsx`
+Edit the `items` array for career milestones.
+
+### 7. Education — `src/components/portfolio/Education.tsx`
+Edit `edu` and `internships` arrays.
+
+### 8. Credentials — `src/components/portfolio/Credentials.tsx`
+Edit `certs`, `honors`, `leadership`, and `campusExperience` arrays.
+
+### 9. Global styles — `src/styles.css`
+- `html { font-size: 19px; }` — base font scale
+- `--font-sans` — body font
+- `--font-display` — heading font (Bebas Neue)
+- Color tokens: `--navy`, `--accent`, `--chakra`
+
+### 10. SEO meta — `src/routes/index.tsx`
+Update `pageTitle` and `pageDescription` constants.
+
+---
+
+## Local Development
+
+```bash
+# Install dependencies
+bun install
+
+# Start dev server
+bun run dev
+# Open http://localhost:5173
+```
+
+---
+
+## Deployment — HuggingFace Spaces
+
+### Option A: Docker Space (Recommended)
+
+1. Create a new Space on [huggingface.co/spaces](https://huggingface.co/spaces)
+2. Choose **Docker** as the Space SDK
+3. Clone the Space repo and copy this project into it
+4. Add the `Dockerfile` (included in this repo) at the root
+5. Push — HuggingFace builds and deploys automatically
+
+The `Dockerfile` installs Bun, builds the app, and serves it on port **7860**.
+
+### Option B: Static Build
+
+If you want a pure static output (no server), change `vite.config.ts`:
+
+```ts
+export default defineConfig({
+  tanstackStart: {
+    server: { entry: "server" },
+    nitro: { preset: "static" },   // add this line
+  },
+});
+```
+
+Then:
+```bash
+bun run build
+# Upload contents of .output/public/ to a Static Space or any static host
+```
+
+---
+
+## Deployment — Other Platforms
+
+| Platform | How |
+|---|---|
+| Vercel | Connect GitHub repo, auto-detected as Vite project |
+| Netlify | `bun run build`, publish `.output/public/` |
+| Cloudflare Pages | Default build target is already `cloudflare` |
+
+---
+
+## LinkedIn Profile Update
+
+Add the following to your LinkedIn:
+
+- **Portfolio URL** in the intro/contact section: your deployed URL
+- **Featured section**: screenshot of the portfolio homepage, link to live site
+- **About section**: mirror the hero bio text
+- **Skills section**: pull from `Skills.tsx` groups
+- **Projects section**: add each project from `Projects.tsx` with GitHub links
+
+---
+
+## OG Image (Social Share Preview)
+
+Add a `1200 × 630 px` image named `og.jpg` to the `/public` folder.
+When someone shares your portfolio link on LinkedIn or Twitter, this image shows as the preview thumbnail.
+
+---
+
+## Current Portfolio Details
+
+| Item | Value |
+|---|---|
+| Name | Manoj Guttikonda |
+| Email | guttikondamanoj7@gmail.com |
+| LinkedIn | linkedin.com/in/manojguttikonda |
+| GitHub | github.com/im-mj |
+| HuggingFace | huggingface.co/MrNoOne07 |
+| Degree | MS Business Analytics, UNT (Aug 2024 – May 2026), GPA 3.8 |
+| Experience | Cloud Ops Engineer @ Accenture, Oct 2021 – Jun 2024 (33 months) |
+| Certifications | AZ-104, AZ-500, Azure Fundamentals, Palo Alto, VMware, AWS |
+| Research | AI-Driven Malicious URL Detection — BIGS 2025 & SWDSI 2026 |

bunfig.toml

@@ -0,0 +1,6 @@
+[install]
+# 24h supply-chain guard: skip package versions published less than a day ago.
+minimumReleaseAge = 86400
+# Each entry bypasses the 24h guard for one package - confirm with the user
+# before adding any.
+minimumReleaseAgeExcludes = ["@lovable.dev/vite-tanstack-config"]

components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "css": "src/styles.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

docs/PROJECT_STRUCTURE.md

@@ -0,0 +1,36 @@
+# Project Structure
+
+This app is a Vite/TanStack React portfolio. Some files must stay in the project root because the build tools look for them there.
+
+## Root Files
+
+- `package.json` - npm scripts and dependencies.
+- `package-lock.json` - exact installed dependency versions for npm.
+- `bun.lock`, `bunfig.toml` - Bun dependency settings kept from the original export.
+- `vite.config.ts` - Vite app configuration.
+- `tsconfig.json` - TypeScript configuration.
+- `eslint.config.js` - linting configuration.
+- `components.json` - shadcn/ui component configuration.
+- `.gitignore`, `.prettierignore`, `.prettierrc` - repo and formatting settings.
+- `Dockerfile` - container build settings.
+- `README.md` - app notes and setup.
+
+## Folders
+
+- `src/` - actual portfolio source code.
+- `src/components/portfolio/` - custom portfolio UI, organized by layout and sections.
+- `src/components/ui/` - reusable design-system components.
+- `src/assets/` - local images used by the app.
+- `public/` - public static files such as favicon.
+- `scripts/windows/` - Windows scripts for starting the local dev server.
+- `logs/` - local dev-server logs.
+- `docs/` - documentation about this project.
+
+## Generated Folders
+
+These are created by tools and should usually not be edited manually:
+
+- `node_modules/` - installed npm packages.
+- `dist/` - production build output.
+- `.tanstack/` - TanStack generated runtime files.
+- Original platform metadata was archived to `workspace-docs/legacy-lovable-project-metadata/` because the local portfolio does not need it to run.

eslint.config.js

@@ -0,0 +1,40 @@
+import js from "@eslint/js";
+import eslintPluginPrettier from "eslint-plugin-prettier/recommended";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist", ".output", ".vinxi"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "no-restricted-imports": [
+        "error",
+        {
+          paths: [
+            {
+              name: "server-only",
+              message:
+                "TanStack Start does not use the Next.js `server-only` package. Rename the module to `*.server.ts` or mark it with `@tanstack/react-start/server-only`.",
+            },
+          ],
+        },
+      ],
+      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
+  eslintPluginPrettier,
+);

package.json

@@ -0,0 +1,88 @@
+{
+  "name": "tanstack_start_ts",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "build:dev": "vite build --mode development",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/react-query": "^5.83.0",
+    "@tanstack/react-router": "^1.168.25",
+    "@tanstack/react-start": "^1.167.50",
+    "@tanstack/router-plugin": "^1.167.28",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.40.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.575.0",
+    "react": "^19.2.0",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.71.2",
+    "react-resizable-panels": "^4.6.5",
+    "recharts": "^2.15.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1",
+    "tw-animate-css": "^1.3.4",
+    "vaul": "^1.1.2",
+    "vite-tsconfig-paths": "^6.0.2",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "@lovable.dev/vite-tanstack-config": "^2.1.1",
+    "@types/node": "^22.16.5",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^15.15.0",
+    "nitro": "3.0.260429-beta",
+    "prettier": "^3.7.3",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^7.3.1"
+  }
+}

scripts/windows/run-dev-live.cmd

@@ -0,0 +1,4 @@
+@echo off
+cd /d "%~dp0..\.."
+set "PATH=C:\Program Files\nodejs;%PATH%"
+"C:\Program Files\nodejs\npm.cmd" run dev -- --host 127.0.0.1 --port 5173

scripts/windows/run-dev.cmd

@@ -0,0 +1,4 @@
+@echo off
+cd /d "%~dp0..\.."
+set "PATH=C:\Program Files\nodejs;%PATH%"
+"C:\Program Files\nodejs\npm.cmd" run dev -- --host 127.0.0.1 --port 5173 > logs\dev-server.log 2> logs\dev-server.err.log

src/components/portfolio/README.md

@@ -0,0 +1,27 @@
+# Portfolio Component Folders
+
+This folder contains the custom portfolio UI. The shared design-system components live separately in `src/components/ui`.
+
+## `layout`
+
+Page-level layout pieces that frame the portfolio.
+
+- `SiteNav.tsx` - fixed header, desktop links, mobile menu, resume button.
+
+## `sections`
+
+Rendered page sections, in the same order used by `src/routes/index.tsx`.
+
+- `HeroSection.tsx` - home intro, profile photo, proof stats, primary CTAs.
+- `JourneySection.tsx` - animated three-step journey timeline.
+- `FeaturedProjectsSection.tsx` - profile links, research banner, project cards.
+- `SkillsSection.tsx` - skills/toolkit groups.
+- `EducationSection.tsx` - degrees and internships only.
+- `CredentialsSection.tsx` - certifications, honors, leadership, campus jobs.
+- `ContactSection.tsx` - email and resume contact actions.
+
+## `legacy`
+
+Unused components kept only for reference during cleanup.
+
+- `UnusedAboutSection.tsx` - old standalone About section. The about copy is now merged into the hero.

src/components/portfolio/layout/SiteNav.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import { Menu, X } from "lucide-react";
+import { RESUME_URL } from "@/lib/links";
+
+const links = [
+  { href: "#home", label: "Home" },
+  { href: "#journey", label: "Journey" },
+  { href: "#projects", label: "Projects" },
+  { href: "#skills", label: "Skills" },
+  { href: "#education", label: "Education" },
+  { href: "#contact", label: "Contact" },
+];
+
+export function SiteNav() {
+  const [scrolled, setScrolled] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 20);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  return (
+    <header
+      className={`fixed top-0 inset-x-0 z-50 transition-all ${
+        scrolled || open
+          ? "backdrop-blur-md bg-background/75 border-b border-border/60"
+          : "bg-transparent"
+      }`}
+    >
+      <nav className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-10">
+        <a
+          href="#home"
+          onClick={() => setOpen(false)}
+          className="flex items-center gap-1.5 font-display text-4xl tracking-wide text-navy"
+          aria-label="Go to home"
+        >
+          <span className="inline-flex h-9 w-9 items-center justify-center text-[2.35rem] leading-none text-foreground animate-heartbeat">
+            ☮
+          </span>
+          <span>MG</span>
+        </a>
+
+        <ul className="hidden items-center gap-7 text-base font-bold text-muted-foreground md:flex">
+          {links.map((l) => (
+            <li key={l.href}>
+              <a href={l.href} className="hover:text-accent transition-colors">
+                {l.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+
+        <div className="flex items-center gap-2">
+          <a
+            href={RESUME_URL}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center rounded-full bg-navy px-5 py-2 text-sm font-semibold text-primary-foreground hover:bg-accent transition-colors"
+          >
+            Resume
+          </a>
+          <button
+            type="button"
+            onClick={() => setOpen((current) => !current)}
+            className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card text-navy transition-colors hover:border-accent hover:text-accent md:hidden"
+            aria-label={open ? "Close navigation menu" : "Open navigation menu"}
+            aria-expanded={open}
+          >
+            {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+        </div>
+      </nav>
+
+      {open && (
+        <div className="border-t border-border/60 bg-background/95 px-6 py-4 shadow-lg md:hidden">
+          <ul className="mx-auto grid max-w-7xl gap-2 text-sm font-semibold text-navy">
+            {links.map((l) => (
+              <li key={l.href}>
+                <a
+                  href={l.href}
+                  onClick={() => setOpen(false)}
+                  className="block rounded-xl px-4 py-3 transition-colors hover:bg-accent/10 hover:text-accent"
+                >
+                  {l.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </header>
+  );
+}

src/components/portfolio/legacy/UnusedAboutSection.tsx

@@ -0,0 +1,34 @@
+export function UnusedAboutSection() {
+  return (
+    <section id="about" className="py-24">
+      <div className="mx-auto max-w-7xl px-6 grid md:grid-cols-[auto_1fr] gap-10 items-start">
+        <div>
+          <p className="font-display text-accent text-2xl tracking-widest">ABOUT</p>
+          <h2 className="mt-2 font-display text-5xl text-navy">Hello!</h2>
+        </div>
+        <div className="space-y-5 text-foreground/85 leading-relaxed tracking-wide">
+          <p>
+            I'm the type of human being that loves to make messy data behave and turn
+            complicated stuff into the moments where it was actually logical all along.
+          </p>
+          <p>
+            My first job was in <span className="font-semibold text-navy">cloud + network security at Accenture</span>
+            {" "}(33 months), working with enterprise firewalls and the behind-the-scenes
+            systems that keep things safe. Somewhere in the middle of that path I got hooked
+            on the <em>reason behind the numbers</em> - and now I'm pursuing my{" "}
+            <span className="font-semibold text-navy">MS in Business Analytics at UNT</span>,
+            building projects that combine analytics, automation, and AI.
+          </p>
+          <p>
+            I went so far as to write an automation script that cut manual operations by{" "}
+            <span className="text-accent font-semibold">40%</span>, and I've shipped projects
+            like a BERT-based malicious URL detector (yes, nerdy - but cool :)).
+          </p>
+          <p className="text-navy font-semibold">
+            I believe in turning analytics into secure business strategy.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/portfolio/sections/ContactSection.tsx

@@ -0,0 +1,42 @@
+import { CONTACT_EMAIL, RESUME_URL } from "@/lib/links";
+
+export function ContactSection() {
+  return (
+    <section id="contact" className="py-24 bg-card/40 border-t border-border">
+      <div className="mx-auto max-w-5xl px-6 text-center">
+        <p className="font-display text-accent text-2xl tracking-widest">LET'S TALK</p>
+        <h2 className="mt-2 font-display text-5xl sm:text-6xl text-navy">
+          Let's build something <span className="text-accent">secure & smart</span>.
+        </h2>
+        <p className="mt-5 text-foreground/80 max-w-xl mx-auto">
+          Open to full-time roles in Business Analytics, Data Science, AI/ML
+          Engineering, and Network Security - based in Texas, open to relocation.
+        </p>
+
+        <div className="mt-8 flex flex-wrap justify-center gap-3">
+          <a
+            href={`mailto:${CONTACT_EMAIL}`}
+            className="inline-flex items-center rounded-full bg-navy px-6 py-3 text-base font-semibold text-primary-foreground hover:bg-accent transition-colors"
+          >
+            {CONTACT_EMAIL}
+          </a>
+          <a
+            href={RESUME_URL}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center rounded-full border border-navy/20 bg-card px-6 py-3 text-base font-semibold text-navy hover:border-accent hover:text-accent transition-colors"
+          >
+            Download Resume
+          </a>
+        </div>
+
+        <p className="mt-12 text-sm text-muted-foreground">
+          Dattebayo! Believe it, the right opportunity is one email away.
+        </p>
+        <p className="mt-3 text-xs text-muted-foreground">
+          (c) {new Date().getFullYear()} Manoj Guttikonda
+        </p>
+      </div>
+    </section>
+  );
+}

src/components/portfolio/sections/CredentialsSection.tsx

@@ -0,0 +1,116 @@
+const certs = [
+  "Microsoft Certified: Azure Security Engineer Associate",
+  "Microsoft Azure Administrator - AZ-104",
+  "Microsoft Certified: Azure Fundamentals",
+  "Cybersecurity Foundation - Palo Alto Networks",
+  "IT Academy: Network Virtualization Concepts - VMware",
+  "AWS Academy Graduate - AWS Academy Cloud Foundations",
+  "Cloud Rider - 2020 - EduSkills Foundation",
+  "Data Science Foundation using R - 360DigiTMG",
+  "Machine Learning with Python - Cognitive Class",
+  "Database Management System - NPTEL",
+  "Introduction to Programming in C - NPTEL",
+];
+
+const honors = [
+  "MSBA academic performance - 3.8 GPA at UNT",
+  "CyberSecurity Club, Business Analytics Club, and AIS member at UNT",
+  "Research work published at BIGS 2025 and SWDSI 2026",
+];
+
+const leadership = [
+  "Vice President - College Photography Club",
+  "Indian Film Festival - 2018 (Qualified) & 2019",
+  "Multiple project seminars on Malicious URL Detection",
+  "Hackathon - Bennett University Internship Program",
+];
+
+const campusExperience = [
+  {
+    role: "Instructional Assistant",
+    period: "Jan 2026 - May 2026",
+    details: "Supports course tasks, keeps class activities organized, helps students.",
+  },
+  {
+    role: "Library Student Assistant (Stacks)",
+    period: "Oct 2025 - Jan 2026",
+    details: "Managed shelving, records accuracy and daily workflow.",
+  },
+  {
+    role: "Clark Bakery Student Assistant",
+    period: "Nov 2024 - Oct 2025",
+    details: "Operations, customer service, inventory and food-safety standards.",
+  },
+];
+
+export function CredentialsSection() {
+  return (
+    <section id="credentials" className="py-24 bg-card/40 border-y border-border">
+      <div className="mx-auto max-w-6xl px-6">
+        <p className="font-display text-accent text-2xl tracking-widest">CERTIFICATIONS & ACTIVITIES</p>
+        <h2 className="mt-2 font-display text-5xl text-navy">Credentials</h2>
+
+        <div className="mt-12 rounded-2xl border border-border bg-card p-6">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+            <div>
+              <h3 className="font-display text-xl text-navy">Certifications</h3>
+              <p className="mt-1 text-sm text-muted-foreground">
+                Cloud, cybersecurity, programming, and analytics credentials.
+              </p>
+            </div>
+            <span className="w-fit rounded-full bg-accent/10 px-3 py-1 text-xs font-semibold text-accent">
+              11 credentials
+            </span>
+          </div>
+          <ul className="mt-5 grid gap-3 text-base text-foreground/85 sm:grid-cols-2 lg:grid-cols-3 tracking-wide">
+            {certs.map((c) => (
+              <li key={c} className="flex gap-2 rounded-xl border border-border/70 bg-background/60 px-3 py-2">
+                <span className="text-accent">&gt;</span>
+                <span>{c}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="mt-6 grid gap-6 lg:grid-cols-3">
+          <div className="rounded-2xl border border-border bg-card p-6">
+            <h3 className="font-display text-xl text-navy">Honors & Research</h3>
+            <ul className="mt-4 space-y-3 text-base text-foreground/85 tracking-wide leading-relaxed">
+              {honors.map((h) => (
+                <li key={h} className="flex gap-2">
+                  <span className="text-accent">&gt;</span>
+                  <span>{h}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="rounded-2xl border border-border bg-card p-6 lg:col-span-2">
+            <h3 className="font-display text-xl text-navy">Leadership & Activities</h3>
+            <ul className="mt-4 grid gap-3 text-sm text-foreground/85 sm:grid-cols-2">
+              {leadership.map((l) => (
+                <li key={l} className="flex gap-2 rounded-xl border border-border/70 bg-background/60 px-3 py-2">
+                  <span className="text-accent">&gt;</span>
+                  <span>{l}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div className="mt-6 rounded-2xl border border-border bg-card p-6">
+          <h3 className="font-display text-2xl text-navy">Campus Experience - UNT</h3>
+          <div className="mt-4 grid gap-5 text-base md:grid-cols-3">
+            {campusExperience.map((job) => (
+              <div key={job.role}>
+                <p className="font-semibold text-lg text-navy">{job.role}</p>
+                <p className="text-sm text-muted-foreground">{job.period}</p>
+                <p className="mt-1 text-base text-foreground/80">{job.details}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/portfolio/sections/EducationSection.tsx

@@ -0,0 +1,102 @@
+const edu = [
+  {
+    school: "University of North Texas",
+    degree: "M.S. in Business Analytics",
+    period: "Aug 2024 - May 2026",
+    location: "Denton, TX",
+    gpa: "3.8 / 4.0",
+  },
+  {
+    school: "SRK Institute of Technology",
+    degree: "B.Tech, Computer Science Engineering",
+    period: "Jun 2017 - Aug 2021",
+    location: "India",
+    gpa: "3.5 / 4.0",
+  },
+];
+
+const internships = [
+  {
+    company: "Gustovalley Technovations",
+    role: "Internship Trainee",
+    period: "Jul 2020",
+    location: "Andhra Pradesh, India",
+    points: [
+      "Completed an Industry 4.0 internship certification in online mode.",
+      "Attended workshops on cloud computing, AI, IoT, integrated systems, augmented reality, and Android mobility solutions.",
+    ],
+  },
+  {
+    company: "Bennett University",
+    role: "Intern",
+    period: "Dec 2019",
+    location: "Greater Noida, India",
+    points: [
+      "Completed an ML project on emotion recognition using EEG signals.",
+      "Attended AI and machine learning workshops and collaborated with participants across India.",
+    ],
+  },
+];
+
+export function EducationSection() {
+  return (
+    <section id="education" className="py-24">
+      <div className="mx-auto max-w-6xl px-6">
+        <p className="font-display text-accent text-2xl tracking-widest">EDUCATION</p>
+        <h2 className="mt-2 font-display text-5xl text-navy">Education</h2>
+
+        <div className="mt-12 grid gap-6 lg:grid-cols-2">
+          {edu.map((e) => (
+            <div key={e.school} className="rounded-2xl border border-border bg-card p-6">
+              <p className="font-display text-2xl text-navy">{e.school}</p>
+              <p className="mt-2 text-base font-semibold text-foreground/85">{e.degree}</p>
+              <p className="mt-2 text-sm text-muted-foreground">
+                {e.period} - {e.location}
+              </p>
+              <p className="mt-4 inline-flex rounded-full bg-accent/10 px-3 py-1 text-xs font-semibold text-accent">
+                GPA: {e.gpa}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-10">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+            <div>
+              <h3 className="font-display text-3xl text-navy">Internships</h3>
+              <p className="mt-1 text-sm text-muted-foreground">
+                Early technical training in AI, Industry 4.0, and machine learning.
+              </p>
+            </div>
+            <span className="w-fit rounded-full bg-chakra/10 px-3 py-1 text-xs font-semibold text-chakra">
+              2 internships
+            </span>
+          </div>
+
+          <div className="mt-5 grid gap-5 md:grid-cols-2">
+            {internships.map((internship) => (
+              <div key={internship.company} className="rounded-2xl border border-border bg-card p-5">
+                <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
+                  <div>
+                    <p className="font-semibold text-navy">{internship.role}</p>
+                    <p className="text-sm text-foreground/80">{internship.company}</p>
+                  </div>
+                  <p className="text-xs uppercase tracking-wider text-muted-foreground">{internship.period}</p>
+                </div>
+                <p className="mt-1 text-xs text-muted-foreground">{internship.location}</p>
+                <ul className="mt-4 space-y-2 text-base text-foreground/85 tracking-wide leading-relaxed">
+                  {internship.points.map((point) => (
+                    <li key={point} className="flex gap-2">
+                      <span className="text-accent">&gt;</span>
+                      <span>{point}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/portfolio/sections/FeaturedProjectsSection.tsx

@@ -0,0 +1,449 @@
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ExternalLink, FileText, Github, Linkedin } from "lucide-react";
+import { CONTACT_EMAIL, GITHUB_URL, HUGGING_FACE_URL, LINKEDIN_URL } from "@/lib/links";
+
+type Project = {
+  id: string;
+  era: "UNT - Graduate" | "Accenture" | "Undergrad" | "Independent";
+  title: string;
+  tagline: string;
+  period: string;
+  details: string[];
+  stack: string[];
+  links?: {
+    label: string;
+    href: string;
+  }[];
+};
+
+const projects: Project[] = [
+  {
+    id: "alive-agents",
+    era: "Independent",
+    title: "Alive - AI Agent Orchestrator",
+    tagline: "Full-stack platform that assembles AI dev teams for any coding task.",
+    period: "2026",
+    details: [
+      "Spawns 5 role-based agents (Team Lead, Architect, FE Dev, BE Dev, Tester) per project.",
+      "Each agent runs on a different AI provider (DeepSeek, Qwen, Kimi, GLM, GPT) - all in parallel.",
+      "Isolated git worktrees per agent, real-time progress tracking, and live iframe preview.",
+    ],
+    stack: ["TypeScript", "Next.js", "Multi-Agent AI", "React", "Prisma"],
+    links: [
+      {
+        label: "View Code",
+        href: "https://github.com/im-mj/Agents-",
+      },
+    ],
+  },
+  {
+    id: "nimbus-bank",
+    era: "Independent",
+    title: "Nimbus Bank - AI Triage System",
+    tagline: "LangGraph multi-agent pipeline for banking customer support.",
+    period: "Apr 2026",
+    details: [
+      "Built a LangGraph multi-agent system to classify and route banking support tickets.",
+      "Agents handle intent detection, policy lookup, escalation, and resolution - end to end.",
+      "Delivered full PRD, architecture diagram, and live Streamlit demo for Wipro pre-screening.",
+    ],
+    stack: ["Python", "LangGraph", "LLM", "Streamlit", "Multi-Agent"],
+    links: [
+      {
+        label: "View Code",
+        href: "https://github.com/im-mj/Nimbus-Bank-Triage",
+      },
+    ],
+  },
+  {
+    id: "ghost-job-hunter",
+    era: "Independent",
+    title: "Ghost Job Hunter",
+    tagline: "Chrome extension concept for spotting suspicious or stale job posts.",
+    period: "2026",
+    details: [
+      "Flags ghost-job warning signs such as stale listings, repeated postings, vague role signals, and weak hiring intent.",
+      "Uses an AI-assisted scoring flow to help job seekers focus on real opportunities instead of wasting applications.",
+      "Connects analytics, recruiting pain points, and browser automation into a practical job-search tool.",
+    ],
+    stack: ["Chrome Extension", "JavaScript", "AI Scoring", "Job Analytics"],
+    links: [
+      {
+        label: "View Code",
+        href: "https://github.com/im-mj/Ghost-Job-Hunter",
+      },
+    ],
+  },
+  {
+    id: "smartscreen",
+    era: "UNT - Graduate",
+    title: "SmartScreen - AI Resume Analyzer",
+    tagline: "AI-driven resume scoring & ATS-match feedback.",
+    period: "Jan 2025 - May 2025",
+    details: [
+      "Designed an AI scoring engine that grades resumes against a target JD and highlights ATS-killing gaps.",
+      "Generates targeted feedback so candidates can iterate quickly instead of guessing.",
+      "Built as an end-to-end concept: parsing -> scoring -> recommendations.",
+    ],
+    stack: ["Python", "NLP", "AI", "Data Analysis"],
+  },
+  {
+    id: "cvs",
+    era: "UNT - Graduate",
+    title: "CVS Pharmacy Strategy Thesis",
+    tagline: "Analytics-backed strategy across Finance, Marketing, Ops, HR & AI.",
+    period: "Jan 2025 - May 2025",
+    details: [
+      "Deep-dived 10-K filings and market data to build a cross-functional growth thesis.",
+      "Layered AI/automation recommendations on top of traditional strategy frames.",
+      "Delivered as a board-style presentation with prioritized initiatives.",
+    ],
+    stack: ["Research", "10-K Analysis", "Strategy", "Presentations"],
+  },
+  {
+    id: "jobs",
+    era: "UNT - Graduate",
+    title: "Job Market Analysis",
+    tagline: "Interactive Tableau dashboards on hiring trends & skills demand.",
+    period: "Aug 2024 - Dec 2024",
+    details: [
+      "Cleaned and modeled a multi-source job postings dataset.",
+      "Built dashboards that surface skill demand, salary bands, and role trajectories.",
+      "Designed for non-technical stakeholders to filter and self-serve.",
+    ],
+    stack: ["Tableau", "Data Viz", "SQL"],
+  },
+  {
+    id: "spend",
+    era: "UNT - Graduate",
+    title: "Student Spending Analysis",
+    tagline: "Regression + ANOVA on monthly student spend patterns.",
+    period: "Aug 2024 - Dec 2024",
+    details: [
+      "Collected and cleaned a primary dataset from student respondents.",
+      "Used regression and ANOVA to identify which factors actually moved spend.",
+      "Translated stats into plain-English recommendations.",
+    ],
+    stack: ["Minitab", "Excel", "Statistics"],
+  },
+  {
+    id: "smile",
+    era: "UNT - Graduate",
+    title: "Smile Buddy 3000 - Marketing Concept",
+    tagline: "Superhero-themed product campaign with positioning + messaging.",
+    period: "Jul 2025 - Sep 2025",
+    details: [
+      "Built persona, value prop, and a launch narrative around a fun mascot.",
+      "Designed campaign assets and a phased go-to-market plan.",
+    ],
+    stack: ["Marketing Strategy", "Brand", "Advertising"],
+  },
+  {
+    id: "secondlife",
+    era: "UNT - Graduate",
+    title: "Second Life - Organ Matching ML",
+    tagline: "ML pipeline for patient-organ matching and hospital triage.",
+    period: "2025",
+    details: [
+      "Built end-to-end ML pipeline with tiered matching, feature engineering, and model evaluation.",
+      "Modeled patient and hospital journeys; benchmarked classifiers for match scoring accuracy.",
+      "Deployed on HuggingFace Spaces with full architecture diagrams and a presentation deck.",
+    ],
+    stack: ["Python", "ML", "Flask", "SQL", "HuggingFace"],
+    links: [
+      {
+        label: "View Code",
+        href: "https://github.com/im-mj/SecondLife",
+      },
+    ],
+  },
+  {
+    id: "firewall-auto",
+    era: "Accenture",
+    title: "Firewall Rule Automation",
+    tagline: "Cut manual firewall-rule work by ~40% across enterprise estates.",
+    period: "2022 - 2024",
+    details: [
+      "Wrote scripts to push and validate firewall rule updates across multiple devices.",
+      "Reduced manual ticket cycle time and configuration drift.",
+      "Improved rule consistency across Telstra Global's hybrid environments.",
+    ],
+    stack: ["Python", "Shell", "Firewalls", "Automation"],
+  },
+  {
+    id: "malicious-url",
+    era: "Undergrad",
+    title: "Malicious URL Detection (ML)",
+    tagline: "Final-year ML project classifying URLs as safe vs malicious.",
+    period: "Nov 2020 - Feb 2021",
+    details: [
+      "Led a team during lockdown to build, train and evaluate the classifier.",
+      "Engineered URL features and benchmarked multiple ML models.",
+      "Presented results in multiple seminars to faculty and peers.",
+    ],
+    stack: ["Python", "Machine Learning", "Team Lead"],
+    links: [
+      {
+        label: "Research Details",
+        href: "#research-publications",
+      },
+    ],
+  },
+  {
+    id: "mask",
+    era: "Undergrad",
+    title: "COVID Face Mask Detection",
+    tagline: "Computer vision classifier on a custom dataset.",
+    period: "Mar 2020 - May 2020",
+    details: [
+      "Built a face-mask detector with a friend-collected custom dataset.",
+      "Iterated remotely during the early pandemic.",
+    ],
+    stack: ["Python", "ML", "Computer Vision"],
+  },
+  {
+    id: "eeg",
+    era: "Undergrad",
+    title: "Emotion Recognition from EEG Signals",
+    tagline: "Internship concept project applying ML to EEG.",
+    period: "Dec 2019",
+    details: [
+      "Explored ML approaches for classifying emotions from EEG signals.",
+      "Collaborated with multi-location team and a hackathon.",
+    ],
+    stack: ["Python", "ML", "Signal Processing"],
+  },
+];
+
+const researchDetails = [
+  "Presented at BIGS 2025 and published for SWDSI 2026.",
+  "Built around AI-driven malicious URL detection using deep learning and BERT architecture.",
+  "Connects cybersecurity experience with machine learning research and business analytics storytelling.",
+  "Shows research writing, model evaluation, and technical presentation experience.",
+];
+
+function HuggingFaceMark() {
+  return (
+    <span className="flex h-5 w-5 items-center justify-center rounded-md bg-amber-100 text-xs font-black text-amber-700">
+      HF
+    </span>
+  );
+}
+
+const workLinks = [
+  {
+    label: "LinkedIn",
+    href: LINKEDIN_URL,
+    note: "career profile",
+    icon: <Linkedin className="h-5 w-5" />,
+  },
+  {
+    label: "GitHub",
+    href: GITHUB_URL,
+    note: "code projects",
+    icon: <Github className="h-5 w-5" />,
+  },
+  {
+    label: "Hugging Face",
+    href: HUGGING_FACE_URL,
+    note: "AI work",
+    icon: <HuggingFaceMark />,
+  },
+  {
+    label: "Research Paper",
+    href: "#research-publications",
+    note: "BIGS & SWDSI",
+    icon: <FileText className="h-5 w-5" />,
+  },
+];
+
+const eraColors: Record<Project["era"], string> = {
+  "UNT - Graduate": "bg-accent/15 text-accent border-accent/30",
+  Accenture: "bg-chakra/15 text-chakra border-chakra/30",
+  Undergrad: "bg-navy/10 text-navy border-navy/20",
+  Independent: "bg-emerald-600/10 text-emerald-700 border-emerald-600/25",
+};
+
+export function FeaturedProjectsSection() {
+  const [open, setOpen] = useState<string | null>(null);
+  const [researchOpen, setResearchOpen] = useState(false);
+
+  return (
+    <section id="projects" className="py-24">
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="flex items-end justify-between flex-wrap gap-4">
+          <div>
+            <p className="font-display text-accent text-2xl tracking-widest">PROJECTS</p>
+            <h2 className="mt-2 font-display text-5xl text-navy">Featured Work</h2>
+          </div>
+          <p className="text-sm text-muted-foreground max-w-sm">
+            Hover or tap a card to read the story behind it.
+          </p>
+        </div>
+
+        <div className="mt-8 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          {workLinks.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              target={link.href.startsWith("#") ? undefined : "_blank"}
+              rel={link.href.startsWith("#") ? undefined : "noreferrer"}
+              className="group flex items-center justify-between gap-3 rounded-2xl border border-border bg-card px-4 py-4 text-left transition-all hover:border-accent/45 hover:bg-accent/10 hover:shadow-lg hover:shadow-accent/10"
+            >
+              <span className="flex items-center gap-3">
+                <span className="flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-background text-navy transition-colors group-hover:border-accent/35 group-hover:text-accent">
+                  {link.icon}
+                </span>
+                <span>
+                  <span className="block font-display text-xl leading-none text-navy">{link.label}</span>
+                  <span className="mt-1 block text-xs uppercase tracking-[0.14em] text-muted-foreground">
+                    {link.note}
+                  </span>
+                </span>
+              </span>
+              <ExternalLink className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-accent" />
+            </a>
+          ))}
+        </div>
+
+        <motion.div
+          id="research-publications"
+          role="button"
+          tabIndex={0}
+          onClick={() => setResearchOpen((current) => !current)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              setResearchOpen((current) => !current);
+            }
+          }}
+          onMouseEnter={() => setResearchOpen(true)}
+          onMouseLeave={() => setResearchOpen(false)}
+          layout
+          className={`group mt-8 cursor-pointer rounded-2xl border bg-card px-6 py-5 shadow-sm transition-all ${
+            researchOpen ? "border-accent shadow-xl shadow-accent/10" : "border-accent/25 hover:border-accent/40"
+          }`}
+        >
+          <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+            <div>
+              <p className="font-display text-2xl text-navy">Research Publications</p>
+              <p className="mt-1 text-sm text-foreground/75">
+                AI-Driven Malicious URL Detection using Deep Learning and BERT Architecture.
+              </p>
+            </div>
+            <span className="inline-flex w-fit rounded-full border border-accent/30 bg-card px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-accent">
+              Published at BIGS 2025 & SWDSI 2026
+            </span>
+          </div>
+
+          <AnimatePresence initial={false}>
+            {researchOpen && (
+              <motion.div
+                key="research-details"
+                initial={{ opacity: 0, height: 0 }}
+                animate={{ opacity: 1, height: "auto" }}
+                exit={{ opacity: 0, height: 0 }}
+                transition={{ duration: 0.25 }}
+                className="overflow-hidden"
+              >
+                <ul className="mt-5 grid gap-2 text-sm text-foreground/80 md:grid-cols-2 list-disc list-inside">
+                  {researchDetails.map((detail) => (
+                    <li key={detail}>{detail}</li>
+                  ))}
+                </ul>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </motion.div>
+
+        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          {projects.map((p) => {
+            const isOpen = open === p.id;
+            const projectLinks =
+              p.links ?? [
+                {
+                  label: "Request Details",
+                  href: `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(`Project details: ${p.title}`)}`,
+                },
+              ];
+            return (
+              <motion.div
+                key={p.id}
+                role="button"
+                tabIndex={0}
+                onClick={() => setOpen(isOpen ? null : p.id)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    setOpen(isOpen ? null : p.id);
+                  }
+                }}
+                onMouseEnter={() => setOpen(p.id)}
+                onMouseLeave={() => setOpen(null)}
+                layout
+                className={`group relative text-left rounded-2xl border bg-card p-5 overflow-hidden transition-all ${
+                  isOpen ? "border-accent shadow-xl shadow-accent/10" : "border-border hover:border-accent/40"
+                }`}
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <span className={`inline-block text-xs uppercase tracking-[0.18em] font-semibold rounded-full border px-2 py-0.5 ${eraColors[p.era]}`}>
+                    {p.era}
+                  </span>
+                  <span className="text-xs text-muted-foreground">{p.period}</span>
+                </div>
+                <h3 className="mt-3 font-display text-xl text-navy leading-tight">{p.title}</h3>
+                <p className="mt-2 text-sm text-foreground/75 tracking-wide">{p.tagline}</p>
+
+                <AnimatePresence initial={false}>
+                  {isOpen && (
+                    <motion.div
+                      key="details"
+                      initial={{ opacity: 0, height: 0 }}
+                      animate={{ opacity: 1, height: "auto" }}
+                      exit={{ opacity: 0, height: 0 }}
+                      transition={{ duration: 0.25 }}
+                      className="overflow-hidden"
+                    >
+                      <ul className="mt-4 space-y-2 text-base text-foreground/80 list-disc list-inside tracking-wide leading-relaxed">
+                        {p.details.map((d) => (
+                          <li key={d}>{d}</li>
+                        ))}
+                      </ul>
+                      <div className="mt-4 flex flex-wrap gap-2">
+                        {projectLinks.map((link) => (
+                          <a
+                            key={link.label}
+                            href={link.href}
+                            target={link.href.startsWith("#") || link.href.startsWith("mailto:") ? undefined : "_blank"}
+                            rel={link.href.startsWith("#") || link.href.startsWith("mailto:") ? undefined : "noreferrer"}
+                            onClick={(event) => event.stopPropagation()}
+                            className="inline-flex rounded-full border border-navy/20 px-4 py-2 text-xs font-semibold text-navy hover:border-accent hover:text-accent transition-colors"
+                          >
+                            {link.label}
+                          </a>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+
+                <div className="mt-4 flex flex-wrap gap-1.5">
+                  {p.stack.map((s) => (
+                    <span key={s} className="rounded-md bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground tracking-wide">
+                      {s}
+                    </span>
+                  ))}
+                </div>
+
+                <span className="absolute right-4 bottom-4 text-accent text-xs opacity-0 group-hover:opacity-100 transition-opacity">
+                  {isOpen ? "-" : "+"}
+                </span>
+              </motion.div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/portfolio/sections/HeroSection.tsx

@@ -0,0 +1,228 @@
+import { motion } from "framer-motion";
+import manojPhoto from "@/assets/manoj.jpg";
+import { CONTACT_EMAIL } from "@/lib/links";
+
+const roles = [
+  "Business Analytics",
+  "Data Analytics",
+  "Network Security",
+  "AI / ML Engineering",
+  "Data Science",
+];
+
+export function HeroSection() {
+  return (
+    <section id="home" className="relative pt-28 pb-20 overflow-hidden">
+      <div className="absolute inset-0 bg-grid opacity-40 [mask-image:radial-gradient(ellipse_at_center,black,transparent_75%)]" />
+      <div className="relative mx-auto max-w-7xl px-6 lg:px-10 grid lg:grid-cols-[1.25fr_0.85fr] gap-12 xl:gap-16 items-start">
+        <div>
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="inline-flex items-center gap-2 rounded-full border border-accent/40 bg-accent/10 px-3 py-1 text-xs font-semibold text-accent uppercase tracking-wider"
+          >
+            <span className="h-2 w-2 rounded-full bg-accent animate-pulse" />
+            Open to work - Texas (open to relocation)
+          </motion.div>
+
+          <motion.h1
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.05 }}
+            className="mt-5 font-display text-5xl sm:text-6xl lg:text-7xl leading-[0.95] tracking-[0.035em] text-navy"
+          >
+            MANOJ
+            <br />
+            <span className="text-accent">GUTTIKONDA</span>
+          </motion.h1>
+
+          <motion.p
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.6, delay: 0.15 }}
+            className="mt-4 text-base sm:text-lg text-muted-foreground"
+          >
+            Business Analytics&nbsp;-&nbsp;Network Security&nbsp;-&nbsp;AI / ML
+          </motion.p>
+
+          <motion.p
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.6, delay: 0.25 }}
+            className="mt-5 max-w-2xl text-base text-foreground/80 text-balance"
+          >
+            I make messy data behave and turn complicated systems into clear,
+            secure business decisions. <span className="text-accent font-semibold">Dattebayo!</span>
+          </motion.p>
+
+          <motion.div
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.32 }}
+            className="mt-5 max-w-2xl border-l-2 border-accent/50 pl-4 space-y-3 text-sm sm:text-base leading-relaxed text-justify text-foreground/82"
+          >
+            <p>
+              I am an MS Business Analytics candidate at the University of North Texas
+              with a 3.8 GPA and nearly three years of cloud and network security
+              experience at Accenture. My work sits at the intersection of analytics,
+              automation, AI, and secure business operations.
+            </p>
+            <p>
+              At <span className="font-semibold text-navy">Accenture</span>, I worked with
+              enterprise firewalls, VPNs, load balancers, IPS tools, and cloud security
+              workflows. That experience taught me how complex systems operate in real
+              business environments and pushed me to use data to explain problems, measure
+              impact, and support better decisions.
+            </p>
+            <p>
+              I have built automation that reduced manual operations by{" "}
+              <span className="text-accent font-semibold">40%</span> and developed projects
+              in resume intelligence, market analysis, business strategy, and malicious URL
+              detection. I focus on turning messy data and technical complexity into clear,
+              secure, and practical business outcomes.
+            </p>
+          </motion.div>
+
+          <div className="mt-6 flex flex-wrap gap-2">
+            {roles.map((r) => (
+              <span
+                key={r}
+                className="rounded-full border border-border bg-card px-3 py-1 text-sm font-medium text-navy"
+              >
+                {r}
+              </span>
+            ))}
+          </div>
+
+          <div className="mt-7 flex flex-wrap gap-3">
+            <a
+              href="#projects"
+              className="inline-flex items-center rounded-full bg-navy px-6 py-3 text-sm font-semibold text-primary-foreground hover:bg-accent transition-colors"
+            >
+              See my work -&gt;
+            </a>
+            <a
+              href={`mailto:${CONTACT_EMAIL}`}
+              className="inline-flex items-center rounded-full border border-navy/20 bg-card px-6 py-3 text-sm font-semibold text-navy hover:border-accent hover:text-accent transition-colors"
+            >
+              Hire me
+            </a>
+          </div>
+
+          {/* Metric strip */}
+          <div className="mt-8 grid grid-cols-3 gap-3 max-w-xl">
+            {[
+              { k: "3.8", v: "MSBA GPA at University of North Texas" },
+              { k: "33 mo", v: "Cloud operations @ Accenture" },
+              { k: "2x", v: "Published AI research conferences" },
+            ].map((m) => (
+              <div key={m.k} className="rounded-xl border border-border bg-card/70 p-3">
+                <div className="font-display text-3xl text-accent">{m.k}</div>
+                <div className="mt-1 text-xs leading-tight text-muted-foreground">{m.v}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, scale: 0.92, y: 24 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          transition={{ duration: 0.9, ease: "easeOut" }}
+          className="relative mx-auto lg:mr-0 w-full max-w-[460px] lg:max-w-[560px] lg:mt-24"
+        >
+          {/* colour-shifting glow */}
+          <motion.div
+            aria-hidden="true"
+            className="absolute -inset-10 rounded-[2rem] blur-3xl"
+            animate={{
+              background: [
+                "radial-gradient(ellipse at center, oklch(0.68 0.21 45 / 0.35), oklch(0.62 0.18 215 / 0.2), transparent)",
+                "radial-gradient(ellipse at center, oklch(0.62 0.18 215 / 0.35), oklch(0.22 0.075 265 / 0.2), transparent)",
+                "radial-gradient(ellipse at center, oklch(0.68 0.21 45 / 0.35), oklch(0.62 0.18 215 / 0.2), transparent)",
+              ],
+              scale: [0.95, 1.05, 0.95],
+            }}
+            transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
+          />
+
+          {/* floating orb — top right */}
+          <motion.div
+            aria-hidden="true"
+            className="absolute -right-6 top-8 h-20 w-20 rounded-full border border-accent/40 bg-accent/15"
+            animate={{ y: [0, -16, 0], x: [0, 5, 0], rotate: [0, 15, 0], scale: [1, 1.1, 1] }}
+            transition={{ duration: 4.5, repeat: Infinity, ease: "easeInOut" }}
+          />
+
+          {/* floating orb — bottom left */}
+          <motion.div
+            aria-hidden="true"
+            className="absolute -left-5 bottom-14 h-16 w-16 rounded-2xl border border-chakra/40 bg-chakra/15"
+            animate={{ y: [0, 12, 0], x: [0, -6, 0], rotate: [0, -12, 0], scale: [1, 0.9, 1] }}
+            transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
+          />
+
+          {/* floating dot — top left */}
+          <motion.div
+            aria-hidden="true"
+            className="absolute -left-3 top-24 h-8 w-8 rounded-full bg-accent/25"
+            animate={{ y: [0, -8, 0], opacity: [0.5, 1, 0.5] }}
+            transition={{ duration: 3, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}
+          />
+
+          {/* floating dot — bottom right */}
+          <motion.div
+            aria-hidden="true"
+            className="absolute -right-3 bottom-32 h-6 w-6 rounded-full bg-chakra/30"
+            animate={{ y: [0, 8, 0], opacity: [0.4, 0.9, 0.4] }}
+            transition={{ duration: 3.5, repeat: Infinity, ease: "easeInOut", delay: 1 }}
+          />
+
+          {/* photo frame with 3D tilt */}
+          <motion.div
+            className="relative rounded-[2rem] shadow-2xl shadow-navy/20 [perspective:1200px]"
+            animate={{
+              y: [0, -12, 0],
+              rotateY: [-3, 4, -3],
+              rotateX: [2, -2, 2],
+              scale: [1, 1.012, 1],
+            }}
+            transition={{ duration: 7, repeat: Infinity, ease: "easeInOut" }}
+          >
+            <div className="relative overflow-hidden rounded-[1.55rem]">
+              <motion.img
+                src={manojPhoto}
+                alt="Manoj Guttikonda"
+                className="block aspect-[4/5] w-full object-cover object-center"
+                animate={{ scale: [1, 1.04, 1] }}
+                transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
+              />
+              {/* static colour overlay */}
+              <div className="pointer-events-none absolute inset-0 bg-gradient-to-tr from-navy/10 via-transparent to-accent/10" />
+              {/* shimmer sweep */}
+              <motion.div
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-0"
+                style={{
+                  background: "linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%)",
+                  backgroundSize: "200% 100%",
+                }}
+                animate={{ backgroundPosition: ["200% 0%", "-200% 0%"] }}
+                transition={{ duration: 3.5, repeat: Infinity, ease: "linear", repeatDelay: 2 }}
+              />
+            </div>
+          </motion.div>
+
+          {/* animated badge */}
+          <motion.div
+            className="absolute -bottom-5 right-4 rounded-2xl bg-navy text-primary-foreground px-4 py-2 text-xs font-semibold shadow-lg"
+            animate={{ y: [0, -5, 0], rotate: [-1, 1, -1] }}
+            transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
+          >
+            Believe it.
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

src/components/portfolio/sections/JourneySection.tsx

@@ -0,0 +1,196 @@
+import { useEffect, useRef, useState } from "react";
+
+const items = [
+  {
+    tag: "UNDERGRADUATION",
+    title: "B.Tech, Computer Science Engineering",
+    org: "SRK Institute of Technology - India",
+    period: "Jun 2017 - Aug 2021",
+    points: [
+      "Built a programming and problem-solving foundation.",
+      "Explored machine learning through a malicious URL detection project.",
+      "Served as Vice President of the Photography Club.",
+    ],
+    logo: "undergrad",
+  },
+  {
+    tag: "WORK EXPERIENCE",
+    title: "Cloud Operations Engineer - Telstra Global",
+    org: "Accenture - Bengaluru, India",
+    period: "Oct 2021 - Jun 2024 (33 months)",
+    points: [
+      "Supported Telstra Global's enterprise cloud infrastructure across AWS and Azure environments.",
+      "Administered firewalls, VPNs, load balancers, and IPS to support 99%+ uptime and policy compliance.",
+      "Monitored and triaged network incidents through structured incident management workflows.",
+      "Automated operational processes with scripting to reduce manual workloads.",
+    ],
+    logo: "accenture",
+  },
+  {
+    tag: "GRADUATION",
+    title: "Master's Degree, Business Analytics",
+    org: "University of North Texas - Denton, TX",
+    period: "Aug 2024 - May 2026",
+    points: [
+      "Maintaining a 3.8 GPA in the MSBA program.",
+      "Built AI and analytics projects including Ghost Job Hunter and SmartScreen.",
+      "Published AI-driven malicious URL detection research at BIGS 2025 and SWDSI 2026.",
+    ],
+    logo: "unt",
+  },
+];
+
+const circleDelays = [0, 1200, 2400];
+const textDelays = [420, 1620, 2820];
+const lineDelays = [650, 1850];
+
+function JourneyLogo({ logo }: { logo: string }) {
+  if (logo === "undergrad") {
+    return (
+      <svg
+        viewBox="0 0 180 112"
+        className="h-20 w-24"
+        role="img"
+        aria-label="SRK Institute of Technology"
+      >
+        <path
+          d="M15 65h150v34H15z"
+          fill="#2f2a83"
+        />
+        <path
+          d="M24 64a66 66 0 0 1 132 0h-18a48 48 0 0 0-96 0z"
+          fill="#302c87"
+        />
+        <path
+          d="M90 24v12M64 34l6 10M116 34l-6 10M48 54l12 3M132 54l-12 3"
+          stroke="#f15b2a"
+          strokeWidth="5"
+          strokeLinecap="round"
+        />
+        <path
+          d="M43 65a47 47 0 0 1 94 0"
+          fill="none"
+          stroke="#ffffff"
+          strokeWidth="7"
+        />
+        <text x="90" y="84" textAnchor="middle" fontSize="20" fontWeight="800" fill="#f15b2a">
+          SRK
+        </text>
+        <text x="90" y="101" textAnchor="middle" fontSize="12" fontWeight="700" fill="#ffffff">
+          VIJAYAWADA
+        </text>
+      </svg>
+    );
+  }
+
+  if (logo === "accenture") {
+    return <span className="font-display text-8xl leading-none text-[#8d3ff2]">&gt;</span>;
+  }
+
+  return <span className="font-serif text-5xl font-bold tracking-tight text-[#3d8b3d]">UNT</span>;
+}
+
+export function JourneySection() {
+  const sectionRef = useRef<HTMLElement | null>(null);
+  const [hasEntered, setHasEntered] = useState(false);
+
+  useEffect(() => {
+    const section = sectionRef.current;
+    if (!section) return;
+
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduceMotion) {
+      setHasEntered(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setHasEntered(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.35 },
+    );
+
+    observer.observe(section);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section ref={sectionRef} id="journey" className="pt-16 pb-8 bg-card/40 border-y border-border">
+      <div className="mx-auto max-w-6xl px-6">
+        <div>
+          <p className="font-display text-accent text-2xl tracking-widest">JOURNEY</p>
+          <h2 className="mt-2 font-display text-5xl text-navy">My Journey</h2>
+        </div>
+
+        <div className="relative mt-12">
+          {[0, 1].map((lineIndex) => (
+            <div
+              key={lineIndex}
+              className="absolute top-[88px] hidden h-px overflow-hidden md:block"
+              style={{
+                left: lineIndex === 0 ? "calc(16.666% + 56px)" : "calc(50% + 56px)",
+                width: "calc(33.333% - 112px)",
+              }}
+            >
+              <div
+                className={`h-full origin-left bg-navy/45 transition-transform duration-700 ease-out ${
+                  hasEntered ? "scale-x-100" : "scale-x-0"
+                }`}
+                style={{ transitionDelay: hasEntered ? `${lineDelays[lineIndex]}ms` : "0ms" }}
+              />
+            </div>
+          ))}
+          <div className="grid gap-12 md:grid-cols-3 md:gap-10">
+
+            {items.map((it, index) => (
+              <div
+                key={it.tag}
+                className="group relative z-10 min-h-[320px] text-center"
+              >
+                <p className="font-display text-lg tracking-[0.25em] text-accent">{it.tag}</p>
+
+                <div
+                  className={`relative z-10 mx-auto mt-4 flex h-28 w-28 items-center justify-center rounded-full border-4 border-background bg-card shadow-lg shadow-navy/10 ring-1 ring-border transition-all duration-700 ease-out group-hover:-translate-y-1 group-hover:scale-105 group-focus-within:-translate-y-1 group-focus-within:scale-105 ${
+                    hasEntered ? "translate-x-0 opacity-100" : "-translate-x-40 opacity-0"
+                  }`}
+                  style={{ transitionDelay: hasEntered ? `${circleDelays[index]}ms` : "0ms" }}
+                >
+                  <button
+                    type="button"
+                    className="flex h-full w-full items-center justify-center rounded-full focus:outline-none focus:ring-4 focus:ring-accent/25"
+                    aria-label={`${it.tag} details`}
+                  >
+                    <JourneyLogo logo={it.logo} />
+                  </button>
+                </div>
+
+                <div
+                  className={`mt-7 min-h-[92px] transition-all duration-500 ease-out ${
+                    hasEntered ? "translate-y-0 opacity-100" : "translate-y-3 opacity-0"
+                  }`}
+                  style={{ transitionDelay: hasEntered ? `${textDelays[index]}ms` : "0ms" }}
+                >
+                  <h3 className="font-display text-xl text-navy leading-snug tracking-wide">{it.title}</h3>
+                  <p className="mt-3 text-sm font-medium text-muted-foreground">{it.org}</p>
+                  <p className="mt-2 text-xs uppercase tracking-wider text-foreground/60">{it.period}</p>
+                </div>
+
+                <div className="pointer-events-none absolute left-1/2 top-[318px] z-20 w-[320px] -translate-x-1/2 translate-y-2 rounded-xl border border-border bg-card p-4 text-left text-sm leading-relaxed text-foreground/80 opacity-0 shadow-xl shadow-navy/10 transition-all duration-200 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100">
+                  <ul className="list-disc space-y-2 pl-5">
+                    {it.points.map((point) => (
+                      <li key={point}>{point}</li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/portfolio/sections/SkillsSection.tsx

@@ -0,0 +1,47 @@
+const groups = [
+  {
+    title: "Analytics & Data",
+    items: ["SQL", "Python", "Pandas", "Excel", "Minitab", "Tableau", "Power BI", "Business Analytics", "Statistics", "Regression / ANOVA"],
+  },
+  {
+    title: "AI / ML",
+    items: ["Artificial Intelligence", "Machine Learning", "NLP", "BERT", "TensorFlow", "LLMs", "Computer Vision", "Scikit-learn", "AI Strategy"],
+  },
+  {
+    title: "Security & Cloud",
+    items: ["AWS", "Azure", "Microsoft AZ-104", "Microsoft AZ-500", "Firewalls", "VPNs", "Load Balancers", "IPS", "Cloud Operations"],
+  },
+  {
+    title: "Tools & Workflow",
+    items: ["Git", "Linux", "Shell Scripting", "Automation", "Jira", "ServiceNow", "Presentations"],
+  },
+];
+
+export function SkillsSection() {
+  return (
+    <section id="skills" className="py-24 bg-card/40 border-y border-border">
+      <div className="mx-auto max-w-7xl px-6">
+        <p className="font-display text-accent text-2xl tracking-widest">TOOLKIT</p>
+        <h2 className="mt-2 font-display text-5xl text-navy">Skills</h2>
+
+        <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-4 gap-5">
+          {groups.map((g) => (
+            <div key={g.title} className="rounded-2xl border border-border bg-card p-5">
+              <h3 className="font-display text-lg text-navy">{g.title}</h3>
+              <ul className="mt-3 flex flex-wrap gap-1.5">
+                {g.items.map((i) => (
+                  <li
+                    key={i}
+                    className="rounded-md border border-border bg-background px-2.5 py-1 text-base text-foreground/80"
+                  >
+                    {i}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/ui/accordion.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+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 cursor-pointer transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown 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/components/ui/alert-dialog.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

src/components/ui/alert.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5
+      ref={ref}
+      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+      {...props}
+    />
+  ),
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

src/components/ui/avatar.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

src/components/ui/badge.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  ),
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

src/components/ui/button.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

src/components/ui/calendar.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import * as React from "react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label,
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday,
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day,
+        ),
+        range_start: cn("bg-accent rounded-l-md", defaultClassNames.range_start),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside,
+        ),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return <ChevronLeftIcon className={cn("size-4", className)} {...props} />;
+          }
+
+          if (orientation === "right") {
+            return <ChevronRightIcon className={cn("size-4", className)} {...props} />;
+          }
+
+          return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };

src/components/ui/card.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

src/components/ui/carousel.tsx

@@ -0,0 +1,240 @@
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins,
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) {
+      return;
+    }
+
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext],
+  );
+
+  React.useEffect(() => {
+    if (!api || !setApi) {
+      return;
+    }
+
+    setApi(api);
+  }, [api, setApi]);
+
+  React.useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        ref={ref}
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+});
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn(
+            "flex",
+            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+            className,
+          )}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn(
+          "min-w-0 shrink-0 grow-0 basis-full",
+          orientation === "horizontal" ? "pl-4" : "pt-4",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute  h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  },
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  },
+);
+CarouselNext.displayName = "CarouselNext";
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};

src/components/ui/chart.tsx

@@ -0,0 +1,331 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload
+            .filter((item) => item.type !== "none")
+            .map((item, index) => {
+              const key = `${nameKey || item.name || item.dataKey || "value"}`;
+              const itemConfig = getPayloadConfigFromPayload(config, item, key);
+              const indicatorColor = color || item.payload.fill || item.color;
+
+              return (
+                <div
+                  key={item.dataKey}
+                  className={cn(
+                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                    indicator === "dot" && "items-center",
+                  )}
+                >
+                  {formatter && item?.value !== undefined && item.name ? (
+                    formatter(item.value, item.name, item, index, item.payload)
+                  ) : (
+                    <>
+                      {itemConfig?.icon ? (
+                        <itemConfig.icon />
+                      ) : (
+                        !hideIndicator && (
+                          <div
+                            className={cn(
+                              "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                              {
+                                "h-2.5 w-2.5": indicator === "dot",
+                                "w-1": indicator === "line",
+                                "w-0 border-[1.5px] border-dashed bg-transparent":
+                                  indicator === "dashed",
+                                "my-0.5": nestLabel && indicator === "dashed",
+                              },
+                            )}
+                            style={
+                              {
+                                "--color-bg": indicatorColor,
+                                "--color-border": indicatorColor,
+                              } as React.CSSProperties
+                            }
+                          />
+                        )
+                      )}
+                      <div
+                        className={cn(
+                          "flex flex-1 justify-between leading-none",
+                          nestLabel ? "items-end" : "items-center",
+                        )}
+                      >
+                        <div className="grid gap-1.5">
+                          {nestLabel ? tooltipLabel : null}
+                          <span className="text-muted-foreground">
+                            {itemConfig?.label || item.name}
+                          </span>
+                        </div>
+                        {item.value && (
+                          <span className="font-mono font-medium tabular-nums text-foreground">
+                            {item.value.toLocaleString()}
+                          </span>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className,
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+    </div>
+  );
+});
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};

src/components/ui/checkbox.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("grid place-content-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

src/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

src/components/ui/command.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

src/components/ui/context-menu.tsx

@@ -0,0 +1,187 @@
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const ContextMenu = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin)",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin)",
+        className,
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

src/components/ui/dialog.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background cursor-pointer transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

src/components/ui/drawer.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "@/lib/utils";
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

src/components/ui/form.tsx

@@ -0,0 +1,171 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>");
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

src/components/ui/hover-card.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@/lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-hover-card-content-transform-origin)",
+      className,
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

src/components/ui/input-otp.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Minus } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName,
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+));
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Minus />
+  </div>
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

src/components/ui/label.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };