Components

Component library, design system showcase, and complete component inventory.

Last updated: October 21, 2025

Component Inventory

Complete audit of all components with usage analysis and recommendations.

Total Components

New Architecture

Old Architecture

Duplicates

Unused

Recommended Actions

Keep

Rebuild

Review

Delete

AboutAccordions

active-newkeep

src/pages/about.tsx

Expandable accordion sections for About page content with icons and markdown formatting

Used in 1 file(s):

about.tsx

AboutCards

active-newkeep

src/pages/about.tsx

Stats cards displaying key metrics (years, projects, clients) in a 2x2 grid

Used in 1 file(s):

about.tsx

Accordion

active-oldreview

src/components/Accordion.tsx

Accordion/collapsible component

Used in 2 file(s):

sitemap.tsxprojects/[slug].tsx

BentoGrid

active-newkeep

src/components/layouts/BentoGrid.tsx

Bento grid layout system

Used in 1 file(s):

index.tsx

Button

active-newkeep

src/components/ui/Button.tsx

Reusable button with variants (ghost, primary, minimal)

Used in 4 file(s):

index.tsxwork.tsxcomponents.tsxcontact.tsx

Button - FYC

active-newkeep

src/components/PortfolioFooter.tsx

Blueprint archives FYC button with code-style aesthetics

Used in 1 file(s):

index.tsx

ClientsSection

unuseddelete

src/components/ClientsSection.tsx

Clients section component

⚠ Not currently imported anywhere

Not used anywhere

ClientTable

active-oldreview

src/components/ClientTable.tsx

Table view for client data with industry and project count

Used in 1 file(s):

clients/index.tsx

CollaborativePartners

active-newkeep

src/components/CollaborativePartners.tsx

Collaborative partners grid displaying featured client partners with glass card styling

Used in 1 file(s):

ClientsSection.tsx

CopyButton

active-newkeep

src/components/ui/CopyButton.tsx

Copy to clipboard button with animated feedback

Used in 2 file(s):

style-guide.tsxcontact.tsx

CountdownTimer

unuseddelete

src/components/CountdownTimer.tsx

Countdown timer component

⚠ Not currently imported anywhere

Not used anywhere

DataCode

active-oldreview

src/components/DataCode.tsx

Data/code display component

Used in 1 file(s):

design.tsx

DetailsSidebar

active-oldreview

src/components/DetailsSidebar.tsx

Sidebar for detail pages

Used in 2 file(s):

categories/[slug].tsxclients/[slug].tsx

ErrorBoundary

active-newkeep

src/components/ErrorBoundary.tsx

React error boundary for error handling

Used in 1 file(s):

_app.tsx

FeaturedClients

active-newkeep

src/components/FeaturedClients.tsx

Featured clients section with accent line header and client boxes

Used in 1 file(s):

index.tsx

FloatingLabelInput

active-newkeep

src/components/ui/FloatingLabelInput.tsx

Input field with animated floating label and validation

Used in 1 file(s):

contact.tsx

FloatingLabelTextarea

active-newkeep

src/components/ui/FloatingLabelTextarea.tsx

Textarea with animated floating label and character counter

Used in 1 file(s):

contact.tsx

Footer - Main

active-newkeep

src/components/FooterMain.tsx

Main site footer with 4-column grid layout, newsletter, social links, and navigation

⚠ Primary footer component used across the site

Used in 2 file(s):

index.tsxcomponents.tsx

FullscreenMenu

active-newkeep

src/components/ui/FullscreenMenu.tsx

Fullscreen navigation menu overlay with glassmorphic design

Used in 1 file(s):

layouts/Header.tsx

GlassCard

active-newkeep

src/components/ui/GlassCard.tsx

Glassmorphic card component

Used in 5 file(s):

index.tsxwork.tsxstyle-guide.tsxcomponents.tsxcontact.tsx

GlassmorphismIcon

active-oldreview

src/components/GlassmorphismIcon.tsx

Glassmorphic icon wrapper

Used in 3 file(s):

design.tsxthank-you.tsx404.tsx

HeroBackground

active-oldreview

src/components/HeroBackground.tsx

Hero section background

Used in 7 file(s):

design.tsxcategories/index.tsxcategories/[slug].tsxclients/[slug].tsxprojects/[slug].tsx+2 more

HowWeWorkTogether

unuseddelete

src/components/HowWeWorkTogether.tsx

Work process section

⚠ Not currently imported anywhere

Not used anywhere

ImageGallery

active-oldreview

src/components/ImageGallery.tsx

Image gallery with lightbox

Used in 1 file(s):

projects/[slug].tsx

Lightbox

unusedreview

src/components/Lightbox.tsx

Lightbox modal for images

⚠ Not currently imported anywhere

Not used anywhere

LoadingSpinner

active-newkeep

src/components/LoadingSpinner.tsx

Loading spinner with size variants and skeleton components

Used in 2 file(s):

work.tsxprojects/index.tsx

Logo

active-newkeep

src/components/Logo.tsx

Brand logo component with size variants

Used in 2 file(s):

style-guide.tsxcomponents.tsx

LogoAlt

unusedreview

src/components/LogoAlt.tsx

Alternative logo with avatar and subtitle on light background

⚠ Not currently imported anywhere

Not used anywhere

MatrixBackground

active-oldreview

src/components/MatrixBackground.tsx

Matrix-style animated background

Used in 4 file(s):

sitemap.tsxcoming-soon.tsxdesign.tsxabout.tsx

Minimal Footer

active-newkeep

src/components/layouts/MinimalFooter.tsx

Minimal site footer with live clock

Used in 8 file(s):

sitemap.tsxstyle-guide.tsximvc.tsxcontact.tsxclients/[slug].tsx+3 more

NavBar

active-newkeep

src/components/layouts/Header.tsx

Main navigation bar with Resources dropdown

Used in 5 file(s):

index.tsxwork.tsxstyle-guide.tsxcomponents.tsxcontact.tsx

Preloader

active-oldreview

src/components/Preloader.tsx

Page loading animation

Used in 8 file(s):

coming-soon.tsxdesign.tsxcategories/[slug].tsxclients/[slug].tsxthank-you.tsx+3 more

ProjectCard

active-newkeep

src/components/blocks/ProjectCard.tsx

Project display card with image and metadata

Used in 3 file(s):

index.tsxwork.tsxcomponents.tsx

ProjectCard (OLD)

duplicatedelete

src/components/ProjectCard.tsx

Old project card component

⚠ DUPLICATE: Use blocks/ProjectCard.tsx instead

Used in 3 file(s):

categories/[slug].tsxclients/[slug].tsxprojects/index.tsx

ProjectTable

active-oldreview

src/components/ProjectTable.tsx

Table view for projects

Used in 1 file(s):

projects/index.tsx

ProjectTypeSelector

active-newkeep

src/components/ui/ProjectTypeSelector.tsx

Project type selection grid for contact form

Used in 1 file(s):

contact.tsx

Sidebar

active-oldreview

src/components/Sidebar.tsx

Main sidebar navigation

⚠ Used in old architecture pages

Used in 9 file(s):

sitemap.tsxdesign.tsxcategories/index.tsxcategories/[slug].tsxclients/[slug].tsx+4 more

ThemeToggle

active-newkeep

src/components/ui/ThemeToggle.tsx

Dark/light theme toggle button with animated icon

Used in 1 file(s):

layouts/Header.tsx

Toast

active-newkeep

src/components/ui/Toast.tsx

Toast notification component with success, error, and info variants

Used in 1 file(s):

contact.tsx

VerificationBadge

active-oldreview

src/components/VerificationBadge.tsx

Verification status badge

Used in 6 file(s):

coming-soon.tsxdesign.tsxcategories/[slug].tsxclients/[slug].tsxabout.tsx+1 more

VideoStory

active-newkeep

src/pages/about.tsx

Video story placeholder with play button and "coming soon" badge

Used in 1 file(s):

about.tsx

Typography Components

Heading and text styles used throughout the site

Heading 1

text-6xl font-heading font-normal

Heading 2

text-5xl font-heading font-normal

Heading 3

text-4xl font-heading font-normal

Body Large - The quick brown fox jumps over the lazy dog. This is a larger body text size used for introductory paragraphs.

text-xl font-sans

Body - The quick brown fox jumps over the lazy dog. This is the default body text size used for most content.

text-base font-sans

Body Small - The quick brown fox jumps over the lazy dog. This is a smaller text size used for metadata and secondary information.

text-sm font-sans text-gray-400

Animation Utilities

Framer Motion animation variants

fadeInUp

Fade in with upward motion

import { fadeInUp } from "@/lib/animations"

staggerContainer

Container for staggered child animations

import { staggerContainer } from "@/lib/animations"