udpate for coming soon

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>
   );
 }

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>

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 }));
 }

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();

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",
+      },
+    },
+  );
+}

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;

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>

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>
+  );
+}

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`,
+  };
+}

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,
+      })),
+    ),
+  ];
+}