Initial deploy

components/footer.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import { portfolioContent, sharedProfile, type Language } from "@/data/portfolio";
+
+export function Footer({ language }: { language: Language }) {
+  const dir = language === "ar" ? "rtl" : "ltr";
+  const t = portfolioContent[language];
+  const brandName = language === "ar" ? sharedProfile.brandNameAr : sharedProfile.brandNameEn;
+
+  return (
+    <footer className="py-10">
+      <div className="site-container">
+        <div className="editorial-rule" />
+      </div>
+      <div
+        className={`site-container flex flex-col gap-6 py-8 md:flex-row md:items-end ${
+          dir === "rtl" ? "md:flex-row-reverse md:justify-between" : "md:justify-between"
+        }`}
+      >
+        <div className={dir === "rtl" ? "text-right" : ""}>
+          <p className="type-footer-brand display-face text-[var(--color-ink)]">{brandName}</p>
+          <p className="type-chip mt-2 max-w-md text-[var(--color-muted)]">{t.footer}</p>
+        </div>
+
+        <div
+          className={`type-chip flex flex-col gap-2 text-[var(--color-muted)] ${
+            dir === "rtl" ? "md:items-start text-right" : "md:items-end"
+          }`}
+        >
+          <Link
+            href={`mailto:${sharedProfile.email}`}
+            dir="ltr"
+            className="data-ltr hover:text-[var(--color-blue-500)]"
+          >
+            {sharedProfile.email}
+          </Link>
+          <Link
+            href={`tel:${sharedProfile.phone.replace(/\s+/g, "")}`}
+            dir="ltr"
+            className="data-ltr hover:text-[var(--color-blue-500)]"
+          >
+            {sharedProfile.phone}
+          </Link>
+          <p>{t.ui.selectedWorks}</p>
+        </div>
+      </div>
+    </footer>
+  );
+}