init project files

components/sections/Contact.tsx

@@ -0,0 +1,71 @@
+'use client';
+import { motion } from 'framer-motion';
+import { personal } from '@/content/personal';
+import { SiGithub } from 'react-icons/si';
+import styles from './Contact.module.scss';
+
+export default function Contact() {
+  return (
+    <section className={styles.section} id="contact">
+      <div className={styles.container}>
+        <motion.div
+          className={styles.inner}
+          initial={{ opacity: 0, y: 28 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6, ease: [0.22, 0.61, 0.36, 1] }}
+        >
+          <motion.h2
+            className={styles.heading}
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.4 }}
+          >
+            Let's work together<span className={styles.dot}>.</span>
+          </motion.h2>
+          <motion.p
+            className={styles.sub}
+            initial={{ opacity: 0, y: 8 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.4, delay: 0.06 }}
+          >
+            Have a project in mind or just want to chat? My inbox is always open.
+          </motion.p>
+
+          <motion.div
+            initial={{ opacity: 0, y: 8 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.4, delay: 0.12 }}
+          >
+            <a href={`mailto:${personal.email}`} className={styles.email}>
+              {personal.email}
+            </a>
+          </motion.div>
+
+          <motion.div
+            className={styles.socials}
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.4, delay: 0.18 }}
+          >
+            <motion.a
+              href={personal.social.github}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="GitHub"
+              whileHover={{ scale: 1.1, y: -2 }}
+              whileTap={{ scale: 0.95 }}
+              transition={{ duration: 0.2 }}
+            >
+              <SiGithub />
+            </motion.a>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}