532d7541d6
- Update Tailwind config with new color tokens (primary-blue, active-blue, electric-violet, lime, grey-100/300/700/900, success, warning, error) - Add Inter font from Google Fonts as Barclays Effra alternative - Update Sidebar with primary-blue background and white active state - Update Hero with electric-violet accent and pill-shaped buttons - Update all tables with lime (#C3FB5A) header backgrounds - Implement alternating row colors (white/grey-100) on tables - Update status badges: In Progress (amber), Completed (green) - Update tabs with active-blue underline styling - Apply 10px border radius to cards and containers - Update button styling to pill-shaped with active-blue - Update input/dropdown borders to grey-700 with 2px - Update selected state highlighting to info-light (#E7F0FB) - Update FeedbackReport RAG status colors to new design system Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
61 lines
3.2 KiB
TypeScript
Executable file
61 lines
3.2 KiB
TypeScript
Executable file
|
|
import React from 'react';
|
|
import { ArrowLeftIcon } from './icons/ArrowLeftIcon';
|
|
|
|
interface HeroProps {
|
|
onGetStarted?: () => void;
|
|
}
|
|
|
|
const ArrowRightIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" {...props}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
|
|
</svg>
|
|
);
|
|
|
|
export const Hero: React.FC<HeroProps> = ({ onGetStarted }) => {
|
|
return (
|
|
<div className="relative overflow-hidden bg-primary-blue min-h-[350px] sm:min-h-[400px] md:min-h-[500px] flex items-center">
|
|
{/* Abstract background elements */}
|
|
<div className="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-active-blue/20 blur-3xl pointer-events-none"></div>
|
|
<div className="absolute bottom-[-20%] left-[-10%] w-[500px] h-[500px] rounded-full bg-electric-violet/20 blur-3xl pointer-events-none"></div>
|
|
|
|
{/* Grid Pattern Overlay */}
|
|
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 pointer-events-none"></div>
|
|
|
|
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10 w-full">
|
|
<div className="max-w-3xl">
|
|
<div className="inline-flex items-center px-3 py-1 rounded-full bg-active-blue/10 border border-active-blue/20 text-cyan-brand text-xs font-bold uppercase tracking-widest mb-6">
|
|
<span className="w-2 h-2 rounded-full bg-cyan-brand mr-2 animate-pulse"></span>
|
|
AI-Powered Compliance
|
|
</div>
|
|
|
|
<h1 className="text-5xl md:text-7xl font-extrabold text-white leading-tight mb-6">
|
|
Mod Comms <br/>
|
|
<span className="text-electric-violet">
|
|
Intelligent Review
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-lg md:text-xl text-slate-300 mb-10 leading-relaxed max-w-2xl">
|
|
Streamline your creative approval process. Mod Comms analyses your assets against guidelines and best practice in seconds, not days.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<button
|
|
onClick={onGetStarted}
|
|
className="group inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-active-blue rounded-full shadow-lg shadow-active-blue/30 hover:bg-active-blue/90 transition-all duration-300"
|
|
>
|
|
Start Analysis
|
|
<ArrowRightIcon className="ml-2 h-5 w-5 transform group-hover:translate-x-1 transition-transform" />
|
|
</button>
|
|
<button
|
|
className="inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-white/5 border-2 border-white/20 rounded-full hover:bg-white/10 transition-all duration-300 backdrop-blur-sm"
|
|
>
|
|
View Documentation
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|