557305db5d
Some checks failed
ci/woodpecker/push/integration Pipeline failed
ci/woodpecker/push/main Pipeline failed
CI/CD Pipeline / Go Tests (push) Has been cancelled
CI/CD Pipeline / Python Tests (push) Has been cancelled
CI/CD Pipeline / Website Tests (push) Has been cancelled
CI/CD Pipeline / Linting (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Docker Build & Push (push) Has been cancelled
CI/CD Pipeline / Integration Tests (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
CI/CD Pipeline / CI Summary (push) Has been cancelled
Security Scanning / Secret Scanning (push) Has been cancelled
Security Scanning / Dependency Vulnerability Scan (push) Has been cancelled
Security Scanning / Go Security Scan (push) Has been cancelled
Security Scanning / Python Security Scan (push) Has been cancelled
Security Scanning / Node.js Security Scan (push) Has been cancelled
Security Scanning / Docker Image Security (push) Has been cancelled
Security Scanning / Security Summary (push) Has been cancelled
Tests / Go Tests (push) Has been cancelled
Tests / Python Tests (push) Has been cancelled
Tests / Integration Tests (push) Has been cancelled
Tests / Go Lint (push) Has been cancelled
Tests / Python Lint (push) Has been cancelled
Tests / Security Scan (push) Has been cancelled
Tests / All Checks Passed (push) Has been cancelled
- Academy, Whistleblower, Incidents frontend pages with API proxies and types - Vendor compliance API proxy route - Go backend handlers and models for all new SDK modules - Investor pitch-deck app with interactive slides - Blog section with DSGVO, AI Act, NIS2, glossary articles - MkDocs documentation site - CI/CD pipelines (Woodpecker, GitHub Actions), security scanning config - Planning and implementation documentation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { Language } from '@/lib/types'
|
|
import { t } from '@/lib/i18n'
|
|
import { Plug, Settings, RefreshCw, CheckCircle2 } from 'lucide-react'
|
|
import GradientText from '../ui/GradientText'
|
|
import FadeInView from '../ui/FadeInView'
|
|
|
|
interface HowItWorksSlideProps {
|
|
lang: Language
|
|
}
|
|
|
|
const stepIcons = [Plug, Settings, RefreshCw, CheckCircle2]
|
|
const stepColors = ['text-blue-400', 'text-indigo-400', 'text-purple-400', 'text-green-400']
|
|
|
|
export default function HowItWorksSlide({ lang }: HowItWorksSlideProps) {
|
|
const i = t(lang)
|
|
|
|
return (
|
|
<div>
|
|
<FadeInView className="text-center mb-12">
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
|
<GradientText>{i.howItWorks.title}</GradientText>
|
|
</h2>
|
|
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.howItWorks.subtitle}</p>
|
|
</FadeInView>
|
|
|
|
<div className="relative max-w-4xl mx-auto">
|
|
{/* Connection Line */}
|
|
<div className="absolute left-8 top-12 bottom-12 w-px bg-gradient-to-b from-blue-500 via-purple-500 to-green-500 hidden md:block" />
|
|
|
|
<div className="space-y-8">
|
|
{i.howItWorks.steps.map((step, idx) => {
|
|
const Icon = stepIcons[idx]
|
|
return (
|
|
<motion.div
|
|
key={idx}
|
|
initial={{ opacity: 0, x: -30 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 0.3 + idx * 0.2, duration: 0.5 }}
|
|
className="flex items-start gap-6 relative"
|
|
>
|
|
<div className={`
|
|
w-16 h-16 rounded-2xl bg-white/[0.06] border border-white/10
|
|
flex items-center justify-center shrink-0 relative z-10
|
|
${stepColors[idx]}
|
|
`}>
|
|
<Icon className="w-7 h-7" />
|
|
</div>
|
|
<div className="pt-2">
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<span className="text-xs font-mono text-white/30">0{idx + 1}</span>
|
|
<h3 className="text-xl font-bold text-white">{step.title}</h3>
|
|
</div>
|
|
<p className="text-sm text-white/50 leading-relaxed max-w-lg">{step.desc}</p>
|
|
</div>
|
|
</motion.div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|