@lukoweb/apitogo 0.1.87 → 0.1.88

package/dist/cli/cli.js

@@ -815,7 +815,8 @@ var init_ModulesSchema = __esm({
       path: z3.string(),
       icon: z3.string().optional(),
       latency: z3.string().optional(),
-      summary: z3.string().optional()
+      summary: z3.string().optional(),
+      method: z3.string().optional()
     });
     LandingApiShowcaseSchema = z3.object({
       enabled: z3.boolean().optional(),
@@ -824,6 +825,7 @@ var init_ModulesSchema = __esm({
       browseAllHref: z3.string().optional(),
       browseAllLabel: z3.string().optional(),
       autoFromOpenApi: z3.boolean().optional(),
+      layout: z3.enum(["grid", "list"]).optional(),
       items: z3.array(LandingApiShowcaseItemSchema).optional()
     }).optional();
     LandingPricingCtaSchema = z3.object({
@@ -6257,7 +6259,7 @@ var SCAFFOLD_SUGGESTED_NEXT_STEPS = [
     prompt: "Design your home page?",
     tool: "get_dev_portal_landing_guide",
     optional: true,
-    note: "Ask the user for their real content (product, endpoints, audience, tone, sections) before editing landing/LandingPage.tsx \u2014 compose HeroSection, TrustSection, FeaturesSection, ApiShowcaseSection, and PricingCtaSection inside LandingShell."
+    note: "Ask the user for their real content (product, endpoints, audience, tone, sections) before editing landing/LandingPage.tsx \u2014 compose HeroSection, TrustSection, FeaturesSection, StepsSection, ApiShowcaseSection, PlansPreviewSection, and PricingCtaSection inside LandingShell."
   },
   {
     id: "addPlans",
@@ -12491,7 +12493,7 @@ import {
 // package.json
 var package_default = {
   name: "@lukoweb/apitogo",
-  version: "0.1.87",
+  version: "0.1.88",
   type: "module",
   sideEffects: [
     "**/*.css",
@@ -18428,8 +18430,7 @@ async function resolveCreateApitogoInvocation(options) {
   return {
     source: "npm",
     command: "npx",
-    args: [pkg],
-    warning: `Using ${pkg} via npx (downloads on first run if not cached). Set APITOGO_DOC_TOOL_PATH to scaffold from a local apitogo-doc-tool checkout.`
+    args: [pkg]
   };
 }
 function runCommand2(command, args, cwd) {
@@ -19000,44 +19001,52 @@ function createDefaultApitogoJsonConfig(options) {
     },
     theme: {
       fonts: {
-        sans: "IBM Plex Sans",
+        sans: "Inter",
         mono: "JetBrains Mono"
       },
       light: {
-        background: "#F5F6F9",
-        foreground: "#0E1016",
-        card: "#FFFFFF",
-        cardForeground: "#0E1016",
-        primary: "#E11D2A",
+        background: "#ffffff",
+        foreground: "#252b3b",
+        card: "#ffffff",
+        cardForeground: "#252b3b",
+        primary: "#0d9488",
         primaryForeground: "#ffffff",
-        secondary: "#FAFBFC",
-        secondaryForeground: "#0E1016",
-        muted: "#FAFBFC",
-        mutedForeground: "#565E70",
-        accent: "rgba(225, 29, 42, 0.08)",
-        accentForeground: "#E11D2A",
-        border: "#E6E8EF",
-        input: "#D6DAE3",
-        ring: "#E11D2A"
+        secondary: "#f4f6fb",
+        secondaryForeground: "#252b3b",
+        muted: "#e9edf5",
+        mutedForeground: "rgba(37, 43, 59, 0.55)",
+        accent: "rgba(13, 148, 136, 0.1)",
+        accentForeground: "#0d9488",
+        border: "#d9deea",
+        input: "#d9deea",
+        ring: "#0d9488"
       },
       dark: {
-        background: "#0B0D12",
-        foreground: "#EDEFF5",
-        card: "#14171F",
-        cardForeground: "#EDEFF5",
-        primary: "#F23645",
+        background: "#252b3b",
+        foreground: "#e9edf5",
+        card: "#2b3243",
+        cardForeground: "#e9edf5",
+        primary: "#0d9488",
         primaryForeground: "#ffffff",
-        secondary: "#191D27",
-        secondaryForeground: "#EDEFF5",
-        muted: "#191D27",
-        mutedForeground: "#A6AEBF",
-        accent: "rgba(242, 54, 69, 0.13)",
-        accentForeground: "#F23645",
-        border: "#252B37",
-        input: "#333A48",
-        ring: "#F23645"
+        secondary: "#1e2330",
+        secondaryForeground: "#e9edf5",
+        muted: "#1e2330",
+        mutedForeground: "rgba(217, 222, 234, 0.58)",
+        accent: "rgba(13, 148, 136, 0.12)",
+        accentForeground: "#0d9488",
+        border: "rgba(217, 222, 234, 0.18)",
+        input: "#323a4f",
+        ring: "#0d9488"
       }
     },
+    header: {
+      placements: { navigation: "center" },
+      navigation: [
+        { label: "Product", to: "/#features" },
+        { label: "Pricing", to: "/pricing" },
+        { label: "Docs", to: "/introduction" }
+      ]
+    },
     modules: {
       docs: {
         files: filesGlob
@@ -19046,15 +19055,80 @@ function createDefaultApitogoJsonConfig(options) {
         enabled: true,
         path: "/",
         layout: "landing",
-        page: "./landing/LandingPage.tsx"
+        page: "./landing/LandingPage.tsx",
+        content: {
+          footer: {
+            brand: {
+              name: "SampleAPI",
+              tagline: "A hosted sandbox API for prototypes, demos, and QA \u2014 realistic data, real auth, real limits."
+            },
+            columns: [
+              {
+                title: "Product",
+                links: [
+                  { label: "Overview", href: "/#features" },
+                  { label: "Pricing", href: "/pricing" },
+                  { label: "Documentation", href: "/introduction" }
+                ]
+              },
+              {
+                title: "Account",
+                links: [
+                  { label: "Log in", href: "/signin" },
+                  { label: "Get started", href: "/signup" },
+                  { label: "Dashboard", href: "/account/dashboard" }
+                ]
+              },
+              {
+                title: "Company",
+                links: [
+                  { label: "Contact", href: "#" },
+                  { label: "Terms", href: "#" },
+                  { label: "Privacy", href: "#" }
+                ]
+              }
+            ],
+            copyright: "\xA9 2026 Sample API"
+          }
+        }
       },
       userPanel: {
         enabled: true,
         dashboard: { enabled: true },
         userManagement: { enabled: true },
         plans: {
-          enabled: false,
-          page: "./user-panel/AccountPlansPage.tsx"
+          enabled: true,
+          page: "./user-panel/AccountPlansPage.tsx",
+          items: [
+            {
+              sku: "free",
+              displayName: "Free",
+              priceAmount: 0,
+              billingPeriod: "month",
+              limitsJson: '{"rateLimit":{"calls":10,"renewalPeriodSeconds":1},"quota":{"calls":1000,"renewalPeriodDays":30}}'
+            },
+            {
+              sku: "developer",
+              displayName: "Developer",
+              priceAmount: 19,
+              billingPeriod: "month",
+              limitsJson: '{"rateLimit":{"calls":50,"renewalPeriodSeconds":1},"quota":{"calls":50000,"renewalPeriodDays":30}}'
+            },
+            {
+              sku: "team",
+              displayName: "Team",
+              priceAmount: 79,
+              billingPeriod: "month",
+              limitsJson: '{"rateLimit":{"calls":200,"renewalPeriodSeconds":1},"quota":{"calls":500000,"renewalPeriodDays":30}}'
+            },
+            {
+              sku: "enterprise",
+              displayName: "Enterprise",
+              priceAmount: -1,
+              billingPeriod: "custom",
+              limitsJson: '{"quota":{"calls":-1}}'
+            }
+          ]
         }
       }
     }
@@ -19842,50 +19916,7 @@ async function ensureTsconfigJson(dir) {
     return true;
   }
 }
-var LANDING_PAGE_SOURCE = `import {
-  FeaturesSection,
-  HeroSection,
-  LandingShell,
-} from "@lukoweb/apitogo-module-landing";
-
-export default function LandingPage() {
-  return (
-    <LandingShell
-      title="Your API, ready for developers"
-      description="Documentation, API reference, and a developer portal \u2014 all in one place."
-    >
-      <HeroSection
-        hero={{
-          title: "Your API, ready for developers",
-          description:
-            "Ship docs, interactive API reference, and a developer portal without building from scratch.",
-        }}
-        primaryAction={{ label: "Get started", href: "/introduction" }}
-        secondaryAction={{ label: "API Reference", href: "/api" }}
-      />
-      <FeaturesSection
-        features={[
-          {
-            title: "Documentation",
-            description: "Guides and references for every integration path.",
-            icon: "book-open",
-          },
-          {
-            title: "API Reference",
-            description: "Interactive OpenAPI explorer with code samples.",
-            icon: "code",
-          },
-          {
-            title: "Developer Portal",
-            description: "Auth, API keys, and subscription billing built in.",
-            icon: "shield-check",
-          },
-        ]}
-      />
-    </LandingShell>
-  );
-}
-`;
+var LANDING_PAGE_SOURCE = 'import {\n  ApiShowcaseSection,\n  FeaturesSection,\n  HeroSection,\n  LandingShell,\n  PlansPreviewSection,\n  PricingCtaSection,\n  StepsSection,\n} from "@lukoweb/apitogo-module-landing";\n\nexport default function LandingPage() {\n  return (\n    <LandingShell\n      title="Test against a real API before you build one"\n      description="Sample API gives you realistic endpoints, authentication, rate limits, and webhooks \u2014 a fully working backend for prototypes, demos, and QA."\n    >\n      <HeroSection\n        hero={{\n          badge: "SANDBOX API",\n          title: "Test against a real API before you build one",\n          description:\n            "Sample API gives you realistic endpoints, authentication, rate limits, and webhooks \u2014 a fully working backend for prototypes, demos, and QA. No setup, no infrastructure.",\n        }}\n        primaryAction={{ label: "Start for free", href: "/signup" }}\n        secondaryAction={{ label: "Read the docs", href: "/introduction" }}\n        codeExamples={[\n          {\n            filename: "Create a key",\n            language: "bash",\n            code: `$ curl -X POST https://api.sampleapi.dev/v1/keys\n# sk_live_9f2c7a1e...`,\n          },\n          {\n            filename: "Call an endpoint",\n            language: "bash",\n            code: `$ curl https://api.sampleapi.dev/v1/users/42 \\\\\n  -H "Authorization: Bearer sk_live_9f2c..."\n# { "id": 42, "name": "Priya Shah", "plan": "pro" }`,\n          },\n        ]}\n      />\n      <FeaturesSection\n        section={{\n          label: "Everything a real API has",\n          title: "Built for testing, not just browsing",\n          description:\n            "Realistic data, live auth, rate limits, and webhooks \u2014 so you can ship with confidence.",\n        }}\n        features={[\n          {\n            title: "Realistic mock data",\n            description:\n              "Users, orders, products, and posts with relationships and pagination, not lorem ipsum.",\n            icon: "boxes",\n          },\n          {\n            title: "Real auth flow",\n            description:\n              "Every request checks a live API key, so you can test error handling and expiry.",\n            icon: "shield-check",\n          },\n          {\n            title: "Rate limiting",\n            description:\n              "Per-plan request limits and 429 responses, so you can build and test backoff logic.",\n            icon: "gauge",\n          },\n          {\n            title: "Webhooks",\n            description:\n              "Trigger test events and inspect delivered payloads and retries.",\n            icon: "webhook",\n          },\n          {\n            title: "OpenAPI & docs",\n            description:\n              "A full OpenAPI spec and reference docs for every endpoint.",\n            icon: "book-open",\n          },\n          {\n            title: "Usage analytics",\n            description:\n              "Track requests, latency, and errors per key from your dashboard.",\n            icon: "activity",\n          },\n        ]}\n      />\n      <StepsSection\n        steps={[\n          {\n            step: "01",\n            title: "Create an account",\n            description:\n              "Sign up and land straight in your dashboard \u2014 no approval queue.",\n          },\n          {\n            step: "02",\n            title: "Generate a key",\n            description:\n              "Every key is scoped and rate-limited to your plan from the moment it\'s created.",\n          },\n          {\n            step: "03",\n            title: "Call any endpoint",\n            description:\n              "Users, orders, products, posts, and webhooks \u2014 all documented, all live.",\n          },\n        ]}\n      />\n      <ApiShowcaseSection\n        apiShowcase={{\n          title: "Sample endpoints",\n          subtitle:\n            "A slice of what\'s available \u2014 see the full reference in the docs.",\n          browseAllHref: "/api",\n          browseAllLabel: "Browse all APIs",\n          layout: "list",\n          items: [\n            {\n              name: "List paginated users",\n              path: "/v1/users",\n              method: "GET",\n              summary: "List paginated users",\n            },\n            {\n              name: "Create a mock order",\n              path: "/v1/orders",\n              method: "POST",\n              summary: "Create a mock order",\n            },\n            {\n              name: "Fetch one product",\n              path: "/v1/products/{id}",\n              method: "GET",\n              summary: "Fetch one product",\n            },\n            {\n              name: "List posts with comments",\n              path: "/v1/posts",\n              method: "GET",\n              summary: "List posts with comments",\n            },\n            {\n              name: "Fire a test webhook event",\n              path: "/v1/webhooks/test",\n              method: "POST",\n              summary: "Fire a test webhook event",\n            },\n            {\n              name: "Delete a mock order",\n              path: "/v1/orders/{id}",\n              method: "DELETE",\n              summary: "Delete a mock order",\n            },\n          ],\n        }}\n      />\n      <PlansPreviewSection\n        plans={[\n          {\n            name: "Free",\n            price: "$0",\n            unit: "per month",\n            blurb: "1,000 requests/mo, community support.",\n          },\n          {\n            name: "Developer",\n            price: "$19",\n            unit: "per month",\n            blurb: "50,000 requests/mo, webhooks included.",\n            featured: true,\n          },\n          {\n            name: "Team",\n            price: "$79",\n            unit: "per month",\n            blurb: "500,000 requests/mo, 5 team seats.",\n          },\n          {\n            name: "Enterprise",\n            price: "Custom",\n            unit: "talk to us",\n            blurb: "Unlimited requests, SSO, SLA.",\n          },\n        ]}\n      />\n      <PricingCtaSection\n        variant="banner"\n        pricingCta={{\n          title: "Start testing in minutes",\n          description:\n            "Free tier includes 1,000 requests a month \u2014 no card required.",\n          primaryAction: { label: "Start for free", href: "/signup" },\n        }}\n      />\n    </LandingShell>\n  );\n}\n';
 var ACCOUNT_PLANS_PAGE_SOURCE = `export { AccountPlansPage as default } from "@lukoweb/apitogo-plugin-dev-portal-billing";
 `;
 var fileExists2 = async (filePath) => {

package/dist/declarations/config/landing-manifest.d.ts

@@ -44,12 +44,17 @@ export declare const LandingManifestContentSchema: z.ZodOptional<z.ZodObject<{
         browseAllHref: z.ZodOptional<z.ZodString>;
         browseAllLabel: z.ZodOptional<z.ZodString>;
         autoFromOpenApi: z.ZodOptional<z.ZodBoolean>;
+        layout: z.ZodOptional<z.ZodEnum<{
+            grid: "grid";
+            list: "list";
+        }>>;
         items: z.ZodOptional<z.ZodArray<z.ZodObject<{
             name: z.ZodString;
             path: z.ZodString;
             icon: z.ZodOptional<z.ZodString>;
             latency: z.ZodOptional<z.ZodString>;
             summary: z.ZodOptional<z.ZodString>;
+            method: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>>;
     }, z.core.$strip>>;
     pricingCta: z.ZodOptional<z.ZodObject<{

package/dist/declarations/config/local-manifest.d.ts

@@ -137,12 +137,17 @@ export declare const DevPortalLocalManifestSchema: z.ZodObject<{
                 browseAllHref: z.ZodOptional<z.ZodString>;
                 browseAllLabel: z.ZodOptional<z.ZodString>;
                 autoFromOpenApi: z.ZodOptional<z.ZodBoolean>;
+                layout: z.ZodOptional<z.ZodEnum<{
+                    grid: "grid";
+                    list: "list";
+                }>>;
                 items: z.ZodOptional<z.ZodArray<z.ZodObject<{
                     name: z.ZodString;
                     path: z.ZodString;
                     icon: z.ZodOptional<z.ZodString>;
                     latency: z.ZodOptional<z.ZodString>;
                     summary: z.ZodOptional<z.ZodString>;
+                    method: z.ZodOptional<z.ZodString>;
                 }, z.core.$strip>>>;
             }, z.core.$strip>>;
             pricingCta: z.ZodOptional<z.ZodObject<{

package/dist/declarations/config/validators/ModulesSchema.d.ts

@@ -63,6 +63,7 @@ export declare const LandingApiShowcaseItemSchema: z.ZodObject<{
     icon: z.ZodOptional<z.ZodString>;
     latency: z.ZodOptional<z.ZodString>;
     summary: z.ZodOptional<z.ZodString>;
+    method: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
 export declare const LandingApiShowcaseSchema: z.ZodOptional<z.ZodObject<{
     enabled: z.ZodOptional<z.ZodBoolean>;
@@ -71,12 +72,17 @@ export declare const LandingApiShowcaseSchema: z.ZodOptional<z.ZodObject<{
     browseAllHref: z.ZodOptional<z.ZodString>;
     browseAllLabel: z.ZodOptional<z.ZodString>;
     autoFromOpenApi: z.ZodOptional<z.ZodBoolean>;
+    layout: z.ZodOptional<z.ZodEnum<{
+        grid: "grid";
+        list: "list";
+    }>>;
     items: z.ZodOptional<z.ZodArray<z.ZodObject<{
         name: z.ZodString;
         path: z.ZodString;
         icon: z.ZodOptional<z.ZodString>;
         latency: z.ZodOptional<z.ZodString>;
         summary: z.ZodOptional<z.ZodString>;
+        method: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
 }, z.core.$strip>>;
 export declare const LandingPricingCtaSchema: z.ZodOptional<z.ZodObject<{
@@ -174,12 +180,17 @@ export declare const LandingContentSchema: z.ZodOptional<z.ZodObject<{
         browseAllHref: z.ZodOptional<z.ZodString>;
         browseAllLabel: z.ZodOptional<z.ZodString>;
         autoFromOpenApi: z.ZodOptional<z.ZodBoolean>;
+        layout: z.ZodOptional<z.ZodEnum<{
+            grid: "grid";
+            list: "list";
+        }>>;
         items: z.ZodOptional<z.ZodArray<z.ZodObject<{
             name: z.ZodString;
             path: z.ZodString;
             icon: z.ZodOptional<z.ZodString>;
             latency: z.ZodOptional<z.ZodString>;
             summary: z.ZodOptional<z.ZodString>;
+            method: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>>;
     }, z.core.$strip>>;
     pricingCta: z.ZodOptional<z.ZodObject<{
@@ -303,12 +314,17 @@ export declare const LandingModuleSchema: z.ZodObject<{
             browseAllHref: z.ZodOptional<z.ZodString>;
             browseAllLabel: z.ZodOptional<z.ZodString>;
             autoFromOpenApi: z.ZodOptional<z.ZodBoolean>;
+            layout: z.ZodOptional<z.ZodEnum<{
+                grid: "grid";
+                list: "list";
+            }>>;
             items: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 name: z.ZodString;
                 path: z.ZodString;
                 icon: z.ZodOptional<z.ZodString>;
                 latency: z.ZodOptional<z.ZodString>;
                 summary: z.ZodOptional<z.ZodString>;
+                method: z.ZodOptional<z.ZodString>;
             }, z.core.$strip>>>;
         }, z.core.$strip>>;
         pricingCta: z.ZodOptional<z.ZodObject<{
@@ -553,12 +569,17 @@ export declare const ModulesSchema: z.ZodOptional<z.ZodObject<{
                 browseAllHref: z.ZodOptional<z.ZodString>;
                 browseAllLabel: z.ZodOptional<z.ZodString>;
                 autoFromOpenApi: z.ZodOptional<z.ZodBoolean>;
+                layout: z.ZodOptional<z.ZodEnum<{
+                    grid: "grid";
+                    list: "list";
+                }>>;
                 items: z.ZodOptional<z.ZodArray<z.ZodObject<{
                     name: z.ZodString;
                     path: z.ZodString;
                     icon: z.ZodOptional<z.ZodString>;
                     latency: z.ZodOptional<z.ZodString>;
                     summary: z.ZodOptional<z.ZodString>;
+                    method: z.ZodOptional<z.ZodString>;
                 }, z.core.$strip>>>;
             }, z.core.$strip>>;
             pricingCta: z.ZodOptional<z.ZodObject<{

package/dist/declarations/config/validators/ZudokuConfig.d.ts

@@ -6933,12 +6933,17 @@ export declare const ZudokuConfig: z.ZodObject<{
                     browseAllHref: z.ZodOptional<z.ZodString>;
                     browseAllLabel: z.ZodOptional<z.ZodString>;
                     autoFromOpenApi: z.ZodOptional<z.ZodBoolean>;
+                    layout: z.ZodOptional<z.ZodEnum<{
+                        grid: "grid";
+                        list: "list";
+                    }>>;
                     items: z.ZodOptional<z.ZodArray<z.ZodObject<{
                         name: z.ZodString;
                         path: z.ZodString;
                         icon: z.ZodOptional<z.ZodString>;
                         latency: z.ZodOptional<z.ZodString>;
                         summary: z.ZodOptional<z.ZodString>;
+                        method: z.ZodOptional<z.ZodString>;
                     }, z.core.$strip>>>;
                 }, z.core.$strip>>;
                 pricingCta: z.ZodOptional<z.ZodObject<{

package/dist/flat-config.d.ts

@@ -575,12 +575,14 @@ export interface _Schema21 {
     browseAllHref?: string
     browseAllLabel?: string
     autoFromOpenApi?: boolean
+    layout?: ("grid" | "list")
     items?: {
       name: string
       path: string
       icon?: string
       latency?: string
       summary?: string
+      method?: string
     }[]
   }
   pricingCta?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo",
-  "version": "0.1.87",
+  "version": "0.1.88",
   "type": "module",
   "sideEffects": [
     "**/*.css",

package/src/app/apitogoBrandTheme.ts

@@ -3,44 +3,45 @@ import type { ZudokuConfig } from "../config/validators/ZudokuConfig.js";
 /**
  * APIToGo brand theme for per-site overrides via apitogo.config.
  * Keep in sync with defaultTheme.css (full palette including sidebar/chart tokens).
+ * Sourced from Sample-API-Website-UI (teal brand + navy/mist surfaces).
  */
 export const apitogoBrandTheme: NonNullable<ZudokuConfig["theme"]> = {
   fonts: {
-    sans: "IBM Plex Sans",
+    sans: "Inter",
     mono: "JetBrains Mono",
   },
   light: {
-    background: "#F5F6F9",
-    foreground: "#0E1016",
-    card: "#FFFFFF",
-    cardForeground: "#0E1016",
-    primary: "#E11D2A",
+    background: "#ffffff",
+    foreground: "#252b3b",
+    card: "#ffffff",
+    cardForeground: "#252b3b",
+    primary: "#0d9488",
     primaryForeground: "#ffffff",
-    secondary: "#FAFBFC",
-    secondaryForeground: "#0E1016",
-    muted: "#FAFBFC",
-    mutedForeground: "#565E70",
-    accent: "rgba(225, 29, 42, 0.08)",
-    accentForeground: "#E11D2A",
-    border: "#E6E8EF",
-    input: "#D6DAE3",
-    ring: "#E11D2A",
+    secondary: "#f4f6fb",
+    secondaryForeground: "#252b3b",
+    muted: "#e9edf5",
+    mutedForeground: "rgba(37, 43, 59, 0.55)",
+    accent: "rgba(13, 148, 136, 0.1)",
+    accentForeground: "#0d9488",
+    border: "#d9deea",
+    input: "#d9deea",
+    ring: "#0d9488",
   },
   dark: {
-    background: "#0B0D12",
-    foreground: "#EDEFF5",
-    card: "#14171F",
-    cardForeground: "#EDEFF5",
-    primary: "#F23645",
+    background: "#252b3b",
+    foreground: "#e9edf5",
+    card: "#2b3243",
+    cardForeground: "#e9edf5",
+    primary: "#0d9488",
     primaryForeground: "#ffffff",
-    secondary: "#191D27",
-    secondaryForeground: "#EDEFF5",
-    muted: "#191D27",
-    mutedForeground: "#A6AEBF",
-    accent: "rgba(242, 54, 69, 0.13)",
-    accentForeground: "#F23645",
-    border: "#252B37",
-    input: "#333A48",
-    ring: "#F23645",
+    secondary: "#1e2330",
+    secondaryForeground: "#e9edf5",
+    muted: "#1e2330",
+    mutedForeground: "rgba(217, 222, 234, 0.58)",
+    accent: "rgba(13, 148, 136, 0.12)",
+    accentForeground: "#0d9488",
+    border: "rgba(217, 222, 234, 0.18)",
+    input: "#323a4f",
+    ring: "#0d9488",
   },
 };

package/src/app/defaultTheme.css

@@ -1,77 +1,77 @@
 /**
  * Default APIToGo brand theme for scaffolded sites.
- * Color tokens sourced from webapp-template/APIToGo.dc.html (:root dark + light override).
+ * Color tokens sourced from Sample-API-Website-UI (teal brand + navy/mist surfaces).
  */
 
 :root {
   --radius: 0.625rem;
-  --background: #f5f6f9;
-  --foreground: #0e1016;
+  --background: #ffffff;
+  --foreground: #252b3b;
   --card: #ffffff;
-  --card-foreground: #0e1016;
+  --card-foreground: #252b3b;
   --popover: #ffffff;
-  --popover-foreground: #0e1016;
-  --primary: #e11d2a;
+  --popover-foreground: #252b3b;
+  --primary: #0d9488;
   --primary-foreground: #ffffff;
-  --secondary: #fafbfc;
-  --secondary-foreground: #0e1016;
-  --muted: #fafbfc;
-  --muted-foreground: #565e70;
-  --accent: rgba(225, 29, 42, 0.08);
-  --accent-foreground: #e11d2a;
-  --destructive: #e11d2a;
+  --secondary: #f4f6fb;
+  --secondary-foreground: #252b3b;
+  --muted: #e9edf5;
+  --muted-foreground: rgba(37, 43, 59, 0.55);
+  --accent: rgba(13, 148, 136, 0.1);
+  --accent-foreground: #0d9488;
+  --destructive: #e02424;
   --warning: oklch(0.84 0.16 84);
   --warning-foreground: oklch(0.47 0.14 46.2);
-  --border: #e6e8ef;
-  --input: #d6dae3;
-  --ring: #e11d2a;
-  --chart-1: #e11d2a;
-  --chart-2: #0e9e63;
-  --chart-3: #4e5ac0;
-  --chart-4: #8a92a3;
-  --chart-5: #565e70;
+  --border: #d9deea;
+  --input: #d9deea;
+  --ring: #0d9488;
+  --chart-1: #0d9488;
+  --chart-2: #0e9f6e;
+  --chart-3: #3f83f8;
+  --chart-4: #8b95af;
+  --chart-5: #454e66;
   --sidebar: #ffffff;
-  --sidebar-foreground: #0e1016;
-  --sidebar-primary: #e11d2a;
+  --sidebar-foreground: #252b3b;
+  --sidebar-primary: #0d9488;
   --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #fafbfc;
-  --sidebar-accent-foreground: #0e1016;
-  --sidebar-border: #e6e8ef;
-  --sidebar-ring: #e11d2a;
+  --sidebar-accent: #f4f6fb;
+  --sidebar-accent-foreground: #252b3b;
+  --sidebar-border: #d9deea;
+  --sidebar-ring: #0d9488;
 }
 
 .dark {
-  --background: #0b0d12;
-  --foreground: #edeff5;
-  --card: #14171f;
-  --card-foreground: #edeff5;
-  --popover: #1d222d;
-  --popover-foreground: #edeff5;
-  --primary: #f23645;
+  --background: #252b3b;
+  --foreground: #e9edf5;
+  --card: #2b3243;
+  --card-foreground: #e9edf5;
+  --popover: #2b3243;
+  --popover-foreground: #e9edf5;
+  --primary: #0d9488;
   --primary-foreground: #ffffff;
-  --secondary: #191d27;
-  --secondary-foreground: #edeff5;
-  --muted: #191d27;
-  --muted-foreground: #a6aebf;
-  --accent: rgba(242, 54, 69, 0.13);
-  --accent-foreground: #f23645;
-  --destructive: #f23645;
+  --secondary: #1e2330;
+  --secondary-foreground: #e9edf5;
+  --muted: #1e2330;
+  --muted-foreground: rgba(217, 222, 234, 0.58);
+  --accent: rgba(13, 148, 136, 0.12);
+  --accent-foreground: #0d9488;
+  --destructive: #e02424;
   --warning: oklch(0.41 0.11 46);
   --warning-foreground: oklch(0.99 0.02 95);
-  --border: #252b37;
-  --input: #333a48;
-  --ring: #f23645;
-  --chart-1: #f23645;
-  --chart-2: #16c784;
-  --chart-3: #aeb9e8;
-  --chart-4: #6b7385;
-  --chart-5: #a6aebf;
-  --sidebar: #0e1119;
-  --sidebar-foreground: #edeff5;
-  --sidebar-primary: #f23645;
+  --border: rgba(217, 222, 234, 0.18);
+  --input: #323a4f;
+  --ring: #0d9488;
+  --chart-1: #0d9488;
+  --chart-2: #0e9f6e;
+  --chart-3: #3f83f8;
+  --chart-4: #8b95af;
+  --chart-5: #b9c1d6;
+  --sidebar: #1e2330;
+  --sidebar-foreground: #e9edf5;
+  --sidebar-primary: #0d9488;
   --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #191d27;
-  --sidebar-accent-foreground: #edeff5;
-  --sidebar-border: #252b37;
-  --sidebar-ring: #f23645;
+  --sidebar-accent: #252b3b;
+  --sidebar-accent-foreground: #e9edf5;
+  --sidebar-border: rgba(217, 222, 234, 0.18);
+  --sidebar-ring: #0d9488;
 }

package/src/config/validators/ModulesSchema.ts

@@ -94,6 +94,7 @@ export const LandingApiShowcaseItemSchema = z.object({
   icon: z.string().optional(),
   latency: z.string().optional(),
   summary: z.string().optional(),
+  method: z.string().optional(),
 });
 
 export const LandingApiShowcaseSchema = z
@@ -104,6 +105,7 @@ export const LandingApiShowcaseSchema = z
     browseAllHref: z.string().optional(),
     browseAllLabel: z.string().optional(),
     autoFromOpenApi: z.boolean().optional(),
+    layout: z.enum(["grid", "list"]).optional(),
     items: z.array(LandingApiShowcaseItemSchema).optional(),
   })
   .optional();

package/src/lib/authentication/providers/dev-portal-auth-pages.tsx

@@ -1,4 +1,5 @@
 import { Spinner } from "@lukoweb/apitogo/components";
+import { Badge } from "@lukoweb/apitogo/ui/Badge.js";
 import { Button } from "@lukoweb/apitogo/ui/Button.js";
 import {
   Card,
@@ -9,7 +10,7 @@ import {
 } from "@lukoweb/apitogo/ui/Card.js";
 import { Input } from "@lukoweb/apitogo/ui/Input.js";
 import { Label } from "@lukoweb/apitogo/ui/Label.js";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, type ReactNode } from "react";
 import { Link, useSearchParams } from "react-router";
 import type { DevPortalAuthConfigResponse } from "./dev-portal-constants.js";
 import {
@@ -31,20 +32,31 @@ import {
 type AuthPageShellProps = {
   title: string;
   description?: string;
-  children: React.ReactNode;
+  badge?: ReactNode;
+  children: ReactNode;
 };
 
-function AuthPageShell({ title, description, children }: AuthPageShellProps) {
+function AuthPageShell({
+  title,
+  description,
+  badge,
+  children,
+}: AuthPageShellProps) {
   return (
-    <div className="flex items-center justify-center mt-8 px-4">
-      <Card className="max-w-md w-full">
-        <CardHeader>
-          <CardTitle className="text-lg">{title}</CardTitle>
+    <div className="flex items-center justify-center bg-muted px-5 py-10">
+      <Card className="w-full max-w-md gap-0 bg-card py-8">
+        <CardHeader className="gap-0 px-8 pb-0">
+          {badge ? <div className="mb-3.5">{badge}</div> : null}
+          <CardTitle className="text-2xl font-bold tracking-tight">
+            {title}
+          </CardTitle>
           {description ? (
-            <CardDescription>{description}</CardDescription>
+            <CardDescription className="mt-1 mb-[22px] text-sm">
+              {description}
+            </CardDescription>
           ) : null}
         </CardHeader>
-        <CardContent className="space-y-4">{children}</CardContent>
+        <CardContent className="space-y-4 px-8">{children}</CardContent>
       </Card>
     </div>
   );
@@ -349,7 +361,7 @@ export function DevPortalRegisterPage({
   if (!baseUrl) {
     return (
       <AuthPageShell
-        title="Create account"
+        title="Create your account"
         description="Dev portal API is not configured."
       >
         <p className="text-sm text-muted-foreground">
@@ -361,16 +373,17 @@ export function DevPortalRegisterPage({
 
   return (
     <AuthPageShell
-      title="Create account"
-      description="Register for API access."
+      title="Create your account"
     >
-      <form className="space-y-4" onSubmit={onSubmit}>
+      <form className="flex flex-col gap-4" onSubmit={onSubmit}>
         <div className="space-y-2">
-          <Label htmlFor="displayName">Name</Label>
+          <Label htmlFor="displayName">Full name</Label>
           <Input
             id="displayName"
+            placeholder="Priya Shah"
             value={displayName}
             onChange={(event) => setDisplayName(event.target.value)}
+            className="h-10"
           />
         </div>
         <div className="space-y-2">
@@ -379,9 +392,11 @@ export function DevPortalRegisterPage({
             id="email"
             type="email"
             autoComplete="email"
+            placeholder="you@company.com"
             value={email}
             onChange={(event) => setEmail(event.target.value)}
             required
+            className="h-10"
           />
         </div>
         <div className="space-y-2">
@@ -390,24 +405,36 @@ export function DevPortalRegisterPage({
             id="password"
             type="password"
             autoComplete="new-password"
+            placeholder="••••••••"
             value={password}
             onChange={(event) => setPassword(event.target.value)}
             required
+            className="h-10"
           />
+          <p className="text-xs text-muted-foreground">At least 8 characters</p>
         </div>
         <AuthError message={error} />
         {message ? (
           <p className="text-sm text-muted-foreground">{message}</p>
         ) : null}
-        <Button type="submit" className="w-full" disabled={pending}>
+        <Button
+          type="submit"
+          size="lg"
+          className="h-12 w-full text-base"
+          disabled={pending}
+        >
           {pending ? <Spinner /> : "Create account"}
         </Button>
-        <p className="text-sm text-center">
+        <p className="text-xs leading-relaxed text-muted-foreground">
+          By creating an account you agree to our Terms and Privacy Policy.
+        </p>
+        <p className="text-sm text-muted-foreground">
+          Already have an account?{" "}
           <Link
-            className="text-primary hover:underline"
+            className="font-semibold text-primary no-underline hover:underline"
             to={`/login?redirect=${encodeURIComponent(returnUrl)}`}
           >
-            Back to sign in
+            Log in
           </Link>
         </p>
       </form>

package/src/lib/components/Header.tsx

@@ -148,6 +148,7 @@ export const Header = memo(function HeaderInner() {
   const authPlacement = header?.placements?.auth ?? "end";
   const authPosition =
     authPlacement === "navigation" ? navPosition : authPlacement;
+  const hasMarketingHeaderNav = (header?.navigation?.length ?? 0) > 0;
 
   const logoLightSrc = site?.logo
     ? /https?:\/\//.test(site.logo.src.light)
@@ -206,11 +207,13 @@ export const Header = memo(function HeaderInner() {
               </div>
             </Link>
             <Slot.Target name="head-navigation-start" />
-            <div className="hidden lg:flex min-w-0 items-center ml-2">
-              <Slot.Target name="top-navigation-before" />
-              <TopNavigation />
-              <Slot.Target name="top-navigation-after" />
-            </div>
+            {!hasMarketingHeaderNav ? (
+              <div className="hidden lg:flex min-w-0 items-center ml-2">
+                <Slot.Target name="top-navigation-before" />
+                <TopNavigation />
+                <Slot.Target name="top-navigation-after" />
+              </div>
+            ) : null}
             {searchPosition === "start" && (
               <Search className="hidden lg:flex" />
             )}

package/src/lib/components/HeaderAuthActions.tsx

@@ -1,5 +1,4 @@
 import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import { ArrowRightIcon } from "lucide-react";
 import { useAuth } from "../authentication/hook.js";
 import { cn } from "../util/cn.js";
 
@@ -15,19 +14,18 @@ export const HeaderAuthActions = ({ className }: { className?: string }) => {
     <div className={cn("hidden lg:flex items-center gap-2.5", className)}>
       <Button
         variant="ghost"
-        size="lg"
+        size="sm"
         className="font-semibold text-foreground hover:text-primary px-3"
         onClick={() => void auth.login()}
       >
-        Sign in
+        Log in
       </Button>
       <Button
-        size="lg"
-        className="gap-1.5 rounded-[9px] px-4 font-semibold shadow-[0_4px_14px_-4px] shadow-primary/30"
+        size="sm"
+        className="rounded-[9px] px-4 font-semibold shadow-[0_4px_14px_-4px] shadow-primary/30"
         onClick={() => void auth.signup()}
       >
-        Start free
-        <ArrowRightIcon size={15} strokeWidth={2} />
+        Get started
       </Button>
     </div>
   );

package/src/lib/components/Layout.tsx

@@ -4,7 +4,10 @@ import { Outlet } from "react-router";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
-import { useZudoku } from "./context/ZudokuContext.js";
+import {
+  useCurrentNavigation,
+  useZudoku,
+} from "./context/ZudokuContext.js";
 import { Footer } from "./Footer.js";
 import { Header } from "./Header.js";
 import { Main } from "./Main.js";
@@ -19,6 +22,8 @@ const LoadingFallback = () => (
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const { authentication } = useZudoku();
+  const { navigation } = useCurrentNavigation();
+  const hasSideNav = navigation.length > 0;
 
   useScrollToAnchor();
   useScrollToTop();
@@ -38,9 +43,13 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
 
       <div
         className={cn(
-          "grid max-w-screen-2xl w-full lg:mx-auto",
-          "[&:has(>:only-child)]:grid-rows-1 grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr]",
-          "grid-cols-1 lg:grid-cols-[var(--side-nav-width)_1fr]",
+          "grid w-full",
+          // Docs shell: cap width + reserve side-nav column.
+          // Marketing pages (no side nav): full-bleed so section backgrounds
+          // and compare/FAQ bands can span the viewport.
+          hasSideNav
+            ? "max-w-screen-2xl lg:mx-auto grid-rows-[0_min-content_1fr] lg:grid-rows-[min-content_1fr] grid-cols-1 lg:grid-cols-[var(--side-nav-width)_1fr]"
+            : "grid-cols-1 grid-rows-1",
         )}
       >
         <Suspense fallback={<LoadingFallback />}>

package/src/lib/components/Main.tsx

@@ -37,8 +37,9 @@ export const Main = ({ children }: PropsWithChildren) => {
       <main
         data-pagefind-body
         className={cn(
-          "px-4 lg:pe-8 lg:px-8",
-          !hasNavigation && "col-span-full",
+          // Docs: gutter so content clears the side nav.
+          // Marketing: no shell padding — pages own section px / full-bleed bands.
+          hasNavigation ? "px-4 lg:pe-8 lg:px-8" : "col-span-full px-0",
           isNavigating && "animate-pulse",
         )}
       >

package/src/lib/components/MobileTopNavigation.tsx

@@ -3,7 +3,6 @@ import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { deepEqual } from "fast-equals";
 import {
-  ArrowRightIcon,
   ChevronDownIcon,
   LogOutIcon,
   MenuIcon,
@@ -258,17 +257,15 @@ export const MobileTopNavigation = () => {
                         void login();
                       }}
                     >
-                      Sign in
+                      Log in
                     </Button>
                     <Button
-                      className="gap-1.5"
                       onClick={() => {
                         setDrawerOpen(false);
                         void signup();
                       }}
                     >
-                      Start free
-                      <ArrowRightIcon size={15} strokeWidth={2} />
+                      Get started
                     </Button>
                   </div>
                 ))}

package/src/lib/components/ThemeSwitch.tsx

@@ -1,18 +1,25 @@
-import { MoonIcon, SunIcon } from "lucide-react";
+import { MoonIcon, MonitorIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { focusRing } from "../ui/util.js";
 import { cn } from "../util/cn.js";
 import { useIsClient } from "./ClientOnly.js";
 
+const COMPACT_OPTIONS = [
+  { value: "light", label: "Light", Icon: SunIcon },
+  { value: "dark", label: "Dark", Icon: MoonIcon },
+  { value: "system", label: "System", Icon: MonitorIcon },
+] as const;
+
 export const ThemeSwitch = ({
   variant = "default",
 }: {
   variant?: "default" | "compact";
 }) => {
-  const { resolvedTheme, setTheme } = useTheme();
+  const { theme, resolvedTheme, setTheme } = useTheme();
   const isClient = useIsClient();
 
-  const theme = isClient ? resolvedTheme : undefined;
+  const activeTheme = isClient ? resolvedTheme : undefined;
+  const selectedMode = isClient ? (theme ?? "system") : "system";
 
   const handleThemeToggle = () => {
     setTheme(resolvedTheme === "dark" ? "light" : "dark");
@@ -20,27 +27,36 @@ export const ThemeSwitch = ({
 
   if (variant === "compact") {
     return (
-      <button
-        type="button"
+      <div
+        role="group"
+        aria-label="Theme"
         className={cn(
-          "grid size-[38px] place-items-center rounded-[9px] border border-border text-muted-foreground transition-colors hover:border-border hover:text-foreground",
+          "inline-flex h-8 items-center gap-0.5 rounded-[9px] border border-border bg-muted/40 p-0.5",
           focusRing,
         )}
-        onClick={handleThemeToggle}
-        aria-label={
-          !isClient
-            ? "Toggle theme"
-            : theme === "dark"
-              ? "Switch to light mode"
-              : "Switch to dark mode"
-        }
       >
-        {!isClient || theme === "dark" ? (
-          <SunIcon size={17} strokeWidth={1.8} />
-        ) : (
-          <MoonIcon size={17} strokeWidth={1.8} />
-        )}
-      </button>
+        {COMPACT_OPTIONS.map(({ value, label, Icon }) => {
+          const selected = selectedMode === value;
+          return (
+            <button
+              key={value}
+              type="button"
+              className={cn(
+                "grid size-7 place-items-center rounded-[7px] text-muted-foreground transition-colors",
+                selected
+                  ? "bg-card text-foreground shadow-xs"
+                  : "hover:text-foreground",
+              )}
+              onClick={() => setTheme(value)}
+              aria-label={label}
+              aria-pressed={selected}
+              title={label}
+            >
+              <Icon size={14} strokeWidth={1.8} />
+            </button>
+          );
+        })}
+      </div>
     );
   }
 
@@ -52,7 +68,7 @@ export const ThemeSwitch = ({
       aria-label={
         !isClient
           ? "Toggle theme"
-          : theme === "dark"
+          : activeTheme === "dark"
             ? "Switch to light mode"
             : "Switch to dark mode"
       }
@@ -60,8 +76,8 @@ export const ThemeSwitch = ({
       <div
         className={cn(
           "rounded-full p-0.5 border border-transparent [&>svg>circle]:transition-colors [&>svg>path]:transition-transform transition-all [&>svg>path]:duration-200 [&>svg>circle]:duration-500 [&>svg>circle]:fill-transparent",
-          theme === "light" && "border-border bg-muted",
-          theme === "dark" &&
+          activeTheme === "light" && "border-border bg-muted",
+          activeTheme === "dark" &&
             "group-hover:[&>svg>path]:scale-110 group-hover:[&>svg>path]:-translate-x-px group-hover:[&>svg>path]:-translate-y-px group-hover:rotate-15",
         )}
       >
@@ -70,9 +86,9 @@ export const ThemeSwitch = ({
       <div
         className={cn(
           "rounded-full p-0.5 border border-transparent transition-transform transform-gpu duration-500",
-          theme === "dark" &&
+          activeTheme === "dark" &&
             "border-border bg-muted [&>svg>path]:fill-white [&>svg>path]:stroke-transparent",
-          theme === "light" &&
+          activeTheme === "light" &&
             "group-hover:rotate-[-10deg] [&>svg>path]:stroke-currentColor",
         )}
       >