From 13388790fc0e005cb1888c4625414701a0ff1337 Mon Sep 17 00:00:00 2001
From: Caleb Wodi <calebwodi33@gmail.com>
Date: Sat, 14 Feb 2026 18:26:44 +0100
Subject: [PATCH] feat: add flexible input showcase and tabbed install section

---
 apps/web/app/page.tsx                 |   2 +
 apps/web/components/input-formats.tsx |  51 ++++++++++
 apps/web/components/install.tsx       | 138 ++++++++++++++++++++++++++
 3 files changed, 191 insertions(+)
 create mode 100644 apps/web/components/input-formats.tsx
 create mode 100644 apps/web/components/install.tsx

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 081e767..1e9414a 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -7,6 +7,8 @@ export default function Page() {
       <Hero />
       <Features />
       <Modes />
+      <InputFormats />
+      <Install />
     </main>
   )
 }
diff --git a/apps/web/components/input-formats.tsx b/apps/web/components/input-formats.tsx
new file mode 100644
index 0000000..c52166b
--- /dev/null
+++ b/apps/web/components/input-formats.tsx
@@ -0,0 +1,51 @@
+import { ArrowRight } from "lucide-react"
+
+const formats = [
+  "https://github.com/owner/repo",
+  "github.com/owner/repo",
+  "owner/repo",
+  "https://github.com/owner/repo/issues/123",
+  "https://github.com/owner/repo?tab=readme",
+  "git@github.com:owner/repo.git",
+]
+
+export function InputFormats() {
+  return (
+    <section className="border-y border-border bg-card/50 py-24 md:py-32">
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
+          <div>
+            <p className="mb-3 text-sm font-medium uppercase tracking-widest text-primary">
+              Flexible Input
+            </p>
+            <h2 className="text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl">
+              Paste any GitHub link
+            </h2>
+            <p className="mt-4 max-w-lg text-pretty text-muted-foreground leading-relaxed">
+              No need to reformat URLs. ExplainThisRepo accepts repositories the
+              way you actually copy them. All inputs are normalized internally to
+              owner/repo.
+            </p>
+          </div>
+
+          <div className="space-y-3">
+            {formats.map((format) => (
+              <div
+                key={format}
+                className="group flex items-center gap-3 rounded-lg border border-border bg-background px-4 py-3 transition-colors hover:border-primary/30"
+              >
+                <code className="flex-1 font-mono text-sm text-foreground/90 truncate">
+                  {format}
+                </code>
+                <ArrowRight className="h-4 w-4 flex-shrink-0 text-muted-foreground transition-colors group-hover:text-primary" />
+                <code className="hidden font-mono text-sm text-primary sm:block">
+                  owner/repo
+                </code>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/web/components/install.tsx b/apps/web/components/install.tsx
new file mode 100644
index 0000000..4f821ec
--- /dev/null
+++ b/apps/web/components/install.tsx
@@ -0,0 +1,138 @@
+"use client"
+
+import { useState } from "react"
+import { Check, Copy } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const tabs = [
+  {
+    label: "pip",
+    commands: [
+      { text: "pip install explainthisrepo", copyable: true },
+      { text: "explainthisrepo owner/repo", copyable: true },
+    ],
+  },
+  {
+    label: "pipx",
+    commands: [
+      { text: "pipx install explainthisrepo", copyable: true },
+      { text: "explainthisrepo owner/repo", copyable: true },
+    ],
+  },
+  {
+    label: "npm",
+    commands: [
+      { text: "npm install -g explainthisrepo", copyable: true },
+      { text: "explainthisrepo owner/repo", copyable: true },
+    ],
+  },
+  {
+    label: "npx",
+    commands: [
+      { text: "npx explainthisrepo owner/repo", copyable: true },
+    ],
+  },
+]
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Clipboard API not available (non-HTTPS or unsupported browser)
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      className="ml-3 flex-shrink-0 text-muted-foreground transition-colors hover:text-foreground"
+      aria-label={`Copy: ${text}`}
+    >
+      {copied ? (
+        <Check className="h-4 w-4 text-primary" />
+      ) : (
+        <Copy className="h-4 w-4" />
+      )}
+    </button>
+  )
+}
+
+export function Install() {
+  const [activeTab, setActiveTab] = useState(0)
+
+  return (
+    <section id="install" className="py-24 md:py-32">
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="mb-16 text-center">
+          <p className="mb-3 text-sm font-medium uppercase tracking-widest text-primary">
+            Installation
+          </p>
+          <h2 className="text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl">
+            Get started in seconds
+          </h2>
+          <p className="mx-auto mt-4 max-w-2xl text-pretty text-muted-foreground leading-relaxed">
+            Install via pip or npm and start explaining repos right away.
+            Requires Python 3.9+ or Node.js.
+          </p>
+        </div>
+
+        <div className="mx-auto max-w-xl">
+          <div className="overflow-hidden rounded-xl border border-border bg-card shadow-xl">
+            {/* Tabs */}
+            <div className="flex border-b border-border">
+              {tabs.map((tab, index) => (
+                <button
+                  key={tab.label}
+                  type="button"
+                  onClick={() => setActiveTab(index)}
+                  className={cn(
+                    "flex-1 px-4 py-3 text-sm font-medium transition-colors",
+                    index === activeTab
+                      ? "bg-secondary text-foreground border-b-2 border-primary"
+                      : "text-muted-foreground hover:text-foreground"
+                  )}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+
+            {/* Commands */}
+            <div className="p-5 font-mono text-sm space-y-3">
+              {tabs[activeTab].commands.map((cmd) => (
+                <div
+                  key={cmd.text}
+                  className="flex items-center justify-between rounded-lg bg-background px-4 py-3"
+                >
+                  <span className="text-foreground">
+                    <span className="text-primary mr-2">$</span>
+                    {cmd.text}
+                  </span>
+                  <CopyButton text={cmd.text} />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* API key note */}
+          <div className="mt-6 rounded-lg border border-border bg-card p-4">
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              <span className="font-medium text-foreground">API Key Required:</span>{" "}
+              ExplainThisRepo uses Gemini models for code analysis. Set your API
+              key with{" "}
+              <code className="rounded bg-secondary px-1.5 py-0.5 font-mono text-xs text-primary">
+                export GEMINI_API_KEY=&quot;your_key&quot;
+              </code>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}