File size: 5,994 Bytes
d790e98 abc2a72 d790e98 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { ImageIcon, StackIcon } from './Icons';
import BackgroundAnimation from './BackgroundAnimation';
const Hero: React.FC = () => {
const navigate = useNavigate();
return (
<div className="min-h-screen flex flex-col items-center relative overflow-hidden px-4 pt-28 pb-12">
<BackgroundAnimation />
<div className="z-10 max-w-4xl w-full text-center space-y-12 flex-grow flex flex-col justify-center">
<div className="space-y-6">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs tracking-widest uppercase text-cyan-400 mb-4">
<span className="w-2 h-2 rounded-full bg-cyan-400 animate-ping" />
v2.0 Prototype
</div>
<h1 className="text-8xl font-black tracking-tighter !text-white mb-2 drop-shadow-2xl" style={{ color: '#ffffff', mixBlendMode: 'normal' }}>
PRISM
</h1>
<h2 className="text-3xl font-light text-slate-300 tracking-wide">
Lock Screen Classifier
</h2>
<p className="text-lg text-cyan-400/80 uppercase tracking-widest font-medium">
Automated Compliance for Samsung Glance
</p>
</div>
<div className="max-w-2xl mx-auto glass-panel p-8 rounded-2xl border-l-4 border-l-cyan-500">
<p className="text-slate-200 text-lg leading-relaxed font-light">
"Making classification of lock screens generated by Glance for Samsung
<span className="font-semibold text-white"> automatic without human intervention</span>,
saving <span className="font-semibold text-cyan-300">40 hr/week</span> bandwidth."
</p>
</div>
<div className="grid md:grid-cols-2 gap-6 w-full max-w-3xl mx-auto mt-12">
<button
onClick={() => navigate('/single')}
className="group glass-panel glass-panel-hover rounded-2xl p-6 md:p-8 text-left transition-all duration-300 overflow-hidden h-auto min-h-[240px] flex flex-col"
>
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform flex-shrink-0">
<ImageIcon />
</div>
<h3 className="text-2xl font-semibold text-white mb-2 group-hover:text-cyan-300 transition-colors">Single Image Audit</h3>
<p className="text-slate-400 text-sm break-words leading-relaxed">Deep analysis of individual creative assets with granular compliance checks.</p>
</button>
<button
onClick={() => navigate('/batch')}
className="group glass-panel glass-panel-hover rounded-2xl p-6 md:p-8 text-left transition-all duration-300 overflow-hidden h-auto min-h-[240px] flex flex-col"
>
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform flex-shrink-0">
<StackIcon />
</div>
<h3 className="text-2xl font-semibold text-white mb-2 group-hover:text-cyan-300 transition-colors">Batch Audit</h3>
<p className="text-slate-400 text-sm break-words leading-relaxed">High-volume processing for bulk validations. Generate comprehensive reports.</p>
</button>
</div>
</div>
{/* Proof of Work Section - Actual Images */}
<div className="w-full max-w-3xl mx-auto mt-32 z-10 pb-20">
<div className="text-center mb-12">
<h3 className="text-xl font-light uppercase tracking-widest text-slate-400">Proof of Work</h3>
<div className="h-1 w-20 bg-gradient-to-r from-purple-500 to-cyan-500 mx-auto mt-4 rounded-full"></div>
</div>
<div className="flex flex-col gap-12 items-center">
{/* Certificate 1: Participation (Top) */}
<div className="relative group w-full transform transition-all hover:scale-[1.01]">
<div className="absolute -inset-1 bg-gradient-to-r from-[#EAB308] to-yellow-600 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
<div className="relative rounded-lg overflow-hidden border-4 border-[#EAB308]/50 shadow-2xl bg-white">
<img
src="/static/certificates/participation.png"
alt="Participation Certificate"
className="w-full h-full object-cover"
onError={(e) => {
(e.target as HTMLImageElement).src = 'https://placehold.co/800x600/1e293b/FFF?text=Upload+Participation+Cert+to+static/certificates/';
}}
/>
</div>
</div>
{/* Certificate 2: Excellence (Bottom) */}
<div className="relative group w-full transform transition-all hover:scale-[1.01]">
<div className="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
<div className="relative rounded-lg overflow-hidden border-4 border-cyan-500/50 shadow-2xl bg-white">
<img
src="/static/certificates/excellence.png"
alt="Certificate of Excellence"
className="w-full h-auto block"
onError={(e) => {
(e.target as HTMLImageElement).src = 'https://placehold.co/800x600/1e293b/FFF?text=Upload+Excellence+Cert+to+static/certificates/';
}}
/>
</div>
</div>
</div>
</div>
<footer className="mt-12 text-slate-500 text-sm text-center">
<p className="text-xs mt-2 opacity-50">© made by Devansh Singh</p>
</footer>
</div>
);
};
export default Hero;
|