Upload components/Credentials.jsx with huggingface_hub

components/Credentials.jsx

@@ -0,0 +1,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>
+  )
+}