feat(brand-system): Implement comprehensive CHORUS brand system with typography and design tokens
This commit implements a complete brand system overhaul including: TYPOGRAPHY SYSTEM: - Add Exo font family (Thin, Light, Regular, ExtraLight) as primary brand font - Implement SF Pro Display/Text hierarchy for UI components - Create comprehensive Typography component with all brand variants - Update all components to use new typography tokens DESIGN TOKEN SYSTEM: - Create complete design token system in theme/designTokens.ts - Define Carbon Black (#1a1a1a), Walnut Brown (#8B4513), Brushed Aluminum (#A8A8A8) palette - Implement CSS custom properties for consistent theming - Update Ant Design theme integration COMPONENT UPDATES: - Enhance Hero section with Exo Thin typography and improved layout - Update navigation with SF Pro font hierarchy - Redesign Button component with new variants and accessibility - Apply brand colors and typography across all showcase sections - Improve Footer with consistent brand application PERFORMANCE & ACCESSIBILITY: - Self-host Exo fonts for optimal loading performance - Implement proper font-display strategies - Add comprehensive accessibility audit documentation - Include responsive testing verification DOCUMENTATION: - Add brand system demo and implementation guides - Include QA testing reports and accessibility audits - Document design token usage and component patterns 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
@@ -2,13 +2,12 @@
|
||||
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { motion, useScroll, useTransform, useSpring, useInView } from 'framer-motion';
|
||||
import { Typography, Space } from 'antd';
|
||||
import { Space } from 'antd';
|
||||
import { PlayIcon, ArrowRightIcon, ChevronDownIcon } from 'lucide-react';
|
||||
import { PrimaryButton, SecondaryButton } from '@/components/ui/Button';
|
||||
import { Typography } from '@/components/ui/Typography';
|
||||
import { useReducedMotion } from '@/hooks/useReducedMotion';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
interface ParallaxLayerProps {
|
||||
children: React.ReactNode;
|
||||
speed: number;
|
||||
@@ -264,7 +263,9 @@ const ScrollIndicator: React.FC = () => {
|
||||
>
|
||||
<ChevronDownIcon size={24} />
|
||||
</motion.div>
|
||||
<span className="text-sm mt-2 tracking-wider">SCROLL</span>
|
||||
<Typography.Interface size="small" className="mt-2" style={{ letterSpacing: '0.2em' }}>
|
||||
SCROLL
|
||||
</Typography.Interface>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
@@ -353,38 +354,38 @@ const EnhancedHero: React.FC = () => {
|
||||
{/* Background floating elements */}
|
||||
<ParallaxLayer speed={-0.3} className="absolute -top-20 -left-20">
|
||||
<FloatingElement delay={0}>
|
||||
<div className="w-32 h-32 rounded-full border border-white/5 bg-gradient-to-r from-chorus-blue/10 to-chorus-green/10" />
|
||||
<div className="w-32 h-32 rounded-full border border-white/5 bg-gradient-to-r from-slate-400/8 to-slate-500/6" />
|
||||
</FloatingElement>
|
||||
</ParallaxLayer>
|
||||
|
||||
<ParallaxLayer speed={-0.5} className="absolute -top-40 -right-32">
|
||||
<FloatingElement delay={1}>
|
||||
<div className="w-48 h-48 rounded-full border border-white/5 bg-gradient-to-l from-chorus-green/10 to-chorus-blue/10" />
|
||||
<div className="w-48 h-48 rounded-full border border-white/5 bg-gradient-to-l from-slate-500/6 to-slate-400/8" />
|
||||
</FloatingElement>
|
||||
</ParallaxLayer>
|
||||
|
||||
{/* Main Headline */}
|
||||
{/* Main Headline - Exo Thin for maximum impact */}
|
||||
<motion.div variants={itemVariants} className="mb-8">
|
||||
<Title
|
||||
level={1}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold mb-6 text-white leading-tight"
|
||||
style={{ letterSpacing: '-0.02em' }}
|
||||
<Typography.Hero
|
||||
className="mb-6"
|
||||
role="heading"
|
||||
aria-level={1}
|
||||
gradient
|
||||
>
|
||||
<GradientText>CHORUS</GradientText> Services
|
||||
</Title>
|
||||
CHORUS Services
|
||||
</Typography.Hero>
|
||||
</motion.div>
|
||||
|
||||
{/* Subtitle */}
|
||||
<motion.div variants={itemVariants} className="mb-12">
|
||||
<Paragraph
|
||||
className="text-lg sm:text-xl md:text-2xl text-gray-300 max-w-4xl mx-auto leading-relaxed"
|
||||
role="heading"
|
||||
aria-level={2}
|
||||
<Typography.Body
|
||||
size="large"
|
||||
color="secondary"
|
||||
className="max-w-4xl mx-auto"
|
||||
style={{ fontSize: 'clamp(18px, 3vw, 24px)' }}
|
||||
>
|
||||
Distributed AI Orchestration Without the Hallucinations
|
||||
</Paragraph>
|
||||
</Typography.Body>
|
||||
</motion.div>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
@@ -422,38 +423,27 @@ const EnhancedHero: React.FC = () => {
|
||||
</Space>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats or additional info */}
|
||||
{/* Technical Capabilities */}
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className="mt-16 grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-2xl mx-auto"
|
||||
className="mt-16 grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-3xl mx-auto"
|
||||
>
|
||||
{[
|
||||
{ label: 'Components', value: '4+', color: 'chorus-blue' },
|
||||
{ label: 'Uptime', value: '99.9%', color: 'chorus-green' },
|
||||
{ label: 'Performance', value: '< 100ms', color: 'yellow-400' },
|
||||
].map((stat, index) => (
|
||||
{ label: 'Distributed Architecture', value: 'P2P Mesh', color: 'slate-400' },
|
||||
{ label: 'Context Persistence', value: 'Hypercore', color: 'slate-400' },
|
||||
{ label: 'Enterprise Ready', value: 'Production', color: 'slate-400' },
|
||||
].map((capability, index) => (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
className="text-center"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
key={capability.label}
|
||||
className="text-center p-4 glass-effect rounded-lg"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<motion.div
|
||||
className={`text-2xl font-bold text-${stat.color} mb-2`}
|
||||
animate={{
|
||||
scale: [1, 1.1, 1],
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
delay: index * 0.5 + 3,
|
||||
repeat: Infinity,
|
||||
repeatDelay: 5,
|
||||
}}
|
||||
>
|
||||
{stat.value}
|
||||
</motion.div>
|
||||
<div className={`text-lg font-semibold text-${capability.color} mb-2`}>
|
||||
{capability.value}
|
||||
</div>
|
||||
<div className="text-gray-400 text-sm uppercase tracking-wider">
|
||||
{stat.label}
|
||||
{capability.label}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
@@ -466,10 +456,10 @@ const EnhancedHero: React.FC = () => {
|
||||
{/* Ambient lighting effects */}
|
||||
<div className="absolute inset-0 pointer-events-none" aria-hidden="true">
|
||||
<motion.div
|
||||
className="absolute top-1/4 left-1/4 w-96 h-96 bg-chorus-blue/5 rounded-full blur-3xl"
|
||||
className="absolute top-1/4 left-1/4 w-96 h-96 bg-slate-400/3 rounded-full blur-3xl"
|
||||
animate={prefersReducedMotion ? {} : {
|
||||
scale: [1, 1.2, 1],
|
||||
opacity: [0.3, 0.5, 0.3],
|
||||
opacity: [0.2, 0.3, 0.2],
|
||||
}}
|
||||
transition={{
|
||||
duration: prefersReducedMotion ? 0 : 8,
|
||||
@@ -478,10 +468,10 @@ const EnhancedHero: React.FC = () => {
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-chorus-green/5 rounded-full blur-3xl"
|
||||
className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-slate-500/3 rounded-full blur-3xl"
|
||||
animate={prefersReducedMotion ? {} : {
|
||||
scale: [1.2, 1, 1.2],
|
||||
opacity: [0.5, 0.3, 0.5],
|
||||
opacity: [0.3, 0.2, 0.3],
|
||||
}}
|
||||
transition={{
|
||||
duration: prefersReducedMotion ? 0 : 8,
|
||||
|
||||
Reference in New Issue
Block a user