diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
new file mode 100644
index 0000000..27fcc16
--- /dev/null
+++ b/src/components/Contact.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useTranslations } from 'next-intl';
+import { Send, Instagram, BookOpen, Globe, ArrowRight } from 'lucide-react';
+
+type ContactRow = {
+  key: string;
+  icon: React.ComponentType<any>;
+  handle: string;
+  url: string;
+};
+
+export default function Contact() {
+  const t = useTranslations('Contact');
+
+  const contactRows: ContactRow[] = [
+    {
+      key: 'telegram',
+      icon: Send,
+      handle: 't.me/Coaxys',
+      url: 'https://t.me/Coaxys',
+    },
+    {
+      key: 'instagram',
+      icon: Instagram,
+      handle: '@_coaxys',
+      url: 'https://instagram.com/_coaxys',
+    },
+    {
+      key: 'teknav',
+      icon: BookOpen,
+      handle: 'teknav.ir/profile/@arsam-sabbagh',
+      url: 'https://teknav.ir/profile/@arsam-sabbagh',
+    },
+    {
+      key: 'domain',
+      icon: Globe,
+      handle: 'arsamsabbagh.ir',
+      url: 'https://arsamsabbagh.ir',
+    },
+  ];
+
+  return (
+    <section id="contact" 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">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
+          
+          {/* Text/Copy Column (Left) */}
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+            className="lg:col-span-5 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>
+            
+            <p className="text-base text-charcoal/70 dark:text-warm-white/65 leading-relaxed">
+              {t('lead')}
+            </p>
+          </motion.div>
+
+          {/* Social Links Rows Column (Right) */}
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, delay: 0.15 }}
+            className="lg:col-span-7 border border-sand dark:border-charcoal rounded-2xl bg-warm-white dark:bg-charcoal/10 overflow-hidden divide-y divide-sand/50 dark:divide-charcoal/50"
+          >
+            {contactRows.map((row) => {
+              const Icon = row.icon;
+              return (
+                <a
+                  key={row.key}
+                  href={row.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-between p-6 hover:bg-sand/10 dark:hover:bg-charcoal/20 transition-all duration-300 group cursor-pointer"
+                >
+                  <div className="flex items-center gap-4">
+                    <div className="p-3 rounded-full border border-sand dark:border-charcoal text-charcoal/60 dark:text-warm-white/50 group-hover:text-teal-brand group-hover:border-teal-brand/50 group-hover:bg-teal-brand/5 transition-all">
+                      <Icon className="w-5 h-5" />
+                    </div>
+                    <div>
+                      <h4 className="text-xs font-semibold uppercase tracking-wider text-charcoal/40 dark:text-warm-white/30 group-hover:text-teal-brand transition-colors">
+                        {t(`links.${row.key}`)}
+                      </h4>
+                      <p className="text-base font-semibold text-charcoal/80 dark:text-warm-white/80 mt-0.5 group-hover:text-teal-brand transition-colors">
+                        {row.handle}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="text-charcoal/30 dark:text-warm-white/20 group-hover:text-teal-brand group-hover:translate-x-1 rtl:group-hover:-translate-x-1 transition-all">
+                    <ArrowRight className="w-5 h-5 rtl:rotate-180" />
+                  </div>
+                </a>
+              );
+            })}
+          </motion.div>
+
+        </div>
+      </div>
+    </section>
+  );
+}