Accordion

Collapsible FAQ-style component with smooth expand/collapse animations. Uses Radix UI primitives. Each item has a subtle hover highlight in dark mode. Wrap in CursorGlow for interactive glow effects.

Action Link Cards

Clickable cards for contact actions, navigation links, and CTAs. Primary variant has emerald background with white sparkles. Secondary variant uses card background with emerald icon accent.

Animated Icons (Lucide Animated)

Hover over icons to trigger animations. Use refs to control: iconRef.current?.startAnimation()

Animation Components

Backgrounds

The unified background system used across landing pages. Combines gradients, animated grids, and decorative patterns.

BlurFade

DashboardButton

DashboardButton is for dashboard/admin contexts. For landing pages, use LandingButton instead.

Centralized card system for consistent styling across the application. Defined in lib/cards.ts. Shadow behavior: sm (default) → md (hover). Dark mode includes subtle emerald glow. Wrap cards in <CursorGlow> for interactive cursor-following glow effects. Use sparkle prop with SparkleProvider to enable twinkling sparkles.

Colors

Uses OKLCH color space for perceptual uniformity. Defined in globals.css with light/dark mode variants. Many colors use alpha values (e.g., oklch(0 0 0 / 90%)).

Data Display

Dropdowns & Popovers

Glassmorphic dropdowns with backdrop-blur-xl and solid dark background in dark mode.

Favicon

App favicon with JG logo on black background. Generated via app/icon.tsx and app/apple-icon.tsx.

Form Controls

Layout Components

3D Grid Logo - Rotating (Hero Version)

Rotating version with wireframe cube edges and grid texture on logo letters. Features crossfade effect to always show JG correctly (never reversed). Used as background with opacity-20 dark:opacity-15.

Static Logo (Header Version)

Flat CSS/SVG logo for headers - square border with JG inside. Lightweight (no 3D/Canvas). Size sm = 32x32px (h-8 w-8) is used in the dashboard header.

Media Components

BeforeAfterSlider

before-after-slider

Editor Controls

Mode

FillFit

Images cover the container (may crop)

Before Label

After Label

Before Image URL

After Image URL

Reset to Defaults

Preview

Hover to control slider. Click/tap to go fullscreen.

Before

After

Modals & Dialogs

Overlay components for user interactions, confirmations, and forms.

OpenGraph Images

Dynamic OG images generated with Next.js ImageResponse. Each landing page has its own OG image.

ActiveProduct Engineer Landing Page

Home Page (Root)

app/opengraph-image.tsx

1200x630PNGOpen full size

Product Engineer Variant

landing-variants/product-engineer/

1200x630PNGOpen full size

Inactive Landing Pages(Book a Project, Pricing)

Book a Project

landing-variants/book-a-project/

1200x630PNGOpen full size

Pricing Page

app/pricing/opengraph-image.tsx

1200x630PNGOpen full size

Section Header

Reusable section header component for landing pages. Supports two icon styles:cube (rotating 3D outline) and app (solid background). Five color variants available: emerald, red, yellow, blue, and muted.

Shadows

Centralized shadow system for consistent elevation and glow effects. Defined in globals.css as CSS custom properties and exported from lib/shadows.ts for programmatic use.

Typography

Font stack using Geist Sans and Geist Mono from Vercel. Defined in app/layout.tsx.

Hero Section

Animated text components for the hero headline. Cycles through rotating words with smooth transitions. Inspired by Aceternity UI.

<h1 className="text-4xl font-bold">
  Need a{" "}
  <ContainerTextFlip
    words={["new", "fast", "beautiful", "modern", "custom"]}
    interval={2500}
    textClassName="font-bold"
  />
  {" "}website?
</h1>

Image Upload

A polished image upload component with drag-and-drop, file picker, and URL input modes. Features preview with remove button, loading states, and error handling.

ImageUpload (Empty)

image-upload

Upload Image

UploadURL

Drop an image here, or click to browse

PNG, JPG, GIF up to 5MB

Supports PNG, JPG, GIF up to 5MB

ImageUpload (With Image)

image-upload

Design System Screenshot

Remove

Hover to reveal remove button

Typography Components