Merge pull request #995 from SonicJs-Org/lane711/rework-why-switch-section

Rework why-switch section + copyable hero command

Author: lane711

tests/e2e/94-marketing-home.spec.ts

@@ -116,14 +116,14 @@ test.describe('Marketing Home Page', () => {
     await expect(discordLinks.first()).toBeVisible()
   })
 
-  test('why-switch cards render with overlaid text on image background', async ({ page }) => {
+  test('why-switch cards render as icon cards (no background images)', async ({ page }) => {
     await page.goto('/')
     await expect(
       page.getByRole('heading', { name: 'Why Developers Switch to SonicJS' }),
     ).toBeVisible()
-    // Pain-card background image present (Next fill image keeps alt text)
-    await expect(page.getByAltText('Seamless migration visualization')).toBeVisible()
-    // All four card titles overlaid on the images
+    // AI-generated pain images removed — assets 404 and no alt text remains
+    await expect(page.getByAltText('Seamless migration visualization')).toHaveCount(0)
+    // All four card titles still render
     await expect(page.getByRole('heading', { name: 'No More Migration Hell' })).toBeVisible()
     await expect(
       page.getByRole('heading', { name: 'The Features You Need Are Paywalled' }),
@@ -151,6 +151,26 @@ test.describe('Marketing Home Page', () => {
     await expect(page.getByText(/mcpServers/)).toBeVisible()
   })
 
+  test('hero install command is copyable to clipboard', async ({ page, context }) => {
+    await context.grantPermissions(['clipboard-read', 'clipboard-write'])
+    await page.goto('/')
+
+    // Command text visible in hero
+    await expect(page.getByText('npx create-sonicjs@latest my-app').first()).toBeVisible()
+
+    // Click the first Copy button (hero)
+    const copyButton = page.getByRole('button', { name: /copy command/i }).first()
+    await expect(copyButton).toBeVisible()
+    await copyButton.click()
+
+    // Button flips to "Copied" confirmation
+    await expect(page.getByRole('button', { name: /copied/i }).first()).toBeVisible()
+
+    // Clipboard holds the install command
+    const clip = await page.evaluate(() => navigator.clipboard.readText())
+    expect(clip).toBe('npx create-sonicjs@latest my-app')
+  })
+
   test('four pillars section shows the wedge heading', async ({ page }) => {
     await page.goto('/')
     await expect(

www/public/images/home/pain-coldstart.png

@@ -1,5 +1,6 @@
 import Image from 'next/image'
 import Link from 'next/link'
+import { CopyCommand } from '@/components/CopyCommand'
 
 function GridBackdrop({ patternId }: { patternId: string }) {
   return (
@@ -171,9 +172,7 @@ export default function HomePage() {
             <p className="mt-3 text-xs text-gray-500">
               No signup required — instant access to real admin
             </p>
-            <div className="mt-8 rounded-lg bg-white/5 px-4 py-3 font-mono text-sm text-gray-300 ring-1 ring-white/10">
-              $ npx create-sonicjs@latest my-app
-            </div>
+            <CopyCommand command="npx create-sonicjs@latest my-app" className="mt-8" />
             <div className="mt-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-gray-500">
               <span>MIT licensed</span>
               <span aria-hidden="true">·</span>
@@ -326,8 +325,8 @@ export default function HomePage() {
         <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 md:grid-cols-2 lg:max-w-none">
           {[
             {
-              src: '/images/home/pain-migration.png',
-              alt: 'Seamless migration visualization',
+              icon: ICONS.arrowsRightLeft,
+              accent: 'text-cyan-400',
               title: 'No More Migration Hell',
               body: (
                 <>
@@ -340,8 +339,8 @@ export default function HomePage() {
                 'SonicJS: semantic versioning with automatic, versioned migrations — upgrades stay boring.',
             },
             {
-              src: '/images/home/pain-pricing.png',
-              alt: 'Cost efficiency visualization',
+              icon: ICONS.lockOpen,
+              accent: 'text-emerald-400',
               title: 'The Features You Need Are Paywalled',
               body: (
                 <>
@@ -356,8 +355,8 @@ export default function HomePage() {
                 'SonicJS: every feature in the MIT core. No Growth tier. No Enterprise gate. Ever.',
             },
             {
-              src: '/images/home/pain-latency.png',
-              alt: 'Low-latency global routing visualization',
+              icon: ICONS.bolt,
+              accent: 'text-amber-400',
               title: '0ms Cold Start, Sub-50ms Worldwide',
               body: (
                 <>
@@ -371,8 +370,8 @@ export default function HomePage() {
                 'SonicJS: V8 isolates in 300+ edge cities — no boot penalty, responses served near the user.',
             },
             {
-              src: '/images/home/pain-coldstart.png',
-              alt: 'Glowing AI circuitry stack visualization',
+              icon: ICONS.sparkles,
+              accent: 'text-fuchsia-400',
               title: 'AI Included, Not Upsold',
               body: (
                 <>
@@ -387,21 +386,18 @@ export default function HomePage() {
           ].map((card) => (
             <div
               key={card.title}
-              className="group relative flex min-h-[22rem] flex-col justify-end overflow-hidden rounded-2xl p-6 ring-1 ring-white/10 transition-shadow duration-300 hover:shadow-2xl"
+              className="group relative flex min-h-[18rem] flex-col overflow-hidden rounded-2xl bg-white/[0.02] p-8 ring-1 ring-white/10 transition-all duration-300 hover:bg-white/[0.04] hover:ring-white/20"
             >
-              <Image
-                src={card.src}
-                alt={card.alt}
-                fill
-                sizes="(min-width: 768px) 50vw, 100vw"
-                className="object-cover transition-transform duration-500 group-hover:scale-105"
-              />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/60 to-black/25" />
-              <div className="relative">
-                <h3 className="mb-2 text-xl font-semibold text-white">{card.title}</h3>
-                <p className="mb-2 text-sm text-gray-100">{card.body}</p>
-                <p className="text-xs italic text-gray-200">{card.footer}</p>
+              <div
+                className={`mb-6 flex size-11 items-center justify-center rounded-xl bg-white/5 ring-1 ring-white/10 ${card.accent}`}
+              >
+                <FeatureIcon d={card.icon} />
               </div>
+              <h3 className="mb-3 text-xl font-semibold text-white">{card.title}</h3>
+              <p className="mb-4 flex-auto text-sm/6 text-gray-300">{card.body}</p>
+              <p className="border-t border-white/10 pt-4 text-sm/6 font-medium text-cyan-300">
+                {card.footer}
+              </p>
             </div>
           ))}
         </div>
@@ -856,9 +852,10 @@ GET /api/products?category=electronics&sort=-price&limit=20`}</pre>
           <p className="mx-auto mt-6 max-w-xl text-pretty text-lg/8 text-gray-300">
             MIT licensed. No credit card. No paywalls. Your first global deploy is minutes away.
           </p>
-          <div className="mx-auto mt-8 max-w-md rounded-lg bg-white/5 px-6 py-4 text-left font-mono text-sm text-gray-300 ring-1 ring-white/10">
-            $ npx create-sonicjs@latest my-app
-          </div>
+          <CopyCommand
+            command="npx create-sonicjs@latest my-app"
+            className="mx-auto mt-8 max-w-md"
+          />
           <div className="mt-10 flex items-center justify-center gap-x-6">
             <Link
               href="https://discord.gg/8bMy6bv3sZ"

www/public/images/home/pain-latency.png

@@ -0,0 +1,61 @@
+'use client'
+
+import { useState } from 'react'
+
+export function CopyCommand({
+  command,
+  className = '',
+}: {
+  command: string
+  className?: string
+}) {
+  const [copied, setCopied] = useState(false)
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(command)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // clipboard unavailable — no-op
+    }
+  }
+
+  return (
+    <div
+      className={`flex items-center justify-between gap-4 rounded-lg bg-white/5 px-4 py-3 font-mono text-sm text-gray-300 ring-1 ring-white/10 ${className}`}
+    >
+      <code className="truncate">
+        <span className="select-none text-gray-500">$ </span>
+        {command}
+      </code>
+      <button
+        type="button"
+        onClick={copy}
+        aria-label={copied ? 'Copied' : 'Copy command'}
+        className="-my-1 flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-gray-400 transition-colors hover:bg-white/5 hover:text-white"
+      >
+        {copied ? (
+          <>
+            <svg viewBox="0 0 20 20" fill="currentColor" className="size-4 text-emerald-400">
+              <path
+                fillRule="evenodd"
+                d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <span className="text-emerald-400">Copied</span>
+          </>
+        ) : (
+          <>
+            <svg viewBox="0 0 20 20" fill="currentColor" className="size-4">
+              <path d="M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z" />
+              <path d="M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z" />
+            </svg>
+            <span>Copy</span>
+          </>
+        )}
+      </button>
+    </div>
+  )
+}