(null);
+
+ const [reducedMotion, setReducedMotion] = useState(() => {
+ if (typeof window === "undefined") return false;
+ return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ });
+
+ const [threadsActive, setThreadsActive] = useState(false);
+
+ const setStatus = useCallback(
+ (status: "connected" | "disconnected" | "reconnecting") => {
+ if (!statusRef.current || !statusTextRef.current) return;
+ statusRef.current.className = `status-dot ${status}`;
+ statusTextRef.current.textContent =
+ status === "connected"
+ ? "Connected"
+ : status === "disconnected"
+ ? "Disconnected"
+ : "Reconnecting...";
+
+ if (status === "reconnecting") {
+ retryCountRef.current += 1;
+ }
+
+ if (rttRef.current) {
+ rttRef.current.textContent =
+ status === "connected"
+ ? "rtt: n/a"
+ : status === "reconnecting"
+ ? "rtt: negotiating"
+ : "rtt: offline";
+ }
+ if (retriesRef.current) {
+ retriesRef.current.textContent = `retries: ${retryCountRef.current}`;
+ }
+ if (bufferRef.current) {
+ bufferRef.current.textContent =
+ status === "reconnecting" ? "buffer: replaying" : "buffer: persisted";
+ }
+ },
+ [],
+ );
+
+ const typeText = useCallback(
+ (element: HTMLElement, text: string, speed: number = 0.03): gsap.core.Tween => {
+ return gsap.to(element, {
+ duration: text.length * speed,
+ text: { value: text, delimiter: "" },
+ ease: "none",
+ });
+ },
+ [],
+ );
+
+ useEffect(() => {
+ const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+ const onChange = () => setReducedMotion(mql.matches);
+ onChange();
+ mql.addEventListener("change", onChange);
+ return () => mql.removeEventListener("change", onChange);
+ }, []);
+
+ // Stop the WebGL background when hero isn't visible (prevents scroll jank).
+ useEffect(() => {
+ if (reducedMotion) {
+ setThreadsActive(false);
+ return;
+ }
+ const hero = heroSectionRef.current;
+ if (!hero) return;
+
+ const observer = new IntersectionObserver(
+ ([entry]) => setThreadsActive(entry.isIntersecting),
+ { threshold: 0.08 },
+ );
+ observer.observe(hero);
+ return () => observer.disconnect();
+ }, [reducedMotion]);
+
+ // Hero entrance + terminal timeline.
+ useEffect(() => {
+ if (reducedMotion) {
+ setStatus("connected");
+ const term = terminalBodyRef.current;
+ if (term) {
+ term.innerHTML = `
+ $ ${TERMINAL_SEQUENCE.initialCommand}
+ ${TERMINAL_SEQUENCE.connectionOutput[0]}
+ ${TERMINAL_SEQUENCE.connectionOutput[1]}
+ ${TERMINAL_SEQUENCE.sessionStart} ${TERMINAL_SEQUENCE.typedCommand}
+ ${TERMINAL_SEQUENCE.deployOutput.join("
")}
+ Session restored. Deployment successful.
+ ${TERMINAL_SEQUENCE.finalPrompt}
+ `;
+ }
+ return;
+ }
+
+ const ctx = gsap.context(() => {
+ // Ensure CTAs are visible even if an animation gets interrupted.
+ if (ctaRef.current) {
+ gsap.set(ctaRef.current.children, { opacity: 1, y: 0 });
+ }
+
+ if (navRef.current) {
+ gsap.from(navRef.current, {
+ opacity: 0,
+ y: -10,
+ duration: 0.55,
+ ease: "power2.out",
+ delay: 0.1,
+ });
+ }
+
+ if (heroTitleRef.current) {
+ gsap.from(heroTitleRef.current, {
+ opacity: 0,
+ y: 16,
+ filter: "blur(10px)",
+ duration: 0.85,
+ ease: "power3.out",
+ delay: 0.05,
+ onComplete: () => {
+ gsap.set(heroTitleRef.current, { clearProps: "filter" });
+ },
+ });
+ }
+
+ if (heroUnderlineRef.current) {
+ gsap.fromTo(
+ heroUnderlineRef.current,
+ { scaleX: 0 },
+ {
+ scaleX: 1,
+ duration: 0.9,
+ ease: "power3.out",
+ delay: 0.22,
+ },
+ );
+ }
+
+ if (terminalContainerRef.current) {
+ gsap.from(terminalContainerRef.current, {
+ opacity: 0,
+ y: 14,
+ duration: 0.65,
+ ease: "power3.out",
+ delay: 0.22,
+ });
+ }
+
+ if (ctaRef.current) {
+ gsap.from(ctaRef.current.children, {
+ opacity: 0,
+ y: 12,
+ duration: 0.5,
+ ease: "power2.out",
+ stagger: 0.12,
+ delay: 0.35,
+ });
+ }
+
+ if (versionRef.current) {
+ gsap.from(versionRef.current, {
+ opacity: 0,
+ duration: 0.4,
+ delay: 0.55,
+ });
+ }
+
+ // Terminal build DOM once, then animate.
+ setStatus("connected");
+
+ const term = terminalBodyRef.current;
+ if (!term) return;
+ term.innerHTML = "";
+
+ const makeLine = (html: string, extraClass: string = "") => {
+ const el = document.createElement("div");
+ el.className = `terminal-line${extraClass ? ` ${extraClass}` : ""}`;
+ el.innerHTML = html === "" ? " " : html;
+ term.appendChild(el);
+ return el;
+ };
+
+ const hide = (el: Element) => gsap.set(el, { autoAlpha: 0 });
+
+ // Command 1
+ const cmd1Line = makeLine(
+ `$ ` +
+ `` +
+ ` `,
+ );
+ const cmd1Text = cmd1Line.querySelector(".terminal-typed-text");
+ const cmd1Cursor = cmd1Line.querySelector(".terminal-typing-cursor-1");
+
+ const connectionLines = TERMINAL_SEQUENCE.connectionOutput.map((line) => {
+ const el = makeLine(line);
+ hide(el);
+ return el;
+ });
+
+ // Command 2
+ const cmd2Line = makeLine(
+ `${TERMINAL_SEQUENCE.sessionStart} ` +
+ `` +
+ ` `,
+ );
+ hide(cmd2Line);
+ const cmd2Text = cmd2Line.querySelector(".terminal-typed-text");
+ const cmd2Cursor = cmd2Line.querySelector(".terminal-typing-cursor-2");
+
+ const deployLines = TERMINAL_SEQUENCE.deployOutput.map((line) => {
+ const el = makeLine(line);
+ hide(el);
+ return el;
+ });
+
+ const disconnectLine = makeLine(
+ `[${TERMINAL_SEQUENCE.disconnectMessage}] `,
+ "disconnect-msg",
+ );
+ hide(disconnectLine);
+
+ const reconnectLine1 = makeLine(
+ `${TERMINAL_SEQUENCE.reconnectMessages[0]} `,
+ );
+ const reconnectLine2 = makeLine(
+ `${TERMINAL_SEQUENCE.reconnectMessages[1]} `,
+ );
+ hide(reconnectLine1);
+ hide(reconnectLine2);
+
+ const resumeLines = TERMINAL_SEQUENCE.resumeOutput.map((line) => {
+ const el = makeLine(line);
+ hide(el);
+ return el;
+ });
+
+ const finalPromptLine = makeLine(
+ `` +
+ `${TERMINAL_SEQUENCE.finalPrompt} ` +
+ ` `,
+ );
+ hide(finalPromptLine);
+
+ if (cmd1Text) cmd1Text.textContent = "";
+ if (cmd2Text) cmd2Text.textContent = "";
+
+ const masterTl = gsap.timeline({ delay: 0.55 });
+
+ // Type cmd1 (solid cursor), then blink briefly, then hide cursor.
+ if (cmd1Text) masterTl.add(typeText(cmd1Text, TERMINAL_SEQUENCE.initialCommand, 0.04));
+ if (cmd1Cursor) {
+ masterTl.add(() => cmd1Cursor.classList.remove("terminal-typing-cursor"), "+=0.02");
+ masterTl.add(() => {}, "+=0.22");
+ masterTl.set(cmd1Cursor, { autoAlpha: 0 });
+ }
+
+ masterTl.to(connectionLines, { autoAlpha: 1, duration: 0.01, stagger: 0.12 }, "+=0.06");
+
+ masterTl.to(cmd2Line, { autoAlpha: 1, duration: 0.01 }, "+=0.12");
+ if (cmd2Text) masterTl.add(typeText(cmd2Text, TERMINAL_SEQUENCE.typedCommand, 0.035));
+ if (cmd2Cursor) {
+ masterTl.add(() => cmd2Cursor.classList.remove("terminal-typing-cursor"), "+=0.02");
+ masterTl.add(() => {}, "+=0.22");
+ masterTl.set(cmd2Cursor, { autoAlpha: 0 });
+ }
+
+ masterTl.to(deployLines, { autoAlpha: 1, duration: 0.01, stagger: 0.14 }, "+=0.18");
+
+ // Disconnect
+ masterTl.add(() => {
+ setStatus("disconnected");
+ flashRef.current?.classList.add("active");
+ glitchContainerRef.current?.classList.add("glitch-active", "terminal-shake");
+ scanlineRef.current?.classList.add("active");
+ }, "+=1.25");
+ masterTl.set(disconnectLine, { autoAlpha: 1 });
+ masterTl.add(() => {
+ flashRef.current?.classList.remove("active");
+ }, "+=0.2");
+
+ // Hold glitch
+ masterTl.add(() => {}, "+=0.8");
+
+ // Reconnect
+ masterTl.add(() => {
+ setStatus("reconnecting");
+ glitchContainerRef.current?.classList.remove("glitch-active", "terminal-shake");
+ scanlineRef.current?.classList.remove("active");
+ }, "+=0.25");
+ masterTl.set(reconnectLine1, { autoAlpha: 1 });
+
+ masterTl.add(() => {
+ setStatus("connected");
+ }, "+=0.85");
+ masterTl.set(reconnectLine2, { autoAlpha: 1 });
+
+ // Resume output
+ masterTl.to(resumeLines, { autoAlpha: 1, duration: 0.01, stagger: 0.11 }, "+=0.35");
+
+ // Final prompt with blinking cursor
+ masterTl.set(finalPromptLine, { autoAlpha: 1 }, "+=1.05");
+ });
+
+ return () => {
+ ctx.revert();
+ };
+ }, [reducedMotion, setStatus, typeText]);
+
+ // Cascading scroll reveals for the rest of the page.
+ useEffect(() => {
+ if (reducedMotion) return;
+
+ const groups = Array.from(
+ document.querySelectorAll("[data-reveal-group]"),
+ );
+
+ const getItems = (group: HTMLElement) => {
+ const items = Array.from(
+ group.querySelectorAll("[data-reveal-item]"),
+ );
+ return items.length ? items : [group];
+ };
+
+ for (const group of groups) {
+ const items = getItems(group);
+ gsap.set(items, { autoAlpha: 0, x: 18, filter: "blur(6px)" });
+ }
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ for (const entry of entries) {
+ if (!entry.isIntersecting) continue;
+ const group = entry.target as HTMLElement;
+ observer.unobserve(group);
+ const items = getItems(group);
+
+ gsap.to(items, {
+ autoAlpha: 1,
+ x: 0,
+ filter: "blur(0px)",
+ duration: 0.7,
+ ease: "power3.out",
+ stagger: 0.085,
+ onComplete: () => {
+ gsap.set(items, { clearProps: "filter" });
+ },
+ });
+ }
+ },
+ { threshold: 0.18 },
+ );
+
+ for (const group of groups) observer.observe(group);
+ return () => observer.disconnect();
+ }, [reducedMotion]);
+
+ return (
+
+
+
+
+
+ {/* Navigation */}
+
+
+
+
+
+
+
+
+
+
+ {/* Hero */}
+
+ {threadsActive ? (
+
+
+ ) : null}
+
+
+
+
+
+ Windows-native persistent terminal sessions.
+
+
+
+
+
+
+
+
+
+
+
+ {/* Status rail */}
+
+
+ STATUS
+
+
+
+ Connected
+
+
+
+
rtt: n/a
+
retries: 0
+
buffer: persisted
+
+
+
+ {/* Terminal */}
+
+
+
UT://
+
prod/deploy
+
transport:
+
ssh
+
+
session:persist
+
+
+
+
+
+
+
+
+
+ Windows 10 build 17763+ · MIT License
+
+
+
+
+
+
+
+
+ {/* Final CTA */}
+
+
+
+ Stop losing sessions.
+
+
+ Free and open source. Download now or read the docs.
+
+
+
+
+
+
= ({
+ color = [1, 1, 1],
+ amplitude = 1,
+ distance = 0,
+ enableMouseInteraction = false,
+ className = '',
+ ...rest
+}) => {
+ const containerRef = useRef(null);
+ const animationFrameId = useRef(0);
+
+ useEffect(() => {
+ if (!containerRef.current) return;
+ const container = containerRef.current;
+
+ const renderer = new Renderer({ alpha: true });
+ const gl = renderer.gl;
+ gl.clearColor(0, 0, 0, 0);
+ gl.enable(gl.BLEND);
+ gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+ container.appendChild(gl.canvas);
+
+ const geometry = new Triangle(gl);
+ const program = new Program(gl, {
+ vertex: vertexShader,
+ fragment: fragmentShader,
+ uniforms: {
+ iTime: { value: 0 },
+ iResolution: {
+ value: new Color(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height)
+ },
+ uColor: { value: new Color(...color) },
+ uAmplitude: { value: amplitude },
+ uDistance: { value: distance },
+ uMouse: { value: new Float32Array([0.5, 0.5]) }
+ }
+ });
+
+ const mesh = new Mesh(gl, { geometry, program });
+
+ function resize() {
+ const { clientWidth, clientHeight } = container;
+ renderer.setSize(clientWidth, clientHeight);
+ program.uniforms.iResolution.value.r = clientWidth;
+ program.uniforms.iResolution.value.g = clientHeight;
+ program.uniforms.iResolution.value.b = clientWidth / clientHeight;
+ }
+ window.addEventListener('resize', resize);
+ resize();
+
+ let currentMouse = [0.5, 0.5];
+ let targetMouse = [0.5, 0.5];
+
+ function handleMouseMove(e: MouseEvent) {
+ const rect = container.getBoundingClientRect();
+ const x = (e.clientX - rect.left) / rect.width;
+ const y = 1.0 - (e.clientY - rect.top) / rect.height;
+ targetMouse = [x, y];
+ }
+ function handleMouseLeave() {
+ targetMouse = [0.5, 0.5];
+ }
+ if (enableMouseInteraction) {
+ container.addEventListener('mousemove', handleMouseMove);
+ container.addEventListener('mouseleave', handleMouseLeave);
+ }
+
+ function update(t: number) {
+ if (enableMouseInteraction) {
+ const smoothing = 0.05;
+ currentMouse[0] += smoothing * (targetMouse[0] - currentMouse[0]);
+ currentMouse[1] += smoothing * (targetMouse[1] - currentMouse[1]);
+ program.uniforms.uMouse.value[0] = currentMouse[0];
+ program.uniforms.uMouse.value[1] = currentMouse[1];
+ } else {
+ program.uniforms.uMouse.value[0] = 0.5;
+ program.uniforms.uMouse.value[1] = 0.5;
+ }
+ program.uniforms.iTime.value = t * 0.001;
+
+ renderer.render({ scene: mesh });
+ animationFrameId.current = requestAnimationFrame(update);
+ }
+ animationFrameId.current = requestAnimationFrame(update);
+
+ return () => {
+ if (animationFrameId.current) cancelAnimationFrame(animationFrameId.current);
+ window.removeEventListener('resize', resize);
+
+ if (enableMouseInteraction) {
+ container.removeEventListener('mousemove', handleMouseMove);
+ container.removeEventListener('mouseleave', handleMouseLeave);
+ }
+ if (container.contains(gl.canvas)) container.removeChild(gl.canvas);
+ gl.getExtension('WEBGL_lose_context')?.loseContext();
+ };
+ }, [color, amplitude, distance, enableMouseInteraction]);
+
+ return
;
+};
+
+export default Threads;
diff --git a/landing/src/components/discrete-tabs.tsx b/landing/src/components/discrete-tabs.tsx
new file mode 100644
index 0000000..1cd150f
--- /dev/null
+++ b/landing/src/components/discrete-tabs.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion } from "motion/react";
+import type { LucideIcon } from "lucide-react";
+import { Link2, Server, Terminal } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type DiscreteTabsItem = {
+ id: string;
+ label: string;
+ icon: LucideIcon;
+};
+
+const DEFAULT_TABS: DiscreteTabsItem[] = [
+ { id: "server", label: "Server", icon: Server },
+ { id: "session", label: "Session", icon: Terminal },
+ { id: "reconnect", label: "Reconnect", icon: Link2 },
+];
+
+export default function DiscreteTabs({
+ items = DEFAULT_TABS,
+ value,
+ onValueChange,
+ className,
+}: {
+ items?: DiscreteTabsItem[];
+ value?: string;
+ onValueChange?: (value: string) => void;
+ className?: string;
+}) {
+ const [internalValue, setInternalValue] = useState(items[0]?.id ?? "");
+ const activeValue = value ?? internalValue;
+
+ useEffect(() => {
+ if (items.length === 0) return;
+ if (!items.some((t) => t.id === activeValue)) {
+ const next = items[0].id;
+ if (value === undefined) setInternalValue(next);
+ onValueChange?.(next);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [items]);
+
+ const setActive = (next: string) => {
+ if (value === undefined) setInternalValue(next);
+ onValueChange?.(next);
+ };
+
+ return (
+
+ {items.map((tab) => (
+ setActive(tab.id)}
+ />
+ ))}
+
+ );
+}
+
+function TabButton({
+ tab,
+ isActive,
+ onClick,
+}: {
+ tab: DiscreteTabsItem;
+ isActive: boolean;
+ onClick: () => void;
+}) {
+ const Icon = tab.icon;
+
+ return (
+
+
+
+
+
+ {isActive && (
+
+ {tab.label}
+
+ )}
+
+
+ );
+}
diff --git a/landing/src/components/faqs.tsx b/landing/src/components/faqs.tsx
new file mode 100644
index 0000000..d01e9c1
--- /dev/null
+++ b/landing/src/components/faqs.tsx
@@ -0,0 +1,59 @@
+export default function FAQs() {
+ return (
+
+
+
+
+
+ Questions, answered.
+
+
+ Undying Terminal is small on purpose. Here are the sharp edges up
+ front.
+
+
+
+
+
+
Is this a tmux replacement?
+
+ Similar goal (don't lose state), different focus: Windows-native
+ client + server-persisted sessions. You can still use tmux/screen
+ inside the session if you want.
+
+
+
+
+
Is the connection encrypted?
+
+ Yes. Traffic runs over SSH so it's authenticated and encrypted.
+ You bring your own server; nothing is routed through a third
+ party.
+
+
+
+
+
Do I need WSL?
+
+ No. Undying Terminal is built for Windows and uses ConPTY, so it
+ behaves like a native terminal.
+
+
+
+
+
What happens during a network drop?
+
+ The session stays alive on the server. When the client comes
+ back, it reconnects and resumes where you left off.
+
+
+
+
+
+ );
+}
diff --git a/landing/src/components/features-1.tsx b/landing/src/components/features-1.tsx
new file mode 100644
index 0000000..2672e37
--- /dev/null
+++ b/landing/src/components/features-1.tsx
@@ -0,0 +1,91 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Lock, RotateCcw, Terminal } from "lucide-react";
+import type { ReactNode } from "react";
+
+export default function Features() {
+ return (
+
+
+
+
+ Built to survive disconnects
+
+
+ Sessions persist on the server and reconnect over SSH, so you keep
+ working through sleep, VPN flips, and network drops.
+
+
+
+
+
+
+
+
+
+ Persistent
+
+
+
+
+ Your shell keeps running on the server. Disconnect and come back
+ later: same state, same prompt.
+
+
+
+
+
+
+
+
+
+ Encrypted
+
+
+
+
+ Transport is SSH: authenticated and encrypted end-to-end. No
+ cloud relay, no third parties.
+
+
+
+
+
+
+
+
+
+ Windows-native
+
+
+
+
+ Built for Windows with ConPTY support. No WSL required. A single
+ binary that runs anywhere.
+
+
+
+
+
+ );
+}
+
+const CardDecorator = ({ children }: { children: ReactNode }) => (
+
+);
diff --git a/landing/src/components/footer.tsx b/landing/src/components/footer.tsx
new file mode 100644
index 0000000..2f30540
--- /dev/null
+++ b/landing/src/components/footer.tsx
@@ -0,0 +1,51 @@
+import { Logo } from "@/components/logo";
+import Link from "next/link";
+
+const links = [
+ { title: "Features", href: "#features" },
+ { title: "Quickstart", href: "https://undyingterminal.com/docs/quickstart", external: true },
+ { title: "Docs", href: "https://undyingterminal.com/docs/introduction", external: true },
+ { title: "Releases", href: "https://github.com/Microck/UndyingTerminal/releases/latest", external: true },
+ { title: "GitHub", href: "https://github.com/Microck/UndyingTerminal", external: true },
+ { title: "FAQ", href: "#faq" },
+];
+
+export default function FooterSection() {
+ return (
+
+
+
+
+
+
+
+ {links.map((link) => {
+ const common = "text-muted-foreground hover:text-primary block duration-150";
+ if (link.external) {
+ return (
+
+ {link.title}
+
+ );
+ }
+ return (
+
+
{link.title}
+
+ );
+ })}
+
+
+
+ © {new Date().getFullYear()} Undying Terminal — MIT License
+
+
+ );
+}
diff --git a/landing/src/components/logo.tsx b/landing/src/components/logo.tsx
new file mode 100644
index 0000000..9cc6c3d
--- /dev/null
+++ b/landing/src/components/logo.tsx
@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils";
+
+export function Logo({ className }: { className?: string }) {
+ return (
+
+
+
+
+
+
+
+
Undying Terminal
+
(null);
+ const containerRef = useRef(null);
+
+ const [contentRef, contentBounds] = useMeasure();
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ containerRef.current &&
+ !containerRef.current.contains(event.target as Node)
+ ) {
+ setIsOpen(false);
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener("mousedown", handleClickOutside);
+ }
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, [isOpen]);
+
+ const selectItem = (item: MenuItem) => {
+ if (item.divider || !item.href) return;
+
+ setActiveItem(item.id);
+ setIsOpen(false);
+
+ if (item.href.startsWith("#")) {
+ const target = document.querySelector(item.href);
+ target?.scrollIntoView({ behavior: "smooth", block: "start" });
+ window.history.replaceState(null, "", item.href);
+ return;
+ }
+
+ if (item.external) {
+ window.open(item.href, "_blank", "noopener,noreferrer");
+ return;
+ }
+
+ window.location.assign(item.href);
+ };
+
+ const openHeight = Math.max(40, Math.ceil(contentBounds.height));
+ return (
+
+
!isOpen && setIsOpen(true)}
+ >
+
+
+
+ {/* Menu Content - visible when open */}
+
+
+
+ {menuItems.map((item, index) => {
+ if (item.divider) {
+ return (
+ selectItem(item)}
+ onMouseEnter={() => setHoveredItem(item.id)}
+ onMouseLeave={() => setHoveredItem(null)}
+ className={`relative flex items-center gap-3 rounded-lg text-sm cursor-pointer transition-colors duration-200 ease-out m-0! pl-3! py-2! ${
+ isActive
+ ? "text-foreground"
+ : "text-muted-foreground hover:text-foreground"
+ }`}
+ >
+ {/* Hover/Active background indicator */}
+ {showIndicator && (
+
+ {item.label}
+
+
+ );
+ })}
+
+
+
+
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/landing/src/components/ui/light-rays.tsx b/landing/src/components/ui/light-rays.tsx
new file mode 100644
index 0000000..e0a2ca1
--- /dev/null
+++ b/landing/src/components/ui/light-rays.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { useEffect, useState, type CSSProperties } from "react";
+import { motion } from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+interface LightRaysProps extends React.HTMLAttributes {
+ ref?: React.Ref;
+ count?: number;
+ color?: string;
+ blur?: number;
+ speed?: number;
+ length?: string;
+}
+
+type LightRay = {
+ id: string;
+ left: number;
+ rotate: number;
+ width: number;
+ swing: number;
+ delay: number;
+ duration: number;
+ intensity: number;
+};
+
+const createRays = (count: number, cycle: number): LightRay[] => {
+ if (count <= 0) return [];
+
+ return Array.from({ length: count }, (_, index) => {
+ const left = 8 + Math.random() * 84;
+ const rotate = -28 + Math.random() * 56;
+ const width = 160 + Math.random() * 160;
+ const swing = 0.8 + Math.random() * 1.8;
+ const delay = Math.random() * cycle;
+ const duration = cycle * (0.75 + Math.random() * 0.5);
+ const intensity = 0.6 + Math.random() * 0.5;
+
+ return {
+ id: `${index}-${Math.round(left * 10)}`,
+ left,
+ rotate,
+ width,
+ swing,
+ delay,
+ duration,
+ intensity,
+ };
+ });
+};
+
+const Ray = ({
+ left,
+ rotate,
+ width,
+ swing,
+ delay,
+ duration,
+ intensity,
+}: LightRay) => {
+ return (
+ ([]);
+ const cycleDuration = Math.max(speed, 0.1);
+
+ useEffect(() => {
+ setRays(createRays(count, cycleDuration));
+ }, [count, cycleDuration]);
+
+ return (
+
+
+
+
+ {rays.map((ray) => (
+
+ ))}
+
+
= ({
+ text,
+ disabled = false,
+ speed = 2,
+ className = "",
+ color = "#b5b5b5",
+ shineColor = "#ffffff",
+ spread = 120,
+ yoyo = false,
+ pauseOnHover = false,
+ direction = "left",
+ delay = 0,
+}) => {
+ const [isPaused, setIsPaused] = useState(false);
+ const progress = useMotionValue(0);
+ const elapsedRef = useRef(0);
+ const lastTimeRef = useRef(null);
+ const directionRef = useRef(direction === "left" ? 1 : -1);
+
+ const animationDuration = speed * 1000;
+ const delayDuration = delay * 1000;
+
+ useAnimationFrame((time) => {
+ if (disabled || isPaused) {
+ lastTimeRef.current = null;
+ return;
+ }
+
+ if (lastTimeRef.current === null) {
+ lastTimeRef.current = time;
+ return;
+ }
+
+ const deltaTime = time - lastTimeRef.current;
+ lastTimeRef.current = time;
+
+ elapsedRef.current += deltaTime;
+
+ if (yoyo) {
+ const cycleDuration = animationDuration + delayDuration;
+ const fullCycle = cycleDuration * 2;
+ const cycleTime = elapsedRef.current % fullCycle;
+
+ if (cycleTime < animationDuration) {
+ const p = (cycleTime / animationDuration) * 100;
+ progress.set(directionRef.current === 1 ? p : 100 - p);
+ } else if (cycleTime < cycleDuration) {
+ progress.set(directionRef.current === 1 ? 100 : 0);
+ } else if (cycleTime < cycleDuration + animationDuration) {
+ const reverseTime = cycleTime - cycleDuration;
+ const p = 100 - (reverseTime / animationDuration) * 100;
+ progress.set(directionRef.current === 1 ? p : 100 - p);
+ } else {
+ progress.set(directionRef.current === 1 ? 0 : 100);
+ }
+ } else {
+ const cycleDuration = animationDuration + delayDuration;
+ const cycleTime = elapsedRef.current % cycleDuration;
+
+ if (cycleTime < animationDuration) {
+ const p = (cycleTime / animationDuration) * 100;
+ progress.set(directionRef.current === 1 ? p : 100 - p);
+ } else {
+ progress.set(directionRef.current === 1 ? 100 : 0);
+ }
+ }
+ });
+
+ useEffect(() => {
+ directionRef.current = direction === "left" ? 1 : -1;
+ elapsedRef.current = 0;
+ progress.set(0);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [direction]);
+
+ const backgroundPosition = useTransform(progress, (p) => `${150 - p * 2}% center`);
+
+ const handleMouseEnter = useCallback(() => {
+ if (pauseOnHover) setIsPaused(true);
+ }, [pauseOnHover]);
+
+ const handleMouseLeave = useCallback(() => {
+ if (pauseOnHover) setIsPaused(false);
+ }, [pauseOnHover]);
+
+ const gradientStyle: React.CSSProperties = {
+ backgroundImage: `linear-gradient(${spread}deg, ${color} 0%, ${color} 35%, ${shineColor} 50%, ${color} 65%, ${color} 100%)`,
+ backgroundSize: "200% auto",
+ WebkitBackgroundClip: "text",
+ backgroundClip: "text",
+ WebkitTextFillColor: "transparent",
+ };
+
+ return (
+
+ {text}
+
+ );
+};
diff --git a/landing/src/components/ui/skiper-ui/skiper40.tsx b/landing/src/components/ui/skiper-ui/skiper40.tsx
new file mode 100644
index 0000000..384e9d8
--- /dev/null
+++ b/landing/src/components/ui/skiper-ui/skiper40.tsx
@@ -0,0 +1,266 @@
+"use client";
+
+import Link from "next/link";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Skiper40 = () => {
+ return (
+
+
+ hi@skiper-ui.com
+ hi@skiper-ui.com
+ hi@skiper-ui.com
+ hi@skiper-ui.com
+ hi@skiper-ui.com
+
+
+ );
+};
+
+export { Link000, Link001, Link002, Link003, Link004, Link005, Skiper40 };
+
+const Link000 = ({
+ children,
+ href,
+ className,
+}: {
+ children: React.ReactNode;
+ href: string;
+ className?: string;
+}) => {
+ return (
+
+ {children}
+
+
+
+ );
+};
+const Link002 = ({
+ children,
+ href,
+ className,
+}: {
+ children: React.ReactNode;
+ href: string;
+ className?: string;
+}) => {
+ return (
+
+ {children}
+
+
+
+ );
+};
+const Link003 = ({
+ children,
+ href,
+ className,
+}: {
+ children: React.ReactNode;
+ href: string;
+ className?: string;
+}) => {
+ return (
+
+ {children}
+
+
+
+ );
+};
+
+const Link004 = ({
+ children,
+ href,
+ className,
+}: {
+ children: React.ReactNode;
+ href: string;
+ className?: string;
+}) => {
+ return (
+
+ {children}
+
+
+
+ );
+};
+const Link005 = ({
+ children,
+ href,
+ className,
+}: {
+ children: React.ReactNode;
+ href: string;
+ className?: string;
+}) => {
+ return (
+
+ {children}
+
+
+
+ );
+};
+
+/**
+ * Skiper 40 Animated Link — React
+ * Inspired by and adapted from https://cursor.com/?from=home
+ * We respect the original creators. This is an inspired rebuild with our own taste and does not claim any ownership.
+ * These animations aren’t associated with the cursor.com . They’re independent recreations meant to study interaction design
+ *
+ * License & Usage:
+ * - Free to use and modify in both personal and commercial projects.
+ * - Attribution to Skiper UI is required when using the free version.
+ * - No attribution required with Skiper UI Pro.
+ *
+ * Feedback and contributions are welcome.
+ *
+ * Author: @gurvinder-singh02
+ * Website: https://gxuri.in
+ * Twitter: https://x.com/Gur__vi
+ */
diff --git a/landing/src/lib/utils.ts b/landing/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/landing/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/landing/tsconfig.json b/landing/tsconfig.json
new file mode 100644
index 0000000..cb3ec5e
--- /dev/null
+++ b/landing/tsconfig.json
@@ -0,0 +1,43 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": [
+ "./src/*"
+ ]
+ }
+ },
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts",
+ ".next/dev/types/**/*.ts",
+ "**/*.mts",
+ "dist/types/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+}
diff --git a/vercel.json b/vercel.json
index bcdc0f3..fac618f 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,12 +1,62 @@
{
+ "version": 2,
+ "public": true,
+ "cleanUrls": true,
+ "trailingSlash": false,
+ "headers": [
+ {
+ "source": "/(.*)",
+ "headers": [
+ {
+ "key": "X-Content-Type-Options",
+ "value": "nosniff"
+ },
+ {
+ "key": "X-Frame-Options",
+ "value": "DENY"
+ },
+ {
+ "key": "X-XSS-Protection",
+ "value": "1; mode=block"
+ },
+ {
+ "key": "Referrer-Policy",
+ "value": "strict-origin-when-cross-origin"
+ },
+ {
+ "key": "Permissions-Policy",
+ "value": "camera=(), microphone=(), geolocation=(), interest-cohort=()"
+ }
+ ]
+ },
+ {
+ "source": "/(.*)\\.(jpg|jpeg|gif|png|webp|svg|ico|css|js)",
+ "headers": [
+ {
+ "key": "Cache-Control",
+ "value": "public, max-age=31536000, immutable"
+ }
+ ]
+ }
+ ],
"rewrites": [
{
"source": "/docs",
"destination": "https://undyingterminal.mintlify.dev/docs"
},
{
- "source": "/docs/(.*)",
- "destination": "https://undyingterminal.mintlify.dev/docs/$1"
+ "source": "/docs/:match*",
+ "destination": "https://undyingterminal.mintlify.dev/docs/:match*"
+ },
+ {
+ "source": "/",
+ "destination": "/landing/dist/index.html"
+ },
+ {
+ "source": "/(.*)",
+ "destination": "/landing/dist/$1"
}
- ]
+ ],
+ "buildCommand": "cd landing && npm install && npm run build",
+ "outputDirectory": "landing/dist"
}
diff --git a/website-checklist.md b/website-checklist.md
new file mode 100644
index 0000000..3cff1e7
--- /dev/null
+++ b/website-checklist.md
@@ -0,0 +1,57 @@
+## Basics
+- [x] Favicon (favicon.ico generated)
+- [x] Web app manifest (manifest.json created)
+- [x] Theme color meta tag (set in manifest & layout)
+- [ ] robots.txt
+- [ ] sitemap.xml
+- [x] Proper viewport meta tag (in layout.tsx)
+
+## Performance
+- [x] Code splitting (Next.js default)
+- [x] Minified CSS/JS (Next.js default)
+- [x] Image optimization (Next.js unoptimized=true for export, verified in config)
+- [x] Font loading strategy (Next.js font optimization used)
+- [x] Cache headers (Cache-Control configured in vercel.json)
+
+## SEO
+- [x] Unique title tags per page
+- [x] Meta description
+- [ ] Canonical URLs
+- [x] Open Graph tags
+- [x] Twitter Card tags
+- [x] Semantic HTML (nav, main, footer used)
+- [x] Alt text for images (checked icons)
+
+## Accessibility
+- [x] Keyboard navigation support (interactive elements are standard anchors/buttons)
+- [ ] Visible focus indicators
+- [x] Color contrast (Dark mode default, verified text-muted-foreground contrast)
+- [x] Associated form labels (No forms present)
+- [ ] Skip links
+
+## Security
+- [x] HTTPS enforced (Vercel default)
+- [x] Content Security Policy (via vercel.json headers)
+- [x] X-Frame-Options (via vercel.json headers)
+- [x] X-Content-Type-Options (via vercel.json headers)
+- [x] Referrer-Policy (via vercel.json headers)
+- [x] Permissions-Policy (via vercel.json headers)
+
+## UI/UX
+- [x] Responsive design
+- [x] Touch targets >= 44x44 px (Navbar/buttons checked)
+- [ ] Custom 404 page (Next.js default exists, check custom styling)
+- [x] Dark mode support (Forced dark mode in layout)
+- [x] Consistent navigation
+
+## Legal & Privacy
+- [ ] Privacy policy link (if needed for app store/distribution)
+- [ ] Terms of service link
+- [x] Contact information (GitHub/Docs links present)
+- [x] Copyright notice
+
+## Development & Deployment
+- [x] `vercel.json` configuration
+- [x] Build pipeline (`npm run build` works)
+- [x] Linting (ESLint configured)
+- [x] Clean URLs (Vercel default)
+ Download for Windows
+