162 lines
10 KiB
TypeScript
162 lines
10 KiB
TypeScript
|
|
import React from 'react';
|
|
import { LegalIcon } from './icons/LegalIcon';
|
|
import { BrandIcon } from './icons/BrandIcon';
|
|
import { CopyIcon } from './icons/CopyIcon';
|
|
import { ChannelIcon } from './icons/ChannelIcon';
|
|
import { LeadAgentIcon } from './icons/LeadAgentIcon';
|
|
|
|
interface CheckDetail {
|
|
name: string;
|
|
icon: React.ReactNode;
|
|
role: string;
|
|
description: string;
|
|
}
|
|
|
|
const specialistAgents: CheckDetail[] = [
|
|
{
|
|
name: 'Legal Agent',
|
|
icon: <LegalIcon />,
|
|
role: 'Standards & Disclaimers',
|
|
description: 'Ensures compliance with all regulatory requirements.'
|
|
},
|
|
{
|
|
name: 'Brand Agent',
|
|
icon: <BrandIcon />,
|
|
role: 'Visual Identity',
|
|
description: 'Verifies logo usage, color palette, and visual identity.'
|
|
},
|
|
{
|
|
name: 'Tone Agent',
|
|
icon: <CopyIcon />,
|
|
role: 'Voice & Clarity',
|
|
description: 'Analyzes copy for clarity, brand voice, and tone consistency.'
|
|
},
|
|
{
|
|
name: 'Channel Agent',
|
|
icon: <ChannelIcon />,
|
|
role: 'Platform Specs',
|
|
description: 'Checks assets against platform-specific technical specifications.'
|
|
}
|
|
];
|
|
|
|
export const ChecksOverview: React.FC = () => {
|
|
return (
|
|
<div className="relative bg-gradient-to-br from-emerald-50 via-white to-emerald-50/30 py-16 overflow-hidden flex-1 w-full">
|
|
{/* Decorative Background */}
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="absolute top-0 left-1/4 w-[800px] h-[800px] bg-emerald-200/30 rounded-full blur-3xl -translate-y-1/2 mix-blend-multiply"></div>
|
|
<div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-green-200/30 rounded-full blur-3xl translate-y-1/3 mix-blend-multiply"></div>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
{/* Header */}
|
|
<div className="max-w-3xl mx-auto text-center mb-12">
|
|
<div className="inline-flex items-center px-4 py-1.5 rounded-full bg-white border border-emerald-200 text-emerald-700 text-xs font-bold uppercase tracking-widest mb-4 shadow-sm">
|
|
<span className="w-2 h-2 rounded-full bg-emerald-500 mr-2 animate-pulse"></span>
|
|
Intelligent Workflow
|
|
</div>
|
|
<h2 className="text-3xl md:text-4xl font-extrabold text-brand-dark-blue tracking-tight mb-4">
|
|
Orchestrated by AI
|
|
</h2>
|
|
<p className="text-lg text-slate-600 leading-relaxed">
|
|
A central Lead Agent coordinates specialized experts to review every aspect of your content in parallel.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col lg:flex-row items-center justify-center lg:items-stretch gap-0 lg:gap-0">
|
|
|
|
{/* 1. LEAD AGENT CARD (Left) */}
|
|
<div className="w-full max-w-md lg:w-[380px] relative z-20 group/lead flex flex-col">
|
|
<div className="flex-1 relative bg-[#001f5a] rounded-3xl p-6 shadow-2xl shadow-blue-900/20 border border-white/10 text-center transition-all duration-500 hover:-translate-y-2 hover:shadow-blue-900/40 overflow-hidden flex flex-col items-center justify-center">
|
|
{/* Animated Gradient bg */}
|
|
<div className="absolute top-[-50%] left-[-50%] w-[200%] h-[200%] bg-gradient-to-b from-transparent via-white/5 to-transparent rotate-45 transition-transform duration-[3s] group-hover/lead:translate-y-10"></div>
|
|
|
|
<div className="relative z-10">
|
|
<div className="h-20 w-20 mx-auto rounded-2xl bg-white/10 border border-white/20 backdrop-blur-md flex items-center justify-center mb-4 shadow-lg shadow-brand-dark-blue/30 group-hover/lead:scale-110 transition-all duration-500">
|
|
<LeadAgentIcon className="h-10 w-10 text-white" />
|
|
</div>
|
|
|
|
<h3 className="text-2xl font-bold text-white mb-2">Lead Agent</h3>
|
|
<p className="text-brand-light-blue font-bold text-xs uppercase tracking-widest mb-4">Orchestrator</p>
|
|
<p className="text-slate-300 text-sm leading-relaxed">
|
|
Synthesizes feedback & coordinates analysis across all specialist agents.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Connection Node (Desktop) */}
|
|
<div className="hidden lg:flex absolute top-1/2 -right-4 w-8 h-8 bg-[#001f5a] rounded-full border-4 border-emerald-50 items-center justify-center z-30 -translate-y-1/2 shadow-sm translate-x-1/2">
|
|
<div className="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-pulse"></div>
|
|
</div>
|
|
{/* Connection Node (Mobile) */}
|
|
<div className="lg:hidden absolute -bottom-4 left-1/2 w-8 h-8 bg-[#001f5a] rounded-full border-4 border-emerald-50 items-center justify-center z-30 -translate-x-1/2 shadow-sm">
|
|
<div className="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 2. CONNECTOR LINES (Desktop SVG) */}
|
|
<div className="hidden lg:block w-24 relative z-10 self-center h-48">
|
|
<svg className="absolute inset-0 w-full h-full overflow-visible" viewBox="0 0 100 200" preserveAspectRatio="none">
|
|
{/* Connecting paths */}
|
|
<path d="M0,100 C50,100 50,30 100,30" fill="none" stroke="#6ee7b7" strokeWidth="2" strokeDasharray="6 6" />
|
|
<path d="M0,100 C50,100 50,170 100,170" fill="none" stroke="#6ee7b7" strokeWidth="2" strokeDasharray="6 6" />
|
|
|
|
{/* Animated pulses on paths */}
|
|
<circle r="3" fill="#10b981">
|
|
<animateMotion dur="2s" repeatCount="indefinite" path="M0,100 C50,100 50,30 100,30" />
|
|
</circle>
|
|
<circle r="3" fill="#10b981">
|
|
<animateMotion dur="2s" repeatCount="indefinite" begin="1s" path="M0,100 C50,100 50,170 100,170" />
|
|
</circle>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Mobile Connector Spacer */}
|
|
<div className="lg:hidden h-8 w-0.5 bg-emerald-300 my-3"></div>
|
|
|
|
{/* 3. SPECIALIST AGENTS (Right) */}
|
|
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-4xl pl-0 lg:pl-4">
|
|
{specialistAgents.map((agent, index) => (
|
|
<div
|
|
key={agent.name}
|
|
className="group relative rounded-2xl p-5 border border-emerald-100 shadow-sm transition-all duration-500 hover:shadow-xl hover:shadow-emerald-900/5 hover:-translate-y-2 hover:border-emerald-200 overflow-hidden bg-white"
|
|
>
|
|
{/* Base Gradient */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-white via-white to-emerald-50/30 opacity-100 transition-opacity duration-500 group-hover:opacity-0"></div>
|
|
|
|
{/* Hover Gradient - Interactive Green */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-white via-emerald-50 to-emerald-100/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
|
|
|
{/* Animated Shine/Sweep Effect */}
|
|
<div className="absolute top-[-50%] left-[-50%] w-[200%] h-[200%] bg-gradient-to-b from-transparent via-emerald-500/5 to-transparent rotate-45 translate-y-12 transition-transform duration-1000 group-hover:translate-y-[-10%] pointer-events-none"></div>
|
|
|
|
{/* Glassy Highlight */}
|
|
<div className="absolute -top-24 -right-24 w-48 h-48 bg-gradient-to-br from-emerald-400/10 to-transparent rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
|
|
|
|
<div className="relative z-10 flex items-start gap-4">
|
|
<div className={`flex-shrink-0 w-12 h-12 rounded-2xl flex items-center justify-center transition-all duration-300 group-hover:scale-110 group-hover:shadow-md bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white`}>
|
|
{React.cloneElement(agent.icon as React.ReactElement, { className: "h-6 w-6 transition-colors duration-300" })}
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<h4 className="text-base font-bold text-slate-800 group-hover:text-emerald-900 transition-colors duration-300 mb-0.5">
|
|
{agent.name}
|
|
</h4>
|
|
<p className="text-[10px] font-extrabold text-slate-400 uppercase tracking-wider mb-1 group-hover:text-emerald-600 transition-colors duration-300">
|
|
{agent.role}
|
|
</p>
|
|
<p className="text-xs text-slate-600 leading-relaxed group-hover:text-slate-700">
|
|
{agent.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|