Create an ultra modern, sophisticated visual brand guide website for "Digital Dark™ by Inspira® AI". This should be an elegant, interactive, single-page brand guide that presents all brand elements beautifully. The design must be dark, moody, futuristic with deep black backgrounds, high contrast, and neon accents. Think premium tech brand — authoritative, sophisticated, futuristic.
CRITICAL DESIGN REQUIREMENTS:
#0A0A0A primary, #111111 and #1A1A1A secondary)#00D4FF), neon purple (#8B5CF6), electric green (#00FF88)SECTIONS TO BUILD (10 total):
#0A0A0A) — Primary Background — RGB: 10, 10, 10#111111) — Secondary Background — RGB: 17, 17, 17#1A1A1A) — Tertiary Background — RGB: 26, 26, 26#00D4FF) — Primary Accent — RGB: 0, 212, 255#8B5CF6) — Secondary Accent — RGB: 139, 92, 246#00FF88) — Tertiary Accent — RGB: 0, 255, 136#FFFFFF) — Primary Text — RGB: 255, 255, 255#A0A0A0) — Body Text — RGB: 160, 160, 160NAVIGATION:
FOOTER:
Make this feel like a premium, world-class brand experience. Every detail should feel intentional and sophisticated. Use framer-motion for all animations. The overall feel should be like visiting a luxury tech brand's design system documentation.
Now let me set up the todo list and build this comprehensive brand guide:
Now let me build everything. Starting with globals.css and layout:
Now let's build the Hero section:
Now let's build the footer and wire everything together in the main page:
Now the main page that assembles everything:
Now let me fix the value section — there's an unused import issue:
Now let me also fix the unused FadeUp import in value-section and ensure the color section handleCopy function doesn't create a re-render conflict:
The value section looks good. Let me also clean up the color section to remove the unused ColorSwatch and Toast components:
Now let me also clean up the voice section's unused import:
Now let me check the voice section for the unused powerWords variable index:
Now let me also verify the architecture section's unused Circle import and fix the ChevronRight logic:
Now let me do a final check on the section-wrapper FadeUp — the ref type needs to be <HTMLDivElement>. Let me verify it's correct:
Everything looks solid. Let me also fix the section header layout — the max-w-8 class isn't standard Tailwind, let me fix it properly:
The complete Digital Dark™ by Inspira® AI brand guide is live. Here's what was built across 10 fully animated sections: