Skip to content

Polish public footer #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Alimaster30 merged 1 commit into from
Jul 23, 2026
Merged

Polish public footer #18

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 119 additions & 18 deletions components/landing/PublicFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
Loading