feat: public marketing site (vitrine)
Adds a (marketing) route group -- Home, Features, About, Privacy, Terms, Contact -- reusing the app's design system/i18n/deploy pipeline rather than a separate site. Root page.tsx now branches on session instead of always redirecting to /recipes: logged-in visitors still land in the app unchanged, logged-out visitors see the vitrine home page. The actual integration point: proxy.ts's PUBLIC_PATHS previously sent every anonymous "/" request straight to /login before page.tsx's redirect ever ran. Added the new marketing routes to PUBLIC_PATHS, plus a separate exact-match list for "/" itself -- it can't go in the startsWith-matched array, since every path starts with "/" and that would make the whole app public. Also adds app/sitemap.ts and app/robots.ts (neither existed before), disallowing the authenticated app and the unlisted /r/ and /s/ share routes from crawling while allowing /u/ public profiles. Pricing page deliberately not included -- waiting on Stripe Checkout (STRIPE_PLAN.md) so its CTA goes somewhere real. Privacy/Terms are structural drafts flagged inline as not lawyer-reviewed, per STRIPE_PLAN.md's own tax-advice caveat -- same spirit here. Verified with a full production build (pnpm build) -- compiles clean, all 7 new routes render, since there's no DB in this sandbox to run the dev server against for a real click-through. v0.48.0
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
import type { Metadata } from "next";
|
||||
import { getMessages } from "@/lib/i18n/server";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "About — Epicure",
|
||||
description: "The story behind Epicure.",
|
||||
};
|
||||
|
||||
export default function AboutPage() {
|
||||
const m = getMessages(undefined);
|
||||
const t = m.marketing.about;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 max-w-2xl space-y-6">
|
||||
<h1 className="text-3xl font-bold tracking-tight">{t.title}</h1>
|
||||
<div className="space-y-4 text-muted-foreground leading-relaxed">
|
||||
{t.paragraphs.map((p, i) => (
|
||||
<p key={i}>{p}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Mail } from "lucide-react";
|
||||
import { getMessages } from "@/lib/i18n/server";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Contact — Epicure",
|
||||
description: "Get in touch with the Epicure team.",
|
||||
};
|
||||
|
||||
const SUPPORT_EMAIL = "support@epicure.app";
|
||||
|
||||
export default function ContactPage() {
|
||||
const m = getMessages(undefined);
|
||||
const t = m.marketing.contact;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 max-w-lg text-center space-y-6">
|
||||
<h1 className="text-3xl font-bold tracking-tight">{t.title}</h1>
|
||||
<p className="text-muted-foreground">{t.subtitle}</p>
|
||||
<a
|
||||
href={`mailto:${SUPPORT_EMAIL}`}
|
||||
className="inline-flex items-center gap-2 rounded-lg border px-4 py-2.5 text-sm font-medium hover:bg-accent transition-colors"
|
||||
>
|
||||
<Mail className="h-4 w-4" />
|
||||
{SUPPORT_EMAIL}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { Sparkles, Calendar, Package, MessageCircle, Users, ChefHat, Camera, ListChecks } from "lucide-react";
|
||||
import { getMessages } from "@/lib/i18n/server";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Features — Epicure",
|
||||
description: "AI recipe generation, meal planning, pantry tracking, and a cooking assistant that can act on your behalf.",
|
||||
};
|
||||
|
||||
const FEATURES = [
|
||||
{ icon: Sparkles, key: "ai" },
|
||||
{ icon: Camera, key: "photoImport" },
|
||||
{ icon: MessageCircle, key: "assistant" },
|
||||
{ icon: Calendar, key: "mealPlan" },
|
||||
{ icon: Package, key: "pantry" },
|
||||
{ icon: ListChecks, key: "shoppingList" },
|
||||
{ icon: Users, key: "social" },
|
||||
{ icon: ChefHat, key: "batchCook" },
|
||||
] as const;
|
||||
|
||||
export default function FeaturesPage() {
|
||||
const m = getMessages(undefined);
|
||||
const t = m.marketing.features;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 space-y-12">
|
||||
<div className="text-center space-y-4 max-w-2xl mx-auto">
|
||||
<h1 className="text-3xl sm:text-4xl font-bold tracking-tight">{t.title}</h1>
|
||||
<p className="text-lg text-muted-foreground">{t.subtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
{FEATURES.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 text-lg">{t.items[key].title}</h3>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">{t.items[key].description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center pt-4">
|
||||
<Link href="/signup" className={cn(buttonVariants({ size: "lg" }))}>
|
||||
{t.cta}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { headers } from "next/headers";
|
||||
import { auth } from "@/lib/auth/server";
|
||||
import { MarketingNav } from "@/components/marketing/marketing-nav";
|
||||
import { MarketingFooter } from "@/components/marketing/marketing-footer";
|
||||
|
||||
export default async function MarketingLayout({ children }: { children: React.ReactNode }) {
|
||||
const session = await auth.api.getSession({ headers: await headers() }).catch(() => null);
|
||||
const locale = (session?.user as { locale?: string } | undefined)?.locale;
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col">
|
||||
<MarketingNav />
|
||||
<main className="flex-1">{children}</main>
|
||||
<MarketingFooter locale={locale} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
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 { buttonVariants } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Sparkles, Calendar, Package, MessageCircle, Users, ChefHat } from "lucide-react";
|
||||
|
||||
const HIGHLIGHTS = [
|
||||
{ icon: Sparkles, key: "ai" },
|
||||
{ icon: MessageCircle, key: "assistant" },
|
||||
{ icon: Calendar, key: "mealPlan" },
|
||||
{ icon: Package, key: "pantry" },
|
||||
{ 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 m = getMessages(undefined);
|
||||
const t = m.marketing.home;
|
||||
|
||||
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" }))}>
|
||||
{t.ctaPrimary}
|
||||
</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" }))}>
|
||||
{t.ctaPrimary}
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import type { Metadata } from "next";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Privacy Policy — Epicure",
|
||||
description: "How Epicure collects, uses, and protects your data.",
|
||||
};
|
||||
|
||||
export default function PrivacyPage() {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 max-w-2xl space-y-6">
|
||||
<div className="rounded-lg border border-yellow-500/40 bg-yellow-500/10 p-4 flex gap-3 text-sm">
|
||||
<AlertTriangle className="h-4 w-4 text-yellow-600 shrink-0 mt-0.5" />
|
||||
<p>
|
||||
<strong>Draft — not yet reviewed by counsel.</strong> This page is a
|
||||
placeholder structure, not a finished, legally-binding policy. Replace
|
||||
before accepting real signups/payments (see <code>STRIPE_PLAN.md</code> §10).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl font-bold tracking-tight">Privacy Policy</h1>
|
||||
|
||||
<div className="space-y-6 text-sm text-muted-foreground leading-relaxed">
|
||||
<section className="space-y-2">
|
||||
<h2 className="font-semibold text-foreground">Data we collect</h2>
|
||||
<p>Account information (email, name), recipes and content you create, usage data (AI calls, storage), and payment information (processed by Stripe — we never store card details ourselves).</p>
|
||||
</section>
|
||||
<section className="space-y-2">
|
||||
<h2 className="font-semibold text-foreground">How we use it</h2>
|
||||
<p>To provide the service (store your recipes, run AI features you request, process subscriptions), and nothing beyond that — no data is sold to third parties.</p>
|
||||
</section>
|
||||
<section className="space-y-2">
|
||||
<h2 className="font-semibold text-foreground">Third parties</h2>
|
||||
<p>AI providers (OpenAI/Anthropic/OpenRouter/Ollama, depending on your configuration), Stripe for payments, and your own configured integrations (webhooks, API keys) that you explicitly set up.</p>
|
||||
</section>
|
||||
<section className="space-y-2">
|
||||
<h2 className="font-semibold text-foreground">Your rights</h2>
|
||||
<p>Access, export, correct, or delete your data at any time from Settings, or by contacting us (see Contact page). EU/EEA users have rights under GDPR.</p>
|
||||
</section>
|
||||
<section className="space-y-2">
|
||||
<h2 className="font-semibold text-foreground">Contact</h2>
|
||||
<p>Questions about this policy — see the Contact page.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import type { Metadata } from "next";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Terms of Service — Epicure",
|
||||
description: "The terms governing use of Epicure.",
|
||||
};
|
||||
|
||||
export default function TermsPage() {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 max-w-2xl space-y-6">
|
||||
<div className="rounded-lg border border-yellow-500/40 bg-yellow-500/10 p-4 flex gap-3 text-sm">
|
||||
<AlertTriangle className="h-4 w-4 text-yellow-600 shrink-0 mt-0.5" />
|
||||
<p>
|
||||
<strong>Draft — not yet reviewed by counsel.</strong> This page is a
|
||||
placeholder structure, not finished, legally-binding terms. Replace
|
||||
before accepting real signups/payments (see <code>STRIPE_PLAN.md</code> §10).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl font-bold tracking-tight">Terms of Service</h1>
|
||||
|
||||
<div className="space-y-6 text-sm text-muted-foreground leading-relaxed">
|
||||
<section className="space-y-2">
|
||||
<h2 className="font-semibold text-foreground">Using Epicure</h2>
|
||||
<p>You're responsible for the content you create and share, and for keeping your account credentials secure.</p>
|
||||
</section>
|
||||
<section className="space-y-2">
|
||||
<h2 className="font-semibold text-foreground">Subscriptions</h2>
|
||||
<p>Paid tiers (Pro, Family) renew automatically until cancelled. Cancel anytime from Settings — access continues until the end of the paid period.</p>
|
||||
</section>
|
||||
<section className="space-y-2">
|
||||
<h2 className="font-semibold text-foreground">Content ownership</h2>
|
||||
<p>You own what you create. We only use it to provide the service to you (and, if you set a recipe public/unlisted/followers-visible, to whoever you've chosen to share it with).</p>
|
||||
</section>
|
||||
<section className="space-y-2">
|
||||
<h2 className="font-semibold text-foreground">AI-generated content</h2>
|
||||
<p>AI-generated recipes are provided as-is — always use your own judgment, especially around allergens and food safety.</p>
|
||||
</section>
|
||||
<section className="space-y-2">
|
||||
<h2 className="font-semibold text-foreground">Changes</h2>
|
||||
<p>We may update these terms; meaningful changes will be communicated in-app.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default function RootPage() {
|
||||
redirect("/recipes");
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import type { MetadataRoute } from "next";
|
||||
|
||||
const BASE_URL = process.env["BETTER_AUTH_URL"] ?? "http://localhost:3000";
|
||||
|
||||
export default function robots(): MetadataRoute.Robots {
|
||||
return {
|
||||
rules: {
|
||||
userAgent: "*",
|
||||
allow: ["/", "/features", "/pricing", "/about", "/privacy", "/terms", "/contact"],
|
||||
// /r/ and /s/ are unlisted share links (recipe/shopping-list) — "unlisted"
|
||||
// means reachable by direct link only, not meant to be crawled/indexed.
|
||||
// /u/ (public profiles) is deliberately left crawlable.
|
||||
disallow: ["/api/", "/admin/", "/recipes", "/explore", "/meal-plan", "/pantry", "/shopping-lists", "/settings", "/collections", "/nutrition", "/r/", "/s/"],
|
||||
},
|
||||
sitemap: `${BASE_URL}/sitemap.xml`,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import type { MetadataRoute } from "next";
|
||||
|
||||
const BASE_URL = process.env["BETTER_AUTH_URL"] ?? "http://localhost:3000";
|
||||
|
||||
export default function sitemap(): MetadataRoute.Sitemap {
|
||||
const routes = ["", "/features", "/pricing", "/about", "/privacy", "/terms", "/contact"];
|
||||
return routes.map((route) => ({
|
||||
url: `${BASE_URL}${route}`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: route === "" ? "weekly" : "monthly",
|
||||
priority: route === "" ? 1 : 0.5,
|
||||
}));
|
||||
}
|
||||
Reference in New Issue
Block a user