Arnaud
8dccd8898b
Language switcher (flag toggle) and dark-mode toggle in the marketing header, both usable by logged-out visitors -- the marketing pages previously hardcoded English (getMessages(undefined)) regardless of any preference, and had no theme control since the authenticated Nav's toggle isn't rendered there. New cookie-based locale resolution (lib/marketing-locale.ts) separate from the authenticated app's useLocale/setLocale, which persists via an authenticated PATCH that would just 401 and revert for an anonymous visitor. Root layout now falls back to that cookie for <html lang> when there's no session. Features/Home now cover cook mode, recipe variations, personalized recommendations, and ingredient substitution -- all real, shipped features that were missing from the page copy. Signup CTAs check isSignupsDisabled() and swap to "Signups closed" instead of "Get started free" -- still linking to /signup, since that page already handles the invite-token exception correctly. Fixed along the way: importing the cookie-name constant from marketing-locale.ts in the client-side LanguageSwitcher pulled that file's server-only imports (lib/auth/server -> the DB client -> `postgres`) into the client bundle, breaking the build on Node built-ins. Split the constant into its own client-safe file (marketing-locale-cookie.ts). Caught by `pnpm build`, not typecheck. Verified with typecheck, lint, and a full production build (clean compile) -- no DB in this sandbox to click through a real dev server. v0.48.1
75 lines
3.0 KiB
TypeScript
75 lines
3.0 KiB
TypeScript
import { redirect } from "next/navigation";
|
|
import { headers } from "next/headers";
|
|
import Link from "next/link";
|
|
import { auth } from "@/lib/auth/server";
|
|
import { getMessages } from "@/lib/i18n/server";
|
|
import { getEffectiveMarketingLocale } from "@/lib/marketing-locale";
|
|
import { isSignupsDisabled } from "@/lib/site-settings";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
import { Sparkles, Calendar, Package, MessageCircle, Users, ChefHat, Utensils, Wand2 } from "lucide-react";
|
|
|
|
const HIGHLIGHTS = [
|
|
{ icon: Sparkles, key: "ai" },
|
|
{ icon: MessageCircle, key: "assistant" },
|
|
{ icon: Calendar, key: "mealPlan" },
|
|
{ icon: Package, key: "pantry" },
|
|
{ icon: Utensils, key: "cookMode" },
|
|
{ icon: Wand2, key: "variations" },
|
|
{ icon: Users, key: "social" },
|
|
{ icon: ChefHat, key: "batchCook" },
|
|
] as const;
|
|
|
|
export default async function MarketingHomePage() {
|
|
const session = await auth.api.getSession({ headers: await headers() });
|
|
if (session) redirect("/recipes");
|
|
|
|
const [locale, signupsDisabled] = await Promise.all([getEffectiveMarketingLocale(), isSignupsDisabled()]);
|
|
const m = getMessages(locale);
|
|
const t = m.marketing.home;
|
|
const ctaLabel = signupsDisabled ? m.marketing.nav.signupClosed : t.ctaPrimary;
|
|
|
|
return (
|
|
<div>
|
|
<section className="container mx-auto px-4 py-20 sm:py-28 text-center space-y-6">
|
|
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight max-w-2xl mx-auto">
|
|
{t.heroTitle}
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground max-w-xl mx-auto">
|
|
{t.heroSubtitle}
|
|
</p>
|
|
<div className="flex items-center justify-center gap-3 pt-2">
|
|
<Link href="/signup" className={cn(buttonVariants({ size: "lg" }))}>
|
|
{ctaLabel}
|
|
</Link>
|
|
<Link href="/features" className={cn(buttonVariants({ variant: "outline", size: "lg" }))}>
|
|
{t.ctaSecondary}
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="container mx-auto px-4 py-16 border-t">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{HIGHLIGHTS.map(({ icon: Icon, key }) => (
|
|
<div key={key} className="rounded-xl border bg-card p-6 space-y-3">
|
|
<div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
|
|
<Icon className="h-5 w-5 text-primary" />
|
|
</div>
|
|
<h3 className="font-semibold">{t.highlights[key].title}</h3>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">{t.highlights[key].description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="container mx-auto px-4 py-16 border-t text-center space-y-4">
|
|
<h2 className="text-2xl font-semibold">{t.bottomCtaTitle}</h2>
|
|
<p className="text-muted-foreground max-w-lg mx-auto">{t.bottomCtaSubtitle}</p>
|
|
<Link href="/signup" className={cn(buttonVariants({ size: "lg" }))}>
|
|
{ctaLabel}
|
|
</Link>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|