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,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>
|
||||
|
||||
<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>
|
||||
<ScrollReveal delay={200} duration={600} direction="up">
|
||||
<div className="mb-chorus-xxl">
|
||||
<h1 className="text-h2 mb-chorus-lg">Iconography System</h1>
|
||||
|
||||
<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="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">
|
||||
<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>
|
||||
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<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="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>
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
Reference in New Issue
Block a user