feat(contact): enhance email section with copy functionality and styling

Author: Don-Damiano

src/pages/en/contact.astro

@@ -15,7 +15,43 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 
     <div class="card">
       <div class="kicker">email</div>
-      <h3>hello@rocketdeploy.dev</h3>
+
+      <div class="email-row">
+        <h3>
+          <a
+            href="mailto:hello@rocketdeploy.dev"
+            target="_blank"
+            rel="noopener"
+            class="email-link"
+          >
+            hello@rocketdeploy.dev
+          </a>
+        </h3>
+
+        <div class="email-actions">
+          <button
+            class="icon-btn"
+            aria-label="Copy email address"
+            title="Copy"
+            type="button"
+            onclick="window.copyEmail(this)"
+          >
+            ⧉
+          </button>
+
+          <a
+            class="icon-btn"
+            href="mailto:hello@rocketdeploy.dev"
+            target="_blank"
+            rel="noopener"
+            aria-label="Write email"
+            title="Write"
+          >
+            ✉
+          </a>
+        </div>
+      </div>
+
       <p>
         Entry point for collaboration discussions.
       </p>
@@ -47,4 +83,43 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
       </div>
     </div>
   </div>
+
+  <script is:inline>
+    window.copyEmail = async (button) => {
+      if (!(button instanceof HTMLButtonElement)) return;
+
+      const email = "hello@rocketdeploy.dev";
+      const original = button.textContent ?? "⧉";
+
+      const showTick = () => {
+        button.textContent = "✔";
+        button.disabled = true;
+        setTimeout(() => {
+          button.textContent = original;
+          button.disabled = false;
+        }, 1500);
+      };
+
+      try {
+        if (navigator.clipboard && window.isSecureContext) {
+          await navigator.clipboard.writeText(email);
+        } else {
+          const ta = document.createElement("textarea");
+          ta.value = email;
+          ta.setAttribute("readonly", "");
+          ta.style.position = "fixed";
+          ta.style.opacity = "0";
+          document.body.appendChild(ta);
+          ta.focus();
+          ta.select();
+          document.execCommand("copy");
+          document.body.removeChild(ta);
+        }
+      } catch (err) {
+        console.warn("Copy failed:", err);
+      }
+
+      showTick();
+    };
+  </script>
 </BaseLayout>

src/pages/pl/kontakt.astro

@@ -15,7 +15,43 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 
     <div class="card">
       <div class="kicker">email</div>
-      <h3>hello@rocketdeploy.dev</h3>
+
+      <div class="email-row">
+        <h3>
+          <a
+            href="mailto:hello@rocketdeploy.dev"
+            target="_blank"
+            rel="noopener"
+            class="email-link"
+          >
+            hello@rocketdeploy.dev
+          </a>
+        </h3>
+
+        <div class="email-actions">
+          <button
+            class="icon-btn"
+            aria-label="Kopiuj adres email"
+            title="Kopiuj"
+            type="button"
+            onclick="window.copyEmail(this)"
+          >
+            ⧉
+          </button>
+
+          <a
+            class="icon-btn"
+            href="mailto:hello@rocketdeploy.dev"
+            target="_blank"
+            rel="noopener"
+            aria-label="Napisz email"
+            title="Napisz"
+          >
+            ✉
+          </a>
+        </div>
+      </div>
+
       <p>
         Punkt startowy do rozmowy o współpracy.
       </p>
@@ -47,4 +83,43 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
       </div>
     </div>
   </div>
+
+  <script is:inline>
+    window.copyEmail = async (button) => {
+      if (!(button instanceof HTMLButtonElement)) return;
+
+      const email = "hello@rocketdeploy.dev";
+      const original = button.textContent ?? "⧉";
+
+      const showTick = () => {
+        button.textContent = "✔";
+        button.disabled = true;
+        setTimeout(() => {
+          button.textContent = original;
+          button.disabled = false;
+        }, 1500);
+      };
+
+      try {
+        if (navigator.clipboard && window.isSecureContext) {
+          await navigator.clipboard.writeText(email);
+        } else {
+          const ta = document.createElement("textarea");
+          ta.value = email;
+          ta.setAttribute("readonly", "");
+          ta.style.position = "fixed";
+          ta.style.opacity = "0";
+          document.body.appendChild(ta);
+          ta.focus();
+          ta.select();
+          document.execCommand("copy");
+          document.body.removeChild(ta);
+        }
+      } catch (err) {
+        console.warn("Copy failed:", err);
+      }
+
+      showTick();
+    };
+  </script>
 </BaseLayout>

src/styles/global.css

@@ -366,4 +366,47 @@ h1{
   top: .05em;
   font-family: var(--mono);
   color: var(--faint);
+}
+
+.email-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.email-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.email-link:hover {
+  text-decoration: underline;
+}
+
+.email-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.icon-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: 1px solid var(--border, rgba(255,255,255,0.15));
+  background: transparent;
+  color: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+}
+
+.icon-btn:hover {
+  background: rgba(255,255,255,0.06);
+}
+
+.icon-btn:disabled {
+  cursor: default;
+  opacity: 0.9;
 }