From 15044d85bdbecd724bffdb3265ff7124fc572174 Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:05:49 +0330
Subject: [PATCH] Import source: src/components/Expertise

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 src/components/Expertise.tsx | 137 +++++++++++++++++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 src/components/Expertise.tsx

diff --git a/src/components/Expertise.tsx b/src/components/Expertise.tsx
new file mode 100644
index 0000000..e693c26
--- /dev/null
+++ b/src/components/Expertise.tsx
@@ -0,0 +1,137 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useTranslations } from 'next-intl';
+import { Cpu, Layout, ArrowRight } from 'lucide-react';
+
+export default function Expertise() {
+  const t = useTranslations('Expertise');
+
+  const containerVariants = {
+    hidden: {},
+    visible: {
+      transition: {
+        staggerChildren: 0.08,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, x: -15 },
+    visible: { 
+      opacity: 1, 
+      x: 0,
+      transition: { duration: 0.5, ease: 'easeOut' as const }
+    },
+  };
+
+  // Helper to get translated items array safely from json key
+  const aiItems = [0, 1, 2, 3, 4, 5];
+  const webItems = [0, 1, 2, 3, 4];
+
+  return (
+    <section id="expertise" className="py-24 bg-warm-white dark:bg-near-black border-t border-sand/20 dark:border-charcoal/50 transition-colors duration-300">
+      <div className="max-w-[1200px] mx-auto px-6">
+        
+        {/* Header */}
+        <div className="text-center max-w-2xl mx-auto mb-16">
+          <h2 className="text-xs font-semibold tracking-widest text-terracotta uppercase mb-2">
+            {t('title')}
+          </h2>
+          <h3 className="text-3xl font-extrabold tracking-tight text-charcoal dark:text-warm-white">
+            {t('subtitle')}
+          </h3>
+        </div>
+
+        {/* Tracks Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
+          
+          {/* Track 1: AI & LLM Engineering */}
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-50px' }}
+            transition={{ duration: 0.6 }}
+            className="p-8 rounded-2xl border border-sand dark:border-charcoal bg-warm-white/50 dark:bg-charcoal/20 backdrop-blur-sm relative group hover:border-teal-brand/50 dark:hover:border-teal-brand/50 transition-colors duration-300"
+          >
+            <div className="flex items-center gap-4 mb-6">
+              <div className="p-3.5 rounded-xl bg-teal-brand/10 dark:bg-teal-brand/20 text-teal-brand">
+                <Cpu className="w-6 h-6" />
+              </div>
+              <div>
+                <h4 className="text-xl font-bold text-charcoal dark:text-warm-white">
+                  {t('aiTitle')}
+                </h4>
+                <p className="text-xs text-charcoal/60 dark:text-warm-white/50 tracking-wide font-medium uppercase mt-0.5">
+                  {t('aiSubtitle')}
+                </p>
+              </div>
+            </div>
+
+            <motion.ul 
+              variants={containerVariants}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              className="space-y-4"
+            >
+              {aiItems.map((idx) => (
+                <motion.li 
+                  key={idx}
+                  variants={itemVariants}
+                  className="flex items-start gap-3 text-sm text-charcoal/80 dark:text-warm-white/70"
+                >
+                  <ArrowRight className="w-4 h-4 text-teal-brand mt-0.5 flex-shrink-0 rtl:rotate-180" />
+                  <span>{t(`aiItems.${idx}`)}</span>
+                </motion.li>
+              ))}
+            </motion.ul>
+          </motion.div>
+
+          {/* Track 2: Web Development & Design (Coaxys) */}
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-50px' }}
+            transition={{ duration: 0.6, delay: 0.15 }}
+            className="p-8 rounded-2xl border border-sand dark:border-charcoal bg-warm-white/50 dark:bg-charcoal/20 backdrop-blur-sm relative group hover:border-terracotta/50 dark:hover:border-terracotta/50 transition-colors duration-300"
+          >
+            <div className="flex items-center gap-4 mb-6">
+              <div className="p-3.5 rounded-xl bg-terracotta/10 dark:bg-terracotta/20 text-terracotta">
+                <Layout className="w-6 h-6" />
+              </div>
+              <div>
+                <h4 className="text-xl font-bold text-charcoal dark:text-warm-white">
+                  {t('webTitle')}
+                </h4>
+                <p className="text-xs text-charcoal/60 dark:text-warm-white/50 tracking-wide font-medium uppercase mt-0.5">
+                  {t('webSubtitle')}
+                </p>
+              </div>
+            </div>
+
+            <motion.ul 
+              variants={containerVariants}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              className="space-y-4"
+            >
+              {webItems.map((idx) => (
+                <motion.li 
+                  key={idx}
+                  variants={itemVariants}
+                  className="flex items-start gap-3 text-sm text-charcoal/80 dark:text-warm-white/70"
+                >
+                  <ArrowRight className="w-4 h-4 text-terracotta mt-0.5 flex-shrink-0 rtl:rotate-180" />
+                  <span>{t(`webItems.${idx}`)}</span>
+                </motion.li>
+              ))}
+            </motion.ul>
+          </motion.div>
+
+        </div>
+      </div>
+    </section>
+  );
+}