docs: redesign homepage #134

solidsnakedev · 2026-01-20T00:23:47Z

Redesigns the docs homepage with improved UX.

Copilot

Pull request overview

This PR redesigns the documentation homepage from a simple redirect to a comprehensive landing page showcasing the Evolution SDK's features and capabilities. The new homepage provides immediate value to visitors with installation instructions, code examples, and feature highlights.

Changes:

Replaced redirect-only homepage with a full-featured marketing landing page
Added package manager tabs for installation instructions with copy-to-clipboard functionality
Updated StackBlitz playground example to use the updated API (renamed Core.Address to Address)

Reviewed changes

Copilot reviewed 3 out of 5 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
docs/app/(home)/page.tsx	Complete homepage redesign with hero section, quick start guide, feature grid, runtime support showcase, and footer
docs/package.json	Added `@icons-pack/react-simple-icons` and `lucide-react` dependencies for UI icons
pnpm-lock.yaml	Lock file updates for new icon dependencies
docs/next-env.d.ts	Updated Next.js types import path from `.next` to `out/dev`
docs/components/playground/StackBlitzPlayground.tsx	Updated default code example to match new SDK API (removed `Core.` namespace)

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-20T00:26:17Z

docs/app/(home)/page.tsx

+const comparisons = [
+  { lib: "Evolution SDK", pureTs: true, conway: true, maintained: true, note: "Type-safe, Effect-powered" },
+  { lib: "Lucid", pureTs: false, conway: false, maintained: false, note: "No longer maintained" },
+  { lib: "MeshJS", pureTs: false, conway: true, maintained: true, note: "WASM-based" },
+  { lib: "Cardano JS SDK", pureTs: false, conway: true, maintained: true, note: "WASM-based, verbose" }
+]
+


The comparisons constant is defined but never used in the component. This unused code should be removed to maintain a clean codebase, or if it's intended for a future feature, it should be used in the UI.

Suggested change

const comparisons = [

{ lib: "Evolution SDK", pureTs: true, conway: true, maintained: true, note: "Type-safe, Effect-powered" },

{ lib: "Lucid", pureTs: false, conway: false, maintained: false, note: "No longer maintained" },

{ lib: "MeshJS", pureTs: false, conway: true, maintained: true, note: "WASM-based" },

{ lib: "Cardano JS SDK", pureTs: false, conway: true, maintained: true, note: "WASM-based, verbose" }

]

Copilot · 2026-01-20T00:26:17Z

docs/app/(home)/page.tsx

+            <button
+              key={pm.id}
+              onClick={() => setSelected(pm.id)}
+              className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors ${
+                selected === pm.id
+                  ? "text-fd-foreground bg-fd-card border-b-2 border-fd-primary -mb-px"
+                  : "text-fd-muted-foreground hover:text-fd-foreground"
+              }`}
+            >
+              <Icon size={16} color={selected === pm.id ? pm.color : "currentColor"} />
+              {pm.name}
+            </button>
+          )
+        })}


The tab buttons in the PackageManagerTabs component should include keyboard navigation support. Consider adding keyboard event handlers for arrow key navigation between tabs to improve accessibility for keyboard users.

Copilot · 2026-01-20T00:26:17Z

docs/app/(home)/page.tsx

+        <button
+          onClick={copyToClipboard}
+          className="flex items-center gap-1.5 text-xs text-fd-muted-foreground hover:text-fd-foreground transition-colors"
+        >
+          {copied ? (
+            <>
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+              Copied!
+            </>
+          ) : (
+            <>
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+              Copy
+            </>
+          )}


The inline SVG icons for copy functionality lack proper accessibility attributes. Add aria-hidden="true" to decorative SVG elements and ensure the button has a proper aria-label for screen readers.

Copilot · 2026-01-20T00:26:18Z

docs/app/(home)/page.tsx

+  const [selected, setSelected] = useState("npm")
+  const [copied, setCopied] = useState(false)
+
+  const selectedPm = packageManagers.find(pm => pm.id === selected)!


The non-null assertion operator (!) is used without checking if the packageManager is actually found. If selected contains an invalid ID, this could cause a runtime error. Consider handling the case where find returns undefined.

Suggested change

const selectedPm = packageManagers.find(pm => pm.id === selected)!

const selectedPm = packageManagers.find(pm => pm.id === selected) ?? packageManagers[0]

Copilot · 2026-01-20T00:26:18Z

docs/app/(home)/page.tsx

+const quickStartCode = `import { Address, Assets, createClient } from "@evolution-sdk/evolution"
+
+// 1. Create a client
+const client = createClient({
+  network: "preprod",
+  provider: { type: "blockfrost", baseUrl, projectId },
+  wallet: { type: "seed", mnemonic }
+})
+
+// 2. Build a transaction
+const tx = await client.newTx()
+  .payToAddress({
+    address: Address.fromBech32(recipient),
+    assets: Assets.fromLovelace(5_000_000n)
+  })
+  .build()
+
+// 3. Sign and submit
+const hash = await tx.sign().then(s => s.submit())`


The quick start code example references undefined variables baseUrl, projectId, mnemonic, and recipient. These should either be shown as placeholders with clear descriptive names like YOUR_BLOCKFROST_URL or include comments explaining that users need to provide these values.

Copilot · 2026-01-20T00:26:18Z

docs/app/(home)/page.tsx

+    await navigator.clipboard.writeText(selectedPm.command)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)


The component uses a client-side only API navigator.clipboard without checking for its availability. Consider adding a fallback or checking if the API exists before using it to prevent errors in environments where it's not available.

Suggested change

await navigator.clipboard.writeText(selectedPm.command)

setCopied(true)

setTimeout(() => setCopied(false), 2000)

try {

if (

typeof navigator !== "undefined" &&

navigator.clipboard &&

typeof navigator.clipboard.writeText === "function"

) {

await navigator.clipboard.writeText(selectedPm.command)

setCopied(true)

setTimeout(() => setCopied(false), 2000)

} else {

console.warn("Clipboard API is not available in this environment.")

}

} catch (error) {

console.error("Failed to copy command to clipboard:", error)

}

Copilot AI review requested due to automatic review settings January 20, 2026 00:23

Copilot started reviewing on behalf of solidsnakedev January 20, 2026 00:24 View session

Copilot AI reviewed Jan 20, 2026

View reviewed changes

solidsnakedev force-pushed the docs/homepage-redesign branch from 1c2d4ad to a6004d1 Compare January 20, 2026 00:27

docs: redesign homepage

54036fd

solidsnakedev force-pushed the docs/homepage-redesign branch from a6004d1 to 54036fd Compare January 20, 2026 00:30

solidsnakedev merged commit 30bec3c into main Jan 20, 2026
5 checks passed

solidsnakedev deleted the docs/homepage-redesign branch January 20, 2026 03:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs: redesign homepage #134

docs: redesign homepage #134

solidsnakedev commented Jan 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	const selectedPm = packageManagers.find(pm => pm.id === selected)!
	const selectedPm = packageManagers.find(pm => pm.id === selected) ?? packageManagers[0]

-    await navigator.clipboard.writeText(selectedPm.command)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+    try {
+      if (
+        typeof navigator !== "undefined" &&
+        navigator.clipboard &&
+        typeof navigator.clipboard.writeText === "function"
+      ) {
+        await navigator.clipboard.writeText(selectedPm.command)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      } else {
+        console.warn("Clipboard API is not available in this environment.")
+      }
+    } catch (error) {
+      console.error("Failed to copy command to clipboard:", error)
+    }

docs: redesign homepage #134

docs: redesign homepage #134

Conversation

solidsnakedev commented Jan 20, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants