@@ -147,73 +147,91 @@ export default function AboutPage() {
147147 </ nav >
148148
149149 { /* ── Hero ── */ }
150- < div className = "bg-[#fffd43] w-full" >
151- < section className = "max-w-6xl mx-auto px-6 pt-16 pb-16 md:pt-24 md:pb-20 flex flex-col md:flex-row items-center gap-8 md:gap-12" >
152- { /* Image — top on mobile, right on desktop */ }
153- < div className = "w-full max-w-[380px] md:max-w-none md:w-[460px] flex-shrink-0 order-1 md:order-2" >
150+ < div className = "bg-[#fffd43] w-full overflow-hidden" >
151+ < section className = "relative max-w-6xl mx-auto px-6 pt-12 pb-10 md:pt-20 md:pb-16 min-h-[calc(100vh-64px)] flex items-center" >
152+ < div className = "pointer-events-none absolute -right-16 top-10 hidden md:block w-[52%] max-w-[600px]" >
154153 < Image
155154 src = "/hero-visual.png"
156155 alt = "LemonCake — AI agent payment infrastructure"
157156 width = { 2508 }
158157 height = { 2508 }
159158 priority
160- sizes = "(min-width: 768px) 460px, 380px "
159+ sizes = "(min-width: 768px) 600px, 360px "
161160 className = "w-full h-auto drop-shadow-2xl"
162161 />
163162 </ div >
164- { /* Text — bottom on mobile, left on desktop */ }
165- < div className = "flex-1 text-center md:text-left order-2 md:order-1" >
166- < div className = "inline-flex items-center gap-2 mb-5 flex-wrap justify-center md:justify-start" >
167- < span className = "px-3 py-1 bg-[#1a0f00]/8 border border-[#1a0f00]/15 rounded-full text-[11px] font-mono text-[#1a0f00]/70" >
163+ < div className = "relative z-10 w-full md:max-w-[620px] text-left" >
164+ < div className = "inline-flex items-center gap-2 mb-5 flex-wrap" >
165+ < span className = "px-3 py-1 bg-[#1a0f00]/8 border border-[#1a0f00]/15 rounded-full text-[10.5px] md:text-[11px] font-mono text-[rgba(26,15,0,0.72)]" >
168166 AI API のための安全な収益化レイヤー · オープンコア
169167 </ span >
170168 < span className = "px-2 py-1 bg-[#1a0f00] text-[#fffd43] rounded-full text-[10px] font-mono font-bold uppercase tracking-widest" >
171169 Private Beta
172170 </ span >
173171 </ div >
174- < h1 className = "text-3xl md :text-4xl lg:text-5xl font-black tracking-tight text-[#1a0f00] mb-4 leading-[1.08 ]" >
172+ < h1 className = "text-[34px] sm :text-5xl lg:text-6xl font-black tracking-tight text-[#1a0f00] mb-4 leading-[1.02 ]" >
175173 AIエージェントに、< br />
176174 < span className = "text-black" >
177175 有料APIを“自分で払って”使わせる。
178176 </ span >
179177 </ h1 >
180- < p className = "text-base md:text-lg text-[#1a0f00]/60 max-w-xl mb-3 leading-relaxed mx-auto md:mx-0 " >
181- < strong className = "text-[#1a0f00]" > エージェントに上限つきの財布を渡すと、有料APIを自律で払って使う 。</ strong > < br / >
182- 発見→支払い→通過。コールごとの鍵も人間の承認も不要、しかも上限を超えられない。取り分は97%、LemonCakeは前払い時に3%のみ・資金は一切預かりません 。
178+ < p className = "text-[15px] md:text-lg text-[rgba(26,15,0,0.76)] max-w-[560px] mb-3 leading-relaxed" >
179+ < strong className = "text-[#1a0f00]" > 上限つき Pay Token を渡すだけ 。</ strong >
180+ エージェントは有料APIを自律で支払い、使いすぎる前に止まります。コールごとの鍵も、暗号資産ウォレットも、人間の承認待ちも不要 。
183181 </ p >
184- < p className = "text-[12px] text-[#1a0f00]/45 max-w-xl mb-8 leading-relaxed mx-auto md:mx-0 " >
185- < strong > 本番稼働中:</ strong > x402 ゲートウェイ、エージェント資金供給（off-session 補充）、 Pay Token、支出上限、使用台帳 。初回3,000コール無料、以降3% — EN / 日本語 / Español 。
182+ < p className = "text-[12px] text-[rgba(26,15,0,0.62)] max-w-[560px] mb-7 leading-relaxed" >
183+ < strong > 本番稼働中:</ strong > x402 gateway / Stripe-backed Pay Token / spend caps / usage ledger 。初回3,000コール無料、以降3%。売上の97%はSellerへ 。
186184 </ p >
187- < div className = "flex items-center justify-center md:justify-start gap-3 flex-wrap" >
185+ < div className = "flex items-center gap-3 flex-wrap" >
188186 < Link
189187 href = "/app"
190- className = "inline-flex items-center gap-2 px-6 py-3 bg-[#1a0f00] text-white font-semibold rounded-xl hover:bg-[#1a0f00]/80 transition-colors text-sm"
188+ className = "inline-flex items-center gap-2 px-6 py-3 bg-[#1a0f00] text-[#fffd43] font-bold rounded-lg hover:bg-[#1a0f00]/85 transition-colors text-sm"
191189 >
192190 無料で始める < IconArrowRight />
193191 </ Link >
194192 < Link
195- href = "/docs "
196- className = "inline-flex items-center gap-2 px-6 py-3 bg-white text-[#1a0f00] border border-[#1a0f00]/15 font-semibold rounded-xl hover:bg-white/90 transition-colors text-sm"
193+ href = "/demo "
194+ className = "inline-flex items-center gap-2 px-6 py-3 bg-white text-[#1a0f00] border border-[#1a0f00]/15 font-semibold rounded-lg hover:bg-white/90 transition-colors text-sm"
197195 >
198- ドキュメント →
196+ ライブデモを見る →
199197 </ Link >
200198 </ div >
201- < p className = "mt-6 text-[11px] text-[#1a0f00]/40 font-mono" >
202- Used by xstocks-mcp · gmx-mcp · alpaca-guard-mcp · tokenized-stock-mcp · agent-payment-mcp
203- </ p >
199+ < dl className = "mt-8 grid grid-cols-3 max-w-[520px] border-y border-[rgba(26,15,0,0.14)] divide-x divide-[rgba(26,15,0,0.14)]" >
200+ { [
201+ [ "97%" , "Seller取り分" ] ,
202+ [ "3,000" , "無料コール" ] ,
203+ [ "0" , "暗号資産ウォレット" ] ,
204+ ] . map ( ( [ v , k ] ) => (
205+ < div key = { k } className = "py-3 px-3 first:pl-0" >
206+ < dt className = "text-[22px] font-black leading-none text-[#1a0f00]" > { v } </ dt >
207+ < dd className = "mt-1 text-[10px] font-bold text-[rgba(26,15,0,0.56)]" > { k } </ dd >
208+ </ div >
209+ ) ) }
210+ </ dl >
211+ < div className = "mt-7 md:hidden" >
212+ < Image
213+ src = "/hero-visual.png"
214+ alt = "LemonCake — AI agent payment infrastructure"
215+ width = { 2508 }
216+ height = { 2508 }
217+ priority
218+ sizes = "360px"
219+ className = "mx-auto w-[78%] max-w-[300px] h-auto drop-shadow-2xl"
220+ />
221+ </ div >
204222 </ div >
205223 </ section >
206224
207225 { /* Code snippet — sits inside the yellow hero band as a "this is real" anchor */ }
208- < section className = "max-w-3xl mx-auto px-6 pb-16" >
209- < div className = "rounded-2xl bg-[#1a0f00] text-white p-6 shadow-xl" >
226+ < section className = "max-w-5xl mx-auto px-6 pb-12 md: pb-16" >
227+ < div className = "rounded-lg bg-[#1a0f00] text-white p-4 md:p-5 shadow-xl border border-[#1a0f00]/20 " >
210228 < div className = "flex items-center gap-1.5 mb-4" >
211- < div className = "w-2.5 h-2.5 rounded-full bg-[#ff5f57]" />
212- < div className = "w-2.5 h-2.5 rounded-full bg-[#febc2e]" />
213- < div className = "w-2.5 h-2.5 rounded-full bg-[#28c840]" />
229+ < div className = "w-2 h-2 rounded-full bg-[#ff5f57]" />
230+ < div className = "w-2 h-2 rounded-full bg-[#febc2e]" />
231+ < div className = "w-2 h-2 rounded-full bg-[#28c840]" />
214232 < span className = "ml-3 text-[11px] font-mono text-white/40" > tool-server.ts</ span >
215233 </ div >
216- < pre className = "font-mono text-[13px] leading-relaxed overflow-x-auto" >
234+ < pre className = "font-mono text-[12px] md:text-[ 13px] leading-relaxed overflow-x-auto" >
217235 < code >
218236 < span className = "text-[#c8b800]" > { "import" } </ span > { " { createLemonCakeSDK } " } < span className = "text-[#c8b800]" > { "from" } </ span > < span className = "text-[#7bc97a]" > { `"@lemon-cake/mcp-sdk"` } </ span > ;{ "\n\n" }
219237 < span className = "text-[#c8b800]" > const</ span > { " lc = " } < span className = "text-white" > createLemonCakeSDK</ span > { "();" } { " " } < span className = "text-white/40" > { "// env var なしのデモモード" } </ span > { "\n\n" }
@@ -283,7 +301,7 @@ export default function AboutPage() {
283301 </ div >
284302
285303 < p className = "mt-10 text-center text-[12px] text-white/40 max-w-xl mx-auto leading-relaxed" >
286- 変えるのは URL 1 つだけ。Gateway ルーティング・Pay Token 検証・レート制限・使用量計測、そして 97% のあなたのウォレットへの精算まで 、すべて LemonCake が処理します。
304+ 変えるのは URL 1 つだけ。Gateway ルーティング・Pay Token 検証・レート制限・使用量計測、そして Stripe 経由の Seller 入金まで 、すべて LemonCake が処理します。
287305 </ p >
288306 </ section >
289307
@@ -302,8 +320,8 @@ export default function AboutPage() {
302320 { t : "従量課金" , d : "tool call 単位・token 単位・成果単位で課金。サブセントのマイクロペイメントがネイティブに動作 — 最低取引額なし、Stripe のような $0.30 の下限なし。" } ,
303321 { t : "AI エージェント決済" , d : "エージェントが使い切り上限付きで、あなたのエンドポイントに直接支払う。人間の承認も、API キー共有も、「認証情報をリセットして」というサポート対応も不要。" } ,
304322 { t : "API キー管理ゼロ" , d : "キーの発行・ローテーション・失効はもう不要。Buyer はインストール時に 1 度だけ認証。あなたが秘密情報に触れることはありません。" } ,
305- { t : "最初からグローバル " , d : "Stripe Connect が使えない国でも動く。日本・インドネシア・アルゼンチンも初日から対応 。" } ,
306- { t : "組込みウォレット " , d : "Buyer に暗号資産ウォレットは不要。サインアップ時に埋め込むので、メールでログインするだけ。裏側の仕組みは意識しなくて大丈夫 。" } ,
323+ { t : "Stripe 入金 " , d : "Buyer はカードで Pay Token を購入。Seller には Stripe Connect Direct Charge で入金。LemonCake が資金をプールすることはありません 。" } ,
324+ { t : "暗号資産オンボーディング不要 " , d : "Buyer にブロックチェーンウォレット、シードフレーズ、取引所アカウントは不要。カード決済と上限つき Pay Token だけで使えます 。" } ,
307325 { t : "MCP ネイティブ" , d : "どの MCP サーバーにもそのまま挿せるミドルウェア。Bazaar + Glama + Smithery + mcp.so + Claude Code Plugins Directory に自動掲載。" } ,
308326 ] . map ( ( { t, d } ) => (
309327 < div key = { t } className = "rounded-2xl bg-white/4 border border-white/8 p-6" >
@@ -342,9 +360,9 @@ export default function AboutPage() {
342360 [ "1 コール サブセント" , "実質 $0.30 下限" , "可能だが Stripe 課金" , "$0.005" ] ,
343361 [ "MCP / agent ミドルウェア" , "—" , "—" , "そのまま挿せる" ] ,
344362 [ "API キー管理不要" , "キー必須" , "キー必須" , "組込み認証" ] ,
345- [ "無料枠" , "Stripe レート適用" , "エンタープライズ階層" , "初回 3,000 件無料・以降ガス代込み " ] ,
363+ [ "無料枠" , "Stripe レート適用" , "エンタープライズ階層" , "初回 3,000 件無料・以降3% " ] ,
346364 [ "OSS の SDK" , "クローズド" , "クローズド" , "MIT" ] ,
347- [ "導入時間" , "Connect オンボーディング" , "実装エンジニアが必要" , "env var 1 つ " ] ,
365+ [ "導入時間" , "Connect オンボーディング" , "実装エンジニアが必要" , "URLを貼って公開 " ] ,
348366 ] . map ( ( [ f , s , o , lc ] ) => (
349367 < tr key = { f } className = "border-b border-white/5" >
350368 < td className = "py-3 px-3 text-white/70 font-medium" > { f } </ td >
@@ -382,7 +400,7 @@ export default function AboutPage() {
382400 { [
383401 { t : "14:21:08" , reason : "spend_cap_exceeded" , saved : "$12.40" } ,
384402 { t : "14:19:55" , reason : "rate_limit_exceeded" , saved : "$0.78" } ,
385- { t : "14:15:02" , reason : "permit_revoked" , saved : "$0.04" } ,
403+ { t : "14:15:02" , reason : "token_revoked" , saved : "$0.04" } ,
386404 { t : "14:11:30" , reason : "spend_cap_exceeded" , saved : "$8.20" } ,
387405 ] . map ( ( r , i ) => (
388406 < div key = { i } className = "flex items-center justify-between py-1.5 border-b border-white/5 last:border-b-0" >
0 commit comments