LinkIt — UI System

┌─────────────────────────────────────────────────────────┐
│                    App Components                        │
│     (Pages, Features, Dashboard, Public Profile)        │
└─────────────────────────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────┐
│                  Composite Components                    │
│  (ProfileHeader, LinkCard, AnalyticsChart, etc.)        │
└─────────────────────────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────┐
│                   GSAPGlass Layer                        │
│      (Glassmorphism styling + GSAP animations)          │
└─────────────────────────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────┐
│                    shadcn/ui Base                        │
│    (Button, Input, Card, Dialog, etc. primitives)       │
└─────────────────────────────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────┐
│                   Tailwind CSS                           │
│              (Utility-first styling)                    │
└─────────────────────────────────────────────────────────┘

interface GSAPGlassProps {
  children: React.ReactNode;
  className?: string;
  depth?: 'base' | 'content' | 'overlay';
  hoverScale?: number;
  animationDuration?: number;
  animationEase?: string;
  onClick?: () => void;
}

const depthStyles = {
  base: {
    dark: 'bg-white/5 backdrop-blur-sm border-white/5',
    light: 'bg-black/5 backdrop-blur-sm border-gray-200/20 shadow-lg',
  },
  content: {
    dark: 'bg-white/10 backdrop-blur-md border-white/10',
    light: 'bg-white/60 backdrop-blur-md border-gray-200/30 shadow-xl',
  },
  overlay: {
    dark: 'bg-white/15 backdrop-blur-xl border-white/15',
    light: 'bg-white/80 backdrop-blur-xl border-gray-200/40 shadow-2xl',
  },
};

<GSAPGlass
  depth="content"
  hoverScale={1.02}
  animationDuration={0.3}
  className="p-6 rounded-2xl"
>
  <h2>Card Title</h2>
  <p>Card content...</p>
</GSAPGlass>

// lib/contexts/ThemeContext.tsx
interface ThemeContextType {
  theme: 'dark' | 'light';
  toggleTheme: () => void;
  setTheme: (theme: 'dark' | 'light') => void;
}

/* app/globals.css */
:root {
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 12px;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --accent: #6366f1;
}

[data-theme='light'] {
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-blur: 20px;
  --text-primary: #1f2937;
  --text-secondary: rgba(31, 41, 55, 0.7);
  --accent: #4f46e5;
}

// lib/animations/page-transitions.ts
import gsap from 'gsap';

export function pageEnter(element: HTMLElement) {
  gsap.fromTo(element,
    { opacity: 0, y: 20 },
    {
      opacity: 1,
      y: 0,
      duration: 0.5,
      ease: 'sine.out'
    }
  );
}

export function pageExit(element: HTMLElement) {
  return gsap.to(element, {
    opacity: 0.95,
    duration: 0.3,
    ease: 'sine.in',
  });
}

// lib/animations/scroll-reveal.ts
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export function initScrollReveal(elements: string) {
  gsap.utils.toArray(elements).forEach((el: any) => {
    gsap.fromTo(el,
      { opacity: 0, y: 30 },
      {
        opacity: 1,
        y: 0,
        duration: 0.5,
        ease: 'sine.out',
        scrollTrigger: {
          trigger: el,
          start: 'top 85%',
          toggleActions: 'play none none reverse',
        },
      }
    );
  });
}

// lib/animations/button-interactions.ts
export function buttonPress(element: HTMLElement) {
  gsap.to(element, {
    scale: 0.98,
    duration: 0.15,
    ease: 'power2.out',
  });
}

export function buttonRelease(element: HTMLElement) {
  gsap.to(element, {
    scale: 1,
    duration: 0.15,
    ease: 'power2.out',
  });
}

// components/layout/MenuTrigger.tsx
export function MenuTrigger({ onClick }: { onClick: () => void }) {
  return (
    <GSAPGlass
      depth="overlay"
      className="fixed bottom-6 left-1/2 -translate-x-1/2 px-6 py-3 rounded-full cursor-pointer md:top-6 md:right-6 md:bottom-auto md:left-auto md:translate-x-0"
      hoverScale={1.05}
      onClick={onClick}
    >
      <MenuIcon className="w-6 h-6" />
    </GSAPGlass>
  );
}

// components/layout/SideMenu.tsx
export function SideMenu({ isOpen, onClose }: SideMenuProps) {
  const menuRef = useRef<HTMLDivElement>(null);
  const itemsRef = useRef<HTMLDivElement[]>([]);

  useEffect(() => {
    if (isOpen) {
      // Slide in menu
      gsap.fromTo(menuRef.current,
        { x: '100%' },
        { x: 0, duration: 0.4, ease: 'power2.out' }
      );

      // Stagger items
      gsap.fromTo(itemsRef.current,
        { opacity: 0, y: 10 },
        {
          opacity: 1,
          y: 0,
          duration: 0.3,
          stagger: 0.1,
          delay: 0.2
        }
      );
    }
  }, [isOpen]);

  // ... rest of component
}

// lib/fonts/google-fonts.ts
export const fonts = {
  modernSans: [
    'Inter',
    'Plus Jakarta Sans',
    'Outfit',
    'DM Sans',
    'Manrope',
    'Space Grotesk',
    'Public Sans',
  ],
  modernSerif: [
    'Playfair Display',
    'Fraunces',
    'Libre Baskerville',
    'Lora',
    'Cinzel',
    'Cormorant Garamond',
  ],
  display: [
    'Syne',
    'Oswald',
    'Anton',
    'Bebas Neue',
    'Righteous',
    'Unbounded',
    'IBM Plex Mono',
  ],
};

// app/layout.tsx
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-sans',
});

// lib/utils/breakpoints.ts
export const breakpoints = {
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  '2xl': 1536,
};

// Target devices
// Mobile: 393px (iPhone 14)
// Tablet: 1024×1366 (iPad Pro)
// Desktop: 1920px+

// Mobile-first responsive component
<div className="
  px-4 py-6           {/* Mobile base */}
  md:px-8 md:py-8     {/* Tablet */}
  lg:px-12 lg:py-10   {/* Desktop */}
">
  <div className="
    grid grid-cols-1   {/* Mobile: single column */}
    md:grid-cols-2     {/* Tablet: 2 columns */}
    lg:grid-cols-3     {/* Desktop: 3 columns */}
    gap-4
  ">
    {/* Content */}
  </div>
</div>

/* Focus visible styles */
.focus-ring {
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2;
}

/* Minimum touch target size */
.touch-target {
  @apply min-h-[44px] min-w-[44px];
}

// Check user preference
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

// Apply to animations
const duration = prefersReducedMotion ? 0.01 : 0.5;