@lukoweb/apitogo-module-landing 0.1.87 → 0.1.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-module-landing",
-  "version": "0.1.87",
+  "version": "0.1.88",
   "type": "module",
   "exports": {
     ".": "./src/index.tsx"
@@ -14,7 +14,7 @@
   "devDependencies": {
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@lukoweb/apitogo": "0.1.87",
+    "@lukoweb/apitogo": "0.1.88",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "typescript": "5.9.3"

package/src/index.tsx

@@ -12,8 +12,18 @@ export { TrustSection } from "./sections/TrustSection.js";
 export type { TrustSectionProps } from "./sections/TrustSection.js";
 export { FeaturesSection } from "./sections/FeaturesSection.js";
 export type { FeaturesSectionProps } from "./sections/FeaturesSection.js";
+export { StepsSection } from "./sections/StepsSection.js";
+export type {
+  StepsSectionProps,
+  StepsSectionStep,
+} from "./sections/StepsSection.js";
 export { ApiShowcaseSection } from "./sections/ApiShowcaseSection.js";
 export type { ApiShowcaseSectionProps } from "./sections/ApiShowcaseSection.js";
+export { PlansPreviewSection } from "./sections/PlansPreviewSection.js";
+export type {
+  PlansPreviewPlan,
+  PlansPreviewSectionProps,
+} from "./sections/PlansPreviewSection.js";
 export { PricingCtaSection } from "./sections/PricingCtaSection.js";
 export type { PricingCtaSectionProps } from "./sections/PricingCtaSection.js";
 export { FooterSection } from "./sections/FooterSection.js";

package/src/sections/ApiShowcaseSection.tsx

@@ -1,11 +1,25 @@
 import type { ResolvedLandingContent } from "@lukoweb/apitogo";
+import { cn } from "@lukoweb/apitogo";
 import { Link } from "@lukoweb/apitogo/components";
 import { Button } from "@lukoweb/apitogo/ui/Button.js";
 import { ArrowRightIcon } from "lucide-react";
 import { LandingIcon } from "./LandingIcon.js";
 
 export type ApiShowcaseSectionProps = {
-  apiShowcase: NonNullable<ResolvedLandingContent["apiShowcase"]>;
+  apiShowcase: NonNullable<ResolvedLandingContent["apiShowcase"]> & {
+    layout?: "grid" | "list";
+  };
+};
+
+const methodTone = (method?: string) => {
+  const m = (method ?? "").toUpperCase();
+  if (m === "POST" || m === "PUT" || m === "PATCH") {
+    return "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300";
+  }
+  if (m === "DELETE") {
+    return "bg-red-50 text-red-600 dark:bg-red-500/15 dark:text-red-300";
+  }
+  return "bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300";
 };
 
 export const ApiShowcaseSection = ({
@@ -18,15 +32,18 @@ export const ApiShowcaseSection = ({
 
   const browseHref = apiShowcase.browseAllHref ?? "/api";
   const browseLabel = apiShowcase.browseAllLabel ?? "Browse all APIs";
+  const layout = apiShowcase.layout ?? "grid";
 
   return (
-    <section className="border-y border-border bg-muted/30">
+    <section className="border-y border-border bg-background">
       <div className="mx-auto max-w-[1200px] px-6 py-[3.75rem]">
         <div className="mb-8 flex flex-wrap items-end justify-between gap-5">
           <div>
-            <p className="mb-3 font-mono text-[0.8125rem] font-semibold text-primary">
-              {"// the catalog"}
-            </p>
+            {layout === "grid" ? (
+              <p className="mb-3 font-mono text-[0.8125rem] font-semibold text-primary">
+                {"// the catalog"}
+              </p>
+            ) : null}
             <h2 className="text-[2.125rem] leading-tight font-bold tracking-[-0.025em]">
               {apiShowcase.title ?? "Production APIs. One key."}
             </h2>
@@ -44,32 +61,70 @@ export const ApiShowcaseSection = ({
           </Button>
         </div>
 
-        <div className="grid gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
-          {items.map((item) => (
-            <Link
-              key={`${item.name}-${item.path}`}
-              to={browseHref}
-              className="block rounded-[13px] border border-border bg-card p-[1.125rem] text-foreground no-underline transition-[border-color,transform] hover:-translate-y-0.5 hover:border-muted-foreground/30"
-            >
-              <div className="mb-3.5 flex items-center justify-between">
-                <div className="grid size-9 place-items-center rounded-[9px] border border-border bg-muted/40 text-primary">
-                  <LandingIcon name={item.icon ?? "boxes"} size={18} />
-                </div>
-                {item.latency ? (
-                  <span className="rounded-md bg-primary/10 px-[0.4375rem] py-[0.1875rem] font-mono text-[0.6875rem] font-semibold text-primary">
-                    {item.latency}
+        {layout === "list" ? (
+          <div className="overflow-hidden rounded-[14px] border border-border bg-card">
+            {items.map((item, index) => {
+              const method =
+                "method" in item && typeof item.method === "string"
+                  ? item.method
+                  : undefined;
+              const description = item.summary ?? item.name;
+              return (
+                <div
+                  key={`${item.name}-${item.path}`}
+                  className={cn(
+                    "flex flex-wrap items-center gap-3.5 px-5 py-3.5",
+                    index < items.length - 1 && "border-b border-border",
+                  )}
+                >
+                  {method ? (
+                    <span
+                      className={cn(
+                        "min-w-14 rounded-[5px] px-2 py-0.5 text-center font-mono text-[11px] font-bold",
+                        methodTone(method),
+                      )}
+                    >
+                      {method.toUpperCase()}
+                    </span>
+                  ) : null}
+                  <code className="flex-1 font-mono text-[0.84375rem] text-foreground">
+                    {item.path}
+                  </code>
+                  <span className="text-[0.8125rem] text-muted-foreground">
+                    {description}
                   </span>
-                ) : null}
-              </div>
-              <h3 className="mb-1 text-[0.9375rem] font-semibold">
-                {item.name}
-              </h3>
-              <p className="font-mono text-[0.71875rem] text-muted-foreground/70">
-                {item.path}
-              </p>
-            </Link>
-          ))}
-        </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="grid gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
+            {items.map((item) => (
+              <Link
+                key={`${item.name}-${item.path}`}
+                to={browseHref}
+                className="block rounded-[13px] border border-border bg-card p-[1.125rem] text-foreground no-underline transition-[border-color,transform] hover:-translate-y-0.5 hover:border-muted-foreground/30"
+              >
+                <div className="mb-3.5 flex items-center justify-between">
+                  <div className="grid size-9 place-items-center rounded-[9px] border border-border bg-muted/40 text-primary">
+                    <LandingIcon name={item.icon ?? "boxes"} size={18} />
+                  </div>
+                  {item.latency ? (
+                    <span className="rounded-md bg-primary/10 px-[0.4375rem] py-[0.1875rem] font-mono text-[0.6875rem] font-semibold text-primary">
+                      {item.latency}
+                    </span>
+                  ) : null}
+                </div>
+                <h3 className="mb-1 text-[0.9375rem] font-semibold">
+                  {item.name}
+                </h3>
+                <p className="font-mono text-[0.71875rem] text-muted-foreground/70">
+                  {item.path}
+                </p>
+              </Link>
+            ))}
+          </div>
+        )}
       </div>
     </section>
   );

package/src/sections/FeaturesSection.tsx

@@ -21,7 +21,7 @@ export const FeaturesSection = ({
     "Skip the infra. Focus on your product while your developer portal handles docs, auth, and billing.";
 
   return (
-    <section className="mx-auto max-w-[1200px] px-6 py-10 pb-16">
+    <section id="features" className="mx-auto max-w-[1200px] px-6 py-10 pb-16">
       <div className="mb-11 max-w-[640px]">
         <p className="mb-3 font-mono text-[0.8125rem] font-semibold text-primary">
           {label}

package/src/sections/FooterSection.tsx

@@ -98,8 +98,19 @@ export const FooterSection = ({ footer }: FooterSectionProps) => {
                 />
               ) : (
                 <span className="text-[1.125rem] font-bold tracking-[-0.02em]">
-                  <span className="text-primary">API</span>
-                  <span>ToGo</span>
+                  {brandName.includes("API") && brandName !== "API ToGo" ? (
+                    <>
+                      {brandName.replace(/API$/, "")}
+                      <span className="text-primary">API</span>
+                    </>
+                  ) : footer.brand?.name ? (
+                    brandName
+                  ) : (
+                    <>
+                      <span className="text-primary">API</span>
+                      <span>ToGo</span>
+                    </>
+                  )}
                 </span>
               )}
             </div>

package/src/sections/HeroSection.tsx

@@ -4,18 +4,31 @@ import { ArrowRightIcon, BookOpenIcon, CheckIcon } from "lucide-react";
 import { CodeExampleCard } from "./CodeExampleCard.js";
 import { LandingButton } from "./LandingButtons.js";
 
+type CodeExample = NonNullable<
+  NonNullable<ResolvedLandingContent["hero"]>["codeExample"]
+>;
+
 export type HeroSectionProps = {
   hero: NonNullable<ResolvedLandingContent["hero"]>;
   primaryAction?: ResolvedLandingContent["primaryAction"];
   secondaryAction?: ResolvedLandingContent["secondaryAction"];
+  /** Optional stacked code cards (falls back to hero.codeExample). */
+  codeExamples?: CodeExample[];
 };
 
 export const HeroSection = ({
   hero,
   primaryAction,
   secondaryAction,
+  codeExamples,
 }: HeroSectionProps) => {
-  const hasCodeExample = Boolean(hero.codeExample?.code);
+  const examples =
+    codeExamples && codeExamples.length > 0
+      ? codeExamples.filter((example) => Boolean(example.code))
+      : hero.codeExample?.code
+        ? [hero.codeExample]
+        : [];
+  const hasCodeExample = examples.length > 0;
   const highlights = hero.highlights ?? [];
 
   return (
@@ -106,9 +119,14 @@ export const HeroSection = ({
           ) : null}
         </div>
 
-        {hasCodeExample && hero.codeExample ? (
-          <div className="landing-fu">
-            <CodeExampleCard example={hero.codeExample} />
+        {hasCodeExample ? (
+          <div className="landing-fu flex flex-col gap-3.5">
+            {examples.map((example) => (
+              <CodeExampleCard
+                key={`${example.filename ?? "example"}-${example.code.slice(0, 24)}`}
+                example={example}
+              />
+            ))}
           </div>
         ) : null}
       </div>

package/src/sections/PlansPreviewSection.tsx

@@ -0,0 +1,76 @@
+import { cn } from "@lukoweb/apitogo";
+import { Link } from "@lukoweb/apitogo/components";
+import { ArrowRightIcon } from "lucide-react";
+
+export type PlansPreviewPlan = {
+  name: string;
+  price: string;
+  unit: string;
+  blurb: string;
+  href?: string;
+  featured?: boolean;
+};
+
+export type PlansPreviewSectionProps = {
+  title?: string;
+  seeAllHref?: string;
+  seeAllLabel?: string;
+  plans: PlansPreviewPlan[];
+};
+
+export const PlansPreviewSection = ({
+  title = "Simple, usage-based pricing",
+  seeAllHref = "/pricing",
+  seeAllLabel = "See full pricing →",
+  plans,
+}: PlansPreviewSectionProps) => {
+  if (plans.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="border-t border-border bg-muted/30">
+      <div className="mx-auto max-w-[1200px] px-6 py-[3.75rem]">
+        <div className="mb-10 flex flex-wrap items-end justify-between gap-4">
+          <h2 className="text-[2.125rem] leading-tight font-bold tracking-[-0.025em]">
+            {title}
+          </h2>
+          <Link
+            to={seeAllHref}
+            className="inline-flex items-center gap-1 text-sm font-semibold text-primary no-underline hover:underline"
+          >
+            {seeAllLabel}
+            {!seeAllLabel.includes("→") ? (
+              <ArrowRightIcon size={14} aria-hidden />
+            ) : null}
+          </Link>
+        </div>
+        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+          {plans.map((plan) => (
+            <article
+              key={plan.name}
+              className={cn(
+                "rounded-[14px] border border-border bg-card p-6",
+                plan.featured &&
+                  "border-primary/50 ring-1 ring-primary/25 shadow-[0_10px_28px_rgba(13,148,136,0.18)]",
+              )}
+            >
+              <div className="text-sm font-bold uppercase tracking-[0.04em]">
+                {plan.name}
+              </div>
+              <div className="mt-2.5 text-[1.8rem] font-extrabold tracking-[-0.02em]">
+                {plan.price}
+              </div>
+              <div className="mb-3.5 text-[0.78125rem] text-muted-foreground">
+                {plan.unit}
+              </div>
+              <p className="text-[0.8125rem] leading-relaxed text-muted-foreground">
+                {plan.blurb}
+              </p>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};

package/src/sections/PricingCtaSection.tsx

@@ -4,14 +4,54 @@ import { LandingButton } from "./LandingButtons.js";
 
 export type PricingCtaSectionProps = {
   pricingCta: NonNullable<ResolvedLandingContent["pricingCta"]>;
+  variant?: "default" | "banner";
 };
 
-export const PricingCtaSection = ({ pricingCta }: PricingCtaSectionProps) => {
+export const PricingCtaSection = ({
+  pricingCta,
+  variant = "default",
+}: PricingCtaSectionProps) => {
   const title = pricingCta.title ?? "Start free. Scale when you do.";
   const description =
     pricingCta.description ??
     "Generous free tier. Upgrade only when your app takes off.";
 
+  if (variant === "banner") {
+    return (
+      <section className="relative overflow-hidden bg-foreground text-background">
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_120%,color-mix(in_oklch,var(--primary)_30%,transparent),transparent_55%)]"
+        />
+        <div className="relative mx-auto max-w-[640px] px-6 py-[4.5rem] text-center">
+          <h2 className="mb-3.5 text-[2.125rem] leading-tight font-bold tracking-[-0.025em] text-balance">
+            {title}
+          </h2>
+          <p className="mx-auto mb-7 max-w-[520px] text-lg leading-relaxed text-background/70">
+            {description}
+          </p>
+          <div className="flex flex-wrap items-center justify-center gap-3">
+            {pricingCta.primaryAction ? (
+              <LandingButton
+                href={pricingCta.primaryAction.href}
+                label={pricingCta.primaryAction.label}
+                icon={ArrowRightIcon}
+                variant="primary"
+              />
+            ) : null}
+            {pricingCta.secondaryAction ? (
+              <LandingButton
+                href={pricingCta.secondaryAction.href}
+                label={pricingCta.secondaryAction.label}
+                variant="secondary"
+              />
+            ) : null}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
   return (
     <section className="mx-auto max-w-[1200px] px-6 py-[4.5rem] text-center">
       <h2 className="mb-4 text-[2.5rem] leading-tight font-bold tracking-[-0.03em] text-balance">

package/src/sections/StepsSection.tsx

@@ -0,0 +1,42 @@
+export type StepsSectionStep = {
+  step: string;
+  title: string;
+  description: string;
+};
+
+export type StepsSectionProps = {
+  title?: string;
+  steps: StepsSectionStep[];
+};
+
+export const StepsSection = ({
+  title = "Three steps to your first request",
+  steps,
+}: StepsSectionProps) => {
+  if (steps.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="border-y border-border bg-muted/30">
+      <div className="mx-auto max-w-[1200px] px-6 py-[3.75rem]">
+        <h2 className="mb-10 text-center text-[2.125rem] leading-tight font-bold tracking-[-0.025em]">
+          {title}
+        </h2>
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {steps.map((item) => (
+            <div key={item.step}>
+              <div className="font-mono text-[2rem] font-bold text-primary">
+                {item.step}
+              </div>
+              <h3 className="mt-2 mb-1.5 text-lg font-semibold">{item.title}</h3>
+              <p className="text-sm leading-relaxed text-muted-foreground">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};