Spaces:
Sleeping
Sleeping
File size: 3,192 Bytes
66b6851 | 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 | import React from 'react';
const steps = [
{
id: '01',
title: 'Upload & Ingest',
description: 'Drag and drop any file or provide a live URL for immediate spectral processing.',
},
{
id: '02',
title: 'Neural Analysis',
description: 'Our proprietary models cross-reference the asset against millions of known AI training sets.',
},
{
id: '03',
title: 'Forensic Report',
description: 'Download a certified report detailing every identified marker and confidence level.',
},
];
const HowItWorks = () => {
return (
<section style={{ padding: '8rem 0' }}>
<div style={{ maxWidth: '80rem', margin: '0 auto', padding: '0 1.5rem' }}>
<div style={{ textAlign: 'center', marginBottom: '5rem' }}>
<h2
className="font-display"
style={{ fontSize: 'clamp(1.75rem, 4vw, 2.5rem)', fontWeight: 700, color: 'var(--text-heading)', marginBottom: '1rem' }}
>
The Verification Workflow
</h2>
<p style={{ color: 'var(--text-secondary)', maxWidth: '42rem', margin: '0 auto' }}>
A seamless transition from ingestion to reporting, built for efficiency and legal-grade defensibility.
</p>
</div>
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
gap: '3rem',
position: 'relative',
}}
>
<div
style={{
position: 'absolute',
top: '2rem',
left: '15%',
right: '15%',
height: '1px',
background: 'linear-gradient(to right, transparent, var(--panel-border), transparent)',
}}
/>
{steps.map(step => (
<div key={step.id} style={{ textAlign: 'center', position: 'relative' }}>
<div
style={{
width: '4rem',
height: '4rem',
background: 'var(--bg-primary)',
border: `1px solid var(--border-subtle)`,
borderRadius: '1rem',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '0 auto 1.5rem',
boxShadow: '0 20px 40px rgba(0,0,0,0.1)',
position: 'relative',
zIndex: 10,
transition: 'background 0.3s',
}}
>
<span className="font-display" style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--text-heading)' }}>
{step.id}
</span>
</div>
<h3 className="font-display" style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--text-heading)', marginBottom: '0.75rem' }}>
{step.title}
</h3>
<p style={{ color: 'var(--text-secondary)', fontSize: '0.875rem', lineHeight: 1.7 }}>
{step.description}
</p>
</div>
))}
</div>
</div>
</section>
);
};
export default HowItWorks;
|