<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport"/>
<title>Design System — Pattern Library</title>
<meta content="Design system and component library based on the portfolio design." name="description"/>
<!-- Fontes do Google -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<!-- 1. Tailwind CSS via CDN (Substitui os arquivos CSS) -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 2. Three.js via CDN (Substitui o arquivo three.js) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- 3. Lucide Icons via CDN (Substitui o arquivo lucide.es) -->
<script src="https://unpkg.com/lucide@latest"></script>
<style>
:root { --font-sans: 'Geist', Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
body { font-family: var(--font-sans); }
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
html { scroll-behavior: smooth; }
#canvas-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a3a3a3; }
</style>
<style data-scroll-fix="true">
html, body {
overflow: auto !important;
overflow-x: hidden !important;
height: auto !important;
min-height: 100% !important;
scroll-behavior: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
body, .wrapper, main, #__next, #app, .page, .content {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
</style>
</head>
<body class="bg-white text-neutral-900 antialiased selection:bg-neutral-200 selection:text-black">
<div class="fixed top-0 left-0 w-full bg-white/90 backdrop-blur border-b border-neutral-100 z-50 px-6 py-4">
<nav class="flex justify-between items-center w-full max-w-[1400px] mx-auto">
<div class="text-sm font-bold tracking-tight text-black">DS.v2</div>
<div class="hidden sm:flex gap-6 text-xs font-medium text-neutral-500 uppercase tracking-wide">
<a class="hover:text-black transition-colors" href="#hero">Hero</a>
<a class="hover:text-black transition-colors" href="#typography">Typography</a>
<a class="hover:text-black transition-colors" href="#colors">Colors</a>
<a class="hover:text-black transition-colors" href="#components">Components</a>
<a class="hover:text-black transition-colors" href="#layout">Layout</a>
<a class="hover:text-black transition-colors" href="#motion">Motion</a>
<a class="hover:text-black transition-colors" href="#icons">Icons</a>
</div>
</nav>
</div>
<header id="hero" class="relative w-full h-screen flex flex-col justify-between p-6 sm:p-12 z-10 pointer-events-none overflow-hidden bg-white mt-10 sm:mt-0">
<div id="canvas-container"></div>
<div class="flex justify-between items-start pointer-events-auto w-full max-w-[1400px] mx-auto z-10 mt-12 sm:mt-0">
<div class="text-lg font-bold tracking-tight text-black">design.system</div>
<nav class="hidden sm:flex gap-8 text-xs font-medium text-neutral-500 uppercase tracking-wide">
<a class="hover:text-black transition-colors" href="#typography">Tokens</a>
<a class="hover:text-black transition-colors" href="#components">Components</a>
<a class="hover:text-black transition-colors" href="#layout">Patterns</a>
</nav>
</div>
<div class="flex flex-col md:flex-row justify-between items-end gap-12 pointer-events-auto w-full max-w-[1400px] mx-auto mb-4 z-10">
<div class="max-w-xs space-y-8">
<p class="text-sm leading-relaxed text-neutral-600 font-medium">
Comprehensive Design System and pattern library. Documenting tokens, components, and scalable product experiences.
</p>
<button class="group flex items-center gap-2 text-xs font-bold tracking-widest uppercase border-b border-black pb-1 hover:text-neutral-600 hover:border-neutral-400 transition-all cursor-pointer" onclick="document.getElementById('typography').scrollIntoView()">
Explore System <span class="group-hover:translate-y-0.5 transition-transform duration-300">↓</span>
</button>
</div>
<div class="text-right">
<h1 class="text-5xl md:text-7xl lg:text-8xl font-semibold tracking-tighter leading-[0.85] text-black">
<span class="block">Design System</span>
<span class="block">& Pattern Lib</span>
</h1>
<p class="text-2xl md:text-4xl text-neutral-400 font-normal mt-3 tracking-tight">Version 2.0</p>
</div>
</div>
</header>
<main class="relative z-20 bg-white">
<section id="typography" class="sm:px-8 px-6 pt-24 pb-16 border-t border-neutral-100">
<div class="max-w-6xl mx-auto">
<div class="flex items-center gap-3 mb-10">
<span class="text-xs font-bold text-neutral-400 uppercase tracking-widest font-geist-mono">01. Typography</span>
<div class="h-px flex-1 bg-neutral-200"></div>
</div>
<div class="space-y-8 border-t border-neutral-100 pt-4">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-neutral-100 pb-8">
<h1 class="text-5xl md:text-7xl lg:text-8xl font-semibold tracking-tighter leading-[0.85] text-black">Heading 1</h1>
<div class="text-right text-sm text-neutral-500 font-geist-mono shrink-0">text-8xl / leading-[0.85]</div>
</div>
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-neutral-100 pb-8">
<h2 class="text-3xl md:text-4xl font-semibold tracking-tight text-neutral-900">Heading 2</h2>
<div class="text-right text-sm text-neutral-500 font-geist-mono shrink-0">text-4xl / tracking-tight</div>
</div>
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-neutral-100 pb-8">
<h3 class="text-2xl font-bold text-neutral-900">Heading 3</h3>
<div class="text-right text-sm text-neutral-500 font-geist-mono shrink-0">text-2xl / font-bold</div>
</div>
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-neutral-100 pb-8">
<h4 class="text-xl font-semibold text-neutral-900">Heading 4</h4>
<div class="text-right text-sm text-neutral-500 font-geist-mono shrink-0">text-xl / font-semibold</div>
</div>
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-neutral-100 pb-8">
<p class="text-2xl md:text-4xl text-neutral-400 font-normal tracking-tight">Bold L (Subtitle)</p>
<div class="text-right text-sm text-neutral-500 font-geist-mono shrink-0">text-4xl / font-normal</div>
</div>
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-neutral-100 pb-8">
<span class="text-xs font-bold text-neutral-400 uppercase tracking-widest font-geist-mono">Bold S (Label)</span>
<div class="text-right text-sm text-neutral-500 font-geist-mono shrink-0">text-xs / uppercase / tracking-widest</div>
</div>
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-neutral-100 pb-8">
<p class="text-lg leading-relaxed text-neutral-600 font-geist-mono max-w-2xl">Paragraph (Lead). Crio interfaces escaláveis com Design Systems sólidos — de tokens a componentes.</p>
<div class="text-right text-sm text-neutral-500 font-geist-mono shrink-0">text-lg / leading-relaxed</div>
</div>
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-neutral-100 pb-8">
<p class="text-sm leading-relaxed text-neutral-500 font-geist-mono max-w-2xl">Regular S. Creating intuitive interfaces that offer a frictionless experience. We combine creativity with usability.</p>
<div class="text-right text-sm text-neutral-500 font-geist-mono shrink-0">text-sm / leading-relaxed</div>
</div>
</div>
</div>
</section>
<section id="colors" class="sm:px-8 px-6 py-16 bg-neutral-50 border-t border-neutral-200">
<div class="max-w-6xl mx-auto">
<div class="flex items-center gap-3 mb-10">
<span class="text-xs font-bold text-neutral-400 uppercase tracking-widest font-geist-mono">02. Colors & Surfaces</span>
<div class="h-px flex-1 bg-neutral-200"></div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 mb-12">
<div class="space-y-2">
<div class="h-24 w-full bg-black rounded-lg shadow-sm border border-neutral-200"></div>
<div class="text-xs font-bold text-neutral-900">Black</div>
<div class="text-[10px] text-neutral-500 font-geist-mono">bg-black</div>
</div>
<div class="space-y-2">
<div class="h-24 w-full bg-neutral-900 rounded-lg shadow-sm border border-neutral-800"></div>
<div class="text-xs font-bold text-neutral-900">Neutral 900</div>
<div class="text-[10px] text-neutral-500 font-geist-mono">bg-neutral-900</div>
</div>
<div class="space-y-2">
<div class="h-24 w-full bg-neutral-500 rounded-lg shadow-sm border border-neutral-200"></div>
<div class="text-xs font-bold text-neutral-900">Neutral 500</div>
<div class="text-[10px] text-neutral-500 font-geist-mono">bg-neutral-500 / text-neutral-500</div>
</div>
<div class="space-y-2">
<div class="h-24 w-full bg-neutral-200 rounded-lg shadow-sm border border-neutral-300"></div>
<div class="text-xs font-bold text-neutral-900">Neutral 200</div>
<div class="text-[10px] text-neutral-500 font-geist-mono">bg-neutral-200 / border</div>
</div>
<div class="space-y-2">
<div class="h-24 w-full bg-neutral-100 rounded-lg shadow-sm border border-neutral-200"></div>
<div class="text-xs font-bold text-neutral-900">Neutral 100</div>
<div class="text-[10px] text-neutral-500 font-geist-mono">bg-neutral-100</div>
</div>
<div class="space-y-2">
<div class="h-24 w-full bg-white rounded-lg shadow-sm border border-neutral-200"></div>
<div class="text-xs font-bold text-neutral-900">White</div>
<div class="text-[10px] text-neutral-500 font-geist-mono">bg-white</div>
</div>
</div>
<h4 class="text-sm font-semibold text-neutral-900 font-geist-mono uppercase tracking-wide mb-6">Semantic Tags & Surfaces</h4>
<div class="flex flex-wrap gap-6">
<div class="inline-flex gap-2 bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-xs font-medium font-geist-mono border border-blue-100">
<i class="w-3 h-3" data-lucide="paintbrush"></i> Blue 50/600
</div>
<div class="inline-flex gap-2 bg-purple-50 text-purple-600 px-3 py-1 rounded-full text-xs font-medium font-geist-mono border border-purple-100">
<i class="w-3 h-3" data-lucide="code-2"></i> Purple 50/600
</div>
<div class="inline-flex gap-2 bg-emerald-50 text-emerald-600 px-3 py-1 rounded-full text-xs font-medium font-geist-mono border border-emerald-100">
<i class="w-3 h-3" data-lucide="layout"></i> Emerald 50/600
</div>
<div class="flex items-center gap-2 px-3 py-1 rounded-full bg-green-50 text-green-700 border border-green-200 text-xs font-geist-mono">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
Green Status
</div>
</div>
</div>
</section>
<section id="components" class="sm:px-8 px-6 py-16 bg-white border-t border-neutral-200">
<div class="max-w-6xl mx-auto">
<div class="flex items-center gap-3 mb-10">
<span class="text-xs font-bold text-neutral-400 uppercase tracking-widest font-geist-mono">03. UI Components</span>
<div class="h-px flex-1 bg-neutral-200"></div>
</div>
<div class="mb-16 space-y-8">
<h4 class="text-sm font-semibold text-neutral-900 font-geist-mono uppercase tracking-wide">Buttons & Links</h4>
<div class="flex flex-wrap items-center gap-8 p-8 border border-neutral-200 rounded-2xl bg-neutral-50">
<a class="px-6 py-3 rounded-lg bg-neutral-900 text-white font-medium hover:bg-neutral-800 transition-colors font-geist-mono text-sm" href="javascript:void(0)">
Primary Button
</a>
<a class="px-6 py-3 rounded-lg border border-neutral-200 bg-white text-neutral-900 font-medium hover:bg-neutral-50 transition-colors font-geist-mono text-sm" href="javascript:void(0)">
Secondary Button
</a>
<a class="inline-flex items-center gap-2 px-8 py-4 bg-white border border-neutral-200 rounded-full text-neutral-900 hover:bg-neutral-50 transition-all font-geist-mono text-sm shadow-sm hover:shadow-md" href="javascript:void(0)">
Icon Button <i class="w-4 h-4" data-lucide="plus"></i>
</a>
<a class="inline-flex items-center gap-2 text-sm font-semibold text-neutral-900 hover:text-blue-600 transition-colors border-b border-transparent hover:border-blue-600 pb-0.5" href="javascript:void(0)">
Inline Link <i class="w-4 h-4" data-lucide="arrow-right"></i>
</a>
</div>
</div>
<div class="mb-16 space-y-8">
<h4 class="text-sm font-semibold text-neutral-900 font-geist-mono uppercase tracking-wide">Pills & Tags</h4>
<div class="flex flex-wrap gap-4 p-8 border border-neutral-200 rounded-2xl bg-white">
<span class="px-3 py-1 text-xs bg-neutral-100 text-neutral-600 border border-neutral-200 rounded-full font-geist-mono">Technology Tag</span>
<span class="px-3 py-1 text-xs bg-neutral-100 text-neutral-600 border border-neutral-200 rounded-full font-geist-mono">React</span>
<span class="px-3 py-1 text-xs bg-neutral-100 text-neutral-600 border border-neutral-200 rounded-full font-geist-mono">TypeScript</span>
</div>
</div>
<div class="space-y-8">
<h4 class="text-sm font-semibold text-neutral-900 font-geist-mono uppercase tracking-wide">Cards</h4>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="group bg-white border border-neutral-200 rounded-2xl p-6 hover:shadow-xl transition-all duration-300">
<div class="h-48 mb-6 bg-neutral-100 rounded-xl overflow-hidden relative border border-neutral-100">
<div class="absolute inset-4 bg-white shadow-sm rounded-lg border border-neutral-200 p-3">
<div class="flex gap-1.5 mb-3">
<div class="w-2 h-2 rounded-full bg-red-400/80"></div>
<div class="w-2 h-2 rounded-full bg-amber-400/80"></div>
<div class="w-2 h-2 rounded-full bg-green-400/80"></div>
</div>
<div class="space-y-2">
<div class="h-2 w-1/3 bg-neutral-200 rounded-full"></div>
<div class="grid grid-cols-2 gap-2">
<div class="h-16 bg-neutral-50 rounded border border-neutral-100"></div>
<div class="h-16 bg-neutral-50 rounded border border-neutral-100"></div>
</div>
</div>
</div>
</div>
<div class="inline-flex gap-2 bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-xs font-medium font-geist-mono mb-4 border border-blue-100">
<i class="w-3 h-3" data-lucide="paintbrush"></i> Design
</div>
<h3 class="text-xl font-semibold text-neutral-900 mb-3">Service Card</h3>
<p class="text-neutral-500 text-sm leading-relaxed font-geist-mono">Creating intuitive interfaces that offer a frictionless experience. Hover to see the shadow-xl transition.</p>
</div>
<div class="group col-span-1 md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-8 items-center bg-white border border-neutral-200 rounded-2xl p-6 hover:shadow-xl transition-all duration-300">
<div class="order-2 md:order-1">
<div class="flex items-center gap-2 mb-4">
<span class="text-xs text-neutral-500 font-geist-mono font-medium">2024</span>
<div class="h-1 w-1 rounded-full bg-neutral-300"></div>
<span class="text-xs text-neutral-500 font-geist-mono font-medium">Category</span>
</div>
<h3 class="text-2xl font-bold text-neutral-900 mb-4">Project Card Layout</h3>
<p class="text-neutral-600 mb-6 leading-relaxed font-geist-mono">A comprehensive dashboard design layout. Demonstrating typography hierarchy within a card context.</p>
<div class="flex flex-wrap gap-2 mb-8">
<span class="px-3 py-1 text-xs bg-neutral-100 text-neutral-600 border border-neutral-200 rounded-full font-geist-mono">Tag 1</span>
<span class="px-3 py-1 text-xs bg-neutral-100 text-neutral-600 border border-neutral-200 rounded-full font-geist-mono">Tag 2</span>
</div>
</div>
<div class="order-1 md:order-2">
<div class="rounded-xl overflow-hidden border border-neutral-200 shadow-xl bg-neutral-100 aspect-video group-hover:-translate-y-2 transition-transform duration-500">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="layout" class="sm:px-8 px-6 py-16 bg-neutral-50 border-t border-neutral-200">
<div class="max-w-6xl mx-auto">
<div class="flex items-center gap-3 mb-10">
<span class="text-xs font-bold text-neutral-400 uppercase tracking-widest font-geist-mono">04. Layout & Spacing</span>
<div class="h-px flex-1 bg-neutral-200"></div>
</div>
<div class="mb-12">
<h4 class="text-sm font-semibold text-neutral-900 font-geist-mono uppercase tracking-wide mb-6">Profile Split Layout (5 col / 7 col)</h4>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center p-8 bg-white border border-neutral-200 rounded-2xl">
<div class="lg:col-span-5">
<div class="bg-neutral-100 rounded-2xl aspect-[4/5] flex items-center justify-center border border-neutral-200">
<span class="text-neutral-400 font-geist-mono text-sm">lg:col-span-5</span>
</div>
</div>
<div class="lg:col-span-7">
<div class="h-full flex flex-col justify-center bg-neutral-50 rounded-2xl p-8 border border-neutral-200 border-dashed">
<span class="text-neutral-400 font-geist-mono text-sm">lg:col-span-7</span>
</div>
</div>
</div>
</div>
<div>
<h4 class="text-sm font-semibold text-neutral-900 font-geist-mono uppercase tracking-wide mb-6">Services Grid (3 col)</h4>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 p-8 bg-white border border-neutral-200 rounded-2xl">
<div class="bg-neutral-100 h-32 rounded-xl flex items-center justify-center border border-neutral-200">
<span class="text-neutral-400 font-geist-mono text-sm">lg:col-span-1</span>
</div>
<div class="bg-neutral-100 h-32 rounded-xl flex items-center justify-center border border-neutral-200">
<span class="text-neutral-400 font-geist-mono text-sm">lg:col-span-1</span>
</div>
<div class="bg-neutral-100 h-32 rounded-xl flex items-center justify-center border border-neutral-200">
<span class="text-neutral-400 font-geist-mono text-sm">lg:col-span-1</span>
</div>
</div>
</div>
</div>
</section>
<section id="motion" class="sm:px-8 px-6 py-16 bg-white border-t border-neutral-200">
<div class="max-w-6xl mx-auto">
<div class="flex items-center gap-3 mb-10">
<span class="text-xs font-bold text-neutral-400 uppercase tracking-widest font-geist-mono">05. Motion & Interaction</span>
<div class="h-px flex-1 bg-neutral-200"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="space-y-4 border border-neutral-200 rounded-2xl p-8 bg-neutral-50 flex flex-col items-center justify-center min-h-[250px]">
<h4 class="text-sm font-semibold text-neutral-900 font-geist-mono uppercase tracking-wide text-center w-full mb-4">Tooltip Reveal on Hover</h4>
<button class="group grid place-items-center hover:text-black hover:bg-neutral-200 transition relative text-neutral-500 w-12 h-12 rounded-full cursor-pointer bg-white shadow-sm border border-neutral-200">
<i class="w-5 h-5" data-lucide="home"></i>
<span class="absolute left-14 bg-neutral-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none font-geist-mono">Hover Tooltip</span>
</button>
<p class="text-xs text-neutral-400 font-geist-mono mt-4">opacity-0 group-hover:opacity-100 transition-opacity</p>
</div>
<div class="space-y-4 border border-neutral-200 rounded-2xl p-8 bg-neutral-50 flex flex-col items-center justify-center min-h-[250px]">
<h4 class="text-sm font-semibold text-neutral-900 font-geist-mono uppercase tracking-wide text-center w-full mb-4">Card Lift & Image Scale</h4>
<div class="group w-full max-w-[200px] rounded-xl overflow-hidden border border-neutral-200 shadow-sm bg-white hover:shadow-xl hover:-translate-y-2 transition-all duration-500 cursor-pointer">
<div class="aspect-square bg-neutral-200 w-full opacity-90 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<span class="text-neutral-500 text-xs font-geist-mono">Hover Me</span>
</div>
</div>
<p class="text-xs text-neutral-400 font-geist-mono mt-4 text-center">hover:shadow-xl hover:-translate-y-2 transition-all duration-500</p>
</div>
</div>
</div>
</section>
<section id="icons" class="sm:px-8 px-6 py-16 bg-neutral-50 border-t border-neutral-200">
<div class="max-w-6xl mx-auto">
<div class="flex items-center gap-3 mb-10">
<span class="text-xs font-bold text-neutral-400 uppercase tracking-widest font-geist-mono">06. Icons (Lucide)</span>
<div class="h-px flex-1 bg-neutral-200"></div>
</div>
<div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-6 text-center">
<div class="flex flex-col items-center gap-3 p-4 bg-white rounded-xl border border-neutral-200">
<i class="w-6 h-6 text-neutral-700" data-lucide="home"></i>
<span class="text-[10px] text-neutral-500 font-geist-mono">home</span>
</div>
<div class="flex flex-col items-center gap-3 p-4 bg-white rounded-xl border border-neutral-200">
<i class="w-6 h-6 text-neutral-700" data-lucide="briefcase"></i>
<span class="text-[10px] text-neutral-500 font-geist-mono">briefcase</span>
</div>
<div class="flex flex-col items-center gap-3 p-4 bg-white rounded-xl border border-neutral-200">
<i class="w-6 h-6 text-neutral-700" data-lucide="user"></i>
<span class="text-[10px] text-neutral-500 font-geist-mono">user</span>
</div>
<div class="flex flex-col items-center gap-3 p-4 bg-white rounded-xl border border-neutral-200">
<i class="w-6 h-6 text-neutral-700" data-lucide="mail"></i>
<span class="text-[10px] text-neutral-500 font-geist-mono">mail</span>
</div>
<div class="flex flex-col items-center gap-3 p-4 bg-white rounded-xl border border-neutral-200">
<i class="w-6 h-6 text-neutral-700" data-lucide="arrow-down-right"></i>
<span class="text-[10px] text-neutral-500 font-geist-mono">arrow-down-right</span>
</div>
<div class="flex flex-col items-center gap-3 p-4 bg-white rounded-xl border border-neutral-200">
<i class="w-6 h-6 text-neutral-700" data-lucide="paintbrush"></i>
<span class="text-[10px] text-neutral-500 font-geist-mono">paintbrush</span>
</div>
<div class="flex flex-col items-center gap-3 p-4 bg-white rounded-xl border border-neutral-200">
<i class="w-6 h-6 text-neutral-700" data-lucide="code-2"></i>
<span class="text-[10px] text-neutral-500 font-geist-mono">code-2</span>
</div>
<div class="flex flex-col items-center gap-3 p-4 bg-white rounded-xl border border-neutral-200">
<i class="w-6 h-6 text-neutral-700" data-lucide="layout"></i>
<span class="text-[10px] text-neutral-500 font-geist-mono">layout</span>
</div>
<div class="flex flex-col items-center gap-3 p-4 bg-white rounded-xl border border-neutral-200">
<i class="w-6 h-6 text-neutral-700" data-lucide="arrow-right"></i>
<span class="text-[10px] text-neutral-500 font-geist-mono">arrow-right</span>
</div>
<div class="flex flex-col items-center gap-3 p-4 bg-white rounded-xl border border-neutral-200">
<i class="w-6 h-6 text-neutral-700" data-lucide="plus"></i>
<span class="text-[10px] text-neutral-500 font-geist-mono">plus</span>
</div>
<div class="flex flex-col items-center gap-3 p-4 bg-white rounded-xl border border-neutral-200">
<i class="w-6 h-6 text-neutral-700" data-lucide="quote"></i>
<span class="text-[10px] text-neutral-500 font-geist-mono">quote</span>
</div>
</div>
</div>
</section>
<footer class="bg-white border-t border-neutral-200 px-6 sm:px-8">
<div class="mx-auto max-w-6xl py-12 md:py-20">
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 justify-between items-center">
<div>
<div class="font-bold text-lg tracking-tight mb-2">DS.v2</div>
<p class="text-neutral-500 text-sm font-geist-mono">© 2026 Component Library.</p>
</div>
<div class="flex justify-end text-sm font-medium text-neutral-600">
<a class="hover:text-black transition" href="#">Back to top</a>
</div>
</div>
</div>
</footer>
</main>
<script>
// Lucide Icons Initialization
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
// Three.js Logic for Hero Section Containment (Reused exactly)
const initThreeJS = () => {
const container = document.getElementById('canvas-container');
if (!container || typeof THREE === 'undefined') return;
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0xffffff, 0.002);
let width = container.clientWidth;
let height = container.clientHeight;
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.z = 30;
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(width, height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setClearColor(0xffffff, 1);
container.appendChild(renderer.domElement);
const geometry = new THREE.TorusKnotGeometry(9, 2.5, 120, 16);
const material = new THREE.MeshPhysicalMaterial({
color: 0x888888,
emissive: 0x000000,
metalness: 0.5,
roughness: 0.1,
wireframe: true,
transparent: true,
opacity: 0.3
});
const torusKnot = new THREE.Mesh(geometry, material);
scene.add(torusKnot);
const sparkCount = 100;
const sparkGeo = new THREE.CircleGeometry(0.15, 3);
const sparkMat = new THREE.MeshBasicMaterial({
color: 0xD4AF37,
side: THREE.DoubleSide,
blending: THREE.NormalBlending,
transparent: true,
opacity: 1,
depthTest: false
});
const sparks = new THREE.InstancedMesh(sparkGeo, sparkMat, sparkCount);
torusKnot.add(sparks);
const dummy = new THREE.Object3D();
const sparkData = [];
const radialSegments = 16;
const tubularSegments = 120;
for (let i = 0; i < sparkCount; i++) {
sparkData.push({
speed: 0.001 + Math.random() * 0.002,
progress: Math.random(),
pathIndex: Math.floor(Math.random() * radialSegments)
});
}
const posAttribute = geometry.attributes.position;
const stride = radialSegments + 1;
const v1 = new THREE.Vector3();
const v2 = new THREE.Vector3();
function updateSparks() {
sparkData.forEach((spark, i) => {
spark.progress += spark.speed;
if (spark.progress >= 1) spark.progress = 0;
const exactInd = spark.progress * tubularSegments;
const u = Math.floor(exactInd);
const nextU = (u + 1) % tubularSegments;
const v = spark.pathIndex;
const idx1 = (u * stride + v) * 3;
const idx2 = (nextU * stride + v) * 3;
v1.fromArray(posAttribute.array, idx1);
v2.fromArray(posAttribute.array, idx2);
v1.lerp(v2, exactInd - u);
dummy.position.copy(v1);
dummy.lookAt(v2);
dummy.updateMatrix();
sparks.setMatrixAt(i, dummy.matrix);
});
sparks.instanceMatrix.needsUpdate = true;
}
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
scene.add(ambientLight);
const pLight1 = new THREE.PointLight(0xD4AF37, 1, 50);
pLight1.position.set(10, 10, 10);
scene.add(pLight1);
let mouseX = 0, mouseY = 0;
let targetX = 0, targetY = 0;
const windowHalfX = window.innerWidth / 2;
const windowHalfY = window.innerHeight / 2;
document.addEventListener('mousemove', (e) => {
mouseX = (e.clientX - windowHalfX) * 0.0005;
mouseY = (e.clientY - windowHalfY) * 0.0005;
});
const animate = () => {
requestAnimationFrame(animate);
targetX = mouseX * 0.5;
targetY = mouseY * 0.5;
torusKnot.rotation.y += 0.05 * (targetX - torusKnot.rotation.y) + 0.002;
torusKnot.rotation.x += 0.05 * (targetY - torusKnot.rotation.x) + 0.001;
updateSparks();
renderer.render(scene, camera);
};
animate();
const onResize = () => {
width = container.clientWidth;
height = container.clientHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
};
window.addEventListener('resize', onResize);
};
window.addEventListener('DOMContentLoaded', initThreeJS);
</script>
</body>
</html>