From 843e1dd246e730e3eba6140fd3c4c94dd845eefc Mon Sep 17 00:00:00 2001
From: Poyraz Avsever <poyrazavsever@hotmail.com>
Date: Wed, 11 Mar 2026 12:00:55 +0300
Subject: [PATCH] feat(contact): replace form with direct social contact cards

---
 components/contact-content.tsx | 134 +++++++++++----------------------
 1 file changed, 46 insertions(+), 88 deletions(-)

diff --git a/components/contact-content.tsx b/components/contact-content.tsx
index 5b8ef86..1a66e5a 100644
--- a/components/contact-content.tsx
+++ b/components/contact-content.tsx
@@ -1,97 +1,55 @@
-"use client";
+import Link from "next/link";
+import { Icon } from "@iconify/react";
+import { Card, Typography } from "poyraz-ui/atoms";
 
-import { useState } from "react";
-import { Button, Card, Input, Label, Textarea, Typography } from "poyraz-ui/atoms";
+const CONTACT_LINKS = [
+  {
+    id: "email",
+    label: "E-posta",
+    value: "poyrazavsever@gmail.com",
+    href: "mailto:poyrazavsever@gmail.com",
+    icon: "mdi:email-outline",
+  },
+  {
+    id: "linkedin",
+    label: "LinkedIn",
+    value: "linkedin.com/in/poyrazavsever",
+    href: "https://www.linkedin.com/in/poyrazavsever/",
+    icon: "mdi:linkedin",
+  },
+  {
+    id: "instagram",
+    label: "Instagram",
+    value: "@poyraz_avsever",
+    href: "https://instagram.com/poyraz_avsever",
+    icon: "mdi:instagram",
+  },
+] as const;
 
 export function ContactContent() {
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [message, setMessage] = useState("");
-
-  const isValid = name.trim() && email.trim() && message.trim();
-
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!isValid) return;
-
-    const subject = encodeURIComponent(`Portfolyo İletişim - ${name.trim()}`);
-    const body = encodeURIComponent(
-      `Ad Soyad: ${name.trim()}\nE-posta: ${email.trim()}\n\nMesaj:\n${message.trim()}`,
-    );
-
-    window.location.href = `mailto:poyrazavsever@gmail.com?subject=${subject}&body=${body}`;
-  };
-
   return (
-    <section className="grid gap-3 md:grid-cols-[1fr_1.2fr]">
-      <Card className="rounded-sm border-border p-4">
-        <Typography variant="large" className="text-base">
-          İletişim
-        </Typography>
-        <div className="mt-4 space-y-3">
-          <div>
-            <Typography variant="small" className="text-muted-foreground">
-              E-posta
+    <section className="grid gap-3 md:grid-cols-3">
+      {CONTACT_LINKS.map((item) => (
+        <Link
+          key={item.id}
+          href={item.href}
+          target={item.id === "email" ? undefined : "_blank"}
+          rel={item.id === "email" ? undefined : "noreferrer"}
+          className="block"
+        >
+          <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
+            <div className="inline-flex h-9 w-9 items-center justify-center rounded-sm border border-border text-muted-foreground">
+              <Icon icon={item.icon} width={18} height={18} />
+            </div>
+            <Typography variant="large" className="mt-3 text-base leading-tight">
+              {item.label}
             </Typography>
-            <a
-              href="mailto:poyrazavsever@gmail.com"
-              className="text-sm text-red-600 hover:underline"
-            >
-              poyrazavsever@gmail.com
-            </a>
-          </div>
-          <div>
-            <Typography variant="small" className="text-muted-foreground">
-              Dönüş Süresi
+            <Typography variant="small" className="mt-1 text-muted-foreground">
+              {item.value}
             </Typography>
-            <Typography variant="small">Genelde 24 saat içinde.</Typography>
-          </div>
-        </div>
-      </Card>
-
-      <Card className="rounded-sm border-border p-4">
-        <form onSubmit={handleSubmit} className="space-y-3">
-          <div className="space-y-1.5">
-            <Label htmlFor="contact-name">Ad Soyad</Label>
-            <Input
-              id="contact-name"
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-              placeholder="Adın soyadın"
-              className="rounded-sm"
-            />
-          </div>
-
-          <div className="space-y-1.5">
-            <Label htmlFor="contact-email">E-posta</Label>
-            <Input
-              id="contact-email"
-              type="email"
-              value={email}
-              onChange={(event) => setEmail(event.target.value)}
-              placeholder="ornek@eposta.com"
-              className="rounded-sm"
-            />
-          </div>
-
-          <div className="space-y-1.5">
-            <Label htmlFor="contact-message">Mesaj</Label>
-            <Textarea
-              id="contact-message"
-              value={message}
-              onChange={(event) => setMessage(event.target.value)}
-              placeholder="Mesajını yaz..."
-              className="min-h-28 rounded-sm"
-            />
-          </div>
-
-          <div className="flex justify-end">
-            <Button type="submit" className="rounded-sm" disabled={!isValid}>
-              Gönder
-            </Button>
-          </div>
-        </form>
-      </Card>
+          </Card>
+        </Link>
+      ))}
     </section>
   );
 }