diff --git a/src/components/CTA.tsx b/src/components/CTA.tsx index 8fa2d73..651d4ce 100644 --- a/src/components/CTA.tsx +++ b/src/components/CTA.tsx @@ -1,22 +1,45 @@ import { Link } from "@tanstack/react-router"; +import { useProduct } from "@/context/ProductContext"; + +interface CTAProps { + ctaHref?: string; +} + +export const CTA = ({ ctaHref }: CTAProps) => { + const { ctaHeadline, ctaButtonText, docsBasePath } = useProduct(); + const href = ctaHref || `${docsBasePath}/installation`; + const isExternal = href.startsWith("http://") || href.startsWith("https://"); -export const CTA = () => { return (

- Ship. + {ctaHeadline}

Join thousands of engineers who replaced six dashboards with one CLI. Install in 30 seconds. Cancel anytime.

- - Start Now - - + {isExternal ? ( + + {ctaButtonText} + + ) : ( + + {ctaButtonText} + + )} + Read the docs
diff --git a/src/components/Commands.tsx b/src/components/Commands.tsx index 083fea2..0d20930 100644 --- a/src/components/Commands.tsx +++ b/src/components/Commands.tsx @@ -1,54 +1,13 @@ import { useState } from "react"; +import { CommandExample } from "@/config/products/types"; -const commands = [ - { - name: "show", - sig: "kdm show ", - desc: "List running runners, pods, containers, or minikube clusters.", - output: `> kdm show pods -NAMESPACE NAME READY STATUS AGE -default api-server-7d4f8b 1/1 Running 3d -default worker-queue-2c9a1 1/1 Running 3d -ingress traefik-controller-x9 1/1 Running 14d -monitoring prometheus-0 2/2 Running 21d`, - }, - { - name: "health", - sig: "kdm health ", - desc: "Detailed health, liveness, and resource pressure diagnostics.", - output: `> kdm health pods -[ok] api-server-7d4f8b healthy cpu 12% mem 248Mi -[ok] worker-queue-2c9a1 healthy cpu 34% mem 512Mi -[warn] log-shipper-abc12 degraded restarts: 3 (last 1h) -[fail] batch-runner-99fa1 failing OOMKilled · 2x in 5m`, - }, - { - name: "watch", - sig: "kdm watch", - desc: "Live monitoring dashboard right inside your terminal.", - output: `> kdm watch -+- Live - 14:02:31 ----------------------------+ -| pods: 24 running · 1 pending · 0 failed | -| cpu: ######======== 62% | -| mem: ####========== 41% | -| net: in 124 MB/s out 38 MB/s | -+----------------------------------------------+`, - }, - { - name: "logs", - sig: "kdm logs ", - desc: "Tail logs with structured parsing and instant search.", - output: `> kdm logs api-server-7d4f8b -f -14:02:30 INFO request GET /api/users 200 12ms -14:02:30 INFO request POST /api/auth 201 48ms -14:02:31 WARN cache miss key=user:8821 -14:02:31 INFO request GET /api/orders 200 18ms`, - }, -]; +export interface CommandsProps { + commands: CommandExample[]; +} -export const Commands = () => { +export const Commands = ({ commands }: CommandsProps) => { const [active, setActive] = useState(0); - const cmd = commands[active]; + const cmd = commands[active] || { sig: "", output: "" }; return (
@@ -62,35 +21,37 @@ export const Commands = () => {
-
-
- {commands.map((c, i) => ( - - ))} -
- -
-
- - {cmd.sig} - + {commands.length > 0 && ( +
+
+ {commands.map((c, i) => ( + + ))}
- 
+
+            

+              

+                
+                  {cmd.sig}
+                
+              

+              
 {cmd.output}
-            

+
+
-
+ )}
); diff --git a/src/components/Features.tsx b/src/components/Features.tsx index 6557e80..0241437 100644 --- a/src/components/Features.tsx +++ b/src/components/Features.tsx @@ -1,45 +1,11 @@ -import { Eye, HeartPulse, Radio, ScrollText, Cloud, Shield } from "lucide-react"; +import { Feature } from "@/config/products/types"; -const features = [ - { - icon: Eye, - title: "Unified visibility", - desc: "Show running pods, containers, runners, and Minikube nodes — across clouds — in a single command.", - cmd: "kdm show ", - }, - { - icon: HeartPulse, - title: "Health diagnostics", - desc: "Probe liveness, readiness, restarts, and resource pressure with intelligent severity scoring.", - cmd: "kdm health ", - }, - { - icon: Radio, - title: "Live watch mode", - desc: "Stream metrics in real time with millisecond updates. Pin services, filter noise, alert on drift.", - cmd: "kdm watch", - }, - { - icon: ScrollText, - title: "Smart log tailing", - desc: "Tail container or pod logs with structured parsing, multi-line stitching, and instant search.", - cmd: "kdm logs ", - }, - { - icon: Cloud, - title: "Cloud-synced state", - desc: "Securely sync cluster state across your team. Share dashboards, runbooks, and incident timelines.", - cmd: "cloud · auto", - }, - { - icon: Shield, - title: "Zero-trust by default", - desc: "Read-only kubeconfig context, scoped tokens, and end-to-end encrypted streams. SOC 2 ready.", - cmd: "built-in", - }, -]; +export interface FeaturesProps { + features: Feature[]; + productName: string; +} -export const Features = () => { +export const Features = ({ features, productName }: FeaturesProps) => { return (
@@ -51,7 +17,7 @@ export const Features = () => { One CLI for the entire stack.

- From local Minikube clusters to multi-region production, KDM gives you the same crisp + From local Minikube clusters to multi-region production, {productName.toUpperCase()} gives you the same crisp experience whether you're debugging on a laptop or paging at 3 AM.

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index dd6889f..dcf65c7 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,13 +1,20 @@ +import { useOptionalProduct } from "@/context/ProductContext"; import { Link } from "@tanstack/react-router"; export const Footer = () => { + const product = useOptionalProduct(); + return ( -