web_client/src/components/Hero.tsx

import { ArrowRight, BookOpen } from 'lucide-react';

export const Hero = () => {
    return (
        <header className="pt-32 pb-20 text-center px-6">
            <div className="max-w-4xl mx-auto">
                <h1 className="text-5xl md:text-7xl font-extrabold mb-8 leading-tight tracking-tight text-white">
                    Security Outside the <br />
                    <span className="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Context Window.</span>
                </h1>

                <p className="text-xl text-slate-400 mb-12 max-w-2xl mx-auto leading-relaxed">
                    LLMs generate language, but they cannot enforce policy. UPIF is the application-layer guard that handles
                    security deterministically, moving protection out of the prompt.
                </p>

                <div className="flex justify-center gap-4">
                    <a href="#lab" className="bg-blue-600 px-8 py-4 rounded-xl font-bold hover:bg-blue-700 transition text-white flex items-center gap-2">
                        Analyze Workflow <ArrowRight className="w-4 h-4" />
                    </a>
                    <a href="#docs"
                        className="border border-slate-700 px-8 py-4 rounded-xl font-semibold text-slate-300 hover:bg-slate-800 transition flex items-center gap-2">
                        <BookOpen className="w-4 h-4" /> SDK Documentation
                    </a>
                </div>

                <div className="mt-20 p-8 glass rounded-2xl border border-blue-500/20 max-w-2xl mx-auto">
                    <div className="flex items-center gap-4 mb-4">
                        <div className="w-3 h-3 rounded-full bg-red-500"></div>
                        <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                        <div className="w-3 h-3 rounded-full bg-green-500"></div>
                    </div>
                    <div className="text-left font-mono text-sm text-slate-400">
                        <span className="text-purple-400">from</span> upif <span className="text-purple-400">import</span> guard<br />
                        <br />
                        <span className="text-slate-500"># The model is never the security boundary.</span><br />
                        safe_prompt = guard.process_input(user_request)<br />
                        response = llm.generate(safe_prompt)<br />
                        final_output = guard.process_output(response)
                    </div>
                </div>
            </div>
        </header>
    );
};