create-swift-rust 0.3.1 → 0.7.0

package/templates/default/src/components/font-studio.tsx

@@ -0,0 +1,378 @@
+"use client";
+
+import { type ChangeEvent, useEffect, useMemo, useState } from "react";
+import {
+  BebasNeue,
+  BricolageGrotesque,
+  Caveat,
+  Cinzel,
+  DmSans,
+  DmSerifDisplay,
+  Figtree,
+  FiraCode,
+  Geist,
+  GeistMono,
+  IbmPlexMono,
+  IbmPlexSans,
+  IbmPlexSerif,
+  Inter,
+  JetbrainsMono,
+  Lora,
+  Manrope,
+  Outfit,
+  PlayfairDisplay,
+  PlusJakartaSans,
+  Poppins,
+  Roboto,
+  Sora,
+  SourceCodePro,
+  SpaceGrotesk,
+} from "swift-rust/font/google";
+
+type Factory = (opts?: { variable?: boolean }) => {
+  className: string;
+  style: Record<string, string>;
+  variable?: string;
+};
+
+type StudioFont = {
+  name: string;
+  importName: string;
+  factory: Factory;
+  blurb: string;
+};
+
+const STUDIO_FONTS: StudioFont[] = [
+  { name: "Geist", importName: "Geist", factory: Geist as Factory, blurb: "Default UI font" },
+  { name: "Geist Mono", importName: "GeistMono", factory: GeistMono as Factory, blurb: "Default monospace" },
+  { name: "Inter", importName: "Inter", factory: Inter as Factory, blurb: "Designed for screens" },
+  { name: "Roboto", importName: "Roboto", factory: Roboto as Factory, blurb: "Modern, friendly" },
+  { name: "Poppins", importName: "Poppins", factory: Poppins as Factory, blurb: "Geometric, warm" },
+  { name: "Manrope", importName: "Manrope", factory: Manrope as Factory, blurb: "Clean sans for editorial" },
+  { name: "IBM Plex Sans", importName: "IbmPlexSans", factory: IbmPlexSans as Factory, blurb: "Corporate sans" },
+  { name: "Space Grotesk", importName: "SpaceGrotesk", factory: SpaceGrotesk as Factory, blurb: "Quirky display" },
+  { name: "Plus Jakarta Sans", importName: "PlusJakartaSans", factory: PlusJakartaSans as Factory, blurb: "Elegant, modern" },
+  { name: "Outfit", importName: "Outfit", factory: Outfit as Factory, blurb: "Geometric for branding" },
+  { name: "Figtree", importName: "Figtree", factory: Figtree as Factory, blurb: "Friendly, approachable" },
+  { name: "Sora", importName: "Sora", factory: Sora as Factory, blurb: "Clean, made for UI" },
+  { name: "DM Sans", importName: "DmSans", factory: DmSans as Factory, blurb: "Low-contrast geometric" },
+  { name: "Playfair Display", importName: "PlayfairDisplay", factory: PlayfairDisplay as Factory, blurb: "Editorial elegance" },
+  { name: "Lora", importName: "Lora", factory: Lora as Factory, blurb: "Balanced serif" },
+  { name: "DM Serif Display", importName: "DmSerifDisplay", factory: DmSerifDisplay as Factory, blurb: "Editorial display" },
+  { name: "IBM Plex Serif", importName: "IbmPlexSerif", factory: IbmPlexSerif as Factory, blurb: "Corporate serif" },
+  { name: "JetBrains Mono", importName: "JetbrainsMono", factory: JetbrainsMono as Factory, blurb: "Code editor" },
+  { name: "Fira Code", importName: "FiraCode", factory: FiraCode as Factory, blurb: "Monospace ligatures" },
+  { name: "Source Code Pro", importName: "SourceCodePro", factory: SourceCodePro as Factory, blurb: "Adobe monospace" },
+  { name: "IBM Plex Mono", importName: "IbmPlexMono", factory: IbmPlexMono as Factory, blurb: "Corporate mono" },
+  { name: "Bricolage Grotesque", importName: "BricolageGrotesque", factory: BricolageGrotesque as Factory, blurb: "Bold display sans" },
+  { name: "Bebas Neue", importName: "BebasNeue", factory: BebasNeue as Factory, blurb: "All-caps display" },
+  { name: "Cinzel", importName: "Cinzel", factory: Cinzel as Factory, blurb: "Roman capitals" },
+  { name: "Caveat", importName: "Caveat", factory: Caveat as Factory, blurb: "Casual handwriting" },
+];
+
+const WEIGHTS = [
+  { value: 100, label: "Thin", abbr: "100" },
+  { value: 200, label: "ExtraLight", abbr: "200" },
+  { value: 300, label: "Light", abbr: "300" },
+  { value: 400, label: "Regular", abbr: "400" },
+  { value: 500, label: "Medium", abbr: "500" },
+  { value: 600, label: "SemiBold", abbr: "600" },
+  { value: 700, label: "Bold", abbr: "700" },
+  { value: 800, label: "ExtraBold", abbr: "800" },
+  { value: 900, label: "Black", abbr: "900" },
+] as const;
+
+const SAMPLES = [
+  "Beautiful type",
+  "The quick brown fox jumps over the lazy dog",
+  "AaBbCc 1234567890",
+  "Ship fast, sleep well",
+] as const;
+
+function toImportName(name: string): string {
+  return name.replace(/[\s-]+/g, "");
+}
+
+export function FontStudio() {
+  const [fontName, setFontName] = useState("Geist");
+  const [weight, setWeight] = useState(600);
+  const [italic, setItalic] = useState(false);
+  const [size, setSize] = useState(96);
+  const [tracking, setTracking] = useState(-3);
+  const [leading, setLeading] = useState(1.1);
+  const [sample, setSample] = useState("Beautiful type");
+  const [customFont, setCustomFont] = useState("");
+
+  useEffect(() => {
+    const trimmed = customFont.trim();
+    if (!trimmed) return;
+    const family = trimmed.replace(/\s+/g, "+");
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = `https://fonts.googleapis.com/css2?family=${family}:wght@100;200;300;400;500;600;700;800;900&display=swap`;
+    link.dataset.swiftRustDynamicFont = trimmed;
+    document.head.appendChild(link);
+    return () => {
+      document.head.removeChild(link);
+    };
+  }, [customFont]);
+
+  const entry = useMemo(
+    () => STUDIO_FONTS.find((f) => f.name === fontName) ?? STUDIO_FONTS[0]!,
+    [fontName],
+  );
+  const loadedFont = entry.factory();
+
+  const activeFontFamily = customFont.trim()
+    ? `'${customFont}', system-ui, sans-serif`
+    : (loadedFont.style.fontFamily ?? `'${entry.name}', system-ui, sans-serif`);
+  const activeImportName = customFont.trim() ? toImportName(customFont) : entry.importName;
+
+  return (
+    <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] overflow-hidden shadow-sm">
+      <div className="flex items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-surface-2)] px-6 py-3">
+        <div className="flex items-center gap-2">
+          <span className="pulse-dot h-1.5 w-1.5 rounded-full bg-[var(--color-accent)]" />
+          <span className="text-xs font-medium uppercase tracking-wider text-[var(--color-fg-muted)]">
+            Typography studio
+          </span>
+        </div>
+        <span className="font-mono text-xs text-[var(--color-fg-subtle)]">
+          {entry.name} · {weight} · {italic ? "italic" : "roman"}
+        </span>
+      </div>
+
+      <div className="grid gap-0 lg:grid-cols-[20rem_1fr]">
+        <div className="border-b border-[var(--color-border)] p-6 lg:border-b-0 lg:border-r">
+          <div className="space-y-5">
+            <div>
+              <label
+                htmlFor="studio-font"
+                className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]"
+              >
+                Font
+              </label>
+              <select
+                id="studio-font"
+                value={fontName}
+                onChange={(e: ChangeEvent<HTMLSelectElement>) => {
+                  setFontName(e.target.value);
+                  setCustomFont("");
+                }}
+                className="h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-sm text-[var(--color-fg)] focus:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-soft)]"
+              >
+                {STUDIO_FONTS.map((f) => (
+                  <option key={f.name} value={f.name}>
+                    {f.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label
+                htmlFor="studio-weight"
+                className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]"
+              >
+                Weight
+              </label>
+              <select
+                id="studio-weight"
+                value={weight}
+                onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+                  setWeight(Number(e.target.value))
+                }
+                className="h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-sm text-[var(--color-fg)] focus:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-soft)]"
+              >
+                {WEIGHTS.map((w) => (
+                  <option key={w.value} value={w.value}>
+                    {w.value} — {w.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <span className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]">
+                Style
+              </span>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => setItalic(false)}
+                  className={`flex-1 h-10 rounded-md text-sm font-medium transition-colors ${
+                    !italic
+                      ? "bg-[var(--color-fg)] text-[var(--color-bg)]"
+                      : "border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
+                  }`}
+                >
+                  Regular
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setItalic(true)}
+                  className={`flex-1 h-10 rounded-md text-sm font-medium transition-colors ${
+                    italic
+                      ? "bg-[var(--color-fg)] text-[var(--color-bg)]"
+                      : "border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
+                  }`}
+                >
+                  Italic
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <div className="mb-1.5 flex items-baseline justify-between">
+                <label
+                  htmlFor="studio-size"
+                  className="text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]"
+                >
+                  Size
+                </label>
+                <span className="font-mono text-xs text-[var(--color-fg-muted)]">{size}px</span>
+              </div>
+              <input
+                id="studio-size"
+                type="range"
+                min={16}
+                max={160}
+                value={size}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setSize(Number(e.target.value))
+                }
+                className="w-full accent-[var(--color-accent)]"
+              />
+            </div>
+
+            <div>
+              <div className="mb-1.5 flex items-baseline justify-between">
+                <label
+                  htmlFor="studio-tracking"
+                  className="text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]"
+                >
+                  Tracking
+                </label>
+                <span className="font-mono text-xs text-[var(--color-fg-muted)]">
+                  {tracking >= 0 ? "+" : ""}
+                  {tracking}
+                </span>
+              </div>
+              <input
+                id="studio-tracking"
+                type="range"
+                min={-10}
+                max={20}
+                value={tracking}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setTracking(Number(e.target.value))
+                }
+                className="w-full accent-[var(--color-accent)]"
+              />
+            </div>
+
+            <div>
+              <div className="mb-1.5 flex items-baseline justify-between">
+                <label
+                  htmlFor="studio-leading"
+                  className="text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]"
+                >
+                  Line height
+                </label>
+                <span className="font-mono text-xs text-[var(--color-fg-muted)]">
+                  {leading.toFixed(2)}
+                </span>
+              </div>
+              <input
+                id="studio-leading"
+                type="range"
+                min={0.8}
+                max={2}
+                step={0.05}
+                value={leading}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  setLeading(Number(e.target.value))
+                }
+                className="w-full accent-[var(--color-accent)]"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="studio-custom"
+                className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]"
+              >
+                Any of 2,071 Google fonts
+              </label>
+              <input
+                id="studio-custom"
+                type="search"
+                value={customFont}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => setCustomFont(e.target.value)}
+                placeholder="e.g. Fraunces, IBM Plex Sans KR, Anton"
+                className="h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-sm text-[var(--color-fg)] placeholder:text-[var(--color-fg-subtle)] focus:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-soft)]"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col">
+          <div
+            className="flex-1 overflow-auto px-8 py-12 sm:px-12 sm:py-16"
+            style={{
+              fontFamily: activeFontFamily,
+              fontSize: `${size}px`,
+              fontWeight: weight,
+              fontStyle: italic ? "italic" : "normal",
+              letterSpacing: `${tracking / 100}em`,
+              lineHeight: leading,
+              color: "var(--color-fg)",
+              wordBreak: "break-word",
+            }}
+          >
+            {sample}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2 border-t border-[var(--color-border)] bg-[var(--color-surface-2)] px-6 py-3">
+            <span className="text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]">
+              Sample
+            </span>
+            <div className="flex flex-wrap gap-1.5">
+              {SAMPLES.map((s) => (
+                <button
+                  key={s}
+                  type="button"
+                  onClick={() => setSample(s)}
+                  className={`rounded-full px-2.5 py-1 text-xs transition-colors ${
+                    sample === s
+                      ? "bg-[var(--color-fg)] text-[var(--color-bg)]"
+                      : "border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
+                  }`}
+                >
+                  {s.length > 24 ? `${s.slice(0, 22)}…` : s}
+                </button>
+              ))}
+            </div>
+            <input
+              type="text"
+              value={sample}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setSample(e.target.value)}
+              className="ml-auto h-8 min-w-0 max-w-xs flex-1 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-xs text-[var(--color-fg)] focus:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-soft)]"
+              placeholder="Type to preview…"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t border-[var(--color-border)] bg-[var(--color-bg)] px-6 py-4 font-mono text-xs">
+        <span className="text-[var(--color-accent)]">import</span>
+        {" { "}
+        <span className="text-[var(--color-fg)]">{activeImportName}</span>
+        {" } "}
+        <span className="text-[var(--color-accent)]">from</span>
+        <span className="text-[var(--color-success)]">{" "}&quot;swift-rust/font/google&quot;</span>
+        <span className="text-[var(--color-fg-muted)]">;</span>
+      </div>
+    </div>
+  );
+}

package/templates/default/src/components/footer.tsx

@@ -0,0 +1,75 @@
+import { Link } from "swift-rust";
+import { siteConfig } from "@/lib/site.config";
+import { Logo } from "./logo";
+
+const COLUMNS: Array<{ title: string; links: Array<{ href: string; label: string }> }> = [
+  {
+    title: "Framework",
+    links: [
+      { href: "/", label: "Overview" },
+      { href: "/blog", label: "Blog" },
+      { href: "/about", label: "About" },
+      { href: "/contact", label: "Contact" },
+    ],
+  },
+  {
+    title: "Examples",
+    links: [
+      { href: "/fonts", label: "Fonts" },
+      { href: "/images", label: "Images" },
+      { href: "/videos", label: "Videos" },
+    ],
+  },
+  {
+    title: "Resources",
+    links: [
+      { href: siteConfig.githubUrl, label: "GitHub" },
+      { href: siteConfig.docsUrl, label: "Docs" },
+      { href: "https://discord.gg/swift-rust", label: "Discord" },
+      { href: siteConfig.issuesUrl, label: "Issues" },
+    ],
+  },
+];
+
+export function Footer() {
+  const year = new Date().getFullYear();
+  return (
+    <footer className="mt-32 border-t border-[var(--color-border)] bg-[var(--color-surface)]">
+      <div className="container-page py-16">
+        <div className="grid gap-12 md:grid-cols-[1.5fr_2fr]">
+          <div>
+            <Logo />
+            <p className="mt-4 max-w-xs text-[0.875rem] leading-relaxed text-[var(--color-fg-muted)]">
+              A full-stack React framework powered with Rust + Bun. TSX-first, single binary, four rendering modes.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3">
+            {COLUMNS.map((col) => (
+              <div key={col.title}>
+                <h3 className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+                  {col.title}
+                </h3>
+                <ul className="mt-4 space-y-2.5">
+                  {col.links.map((link) => (
+                    <li key={link.href}>
+                      <Link
+                        href={link.href}
+                        className="text-[0.875rem] text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)]"
+                      >
+                        {link.label}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="mt-12 flex flex-col items-start justify-between gap-4 border-t border-[var(--color-border)] pt-8 text-[0.8125rem] text-[var(--color-fg-subtle)] sm:flex-row sm:items-center">
+          <p>© {year} swift-rust. Built with Rust + Bun.</p>
+          <p className="font-mono">v{siteConfig.version} · MIT</p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/default/src/components/logo.tsx

@@ -0,0 +1,26 @@
+import Image from "swift-rust/image";
+import { BLUR_TRANSPARENT } from "@/lib/blur";
+
+export function Logo({ className = "" }: { className?: string }) {
+  return (
+    <span className={`inline-flex items-center gap-2 ${className}`}>
+      {/* Single-sourced from the favicon file (lightning + gear mark). The
+          favicon lives in the app dir, so use a passthrough loader instead of
+          the image-optimizer endpoint. */}
+      <Image
+        src="/favicon.svg"
+        alt=""
+        aria-hidden
+        width={24}
+        height={24}
+        placeholder="blur"
+        blurDataURL={BLUR_TRANSPARENT}
+        loader={({ src }) => src}
+        className="h-6 w-6"
+      />
+      <span className="text-[0.95rem] font-semibold tracking-tight text-[var(--color-fg)]">
+        swift<span className="text-[var(--color-accent)]">·</span>rust
+      </span>
+    </span>
+  );
+}

package/templates/default/src/components/nav.tsx

@@ -0,0 +1,102 @@
+import { Link } from "swift-rust";
+import { siteConfig } from "@/lib/site.config";
+import { Logo } from "./logo";
+
+const NAV = [
+  { href: "/", label: "Home" },
+  { href: "/blog", label: "Blog" },
+  { href: "/fonts", label: "Fonts" },
+  { href: "/images", label: "Images" },
+  { href: "/videos", label: "Videos" },
+  { href: "/about", label: "About" },
+  { href: "/contact", label: "Contact" },
+];
+
+const GitHubIcon = () => (
+  <svg viewBox="0 0 24 24" className="h-4 w-4" fill="currentColor" aria-hidden>
+    <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56 0-.27-.01-1.16-.02-2.11-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.69-1.28-1.69-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.71 1.26 3.37.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.21-1.49 3.18-1.18 3.18-1.18.62 1.58.23 2.75.11 3.04.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.4-5.25 5.68.41.36.78 1.05.78 2.12 0 1.53-.01 2.77-.01 3.14 0 .31.21.68.8.56C20.21 21.38 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5Z" />
+  </svg>
+);
+
+export function Nav() {
+  return (
+    <header className="sticky top-0 z-40 border-b border-[var(--color-border)] bg-[var(--color-bg)]/80 backdrop-blur-md">
+      {/* CSS-only mobile menu toggle: no client JS required (these pages are
+          static SSR). The peer checkbox drives the panel below. */}
+      <input type="checkbox" id="site-menu" className="peer sr-only" aria-label="Toggle menu" />
+
+      <div className="container-page flex h-14 items-center justify-between gap-8">
+        <Link href="/" aria-label="Home">
+          <Logo />
+        </Link>
+
+        <nav className="hidden items-center gap-1 md:flex">
+          {NAV.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className="rounded-md px-3 py-1.5 text-[0.875rem] text-[var(--color-fg-muted)] transition-colors hover:bg-[var(--color-surface-2)] hover:text-[var(--color-fg)]"
+            >
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+
+        <div className="flex items-center gap-2">
+          <a
+            href={siteConfig.githubUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="btn btn-outline btn-sm hidden sm:inline-flex"
+          >
+            <GitHubIcon />
+            GitHub
+          </a>
+          <Link href={siteConfig.docsUrl} className="btn btn-accent btn-sm hidden sm:inline-flex">
+            Get started
+          </Link>
+
+          {/* Hamburger / close — a label toggling the checkbox above. */}
+          <label
+            htmlFor="site-menu"
+            aria-label="Toggle navigation menu"
+            className="inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-[var(--color-border)] text-[var(--color-fg)] md:hidden"
+          >
+            <svg viewBox="0 0 24 24" className="h-5 w-5 peer-checked:hidden" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+              <path d="M4 7h16M4 12h16M4 17h16" strokeLinecap="round" />
+            </svg>
+          </label>
+        </div>
+      </div>
+
+      {/* Mobile dropdown panel — shown only when the checkbox is checked. */}
+      <nav className="hidden border-t border-[var(--color-border)] bg-[var(--color-bg)] px-4 py-3 peer-checked:block md:!hidden">
+        <div className="flex flex-col gap-1">
+          {NAV.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className="rounded-md px-3 py-2 text-[0.95rem] text-[var(--color-fg-muted)] hover:bg-[var(--color-surface-2)] hover:text-[var(--color-fg)]"
+            >
+              {item.label}
+            </Link>
+          ))}
+          <div className="mt-2 flex gap-2 border-t border-[var(--color-border)] pt-3">
+            <a
+              href={siteConfig.githubUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="btn btn-outline btn-sm flex-1 justify-center"
+            >
+              <GitHubIcon />
+              GitHub
+            </a>
+            <Link href={siteConfig.docsUrl} className="btn btn-accent btn-sm flex-1 justify-center">
+              Get started
+            </Link>
+          </div>
+        </div>
+      </nav>
+    </header>
+  );
+}