fix: add missing postcss config, redesign templates UI, link auth to product app

- Add postcss.config.mjs (was missing, caused all Tailwind CSS to not render)
- Redesign templates page: icon containers, stats strip, featured spotlight
with gradient-border, "How it works" light section, cockpit-grid browse grid
- Redesign TemplateCard: category-colored icons, hover arrows, dividers
- Redesign CategoryFilter: count badges on tabs, better spacing
- Link website to product app: Header login/signup → APP_URL/login|signup,
CTASection defaults to APP_URL/signup, PlanCard CTA → APP_URL/signup,
Footer adds Log in + Sign Up links, all pages updated
- Add NEXT_PUBLIC_APP_URL env var (defaults to localhost:3000)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Website/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

Website/src/app/about/page.tsx

@@ -267,8 +267,7 @@ export default function AboutPage() {
         subheadline="Start with the Free plan or book a demo to see LeadPilot in action."
         primaryLabel="Book a Demo"
         primaryHref="/contact"
-        secondaryLabel="Get Started Free"
-        secondaryHref="/plans"
+        secondaryLabel="Sign Up Free"
       />
     </>
   );

Website/src/app/features/page.tsx

@@ -182,8 +182,7 @@ export default async function FeaturesPage() {
         subheadline="Start with the Free plan today. No credit card. No setup fees."
         primaryLabel="Book a Demo"
         primaryHref="/contact"
-        secondaryLabel="See Plans"
-        secondaryHref="/plans"
+        secondaryLabel="Sign Up Free"
       />
     </>
   );

Website/src/app/page.tsx

@@ -10,7 +10,7 @@ import {
 import CTASection from "@/components/CTASection";
 import FeatureCard from "@/components/FeatureCard";
 import PlanCard from "@/components/PlanCard";
-import { getPlans, getModules, getIntegrationProviders, getPublicTemplates } from "@/lib/api";
+import { getPlans, getModules, getIntegrationProviders, getPublicTemplates, APP_URL } from "@/lib/api";
 import { MODULE_MARKETING_MAP } from "@/lib/moduleMap";
 
 export const metadata: Metadata = {
@@ -463,7 +463,7 @@ export default async function HomePage() {
                   priceNote={pricing.priceNote}
                   features={featureLines}
                   ctaLabel={pricing.available ? "Get Started Free" : "Coming Soon"}
-                  ctaHref="/plans"
+                  ctaHref={`${APP_URL}/signup`}
                   available={pricing.available}
                   highlighted={plan.name === "free"}
                 />
@@ -488,8 +488,8 @@ export default async function HomePage() {
         subheadline="LeadPilot automates lead capture, qualification, and routing so your team can focus on closing."
         primaryLabel="Book a Demo"
         primaryHref="/contact"
-        secondaryLabel="Start Free"
-        secondaryHref="/plans"
+        secondaryLabel="Sign Up Free"
+        secondaryHref={`${APP_URL}/signup`}
       />
     </>
   );

Website/src/app/plans/PlansClientContent.tsx

@@ -12,6 +12,7 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import type { CatalogPlan } from "@/lib/api";
+import { APP_URL } from "@/lib/api";
 import { MODULE_MARKETING_MAP } from "@/lib/moduleMap";
 
 // ── Pricing config (not in DB — marketing copy) ─────────────────────
@@ -370,15 +371,15 @@ export default function PlansClientContent({ plans }: { plans: CatalogPlan[] })
 
                     {/* CTA */}
                     {pricing.available ? (
-                      <Link
-                        href="/contact"
+                      <a
+                        href={`${APP_URL}/signup`}
                         className="block text-center px-6 py-3 rounded-xl font-semibold text-white text-sm transition-all duration-200"
                         style={{ background: "linear-gradient(135deg, #0F766E, #14B8A6)" }}
                         onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "0 0 25px rgba(15,118,110,0.45)"; }}
                         onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "none"; }}
                       >
                         Get Started Free
-                      </Link>
+                      </a>
                     ) : (
                       <a
                         href="#waitlist"

Website/src/app/templates/CategoryFilter.tsx

@@ -16,40 +16,64 @@ export default function CategoryFilter({ templates, categories }: Props) {
     ? templates.filter((t) => t.category === active)
     : templates;
 
+  // Count per category
+  const countMap: Record<string, number> = {};
+  for (const t of templates) {
+    countMap[t.category] = (countMap[t.category] ?? 0) + 1;
+  }
+
   return (
     <>
       {/* Filter tabs */}
-      <div className="flex flex-wrap items-center gap-2 justify-center mb-12">
+      <div className="flex flex-wrap items-center gap-2 justify-center mb-14">
         <button
           onClick={() => setActive(null)}
-          className={`px-3 py-1.5 rounded-lg text-xs font-medium ${
+          className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-semibold transition-all duration-200 ${
             active === null ? "category-link-active" : "category-link"
           }`}
         >
           All
+          <span
+            className="text-[10px] font-bold px-1.5 py-0.5 rounded-md"
+            style={{
+              background: active === null ? "rgba(20,184,166,0.2)" : "rgba(255,255,255,0.06)",
+              color: active === null ? "#14B8A6" : "#475569",
+            }}
+          >
+            {templates.length}
+          </span>
         </button>
         {categories.map((cat) => (
           <button
             key={cat.key}
             onClick={() => setActive(cat.key)}
-            className={`px-3 py-1.5 rounded-lg text-xs font-medium ${
+            className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-semibold transition-all duration-200 ${
               active === cat.key ? "category-link-active" : "category-link"
             }`}
           >
             {cat.label}
+            <span
+              className="text-[10px] font-bold px-1.5 py-0.5 rounded-md"
+              style={{
+                background: active === cat.key ? "rgba(20,184,166,0.2)" : "rgba(255,255,255,0.06)",
+                color: active === cat.key ? "#14B8A6" : "#475569",
+              }}
+            >
+              {countMap[cat.key] ?? 0}
+            </span>
           </button>
         ))}
       </div>
 
       {/* Template grid */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
         {filtered.map((t) => (
           <TemplateCard key={t.id} template={t} />
         ))}
       </div>
 
       {filtered.length === 0 && (
-        <p className="text-center text-sm py-12" style={{ color: "#64748B" }}>
+        <p className="text-center text-sm py-16" style={{ color: "#64748B" }}>
           No templates in this category yet. Check back soon.
         </p>
       )}

Website/src/app/templates/TemplateCard.tsx

@@ -1,55 +1,105 @@
 import type { CatalogTemplate } from "@/lib/api";
-import { Star } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import {
+  Star,
+  Copy,
+  ArrowUpRight,
+  Target,
+  TrendingUp,
+  Headphones,
+  UserPlus,
+} from "lucide-react";
+
+const CATEGORY_META: Record<string, { color: string; Icon: LucideIcon }> = {
+  lead_generation: { color: "#14B8A6", Icon: Target },
+  sales: { color: "#60A5FA", Icon: TrendingUp },
+  customer_support: { color: "#FBBF24", Icon: Headphones },
+  onboarding: { color: "#C084FC", Icon: UserPlus },
+};
 
 interface Props {
   template: CatalogTemplate;
+  featured?: boolean;
 }
 
-export default function TemplateCard({ template: t }: Props) {
+export default function TemplateCard({ template: t, featured = false }: Props) {
+  const meta = CATEGORY_META[t.category] ?? { color: "#14B8A6", Icon: Target };
+  const { color, Icon } = meta;
+
   return (
-    <div className="catalog-card p-6 flex flex-col">
-      {/* Top row: category + featured */}
-      <div className="flex items-center gap-2 mb-3">
-        <span className="badge-category" data-category={t.category}>
-          {t.category.replace(/_/g, " ")}
-        </span>
-        {t.is_featured && (
-          <span className="inline-flex items-center gap-1 text-[10px] font-semibold" style={{ color: "#FBBF24" }}>
-            <Star className="w-3 h-3 fill-current" aria-hidden="true" />
-            Featured
-          </span>
-        )}
+    <div
+      className={`group relative flex flex-col ${featured ? "gradient-border p-7" : "catalog-card p-6"}`}
+    >
+      {/* Header: icon + hover arrow */}
+      <div className="flex items-start justify-between mb-4">
+        <div
+          className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0"
+          style={{
+            background: `${color}15`,
+            border: `1px solid ${color}30`,
+          }}
+        >
+          <Icon className="w-5 h-5" style={{ color }} aria-hidden="true" />
+        </div>
+        <div className="flex items-center gap-2">
+          {t.is_featured && (
+            <Star
+              className="w-3.5 h-3.5 fill-current"
+              style={{ color: "#FBBF24" }}
+              aria-hidden="true"
+            />
+          )}
+          <ArrowUpRight
+            className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            style={{ color }}
+            aria-hidden="true"
+          />
+        </div>
       </div>
 
-      {/* Name + description */}
-      <h3 className="text-white font-semibold text-base mb-1">{t.name}</h3>
+      {/* Category badge */}
+      <span className="badge-category self-start mb-3" data-category={t.category}>
+        {t.category.replace(/_/g, " ")}
+      </span>
+
+      {/* Name */}
+      <h3 className="text-white font-bold text-base mb-1.5">{t.name}</h3>
+
+      {/* Description */}
       <p
-        className="text-sm leading-relaxed line-clamp-2 flex-1 mb-4"
+        className={`text-sm leading-relaxed ${featured ? "line-clamp-3" : "line-clamp-2"} flex-1 mb-4`}
         style={{ color: "rgba(148,163,184,0.85)" }}
       >
         {t.description}
       </p>
 
-      {/* Platform + integration badges */}
-      <div className="flex flex-wrap gap-1.5 mb-3">
-        {t.platforms.map((p) => (
-          <span key={p} className="badge-platform">{p}</span>
-        ))}
+      {/* Divider */}
+      <div className="mb-3" style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }} />
+
+      {/* Footer: platforms + clone count */}
+      <div className="flex items-center justify-between">
+        <div className="flex flex-wrap gap-1.5">
+          {t.platforms.map((p) => (
+            <span key={p} className="badge-platform">{p}</span>
+          ))}
+        </div>
+        {t.clone_count > 0 && (
+          <span
+            className="inline-flex items-center gap-1 text-[10px]"
+            style={{ color: "#475569" }}
+          >
+            <Copy className="w-3 h-3" aria-hidden="true" />
+            {t.clone_count.toLocaleString()}
+          </span>
+        )}
       </div>
 
       {/* Required integrations */}
       {t.required_integrations.length > 0 && (
-        <p className="text-[10px] mb-2" style={{ color: "#475569" }}>
+        <p className="text-[10px] mt-2" style={{ color: "#475569" }}>
           Requires: {t.required_integrations.join(", ")}
         </p>
       )}
-
-      {/* Clone count */}
-      {t.clone_count > 0 && (
-        <p className="text-[10px]" style={{ color: "#475569" }}>
-          {t.clone_count.toLocaleString()} clones
-        </p>
-      )}
     </div>
   );
 }

Website/src/app/templates/page.tsx

@@ -1,4 +1,6 @@
 import type { Metadata } from "next";
+import Link from "next/link";
+import { ArrowRight, Copy, Sliders, Rocket } from "lucide-react";
 import { getPublicTemplates, getTemplateCategories } from "@/lib/api";
 import CTASection from "@/components/CTASection";
 import CategoryFilter from "./CategoryFilter";
@@ -10,13 +12,38 @@ export const metadata: Metadata = {
     "Browse LeadPilot's library of pre-built automation templates for WhatsApp, Instagram, Messenger, and more. Clone and customise in minutes.",
 };
 
+const howItWorks = [
+  {
+    Icon: Copy,
+    step: "01",
+    title: "Clone",
+    description:
+      "Pick a template that matches your use case. One click copies the entire flow — nodes, logic, and AI prompts — into your workspace.",
+  },
+  {
+    Icon: Sliders,
+    step: "02",
+    title: "Customise",
+    description:
+      "Swap in your brand voice, tweak qualification questions, and wire up your integrations. The visual builder makes it drag-and-drop simple.",
+  },
+  {
+    Icon: Rocket,
+    step: "03",
+    title: "Launch",
+    description:
+      "Publish your flow and start capturing leads immediately. Monitor performance in real time and iterate whenever you need.",
+  },
+];
+
 export default async function TemplatesPage() {
   const [templates, categories] = await Promise.all([
     getPublicTemplates(),
     getTemplateCategories(),
   ]);
 
-  const featuredTemplates = templates.filter((t) => t.is_featured);
+  const featuredTemplates = templates.filter((t) => t.is_featured).slice(0, 3);
+  const totalClones = templates.reduce((sum, t) => sum + t.clone_count, 0);
 
   return (
     <>
@@ -36,12 +63,25 @@ export default async function TemplatesPage() {
           }}
         />
         <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <p
-            className="text-xs font-bold uppercase tracking-widest mb-4"
-            style={{ color: "#14B8A6" }}
+          <div
+            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-8"
+            style={{
+              background: "rgba(15,118,110,0.15)",
+              border: "1px solid rgba(20,184,166,0.3)",
+            }}
           >
-            Template Catalog
-          </p>
+            <span
+              className="w-2 h-2 rounded-full animate-pulse-glow"
+              style={{ background: "#14B8A6" }}
+              aria-hidden="true"
+            />
+            <span
+              className="text-xs font-semibold tracking-wider"
+              style={{ color: "#14B8A6" }}
+            >
+              TEMPLATE CATALOG
+            </span>
+          </div>
           <h1
             id="templates-hero-heading"
             className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-6 tracking-tight"
@@ -60,43 +100,197 @@ export default async function TemplatesPage() {
         </div>
       </section>
 
+      {/* ─── STATS STRIP ─────────────────────────────────────────── */}
+      <section
+        className="py-10 border-y"
+        style={{ background: "#0E1826", borderColor: "rgba(255,255,255,0.06)" }}
+        aria-label="Template catalog stats"
+      >
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-3 gap-8 text-center">
+            <div>
+              <p className="text-2xl sm:text-3xl font-bold text-white">
+                {templates.length}
+              </p>
+              <p
+                className="text-xs font-medium uppercase tracking-wider mt-1"
+                style={{ color: "#475569" }}
+              >
+                Templates
+              </p>
+            </div>
+            <div>
+              <p className="text-2xl sm:text-3xl font-bold text-white">
+                {categories.length}
+              </p>
+              <p
+                className="text-xs font-medium uppercase tracking-wider mt-1"
+                style={{ color: "#475569" }}
+              >
+                Categories
+              </p>
+            </div>
+            <div>
+              <p className="text-2xl sm:text-3xl font-bold text-white">
+                {totalClones > 0 ? totalClones.toLocaleString() : "—"}
+              </p>
+              <p
+                className="text-xs font-medium uppercase tracking-wider mt-1"
+                style={{ color: "#475569" }}
+              >
+                Total Clones
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* ─── FEATURED TEMPLATES ───────────────────────────────────── */}
       {featuredTemplates.length > 0 && (
         <section
-          className="py-16 border-b"
-          style={{ background: "#0E1826", borderColor: "rgba(255,255,255,0.06)" }}
+          className="py-24 relative overflow-hidden"
+          style={{ background: "#0B1320" }}
           aria-labelledby="featured-heading"
         >
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h2
-              id="featured-heading"
-              className="text-xs font-bold uppercase tracking-widest mb-8 text-center"
-              style={{ color: "#14B8A6" }}
-            >
-              Featured Templates
-            </h2>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+          <div
+            className="absolute inset-0 pointer-events-none"
+            aria-hidden="true"
+            style={{
+              background:
+                "radial-gradient(ellipse 50% 60% at 50% 100%, rgba(15,118,110,0.15) 0%, transparent 70%)",
+            }}
+          />
+          <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="text-center mb-14">
+              <p
+                className="text-xs font-bold uppercase tracking-widest mb-3"
+                style={{ color: "#14B8A6" }}
+              >
+                Staff Picks
+              </p>
+              <h2
+                id="featured-heading"
+                className="text-3xl sm:text-4xl font-bold text-white tracking-tight"
+              >
+                Featured templates
+              </h2>
+              <p
+                className="mt-4 text-base max-w-xl mx-auto"
+                style={{ color: "#64748B" }}
+              >
+                Our most popular and battle-tested automation flows, ready to deploy.
+              </p>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
               {featuredTemplates.map((t) => (
-                <TemplateCard key={t.id} template={t} />
+                <TemplateCard key={t.id} template={t} featured />
               ))}
             </div>
           </div>
         </section>
       )}
 
-      {/* ─── ALL TEMPLATES (filterable) ───────────────────────────── */}
+      {/* ─── HOW TEMPLATES WORK ──────────────────────────────────── */}
       <section
         className="py-24"
+        style={{ background: "#F8FAFC" }}
+        aria-labelledby="how-templates-work"
+      >
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <p
+              className="text-xs font-bold uppercase tracking-widest mb-3"
+              style={{ color: "#0F766E" }}
+            >
+              How It Works
+            </p>
+            <h2
+              id="how-templates-work"
+              className="text-3xl sm:text-4xl font-bold tracking-tight"
+              style={{ color: "#0F172A" }}
+            >
+              From template to live flow in three steps
+            </h2>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {howItWorks.map(({ Icon, step, title, description }) => (
+              <div key={step} className="text-center">
+                <div
+                  className="w-12 h-12 rounded-xl flex items-center justify-center mx-auto mb-5"
+                  style={{
+                    background: "rgba(15,118,110,0.08)",
+                    border: "1px solid rgba(15,118,110,0.15)",
+                  }}
+                >
+                  <Icon
+                    className="w-5 h-5"
+                    style={{ color: "#0F766E" }}
+                    aria-hidden="true"
+                  />
+                </div>
+                <span
+                  className="text-xl font-bold block mb-2"
+                  style={{
+                    background: "linear-gradient(135deg, #0F766E, #14B8A6)",
+                    WebkitBackgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    backgroundClip: "text",
+                  }}
+                >
+                  {step}
+                </span>
+                <h3
+                  className="font-semibold text-base mb-2"
+                  style={{ color: "#1E293B" }}
+                >
+                  {title}
+                </h3>
+                <p
+                  className="text-sm leading-relaxed"
+                  style={{ color: "#64748B" }}
+                >
+                  {description}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          <div className="text-center mt-12">
+            <Link
+              href="/contact"
+              className="inline-flex items-center gap-2 text-sm font-semibold text-link-primary"
+            >
+              Need help getting started? Contact us
+              <ArrowRight className="w-4 h-4" aria-hidden="true" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* ─── ALL TEMPLATES (filterable) ───────────────────────────── */}
+      <section
+        className="py-24 relative overflow-hidden"
         style={{ background: "#0B1320" }}
         aria-labelledby="all-templates-heading"
       >
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div
+          className="absolute inset-0 cockpit-grid opacity-20"
+          aria-hidden="true"
+        />
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-10">
+            <p
+              className="text-xs font-bold uppercase tracking-widest mb-3"
+              style={{ color: "#14B8A6" }}
+            >
+              Browse All
+            </p>
             <h2
               id="all-templates-heading"
-              className="text-2xl font-bold text-white tracking-tight mb-2"
+              className="text-3xl sm:text-4xl font-bold text-white tracking-tight mb-2"
             >
-              All Templates
+              Explore the full catalog
             </h2>
             <p className="text-sm" style={{ color: "#64748B" }}>
               {templates.length} templates across {categories.length} categories
@@ -113,8 +307,7 @@ export default async function TemplatesPage() {
         subheadline="Clone a template, customise it for your business, and go live in minutes."
         primaryLabel="Book a Demo"
         primaryHref="/contact"
-        secondaryLabel="Start Free"
-        secondaryHref="/plans"
+        secondaryLabel="Sign Up Free"
       />
     </>
   );

Website/src/app/use-cases/page.tsx

@@ -414,8 +414,7 @@ export default function UseCasesPage() {
         subheadline="Start with the Free plan — no credit card, no commitment."
         primaryLabel="Book a Demo"
         primaryHref="/contact"
-        secondaryLabel="Get Started Free"
-        secondaryHref="/plans"
+        secondaryLabel="Sign Up Free"
       />
     </>
   );

Website/src/components/CTASection.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { APP_URL } from "@/lib/api";
 
 interface CTASectionProps {
   headline?: string;
@@ -9,13 +10,36 @@ interface CTASectionProps {
   secondaryHref?: string;
 }
 
+function SmartLink({
+  href,
+  className,
+  children,
+}: {
+  href: string;
+  className: string;
+  children: React.ReactNode;
+}) {
+  if (href.startsWith("http")) {
+    return (
+      <a href={href} className={className}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <Link href={href} className={className}>
+      {children}
+    </Link>
+  );
+}
+
 export default function CTASection({
   headline = "Your leads aren't waiting. Neither should you.",
   subheadline = "Start capturing and qualifying leads today — no credit card required.",
   primaryLabel = "Book a Demo",
   primaryHref = "/contact",
-  secondaryLabel = "Start Free",
-  secondaryHref = "/plans",
+  secondaryLabel = "Sign Up Free",
+  secondaryHref = `${APP_URL}/signup`,
 }: CTASectionProps) {
   return (
     <section
@@ -48,18 +72,18 @@ export default function CTASection({
         </p>
 
         <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-          <Link
+          <SmartLink
             href={primaryHref}
             className="px-8 py-3.5 rounded-xl font-semibold text-sm btn-primary"
           >
             {primaryLabel}
-          </Link>
-          <Link
+          </SmartLink>
+          <SmartLink
             href={secondaryHref}
             className="px-8 py-3.5 rounded-xl font-semibold text-sm btn-ghost-dark"
           >
             {secondaryLabel}
-          </Link>
+          </SmartLink>
         </div>
       </div>
     </section>

Website/src/components/Footer.tsx

@@ -1,6 +1,8 @@
 import Link from "next/link";
 import { Zap, Twitter, Linkedin, Github } from "lucide-react";
 
+const APP_URL = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000";
+
 const footerNav = {
   Product: [
     { label: "How it Works", href: "/product" },
@@ -14,6 +16,8 @@ const footerNav = {
     { label: "About", href: "/about" },
     { label: "Contact", href: "/contact" },
     { label: "Book a Demo", href: "/contact" },
+    { label: "Log in", href: `${APP_URL}/login` },
+    { label: "Sign Up", href: `${APP_URL}/signup` },
   ],
   Legal: [
     { label: "Privacy Policy", href: "#" },
@@ -77,12 +81,15 @@ export default function Footer() {
               <ul className="space-y-3" role="list">
                 {links.map((link) => (
                   <li key={link.label}>
-                    <Link
-                      href={link.href}
-                      className="text-sm footer-link"
-                    >
-                      {link.label}
-                    </Link>
+                    {link.href.startsWith("http") ? (
+                      <a href={link.href} className="text-sm footer-link">
+                        {link.label}
+                      </a>
+                    ) : (
+                      <Link href={link.href} className="text-sm footer-link">
+                        {link.label}
+                      </Link>
+                    )}
                   </li>
                 ))}
               </ul>

Website/src/components/Header.tsx

@@ -5,6 +5,8 @@ import { usePathname } from "next/navigation";
 import { useState } from "react";
 import { Menu, X, Zap } from "lucide-react";
 
+const APP_URL = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000";
+
 const navLinks = [
   { label: "Product", href: "/product" },
   { label: "Features", href: "/features" },
@@ -76,17 +78,17 @@ export default function Header() {
 
         {/* Desktop CTAs */}
         <div className="hidden md:flex items-center gap-3">
-          <Link
-            href="/login"
+          <a
+            href={`${APP_URL}/login`}
             className="text-sm font-medium transition-colors duration-200"
             style={{ color: "rgba(241,245,249,0.6)" }}
             onMouseEnter={(e) => { e.currentTarget.style.color = "#F1F5F9"; }}
             onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(241,245,249,0.6)"; }}
           >
             Log in
-          </Link>
-          <Link
-            href="/contact"
+          </a>
+          <a
+            href={`${APP_URL}/signup`}
             className="px-4 py-2 rounded-lg text-sm font-semibold text-white transition-all duration-200"
             style={{ background: "linear-gradient(135deg, #0F766E, #14B8A6)" }}
             onMouseEnter={(e) => {
@@ -96,8 +98,8 @@ export default function Header() {
               e.currentTarget.style.boxShadow = "none";
             }}
           >
-            Book a Demo
-          </Link>
+            Sign Up Free
+          </a>
         </div>
 
         {/* Mobile menu button */}
@@ -138,22 +140,22 @@ export default function Header() {
             })}
           </ul>
           <div className="flex flex-col gap-2 mt-4 pt-4" style={{ borderTop: "1px solid rgba(255,255,255,0.07)" }}>
-            <Link
-              href="/login"
+            <a
+              href={`${APP_URL}/login`}
               className="block px-3 py-2 rounded-md text-sm font-medium text-center"
               style={{ color: "rgba(241,245,249,0.7)" }}
               onClick={() => setMobileOpen(false)}
             >
               Log in
-            </Link>
-            <Link
-              href="/contact"
+            </a>
+            <a
+              href={`${APP_URL}/signup`}
               className="block px-4 py-2 rounded-lg text-sm font-semibold text-white text-center"
               style={{ background: "linear-gradient(135deg, #0F766E, #14B8A6)" }}
               onClick={() => setMobileOpen(false)}
             >
-              Book a Demo
-            </Link>
+              Sign Up Free
+            </a>
           </div>
         </div>
       )}

Website/src/components/PlanCard.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Check, Clock } from "lucide-react";
+import { APP_URL } from "@/lib/api";
 
 interface PlanCardProps {
   name: string;
@@ -20,7 +21,7 @@ export default function PlanCard({
   priceNote,
   features,
   ctaLabel,
-  ctaHref = "/plans",
+  ctaHref = `${APP_URL}/signup`,
   available,
   highlighted = false,
 }: PlanCardProps) {
@@ -114,12 +115,12 @@ export default function PlanCard({
       </ul>
 
       {available ? (
-        <Link
+        <a
           href={ctaHref}
           className="block text-center px-6 py-3 rounded-xl font-semibold text-sm btn-primary"
         >
           {ctaLabel}
-        </Link>
+        </a>
       ) : (
         <button
           disabled

Website/src/lib/api.ts

@@ -5,6 +5,9 @@
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
 
+/** Base URL for the product app (login, signup, dashboard). */
+export const APP_URL = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000";
+
 // ── Types ────────────────────────────────────────────────────────────
 
 export interface CatalogPlan {