@lukoweb/apitogo-module-landing 0.2.23 → 0.2.25

package/src/sections/LandingButtons.tsx

@@ -1,46 +1,46 @@
-import { cn } from "@lukoweb/apitogo";
-import { Link } from "@lukoweb/apitogo/components";
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import type { LucideIcon } from "lucide-react";
-import type { ReactNode } from "react";
-
-type LandingButtonProps = {
-  href: string;
-  label: string;
-  icon?: LucideIcon;
-  iconPosition?: "start" | "end";
-  variant?: "primary" | "secondary";
-  size?: "default" | "sm";
-  className?: string;
-  children?: ReactNode;
-};
-
-export const LandingButton = ({
-  href,
-  label,
-  icon: Icon,
-  iconPosition = "end",
-  variant = "primary",
-  size = "default",
-  className,
-  children,
-}: LandingButtonProps) => {
-  const content = children ?? (
-    <>
-      {Icon && iconPosition === "start" ? <Icon size={17} aria-hidden /> : null}
-      {label}
-      {Icon && iconPosition === "end" ? <Icon size={17} aria-hidden /> : null}
-    </>
-  );
-
-  return (
-    <Button
-      asChild
-      variant={variant === "primary" ? "default" : "outline"}
-      size={size === "sm" ? "sm" : "lg"}
-      className={cn(className)}
-    >
-      <Link to={href}>{content}</Link>
-    </Button>
-  );
-};
+import { cn } from "@lukoweb/apitogo";
+import { Link } from "@lukoweb/apitogo/components";
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+type LandingButtonProps = {
+  href: string;
+  label: string;
+  icon?: LucideIcon;
+  iconPosition?: "start" | "end";
+  variant?: "primary" | "secondary";
+  size?: "default" | "sm";
+  className?: string;
+  children?: ReactNode;
+};
+
+export const LandingButton = ({
+  href,
+  label,
+  icon: Icon,
+  iconPosition = "end",
+  variant = "primary",
+  size = "default",
+  className,
+  children,
+}: LandingButtonProps) => {
+  const content = children ?? (
+    <>
+      {Icon && iconPosition === "start" ? <Icon size={17} aria-hidden /> : null}
+      {label}
+      {Icon && iconPosition === "end" ? <Icon size={17} aria-hidden /> : null}
+    </>
+  );
+
+  return (
+    <Button
+      asChild
+      variant={variant === "primary" ? "default" : "outline"}
+      size={size === "sm" ? "sm" : "lg"}
+      className={cn(className)}
+    >
+      <Link to={href}>{content}</Link>
+    </Button>
+  );
+};

package/src/sections/LandingIcon.tsx

@@ -1,54 +1,54 @@
-import type { LucideIcon } from "lucide-react";
-import {
-  ActivityIcon,
-  ArrowRightLeftIcon,
-  BadgeDollarSignIcon,
-  BlocksIcon,
-  BookOpenIcon,
-  BoxesIcon,
-  CheckIcon,
-  CodeIcon,
-  CoinsIcon,
-  GaugeIcon,
-  LayersIcon,
-  RadioIcon,
-  ShieldCheckIcon,
-  WalletIcon,
-  WebhookIcon,
-  ZapIcon,
-} from "lucide-react";
-
-const ICONS: Record<string, LucideIcon> = {
-  activity: ActivityIcon,
-  "arrow-left-right": ArrowRightLeftIcon,
-  "arrow-right-left": ArrowRightLeftIcon,
-  "badge-dollar-sign": BadgeDollarSignIcon,
-  blocks: BlocksIcon,
-  "book-open": BookOpenIcon,
-  boxes: BoxesIcon,
-  check: CheckIcon,
-  code: CodeIcon,
-  coins: CoinsIcon,
-  gauge: GaugeIcon,
-  layers: LayersIcon,
-  radio: RadioIcon,
-  "shield-check": ShieldCheckIcon,
-  wallet: WalletIcon,
-  webhook: WebhookIcon,
-  zap: ZapIcon,
-};
-
-export type LandingIconProps = {
-  name?: string;
-  size?: number;
-  className?: string;
-};
-
-export const LandingIcon = ({
-  name,
-  size = 20,
-  className,
-}: LandingIconProps) => {
-  const Icon = (name && ICONS[name]) || CodeIcon;
-  return <Icon size={size} className={className} aria-hidden />;
-};
+import type { LucideIcon } from "lucide-react";
+import {
+  ActivityIcon,
+  ArrowRightLeftIcon,
+  BadgeDollarSignIcon,
+  BlocksIcon,
+  BookOpenIcon,
+  BoxesIcon,
+  CheckIcon,
+  CodeIcon,
+  CoinsIcon,
+  GaugeIcon,
+  LayersIcon,
+  RadioIcon,
+  ShieldCheckIcon,
+  WalletIcon,
+  WebhookIcon,
+  ZapIcon,
+} from "lucide-react";
+
+const ICONS: Record<string, LucideIcon> = {
+  activity: ActivityIcon,
+  "arrow-left-right": ArrowRightLeftIcon,
+  "arrow-right-left": ArrowRightLeftIcon,
+  "badge-dollar-sign": BadgeDollarSignIcon,
+  blocks: BlocksIcon,
+  "book-open": BookOpenIcon,
+  boxes: BoxesIcon,
+  check: CheckIcon,
+  code: CodeIcon,
+  coins: CoinsIcon,
+  gauge: GaugeIcon,
+  layers: LayersIcon,
+  radio: RadioIcon,
+  "shield-check": ShieldCheckIcon,
+  wallet: WalletIcon,
+  webhook: WebhookIcon,
+  zap: ZapIcon,
+};
+
+export type LandingIconProps = {
+  name?: string;
+  size?: number;
+  className?: string;
+};
+
+export const LandingIcon = ({
+  name,
+  size = 20,
+  className,
+}: LandingIconProps) => {
+  const Icon = (name && ICONS[name]) || CodeIcon;
+  return <Icon size={size} className={className} aria-hidden />;
+};

package/src/sections/PlansPreviewSection.tsx

@@ -1,76 +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>
-  );
-};
+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

@@ -1,82 +1,82 @@
-import type { ResolvedLandingContent } from "@lukoweb/apitogo";
-import { ArrowRightIcon } from "lucide-react";
-import { LandingButton } from "./LandingButtons.js";
-
-export type PricingCtaSectionProps = {
-  pricingCta: NonNullable<ResolvedLandingContent["pricingCta"]>;
-  variant?: "default" | "banner";
-};
-
-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">
-        {title}
-      </h2>
-      <p className="mx-auto mb-[1.875rem] max-w-[520px] text-[1.09375rem] leading-relaxed text-muted-foreground">
-        {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>
-    </section>
-  );
-};
+import type { ResolvedLandingContent } from "@lukoweb/apitogo";
+import { ArrowRightIcon } from "lucide-react";
+import { LandingButton } from "./LandingButtons.js";
+
+export type PricingCtaSectionProps = {
+  pricingCta: NonNullable<ResolvedLandingContent["pricingCta"]>;
+  variant?: "default" | "banner";
+};
+
+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">
+        {title}
+      </h2>
+      <p className="mx-auto mb-[1.875rem] max-w-[520px] text-[1.09375rem] leading-relaxed text-muted-foreground">
+        {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>
+    </section>
+  );
+};

package/src/sections/StepsSection.tsx

@@ -1,44 +1,44 @@
-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>
-  );
-};
+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>
+  );
+};