diff --git a/app/globals.css b/app/globals.css index 74da31f..fc29873 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,51 +1,533 @@ * { box-sizing: border-box; } -:root { --ink:#070a1a; --body:#36405d; --blue:#4865ff; --line:#dfe3eb; --soft:#f7f8fb; } + +:root { + --ink: #10131d; + --body: #525866; + --muted: #7a8190; + --blue: #4d5df5; + --blue-dark: #2d36bc; + --line: #dfe2e8; + --soft-line: #eceef2; + --paper: #fbfaf7; + --white: #fff; + --violet: #5d52e8; + --violet-soft: #efedff; + --green: #137762; + --green-soft: #e7f4ef; + --yellow: #f8cf63; +} + html { scroll-behavior: smooth; } -body { margin:0; background:#fff; color:var(--body); font:16px/1.5 Arial, Helvetica, sans-serif; } -a { color:var(--blue); } -img { display:block; max-width:100%; height:auto; } -code, dd { overflow-wrap:anywhere; min-width:0; } -.wrap { width:min(1184px, calc(100% - 48px)); margin:0 auto; } -.site-header { border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:10; } -.nav-row { height:64px; display:flex; align-items:center; gap:24px; } -.wordmark { color:var(--ink); text-decoration:none; font-size:19px; font-weight:700; letter-spacing:-.03em; } -.wordmark span { color:var(--blue); } -nav { margin-left:auto; display:flex; gap:18px; } -nav a { color:var(--ink); text-decoration:none; font-size:14px; } -.block { padding:48px 0; border-bottom:1px solid var(--line); } -.mechanical-head { padding-top:64px; } -.label { margin:0 0 12px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; } -h1,h2,h3 { color:var(--ink); line-height:1.2; } -h1 { max-width:900px; font-size:clamp(32px,4vw,48px); margin:0 0 18px; } -h2 { margin:0 0 24px; font-size:26px; } -h3 { margin:0 0 8px; font-size:20px; } -.facts, .mini-facts { margin:0 0 24px; } -.facts div { display:grid; grid-template-columns:180px 1fr; padding:12px 0; border-top:1px solid var(--line); } -dt { font-weight:700; color:var(--ink); } -dd { margin:0; } -.output-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } -.output { border:1px solid var(--line); padding:18px; min-width:0; background:#fff; } -.output > p { margin:0 0 14px; } -.shot-window { height:560px; overflow:auto; border:1px solid var(--line); background:var(--soft); margin-bottom:10px; } -.shot-window img { width:100%; } -.mini-facts { margin-top:18px; } -.mini-facts div { display:grid; grid-template-columns:110px 1fr; border-top:1px solid var(--line); padding:9px 0; font-size:14px; } -details { margin-top:18px; border:1px solid var(--line); padding:14px; } -summary { color:var(--ink); font-weight:700; cursor:pointer; } -pre { white-space:pre-wrap; overflow:auto; background:var(--soft); padding:18px; font:13px/1.55 ui-monospace, monospace; } -.mobile-shot { margin:14px auto 0; max-width:390px; } -.table-wrap { overflow:auto; border:1px solid var(--line); max-width:100%; } -table { width:100%; border-collapse:collapse; font-size:14px; } -th,td { padding:10px 14px; border-bottom:1px solid var(--line); text-align:left; } -th { color:var(--ink); background:var(--soft); } -.file-list { columns:2; margin:0; padding-left:20px; } -.file-list li { margin:0 0 10px; break-inside:avoid; } -footer { padding:32px 0; } -@media (max-width:700px) { - .wrap { width:calc(100% - 32px); } - nav { display:none; } - .output-grid { grid-template-columns:1fr; } - .shot-window { height:420px; } - .facts div, .mini-facts div { grid-template-columns:1fr; gap:4px; } - .file-list { columns:1; } +body { + margin: 0; + background: var(--paper); + color: var(--body); + font: 16px/1.55 Arial, Helvetica, sans-serif; + -webkit-font-smoothing: antialiased; +} +main, header, footer, section, article, aside, div { min-width: 0; } +img { display: block; max-width: 100%; height: auto; } +a { color: inherit; } +button, summary, a { -webkit-tap-highlight-color: transparent; } +svg { display: block; } +code, dd { overflow-wrap: anywhere; } +.wrap { width: min(1180px, calc(100% - 56px)); margin-inline: auto; } + +.site-header { + position: sticky; + z-index: 20; + top: 0; + border-bottom: 1px solid rgba(16, 19, 29, .1); + background: rgba(251, 250, 247, .92); + backdrop-filter: blur(16px); +} +.nav-row { display: flex; height: 68px; align-items: center; gap: 18px; } +.wordmark { + color: var(--ink); + font-size: 19px; + font-weight: 800; + letter-spacing: -.045em; + text-decoration: none; +} +.wordmark span { color: var(--blue); } +.case-tag { + border-left: 1px solid var(--line); + padding-left: 18px; + color: var(--muted); + font-size: 11px; + font-weight: 700; + letter-spacing: .1em; + text-transform: uppercase; +} +nav { display: flex; margin-left: auto; align-items: center; gap: 28px; } +nav a { color: #333946; font-size: 13px; font-weight: 700; text-decoration: none; } +nav a:hover, nav a:focus-visible { color: var(--blue); } + +.hero { + display: grid; + grid-template-columns: minmax(0, 1.45fr) minmax(330px, .72fr); + gap: 72px; + padding-top: 108px; + padding-bottom: 78px; +} +.hero-copy { align-self: center; } +.eyebrow { + margin: 0 0 16px; + color: var(--blue-dark); + font-size: 11px; + font-weight: 800; + letter-spacing: .13em; + text-transform: uppercase; +} +h1, h2, h3, blockquote, p { text-wrap: pretty; } +h1, h2, h3 { + color: var(--ink); + font-weight: 760; + letter-spacing: -.05em; + line-height: 1.04; +} +h1 { max-width: 740px; margin: 0; font-size: clamp(52px, 6.8vw, 86px); } +.dek { + max-width: 710px; + margin: 28px 0 26px; + color: #404653; + font-size: clamp(18px, 2vw, 22px); + line-height: 1.5; +} +.text-link, .build-meta a, .score-link { + display: inline-flex; + align-items: center; + gap: 7px; + color: var(--blue-dark); + font-size: 13px; + font-weight: 800; + text-decoration: none; +} +.text-link { padding-bottom: 3px; border-bottom: 1px solid currentColor; } +.text-link svg, .build-meta svg, .score-link svg, .evidence-index svg { + width: 16px; + height: 16px; + fill: none; + stroke: currentColor; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 1.5; + transition: transform 160ms ease; +} +.text-link:hover svg, .build-meta a:hover svg, .score-link:hover svg, .evidence-index a:hover svg { transform: translateX(3px); } + +.verdict-card { + position: relative; + overflow: hidden; + align-self: center; + padding: 28px; + border: 1px solid #1d2231; + border-radius: 3px; + background: var(--ink); + box-shadow: 16px 16px 0 #e7e4dc; + color: #c9cdd5; +} +.verdict-card::before { + position: absolute; + top: -80px; + right: -60px; + width: 210px; + height: 210px; + border-radius: 50%; + background: rgba(77, 93, 245, .32); + content: ""; + filter: blur(2px); +} +.verdict-topline { + position: relative; + display: flex; + justify-content: space-between; + gap: 16px; + color: #aeb4c1; + font-size: 10px; + font-weight: 800; + letter-spacing: .1em; + text-transform: uppercase; +} +.live-dot { display: inline-flex; align-items: center; gap: 6px; } +.live-dot::before { width: 6px; height: 6px; border-radius: 50%; background: #6ee7b7; content: ""; } +.verdict-number { + position: relative; + margin: 30px 0 3px; + color: var(--white); + font-size: 78px; + font-weight: 800; + letter-spacing: -.07em; + line-height: .9; +} +.verdict-number span { color: #7b8498; font-size: 30px; letter-spacing: -.03em; } +.verdict-card h2 { position: relative; margin: 18px 0 13px; color: var(--white); font-size: 24px; } +.verdict-card > p:not(.verdict-number) { position: relative; margin: 0; font-size: 13px; line-height: 1.65; } +.verdict-card .verdict-scope { + margin-top: 21px !important; + padding-top: 17px; + border-top: 1px solid #303647; + color: #8f97a8; + font-size: 11px !important; +} +.question-strip { + display: grid; + grid-column: 1 / -1; + grid-template-columns: 170px 1fr; + gap: 24px; + align-items: start; + margin-top: 24px; + padding-top: 28px; + border-top: 1px solid var(--line); +} +.question-strip span { + color: var(--muted); + font-size: 11px; + font-weight: 800; + letter-spacing: .1em; + text-transform: uppercase; +} +.question-strip p { max-width: 850px; margin: 0; color: var(--ink); font-size: 21px; font-weight: 700; line-height: 1.35; } + +.build-intro { padding: 104px 0 112px; border-top: 1px solid var(--line); background: #f1f0eb; } +.section-heading { max-width: 760px; margin-bottom: 48px; } +.section-heading h2, .checks-copy h2 { margin: 0; font-size: clamp(36px, 4.4vw, 58px); } +.section-heading > p:last-child, .split-heading > p, .checks-copy > p { + margin: 20px 0 0; + color: #626977; + font-size: 17px; + line-height: 1.65; +} +.build-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } +.build-card { + padding: 24px; + border: 1px solid #d7d8da; + border-top: 4px solid var(--violet); + border-radius: 4px; + background: var(--white); +} +.build-card.green { border-top-color: var(--green); } +.build-card-head { + display: grid; + grid-template-columns: 1fr auto; + gap: 20px; + min-height: 205px; + padding: 4px 2px 24px; +} +.build-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } +.build-kicker span:first-child { color: var(--ink); font-size: 13px; font-weight: 800; } +.build-kicker span:last-child { + padding: 4px 7px; + border-radius: 999px; + background: var(--violet-soft); + color: #4f43d9; + font-size: 9px; + font-weight: 800; + letter-spacing: .08em; + text-transform: uppercase; +} +.green .build-kicker span:last-child { background: var(--green-soft); color: #0c654f; } +.build-card h3 { max-width: 400px; margin: 0; font-size: clamp(25px, 2.5vw, 34px); } +.build-card-head p { max-width: 440px; margin: 14px 0 0; color: #686f7d; font-size: 14px; line-height: 1.6; } +.score-badge { + display: flex; + width: 67px; + height: 67px; + align-items: baseline; + justify-content: center; + padding-top: 17px; + border: 1px solid #dadce3; + border-radius: 50%; + color: var(--ink); +} +.score-badge strong { font-size: 23px; line-height: 1; } +.score-badge span { color: var(--muted); font-size: 10px; } +.capture-shell { + overflow: hidden; + border: 1px solid #cfd2d9; + border-radius: 5px; + background: #e8e9ec; + box-shadow: 0 14px 35px rgba(27, 31, 41, .1); +} +.browser-bar { + display: flex; + height: 34px; + align-items: center; + gap: 5px; + padding: 0 10px; + border-bottom: 1px solid #d7d9de; + background: #f7f7f8; +} +.browser-bar > span { width: 6px; height: 6px; border-radius: 50%; background: #c6c9cf; } +.browser-bar > div { + width: 42%; + margin: 0 auto; + padding: 3px 8px; + border: 1px solid #e0e1e4; + border-radius: 4px; + background: var(--white); + color: #a1a5ad; + font-size: 7px; + line-height: 1; + text-align: center; +} +.capture-scroll { + height: min(58vw, 720px); + min-height: 520px; + overflow-y: auto; + overscroll-behavior: contain; + scrollbar-color: #b7bac3 transparent; + scrollbar-width: thin; +} +.capture-scroll img { width: 100%; height: auto; } +.build-meta { display: flex; justify-content: space-between; gap: 16px; padding: 18px 2px 0; color: var(--muted); font-size: 11px; } +.build-meta a { font-size: 11px; } +.mobile-proof { margin-top: 18px; border-top: 1px solid var(--soft-line); padding-top: 16px; } +.mobile-proof summary, .limitations summary { color: #3b414d; font-size: 12px; font-weight: 800; cursor: pointer; } +.phone-frame { + width: min(320px, 100%); + max-height: 690px; + margin: 22px auto 5px; + overflow-y: auto; + border: 7px solid #171a21; + border-radius: 24px; + background: var(--white); + box-shadow: 0 18px 35px rgba(27, 31, 41, .18); + scrollbar-width: thin; +} +.phone-frame img { width: 100%; } + +.comparison { padding-top: 112px; padding-bottom: 120px; } +.split-heading { display: grid; max-width: none; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; } +.split-heading > p { margin: 0 0 4px; } +.comparison-table { border-top: 1px solid #cfd2d8; } +.comparison-row { + display: grid; + grid-template-columns: .62fr 1fr 1fr; + gap: 34px; + padding: 25px 0; + border-bottom: 1px solid var(--line); + color: #555c69; + font-size: 14px; + line-height: 1.6; +} +.comparison-header { + padding: 14px 0; + color: var(--ink); + font-size: 11px; + font-weight: 800; + letter-spacing: .08em; + text-transform: uppercase; +} +.comparison-header > div { display: flex; align-items: center; } +.dimension { color: var(--ink); font-weight: 800; } +.comparison-row strong { color: #292e39; } +.agent-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; } +.violet-dot { background: var(--violet); } +.green-dot { background: var(--green); } + +.checks-section { padding: 110px 0; background: #10131d; color: #aeb4c0; } +.checks-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 105px; align-items: start; } +.checks-copy .eyebrow { color: #8f99ff; } +.checks-copy h2 { color: var(--white); } +.checks-copy > p { color: #aeb4c0; } +.pass-list { display: grid; gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; } +.pass-list li { display: flex; gap: 11px; align-items: flex-start; color: #d3d6dd; font-size: 13px; } +.pass-list svg { + width: 17px; + height: 17px; + flex: 0 0 auto; + margin-top: 2px; + fill: none; + stroke: #6ee7b7; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 1.8; +} +.scoreboard { padding: 30px; border: 1px solid #313746; border-radius: 3px; background: #161a25; } +.score-row { display: grid; grid-template-columns: 100px 1fr 55px; gap: 16px; align-items: center; padding: 13px 0; } +.score-row > div:first-child { display: flex; align-items: center; color: var(--white); font-size: 13px; } +.score-row b { color: var(--white); font-size: 15px; text-align: right; } +.score-track { height: 6px; overflow: hidden; border-radius: 999px; background: #2e3442; } +.score-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c89ff, #5ce0b8); } +.miss-card { + display: grid; + grid-template-columns: 1fr auto; + gap: 4px 18px; + margin-top: 15px; + padding: 17px 18px; + border-left: 3px solid var(--yellow); + background: #222735; +} +.miss-card > span { + grid-column: 1 / -1; + color: #aeb4c0; + font-size: 9px; + font-weight: 800; + letter-spacing: .1em; + text-transform: uppercase; +} +.miss-card strong { color: var(--white); font-size: 13px; } +.miss-card p { margin: 0; color: #9da4b2; font-size: 11px; text-align: right; } +.detector-miss { border-left-color: #8f99ff; } +.score-link { margin-top: 27px; color: #aeb6ff; } + +.takeaway { display: grid; grid-template-columns: 1fr 320px; gap: 90px; align-items: end; padding-top: 116px; padding-bottom: 116px; } +.takeaway blockquote { + max-width: 800px; + margin: 0; + color: var(--ink); + font-size: clamp(32px, 4.3vw, 55px); + font-weight: 720; + letter-spacing: -.045em; + line-height: 1.13; +} +.takeaway aside { padding-top: 17px; border-top: 3px solid var(--ink); } +.takeaway aside span { color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } +.takeaway aside p { margin: 14px 0 0; color: #666d79; font-size: 13px; line-height: 1.65; } + +.method-section { padding: 108px 0 95px; border-top: 1px solid var(--line); background: #eeeee9; } +.method-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 28px; border-top: 1px solid #cfd1d1; } +.method-facts div { + display: grid; + grid-template-columns: 145px 1fr; + gap: 16px; + padding: 18px 20px 18px 0; + border-bottom: 1px solid #cfd1d1; +} +.method-facts div:nth-child(odd) { border-right: 1px solid #cfd1d1; } +.method-facts div:nth-child(even) { padding-left: 20px; } +.method-facts dt { + color: #757b84; + font-size: 10px; + font-weight: 800; + letter-spacing: .08em; + text-transform: uppercase; +} +.method-facts dd { margin: 0; color: #303540; font-size: 12px; } +.method-facts code { font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; } +.prompt-disclosure { margin-top: 30px; border: 1px solid #c9cbcd; background: var(--paper); } +.prompt-disclosure summary { display: flex; justify-content: space-between; gap: 30px; padding: 19px 21px; color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; } +.prompt-disclosure summary span:last-child { color: var(--muted); font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; } +pre { + max-height: 440px; + margin: 0; + overflow: auto; + padding: 24px; + border-top: 1px solid var(--line); + background: #171a22; + color: #e3e6ed; + font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; + white-space: pre-wrap; +} +.evidence-index { display: grid; grid-template-columns: 160px 1fr; gap: 20px; margin-top: 55px; } +.evidence-index > p { margin: 4px 0 0; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } +.evidence-index ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; } +.evidence-index a { + display: flex; + min-height: 46px; + align-items: center; + justify-content: space-between; + gap: 10px; + padding: 10px 13px; + border: 1px solid #d0d2d3; + background: rgba(255, 255, 255, .46); + color: #353b46; + font-size: 11px; + font-weight: 700; + text-decoration: none; +} +.evidence-index a:hover { border-color: var(--blue); color: var(--blue-dark); } +.evidence-index svg { width: 14px; height: 14px; flex: 0 0 auto; } +.limitations { margin-top: 28px; padding: 17px 0; border-top: 1px solid #cfd1d1; border-bottom: 1px solid #cfd1d1; } +.limitations ul { display: grid; gap: 10px; margin: 18px 0 0; padding-left: 20px; color: #626873; font-size: 12px; } + +.site-footer { padding: 34px 0; background: #10131d; } +.footer-row { display: flex; align-items: center; gap: 30px; } +.footer-mark { color: var(--white); } +.footer-row p { margin: 0 auto; color: #7f8797; font-size: 11px; } +.footer-row > a:last-child { color: #b8bec9; font-size: 11px; font-weight: 700; text-decoration: none; } + +@media (max-width: 960px) { + .hero { grid-template-columns: 1fr 340px; gap: 38px; } + .checks-grid { gap: 55px; } + .takeaway { grid-template-columns: 1fr 260px; gap: 50px; } + .evidence-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} + +@media (max-width: 820px) { + .wrap { width: min(calc(100% - 40px), 680px); } + nav { display: none; } + .case-tag { margin-left: auto; } + .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 72px; padding-bottom: 65px; } + .verdict-card { max-width: 520px; } + .question-strip { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; } + .build-intro, .comparison, .checks-section, .method-section { padding-top: 78px; padding-bottom: 82px; } + .build-grid, .checks-grid { grid-template-columns: 1fr; } + .build-card-head { min-height: auto; } + .capture-scroll { height: 680px; min-height: 0; } + .split-heading { grid-template-columns: 1fr; gap: 12px; } + .comparison-row { grid-template-columns: 135px 1fr 1fr; gap: 20px; } + .checks-grid { gap: 50px; } + .takeaway { grid-template-columns: 1fr; gap: 48px; padding-top: 82px; padding-bottom: 82px; } + .takeaway aside { max-width: 420px; } + .method-facts { grid-template-columns: 1fr; } + .method-facts div:nth-child(odd) { border-right: 0; } + .method-facts div:nth-child(even) { padding-left: 0; } + .evidence-index { grid-template-columns: 1fr; gap: 12px; } +} + +@media (max-width: 620px) { + .wrap { width: calc(100% - 32px); } + .site-header { position: relative; } + .nav-row { height: 62px; } + .wordmark { font-size: 17px; } + .case-tag { font-size: 9px; } + .hero { padding-top: 58px; padding-bottom: 55px; } + h1 { font-size: clamp(47px, 14vw, 66px); } + .dek { margin-top: 22px; font-size: 18px; } + .verdict-card { margin-right: 8px; padding: 24px; box-shadow: 8px 8px 0 #e7e4dc; } + .verdict-number { font-size: 66px; } + .question-strip p { font-size: 18px; } + .section-heading { margin-bottom: 35px; } + .section-heading h2, .checks-copy h2 { font-size: 38px; } + .section-heading > p:last-child, .split-heading > p, .checks-copy > p { font-size: 15px; } + .build-card { padding: 16px; } + .build-card-head { grid-template-columns: 1fr; gap: 16px; padding-bottom: 21px; } + .build-kicker { margin-bottom: 16px; } + .build-card h3 { max-width: 300px; font-size: 28px; } + .score-badge { width: auto; height: auto; justify-content: flex-start; gap: 2px; padding: 0; border: 0; border-radius: 0; } + .score-badge strong { font-size: 18px; } + .capture-scroll { height: 515px; } + .build-meta { align-items: flex-start; flex-direction: column; gap: 7px; } + .comparison-table { border-top: 0; } + .comparison-header { display: none; } + .comparison-row { grid-template-columns: 1fr; gap: 10px; padding: 25px 0; } + .comparison-row > div:not(.dimension) { position: relative; padding-left: 18px; } + .comparison-row > div:not(.dimension)::before { + position: absolute; + top: 8px; + left: 0; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--violet); + content: ""; + } + .comparison-row > div:last-child::before { background: var(--green); } + .scoreboard { padding: 20px 16px; } + .score-row { grid-template-columns: 82px 1fr 49px; gap: 10px; } + .miss-card { grid-template-columns: 1fr; } + .miss-card p { text-align: left; } + .takeaway blockquote { font-size: 35px; } + .method-facts div { grid-template-columns: 1fr; gap: 5px; } + .prompt-disclosure summary { align-items: flex-start; flex-direction: column; gap: 6px; } + .evidence-index ul { grid-template-columns: 1fr; } + .footer-row { align-items: flex-start; flex-direction: column; gap: 13px; } + .footer-row p { margin: 0; } +} + +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + * { transition-duration: .01ms !important; } } diff --git a/app/layout.tsx b/app/layout.tsx index ec9d266..5e07487 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,8 +2,8 @@ import type { Metadata } from "next"; import "./globals.css"; export const metadata: Metadata = { - title: "Raw case-study evidence | WhichBuildWon", - description: "A neutral fixture exposing recorded evidence from a completed WhichBuildWon experiment.", + title: "Claude Code vs Codex: One Brief, Two Builds | WhichBuildWon", + description: "A screenshot-led case study comparing how Claude Code and Codex answered the same one-shot SaaS landing-page brief.", }; export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { diff --git a/app/page.tsx b/app/page.tsx index 9c306ea..308a85f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,124 +1,350 @@ -import evidence from "../public/evidence/raw-run/results.json"; +import Image, { type StaticImageData } from "next/image"; -const links = [ - ["Frozen results JSON", "/evidence/raw-run/results.json"], - ["Original exact prompt", "/evidence/raw-run/prompt.txt"], - ["Claude grader JSON", "/evidence/raw-run/claude/grader.json"], - ["Codex grader JSON", "/evidence/raw-run/codex/grader.json"], - ["Claude source diff", "/evidence/raw-run/claude/final.diff"], - ["Codex source diff", "/evidence/raw-run/codex/final.diff"], - ["Claude run log", "/evidence/raw-run/claude/contestant.stdout.log"], - ["Codex run log", "/evidence/raw-run/codex/contestant.stdout.log"], - ["Run validation", "/evidence/raw-run/validation.json"], - ["Evidence manifest", "/evidence/raw-run/manifest.json"], -]; +import claudeDesktop from "../public/evidence/claude-desktop.png"; +import claudeMobile from "../public/evidence/claude-mobile.png"; +import codexDesktop from "../public/evidence/codex-desktop.png"; +import codexMobile from "../public/evidence/codex-mobile.png"; +import evidence from "../public/evidence/raw-run/results.json"; -const contestants = [ +const builds = [ { key: "claude", name: "Claude Code", - desktop: "/evidence/claude-desktop.png", - mobile: "/evidence/claude-mobile.png", - result: evidence.contestants.claude, + label: "Product-dense", + headline: "Run your team's ops on autopilot", + description: + "A dark, compact SaaS page built around task UI, customer quotes, and three output-focused feature sections.", + desktop: claudeDesktop, + mobile: claudeMobile, + accent: "violet", + score: evidence.contestants.claude.grader.summary.passed, + duration: "12m 24s", }, { key: "codex", name: "Codex", - desktop: "/evidence/codex-desktop.png", - mobile: "/evidence/codex-mobile.png", - result: evidence.contestants.codex, + label: "Editorial", + headline: "Less busywork. More momentum.", + description: + "An airy, white-and-green page that explains Relay as a three-step workflow, with bespoke product illustrations throughout.", + desktop: codexDesktop, + mobile: codexMobile, + accent: "green", + score: evidence.contestants.codex.grader.summary.passed, + duration: "7m 35s", }, ] as const; +const rawFiles = [ + ["Frozen result", "/evidence/raw-run/results.json"], + ["Exact shared prompt", "/evidence/raw-run/prompt.txt"], + ["Claude checks", "/evidence/raw-run/claude/grader.json"], + ["Codex checks", "/evidence/raw-run/codex/grader.json"], + ["Claude rendered snapshot", "/evidence/raw-run/claude/rendered-page-snapshot.html"], + ["Claude source diff", "/evidence/raw-run/claude/final.diff"], + ["Codex source diff", "/evidence/raw-run/codex/final.diff"], + ["Run validation", "/evidence/raw-run/validation.json"], + ["Evidence manifest", "/evidence/raw-run/manifest.json"], +] as const; + +function ArrowIcon() { + return ( + + ); +} + +function CheckIcon() { + return ( + + ); +} + +function DesktopCapture({ image, name }: { image: StaticImageData; name: string }) { + return ( +
+ +
+ {`${name} +
+
+ ); +} + export default function Home() { return ( <>
- WhichBuildWon -
+
-
-

Case-study fixture · raw evidence

-

We gave Claude and Codex the exact same raw experiment evidence. Which one made the result easier to understand?

-

This page exposes the completed Relay landing-page run without an editorial conclusion or designed narrative.

+
+
+

One brief · two agents · one shot

+

Same brief. Two very different instincts.

+

+ Claude went dense and product-led. Codex went spacious and editorial. Both built working, + responsive SaaS pages; only Codex cleared every recorded check. +

+ + Compare the builds + +
+ + + +
+ The question +

{evidence.experiment_question}

+
-
-

Original experiment record

-
-
Question
{evidence.experiment_question}
-
Starting commit
{evidence.starting_git_commit}
-
Prompt SHA-256
{evidence.prompt_sha256}
-
Method
{evidence.methodology}
-
-
- Original task prompt - 
{evidence.exact_shared_brief}
-
+
+
+
+

What they actually built

+

Two complete answers to the same prompt

+

The screenshots below are the primary evidence. Scroll inside either frame to inspect the full page.

+
+ +
+ {builds.map((build) => ( +
+
+
+
+ {build.name} + {build.label} +
+

“{build.headline}”

+

{build.description}

+
+
+ {build.score} + /20 +
+
+ + + +
+ {build.duration} recorded elapsed + + Open full capture + +
+ +
+ See recorded mobile capture +
+ {`${build.name} +
+
+
+ ))} +
+
-
-

Recorded contestant outputs

-
- {contestants.map((contestant) => ( -
-

{contestant.name}

-

Desktop screenshot from the completed run.

-
- {`${contestant.name} +
+
+
+

The meaningful differences

+

Same checklist. Different product stories.

+
+

+ Neither agent merely filled a template. Their choices changed how Relay feels, how quickly the page moves, + and what a buyer learns first. +

+
+ +
+
+
Dimension
+
Claude Code
+
Codex
+
+
+
Visual direction
+
Dense and interface-led. A dark purple hero, compact cards, gradients, and detailed task UI.
+
Airy and editorial. A white hero, oversized type, restrained color, and roomy illustrated sections.
+
+
+
Feature story
+
Three outputs: meeting summaries, status reports, and intelligent task routing.
+
A three-step workflow: connect tools, describe the outcome, then see the work improve.
+
+
+
Trust pattern
+
Team logos followed immediately by three customer quote cards.
+
Team logos and a “2,000+ growing teams” cue in the hero, with one customer quote beside the calculator.
+
+
+
Mobile treatment
+
Reflows the same dense component sequence into a long single column.
+
Stacks the alternating narrative into a more spacious single-column sequence.
+
+
+
+ +
+
+
+

What the checks add

+

Both pages worked. Codex left fewer loose ends.

+

+ Both builds compiled, typechecked, rendered at desktop and mobile, avoided console errors and mobile + overflow, and shipped ROI calculators whose output changed under test. +

+
    +
  • Production build and TypeScript passed
    • +
  • Responsive captures rendered with no material horizontal overflow
    • +
  • Navigation, hero, features, ROI, pricing, FAQ, and footer were present
    • +
  • Buttons and form controls passed the accessibility check
    • +
+
+ +
+
+
+ + Codex +
+
+ 20/20 +
+
+
+ + Claude
- Open full desktop screenshot -
-
Checks
{contestant.result.grader.summary.passed}/{contestant.result.grader.summary.total} passed
-
Failures
{contestant.result.grader.summary.failed.length ? contestant.result.grader.summary.failed.join(", ") : "None recorded"}
-
Elapsed
{(contestant.result.duration_ms / 1000).toFixed(1)} seconds
-
CLI model record
{contestant.result.model || "Not available"}
-
-
- Mobile screenshot - {`${contestant.name} -
-
- ))} +
+ 18/20 +
+
+ Claude miss · substantive + 20 links pointed to “#” +

The no-broken-links check failed.

+
+
+ Claude miss · heuristic + Pricing plan count returned 0 +

The capture visibly shows three tiers; the structural detector did not recognize them.

+
+ + Inspect the frozen result + +
-
-

Deterministic check comparison

-
- - - - {evidence.deterministic_comparison.map((row) => ( - - - - - - ))} - -
CheckClaude CodeCodex
{row.check}{row.claude?.passed ? "Pass" : "Fail"}{row.codex?.passed ? "Pass" : "Fail"}
+
+
+

What this run suggests

+
+ A one-shot brief was enough for both agents to produce coherent, visually distinct product pages. In this + run, Codex followed the testable requirements more completely; the screenshots still leave the question + of taste to the reader. +
+
-
-

Other recorded evidence

-
    - {links.map(([label, href]) =>
  • {label}
    • )} -
-
- Recorded limitations -
    {[...evidence.limitations, ...(evidence.evidence_limitations || [])].map((item) =>
  • {item}
    • )}
-
+
+
+
+
+

Method & evidence

+

Same start. Same prompt. Same grader.

+
+

{evidence.methodology}

+
+ +
+
Run
August 26, 2026 · sequential clean worktrees
+
Starting commit
{evidence.starting_git_commit}
+
Claude model record
{evidence.contestants.claude.model}
+
Codex model record
Not available in the recorded result
+
+ +
+ + Read the exact shared prompt + Prompt SHA-256 · {evidence.prompt_sha256.slice(0, 12)}… + + 
{evidence.exact_shared_brief}
+
+ +
+

Raw evidence

+
    + {rawFiles.map(([label, href]) => ( +
  • + {label} +
    • + ))} +
+
+ +
+ Recorded limitations and evidence notes +
    + {evidence.limitations.map((item) =>
  • {item}
    • )} +
+
+
- + + ); }