Commitc963db5unknown_key
feat(landing): match crontech.ai aesthetic — bigger, bolder, cleaner
feat(landing): match crontech.ai aesthetic — bigger, bolder, cleaner User benchmark: crontech.ai. Bigger headlines, no decorative card, clean uppercase-tracked capability grid, big stat row. Hero - Title size: clamp(44, 8vw, 92) -> clamp(48, 9.5vw, 124). Display weight bumped to 700 for that crontech-tier presence. - Refined gradient on the accent span: tighter violet ramp (#a48bff -> #6d4dff) rather than the violet/cyan two-stop. - Removed the live PR review card + floating accent badges from the hero (the .landing-hero-visual block). Type-only hero, crontech-style. Trust strip -> capability grid - Replaced the row of feature names + dots with a 4-column uppercase tracked mono grid: 12 capability tags (Claude-powered AI, Spec-to-PR, Auto-repair, Real-time gates, MCP-native, Workflow runner, Self- hostable, Branch protection, Bun + Hono, Drizzle + Postgres, JSX server-rendered, Type-safe end to end). Same content, way more confident structure. New big-stat closer - Adds a 4-column 'Claude-powered / Self-hosted / MCP-native / Real-time' block with display-scale headlines + uppercase tracked labels. Same pattern as crontech's '4 products / Every business / Edge-native' row. Architecture verified: zero static HTML files in the repo. 100% JSX components rendered server-side via Hono + Bun. Same caliber stack as crontech.ai. Tests: 1233 pass / 1 unrelated fail.
1 file changed+103−115c963db51d7a4d0f1c75ede180f1047ae0aa78e55
1 changed file+103−115
Modifiedsrc/views/landing.tsx+103−115View fileUnifiedSplit
@@ -102,94 +102,45 @@ export const LandingHero: FC<LandingPageProps> = ({ stats } = {}) => {
102102 </p>
103103 )}
104104 </div>
105 </section>
105106
106 {/* ---------- Hero product visual: live AI PR review ---------- */}
107 <div class="landing-hero-visual" aria-hidden="true">
108 <div class="hero-pr-card">
109 <div class="hero-pr-header">
110 <span class="hero-pr-dot" />
111 <span class="hero-pr-title">
112 <span class="hero-pr-num">#247</span>
113 add: stripe checkout flow
114 </span>
115 <span class="hero-pr-status">
116 <span class="hero-pr-status-pulse" />
117 AI reviewing
118 </span>
119 </div>
120 <div class="hero-pr-body">
121 <div class="hero-pr-file">
122 <span class="hero-pr-file-icon">{"●"}</span>
123 <span class="hero-pr-file-name">src/billing/checkout.ts</span>
124 <span class="hero-pr-file-stats">
125 <span class="hero-pr-add">+12</span>
126 <span class="hero-pr-del">{"−3"}</span>
127 </span>
128 </div>
129 <div class="hero-pr-diff">
130 <div class="hero-pr-hunk">@@ -42,6 +42,15 @@ export async function checkout(req)</div>
131 <div class="hero-pr-line-add">+ const session = await stripe.checkout.sessions.create({"{"}</div>
132 <div class="hero-pr-line-add">+ mode: 'subscription',</div>
133 <div class="hero-pr-line-add">+ line_items: [{"{"} price: priceId, quantity: 1 {"}"}],</div>
134 <div class="hero-pr-line-add">+ success_url: `${"$"}{"{"}{"BASE"}{"}"}/done`,</div>
135 <div class="hero-pr-line-add">+ {"}"});</div>
136 </div>
137 </div>
138 <div class="hero-pr-comment">
139 <div class="hero-pr-bot-row">
140 <span class="hero-pr-bot-avatar">{"✨"}</span>
141 <span class="hero-pr-bot-name">claude-bot</span>
142 <span class="hero-pr-bot-meta">commented · just now</span>
143 </div>
144 <p class="hero-pr-bot-text">
145 Logic looks correct. One nit:{" "}
146 <code>success_url</code> should validate session before
147 redirecting — see{" "}
148 <span class="hero-pr-bot-link">stripe-docs/refunds</span>.
149 </p>
150 </div>
151 <div class="hero-pr-gates">
152 <span class="hero-pr-gate hero-pr-gate-pass">
153 {"✓"} GateTest
154 </span>
155 <span class="hero-pr-gate hero-pr-gate-pass">
156 {"✓"} Secret scan
157 </span>
158 <span class="hero-pr-gate hero-pr-gate-pass">
159 {"✓"} Tests · 1234 pass
160 </span>
161 <span class="hero-pr-gate hero-pr-gate-running">
162 <span class="hero-pr-gate-spin" /> AI Review
163 </span>
164 </div>
165 </div>
166 {/* Floating accent badges to suggest depth */}
167 <div class="hero-float hero-float-1">
168 <span class="hero-float-icon">{"✨"}</span>
169 spec-to-PR
170 </div>
171 <div class="hero-float hero-float-2">
172 <span class="hero-float-icon">{"⚡"}</span>
173 auto-repair active
174 </div>
107 {/* ---------- Capability strip — uppercase tracked grid (crontech-style) ---------- */}
108 <section class="landing-caps">
109 <div class="landing-caps-grid">
110 <span class="landing-cap">Claude-powered AI</span>
111 <span class="landing-cap">Spec-to-PR</span>
112 <span class="landing-cap">Auto-repair</span>
113 <span class="landing-cap">Real-time gates</span>
114 <span class="landing-cap">MCP-native</span>
115 <span class="landing-cap">Workflow runner</span>
116 <span class="landing-cap">Self-hostable</span>
117 <span class="landing-cap">Branch protection</span>
118 <span class="landing-cap">Bun + Hono</span>
119 <span class="landing-cap">Drizzle + Postgres</span>
120 <span class="landing-cap">JSX server-rendered</span>
121 <span class="landing-cap">Type-safe end to end</span>
175122 </div>
176123 </section>
177124
178 {/* ---------- Trust strip ---------- */}
179 <section class="landing-trust">
180 <p class="landing-trust-label">Built for the new shape of software</p>
181 <div class="landing-trust-row">
182 <span class="landing-trust-item">Spec-to-PR</span>
183 <span class="landing-trust-dot" aria-hidden="true" />
184 <span class="landing-trust-item">Auto-repair</span>
185 <span class="landing-trust-dot" aria-hidden="true" />
186 <span class="landing-trust-item">Live gates</span>
187 <span class="landing-trust-dot" aria-hidden="true" />
188 <span class="landing-trust-item">MCP-native</span>
189 <span class="landing-trust-dot" aria-hidden="true" />
190 <span class="landing-trust-item">Workflow runner</span>
191 <span class="landing-trust-dot" aria-hidden="true" />
192 <span class="landing-trust-item">Self-hosted</span>
125 {/* ---------- Big stat row (crontech-style hero closer) ---------- */}
126 <section class="landing-bigstats">
127 <div class="landing-bigstats-grid">
128 <div class="landing-bigstat">
129 <div class="landing-bigstat-num">Claude-powered</div>
130 <div class="landing-bigstat-label">The best AI, native</div>
131 </div>
132 <div class="landing-bigstat">
133 <div class="landing-bigstat-num">Self-hosted</div>
134 <div class="landing-bigstat-label">On your hardware</div>
135 </div>
136 <div class="landing-bigstat">
137 <div class="landing-bigstat-num">MCP-native</div>
138 <div class="landing-bigstat-label">Claude · Cursor · Code</div>
139 </div>
140 <div class="landing-bigstat">
141 <div class="landing-bigstat-num">Real-time</div>
142 <div class="landing-bigstat-label">SSE everywhere</div>
143 </div>
193144 </div>
194145 </section>
195146
@@ -884,13 +835,20 @@ const landingCss = `
884835 }
885836
886837 .landing-hero-title {
887 font-size: clamp(44px, 8vw, 92px);
888 line-height: 0.98;
889 letter-spacing: -0.04em;
890 font-weight: 600;
891 margin: 0 0 var(--s-6);
838 font-size: clamp(48px, 9.5vw, 124px);
839 line-height: 0.96;
840 letter-spacing: -0.045em;
841 font-weight: 700;
842 margin: 0 0 var(--s-7);
892843 color: var(--text-strong);
893844 }
845 .landing-hero-title .gradient-text {
846 background-image: linear-gradient(135deg, #a48bff 0%, #8c6dff 50%, #6d4dff 100%);
847 -webkit-background-clip: text;
848 background-clip: text;
849 -webkit-text-fill-color: transparent;
850 color: transparent;
851 }
894852
895853 .landing-hero-sub {
896854 font-size: clamp(15px, 1.6vw, 19px);
@@ -970,44 +928,74 @@ const landingCss = `
970928 }
971929 .landing-stats-sep { opacity: 0.4; }
972930
973 /* ---------- Trust strip ---------- */
974 .landing-trust {
975 margin: var(--s-8) auto var(--s-16);
976 padding: var(--s-7) 0;
931 /* ---------- Capability grid (crontech-style uppercase tracked) ---------- */
932 .landing-caps {
933 margin: var(--s-12) auto var(--s-16);
934 max-width: 1080px;
935 padding: var(--s-7) var(--s-4);
977936 border-top: 1px solid var(--border-subtle);
978937 border-bottom: 1px solid var(--border-subtle);
938 }
939 .landing-caps-grid {
940 display: grid;
941 grid-template-columns: repeat(4, 1fr);
942 gap: 24px 16px;
979943 text-align: center;
980944 }
981 .landing-trust-label {
945 .landing-cap {
982946 font-family: var(--font-mono);
983947 font-size: 11px;
948 font-weight: 600;
984949 text-transform: uppercase;
985 letter-spacing: 0.18em;
986 color: var(--text-faint);
987 margin-bottom: var(--s-4);
950 letter-spacing: 0.16em;
951 color: var(--text-muted);
952 transition: color var(--t-fast) var(--ease);
988953 }
989 .landing-trust-row {
990 display: flex;
991 align-items: center;
992 justify-content: center;
993 gap: 16px;
994 flex-wrap: wrap;
954 .landing-cap:hover { color: var(--text-strong); }
955 (max-width: 800px) {
956 .landing-caps-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
957 }
958 (max-width: 480px) {
959 .landing-caps-grid { grid-template-columns: 1fr; }
960 }
961
962 /* ---------- Big stat row (crontech-style hero closer) ---------- */
963 .landing-bigstats {
964 margin: var(--s-10) auto var(--s-20);
965 max-width: 1180px;
966 padding: 0 var(--s-4);
967 }
968 .landing-bigstats-grid {
969 display: grid;
970 grid-template-columns: repeat(4, 1fr);
971 gap: 32px;
972 text-align: left;
995973 }
996 .landing-trust-item {
974 .landing-bigstat {
975 padding: var(--s-2) 0;
976 }
977 .landing-bigstat-num {
997978 font-family: var(--font-display);
998 font-size: 17px;
979 font-size: clamp(28px, 3.5vw, 44px);
980 line-height: 1.05;
981 letter-spacing: -0.03em;
982 font-weight: 700;
983 color: var(--text-strong);
984 margin-bottom: var(--s-2);
985 }
986 .landing-bigstat-label {
987 font-family: var(--font-mono);
988 font-size: 11px;
999989 font-weight: 500;
1000 letter-spacing: -0.015em;
1001 color: var(--text-muted);
1002 transition: color var(--t-fast) var(--ease);
990 text-transform: uppercase;
991 letter-spacing: 0.14em;
992 color: var(--text-faint);
1003993 }
1004 .landing-trust-item:hover { color: var(--text-strong); }
1005 .landing-trust-dot {
1006 width: 4px;
1007 height: 4px;
1008 border-radius: 50%;
1009 background: var(--text-faint);
1010 opacity: 0.5;
994 (max-width: 800px) {
995 .landing-bigstats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
996 }
997 (max-width: 480px) {
998 .landing-bigstats-grid { grid-template-columns: 1fr; gap: 24px; }
1011999 }
10121000
10131001 /* ---------- Section base ---------- */
10141002