---import { getImage, Image } from "astro:assets";import appIcon from "../assets/icon.webp";import desktopScreenshot from "../assets/app-desktop.webp";import dmSansLatinUrl from "../assets/fonts/dm-sans-latin.woff2?url";import "../styles/fonts.css";import {  ANDROID_PLAY_STORE_URL,  GITHUB_REPOSITORY_URL,  IOS_APP_STORE_URL,  MARKETING_STATS,} from "../lib/site"; interface Props {  title?: string;  description?: string;  pageClass?: string;} const {  title = "T3 Code",  description = "T3 Code. The open-source control plane for coding agents.",  pageClass,} = Astro.props; // Social preview card. Link unfurlers (Instagram, iMessage, X, Slack) want a// 1200x630 jpg or png at an absolute URL. Built from the hero screenshot so it// stays in sync with the homepage.const socialImage = await getImage({  src: desktopScreenshot,  width: 1200,  height: 630,  fit: "cover",  position: "top",  format: "jpg",  quality: 90,});const socialImageUrl = new URL(socialImage.src, Astro.site);const canonicalUrl = new URL(Astro.url.pathname, Astro.site);--- <html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <meta name="description" content={description} />    <link rel="canonical" href={canonicalUrl} />    <meta property="og:type" content="website" />    <meta property="og:site_name" content="T3 Code" />    <meta property="og:url" content={canonicalUrl} />    <meta property="og:title" content={title} />    <meta property="og:description" content={description} />    <meta property="og:image" content={socialImageUrl} />    <meta property="og:image:width" content="1200" />    <meta property="og:image:height" content="630" />    <meta property="og:image:alt" content="The T3 Code desktop app with a thread open." />    <meta name="twitter:card" content="summary_large_image" />    <meta name="twitter:site" content="@t3dotgg" />    <meta name="twitter:title" content={title} />    <meta name="twitter:description" content={description} />    <meta name="twitter:image" content={socialImageUrl} />    <link      rel="preload"      href={dmSansLatinUrl}      as="font"      type="font/woff2"      crossorigin="anonymous"    />    <link rel="icon" href="/favicon.ico" sizes="48x48" />    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />    <title>{title}</title>  </head>  <body>    <div class:list={["page", pageClass]}>      <nav class="nav">        <div class="nav-inner">          <a href="/" class="nav-brand" aria-label="T3 Code home">            <span class="nav-brand-name">T3 Code</span>          </a>          <div class="nav-right">            <a class="nav-link" href="/download">Download</a>            <a              class="nav-stars"              href={GITHUB_REPOSITORY_URL}              target="_blank"              rel="noopener noreferrer"              aria-label={`Star T3 Code on GitHub — ${MARKETING_STATS.githubStars} stars`}            >              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">                <path d="M12 2.3l2.9 5.88 6.49.94-4.7 4.58 1.11 6.47L12 17.12l-5.8 3.05 1.11-6.47-4.7-4.58 6.49-.94L12 2.3z"/>              </svg>              <span><strong>{MARKETING_STATS.githubStars}</strong> GitHub stars</span>            </a>          </div>        </div>      </nav>       <main class="main">        <slot />      </main>       <footer class="footer">        <div class="footer-inner">          <div class="footer-brand">            <Image              src={appIcon}              alt=""              width={20}              height={20}              densities={[1, 2, 3]}              format="webp"              quality={90}              loading="lazy"              decoding="async"            />            <span>&copy; {new Date().getFullYear()} T3 Tools Inc · MIT licensed</span>          </div>          <div class="footer-links">            <a href={GITHUB_REPOSITORY_URL} target="_blank" rel="noopener noreferrer">GitHub</a>            <a href="https://discord.gg/jn4EGJjrvv" target="_blank" rel="noopener noreferrer">Discord</a>            <a href="/download">Download</a>            <a href={IOS_APP_STORE_URL} target="_blank" rel="noopener noreferrer">iOS app</a>            <a href={ANDROID_PLAY_STORE_URL} target="_blank" rel="noopener noreferrer">Android app</a>            <a href="/terms-of-service">Terms</a>            <a href="/privacy-policy">Privacy</a>            <a href="/security-policy">Security</a>          </div>        </div>      </footer>    </div>     <script>      const nav = document.querySelector(".nav");      const onScroll = () => {        if (!nav) return;        if (window.scrollY > 12) nav.classList.add("is-scrolled");        else nav.classList.remove("is-scrolled");      };      window.addEventListener("scroll", onScroll, { passive: true });      onScroll();    </script>  </body></html> <style is:global>  :root {    --bg: #09090b;    --bg-elev: #0c0c0e;    --bg-card: #111113;    --fg: #fafafa;    --fg-muted: #a1a1aa;    --fg-dim: #71717a;    --fg-faint: #52525b;    --border: rgba(255, 255, 255, 0.08);    --border-strong: rgba(255, 255, 255, 0.14);    --accent-h: 250;    --accent: oklch(0.68 0.17 var(--accent-h));    --accent-dim: oklch(0.68 0.17 var(--accent-h) / 0.15);    --ok: oklch(0.72 0.16 150);    --warn: oklch(0.76 0.15 75);    --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;    --radius: 12px;    --radius-sm: 8px;    --radius-lg: 16px;  }   * {    box-sizing: border-box;    margin: 0;    padding: 0;  }   html {    color-scheme: dark;    scroll-behavior: smooth;  }   body {    background: var(--bg);    color: var(--fg);    font-family: var(--font-sans);    font-feature-settings: "ss01", "ss02";    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    min-height: 100vh;    overflow-x: hidden;    line-height: 1.5;  }   body::after {    content: "";    position: fixed;    inset: 0;    pointer-events: none;    opacity: 0.035;    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");    background-repeat: repeat;    background-size: 256px 256px;    z-index: 9999;  }   a {    color: inherit;    text-decoration: none;  }   button {    font-family: inherit;    cursor: pointer;    border: 0;    background: none;    color: inherit;  }   img,  svg {    display: block;    max-width: 100%;  }   .eyebrow {    font-family: var(--font-mono);    font-size: 11px;    letter-spacing: 0.14em;    text-transform: uppercase;    color: var(--fg-dim);    font-weight: 500;  }   .display {    font-weight: 500;    letter-spacing: -0.035em;    line-height: 1.05;  }   .container {    width: 100%;    max-width: 1240px;    margin: 0 auto;    padding: 0 32px;  }   .btn {    display: inline-flex;    align-items: center;    justify-content: center;    gap: 8px;    font-weight: 500;    font-size: 14px;    padding: 10px 18px;    border-radius: 8px;    transition: transform 0.18s ease, background 0.18s ease,      border-color 0.18s ease, color 0.18s ease;    white-space: nowrap;  }   .btn-primary {    background: var(--fg);    color: #09090b;    font-weight: 600;  }   .btn-primary:hover {    transform: translateY(-1px);    background: #fff;  }   .btn-primary:active {    transform: translateY(0);  }   .btn-ghost {    color: var(--fg-muted);    border: 1px solid var(--border);    background: transparent;  }   .btn-ghost:hover {    color: var(--fg);    border-color: var(--border-strong);    background: rgba(255, 255, 255, 0.02);  }   .btn-lg {    padding: 14px 22px;    font-size: 15px;    border-radius: 10px;  }   .tile {    position: relative;    border: 1px solid var(--border);    border-radius: var(--radius);    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0));    overflow: hidden;  }   :focus-visible {    outline: 2px solid var(--accent);    outline-offset: 2px;    border-radius: 4px;  }   @keyframes fade-in {    from {      opacity: 0;      transform: translateY(8px);    }    to {      opacity: 1;      transform: translateY(0);    }  }   /* Page-load sequence: [data-rise] plays once with delay --d. */  @keyframes rise {    from { opacity: 0; transform: translateY(16px); }    to { opacity: 1; transform: none; }  }  [data-rise] {    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;    animation-delay: var(--d, 0ms);  }  @media (prefers-reduced-motion: reduce) {    [data-rise] { animation: none; }  }</style> <style>  .page {    min-height: 100vh;    display: flex;    flex-direction: column;    overflow-x: clip;  }   .nav {    position: sticky;    top: 0;    z-index: 50;    backdrop-filter: blur(18px);    -webkit-backdrop-filter: blur(18px);    background: color-mix(in srgb, var(--bg) 75%, transparent);    border-bottom: 1px solid transparent;    transition: border-color 0.3s ease;  }   .nav.is-scrolled {    border-bottom-color: var(--border);  }   .nav-inner {    max-width: 1240px;    margin: 0 auto;    padding: 12px 32px;    display: flex;    align-items: center;    justify-content: space-between;    gap: 24px;  }   .nav-brand {    display: inline-flex;    align-items: center;    color: var(--fg);    transition: color 0.2s ease;  }   .nav-brand:hover {    color: #fff;  }   .nav-brand-name {    font-size: 16px;    font-weight: 650;    letter-spacing: -0.025em;    line-height: 1;  }   .nav-right {    display: inline-flex;    align-items: center;    gap: 8px;  }   .nav-link {    padding: 0 10px;    color: var(--fg-muted);    font-size: 13px;    letter-spacing: -0.01em;    white-space: nowrap;    transition: color 0.18s ease;  }   .nav-link:hover {    color: var(--fg);  }   .nav-stars {    display: inline-flex;    align-items: center;    gap: 7px;    height: 36px;    padding: 0 14px;    border: 1px solid var(--border);    border-radius: 999px;    background: rgba(255, 255, 255, 0.02);    color: var(--fg-muted);    font-size: 13px;    letter-spacing: -0.01em;    white-space: nowrap;    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;  }   .nav-stars:hover {    color: var(--fg);    border-color: var(--border-strong);    background: rgba(255, 255, 255, 0.04);  }   .nav-stars strong {    color: var(--fg);    font-weight: 600;  }   .nav-stars svg {    color: var(--warn);    flex-shrink: 0;  }   .main {    flex: 1;    display: flex;    flex-direction: column;  }   .footer {    margin-top: auto;    border-top: 1px solid var(--border);    padding: 40px 0 32px;  }   .footer-inner {    max-width: 1240px;    margin: 0 auto;    padding: 0 32px;    display: flex;    flex-wrap: wrap;    gap: 24px;    align-items: center;    justify-content: space-between;  }   .footer-brand {    display: flex;    align-items: center;    gap: 10px;    font-size: 13px;    color: var(--fg-dim);  }   .footer-brand img {    width: 20px;    height: 20px;    border-radius: 4px;  }   .footer-links {    display: flex;    flex-wrap: wrap;    justify-content: flex-end;    gap: 20px;  }   .footer-links a {    font-size: 13px;    color: var(--fg-dim);    transition: color 0.2s ease;  }   .footer-links a:hover {    color: var(--fg);  }   @media (max-width: 820px) {    .nav-inner,    .footer-inner {      padding-left: 20px;      padding-right: 20px;    }     .legal-document-page .nav {      display: none;    }     .footer {      padding-bottom: max(32px, env(safe-area-inset-bottom));

Lines 1–500 of 530. Load more