npm - @lukoweb/apitogo-module-landing - Versions diffs - 0.1.59 → 0.1.61 - Mend

@lukoweb/apitogo-module-landing 0.1.59 → 0.1.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/package.json +2 -2
package/src/LandingFooterSlot.tsx +1 -6
package/src/LandingShell.tsx +6 -14
package/src/landing.css +1 -256
package/src/sections/ApiShowcaseSection.tsx +22 -16
package/src/sections/CodeExampleCard.tsx +11 -11
package/src/sections/FeaturesSection.tsx +12 -7
package/src/sections/FooterSection.tsx +9 -11
package/src/sections/HeroSection.tsx +13 -16
package/src/sections/LandingButtons.tsx +8 -9
package/src/sections/PricingCtaSection.tsx +2 -2
package/src/sections/TrustSection.tsx +5 -2

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-module-landing",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "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.59",
+    "@lukoweb/apitogo": "0.1.61",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "typescript": "5.9.3"

package/src/LandingFooterSlot.tsx CHANGED Viewed

@@ -1,7 +1,6 @@
 import type { ResolvedLandingContent } from "@lukoweb/apitogo";
 import type { ComponentType } from "react";
 import { FooterSection } from "./sections/FooterSection.js";
-import "./landing.css";
 export type LandingFooterSlotConfig = ResolvedLandingContent["footer"];
@@ -16,11 +15,7 @@ export const createLandingFooterSlot = (
     return undefined;
   }
-  const LandingFooterSlot = () => (
-    <div className="apitogo-landing">
-      <FooterSection footer={footer} />
-    </div>
-  );
+  const LandingFooterSlot = () => <FooterSection footer={footer} />;
   return LandingFooterSlot;
 };

package/src/LandingShell.tsx CHANGED Viewed

@@ -30,7 +30,8 @@ export type LandingShellProps = {
   description?: string;
   /**
    * Show the "Built with APIToGo" line. Defaults to true.
-   * Automatically hidden when a `FooterSection` is composed as a child.
+   * Automatically hidden when a `FooterSection` is composed as a child or
+   * a footer slot is configured (e.g. `modules.landing.content.footer`).
    */
   showPoweredBy?: boolean;
 };
@@ -45,21 +46,12 @@ export const LandingShell = ({
   const siteTitle =
     options.metadata?.applicationName ?? options.site?.title ?? "APIToGo";
   const pageTitle = title ?? siteTitle;
-  const hasFooter = containsFooterSection(children);
+  const hasFooter =
+    containsFooterSection(children) || Boolean(options.slots?.footer);
   return (
-    <div className="apitogo-landing relative overflow-hidden">
+    <div className="relative overflow-hidden bg-background text-foreground">
       <Head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin=""
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
-          rel="stylesheet"
-        />
         <title>{pageTitle}</title>
         {description ? <meta name="description" content={description} /> : null}
       </Head>
@@ -69,7 +61,7 @@ export const LandingShell = ({
       {showPoweredBy && !hasFooter ? (
         <div
           className={cn(
-            "landing-powered-by py-6 text-center text-xs",
+            "border-t border-border py-6 text-center text-xs text-muted-foreground/70",
             !options.site?.footer && "mb-8",
           )}
         >

package/src/landing.css CHANGED Viewed

@@ -1,52 +1,3 @@
-.apitogo-landing {
-  --landing-display: "Space Grotesk", var(--font-sans, system-ui), sans-serif;
-  --landing-body: "IBM Plex Sans", var(--font-sans, system-ui), sans-serif;
-  --landing-mono: "JetBrains Mono", var(--font-mono, ui-monospace), monospace;
-  --landing-bg: #0b0d12;
-  --landing-bg-2: #0e1119;
-  --landing-surface: #14171f;
-  --landing-surface-2: #191d27;
-  --landing-border: #252b37;
-  --landing-border-2: #333a48;
-  --landing-text: #edeff5;
-  --landing-text-2: #a6aebf;
-  --landing-text-3: #6b7385;
-  --landing-accent: #f23645;
-  --landing-accent-hover: #ff515d;
-  --landing-accent-soft: rgba(242, 54, 69, 0.13);
-  --landing-on-accent: #fff;
-  --landing-green: #16c784;
-  --landing-green-soft: rgba(22, 199, 132, 0.13);
-  --landing-peri: #aeb9e8;
-  --landing-code-bg: #0c0f16;
-  --landing-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.55);
-  background: var(--landing-bg);
-  color: var(--landing-text);
-  font-family: var(--landing-body);
-  -webkit-font-smoothing: antialiased;
-}
-:not(.dark) .apitogo-landing {
-  --landing-bg: #f5f6f9;
-  --landing-bg-2: #ffffff;
-  --landing-surface: #ffffff;
-  --landing-surface-2: #fafbfc;
-  --landing-border: #e6e8ef;
-  --landing-border-2: #d6dae3;
-  --landing-text: #0e1016;
-  --landing-text-2: #565e70;
-  --landing-text-3: #8a92a3;
-  --landing-accent: #e11d2a;
-  --landing-accent-hover: #c2151f;
-  --landing-accent-soft: rgba(225, 29, 42, 0.08);
-  --landing-green: #0e9e63;
-  --landing-green-soft: rgba(14, 158, 99, 0.1);
-  --landing-peri: #4e5ac0;
-  --landing-shadow:
-    0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px -10px rgba(16, 24, 40, 0.14);
-}
 @keyframes landing-fu {
   from {
     opacity: 0;
@@ -58,212 +9,6 @@
   }
 }
-.apitogo-landing .landing-display {
-  font-family: var(--landing-display);
-}
-.apitogo-landing .landing-mono {
-  font-family: var(--landing-mono);
-}
-.apitogo-landing .landing-fu {
+.landing-fu {
   animation: landing-fu 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
 }
-.apitogo-landing .landing-section-label {
-  color: var(--landing-accent);
-  font-family: var(--landing-mono);
-  font-size: 0.8125rem;
-  font-weight: 600;
-  margin-bottom: 0.75rem;
-}
-.apitogo-landing .landing-muted {
-  color: var(--landing-text-2);
-}
-.apitogo-landing .landing-muted-3 {
-  color: var(--landing-text-3);
-}
-.apitogo-landing .landing-btn-primary {
-  align-items: center;
-  background: var(--landing-accent);
-  border: none;
-  border-radius: 11px;
-  box-shadow: 0 8px 24px -8px var(--landing-accent-soft);
-  color: var(--landing-on-accent);
-  cursor: pointer;
-  display: inline-flex;
-  font-family: inherit;
-  font-size: 0.96875rem;
-  font-weight: 600;
-  gap: 0.5rem;
-  padding: 0.8125rem 1.375rem;
-  text-decoration: none;
-  transition: background 0.15s ease;
-}
-.apitogo-landing .landing-btn-primary:hover {
-  background: var(--landing-accent-hover);
-}
-.apitogo-landing .landing-btn-secondary {
-  align-items: center;
-  background: var(--landing-surface);
-  border: 1px solid var(--landing-border);
-  border-radius: 11px;
-  color: var(--landing-text);
-  cursor: pointer;
-  display: inline-flex;
-  font-family: inherit;
-  font-size: 0.96875rem;
-  font-weight: 600;
-  gap: 0.5rem;
-  padding: 0.8125rem 1.375rem;
-  text-decoration: none;
-  transition:
-    border-color 0.15s ease,
-    background 0.15s ease;
-}
-.apitogo-landing .landing-btn-secondary:hover {
-  border-color: var(--landing-border-2);
-}
-.apitogo-landing .landing-btn-sm {
-  border-radius: 9px;
-  font-size: 0.875rem;
-  padding: 0.625rem 1rem;
-}
-.apitogo-landing .landing-hero-gradient {
-  background: radial-gradient(
-    1000px 480px at 78% -8%,
-    var(--landing-accent-soft),
-    transparent 70%
-  );
-}
-.apitogo-landing .landing-badge {
-  align-items: center;
-  background: var(--landing-surface);
-  border: 1px solid var(--landing-border);
-  border-radius: 999px;
-  color: var(--landing-text-2);
-  display: inline-flex;
-  font-size: 0.78125rem;
-  gap: 0.5rem;
-  margin-bottom: 1.375rem;
-  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
-  width: fit-content;
-}
-.apitogo-landing .landing-status-pill {
-  align-items: center;
-  background: var(--landing-green-soft);
-  border-radius: 999px;
-  color: var(--landing-green);
-  display: inline-flex;
-  font-family: var(--landing-mono);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  gap: 0.3125rem;
-  padding: 0.125rem 0.5rem;
-}
-.apitogo-landing .landing-status-dot {
-  background: var(--landing-green);
-  border-radius: 50%;
-  height: 6px;
-  width: 6px;
-}
-.apitogo-landing .landing-feature-card {
-  background: var(--landing-surface);
-  border: 1px solid var(--landing-border);
-  border-radius: 14px;
-  padding: 1.5rem;
-  transition: border-color 0.15s ease;
-}
-.apitogo-landing .landing-feature-card:hover {
-  border-color: var(--landing-border-2);
-}
-.apitogo-landing .landing-feature-icon {
-  background: var(--landing-accent-soft);
-  border-radius: 11px;
-  color: var(--landing-accent);
-  display: grid;
-  height: 2.625rem;
-  margin-bottom: 1rem;
-  place-items: center;
-  width: 2.625rem;
-}
-.apitogo-landing .landing-api-card {
-  background: var(--landing-surface);
-  border: 1px solid var(--landing-border);
-  border-radius: 13px;
-  color: var(--landing-text);
-  cursor: pointer;
-  padding: 1.125rem;
-  text-decoration: none;
-  transition:
-    border-color 0.15s ease,
-    transform 0.15s ease;
-}
-.apitogo-landing .landing-api-card:hover {
-  border-color: var(--landing-border-2);
-  transform: translateY(-2px);
-}
-.apitogo-landing .landing-api-icon {
-  background: var(--landing-surface-2);
-  border: 1px solid var(--landing-border);
-  border-radius: 9px;
-  color: var(--landing-peri);
-  display: grid;
-  height: 2.25rem;
-  place-items: center;
-  width: 2.25rem;
-}
-.apitogo-landing .landing-latency-badge {
-  background: var(--landing-green-soft);
-  border-radius: 6px;
-  color: var(--landing-green);
-  font-family: var(--landing-mono);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  padding: 0.1875rem 0.4375rem;
-}
-.apitogo-landing .landing-trust-logo {
-  color: var(--landing-text-2);
-  font-family: var(--landing-display);
-  font-size: 1.1875rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-.apitogo-landing .landing-showcase-section {
-  background: var(--landing-bg-2);
-  border-bottom: 1px solid var(--landing-border);
-  border-top: 1px solid var(--landing-border);
-}
-.apitogo-landing .landing-hero-section {
-  border-bottom: 1px solid var(--landing-border);
-}
-.apitogo-landing .landing-powered-by {
-  border-top: 1px solid var(--landing-border);
-  color: var(--landing-text-3);
-}
-.apitogo-landing .landing-footer-social-link {
-  color: var(--landing-text-3);
-}

package/src/sections/ApiShowcaseSection.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { ResolvedLandingContent } 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";
@@ -19,25 +20,28 @@ export const ApiShowcaseSection = ({
   const browseLabel = apiShowcase.browseAllLabel ?? "Browse all APIs";
   return (
-    <section className="landing-showcase-section">
+    <section className="border-y border-border bg-muted/30">
       <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="landing-section-label">{"// the catalog"}</p>
-            <h2 className="landing-display text-[2.125rem] leading-tight font-bold tracking-[-0.025em]">
+            <p className="mb-3 font-mono text-[0.8125rem] font-semibold text-primary">
+              {"// the catalog"}
+            </p>
+            <h2 className="text-[2.125rem] leading-tight font-bold tracking-[-0.025em]">
               {apiShowcase.title ?? "Production APIs. One key."}
             </h2>
             {apiShowcase.subtitle ? (
-              <p className="landing-muted mt-2">{apiShowcase.subtitle}</p>
+              <p className="mt-2 text-muted-foreground">
+                {apiShowcase.subtitle}
+              </p>
             ) : null}
           </div>
-          <Link
-            to={browseHref}
-            className="landing-btn-secondary landing-btn-sm"
-          >
-            {browseLabel}
-            <ArrowRightIcon size={15} aria-hidden />
-          </Link>
+          <Button asChild variant="outline" size="sm">
+            <Link to={browseHref}>
+              {browseLabel}
+              <ArrowRightIcon size={15} aria-hidden />
+            </Link>
+          </Button>
         </div>
         <div className="grid gap-3.5 sm:grid-cols-2 lg:grid-cols-4">
@@ -45,20 +49,22 @@ export const ApiShowcaseSection = ({
             <Link
               key={`${item.name}-${item.path}`}
               to={browseHref}
-              className="landing-api-card block"
+              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="landing-api-icon">
+                <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="landing-latency-badge">{item.latency}</span>
+                  <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="landing-display mb-1 text-[0.9375rem] font-semibold">
+              <h3 className="mb-1 text-[0.9375rem] font-semibold">
                 {item.name}
               </h3>
-              <p className="landing-mono landing-muted-3 text-[0.71875rem]">
+              <p className="font-mono text-[0.71875rem] text-muted-foreground/70">
                 {item.path}
               </p>
             </Link>

package/src/sections/CodeExampleCard.tsx CHANGED Viewed

@@ -12,24 +12,24 @@ export const CodeExampleCard = ({ example }: CodeExampleCardProps) => {
   const language = example.language ?? "bash";
   return (
-    <div
-      className="overflow-hidden rounded-2xl border border-[var(--landing-border)] shadow-[var(--landing-shadow)]"
-      style={{ background: "var(--landing-code-bg)" }}
-    >
-      <div className="flex items-center gap-2 border-b border-[#1b1f2a] px-4 py-3">
-        <span className="size-[11px] rounded-full bg-[#ff5f57]" aria-hidden />
-        <span className="size-[11px] rounded-full bg-[#febc2e]" aria-hidden />
-        <span className="size-[11px] rounded-full bg-[#28c840]" aria-hidden />
-        <span className="landing-mono ms-2 text-xs text-[#6b7385]">
+    <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-sm">
+      <div className="flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-3">
+        <span
+          className="size-[11px] rounded-full bg-destructive/80"
+          aria-hidden
+        />
+        <span className="size-[11px] rounded-full bg-warning" aria-hidden />
+        <span className="size-[11px] rounded-full bg-primary" aria-hidden />
+        <span className="ms-2 font-mono text-xs text-muted-foreground">
           {filename}
         </span>
         <TerminalIcon
           size={14}
-          className="ms-auto text-[#4b5162]"
+          className="ms-auto text-muted-foreground/70"
           aria-hidden
         />
       </div>
-      <pre className="landing-mono overflow-x-auto p-[1.125rem] text-[0.78125rem] leading-[1.85] text-[#cdd3e0]">
+      <pre className="overflow-x-auto p-[1.125rem] font-mono text-[0.78125rem] leading-[1.85] text-foreground">
         <code data-language={language}>{example.code}</code>
       </pre>
     </div>

package/src/sections/FeaturesSection.tsx CHANGED Viewed

@@ -23,25 +23,30 @@ export const FeaturesSection = ({
   return (
     <section className="mx-auto max-w-[1200px] px-6 py-10 pb-16">
       <div className="mb-11 max-w-[640px]">
-        <p className="landing-section-label">{label}</p>
-        <h2 className="landing-display mb-3.5 text-[2.375rem] leading-tight font-bold tracking-[-0.025em] text-balance">
+        <p className="mb-3 font-mono text-[0.8125rem] font-semibold text-primary">
+          {label}
+        </p>
+        <h2 className="mb-3.5 text-[2.375rem] leading-tight font-bold tracking-[-0.025em] text-balance">
           {title}
         </h2>
-        <p className="landing-muted text-[1.0625rem] leading-relaxed">
+        <p className="text-[1.0625rem] leading-relaxed text-muted-foreground">
           {description}
         </p>
       </div>
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {features.map((feature) => (
-          <article key={feature.title} className="landing-feature-card">
-            <div className="landing-feature-icon">
+          <article
+            key={feature.title}
+            className="rounded-[14px] border border-border bg-card p-6 transition-colors hover:border-muted-foreground/30"
+          >
+            <div className="mb-4 grid size-[2.625rem] place-items-center rounded-[11px] bg-primary/10 text-primary">
               <LandingIcon name={feature.icon} size={21} />
             </div>
-            <h3 className="landing-display mb-2 text-[1.09375rem] font-semibold">
+            <h3 className="mb-2 text-[1.09375rem] font-semibold">
               {feature.title}
             </h3>
-            <p className="landing-muted text-[0.90625rem] leading-relaxed">
+            <p className="text-[0.90625rem] leading-relaxed text-muted-foreground">
               {feature.description}
             </p>
           </article>

package/src/sections/FooterSection.tsx CHANGED Viewed

@@ -55,7 +55,7 @@ const FooterSocialLink = ({
       target="_blank"
       rel="noopener noreferrer"
       aria-label={accessibleLabel}
-      className="landing-footer-social-link landing-muted-3 inline-flex items-center justify-center transition-colors hover:text-[var(--landing-text)]"
+      className="inline-flex items-center justify-center text-muted-foreground/70 transition-colors hover:text-foreground"
     >
       {Icon ? (
         <Icon className="h-[1.125rem] w-[1.125rem]" />
@@ -85,7 +85,7 @@ export const FooterSection = ({ footer }: FooterSectionProps) => {
   }
   return (
-    <footer className="landing-footer border-t border-[var(--landing-border)] bg-[var(--landing-bg-2)]">
+    <footer className="border-t bg-background">
       <div className="mx-auto max-w-[1200px] px-6 py-12">
         <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-[1.4fr_repeat(3,minmax(0,1fr))]">
           <div className="sm:col-span-2 lg:col-span-1">
@@ -97,14 +97,14 @@ export const FooterSection = ({ footer }: FooterSectionProps) => {
                   className="h-7 w-auto object-contain"
                 />
               ) : (
-                <span className="landing-display text-[1.125rem] font-bold tracking-[-0.02em]">
-                  <span className="text-[var(--landing-peri)]">API</span>
+                <span className="text-[1.125rem] font-bold tracking-[-0.02em]">
+                  <span className="text-primary">API</span>
                   <span>ToGo</span>
                 </span>
               )}
             </div>
             {tagline ? (
-              <p className="landing-muted max-w-[280px] text-[0.875rem] leading-relaxed">
+              <p className="max-w-[280px] text-[0.875rem] leading-relaxed text-muted-foreground">
                 {tagline}
               </p>
             ) : null}
@@ -112,15 +112,13 @@ export const FooterSection = ({ footer }: FooterSectionProps) => {
           {columns.map((column) => (
             <div key={column.title}>
-              <h3 className="mb-4 text-[0.875rem] font-semibold text-[var(--landing-text)]">
-                {column.title}
-              </h3>
+              <h3 className="mb-4 text-sm font-semibold">{column.title}</h3>
               <ul className="space-y-2.5">
                 {column.links.map((link) => (
                   <li key={`${column.title}-${link.label}`}>
                     <a
                       href={link.href}
-                      className="landing-muted text-[0.875rem] transition-colors hover:text-[var(--landing-text)]"
+                      className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                     >
                       {link.label}
                     </a>
@@ -131,8 +129,8 @@ export const FooterSection = ({ footer }: FooterSectionProps) => {
           ))}
         </div>
-        <div className="landing-footer-bar mt-10 flex flex-col items-center justify-between gap-4 border-t border-[var(--landing-border)] pt-6 sm:flex-row">
-          <p className="landing-muted-3 text-[0.8125rem]">{copyright}</p>
+        <div className="mt-10 flex flex-col items-center justify-between gap-4 border-t border-border pt-6 sm:flex-row">
+          <p className="text-sm text-muted-foreground/70">{copyright}</p>
           {social.length > 0 ? (
             <div className="flex items-center gap-4">
               {social.map((item) => (

package/src/sections/HeroSection.tsx CHANGED Viewed

@@ -19,10 +19,10 @@ export const HeroSection = ({
   const highlights = hero.highlights ?? [];
   return (
-    <section className="landing-hero-section relative overflow-hidden">
+    <section className="relative overflow-hidden border-b border-border">
       <div
         aria-hidden
-        className="landing-hero-gradient pointer-events-none absolute inset-0"
+        className="pointer-events-none absolute inset-0 bg-[radial-gradient(1000px_480px_at_78%_-8%,color-mix(in_oklch,var(--primary)_13%,transparent),transparent_70%)]"
       />
       <div
@@ -39,10 +39,13 @@ export const HeroSection = ({
           )}
         >
           {(hero.badge || hero.subtitle) && (
-            <div className="landing-badge">
+            <div className="mb-[1.375rem] inline-flex w-fit items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 text-[0.78125rem] text-muted-foreground">
               {hero.badge ? (
-                <span className="landing-status-pill">
-                  <span className="landing-status-dot" aria-hidden />
+                <span className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2 py-0.5 font-mono text-[0.6875rem] font-semibold text-primary">
+                  <span
+                    className="size-1.5 rounded-full bg-primary"
+                    aria-hidden
+                  />
                   {hero.badge}
                 </span>
               ) : null}
@@ -50,20 +53,18 @@ export const HeroSection = ({
             </div>
           )}
-          <h1 className="landing-display mb-5 text-[2.5rem] leading-[1.02] font-bold tracking-[-0.03em] text-balance sm:text-5xl lg:text-[3.5rem]">
+          <h1 className="mb-5 text-[2.5rem] leading-[1.02] font-bold tracking-[-0.03em] text-balance sm:text-5xl lg:text-[3.5rem]">
             {hero.title}
             {hero.titleAccent ? (
               <>
                 <br />
-                <span className="text-[var(--landing-accent)]">
-                  {hero.titleAccent}
-                </span>
+                <span className="text-primary">{hero.titleAccent}</span>
               </>
             ) : null}
           </h1>
           {hero.description ? (
-            <p className="landing-muted mb-[1.875rem] max-w-[480px] text-lg leading-relaxed text-pretty">
+            <p className="mb-[1.875rem] max-w-[480px] text-lg leading-relaxed text-pretty text-muted-foreground">
               {hero.description}
             </p>
           ) : null}
@@ -91,17 +92,13 @@ export const HeroSection = ({
           )}
           {highlights.length > 0 ? (
-            <ul className="landing-muted-3 mt-[1.875rem] flex flex-wrap items-center gap-x-[1.375rem] gap-y-2 text-[0.8125rem]">
+            <ul className="mt-[1.875rem] flex flex-wrap items-center gap-x-[1.375rem] gap-y-2 text-[0.8125rem] text-muted-foreground/70">
               {highlights.map((item) => (
                 <li
                   key={item}
                   className="inline-flex items-center gap-[0.4375rem]"
                 >
-                  <CheckIcon
-                    size={15}
-                    className="text-[var(--landing-green)]"
-                    aria-hidden
-                  />
+                  <CheckIcon size={15} className="text-primary" aria-hidden />
                   {item}
                 </li>
               ))}

package/src/sections/LandingButtons.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 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";
@@ -33,15 +34,13 @@ export const LandingButton = ({
   );
   return (
-    <Link
-      to={href}
-      className={cn(
-        variant === "primary" ? "landing-btn-primary" : "landing-btn-secondary",
-        size === "sm" && "landing-btn-sm",
-        className,
-      )}
+    <Button
+      asChild
+      variant={variant === "primary" ? "default" : "outline"}
+      size={size === "sm" ? "sm" : "lg"}
+      className={cn(className)}
     >
-      {content}
-    </Link>
+      <Link to={href}>{content}</Link>
+    </Button>
   );
 };

package/src/sections/PricingCtaSection.tsx CHANGED Viewed

@@ -14,10 +14,10 @@ export const PricingCtaSection = ({ pricingCta }: PricingCtaSectionProps) => {
   return (
     <section className="mx-auto max-w-[1200px] px-6 py-[4.5rem] text-center">
-      <h2 className="landing-display mb-4 text-[2.5rem] leading-tight font-bold tracking-[-0.03em] text-balance">
+      <h2 className="mb-4 text-[2.5rem] leading-tight font-bold tracking-[-0.03em] text-balance">
         {title}
       </h2>
-      <p className="landing-muted mx-auto mb-[1.875rem] max-w-[520px] text-[1.09375rem] leading-relaxed">
+      <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">

package/src/sections/TrustSection.tsx CHANGED Viewed

@@ -13,13 +13,16 @@ export const TrustSection = ({ trust }: TrustSectionProps) => {
   return (
     <section className="mx-auto max-w-[1200px] px-6 py-10">
       {trust.title ? (
-        <p className="landing-muted-3 mb-[1.375rem] text-center text-[0.78125rem] font-semibold tracking-[0.08em] uppercase">
+        <p className="mb-[1.375rem] text-center text-[0.78125rem] font-semibold tracking-[0.08em] text-muted-foreground/70 uppercase">
           {trust.title}
         </p>
       ) : null}
       <div className="flex flex-wrap items-center justify-center gap-x-[2.875rem] gap-y-3.5 opacity-70">
         {logos.map((logo) => (
-          <span key={logo} className="landing-trust-logo">
+          <span
+            key={logo}
+            className="text-[1.1875rem] font-semibold tracking-[-0.01em] text-muted-foreground"
+          >
             {logo}
           </span>
         ))}