Spaces:
Build error
Build error
File size: 3,501 Bytes
342cb1f | 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 | import { motion } from 'framer-motion'
import { useTranslation } from 'react-i18next'
import { ShieldCheck, Database, Globe } from 'lucide-react'
export default function Credentials() {
const { t } = useTranslation()
return (
<section className="py-24 bg-nordic-navy border-t border-nordic-stone/20">
<div className="container mx-auto px-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
{/* Left Side: Title Block */}
<div>
<motion.div
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
className="mb-6"
>
<h2 className="text-4xl font-bold text-nordic-ice tracking-tight mb-2">{t('credentials.title')}</h2>
<div className="flex items-center gap-2 text-nordic-cyan font-mono text-sm">
<span className="w-2 h-2 bg-nordic-cyan rounded-full animate-pulse" />
{t('credentials.subtitle')}
</div>
</motion.div>
<div className="h-px w-full bg-gradient-to-r from-nordic-stone/50 to-transparent mb-8" />
<p className="text-nordic-stone text-lg leading-relaxed mb-8">
My work is built on a foundation of verified certifications and strict adherence to data privacy protocols.
</p>
<button className="text-nordic-ice border-b border-nordic-cyan pb-1 hover:text-nordic-cyan transition-colors font-mono text-sm">
DOWNLOAD FULL CV (PDF)
</button>
</div>
{/* Right Side: Data Dossier Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{[
{ title: t('credentials.section_1'), items: [t('credentials.item_1'), t('credentials.item_2'), t('credentials.item_5')], icon: Database },
{ title: t('credentials.section_2'), items: [t('credentials.item_3'), t('credentials.item_6')], icon: Globe },
{ title: t('credentials.section_3'), items: [t('credentials.item_4')], icon: ShieldCheck },
].map((col, idx) => (
<motion.div
key={idx}
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ delay: idx * 0.1 }}
className="bg-nordic-navy border border-nordic-stone/30 p-6 rounded-sm relative overflow-hidden group"
>
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<col.icon size={48} className="text-nordic-cyan" />
</div>
<h4 className="font-mono text-xs text-nordic-cyan mb-4 uppercase tracking-widest border-b border-nordic-stone/20 pb-2">
{col.title}
</h4>
<ul className="space-y-3">
{col.items.map((item, i) => (
<li key={i} className="flex items-start gap-2 text-sm text-nordic-ice/80 font-light">
<span className="mt-1.5 w-1 h-1 bg-nordic-cyan rounded-full flex-shrink-0" />
{item}
</li>
))}
</ul>
</motion.div>
))}
</div>
</div>
</div>
</section>
)
} |