Improve coming soon page

app/[locale]/coming-soon/page.tsx

@@ -1,13 +1,15 @@
 import type { Metadata } from "next";
 import { unstable_noStore as noStore } from "next/cache";
-import { Sparkles } from "lucide-react";
+import Link from "next/link";
+import { ArrowLeft, ArrowRight, Mail, Sparkles } from "lucide-react";
 import { getLocale, getTranslations } from "next-intl/server";
 
 import { FloatingPreferences } from "@/components/layout/floating-preferences";
 import { HeroContentMotion, HeroMotionItem, HeroShell, HeroTitle } from "@/components/layout/site-hero";
+import { Button } from "@/components/ui/button";
 import { getSiteSettings } from "@/lib/app-config";
 import { buildLocalizedMetadata } from "@/lib/metadata";
-import { resolveLocale } from "@/lib/locale";
+import { getLocalizedPath, resolveLocale } from "@/lib/locale";
 
 type ComingSoonPageProps = {
   params: Promise<{
@@ -43,6 +45,7 @@ export default async function ComingSoonPage({
   const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
   const t = await getTranslations({ locale: localeKey, namespace: "comingSoon" });
   const isArabic = localeKey === "ar";
+  const DirectionIcon = isArabic ? ArrowLeft : ArrowRight;
   const lines = [
     {
       text: t("titleLineOne"),
@@ -75,7 +78,7 @@ export default async function ComingSoonPage({
               </p>
             </HeroMotionItem>
 
-            <HeroTitle locale={localeKey} lines={lines} className="mx-auto mt-8" />
+            <HeroTitle locale={localeKey} lines={lines} className="mx-auto mt-8 tracking-normal" />
 
             <HeroMotionItem>
               <p className="mx-auto mt-8 max-w-[34rem] text-sm leading-7 text-foreground/68 sm:text-base">
@@ -83,10 +86,19 @@ export default async function ComingSoonPage({
               </p>
             </HeroMotionItem>
 
-            <HeroMotionItem>
-              <p className="mx-auto mt-4 max-w-[32rem] text-sm leading-6 text-foreground/54 sm:text-base">
-                {t("note")}
-              </p>
+            <HeroMotionItem className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
+              <Button asChild size="lg" className="w-full sm:w-auto">
+                <Link href={getLocalizedPath(localeKey, "/contact", siteSettings.defaultLocale)}>
+                  <Mail className="h-4 w-4" />
+                  {t("primaryCta")}
+                </Link>
+              </Button>
+              <Button asChild variant="outline" size="lg" className="w-full sm:w-auto">
+                <Link href={getLocalizedPath(localeKey, "/", siteSettings.defaultLocale)}>
+                  {t("secondaryCta")}
+                  <DirectionIcon className="h-4 w-4" />
+                </Link>
+              </Button>
             </HeroMotionItem>
           </div>
         </HeroContentMotion>