diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..3076457
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,8 @@
+.git
+.gitignore
+.next
+node_modules
+.env
+.env.local
+npm-debug.log*
+README.md
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..fec5857
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,11 @@
+COMPOSE_PROJECT_NAME=diyaa
+CONTAINER_NAME=diyaa
+APP_PORT=30002
+NODE_ENV=production
+NEXT_TELEMETRY_DISABLED=1
+NEXT_PUBLIC_SITE_MODE=coming-soon
+
+NEXT_PUBLIC_SITE_URL=https://your-domain.example
+NEXT_PUBLIC_CONTACT_EMAIL=
+NEXT_PUBLIC_LINKEDIN_URL=
+NEXT_PUBLIC_GITHUB_URL=
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..3722418
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..196c89e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+.DS_Store
+.env
+.env.local
+.env.production.local
+.next
+node_modules
+npm-debug.log*
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..209e3ef
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/Dockerfile b/Dockerfile
index 7c85348..e42f748 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,10 +1,12 @@
 FROM node:20-alpine AS deps
 WORKDIR /app
+ENV NEXT_TELEMETRY_DISABLED=1
 COPY package.json package-lock.json* ./
 RUN if [ -f package-lock.json ]; then npm ci; else npm install; fi
 
 FROM node:20-alpine AS builder
 WORKDIR /app
+ENV NEXT_TELEMETRY_DISABLED=1
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 RUN npm run build
@@ -14,6 +16,7 @@ WORKDIR /app
 ENV NODE_ENV=production
 ENV PORT=3000
 ENV HOSTNAME=0.0.0.0
+ENV NEXT_TELEMETRY_DISABLED=1
 RUN addgroup -S nextjs && adduser -S nextjs -G nextjs
 
 COPY --from=builder /app/public ./public
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..42fd8b1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,53 @@
+# Diyaa Website
+
+A bilingual Next.js website prepared for deployment on a private Linux VPS with Docker.
+
+## Stack
+
+- Next.js 14
+- React 18
+- TypeScript
+- Docker / Docker Compose
+
+## Local setup
+
+1. Copy `.env.example` to `.env`
+2. Fill in `NEXT_PUBLIC_SITE_URL` and your real contact links
+3. Choose `NEXT_PUBLIC_SITE_MODE=coming-soon` or `NEXT_PUBLIC_SITE_MODE=full`
+4. Install dependencies with `npm install`
+5. Run `npm run dev`
+
+## Quality checks
+
+- `npm run lint`
+- `npm run typecheck`
+- `npm run build`
+- `npm run check`
+
+## Docker workflow
+
+- `make build`
+- `make start`
+- `make ps`
+- `make logs`
+- `make stop`
+
+The container healthcheck uses `/api/health`.
+
+## STRATO VPS deployment notes
+
+1. Install Docker Engine and Docker Compose plugin on the VPS.
+2. Clone the repository on the server.
+3. Create `.env` from `.env.example` and set a real domain in `NEXT_PUBLIC_SITE_URL`.
+4. Run `make build` once, then `make start`.
+5. Place Nginx or Caddy in front of the container for HTTPS and domain routing.
+6. Point your domain to the VPS public IP and enable SSL at the reverse-proxy layer.
+
+## Environment variables
+
+- `APP_PORT`: external port exposed by Docker Compose
+- `NEXT_PUBLIC_SITE_URL`: canonical site URL used by metadata and sitemap
+- `NEXT_PUBLIC_SITE_MODE`: `coming-soon` or `full`
+- `NEXT_PUBLIC_CONTACT_EMAIL`: public email shown on the contact page
+- `NEXT_PUBLIC_LINKEDIN_URL`: LinkedIn profile URL
+- `NEXT_PUBLIC_GITHUB_URL`: GitHub profile URL
diff --git a/app/[locale]/about/page.tsx b/app/[locale]/about/page.tsx
index 0c170f9..4668238 100644
--- a/app/[locale]/about/page.tsx
+++ b/app/[locale]/about/page.tsx
@@ -1,19 +1,36 @@
+import type { Metadata } from "next";
 import { getDictionary, isLocale, type Locale } from "@/lib/i18n";
-import { notFound } from "next/navigation";
+import { buildPageMetadata } from "@/lib/metadata";
+import { isComingSoonMode } from "@/lib/site";
+import { notFound, redirect } from "next/navigation";
+
+export function generateMetadata({ params }: { params: { locale: string } }): Metadata {
+  if (!isLocale(params.locale)) {
+    return {};
+  }
+
+  return buildPageMetadata(params.locale, "about");
+}
 
 export default function AboutPage({ params }: { params: { locale: string } }) {
   if (!isLocale(params.locale)) {
     notFound();
   }
 
+  if (isComingSoonMode()) {
+    redirect(`/${params.locale}`);
+  }
+
   const locale = params.locale as Locale;
   const dictionary = getDictionary(locale);
 
   return (
-    <section className="panel">
-      <p className="eyebrow">{dictionary.about.kicker}</p>
-      <h1>{dictionary.about.title}</h1>
-      <p className="lead">{dictionary.about.story}</p>
+    <section className="panel section-stack">
+      <div>
+        <p className="eyebrow">{dictionary.about.kicker}</p>
+        <h1>{dictionary.about.title}</h1>
+        <p className="lead">{dictionary.about.story}</p>
+      </div>
 
       <div className="split-grid">
         <article className="card">
@@ -34,6 +51,15 @@ export default function AboutPage({ params }: { params: { locale: string } }) {
           </ul>
         </article>
       </div>
+
+      <article className="card">
+        <h2>{dictionary.about.principlesTitle}</h2>
+        <ul className="list">
+          {dictionary.about.principles.map((item) => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+      </article>
     </section>
   );
 }
diff --git a/app/[locale]/contact/page.tsx b/app/[locale]/contact/page.tsx
index 3b27d2a..5a6a5dd 100644
--- a/app/[locale]/contact/page.tsx
+++ b/app/[locale]/contact/page.tsx
@@ -1,28 +1,69 @@
+import type { Metadata } from "next";
 import { getDictionary, isLocale, type Locale } from "@/lib/i18n";
-import { notFound } from "next/navigation";
+import { buildPageMetadata } from "@/lib/metadata";
+import { getContactChannels, isComingSoonMode } from "@/lib/site";
+import { notFound, redirect } from "next/navigation";
+
+export function generateMetadata({ params }: { params: { locale: string } }): Metadata {
+  if (!isLocale(params.locale)) {
+    return {};
+  }
+
+  return buildPageMetadata(params.locale, "contact");
+}
 
 export default function ContactPage({ params }: { params: { locale: string } }) {
   if (!isLocale(params.locale)) {
     notFound();
   }
 
+  if (isComingSoonMode()) {
+    redirect(`/${params.locale}`);
+  }
+
   const locale = params.locale as Locale;
   const dictionary = getDictionary(locale);
+  const channels = getContactChannels(dictionary.contact);
 
   return (
-    <section className="panel">
-      <p className="eyebrow">{dictionary.contact.kicker}</p>
-      <h1>{dictionary.contact.title}</h1>
-      <p className="lead">{dictionary.contact.description}</p>
+    <section className="panel section-stack">
+      <div>
+        <p className="eyebrow">{dictionary.contact.kicker}</p>
+        <h1>{dictionary.contact.title}</h1>
+        <p className="lead">{dictionary.contact.description}</p>
+      </div>
 
-      <div className="split-grid">
-        {dictionary.contact.channels.map((channel) => (
-          <article className="card" key={channel.name}>
-            <h2>{channel.name}</h2>
-            <p>{channel.status}</p>
-            <button type="button" className="pending-btn" disabled aria-disabled="true">
-              {dictionary.contact.pendingCta}
-            </button>
+      <article className="card availability-card">
+        <h2>{dictionary.contact.availabilityTitle}</h2>
+        <p>{dictionary.contact.availabilityDescription}</p>
+      </article>
+
+      <div className="section-heading">
+        <h2>{dictionary.contact.channelsTitle}</h2>
+      </div>
+
+      <div className="split-grid contact-grid">
+        {channels.map((channel) => (
+          <article className="card contact-channel-card" key={channel.key}>
+            <div className="channel-meta">
+              <h3>{channel.name}</h3>
+              <p>{channel.hint}</p>
+            </div>
+            <p className="contact-value">{channel.value}</p>
+            {channel.href ? (
+              <a
+                href={channel.href}
+                className="card-link"
+                target={channel.external ? "_blank" : undefined}
+                rel={channel.external ? "noreferrer" : undefined}
+              >
+                {dictionary.contact.channelCta}
+              </a>
+            ) : (
+              <span className="card-link is-disabled" aria-disabled="true">
+                {dictionary.contact.channelFallback}
+              </span>
+            )}
           </article>
         ))}
       </div>
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 5198160..8898c0f 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -5,6 +5,8 @@ import SiteFooter from "@/components/SiteFooter";
 import SiteHeader from "@/components/SiteHeader";
 import { getDictionary, getDirection, isLocale, locales, type Locale } from "@/lib/i18n";
 
+export const dynamicParams = false;
+
 export function generateStaticParams() {
   return locales.map((locale) => ({ locale }));
 }
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 53bfdb3..0a26b45 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,7 +1,17 @@
+import type { Metadata } from "next";
 import HeroSection from "@/components/HeroSection";
 import { getDictionary, isLocale, type Locale } from "@/lib/i18n";
+import { buildPageMetadata } from "@/lib/metadata";
 import { notFound } from "next/navigation";
 
+export function generateMetadata({ params }: { params: { locale: string } }): Metadata {
+  if (!isLocale(params.locale)) {
+    return {};
+  }
+
+  return buildPageMetadata(params.locale, "home");
+}
+
 export default function HomePage({ params }: { params: { locale: string } }) {
   if (!isLocale(params.locale)) {
     notFound();
diff --git a/app/api/health/route.ts b/app/api/health/route.ts
new file mode 100644
index 0000000..2551c84
--- /dev/null
+++ b/app/api/health/route.ts
@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+
+export function GET() {
+  return NextResponse.json(
+    {
+      status: "ok",
+      timestamp: new Date().toISOString(),
+    },
+    {
+      status: 200,
+      headers: {
+        "Cache-Control": "no-store",
+      },
+    },
+  );
+}
diff --git a/app/globals.css b/app/globals.css
index 944dec3..a47222c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -61,6 +61,7 @@ body {
     var(--bg);
   font-family: "Space Grotesk", "IBM Plex Sans Arabic", "Cairo", sans-serif;
   line-height: 1.6;
+  text-rendering: optimizeLegibility;
 }
 
 a {
@@ -96,12 +97,55 @@ a {
   padding: 0.9rem 0;
 }
 
+.brand-block {
+  display: grid;
+  gap: 0.18rem;
+}
+
 .brand {
   font-size: 1.05rem;
   font-weight: 800;
   letter-spacing: 0.04em;
 }
 
+.brand-tagline {
+  font-size: 0.86rem;
+  color: var(--muted);
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem;
+  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
+}
+
+.header-nav a {
+  padding: 0.45rem 0.9rem;
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-weight: 600;
+  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
+}
+
+.header-nav a:hover,
+.header-nav a:focus-visible {
+  color: var(--text);
+  background: color-mix(in srgb, var(--surface-3) 86%, transparent);
+  outline: none;
+  transform: translateY(-1px);
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
 .theme-toggle {
   border: 1px solid var(--line);
   background: color-mix(in srgb, var(--surface-2) 88%, transparent);
@@ -164,6 +208,24 @@ a {
   padding: clamp(1.3rem, 2vw, 2rem);
 }
 
+.section-stack {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.availability-badge {
+  margin: 0 0 0.7rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--brand-2) 28%, var(--line));
+  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
+  color: var(--text);
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
 .hero h1,
 .panel h1 {
   font-size: clamp(1.8rem, 5vw, 3.3rem);
@@ -194,8 +256,7 @@ a {
 }
 
 .cta-btn,
-.ghost-btn,
-.pending-btn {
+.ghost-btn {
   border-radius: 12px;
   border: 1px solid transparent;
   padding: 0.74rem 1rem;
@@ -213,12 +274,10 @@ a {
   background: var(--button-secondary);
 }
 
-.pending-btn {
-  margin-top: 0.6rem;
-  border-color: var(--line);
-  color: var(--muted);
-  background: var(--button-disabled);
+.cta-btn.is-disabled {
+  opacity: 0.7;
   cursor: not-allowed;
+  pointer-events: none;
 }
 
 .cta-btn:hover,
@@ -279,6 +338,61 @@ a {
   color: var(--muted);
 }
 
+.section-heading h2,
+.availability-card h2,
+.contact-channel-card h3 {
+  margin: 0 0 0.45rem;
+}
+
+.contact-grid {
+  align-items: stretch;
+}
+
+.contact-channel-card {
+  display: grid;
+  gap: 1rem;
+}
+
+.channel-meta {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.contact-value {
+  margin: 0;
+  font-size: 0.94rem;
+  color: var(--text);
+  word-break: break-word;
+}
+
+.card-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  padding: 0.74rem 1rem;
+  font-size: 0.92rem;
+  font-weight: 700;
+  color: white;
+  background: linear-gradient(115deg, var(--brand), var(--brand-2));
+  transition: transform 180ms ease, opacity 180ms ease;
+}
+
+.card-link:hover,
+.card-link:focus-visible {
+  transform: translateY(-1px);
+  outline: none;
+}
+
+.card-link.is-disabled {
+  color: var(--muted);
+  background: var(--button-disabled);
+  border-color: var(--line);
+  cursor: not-allowed;
+}
+
 .list {
   margin: 0;
   padding-inline-start: 1.1rem;
@@ -300,6 +414,15 @@ a {
   font-size: 0.9rem;
 }
 
+.footer-copy {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.footer-copy p {
+  margin: 0;
+}
+
 .locale-badge {
   display: inline-flex;
   align-items: center;
@@ -379,9 +502,10 @@ a {
   opacity: 0.9;
 }
 
-.lang-toggle {
-  margin-inline-start: 0.18rem;
-  border-color: var(--line) !important;
+@media (min-width: 861px) {
+  .bottom-nav {
+    display: none;
+  }
 }
 
 @keyframes fade-up {
@@ -396,6 +520,16 @@ a {
 }
 
 @media (max-width: 860px) {
+  .bar {
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .header-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
   .split-grid,
   .stat-grid {
     grid-template-columns: 1fr;
diff --git a/app/layout.tsx b/app/layout.tsx
index e24f40c..04c5442 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,14 +1,34 @@
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
+import { siteConfig } from "@/lib/site";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "diyaa | Personal Website",
-  description: "Bilingual personal website built with Next.js",
+  metadataBase: new URL(siteConfig.siteUrl),
+  title: {
+    default: "Diyaa",
+    template: "%s | Diyaa",
+  },
+  description: "Bilingual professional website built for private-server deployment.",
+  applicationName: "Diyaa",
+  authors: [{ name: "Diyaa" }],
+  creator: "Diyaa",
+  publisher: "Diyaa",
+  alternates: {
+    languages: {
+      ar: "/ar",
+      en: "/en",
+      "x-default": "/ar",
+    },
+  },
 };
 
 const themeScript = `
 (() => {
+  const locale = window.location.pathname.split("/").filter(Boolean)[0] === "en" ? "en" : "ar";
+  const direction = locale === "ar" ? "rtl" : "ltr";
+  document.documentElement.lang = locale;
+  document.documentElement.dir = direction;
   try {
     const storedTheme = localStorage.getItem("theme");
     const activeTheme = storedTheme === "light" || storedTheme === "dark" ? storedTheme : "dark";
@@ -21,7 +41,7 @@ const themeScript = `
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="ar" data-theme="dark" suppressHydrationWarning>
+    <html lang="ar" dir="rtl" data-theme="dark" suppressHydrationWarning>
       <head>
         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
       </head>
diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 0000000..d8b9a41
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,26 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <main className="page-content">
+      <section className="panel section-stack">
+        <div>
+          <p className="eyebrow">404</p>
+          <h1>الصفحة غير موجودة</h1>
+          <p className="lead">
+            الصفحة المطلوبة غير متاحة حاليًا. يمكنك العودة إلى النسخة العربية أو الإنجليزية من الصفحة الرئيسية.
+          </p>
+        </div>
+
+        <div className="cta-row">
+          <Link href="/ar" className="cta-btn">
+            العودة إلى العربية
+          </Link>
+          <Link href="/en" className="ghost-btn">
+            Go to English
+          </Link>
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/app/robots.ts b/app/robots.ts
new file mode 100644
index 0000000..3ab4d4c
--- /dev/null
+++ b/app/robots.ts
@@ -0,0 +1,12 @@
+import type { MetadataRoute } from "next";
+import { siteConfig } from "@/lib/site";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: `${siteConfig.siteUrl}/sitemap.xml`,
+  };
+}
diff --git a/app/sitemap.ts b/app/sitemap.ts
new file mode 100644
index 0000000..c3c7247
--- /dev/null
+++ b/app/sitemap.ts
@@ -0,0 +1,26 @@
+import type { MetadataRoute } from "next";
+import { getLocalizedPath, siteConfig } from "@/lib/site";
+
+const pages = ["", "/about", "/contact"] as const;
+const locales = ["ar", "en"] as const;
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const lastModified = new Date();
+
+  return [
+    {
+      url: siteConfig.siteUrl,
+      lastModified,
+      changeFrequency: "weekly",
+      priority: 0.8,
+    },
+    ...pages.flatMap((page) =>
+      locales.map((locale) => ({
+        url: `${siteConfig.siteUrl}${getLocalizedPath(page, locale)}`,
+        lastModified,
+        changeFrequency: "weekly" as const,
+        priority: page === "" ? 1 : 0.7,
+      })),
+    ),
+  ];
+}
diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx
index b55d586..7fef2cc 100644
--- a/components/BottomNav.tsx
+++ b/components/BottomNav.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import Link from "next/link";
-import { usePathname } from "next/navigation";
 import type { CommonContent } from "@/content/types";
-import { locales, type Locale } from "@/lib/i18n";
+import { type Locale } from "@/lib/i18n";
+import { isComingSoonMode } from "@/lib/site";
 
 type BottomNavProps = {
   locale: Locale;
@@ -11,67 +11,49 @@ type BottomNavProps = {
 };
 
 export default function BottomNav({ locale, common }: BottomNavProps) {
-  const pathname = usePathname();
-  const segments = pathname.split("/").filter(Boolean);
+  if (isComingSoonMode()) {
+    return (
+      <nav aria-label={common.navLabel} className="bottom-nav">
+        <div className="container bottom-nav-inner">
+          <div className="bottom-nav-links">
+            <Link href={`/${locale}`} className="active" aria-current="page">
+              <span aria-hidden className="nav-icon">
+                ○
+              </span>
+              {common.nav.home}
+            </Link>
+          </div>
+        </div>
+      </nav>
+    );
+  }
 
-  const normalizedPath = pathname !== "/" && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname;
   const homePath = `/${locale}`;
   const aboutPath = `/${locale}/about`;
   const contactPath = `/${locale}/contact`;
 
-  const isHome = normalizedPath === homePath;
-  const isAbout = normalizedPath === aboutPath || normalizedPath.startsWith(`${aboutPath}/`);
-  const isContact = normalizedPath === contactPath || normalizedPath.startsWith(`${contactPath}/`);
-  const targetLocale: Locale = locale === "ar" ? "en" : "ar";
-
-  const switchPath = () => {
-    const nextSegments = [...segments];
-
-    if (nextSegments.length === 0) {
-      return `/${targetLocale}`;
-    }
-
-    if (locales.includes(nextSegments[0] as Locale)) {
-      nextSegments[0] = targetLocale;
-    } else {
-      nextSegments.unshift(targetLocale);
-    }
-
-    return `/${nextSegments.join("/")}`;
-  };
-
   return (
     <nav aria-label={common.navLabel} className="bottom-nav">
       <div className="container bottom-nav-inner">
         <div className="bottom-nav-links">
-          <Link href={homePath} className={isHome ? "active" : undefined} aria-current={isHome ? "page" : undefined}>
+          <Link href={homePath} className="active" aria-current="page">
             <span aria-hidden className="nav-icon">
               ○
             </span>
             {common.nav.home}
           </Link>
-          <Link href={aboutPath} className={isAbout ? "active" : undefined} aria-current={isAbout ? "page" : undefined}>
+          <Link href={aboutPath}>
             <span aria-hidden className="nav-icon">
               □
             </span>
             {common.nav.about}
           </Link>
-          <Link
-            href={contactPath}
-            className={isContact ? "active" : undefined}
-            aria-current={isContact ? "page" : undefined}
-          >
+          <Link href={contactPath}>
             <span aria-hidden className="nav-icon">
               ◇
             </span>
             {common.nav.contact}
           </Link>
-          <Link href={switchPath()} className="lang-toggle" aria-label={common.languageSwitcherLabel}>
-            <span aria-hidden className="nav-icon">
-              ⇄
-            </span>
-            {targetLocale.toUpperCase()}
-          </Link>
         </div>
       </div>
     </nav>
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index f8a1144..e10cafb 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
-import type { CommonContent, HomeContent } from "@/content/types";
+import type { CommonContent, HomeContent, HomeVariantContent } from "@/content/types";
 import type { Locale } from "@/lib/i18n";
+import { getEmailHref, isComingSoonMode } from "@/lib/site";
 
 type HeroSectionProps = {
   locale: Locale;
@@ -9,23 +10,33 @@ type HeroSectionProps = {
 };
 
 export default function HeroSection({ locale, home, common }: HeroSectionProps) {
+  const activeHome: HomeVariantContent = isComingSoonMode() ? home.comingSoon : home.full;
+  const emailHref = getEmailHref();
+
   return (
     <section className="hero panel">
-      <p className="eyebrow">{home.kicker}</p>
-      <h1>{home.title}</h1>
-      <p className="lead">{home.description}</p>
+      <p className="availability-badge">{activeHome.badge}</p>
+      <p className="eyebrow">{activeHome.kicker}</p>
+      <h1>{activeHome.title}</h1>
+      <p className="lead">{activeHome.description}</p>
 
       <div className="cta-row">
-        <Link href={`/${locale}/contact`} className="cta-btn">
-          {home.primaryCta}
-        </Link>
-        <Link href={`/${locale}/about`} className="ghost-btn">
-          {common.nav.about}
+        {emailHref ? (
+          <a href={emailHref} className="cta-btn">
+            {activeHome.primaryCta}
+          </a>
+        ) : (
+          <span className="cta-btn is-disabled" aria-disabled="true">
+            {activeHome.primaryCta}
+          </span>
+        )}
+        <Link href={isComingSoonMode() ? `/${locale}` : `/${locale}/about`} className="ghost-btn">
+          {activeHome.secondaryCta}
         </Link>
       </div>
 
       <div className="stat-grid">
-        {home.highlights.map((item) => (
+        {activeHome.highlights.map((item) => (
           <article key={item.label} className="stat-card">
             <span className="stat-value">{item.value}</span>
             <span className="stat-label">{item.label}</span>
diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
index 7a31498..c84653a 100644
--- a/components/LanguageSwitcher.tsx
+++ b/components/LanguageSwitcher.tsx
@@ -30,7 +30,7 @@ export default function LanguageSwitcher({ locale, label }: LanguageSwitcherProp
   };
 
   return (
-    <div className="language-switcher" aria-label={label}>
+    <div className="language-switcher" role="group" aria-label={label}>
       {locales.map((item) => {
         const active = item === locale;
 
diff --git a/components/SiteFooter.tsx b/components/SiteFooter.tsx
index 6bd9abe..3fbf051 100644
--- a/components/SiteFooter.tsx
+++ b/components/SiteFooter.tsx
@@ -12,7 +12,10 @@ export default function SiteFooter({ locale, common }: SiteFooterProps) {
   return (
     <footer className="site-footer">
       <div className="container footer-content">
-        <p>{common.footerRights.replace("{year}", String(year))}</p>
+        <div className="footer-copy">
+          <p>{common.footerRights.replace("{year}", String(year))}</p>
+          <p>{common.footerBuiltWith}</p>
+        </div>
         <p className="locale-badge">{locale.toUpperCase()}</p>
       </div>
     </footer>
diff --git a/components/SiteHeader.tsx b/components/SiteHeader.tsx
index 410e652..8381293 100644
--- a/components/SiteHeader.tsx
+++ b/components/SiteHeader.tsx
@@ -1,7 +1,9 @@
 import Link from "next/link";
+import LanguageSwitcher from "@/components/LanguageSwitcher";
 import ThemeToggle from "@/components/ThemeToggle";
 import type { Locale } from "@/lib/i18n";
 import type { CommonContent } from "@/content/types";
+import { isComingSoonMode } from "@/lib/site";
 
 type SiteHeaderProps = {
   locale: Locale;
@@ -9,13 +11,34 @@ type SiteHeaderProps = {
 };
 
 export default function SiteHeader({ locale, common }: SiteHeaderProps) {
+  const isComingSoon = isComingSoonMode();
+
   return (
     <header className="site-header">
       <div className="container bar">
-        <Link href={`/${locale}`} className="brand">
-          {common.siteTitle}
-        </Link>
-        <ThemeToggle />
+        <div className="brand-block">
+          <Link href={`/${locale}`} className="brand">
+            {common.siteTitle}
+          </Link>
+          <span className="brand-tagline">{common.siteTagline}</span>
+        </div>
+
+        {!isComingSoon ? (
+          <nav className="header-nav" aria-label={common.navLabel}>
+            <Link href={`/${locale}`}>{common.nav.home}</Link>
+            <Link href={`/${locale}/about`}>{common.nav.about}</Link>
+            <Link href={`/${locale}/contact`}>{common.nav.contact}</Link>
+          </nav>
+        ) : null}
+
+        <div className="header-actions">
+          <LanguageSwitcher locale={locale} label={common.languageSwitcherLabel} />
+          <ThemeToggle
+            label={common.themeToggleLabel}
+            lightLabel={common.themeLight}
+            darkLabel={common.themeDark}
+          />
+        </div>
       </div>
     </header>
   );
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
index a2110f6..58f608a 100644
--- a/components/ThemeToggle.tsx
+++ b/components/ThemeToggle.tsx
@@ -6,11 +6,17 @@ type Theme = "dark" | "light";
 
 const STORAGE_KEY = "theme";
 
+type ThemeToggleProps = {
+  label: string;
+  lightLabel: string;
+  darkLabel: string;
+};
+
 function isTheme(value: string | null): value is Theme {
   return value === "dark" || value === "light";
 }
 
-export default function ThemeToggle() {
+export default function ThemeToggle({ label, lightLabel, darkLabel }: ThemeToggleProps) {
   const [theme, setTheme] = useState<Theme>("dark");
 
   useEffect(() => {
@@ -34,9 +40,9 @@ export default function ThemeToggle() {
       type="button"
       onClick={handleToggle}
       className="theme-toggle"
-      aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+      aria-label={`${label}: ${theme === "dark" ? lightLabel : darkLabel}`}
     >
-      <span className="theme-toggle-label">{theme === "dark" ? "Light" : "Dark"}</span>
+      <span className="theme-toggle-label">{theme === "dark" ? lightLabel : darkLabel}</span>
     </button>
   );
 }
diff --git a/content/ar.ts b/content/ar.ts
index 755e0a8..aba9f8c 100644
--- a/content/ar.ts
+++ b/content/ar.ts
@@ -3,52 +3,106 @@ import type { Dictionary } from "@/content/types";
 const ar: Dictionary = {
   common: {
     siteTitle: "ضياء",
+    siteTagline: "موقع شخصي جديد قيد الإطلاق",
     navLabel: "التنقل الرئيسي",
     languageSwitcherLabel: "تبديل اللغة",
+    themeToggleLabel: "نمط الواجهة",
+    themeLight: "فاتح",
+    themeDark: "داكن",
     nav: {
       home: "الرئيسية",
       about: "من أنا",
       contact: "تواصل",
     },
     footerRights: "{year} جميع الحقوق محفوظة",
+    footerBuiltWith: "موقع ثنائي اللغة مهيأ للعرض المهني والنشر على خادم خاص.",
+    availabilityBadge: "متاح لمشاريع الويب والتطوير المخصص",
   },
   home: {
-    kicker: "Full-Stack Developer",
-    title: "أبني أنظمة ويب حديثة وقابلة للتوسع",
-    description:
-      "مطور Full-Stack أعمل على بناء تطبيقات ويب حديثة باستخدام Next.js و NestJS و PostgreSQL. أركز على الأنظمة القابلة للتوسع وتجارب المستخدم السريعة.",
-    primaryCta: "تواصل معي",
-    highlights: [
-      { value: "+10", label: "مشاريع برمجية" },
-      { value: "Next.js / NestJS", label: "Stack الأساسي" },
-      { value: "Docker", label: "Dev Infrastructure" },
-    ],
+    comingSoon: {
+      badge: "Coming Soon",
+      kicker: "قريبًا",
+      title: "موقعي الجديد قيد التجهيز",
+      description:
+        "أعمل حاليًا على إطلاق نسخة جديدة بهوية أوضح وتجربة أسرع ومحتوى أكثر اكتمالًا. الصفحة الكاملة ستتوفر قريبًا بعد إنهاء اللمسات الأخيرة.",
+      primaryCta: "تواصل عند الإطلاق",
+      secondaryCta: "تابع قريبًا",
+      highlights: [
+        { value: "نسخة جديدة", label: "واجهة ومحتوى محدثان" },
+        { value: "ثنائي اللغة", label: "عربي وإنجليزي" },
+        { value: "قريبًا", label: "الإطلاق الرسمي" },
+      ],
+    },
+    full: {
+      badge: "متاح لمشاريع الويب والتطوير المخصص",
+      kicker: "مطور ويب متكامل",
+      title: "أبني مواقع وأنظمة ويب جاهزة للنمو",
+      description:
+        "أصمم وأطوّر واجهات وتجارب رقمية متماسكة، وأربطها ببنية تشغيل واضحة تجعل الإطلاق والصيانة والتوسع أسهل على المدى الطويل.",
+      primaryCta: "ابدأ التواصل",
+      secondaryCta: "اعرف المزيد",
+      highlights: [
+        { value: "+10", label: "نماذج ومشاريع مطورة" },
+        { value: "ثنائي اللغة", label: "عربي وإنجليزي" },
+        { value: "جاهز للنشر", label: "Docker و VPS" },
+      ],
+    },
   },
   about: {
     kicker: "نبذة سريعة",
     title: "من أنا",
     story:
-      "أنا مطور Full-Stack أركز على بناء تطبيقات ويب حديثة وقابلة للتوسع. أعمل بشكل أساسي باستخدام Next.js و NestJS و PostgreSQL مع بنية تشغيل تعتمد على Docker. أركز في مشاريعي على الأداء، البنية النظيفة، وتجربة المستخدم السريعة، مع تصميم أنظمة يمكن تطويرها بسهولة مع نمو المشروع.",
+      "أعمل على تحويل الأفكار إلى مواقع ومنتجات ويب واضحة وسريعة ومرنة. تركيزي الأساسي يكون على الجمع بين تجربة استخدام مرتبة، كود منظم، وتجهيز فعلي للنشر حتى لا يبقى المشروع جميلًا فقط بل قابلًا للاعتماد والتطوير لاحقًا.",
     skillsTitle: "مهارات",
-    skills: ["تطوير واجهات", "تحسين تجربة المستخدم", "تنظيم المحتوى", "إدارة مشاريع رقمية"],
+    skills: [
+      "Next.js و React",
+      "TypeScript وتنظيم الواجهات",
+      "تصميم واجهات مرنة وسريعة",
+      "تهيئة النشر على الخوادم الخاصة",
+      "تحسين الأداء وتجربة الاستخدام",
+      "تنظيم المحتوى متعدد اللغات",
+    ],
     experienceTitle: "خبرات مختصرة",
     experience: [
-      "HTML",
-      "CSS , SCSS",
-      "React",
+      "بناء مواقع تعريفية وصفحات هبوط وهوية رقمية مهنية",
+      "تطوير واجهات تطبيقات حديثة قابلة للتوسع",
+      "ربط الواجهة بتدفق نشر واضح باستخدام Docker",
+    ],
+    principlesTitle: "منهج العمل",
+    principles: [
+      "بنية واضحة تسهّل التوسع والصيانة لاحقًا",
+      "اهتمام مبكر بالأداء ووضوح الرسالة داخل الواجهة",
+      "تجهيز عملي للنشر، الصحة التشغيلية، والاعتماد على ملفات البيئة",
     ],
   },
   contact: {
-    kicker: "لنبدأ خطوة جديدة",
-    title: "تواصل",
-    description: "روابط التواصل ستتم إضافتها لاحقًا. كل العناصر أدناه جاهزة لاستقبال الروابط الفعلية.",
-    pendingCta: "الرابط قيد الإضافة",
+    kicker: "لنبدأ مشروعًا واضحًا وقابلًا للتنفيذ",
+    title: "قنوات التواصل",
+    description: "بمجرد إضافة روابطك الحقيقية في ملف البيئة ستظهر هنا تلقائيًا وتصبح جاهزة للاستخدام المباشر من الزوار.",
+    availabilityTitle: "جاهزية الإطلاق",
+    availabilityDescription:
+      "النسخة الحالية مهيأة للنشر على خادم خاص مع فحص صحة داخلي وروابط تواصل قابلة للإدارة من الإعدادات.",
+    channelsTitle: "روابطك المباشرة",
+    channelCta: "فتح الرابط",
+    channelFallback: "ستظهر القناة هنا بعد إضافة الرابط الفعلي",
     channels: [
-      { name: "Email", status: "سيتم إضافة الرابط قريبًا" },
-      { name: "LinkedIn", status: "سيتم إضافة الرابط قريبًا" },
-      { name: "GitHub", status: "سيتم إضافة الرابط قريبًا" },
+      { key: "email", name: "البريد الإلكتروني", hint: "للتواصل المهني المباشر والاستفسارات" },
+      { key: "linkedin", name: "لينكدإن", hint: "للعلاقات المهنية والعرض السريع للخبرات" },
+      { key: "github", name: "جيت هب", hint: "لاستعراض المشاريع والمستودعات البرمجية" },
     ],
   },
+  metadata: {
+    homeTitle: "قريبًا",
+    homeDescription: "صفحة ترحيبية مؤقتة للإعلان عن قرب إطلاق الموقع الشخصي الجديد.",
+    fullHomeTitle: "الصفحة الرئيسية",
+    fullHomeDescription: "موقع شخصي احترافي ثنائي اللغة يعرض الهوية المهنية والخبرة التقنية والاستعداد للنشر.",
+    aboutTitle: "من أنا",
+    aboutDescription: "تعرف على الخبرات، المهارات، ومنهج العمل في بناء مواقع وأنظمة ويب حديثة.",
+    contactTitle: "تواصل",
+    contactDescription: "صفحة تواصل جاهزة لعرض البريد وروابط المنصات المهنية مباشرة من الإعدادات.",
+    notFoundTitle: "الصفحة غير موجودة",
+    notFoundDescription: "تعذر العثور على الصفحة المطلوبة. يمكنك العودة إلى الصفحة الرئيسية أو التبديل بين اللغتين.",
+  },
 };
 
 export default ar;
diff --git a/content/en.ts b/content/en.ts
index 98d244b..a1e98a0 100644
--- a/content/en.ts
+++ b/content/en.ts
@@ -2,53 +2,107 @@ import type { Dictionary } from "@/content/types";
 
 const en: Dictionary = {
   common: {
-    siteTitle: "diyaa | Personal Site",
+    siteTitle: "Diyaa",
+    siteTagline: "A new personal site is on the way",
     navLabel: "Main navigation",
     languageSwitcherLabel: "Switch language",
+    themeToggleLabel: "Interface theme",
+    themeLight: "Light",
+    themeDark: "Dark",
     nav: {
       home: "Home",
-      about: "About Me",
+      about: "About",
       contact: "Contact",
     },
     footerRights: "{year} All rights reserved",
+    footerBuiltWith: "A bilingual professional site prepared for deployment on a private server.",
+    availabilityBadge: "Available for web builds and custom development",
   },
   home: {
-    kicker: "Fresh personal presence",
-    title: "A bold digital space for my professional identity",
-    description:
-      "This is placeholder copy you can replace quickly. It is built to highlight your profile, communicate value, and stay clean on every screen size.",
-    primaryCta: "Start a conversation",
-    highlights: [
-      { value: "3", label: "Core pages" },
-      { value: "RTL/LTR", label: "Direction ready" },
-      { value: "100%", label: "Customizable" },
-    ],
+    comingSoon: {
+      badge: "Coming Soon",
+      kicker: "Coming soon",
+      title: "A fresh version of this site is being prepared",
+      description:
+        "The full website is currently being refined with a stronger visual identity, sharper content, and a cleaner launch-ready experience. It will be live soon.",
+      primaryCta: "Reach out when it launches",
+      secondaryCta: "Stay tuned",
+      highlights: [
+        { value: "New release", label: "Updated look and content" },
+        { value: "Bilingual", label: "Arabic and English ready" },
+        { value: "Soon", label: "Official launch" },
+      ],
+    },
+    full: {
+      badge: "Available for web builds and custom development",
+      kicker: "Full-stack web developer",
+      title: "I build websites and web systems ready to grow",
+      description:
+        "I design and ship cohesive digital experiences backed by clean implementation and deployment-ready structure, so launch and maintenance stay manageable over time.",
+      primaryCta: "Start a conversation",
+      secondaryCta: "Learn more",
+      highlights: [
+        { value: "10+", label: "Projects and product builds" },
+        { value: "Bilingual", label: "Arabic and English ready" },
+        { value: "Deployable", label: "Docker and VPS workflow" },
+      ],
+    },
   },
   about: {
     kicker: "Short introduction",
     title: "About me",
     story:
-      "This is temporary biography text. Replace it with your real story, strengths, and the kind of outcomes you deliver through your work.",
+      "My focus is turning ideas into web products that feel polished in the browser and dependable in production. I care about clean interfaces, maintainable structure, and deployment choices that make future growth easier instead of harder.",
     skillsTitle: "Skills",
-    skills: ["Frontend engineering", "UX refinement", "Content structuring", "Digital project delivery"],
+    skills: [
+      "Next.js and React",
+      "TypeScript-driven UI structure",
+      "Fast, adaptable frontend systems",
+      "Private-server deployment setup",
+      "Performance and UX refinement",
+      "Bilingual content architecture",
+    ],
     experienceTitle: "Experience highlights",
     experience: [
-      "Placeholder experience line 1",
-      "Placeholder experience line 2",
-      "Placeholder experience line 3",
+      "Professional landing pages and personal web presence builds",
+      "Scalable frontend interfaces for modern web apps",
+      "Docker-based delivery flows for cleaner deployment",
+    ],
+    principlesTitle: "Working principles",
+    principles: [
+      "Keep the structure clear enough for future expansion",
+      "Treat performance and clarity as part of the product",
+      "Prepare for deployment and operations from the beginning",
     ],
   },
   contact: {
-    kicker: "Let us connect",
-    title: "Contact",
-    description: "Your real contact links will be added later. The placeholders below are ready for direct replacement.",
-    pendingCta: "Link pending",
+    kicker: "Let us start with a clear and actionable conversation",
+    title: "Contact channels",
+    description: "As soon as you add your real links in the environment file, they appear here automatically and become usable for visitors.",
+    availabilityTitle: "Launch readiness",
+    availabilityDescription:
+      "This version is prepared for private-server deployment with an internal health endpoint and contact links managed through configuration.",
+    channelsTitle: "Direct contact links",
+    channelCta: "Open link",
+    channelFallback: "This channel will appear once the real link is added",
     channels: [
-      { name: "Email", status: "Real link will be added soon" },
-      //{ name: "LinkedIn", status: "Real link will be added soon" },
-      //{ name: "GitHub", status: "Real link will be added soon" },
+      { key: "email", name: "Email", hint: "For direct professional contact and project inquiries" },
+      { key: "linkedin", name: "LinkedIn", hint: "For professional background and networking" },
+      { key: "github", name: "GitHub", hint: "For repositories, code samples, and project history" },
     ],
   },
+  metadata: {
+    homeTitle: "Coming Soon",
+    homeDescription: "A temporary landing page announcing the upcoming launch of the new personal website.",
+    fullHomeTitle: "Home",
+    fullHomeDescription: "A bilingual professional site presenting technical expertise, project readiness, and server-friendly deployment.",
+    aboutTitle: "About",
+    aboutDescription: "Learn about experience, skills, and the working approach behind modern web builds.",
+    contactTitle: "Contact",
+    contactDescription: "Contact page wired for email and professional profile links through environment settings.",
+    notFoundTitle: "Page not found",
+    notFoundDescription: "The requested page could not be found. Return home or switch to the other language.",
+  },
 };
 
 export default en;
diff --git a/content/types.ts b/content/types.ts
index 094efa6..556f1a9 100644
--- a/content/types.ts
+++ b/content/types.ts
@@ -1,26 +1,39 @@
 export type CommonContent = {
   siteTitle: string;
+  siteTagline: string;
   navLabel: string;
   languageSwitcherLabel: string;
+  themeToggleLabel: string;
+  themeLight: string;
+  themeDark: string;
   nav: {
     home: string;
     about: string;
     contact: string;
   };
   footerRights: string;
+  footerBuiltWith: string;
+  availabilityBadge: string;
 };
 
-export type HomeContent = {
+export type HomeVariantContent = {
+  badge: string;
   kicker: string;
   title: string;
   description: string;
   primaryCta: string;
+  secondaryCta: string;
   highlights: Array<{
     value: string;
     label: string;
   }>;
 };
 
+export type HomeContent = {
+  comingSoon: HomeVariantContent;
+  full: HomeVariantContent;
+};
+
 export type AboutContent = {
   kicker: string;
   title: string;
@@ -29,17 +42,39 @@ export type AboutContent = {
   skills: string[];
   experienceTitle: string;
   experience: string[];
+  principlesTitle: string;
+  principles: string[];
+};
+
+export type ContactChannelContent = {
+  key: "email" | "linkedin" | "github";
+  name: string;
+  hint: string;
 };
 
 export type ContactContent = {
   kicker: string;
   title: string;
   description: string;
-  pendingCta: string;
-  channels: Array<{
-    name: string;
-    status: string;
-  }>;
+  availabilityTitle: string;
+  availabilityDescription: string;
+  channelsTitle: string;
+  channelCta: string;
+  channelFallback: string;
+  channels: ContactChannelContent[];
+};
+
+export type MetadataContent = {
+  homeTitle: string;
+  homeDescription: string;
+  fullHomeTitle: string;
+  fullHomeDescription: string;
+  aboutTitle: string;
+  aboutDescription: string;
+  contactTitle: string;
+  contactDescription: string;
+  notFoundTitle: string;
+  notFoundDescription: string;
 };
 
 export type Dictionary = {
@@ -47,4 +82,5 @@ export type Dictionary = {
   home: HomeContent;
   about: AboutContent;
   contact: ContactContent;
+  metadata: MetadataContent;
 };
diff --git a/docker-compose.yml b/docker-compose.yml
index 7353031..1e47d98 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,8 +14,9 @@ services:
       NODE_ENV: ${NODE_ENV:-production}
       PORT: 3000
       HOSTNAME: 0.0.0.0
+      NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-1}
     healthcheck:
-      test: ["CMD-SHELL", "wget -q --spider http://127.0.0.1:3000 || exit 1"]
+      test: ["CMD-SHELL", "wget -q --spider http://127.0.0.1:3000/api/health || exit 1"]
       interval: 10s
       timeout: 5s
       retries: 5
diff --git a/lib/i18n.ts b/lib/i18n.ts
index fe4da68..edb0be5 100644
--- a/lib/i18n.ts
+++ b/lib/i18n.ts
@@ -22,3 +22,7 @@ export function getDictionary(locale: Locale): Dictionary {
 export function getDirection(locale: Locale): "rtl" | "ltr" {
   return locale === "ar" ? "rtl" : "ltr";
 }
+
+export function getLocaleName(locale: Locale): string {
+  return locale === "ar" ? "العربية" : "English";
+}
diff --git a/lib/metadata.ts b/lib/metadata.ts
new file mode 100644
index 0000000..eb8bd0e
--- /dev/null
+++ b/lib/metadata.ts
@@ -0,0 +1,60 @@
+import type { Metadata } from "next";
+import { getDictionary, type Locale } from "@/lib/i18n";
+import { getLocalizedPath, getLocalizedUrl, isComingSoonMode } from "@/lib/site";
+
+type PageKey = "home" | "about" | "contact";
+
+const pagePathMap: Record<PageKey, string> = {
+  home: "",
+  about: "/about",
+  contact: "/contact",
+};
+
+export function buildPageMetadata(locale: Locale, page: PageKey): Metadata {
+  const dictionary = getDictionary(locale);
+  const pathname = pagePathMap[page];
+  const isComingSoon = isComingSoonMode();
+  const metadataByPage = {
+    home: {
+      title: isComingSoon ? dictionary.metadata.homeTitle : dictionary.metadata.fullHomeTitle,
+      description: isComingSoon ? dictionary.metadata.homeDescription : dictionary.metadata.fullHomeDescription,
+    },
+    about: {
+      title: dictionary.metadata.aboutTitle,
+      description: dictionary.metadata.aboutDescription,
+    },
+    contact: {
+      title: dictionary.metadata.contactTitle,
+      description: dictionary.metadata.contactDescription,
+    },
+  } as const;
+
+  const pageMetadata = metadataByPage[page];
+  const canonicalPath = getLocalizedPath(pathname, locale);
+
+  return {
+    title: pageMetadata.title,
+    description: pageMetadata.description,
+    alternates: {
+      canonical: canonicalPath,
+      languages: {
+        ar: getLocalizedPath(pathname, "ar"),
+        en: getLocalizedPath(pathname, "en"),
+        "x-default": getLocalizedPath(pathname, "ar"),
+      },
+    },
+    openGraph: {
+      title: pageMetadata.title,
+      description: pageMetadata.description,
+      url: getLocalizedUrl(pathname, locale),
+      siteName: dictionary.common.siteTitle,
+      locale: locale === "ar" ? "ar_SA" : "en_US",
+      type: "website",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: pageMetadata.title,
+      description: pageMetadata.description,
+    },
+  };
+}
diff --git a/lib/site.ts b/lib/site.ts
new file mode 100644
index 0000000..fd9f7e7
--- /dev/null
+++ b/lib/site.ts
@@ -0,0 +1,94 @@
+import type { ContactContent } from "@/content/types";
+
+const FALLBACK_SITE_URL = "https://example.com";
+const SITE_MODES = ["coming-soon", "full"] as const;
+
+export type SiteMode = (typeof SITE_MODES)[number];
+
+function normalizeSiteUrl(value: string | undefined): string {
+  const raw = value?.trim();
+
+  if (!raw) {
+    return FALLBACK_SITE_URL;
+  }
+
+  try {
+    const url = new URL(raw);
+    return url.origin;
+  } catch {
+    return FALLBACK_SITE_URL;
+  }
+}
+
+function normalizeExternalUrl(value: string | undefined): string | undefined {
+  const raw = value?.trim();
+
+  if (!raw) {
+    return undefined;
+  }
+
+  try {
+    return new URL(raw).toString();
+  } catch {
+    return undefined;
+  }
+}
+
+function formatDisplayValue(key: "email" | "linkedin" | "github", href: string): string {
+  if (key === "email") {
+    return href.replace("mailto:", "");
+  }
+
+  const url = new URL(href);
+  return `${url.hostname}${url.pathname === "/" ? "" : url.pathname.replace(/\/$/, "")}`;
+}
+
+export const siteConfig = {
+  ownerName: "Diyaa",
+  siteUrl: normalizeSiteUrl(process.env.NEXT_PUBLIC_SITE_URL),
+  email: process.env.NEXT_PUBLIC_CONTACT_EMAIL?.trim() || "",
+  linkedinUrl: normalizeExternalUrl(process.env.NEXT_PUBLIC_LINKEDIN_URL),
+  githubUrl: normalizeExternalUrl(process.env.NEXT_PUBLIC_GITHUB_URL),
+};
+
+export function getSiteMode(): SiteMode {
+  const mode = process.env.NEXT_PUBLIC_SITE_MODE?.trim();
+  return SITE_MODES.includes(mode as SiteMode) ? (mode as SiteMode) : "coming-soon";
+}
+
+export function isComingSoonMode(): boolean {
+  return getSiteMode() === "coming-soon";
+}
+
+export function getLocalizedPath(pathname: string, locale: "ar" | "en"): string {
+  const normalizedPath = pathname === "/" ? "" : pathname;
+  return `/${locale}${normalizedPath}`;
+}
+
+export function getLocalizedUrl(pathname: string, locale: "ar" | "en"): string {
+  return new URL(getLocalizedPath(pathname, locale), siteConfig.siteUrl).toString();
+}
+
+export function getEmailHref(): string | undefined {
+  return siteConfig.email ? `mailto:${siteConfig.email}` : undefined;
+}
+
+export function getContactChannels(contact: ContactContent) {
+  const valueMap = {
+    email: getEmailHref(),
+    linkedin: siteConfig.linkedinUrl,
+    github: siteConfig.githubUrl,
+  } as const;
+
+  return contact.channels.map((channel) => {
+    const href = valueMap[channel.key];
+    const external = channel.key !== "email";
+
+    return {
+      ...channel,
+      href,
+      external,
+      value: href ? formatDisplayValue(channel.key, href) : contact.channelFallback,
+    };
+  });
+}
diff --git a/next.config.js b/next.config.js
index 793352b..31a3207 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,6 +2,36 @@
 const nextConfig = {
   reactStrictMode: true,
   output: "standalone",
+  poweredByHeader: false,
+  async headers() {
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          {
+            key: "Referrer-Policy",
+            value: "strict-origin-when-cross-origin",
+          },
+          {
+            key: "X-Content-Type-Options",
+            value: "nosniff",
+          },
+          {
+            key: "X-Frame-Options",
+            value: "SAMEORIGIN",
+          },
+          {
+            key: "Permissions-Policy",
+            value: "camera=(), microphone=(), geolocation=()",
+          },
+          {
+            key: "X-DNS-Prefetch-Control",
+            value: "on",
+          },
+        ],
+      },
+    ];
+  },
 };
 
 module.exports = nextConfig;
diff --git a/package.json b/package.json
index dfad8cc..7fafabf 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,12 @@
     "dev": "next dev -p 3000",
     "build": "next build",
     "start": "next start -p 3000",
-    "lint": "next lint"
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit",
+    "check": "npm run lint && npm run typecheck && npm run build"
+  },
+  "engines": {
+    "node": ">=20.0.0"
   },
   "dependencies": {
     "next": "14.2.32",
@@ -17,6 +22,8 @@
     "@types/node": "20.14.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "eslint": "8.57.1",
+    "eslint-config-next": "14.2.32",
     "sass": "1.77.8",
     "typescript": "5.5.4"
   }