d83dbdce46
- Replace CDN-based Three.js with npm packages for reliable loading - Add DRACO loader support for compressed GLB files - Implement custom horizon gradient environment mapping - Use exact material properties from reference logo.html (MeshPhysicalMaterial) - Apply proper metallic sheen, clearcoat, and reflectivity settings - Fix camera positioning and canvas sizing to prevent clipping - Maintain square aspect ratio for consistent logo display - Load user's mobius-ring.glb with fallback torus geometry 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
43 lines
2.0 KiB
TypeScript
43 lines
2.0 KiB
TypeScript
export default function Components() {
|
|
return (
|
|
<section id="components" className="py-chorus-xxl bg-gradient-to-b dark:from-walnut-950 dark:to-carbon-950 from-sand-200 to-white">
|
|
<div className="px-chorus-lg max-w-5xl mx-auto mb-chorus-lg">
|
|
<h2 className="text-h2 mb-chorus-lg">Components</h2>
|
|
|
|
<div className="py-chorus-lg space-y-chorus-lg">
|
|
<div className="mb-chorus-lg">
|
|
<p className="text-lg mb-chorus-md">
|
|
Component system and design patterns for the CHORUS brand.
|
|
</p>
|
|
<p className="text-carbon-600 dark:text-mulberry-300">
|
|
This section will contain reusable UI components, design patterns, and component specifications for consistent brand implementation.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-chorus-lg md:grid-cols-2">
|
|
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
|
<h3 className="text-h3 mb-chorus-md">UI Components</h3>
|
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
|
Standardized UI components including buttons, forms, cards, and navigation elements.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
|
<h3 className="text-h3 mb-chorus-md">Layout Patterns</h3>
|
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
|
Grid systems, spacing conventions, and responsive layout patterns.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800">
|
|
<h3 className="text-h3 mb-chorus-md">Coming Soon</h3>
|
|
<p className="text-carbon-600 dark:text-mulberry-300">
|
|
Detailed component specifications, code examples, and implementation guidelines will be available soon.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |