From a33aff5a40938ae09b70cbfa404c3c8b703a9380 Mon Sep 17 00:00:00 2001
From: Tahir Ali <97827790+Alimaster30@users.noreply.github.com>
Date: Thu, 23 Jul 2026 20:29:03 +0500
Subject: [PATCH] Polish public footer

---
 components/landing/PublicFooter.tsx | 137 ++++++++++++++++++++++++----
 1 file changed, 119 insertions(+), 18 deletions(-)

diff --git a/components/landing/PublicFooter.tsx b/components/landing/PublicFooter.tsx
index d37aa25..c877b46 100644
--- a/components/landing/PublicFooter.tsx
+++ b/components/landing/PublicFooter.tsx
@@ -1,30 +1,131 @@
 import Link from "next/link";
+import { ArrowUpRight, Mail, MapPin } from "lucide-react";
 
 import BrandLogo from "@/components/BrandLogo";
 
+const productLinks = [
+  { href: "/#capabilities", label: "What you can do" },
+  { href: "/#how-it-works", label: "How it works" },
+  { href: "/sign-up", label: "Join the beta" },
+  { href: "/sign-in", label: "Sign in" },
+];
+
+const legalLinks = [
+  { href: "/privacy", label: "Privacy notice" },
+  { href: "/terms", label: "Terms of use" },
+];
+
+const linkClassName =
+  "group inline-flex w-fit items-center gap-1.5 text-sm text-slate-300 hover:text-white focus-visible:text-white";
+
 export default function PublicFooter() {
   const supportEmail = process.env.NEXT_PUBLIC_SUPPORT_EMAIL?.trim();
+  const jurisdiction = process.env.NEXT_PUBLIC_LEGAL_JURISDICTION?.trim();
+  const location = jurisdiction ? `Remote-first, ${jurisdiction}` : "Remote-first";
+  const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="border-t border-border bg-white">
-      <div className="mx-auto flex max-w-7xl flex-col gap-5 px-5 py-8 text-sm text-muted-foreground sm:px-8 lg:flex-row lg:items-center lg:justify-between">
-        <div className="flex items-center gap-3">
-          <BrandLogo imageClassName="h-8" />
-          <span className="rounded-full bg-accent px-2 py-0.5 text-[10px] font-semibold text-accent-foreground">
-            Free plan
-          </span>
+    <footer className="bg-slate-950 text-white" aria-labelledby="footer-heading">
+      <h2 id="footer-heading" className="sr-only">
+        Prepora footer
+      </h2>
+
+      <div className="mx-auto max-w-7xl px-5 sm:px-8">
+        <div className="grid gap-12 py-14 sm:py-16 md:grid-cols-2 lg:grid-cols-[1.4fr_0.9fr_0.7fr_0.7fr] lg:gap-10 lg:py-20">
+          <div className="max-w-md">
+            <Link href="/" className="inline-flex" aria-label="Prepora home">
+              <BrandLogo imageClassName="h-9 brightness-0 invert" />
+            </Link>
+            <div className="mt-6 flex items-center gap-3">
+              <span className="relative flex size-2" aria-hidden="true">
+                <span className="absolute inline-flex size-full animate-ping rounded-full bg-blue-300 opacity-50 motion-reduce:animate-none" />
+                <span className="relative inline-flex size-2 rounded-full bg-blue-300" />
+              </span>
+              <span className="text-xs font-semibold uppercase tracking-[0.16em] text-blue-300">
+                Free during beta
+              </span>
+            </div>
+            <p className="mt-4 max-w-sm text-sm leading-6 text-slate-300">
+              A practical workspace for stronger interviews, clearer resumes,
+              and more confident applications.
+            </p>
+          </div>
+
+          <section aria-labelledby="contact-heading">
+            <h3
+              id="contact-heading"
+              className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400"
+            >
+              Contact
+            </h3>
+            <div className="mt-5 space-y-4">
+              {supportEmail ? (
+                <a href={`mailto:${supportEmail}`} className={linkClassName}>
+                  <Mail aria-hidden="true" size={16} strokeWidth={1.8} />
+                  <span className="break-all">{supportEmail}</span>
+                  <ArrowUpRight
+                    aria-hidden="true"
+                    className="transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 motion-reduce:transform-none"
+                    size={14}
+                  />
+                </a>
+              ) : (
+                <p className="flex items-start gap-2 text-sm leading-6 text-slate-400">
+                  <Mail aria-hidden="true" className="mt-1 shrink-0" size={16} strokeWidth={1.8} />
+                  Support email available in the app
+                </p>
+              )}
+              <p className="flex items-start gap-2 text-sm leading-6 text-slate-300">
+                <MapPin aria-hidden="true" className="mt-1 shrink-0" size={16} strokeWidth={1.8} />
+                <span>
+                  {location}
+                  <span className="block text-slate-400">Supporting candidates worldwide</span>
+                </span>
+              </p>
+            </div>
+          </section>
+
+          <nav aria-labelledby="product-links-heading">
+            <h3
+              id="product-links-heading"
+              className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400"
+            >
+              Product
+            </h3>
+            <ul className="mt-5 space-y-3.5">
+              {productLinks.map((link) => (
+                <li key={link.href}>
+                  <Link href={link.href} className={linkClassName}>
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+
+          <nav aria-labelledby="legal-links-heading">
+            <h3
+              id="legal-links-heading"
+              className="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400"
+            >
+              Legal
+            </h3>
+            <ul className="mt-5 space-y-3.5">
+              {legalLinks.map((link) => (
+                <li key={link.href}>
+                  <Link href={link.href} className={linkClassName}>
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+
+        <div className="flex flex-col gap-2 border-t border-white/10 py-6 text-xs text-slate-400 sm:flex-row sm:items-center sm:justify-between">
+          <p>© {currentYear} Prepora. All rights reserved.</p>
+          <p>Built for focused preparation, not busywork.</p>
         </div>
-        <nav className="flex flex-wrap items-center gap-x-5 gap-y-2" aria-label="Legal and support">
-          <Link href="/privacy" className="hover:text-foreground">Privacy</Link>
-          <Link href="/terms" className="hover:text-foreground">Terms</Link>
-          {supportEmail ? (
-            <a href={`mailto:${supportEmail}`} className="hover:text-foreground">
-              Support
-            </a>
-          ) : (
-            <span title="Set NEXT_PUBLIC_SUPPORT_EMAIL before launch">Support coming soon</span>
-          )}
-        </nav>
       </div>
     </footer>
   );