diff --git a/src/components/About.tsx b/src/components/About.tsx
new file mode 100644
index 0000000..8ada6db
--- /dev/null
+++ b/src/components/About.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useTranslations } from 'next-intl';
+
+export default function About() {
+  const t = useTranslations('About');
+
+  return (
+    <section id="about" 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 grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
+        
+        {/* Left Column: Premium SVG Placeholder for Avatar/Photo */}
+        <motion.div 
+          initial={{ opacity: 0, x: -30 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
+          transition={{ duration: 0.8 }}
+          className="col-span-1 md:col-span-5 flex justify-center"
+        >
+          <div className="relative w-full max-w-[340px] aspect-square rounded-2xl overflow-hidden border border-sand dark:border-charcoal bg-warm-white dark:bg-charcoal/30 shadow-sm flex items-center justify-center p-6 group">
+            {/* Architectural gridlines for designer aesthetic */}
+            <div className="absolute inset-0 grid grid-cols-6 grid-rows-6 opacity-10 pointer-events-none">
+              <div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
+              <div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
+              <div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
+              <div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
+              <div className="col-span-6 border-b border-charcoal dark:border-warm-white"></div>
+              <div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[16.6%]"></div>
+              <div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[33.3%]"></div>
+              <div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[50%]"></div>
+              <div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[66.6%]"></div>
+              <div className="row-span-6 border-r border-charcoal dark:border-warm-white absolute top-0 bottom-0 left-[83.3%]"></div>
+            </div>
+
+            {/* Glowing gradient backdrops */}
+            <div className="absolute -top-12 -left-12 w-32 h-32 rounded-full bg-teal-brand/10 dark:bg-teal-brand/20 blur-2xl group-hover:scale-110 transition-transform duration-500" />
+            <div className="absolute -bottom-12 -right-12 w-32 h-32 rounded-full bg-terracotta/10 dark:bg-terracotta/20 blur-2xl group-hover:scale-110 transition-transform duration-500" />
+
+            {/* Inner diagram representation of LLM/Web alignment */}
+            <svg 
+              viewBox="0 0 200 200" 
+              fill="none" 
+              xmlns="http://www.w3.org/2000/svg" 
+              className="w-48 h-48 text-charcoal/20 dark:text-warm-white/10 group-hover:rotate-6 transition-transform duration-700"
+            >
+              {/* Outer ring */}
+              <circle cx="100" cy="100" r="80" stroke="currentColor" strokeWidth="1" strokeDasharray="4 4" />
+              {/* Core shape */}
+              <path d="M100 30 L160 140 L40 140 Z" stroke="currentColor" strokeWidth="1.5" />
+              <circle cx="100" cy="80" r="24" stroke="currentColor" strokeWidth="1" />
+              <line x1="100" y1="30" x2="100" y2="170" stroke="currentColor" strokeWidth="1" />
+              <line x1="20" y1="100" x2="180" y2="100" stroke="currentColor" strokeWidth="1" />
+            </svg>
+
+            {/* Label indicating image placeholder */}
+            <div className="absolute bottom-4 left-4 right-4 text-center py-2 px-3 bg-warm-white/90 dark:bg-near-black/90 border border-sand/40 dark:border-charcoal/60 rounded-lg backdrop-blur-sm transition-all duration-300">
+              <span className="text-xs font-semibold uppercase tracking-wider text-charcoal/50 dark:text-warm-white/40">
+                [ Image Placeholder ]
+              </span>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Right Column: Narrative Copy */}
+        <motion.div 
+          initial={{ opacity: 0, x: 30 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
+          transition={{ duration: 0.8 }}
+          className="col-span-1 md:col-span-7 flex flex-col justify-center space-y-6"
+        >
+          <div>
+            <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>
+
+          <div className="space-y-4 text-charcoal/80 dark:text-warm-white/70 leading-relaxed font-normal text-base md:text-[17px]">
+            <p>{t('p1')}</p>
+            <p>{t('p2')}</p>
+            <p>{t('p3')}</p>
+          </div>
+        </motion.div>
+
+      </div>
+    </section>
+  );
+}