feat: Implement ScrollReveal animations and sync navigation icons
- Add ScrollReveal component with Intersection Observer API - Create useIntersectionObserver hook for scroll-based animations - Implement progressive scroll animations on motion page (200ms-600ms delays) - Add CSS animation system with prefers-reduced-motion accessibility support - Update navigation icons for consistency between sidebar and primary nav - Use Interface/Trending_Up for Motion System and Environment/Puzzle for Components - Add GPU-accelerated transforms with will-change optimization 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
@@ -1,4 +1,4 @@
|
||||
|
||||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
export default function ColorsPage() {
|
||||
const lightColorSets = [
|
||||
{
|
||||
@@ -170,7 +170,9 @@ export default function ColorsPage() {
|
||||
<div className="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-mulberry-950 from-white to-sand-200">
|
||||
<section id="colors" className="pt-chorus-xxl">
|
||||
<div className="px-chorus-lg max-w-5xl mx-auto">
|
||||
<h2 className="text-h2 mb-chorus-lg">Color Palette</h2>
|
||||
<ScrollReveal delay={300} duration={600} direction="up">
|
||||
<h2 className="text-h2 mb-chorus-lg">Color Palette</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="space-y-chorus-lg">
|
||||
<div>
|
||||
@@ -183,49 +185,53 @@ export default function ColorsPage() {
|
||||
|
||||
<div className="grid md:grid-cols-2 mb-chorus-lg">
|
||||
<div className="p-chorus-lg bg-mulberry-900 shadow-lg">
|
||||
<div className="flex items-center gap-3 mb-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Moon.png" alt="Dark Mode" className="w-8 h-8" />
|
||||
<h4 className="text-h4 text-white">Dark Mode (Default)</h4>
|
||||
</div>
|
||||
<p className="text-sm text-mulberry-200 mb-chorus-md">Dark mode is the preferred default for all CHORUS Services applications</p>
|
||||
<ul className="text-sm space-y-1 text-mulberry-100">
|
||||
<li><strong>Background Hierarchy:</strong> Carbon Black → Mulberry Variants → Cool Gray</li>
|
||||
<li><strong>Text Hierarchy:</strong> Clean White → Light Gray → Purple Accents</li>
|
||||
<li><strong>Aesthetic:</strong> Ultra-minimalist with sophisticated mulberry accents</li>
|
||||
<li><strong>Contrast:</strong> WCAG 2.1 AA compliant</li>
|
||||
</ul>
|
||||
<ScrollReveal delay={300} duration={600} direction="up">
|
||||
<div className="flex items-center gap-3 mb-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Moon.png" alt="Dark Mode" className="w-8 h-8" />
|
||||
<h4 className="text-h4 text-white">Dark Mode (Default)</h4>
|
||||
</div>
|
||||
<p className="text-sm text-mulberry-200 mb-chorus-md">Dark mode is the preferred default for all CHORUS Services applications</p>
|
||||
<ul className="text-sm space-y-1 text-mulberry-100">
|
||||
<li><strong>Background Hierarchy:</strong> Carbon Black → Mulberry Variants → Cool Gray</li>
|
||||
<li><strong>Text Hierarchy:</strong> Clean White → Light Gray → Purple Accents</li>
|
||||
<li><strong>Aesthetic:</strong> Ultra-minimalist with sophisticated mulberry accents</li>
|
||||
<li><strong>Contrast:</strong> WCAG 2.1 AA compliant</li>
|
||||
</ul>
|
||||
</ScrollReveal>
|
||||
<div className="-mr-chorus-lg">
|
||||
{darkColorSets.map((colorSet) => (
|
||||
<div key={colorSet.name} className={`border border-nickel-200 overflow-hidden bg-${colorSet.baseColor}`}>
|
||||
<div className={`p-chorus-lg bg-${colorSet.baseColor}`}>
|
||||
<div className="flex items-start justify-between mb-chorus-md">
|
||||
<div>
|
||||
<h4 className="text-h4 mb-2">{colorSet.name}</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-2">{colorSet.description}</p>
|
||||
<div className="text-xs space-y-1">
|
||||
<p><strong>Usage:</strong> {colorSet.usage}</p>
|
||||
<p><strong>Psychology:</strong> {colorSet.psychology}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`w-16 h-16 ${colorSet.baseColor}`}></div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 font-mono text-sm">
|
||||
{colorSet.shades.map((shade) => {
|
||||
const isLight = parseInt(shade.name) <= 400;
|
||||
const textColor = isLight
|
||||
? (colorSet.name === 'Sand' || colorSet.name === 'Eucalyptus' ? 'text-carbon-800' : `text-${colorSet.name.toLowerCase()}-900`)
|
||||
: 'text-white';
|
||||
|
||||
return (
|
||||
<div key={shade.name} className={`p-3 flex justify-between items-center ${shade.class} ${textColor}`}>
|
||||
<span className="font-semibold">{colorSet.name.toLowerCase()}-{shade.name}</span>
|
||||
<span className="font-mono text-xs">{shade.hex}</span>
|
||||
<ScrollReveal delay={300} duration={600} direction="up">
|
||||
<div className={`p-chorus-lg bg-${colorSet.baseColor}`}>
|
||||
<div className="flex items-start justify-between mb-chorus-md">
|
||||
<div>
|
||||
<h4 className="text-h4 mb-2">{colorSet.name}</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-2">{colorSet.description}</p>
|
||||
<div className="text-xs space-y-1">
|
||||
<p><strong>Usage:</strong> {colorSet.usage}</p>
|
||||
<p><strong>Psychology:</strong> {colorSet.psychology}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className={`w-16 h-16 ${colorSet.baseColor}`}></div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 font-mono text-sm">
|
||||
{colorSet.shades.map((shade) => {
|
||||
const isLight = parseInt(shade.name) <= 400;
|
||||
const textColor = isLight
|
||||
? (colorSet.name === 'Sand' || colorSet.name === 'Eucalyptus' ? 'text-carbon-800' : `text-${colorSet.name.toLowerCase()}-900`)
|
||||
: 'text-white';
|
||||
|
||||
return (
|
||||
<div key={shade.name} className={`p-3 flex justify-between items-center ${shade.class} ${textColor}`}>
|
||||
<span className="font-semibold">{colorSet.name.toLowerCase()}-{shade.name}</span>
|
||||
<span className="font-mono text-xs">{shade.hex}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -233,21 +239,26 @@ export default function ColorsPage() {
|
||||
</div>
|
||||
|
||||
<div className="p-chorus-lg bg-white shadow-lg">
|
||||
<div className="flex items-center gap-3 mb-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Sun.png" alt="Light Mode" className="w-8 h-8" />
|
||||
<h4 className="text-h4 text-carbon-900">Light Mode (Alternative)</h4>
|
||||
</div>
|
||||
<p className="text-sm text-carbon-700 mb-chorus-md">Available as alternative but dark mode is strongly preferred</p>
|
||||
<ul className="text-sm space-y-1 text-carbon-800">
|
||||
<li><strong>Background Hierarchy:</strong> Pure White → Sand Variants → Eucalyptus</li>
|
||||
<li><strong>Text Hierarchy:</strong> Carbon Black → Medium Gray → Light Gray</li>
|
||||
<li><strong>Usage:</strong> Print materials, accessibility accommodations</li>
|
||||
<li><strong>Contrast:</strong> Optimized for readability on warm backgrounds</li>
|
||||
</ul>
|
||||
|
||||
<ScrollReveal delay={300} duration={600} direction="up">
|
||||
<div className="flex items-center gap-3 mb-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Sun.png" alt="Light Mode" className="w-8 h-8" />
|
||||
<h4 className="text-h4 text-carbon-900">Light Mode (Alternative)</h4>
|
||||
</div>
|
||||
<p className="text-sm text-carbon-700 mb-chorus-md">Available as alternative but dark mode is strongly preferred</p>
|
||||
<ul className="text-sm space-y-1 text-carbon-800">
|
||||
<li><strong>Background Hierarchy:</strong> Pure White → Sand Variants → Eucalyptus</li>
|
||||
<li><strong>Text Hierarchy:</strong> Carbon Black → Medium Gray → Light Gray</li>
|
||||
<li><strong>Usage:</strong> Print materials, accessibility accommodations</li>
|
||||
<li><strong>Contrast:</strong> Optimized for readability on warm backgrounds</li>
|
||||
</ul>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="-ml-chorus-lg">
|
||||
{lightColorSets.map((colorSet) => (
|
||||
<div key={colorSet.name} className={`border border-nickel-200 overflow-hidden bg-${colorSet.baseColor}`}>
|
||||
<ScrollReveal delay={300} duration={600} direction="up">
|
||||
|
||||
<div className={`p-chorus-lg bg-${colorSet.baseColor}`}>
|
||||
<div className="flex items-start justify-between mb-chorus-md">
|
||||
<div>
|
||||
@@ -277,6 +288,7 @@ export default function ColorsPage() {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -51,30 +51,30 @@ export default function Communications() {
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Writing Style</h3>
|
||||
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• Active voice preferred</li>
|
||||
<li>• Clear, concise sentences</li>
|
||||
<li>• Technical accuracy</li>
|
||||
<li>• Inclusive language</li>
|
||||
<li>Active voice preferred</li>
|
||||
<li>Clear, concise sentences</li>
|
||||
<li>Technical accuracy</li>
|
||||
<li>Inclusive language</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Terminology</h3>
|
||||
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• "AI agents" not "bots"</li>
|
||||
<li>• "Context management"</li>
|
||||
<li>• "Distributed orchestration"</li>
|
||||
<li>• "Knowledge fabric"</li>
|
||||
<li>"AI agents" not "bots"</li>
|
||||
<li>"Context management"</li>
|
||||
<li>"Distributed orchestration"</li>
|
||||
<li>"Knowledge fabric"</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Localization</h3>
|
||||
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• Global-first approach</li>
|
||||
<li>• Cultural sensitivity</li>
|
||||
<li>• Technical term consistency</li>
|
||||
<li>• Regional adaptations</li>
|
||||
<li>Global-first approach</li>
|
||||
<li>Cultural sensitivity</li>
|
||||
<li>Technical term consistency</li>
|
||||
<li>Regional adaptations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -790,6 +790,10 @@ pre[class*="language-"] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.secondary-nav {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.primary-nav {
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
@@ -1104,6 +1108,22 @@ nav button {
|
||||
&.dark .bg-white { background-color: #ffffff !important; }
|
||||
}
|
||||
|
||||
/* Scroll Animation System */
|
||||
.scroll-reveal {
|
||||
/* Base styles for scroll animations */
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
/* Accessibility: respect prefers-reduced-motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.scroll-reveal, .scroll-reveal * {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
transform: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced contrast for accessibility theme selection indicators */
|
||||
[data-theme="protanopia"] .ring-ocean-500 { box-shadow: 0 0 0 2px #1e40af !important; }
|
||||
[data-theme="deuteranopia"] .ring-eucalyptus-500 { box-shadow: 0 0 0 2px #6b21a8 !important; }
|
||||
|
||||
@@ -1,37 +1,47 @@
|
||||
import { div } from "three/tsl"
|
||||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
|
||||
export default function IconographyPage() {
|
||||
return (
|
||||
<div className="py-chorus-xxl">
|
||||
<section>
|
||||
<div className="max-w-5xl mx-auto px-chorus-lg pt-chorus-xxl">
|
||||
<div className="mb-chorus-xxl">
|
||||
<h1 className="text-h2 mb-chorus-lg">Iconography System</h1>
|
||||
<ScrollReveal delay={200} duration={600} direction="up">
|
||||
<div className="mb-chorus-xxl">
|
||||
<h1 className="text-h2 mb-chorus-lg">Iconography System</h1>
|
||||
|
||||
<div className="mb-chorus-lg">
|
||||
<h2 className="text-h3 mb-chorus-md">Philosophy</h2>
|
||||
<p className="mb-chorus-md">
|
||||
The CHORUS iconography system uses the <strong>Coolicons v4.1</strong> library, providing a comprehensive set of clean, minimalist icons that align with our ultra-modern aesthetic. Icons serve as visual anchors and functional indicators, maintaining clarity across both light and dark themes while supporting our vision-inclusive design principles.
|
||||
</p>
|
||||
<div className="mb-chorus-lg">
|
||||
<h2 className="text-h3 mb-chorus-md">Philosophy</h2>
|
||||
<p className="mb-chorus-md">
|
||||
The CHORUS iconography system uses the <strong>Coolicons v4.1</strong> library, providing a comprehensive set of clean, minimalist icons that align with our ultra-modern aesthetic. Icons serve as visual anchors and functional indicators, maintaining clarity across both light and dark themes while supporting our vision-inclusive design principles.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
|
||||
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
|
||||
<h4 className="text-h4 mb-chorus-sm">Clarity & Recognition</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Icons communicate instantly without language barriers</p>
|
||||
</div>
|
||||
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
|
||||
<h4 className="text-h4 mb-chorus-sm">Theme Adaptive</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Black and white variants ensure perfect contrast in all modes</p>
|
||||
</div>
|
||||
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
|
||||
<h4 className="text-h4 mb-chorus-sm">Consistent Scale</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Standardized sizing maintains visual harmony</p>
|
||||
<div className="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
|
||||
<ScrollReveal delay={300} duration={600} direction="up">
|
||||
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
|
||||
<h4 className="text-h4 mb-chorus-sm">Clarity & Recognition</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Icons communicate instantly without language barriers</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={400} duration={600} direction="up">
|
||||
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
|
||||
<h4 className="text-h4 mb-chorus-sm">Theme Adaptive</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Black and white variants ensure perfect contrast in all modes</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={500} duration={600} direction="up">
|
||||
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
|
||||
<h4 className="text-h4 mb-chorus-sm">Consistent Scale</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Standardized sizing maintains visual harmony</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
{/* Icon Categories */}
|
||||
|
||||
<section className="mb-chorus-xxl">
|
||||
<h2 className="text-h3 mb-chorus-md">Icon Categories</h2>
|
||||
<p className="mb-chorus-md">
|
||||
@@ -39,390 +49,401 @@ export default function IconographyPage() {
|
||||
</p>
|
||||
|
||||
<div className="space-y-chorus-lg">
|
||||
{/* Interface Icons */}
|
||||
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
||||
<h4 className="text-h4 mb-chorus-md">Interface & Navigation</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Core UI elements for user interaction and navigation</p>
|
||||
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Search</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Settings</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Filter.png" alt="Filter" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Filter.png" alt="Filter" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Filter</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png" alt="Check" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check.png" alt="Check" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Check</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/External_Link.png" alt="External Link" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/External_Link.png" alt="External Link" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Link</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Heart</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="Star" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="Star" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Star</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Delete</span>
|
||||
<ScrollReveal delay={500} duration={600} direction="up">
|
||||
{/* Interface Icons */}
|
||||
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
||||
<h4 className="text-h4 mb-chorus-md">Interface & Navigation</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Core UI elements for user interaction and navigation</p>
|
||||
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Search</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Settings</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Filter.png" alt="Filter" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Filter.png" alt="Filter" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Filter</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png" alt="Check" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check.png" alt="Check" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Check</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/External_Link.png" alt="External Link" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/External_Link.png" alt="External Link" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Link</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Heart</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="Star" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="Star" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Star</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Delete</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Navigation Icons */}
|
||||
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
||||
<h4 className="text-h4 mb-chorus-md">Navigation & Direction</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Directional indicators and navigation controls</p>
|
||||
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="Home" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="Home" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Home</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Left</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Right</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Up</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Down</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Location</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Globe.png" alt="Globe" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Globe.png" alt="Globe" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Globe</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Menu</span>
|
||||
<ScrollReveal delay={500} duration={600} direction="up">
|
||||
{/* Navigation Icons */}
|
||||
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
||||
<h4 className="text-h4 mb-chorus-md">Navigation & Direction</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Directional indicators and navigation controls</p>
|
||||
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="Home" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="Home" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Home</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Left</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Right</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Up</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Down</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Location</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Globe.png" alt="Globe" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Globe.png" alt="Globe" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Globe</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Menu</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* File & System Icons */}
|
||||
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
||||
<h4 className="text-h4 mb-chorus-md">File & System Operations</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">File management and system-level actions</p>
|
||||
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Document.png" alt="Document" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Document.png" alt="Document" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Document</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="Code File" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="Code File" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Code</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Folder.png" alt="Folder" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Folder.png" alt="Folder" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Folder</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Download_Package.png" alt="Download" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Download_Package.png" alt="Download" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Download</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Upload</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/System/Save.png" alt="Save" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/System/Save.png" alt="Save" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Save</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Edit/Copy.png" alt="Copy" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Edit/Copy.png" alt="Copy" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Copy</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Archive.png" alt="Archive" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Archive.png" alt="Archive" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Archive</span>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={500} duration={600} direction="up">
|
||||
{/* File & System Icons */}
|
||||
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
||||
<h4 className="text-h4 mb-chorus-md">File & System Operations</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">File management and system-level actions</p>
|
||||
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Document.png" alt="Document" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Document.png" alt="Document" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Document</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="Code File" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="Code File" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Code</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Folder.png" alt="Folder" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Folder.png" alt="Folder" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Folder</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Download_Package.png" alt="Download" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Download_Package.png" alt="Download" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Download</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Upload</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/System/Save.png" alt="Save" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/System/Save.png" alt="Save" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Save</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Edit/Copy.png" alt="Copy" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Edit/Copy.png" alt="Copy" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Copy</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Archive.png" alt="Archive" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Archive.png" alt="Archive" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Archive</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Communication Icons */}
|
||||
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
||||
<h4 className="text-h4 mb-chorus-md">Communication & Social</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Messaging, notifications, and social interaction</p>
|
||||
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Mail.png" alt="Mail" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Mail.png" alt="Mail" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Mail</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="Chat" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="Chat" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Chat</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Bell.png" alt="Notification" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Bell.png" alt="Notification" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Notify</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Phone.png" alt="Phone" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Phone.png" alt="Phone" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Phone</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Share</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/User/User_01.png" alt="User" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/User/User_01.png" alt="User" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">User</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/User/Users_Group.png" alt="Team" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/User/Users_Group.png" alt="Team" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Team</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Send</span>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={500} duration={600} direction="up">
|
||||
{/* Communication Icons */}
|
||||
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
||||
<h4 className="text-h4 mb-chorus-md">Communication & Social</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Messaging, notifications, and social interaction</p>
|
||||
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Mail.png" alt="Mail" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Mail.png" alt="Mail" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Mail</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="Chat" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="Chat" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Chat</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Bell.png" alt="Notification" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Bell.png" alt="Notification" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Notify</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Phone.png" alt="Phone" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Phone.png" alt="Phone" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Phone</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Share</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/User/User_01.png" alt="User" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/User/User_01.png" alt="User" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">User</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/User/Users_Group.png" alt="Team" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/User/Users_Group.png" alt="Team" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Team</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Send</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status & Warning Icons */}
|
||||
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
||||
<h4 className="text-h4 mb-chorus-md">Status & Feedback</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Status indicators, warnings, and user feedback</p>
|
||||
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Success</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Warning</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Error</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Info.png" alt="Info" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Info.png" alt="Info" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Info</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Help.png" alt="Help" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Help.png" alt="Help" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Help</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Loading.png" alt="Loading" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Loading.png" alt="Loading" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Loading</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock.png" alt="Secure" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock.png" alt="Secure" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Secure</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Unlock</span>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={500} duration={600} direction="up">
|
||||
{/* Status & Warning Icons */}
|
||||
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
||||
<h4 className="text-h4 mb-chorus-md">Status & Feedback</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Status indicators, warnings, and user feedback</p>
|
||||
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Success</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Warning</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Error</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Info.png" alt="Info" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Info.png" alt="Info" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Info</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Help.png" alt="Help" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Help.png" alt="Help" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Help</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Loading.png" alt="Loading" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Loading.png" alt="Loading" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Loading</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock.png" alt="Secure" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock.png" alt="Secure" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Secure</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Unlock</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Usage Guidelines */}
|
||||
<section className="mb-chorus-xxl">
|
||||
<h2 className="text-h3 mb-chorus-md">Usage Guidelines</h2>
|
||||
<ScrollReveal delay={200} duration={600} direction="up">
|
||||
{/* Usage Guidelines */}
|
||||
<section className="mb-chorus-xxl">
|
||||
<h2 className="text-h3 mb-chorus-md">Usage Guidelines</h2>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
{/* DO Section */}
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100 flex items-center gap-chorus-sm">
|
||||
<span className="text-2xl">✓</span>
|
||||
DO
|
||||
</h3>
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
{/* DO Section */}
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100 flex items-center gap-chorus-sm">
|
||||
<span className="text-2xl">✓</span>
|
||||
DO
|
||||
</h3>
|
||||
|
||||
<div className="space-y-chorus-md">
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Use Theme Variants</h4>
|
||||
<p className="text-sm mb-chorus-sm">Always provide both black and white variants for proper contrast in light and dark themes.</p>
|
||||
<div className="flex gap-chorus-sm items-center">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Black Settings" className="w-6 h-6" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="White Settings" className="w-6 h-6 bg-carbon-900 p-1" />
|
||||
<span className="text-sm text-carbon-600 dark:text-mulberry-300">Black & White variants</span>
|
||||
<div className="space-y-chorus-md">
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Use Theme Variants</h4>
|
||||
<p className="text-sm mb-chorus-sm">Always provide both black and white variants for proper contrast in light and dark themes.</p>
|
||||
<div className="flex gap-chorus-sm items-center">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Black Settings" className="w-6 h-6" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="White Settings" className="w-6 h-6 bg-carbon-900 p-1" />
|
||||
<span className="text-sm text-carbon-600 dark:text-mulberry-300">Black & White variants</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Standard Sizes</h4>
|
||||
<p className="text-sm mb-chorus-sm">Use consistent sizing: 16px, 20px, 24px, or 32px for different interface contexts.</p>
|
||||
<div className="flex gap-chorus-sm items-center">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="16px" className="w-4 h-4" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="20px" className="w-5 h-5" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="24px" className="w-6 h-6" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="32px" className="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Semantic Meaning</h4>
|
||||
<p className="text-sm">Choose icons that clearly represent their function and maintain consistency across similar actions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Standard Sizes</h4>
|
||||
<p className="text-sm mb-chorus-sm">Use consistent sizing: 16px, 20px, 24px, or 32px for different interface contexts.</p>
|
||||
<div className="flex gap-chorus-sm items-center">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="16px" className="w-4 h-4" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="20px" className="w-5 h-5" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="24px" className="w-6 h-6" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="32px" className="w-8 h-8" />
|
||||
{/* DON'T Section */}
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-100 flex items-center gap-chorus-sm">
|
||||
<span className="text-2xl">✗</span>
|
||||
DON'T
|
||||
</h3>
|
||||
|
||||
<div className="space-y-chorus-md">
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Mix Icon Styles</h4>
|
||||
<p className="text-sm mb-chorus-sm">Avoid mixing Coolicons with other icon libraries as this breaks visual consistency.</p>
|
||||
<div className="flex gap-chorus-sm items-center opacity-75">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Coolicon" className="w-6 h-6" />
|
||||
<span className="text-sm">+</span>
|
||||
<div className="w-6 h-6 border-2 border-carbon-400 flex items-center justify-center text-xs">?</div>
|
||||
<span className="text-sm text-coral-700 dark:text-coral-300">Mixed styles</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Semantic Meaning</h4>
|
||||
<p className="text-sm">Choose icons that clearly represent their function and maintain consistency across similar actions.</p>
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Arbitrary Sizing</h4>
|
||||
<p className="text-sm mb-chorus-sm">Don't use random sizes that break the visual hierarchy and spacing system.</p>
|
||||
<div className="flex gap-chorus-sm items-center opacity-75">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-3 h-3" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-7 h-7" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-10 h-10" />
|
||||
<span className="text-sm text-coral-700 dark:text-coral-300">Inconsistent sizes</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Modify or Recolor</h4>
|
||||
<p className="text-sm">Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* DON'T Section */}
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-100 flex items-center gap-chorus-sm">
|
||||
<span className="text-2xl">✗</span>
|
||||
DON'T
|
||||
</h3>
|
||||
|
||||
<div className="space-y-chorus-md">
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Mix Icon Styles</h4>
|
||||
<p className="text-sm mb-chorus-sm">Avoid mixing Coolicons with other icon libraries as this breaks visual consistency.</p>
|
||||
<div className="flex gap-chorus-sm items-center opacity-75">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Coolicon" className="w-6 h-6" />
|
||||
<span className="text-sm">+</span>
|
||||
<div className="w-6 h-6 border-2 border-carbon-400 flex items-center justify-center text-xs">?</div>
|
||||
<span className="text-sm text-coral-700 dark:text-coral-300">Mixed styles</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Arbitrary Sizing</h4>
|
||||
<p className="text-sm mb-chorus-sm">Don't use random sizes that break the visual hierarchy and spacing system.</p>
|
||||
<div className="flex gap-chorus-sm items-center opacity-75">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-3 h-3" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-7 h-7" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-10 h-10" />
|
||||
<span className="text-sm text-coral-700 dark:text-coral-300">Inconsistent sizes</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Modify or Recolor</h4>
|
||||
<p className="text-sm">Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Implementation Guide */}
|
||||
<section>
|
||||
<h2 className="text-h3 mb-chorus-md">Implementation Guide</h2>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg">
|
||||
The CHORUS iconography system is implemented using the Coolicons v4.1 library with theme-aware variants for optimal accessibility.
|
||||
</p>
|
||||
|
||||
<div className="bg-gradient-to-r from-mulberry-50 to-ocean-50 border border-mulberry-100 p-chorus-lg dark:from-mulberry-900/20 dark:to-ocean-900/20 dark:border-mulberry-700">
|
||||
<h4 className="text-base font-semibold text-mulberry-700 dark:text-mulberry-300 mb-chorus-sm">
|
||||
Implementation Steps
|
||||
</h4>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-md">
|
||||
Use theme-aware icon implementation with automatic dark/light mode switching:
|
||||
<ScrollReveal delay={200} duration={600} direction="up">
|
||||
{/* Implementation Guide */}
|
||||
<section>
|
||||
<h2 className="text-h3 mb-chorus-md">Implementation Guide</h2>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg">
|
||||
The CHORUS iconography system is implemented using the Coolicons v4.1 library with theme-aware variants for optimal accessibility.
|
||||
</p>
|
||||
|
||||
<div className="space-y-chorus-md">
|
||||
<div>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
1. Theme-Aware Icon Implementation (HTML/React)
|
||||
</h5>
|
||||
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
|
||||
<pre>{`<!-- Light theme icon (visible in light mode) -->
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png"
|
||||
alt="Settings"
|
||||
className="w-6 h-6 dark:hidden" />
|
||||
<div className="bg-gradient-to-r from-mulberry-50 to-ocean-50 border border-mulberry-100 p-chorus-lg dark:from-mulberry-900/20 dark:to-ocean-900/20 dark:border-mulberry-700">
|
||||
<h4 className="text-base font-semibold text-mulberry-700 dark:text-mulberry-300 mb-chorus-sm">
|
||||
Implementation Steps
|
||||
</h4>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-md">
|
||||
Use theme-aware icon implementation with automatic dark/light mode switching:
|
||||
</p>
|
||||
|
||||
<!-- Dark theme icon (visible in dark mode) -->
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png"
|
||||
alt="Settings"
|
||||
className="w-6 h-6 hidden dark:block" />`}</pre>
|
||||
<div className="space-y-chorus-md">
|
||||
<div>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
1. Theme-Aware Icon Implementation (HTML/React)
|
||||
</h5>
|
||||
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
|
||||
<pre>{`<!-- Light theme icon (visible in light mode) -->
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png"
|
||||
alt="Settings"
|
||||
className="w-6 h-6 dark:hidden" />
|
||||
|
||||
<!-- Dark theme icon (visible in dark mode) -->
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png"
|
||||
alt="Settings"
|
||||
className="w-6 h-6 hidden dark:block" />`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
2. Standard Icon Sizes (CSS Classes)
|
||||
</h5>
|
||||
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
|
||||
<pre>{`/* Standard icon sizes following CHORUS spacing system */
|
||||
.icon-sm { width: 1rem; height: 1rem; } /* 16px */
|
||||
.icon-md { width: 1.25rem; height: 1.25rem; } /* 20px */
|
||||
.icon-lg { width: 1.5rem; height: 1.5rem; } /* 24px */
|
||||
.icon-xl { width: 2rem; height: 2rem; } /* 32px */`}</pre>
|
||||
<div>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
2. Standard Icon Sizes (CSS Classes)
|
||||
</h5>
|
||||
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
|
||||
<pre>{`/* Standard icon sizes following CHORUS spacing system */
|
||||
.icon-sm { width: 1rem; height: 1rem; } /* 16px */
|
||||
.icon-md { width: 1.25rem; height: 1.25rem; } /* 20px */
|
||||
.icon-lg { width: 1.5rem; height: 1.5rem; } /* 24px */
|
||||
.icon-xl { width: 2rem; height: 2rem; } /* 32px */`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
3. Icon Library Structure
|
||||
</h5>
|
||||
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
|
||||
<pre>{`public/icons/coolicons.v4.1/
|
||||
├── coolicons PNG/
|
||||
│ ├── Black/ # Light theme icons
|
||||
│ └── White/ # Dark theme icons
|
||||
├── coolicons SVG/ # Vector versions
|
||||
└── Webfont/ # Icon font (optional)`}</pre>
|
||||
<div>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
3. Icon Library Structure
|
||||
</h5>
|
||||
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
|
||||
<pre>{`public/icons/coolicons.v4.1/
|
||||
├── coolicons PNG/
|
||||
│ ├── Black/ # Light theme icons
|
||||
│ └── White/ # Dark theme icons
|
||||
├── coolicons SVG/ # Vector versions
|
||||
└── Webfont/ # Icon font (optional)`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,27 +1,37 @@
|
||||
|
||||
import ThreeLogo from '@/components/ThreeLogo';
|
||||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
|
||||
export default function LogoPage() {
|
||||
return (
|
||||
<div className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-700 dark:to-mulberry-950 to-white from-sand-400 ">
|
||||
{/* Full-width Hero Section with 3D Logo */}
|
||||
<section id="logo-hero" className="mb-chorus-lg pt-chorus-xl">
|
||||
|
||||
<div className="relative">
|
||||
{/* Fixed Hero Section with 3D Logo */}
|
||||
<section
|
||||
id="logo-hero"
|
||||
className="fixed top-0 left-0 right-0 bottom-0 md:left-64 flex items-center justify-center bg-gradient-to-b dark:from-mulberry-700 dark:to-mulberry-950 to-white from-sand-400"
|
||||
>
|
||||
<ScrollReveal delay={300} duration={600} direction="up">
|
||||
{/* Logo Section */}
|
||||
<div className="pt-chorus-xs logo-group-circular mx-auto">
|
||||
<div className="pb-chorus-md item mx-auto logo-group-circular">
|
||||
<div className="logo-group-circular">
|
||||
<div className="item logo-group-circular">
|
||||
<ThreeLogo width={512} height={512} />
|
||||
<h4 className="text-h4 font-logo">CHORUS</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ScrollReveal>
|
||||
</section>
|
||||
|
||||
<div className="max-w-5xl mx-auto px-chorus-lg py-chorus-xxl">
|
||||
{/* Spacer to create scroll space */}
|
||||
<div className="h-screen"></div>
|
||||
|
||||
{/* Sliding Content Overlay */}
|
||||
<div className="relative z-10 bg-white dark:bg-transparent shadow-2xl">
|
||||
<div className="max-w-5xl mx-auto px-chorus-lg py-chorus-xxl">
|
||||
{/* Logo System Content */}
|
||||
<div className="space-y-chorus-xxl">
|
||||
{/* Primary Logo Description */}
|
||||
<section>
|
||||
<ScrollReveal delay={300} duration={600} direction="up">
|
||||
<section>
|
||||
<h2 className="text-h2 mb-chorus-lg">Logo System</h2>
|
||||
|
||||
<div className="space-y-chorus-lg">
|
||||
@@ -64,8 +74,8 @@ export default function LogoPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</ScrollReveal>
|
||||
{/* Logo Orientations */}
|
||||
<section>
|
||||
<h3 className="text-h3 mb-chorus-md">Logo Orientations</h3>
|
||||
@@ -261,6 +271,7 @@ export default function LogoPage() {
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
|
||||
export default function Motion() {
|
||||
return (
|
||||
<div className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-950 dark:to-carbon-950 from-white to-sand-200">
|
||||
@@ -6,171 +8,181 @@ export default function Motion() {
|
||||
<h2 className="text-h2 mb-chorus-lg">Motion System</h2>
|
||||
|
||||
<div className="py-chorus-lg space-y-chorus-lg">
|
||||
<div className="mb-chorus-lg">
|
||||
<p className="text-lg mb-chorus-md">
|
||||
The CHORUS motion system creates sophisticated, purposeful animations that enhance usability without overwhelming users.
|
||||
</p>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300">
|
||||
Our implementation focuses on performance, accessibility, and consistent timing that reinforces the premium CHORUS brand personality.
|
||||
</p>
|
||||
</div>
|
||||
<ScrollReveal delay={200} duration={600} direction="up">
|
||||
<div className="mb-chorus-lg">
|
||||
<p className="text-lg mb-chorus-md">
|
||||
The CHORUS motion system creates sophisticated, purposeful animations that enhance usability without overwhelming users.
|
||||
</p>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300">
|
||||
Our implementation focuses on performance, accessibility, and consistent timing that reinforces the premium CHORUS brand personality.
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-3">
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||
<h3 className="text-h3 mb-chorus-md">Timing Scale</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-carbon-600 dark:text-mulberry-300">Fast</span>
|
||||
<span className="font-mono">200ms</span>
|
||||
<ScrollReveal delay={300} duration={600} direction="up">
|
||||
<div className="grid gap-chorus-lg md:grid-cols-3">
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||
<h3 className="text-h3 mb-chorus-md">Timing Scale</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-carbon-600 dark:text-mulberry-300">Fast</span>
|
||||
<span className="font-mono">200ms</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-carbon-600 dark:text-mulberry-300">Standard</span>
|
||||
<span className="font-mono">300ms</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-carbon-600 dark:text-mulberry-300">Deliberate</span>
|
||||
<span className="font-mono">500ms</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-carbon-600 dark:text-mulberry-300">Standard</span>
|
||||
<span className="font-mono">300ms</span>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||
<h3 className="text-h3 mb-chorus-md">Easing Functions</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-carbon-600 dark:text-mulberry-300">Primary</span>
|
||||
<span className="font-mono">ease-out</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-carbon-600 dark:text-mulberry-300">Secondary</span>
|
||||
<span className="font-mono">ease-in-out</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-carbon-600 dark:text-mulberry-300">Emphasis</span>
|
||||
<span className="font-mono">cubic-bezier</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-carbon-600 dark:text-mulberry-300">Deliberate</span>
|
||||
<span className="font-mono">500ms</span>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||
<h3 className="text-h3 mb-chorus-md">Motion Properties</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="text-carbon-600 dark:text-mulberry-300">• Opacity transitions</div>
|
||||
<div className="text-carbon-600 dark:text-mulberry-300">• Color changes</div>
|
||||
<div className="text-carbon-600 dark:text-mulberry-300">• Background shifts</div>
|
||||
<div className="text-carbon-600 dark:text-mulberry-300">• Transform effects</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||
<h3 className="text-h3 mb-chorus-md">Easing Functions</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-carbon-600 dark:text-mulberry-300">Primary</span>
|
||||
<span className="font-mono">ease-out</span>
|
||||
<ScrollReveal delay={400} duration={600} direction="up">
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
<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">Interactive Elements</h3>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Navigation Links</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Hover states with lateral translation and color transitions</p>
|
||||
<div className="font-mono text-xs text-carbon-500">
|
||||
hover:translate-x-1 transition-all duration-300 ease-out
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Icons & Elements</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Scale transformations on hover with rotation for chevrons</p>
|
||||
<div className="font-mono text-xs text-carbon-500">
|
||||
group-hover:scale-110 transition-transform duration-300
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Dropdowns</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Vertical slide with opacity fade-in</p>
|
||||
<div className="font-mono text-xs text-carbon-500">
|
||||
translateY(-8px) → translateY(0) opacity transition
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-carbon-600 dark:text-mulberry-300">Secondary</span>
|
||||
<span className="font-mono">ease-in-out</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-carbon-600 dark:text-mulberry-300">Emphasis</span>
|
||||
<span className="font-mono">cubic-bezier</span>
|
||||
</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">3D Logo Animation</h3>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Continuous Rotation</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Subtle multi-axis rotation using requestAnimationFrame</p>
|
||||
<div className="font-mono text-xs text-carbon-500 space-y-1">
|
||||
<div>rotation.x += 0.010</div>
|
||||
<div>rotation.y += -0.010</div>
|
||||
<div>rotation.z += -0.1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Material Transitions</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Dynamic color changes for accessibility themes</p>
|
||||
<div className="font-mono text-xs text-carbon-500">
|
||||
Custom event-driven material updates
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||
<h3 className="text-h3 mb-chorus-md">Motion Properties</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="text-carbon-600 dark:text-mulberry-300">• Opacity transitions</div>
|
||||
<div className="text-carbon-600 dark:text-mulberry-300">• Color changes</div>
|
||||
<div className="text-carbon-600 dark:text-mulberry-300">• Background shifts</div>
|
||||
<div className="text-carbon-600 dark:text-mulberry-300">• Transform effects</div>
|
||||
<ScrollReveal delay={500} duration={600} direction="up">
|
||||
<div className="bg-white dark:bg-carbon-900 p-chorus-lg border border-nickel-200 dark:border-carbon-800">
|
||||
<h3 className="text-h3 mb-chorus-md">CSS Implementation</h3>
|
||||
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-2">Global Transition Rule</h4>
|
||||
<div className="bg-carbon-50 dark:bg-carbon-800 p-3 font-mono text-xs overflow-x-auto">
|
||||
<div className="text-eucalyptus-700 dark:text-eucalyptus-300">* {</div>
|
||||
<div className="pl-4 text-carbon-700 dark:text-carbon-300">
|
||||
transition: opacity 200ms ease-out,<br />
|
||||
color 200ms ease-out,<br />
|
||||
background-color 200ms ease-out,<br />
|
||||
border-color 200ms ease-out;
|
||||
</div>
|
||||
<div className="text-eucalyptus-700 dark:text-eucalyptus-300">}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-2">Component Transitions</h4>
|
||||
<div className="bg-carbon-50 dark:bg-carbon-800 p-3 font-mono text-xs overflow-x-auto">
|
||||
<div className="text-ocean-700 dark:text-ocean-300">.nav-link {</div>
|
||||
<div className="pl-4 text-carbon-700 dark:text-carbon-300">
|
||||
transition-all: duration-300 ease-out;<br />
|
||||
&:hover {<br />
|
||||
transform: translateX(4px);<br />
|
||||
}
|
||||
</div>
|
||||
<div className="text-ocean-700 dark:text-ocean-300">}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
<ScrollReveal delay={600} duration={600} direction="up">
|
||||
<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">Interactive Elements</h3>
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-h3 mb-chorus-md">Motion Principles</h3>
|
||||
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Navigation Links</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Hover states with lateral translation and color transitions</p>
|
||||
<div className="font-mono text-xs text-carbon-500">
|
||||
hover:translate-x-1 transition-all duration-300 ease-out
|
||||
</div>
|
||||
<h4 className="text-sm font-semibold text-eucalyptus-700 dark:text-eucalyptus-400 mb-2">Design Guidelines</h4>
|
||||
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• Purposeful motion that guides user attention</li>
|
||||
<li>• Consistent 200-300ms timing for interface elements</li>
|
||||
<li>• Ease-out curves for natural, organic feeling</li>
|
||||
<li>• Subtle transforms that enhance without distracting</li>
|
||||
<li>• Performance-optimized with GPU acceleration</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Icons & Elements</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Scale transformations on hover with rotation for chevrons</p>
|
||||
<div className="font-mono text-xs text-carbon-500">
|
||||
group-hover:scale-110 transition-transform duration-300
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Dropdowns</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Vertical slide with opacity fade-in</p>
|
||||
<div className="font-mono text-xs text-carbon-500">
|
||||
translateY(-8px) → translateY(0) opacity transition
|
||||
</div>
|
||||
<h4 className="text-sm font-semibold text-coral-700 dark:text-coral-400 mb-2">Accessibility Considerations</h4>
|
||||
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• Respects prefers-reduced-motion settings</li>
|
||||
<li>• No flashing or rapid animations</li>
|
||||
<li>• Focus indicators remain clearly visible</li>
|
||||
<li>• Essential information never animation-dependent</li>
|
||||
<li>• Smooth transitions preserve context and orientation</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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">3D Logo Animation</h3>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Continuous Rotation</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Subtle multi-axis rotation using requestAnimationFrame</p>
|
||||
<div className="font-mono text-xs text-carbon-500 space-y-1">
|
||||
<div>rotation.x += 0.010</div>
|
||||
<div>rotation.y += -0.010</div>
|
||||
<div>rotation.z += -0.1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Material Transitions</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Dynamic color changes for accessibility themes</p>
|
||||
<div className="font-mono text-xs text-carbon-500">
|
||||
Custom event-driven material updates
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-carbon-900 p-chorus-lg border border-nickel-200 dark:border-carbon-800">
|
||||
<h3 className="text-h3 mb-chorus-md">CSS Implementation</h3>
|
||||
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-2">Global Transition Rule</h4>
|
||||
<div className="bg-carbon-50 dark:bg-carbon-800 p-3 font-mono text-xs overflow-x-auto">
|
||||
<div className="text-eucalyptus-700 dark:text-eucalyptus-300">* {</div>
|
||||
<div className="pl-4 text-carbon-700 dark:text-carbon-300">
|
||||
transition: opacity 200ms ease-out,<br />
|
||||
color 200ms ease-out,<br />
|
||||
background-color 200ms ease-out,<br />
|
||||
border-color 200ms ease-out;
|
||||
</div>
|
||||
<div className="text-eucalyptus-700 dark:text-eucalyptus-300">}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-2">Component Transitions</h4>
|
||||
<div className="bg-carbon-50 dark:bg-carbon-800 p-3 font-mono text-xs overflow-x-auto">
|
||||
<div className="text-ocean-700 dark:text-ocean-300">.nav-link {</div>
|
||||
<div className="pl-4 text-carbon-700 dark:text-carbon-300">
|
||||
transition-all: duration-300 ease-out;<br />
|
||||
&:hover {<br />
|
||||
transform: translateX(4px);<br />
|
||||
}
|
||||
</div>
|
||||
<div className="text-ocean-700 dark:text-ocean-300">}</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">Motion Principles</h3>
|
||||
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-eucalyptus-700 dark:text-eucalyptus-400 mb-2">Design Guidelines</h4>
|
||||
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• Purposeful motion that guides user attention</li>
|
||||
<li>• Consistent 200-300ms timing for interface elements</li>
|
||||
<li>• Ease-out curves for natural, organic feeling</li>
|
||||
<li>• Subtle transforms that enhance without distracting</li>
|
||||
<li>• Performance-optimized with GPU acceleration</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-coral-700 dark:text-coral-400 mb-2">Accessibility Considerations</h4>
|
||||
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• Respects prefers-reduced-motion settings</li>
|
||||
<li>• No flashing or rapid animations</li>
|
||||
<li>• Focus indicators remain clearly visible</li>
|
||||
<li>• Essential information never animation-dependent</li>
|
||||
<li>• Smooth transitions preserve context and orientation</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,203 +1,213 @@
|
||||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
|
||||
export default function TypographyPage() {
|
||||
return (
|
||||
<div className="py-chorus-xxl">
|
||||
<section className="mb-chorus-xxl pt-chorus-xxl">
|
||||
<div className="mb-chorus-xxl max-w-5xl mx-auto px-chorus-lg ">
|
||||
<ScrollReveal delay={300} duration={600} direction="up">
|
||||
|
||||
<h1 className="text-h2 mb-chorus-md">Typography</h1>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-md">
|
||||
The CHORUS typography system is designed for clarity, hierarchy, and accessibility across all devices.
|
||||
</p>
|
||||
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md mb-chorus-lg">
|
||||
<h4 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100">✓ Complete System Scaling</h4>
|
||||
<p className="text-eucalyptus-800 dark:text-eucalyptus-200">
|
||||
All spacing, sizing, and proportions automatically scale with the 18px base. CHORUS spacing system (chorus-xs, chorus-md, etc.) maintains perfect proportional relationships.
|
||||
<h1 className="text-h2 mb-chorus-md">Typography</h1>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-md">
|
||||
The CHORUS typography system is designed for clarity, hierarchy, and accessibility across all devices.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Font Families */}
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Font Families</h2>
|
||||
<div className="grid gap-chorus-lg md:grid-cols-3">
|
||||
<div className="border-r border-nickel-200 dark:border-mulberry-800 pr-chorus-md">
|
||||
<h3 className="font-sans text-3xl mb-chorus-md">Inter Tight</h3>
|
||||
<p className="mb-chorus-md">
|
||||
The primary typeface for CHORUS is <strong>Inter Tight</strong>, a modern sans-serif font designed for high legibility and versatility.
|
||||
</p>
|
||||
<p className="text-carbon-500 dark:text-mulberry-300 text-sm mb-chorus-sm">
|
||||
Fallback fonts include Arial, Helvetica, sans-serif.
|
||||
</p>
|
||||
<p className="text-carbon-500 dark:text-mulberry-300 text-sm">
|
||||
Inter is available for free under the SIL Open Font License and can be downloaded from{' '}
|
||||
<a href="https://rsms.me/inter/" className="text-ocean-600 dark:text-ocean-400 hover:underline">
|
||||
rsms.me/inter
|
||||
</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-r border-nickel-200 dark:border-mulberry-800 pr-chorus-md">
|
||||
<h3 className="font-logo text-3xl mb-chorus-md">Exo</h3>
|
||||
<p className="mb-chorus-md">
|
||||
The logo typeface for CHORUS is <strong>Exo</strong>, a modern sans-serif font designed for high legibility and versatility.
|
||||
</p>
|
||||
<p className="text-carbon-500 dark:text-mulberry-300 text-sm mb-chorus-sm">
|
||||
Fallback fonts should be avoided but can include Arial, Helvetica, sans-serif.
|
||||
</p>
|
||||
<p className="text-carbon-500 dark:text-mulberry-300 text-sm">
|
||||
Exo is available for free under the SIL Open Font License and can be downloaded from Google Fonts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-mono text-3xl mb-chorus-md">Inconsolata</h3>
|
||||
<p className="mb-chorus-md">
|
||||
The code typeface for CHORUS is <span className="font-mono">Inconsolata</span>, a modern mono-spaced font designed for high legibility at small sizes.
|
||||
</p>
|
||||
<p className="text-carbon-500 dark:text-mulberry-300 text-sm mb-chorus-sm">
|
||||
Fallback fonts include Fira Mono, Monaco, Courier New, monospace.
|
||||
</p>
|
||||
<p className="text-carbon-500 dark:text-mulberry-300 text-sm">
|
||||
Inconsolata is available for free under the SIL Open Font License and can be downloaded from Google Fonts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Typography Examples - DO vs DON'T */}
|
||||
<div className="py-chorus-xl">
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
{/* DO Section */}
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100 flex items-center gap-chorus-sm">
|
||||
<span className="text-2xl">✓</span>
|
||||
DO
|
||||
</h3>
|
||||
<div className="mb-chorus-lg">
|
||||
<p>This column represents the <strong>correct</strong> typographic approach to font selection, weight, scaling, coloration.</p>
|
||||
</div>
|
||||
|
||||
{/* Headings Example */}
|
||||
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg mb-chorus-md">
|
||||
<h4 className="text-h4 mb-chorus-md">Headings</h4>
|
||||
<div className="space-y-chorus-sm">
|
||||
<h1 className="text-5xl font-logo font-thin">Masthead</h1>
|
||||
<h1 className="text-h1">Heading 1</h1>
|
||||
<h2 className="text-h2">Heading 2</h2>
|
||||
<h3 className="text-h3">Heading 3</h3>
|
||||
<h4 className="text-h4">Heading 4</h4>
|
||||
<h5 className="text-h5">Heading 5</h5>
|
||||
<h6 className="text-h6">Heading 6</h6>
|
||||
<h6 className="text-h7">Heading 7</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Weight Adjustments */}
|
||||
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg mb-chorus-md">
|
||||
<h4 className="text-h4 mb-chorus-md">Adjust Weight for Contrast</h4>
|
||||
<div className="space-y-chorus-sm">
|
||||
<p className="font-thin">Thin (100)</p>
|
||||
<p className="font-extralight">Extra Light (200)</p>
|
||||
<p className="font-light">Light (300)</p>
|
||||
<p className="font-normal">Normal (400)</p>
|
||||
<p className="font-medium">Medium (500)</p>
|
||||
<p className="font-semibold">Semi Bold (600)</p>
|
||||
<p className="font-bold">Bold (700)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Paragraph Examples */}
|
||||
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg mb-chorus-md">
|
||||
<h4 className="text-h4 mb-chorus-md">Weight for emphasis</h4>
|
||||
<p className="font-bold text-base text-carbon-600 dark:text-white mb-chorus-sm">
|
||||
This body text has been set for particular emphasis of a single paragraph.
|
||||
</p>
|
||||
<p className="text-base text-carbon-600 dark:text-white mb-chorus-sm">
|
||||
This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility.
|
||||
</p>
|
||||
<p className="text-sm text-carbon-500 dark:text-mulberry-300">
|
||||
This is smaller body text for secondary information.
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md mb-chorus-lg">
|
||||
<h4 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100">✓ Complete System Scaling</h4>
|
||||
<p className="text-eucalyptus-800 dark:text-eucalyptus-200">
|
||||
All spacing, sizing, and proportions automatically scale with the 18px base. CHORUS spacing system (chorus-xs, chorus-md, etc.) maintains perfect proportional relationships.
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Links */}
|
||||
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h4 className="text-h4 mb-chorus-md">Links</h4>
|
||||
<p className="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">
|
||||
Links are styled to be clear and accessible:
|
||||
</p>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li><a href="#" className="text-ocean-600 dark:text-ocean-400 hover:text-ocean-800 dark:hover:text-ocean-200 transition-colors">Primary Link</a></li>
|
||||
<li><a href="#" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-900 dark:hover:text-white transition-colors">Secondary Link</a></li>
|
||||
</ul>
|
||||
<ScrollReveal delay={400} duration={600} direction="up">
|
||||
{/* Font Families */}
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Font Families</h2>
|
||||
<div className="grid gap-chorus-lg md:grid-cols-3">
|
||||
<div className="border-r border-nickel-200 dark:border-mulberry-800 pr-chorus-md">
|
||||
<h3 className="font-sans text-3xl mb-chorus-md">Inter Tight</h3>
|
||||
<p className="mb-chorus-md">
|
||||
The primary typeface for CHORUS is <strong>Inter Tight</strong>, a modern sans-serif font designed for high legibility and versatility.
|
||||
</p>
|
||||
<p className="text-carbon-500 dark:text-mulberry-300 text-sm mb-chorus-sm">
|
||||
Fallback fonts include Arial, Helvetica, sans-serif.
|
||||
</p>
|
||||
<p className="text-carbon-500 dark:text-mulberry-300 text-sm">
|
||||
Inter is available for free under the SIL Open Font License and can be downloaded from{' '}
|
||||
<a href="https://rsms.me/inter/" className="text-ocean-600 dark:text-ocean-400 hover:underline">
|
||||
rsms.me/inter
|
||||
</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-r border-nickel-200 dark:border-mulberry-800 pr-chorus-md">
|
||||
<h3 className="font-logo text-3xl mb-chorus-md">Exo</h3>
|
||||
<p className="mb-chorus-md">
|
||||
The logo typeface for CHORUS is <strong>Exo</strong>, a modern sans-serif font designed for high legibility and versatility.
|
||||
</p>
|
||||
<p className="text-carbon-500 dark:text-mulberry-300 text-sm mb-chorus-sm">
|
||||
Fallback fonts should be avoided but can include Arial, Helvetica, sans-serif.
|
||||
</p>
|
||||
<p className="text-carbon-500 dark:text-mulberry-300 text-sm">
|
||||
Exo is available for free under the SIL Open Font License and can be downloaded from Google Fonts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-mono text-3xl mb-chorus-md">Inconsolata</h3>
|
||||
<p className="mb-chorus-md">
|
||||
The code typeface for CHORUS is <span className="font-mono">Inconsolata</span>, a modern mono-spaced font designed for high legibility at small sizes.
|
||||
</p>
|
||||
<p className="text-carbon-500 dark:text-mulberry-300 text-sm mb-chorus-sm">
|
||||
Fallback fonts include Fira Mono, Monaco, Courier New, monospace.
|
||||
</p>
|
||||
<p className="text-carbon-500 dark:text-mulberry-300 text-sm">
|
||||
Inconsolata is available for free under the SIL Open Font License and can be downloaded from Google Fonts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* DON'T Section */}
|
||||
<ScrollReveal delay={500} duration={600} direction="up">
|
||||
{/* Typography Examples - DO vs DON'T */}
|
||||
<div className="py-chorus-xl">
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
{/* DO Section */}
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-sm text-coral-900 dark:text-coral-100 flex items-center gap-chorus-sm">
|
||||
<span className="text-2xl">✗</span>
|
||||
DON'T
|
||||
<h3 className="text-h3 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100 flex items-center gap-chorus-sm">
|
||||
<span className="text-2xl">✓</span>
|
||||
DO
|
||||
</h3>
|
||||
<div className="mb-chorus-lg">
|
||||
<p>This column represents <strong>incorrect</strong> approaches to avoid.</p>
|
||||
<p>This column represents the <strong>correct</strong> typographic approach to font selection, weight, scaling, coloration.</p>
|
||||
</div>
|
||||
|
||||
{/* Wrong Headings Example */}
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg mb-chorus-md">
|
||||
<h4 className="text-h4 mb-chorus-md">Adjust Weights or Sizes</h4>
|
||||
{/* Headings Example */}
|
||||
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg mb-chorus-md">
|
||||
<h4 className="text-h4 mb-chorus-md">Headings</h4>
|
||||
<div className="space-y-chorus-sm">
|
||||
<h1 className="text-3xl font-logo font-bold">Masthead</h1>
|
||||
<h1 className="text-h1 font-semibold">Heading 1</h1>
|
||||
<h2 className="text-h2 font-medium">Heading 2</h2>
|
||||
<h3 className="text-h3 font-black">Heading 3</h3>
|
||||
<h4 className="text-xl">Heading 4</h4>
|
||||
<h5 className="text-xs">Heading 5</h5>
|
||||
<h6 className="text-sm">Heading 6</h6>
|
||||
<h1 className="text-5xl font-logo font-thin">Masthead</h1>
|
||||
<h1 className="text-h1">Heading 1</h1>
|
||||
<h2 className="text-h2">Heading 2</h2>
|
||||
<h3 className="text-h3">Heading 3</h3>
|
||||
<h4 className="text-h4">Heading 4</h4>
|
||||
<h5 className="text-h5">Heading 5</h5>
|
||||
<h6 className="text-h6">Heading 6</h6>
|
||||
<h6 className="text-h7">Heading 7</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Wrong Color Usage */}
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg mb-chorus-md">
|
||||
<h4 className="text-h4 mb-chorus-md">Color for emphasis</h4>
|
||||
<p className="text-base text-coral-800 dark:text-coral-400 mb-chorus-sm">
|
||||
Body text should not be colored to emphasise a paragraph.
|
||||
{/* Weight Adjustments */}
|
||||
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg mb-chorus-md">
|
||||
<h4 className="text-h4 mb-chorus-md">Adjust Weight for Contrast</h4>
|
||||
<div className="space-y-chorus-sm">
|
||||
<p className="font-thin">Thin (100)</p>
|
||||
<p className="font-extralight">Extra Light (200)</p>
|
||||
<p className="font-light">Light (300)</p>
|
||||
<p className="font-normal">Normal (400)</p>
|
||||
<p className="font-medium">Medium (500)</p>
|
||||
<p className="font-semibold">Semi Bold (600)</p>
|
||||
<p className="font-bold">Bold (700)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Paragraph Examples */}
|
||||
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg mb-chorus-md">
|
||||
<h4 className="text-h4 mb-chorus-md">Weight for emphasis</h4>
|
||||
<p className="font-bold text-base text-carbon-600 dark:text-white mb-chorus-sm">
|
||||
This body text has been set for particular emphasis of a single paragraph.
|
||||
</p>
|
||||
<p className="text-base text-carbon-600 dark:text-white mb-chorus-sm">
|
||||
This is normal paragraph text used throughout the CHORUS design system.
|
||||
This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility.
|
||||
</p>
|
||||
<p className="text-sm text-carbon-500 dark:text-mulberry-300">
|
||||
This is smaller body text for secondary information.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Wrong Spacing */}
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg">
|
||||
<h4 className="text-h4 mb-chorus-xxl">Overset Leading</h4>
|
||||
<p className="font-bold text-base text-carbon-600 dark:text-white mb-chorus-xl">
|
||||
This text has been set with excessive leading for the paragraph and its associated heading.
|
||||
</p>
|
||||
<p className="text-base text-carbon-600 dark:text-white mb-chorus-lg">
|
||||
Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection.
|
||||
</p>
|
||||
<p className="text-sm text-carbon-500 dark:text-mulberry-300 mb-chorus-lg">
|
||||
This smaller body text for secondary information appears orphaned.
|
||||
{/* Links */}
|
||||
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h4 className="text-h4 mb-chorus-md">Links</h4>
|
||||
<p className="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">
|
||||
Links are styled to be clear and accessible:
|
||||
</p>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li><a href="#" className="text-ocean-600 dark:text-ocean-400 hover:text-ocean-800 dark:hover:text-ocean-200 transition-colors">Primary Link</a></li>
|
||||
<li><a href="#" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-900 dark:hover:text-white transition-colors">Secondary Link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DON'T Section */}
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-sm text-coral-900 dark:text-coral-100 flex items-center gap-chorus-sm">
|
||||
<span className="text-2xl">✗</span>
|
||||
DON'T
|
||||
</h3>
|
||||
<div className="mb-chorus-lg">
|
||||
<p>This column represents <strong>incorrect</strong> approaches to avoid.</p>
|
||||
</div>
|
||||
|
||||
{/* Wrong Headings Example */}
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg mb-chorus-md">
|
||||
<h4 className="text-h4 mb-chorus-md">Adjust Weights or Sizes</h4>
|
||||
<div className="space-y-chorus-sm">
|
||||
<h1 className="text-3xl font-logo font-bold">Masthead</h1>
|
||||
<h1 className="text-h1 font-semibold">Heading 1</h1>
|
||||
<h2 className="text-h2 font-medium">Heading 2</h2>
|
||||
<h3 className="text-h3 font-black">Heading 3</h3>
|
||||
<h4 className="text-xl">Heading 4</h4>
|
||||
<h5 className="text-xs">Heading 5</h5>
|
||||
<h6 className="text-sm">Heading 6</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Wrong Color Usage */}
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg mb-chorus-md">
|
||||
<h4 className="text-h4 mb-chorus-md">Color for emphasis</h4>
|
||||
<p className="text-base text-coral-800 dark:text-coral-400 mb-chorus-sm">
|
||||
Body text should not be colored to emphasise a paragraph.
|
||||
</p>
|
||||
<p className="text-base text-carbon-600 dark:text-white mb-chorus-sm">
|
||||
This is normal paragraph text used throughout the CHORUS design system.
|
||||
</p>
|
||||
<p className="text-sm text-carbon-500 dark:text-mulberry-300">
|
||||
This is smaller body text for secondary information.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Wrong Spacing */}
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg">
|
||||
<h4 className="text-h4 mb-chorus-xxl">Overset Leading</h4>
|
||||
<p className="font-bold text-base text-carbon-600 dark:text-white mb-chorus-xl">
|
||||
This text has been set with excessive leading for the paragraph and its associated heading.
|
||||
</p>
|
||||
<p className="text-base text-carbon-600 dark:text-white mb-chorus-lg">
|
||||
Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection.
|
||||
</p>
|
||||
<p className="text-sm text-carbon-500 dark:text-mulberry-300 mb-chorus-lg">
|
||||
This smaller body text for secondary information appears orphaned.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Typography Scale */}
|
||||
<ScrollReveal delay={600} duration={600} direction="up">
|
||||
{/* Typography Scale */}
|
||||
|
||||
<h2 className="text-h3 mb-chorus-md">Proportional Font Scale</h2>
|
||||
<p className="text-sm text-carbon-500 dark:text-mulberry-300 mb-chorus-lg">
|
||||
Based on Major Third (1.25×) ratio with 18px foundation for enhanced readability
|
||||
</p>
|
||||
<h2 className="text-h3 mb-chorus-md">Proportional Font Scale</h2>
|
||||
<p className="text-sm text-carbon-500 dark:text-mulberry-300 mb-chorus-lg">
|
||||
Based on Major Third (1.25×) ratio with 18px foundation for enhanced readability
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
|
||||
<ScrollReveal delay={700} duration={600} direction="up">
|
||||
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<div className="grid gap-chorus-sm md:grid-cols-2">
|
||||
<div>
|
||||
<h4 className="text-h4 mb-chorus-sm">Display Sizes</h4>
|
||||
@@ -218,50 +228,54 @@ export default function TypographyPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
|
||||
<div className="pt-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Implementation Guide</h2>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg">
|
||||
The CHORUS typography system uses a proportional scale with 18px base font size, ensuring consistent scaling across all elements and devices.
|
||||
</p>
|
||||
|
||||
<div className="bg-gradient-to-r from-mulberry-50 to-coral-50 border border-mulberry-100 p-chorus-lg dark:from-mulberry-900/20 dark:to-coral-900/20 dark:border-mulberry-700">
|
||||
<h4 className="text-base font-semibold text-mulberry-700 dark:text-mulberry-300 mb-chorus-sm">
|
||||
Implementation Steps
|
||||
</h4>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-md">
|
||||
Configure your build system to use the proportional typography scale with 18px base:
|
||||
<ScrollReveal delay={800} duration={600} direction="up">
|
||||
<div className="pt-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Implementation Guide</h2>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg">
|
||||
The CHORUS typography system uses a proportional scale with 18px base font size, ensuring consistent scaling across all elements and devices.
|
||||
</p>
|
||||
|
||||
<div className="space-y-chorus-md">
|
||||
<div>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
1. Set Root Font Size (CSS)
|
||||
</h5>
|
||||
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm">
|
||||
<pre>{`html {
|
||||
font-size: 18px; /* CHORUS proportional base */
|
||||
}`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gradient-to-r from-mulberry-50 to-coral-50 border border-mulberry-100 p-chorus-lg dark:from-mulberry-900/20 dark:to-coral-900/20 dark:border-mulberry-700">
|
||||
<h4 className="text-base font-semibold text-mulberry-700 dark:text-mulberry-300 mb-chorus-sm">
|
||||
Implementation Steps
|
||||
</h4>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-md">
|
||||
Configure your build system to use the proportional typography scale with 18px base:
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
2. Usage Examples (HTML)
|
||||
</h5>
|
||||
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm">
|
||||
<pre>{`<!-- Typography classes scale proportionally from 18px base -->
|
||||
<h1 class="text-h1">Main Heading</h1>
|
||||
<h2 class="text-h2">Section Heading</h2>
|
||||
<p class="text-base">Body paragraph text</p>
|
||||
<span class="text-sm">Secondary information</span>`}</pre>
|
||||
<div className="space-y-chorus-md">
|
||||
<div>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
1. Set Root Font Size (CSS)
|
||||
</h5>
|
||||
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm">
|
||||
<pre>{`html {
|
||||
font-size: 18px; /* CHORUS proportional base */
|
||||
}`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
2. Usage Examples (HTML)
|
||||
</h5>
|
||||
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm">
|
||||
<pre>{`<!-- Typography classes scale proportionally from 18px base -->
|
||||
<h1 class="text-h1">Main Heading</h1>
|
||||
<h2 class="text-h2">Section Heading</h2>
|
||||
<p class="text-base">Body paragraph text</p>
|
||||
<span class="text-sm">Secondary information</span>`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -25,10 +25,8 @@ export default function Footer() {
|
||||
<h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Brand Guide</h4>
|
||||
<ul className="space-y-chorus-xs text-sm">
|
||||
<li><Link href="/" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Overview</Link></li>
|
||||
<li><Link href="/identity" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Brand Identity</Link></li>
|
||||
<li><Link href="/colors" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Color Palette</Link></li>
|
||||
<li><Link href="/typography" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Typography</Link></li>
|
||||
<li><Link href="/logo" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Logo System</Link></li>
|
||||
<li><Link href="/visual-identity" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Visual Identity</Link></li>
|
||||
<li><Link href="/communications" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Communications</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -39,8 +39,8 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
|
||||
{ href: '/colors', section: 'colors', icon: 'Edit/Swatches_Palette', label: 'Color Palette' },
|
||||
{ href: '/iconography', section: 'iconography', icon: 'Interface/Main_Component', label: 'Iconography' },
|
||||
{ href: '/accessibility', section: 'accessibility', icon: 'Interface/Heart_01', label: 'Accessibility' },
|
||||
{ href: '/components', section: 'components', icon: 'Interface/Settings', label: 'Components' },
|
||||
{ href: '/motion', section: 'motion', icon: 'Interface/Link', label: 'Motion System' },
|
||||
{ href: '/components', section: 'components', icon: 'Environment/Puzzle', label: 'Components' },
|
||||
{ href: '/motion', section: 'motion', icon: 'Interface/Trending_Up', label: 'Motion System' },
|
||||
{ href: '/implementation', section: 'implementation', icon: 'File/File_Code', label: 'Implementation' },
|
||||
]
|
||||
},
|
||||
@@ -95,7 +95,7 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
|
||||
className={`w-full group flex items-center justify-between gap-2 px-chorus-sm py-chorus-xs text-left transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${
|
||||
isActive
|
||||
? 'bg-sand-100 text-mulberry-950 dark:bg-mulberry-800 dark:text-white font-medium'
|
||||
: 'text-carbon-700 dark:text-mulberry-300'
|
||||
: 'transparent'
|
||||
}`}
|
||||
aria-expanded={isExpanded}
|
||||
>
|
||||
@@ -131,7 +131,7 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
|
||||
onClick={onClose}
|
||||
className={`p-chorus-sm flex items-center gap-2 px-chorus-sm transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${
|
||||
isCurrentPage(item.href)
|
||||
? 'bg-sand-50 text-mulberry-950 dark:bg-mulberry-900 dark:text-white font-medium border-l-2 border-mulberry-600 dark:border-mulberry-400'
|
||||
? 'transparent text-mulberry-950 dark:text-white font-medium border-l-2 border-mulberry-600 dark:border-mulberry-400'
|
||||
: 'text-carbon-600 dark:text-mulberry-400'
|
||||
}`}
|
||||
>
|
||||
@@ -266,7 +266,7 @@ const Header = () => {
|
||||
{/* Desktop primary navigation - hidden on mobile */}
|
||||
<nav className="primary-nav hidden lg:block">
|
||||
<ul className="horizontal-menu">
|
||||
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300 backdrop-blur">
|
||||
<li className="item">
|
||||
<div className="flex items-center gap-2 ml-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
|
||||
@@ -296,7 +296,7 @@ const Header = () => {
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300 backdrop-blur">
|
||||
<li className="item">
|
||||
<div className="flex items-center gap-2 ml-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Shape/Circle.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Shape/Circle.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
|
||||
@@ -348,15 +348,15 @@ const Header = () => {
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/components" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Puzzle.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Puzzle.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Components</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/motion" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Link.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Link.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trending_Up.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Trending_Up.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Motion System</span>
|
||||
</Link>
|
||||
</li>
|
||||
@@ -369,7 +369,7 @@ const Header = () => {
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300">
|
||||
<li className="item">
|
||||
<div className="flex items-center gap-2 ml-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';
|
||||
|
||||
interface ScrollRevealProps {
|
||||
children: React.ReactNode;
|
||||
delay?: number;
|
||||
duration?: number;
|
||||
direction?: 'up' | 'down' | 'left' | 'right';
|
||||
distance?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function ScrollReveal({
|
||||
children,
|
||||
delay = 0,
|
||||
duration = 600,
|
||||
direction = 'up',
|
||||
distance = 24,
|
||||
className = '',
|
||||
}: ScrollRevealProps) {
|
||||
const { elementRef, isVisible } = useIntersectionObserver({
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -100px 0px',
|
||||
triggerOnce: true,
|
||||
});
|
||||
|
||||
const getTransform = (visible: boolean) => {
|
||||
if (visible) return 'translate3d(0, 0, 0)';
|
||||
|
||||
switch (direction) {
|
||||
case 'up':
|
||||
return `translate3d(0, ${distance}px, 0)`;
|
||||
case 'down':
|
||||
return `translate3d(0, -${distance}px, 0)`;
|
||||
case 'left':
|
||||
return `translate3d(${distance}px, 0, 0)`;
|
||||
case 'right':
|
||||
return `translate3d(-${distance}px, 0, 0)`;
|
||||
default:
|
||||
return `translate3d(0, ${distance}px, 0)`;
|
||||
}
|
||||
};
|
||||
|
||||
const revealStyle = {
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: getTransform(isVisible),
|
||||
transition: `opacity ${duration}ms ease-out ${delay}ms, transform ${duration}ms ease-out ${delay}ms`,
|
||||
willChange: 'opacity, transform',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={elementRef}
|
||||
style={revealStyle}
|
||||
className={`scroll-reveal ${className}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -22,7 +22,7 @@ export default function ThreeLogo({ width = 64, height = 64, className = "" }: T
|
||||
// Scene / Renderer / Camera
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
|
||||
camera.position.set(0, 0, 2.2); // Move camera back to prevent clipping
|
||||
camera.position.set(0, 0, 3.0); // Move camera back to prevent clipping
|
||||
camera.lookAt(0, 0, 0); // Ensure camera looks at exact center
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
interface IntersectionObserverOptions {
|
||||
threshold?: number;
|
||||
rootMargin?: string;
|
||||
triggerOnce?: boolean;
|
||||
}
|
||||
|
||||
export function useIntersectionObserver(
|
||||
options: IntersectionObserverOptions = {}
|
||||
) {
|
||||
const { threshold = 0.1, rootMargin = '0px 0px -100px 0px', triggerOnce = true } = options;
|
||||
const [isIntersecting, setIsIntersecting] = useState(false);
|
||||
const [hasIntersected, setHasIntersected] = useState(false);
|
||||
const elementRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const element = elementRef.current;
|
||||
if (!element) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
const isVisible = entry.isIntersecting;
|
||||
setIsIntersecting(isVisible);
|
||||
|
||||
if (isVisible && !hasIntersected) {
|
||||
setHasIntersected(true);
|
||||
}
|
||||
},
|
||||
{
|
||||
threshold,
|
||||
rootMargin,
|
||||
}
|
||||
);
|
||||
|
||||
observer.observe(element);
|
||||
|
||||
return () => {
|
||||
observer.unobserve(element);
|
||||
};
|
||||
}, [threshold, rootMargin, hasIntersected]);
|
||||
|
||||
return {
|
||||
elementRef,
|
||||
isVisible: triggerOnce ? hasIntersected : isIntersecting,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user