Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"/> | |
| <title>BuildAI — Build Websites with AI in Seconds</title> | |
| <meta name="description" content="Describe any website and 5 AI models build it live. React + Tailwind. Powered by Cerebras, Gemini, Groq."/> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>"/> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/> | |
| <style> | |
| *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} | |
| html{scroll-behavior:smooth} | |
| body{font-family:'Inter',system-ui,sans-serif;background:#07080f;color:#e2e8f0;-webkit-font-smoothing:antialiased;overflow-x:hidden} | |
| button,a{font-family:inherit;cursor:pointer;text-decoration:none;color:inherit} | |
| @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}} | |
| @keyframes gradFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} | |
| @keyframes orb1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}} | |
| @keyframes orb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,20px)}} | |
| @keyframes orb3{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,30px)}} | |
| @keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}} | |
| @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} | |
| /* NAV */ | |
| .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:62px;background:rgba(7,8,15,.88);backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.05)} | |
| .nav-logo{display:flex;align-items:center;gap:10px} | |
| .nav-icon{width:32px;height:32px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px} | |
| .nav-name{font-weight:800;font-size:17px;letter-spacing:-.5px} | |
| .nav-v{padding:2px 9px;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);border-radius:999px;font-size:10px;color:#a78bfa;font-weight:700} | |
| .nav-links{display:flex;gap:28px} | |
| .nav-link{font-size:14px;color:#64748b;font-weight:500;transition:color .2s} | |
| .nav-link:hover{color:#e2e8f0} | |
| .nav-btns{display:flex;gap:10px} | |
| .btn-g{padding:9px 20px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#94a3b8;font-size:13.5px;font-weight:500;transition:all .2s} | |
| .btn-g:hover{border-color:rgba(99,102,241,.5);color:#e2e8f0;background:rgba(99,102,241,.06)} | |
| .btn-g:active{transform:scale(.97)} | |
| .btn-p{position:relative;overflow:hidden;padding:10px 22px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:10px;color:#fff;font-size:13.5px;font-weight:700;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 16px rgba(99,102,241,.3)} | |
| .btn-p:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(99,102,241,.45)} | |
| .btn-p:active{transform:scale(.97)} | |
| .btn-p::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);transition:transform .5s} | |
| .btn-p:hover::after{transform:translateX(100%)} | |
| /* HERO */ | |
| .hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 24px 80px;position:relative;overflow:hidden} | |
| .hero-bg{position:absolute;inset:0;pointer-events:none} | |
| .orb{position:absolute;border-radius:50%;filter:blur(100px)} | |
| .o1{width:700px;height:700px;top:-15%;left:-10%;background:radial-gradient(ellipse,rgba(99,102,241,.2) 0%,transparent 70%);animation:orb1 16s ease-in-out infinite} | |
| .o2{width:600px;height:600px;bottom:-10%;right:-5%;background:radial-gradient(ellipse,rgba(139,92,246,.15) 0%,transparent 70%);animation:orb2 20s ease-in-out infinite} | |
| .o3{width:500px;height:500px;top:40%;left:30%;background:radial-gradient(ellipse,rgba(236,72,153,.09) 0%,transparent 70%);animation:orb3 24s ease-in-out infinite} | |
| .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(99,102,241,.033) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.033) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%)} | |
| .hero-inner{position:relative;z-index:2;max-width:780px;width:100%} | |
| .hero-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 16px 5px 8px;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.22);border-radius:999px;font-size:12px;color:#a78bfa;margin-bottom:32px;animation:fadeUp .5s ease both} | |
| .pill-tag{padding:2px 9px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:999px;color:#fff;font-size:10px;font-weight:700} | |
| .h1{font-size:clamp(38px,7vw,88px);font-weight:900;line-height:1.01;letter-spacing:-3.5px;margin-bottom:24px;animation:fadeUp .6s .05s ease both} | |
| .h1 .pl{color:#f1f5f9} | |
| .h1 .gr{background:linear-gradient(135deg,#6366f1 0%,#a78bfa 40%,#ec4899 100%);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradFlow 5s ease infinite} | |
| .hero-sub{font-size:18px;color:#4b5563;max-width:540px;margin:0 auto 48px;line-height:1.8;animation:fadeUp .7s .1s ease both} | |
| /* PROMPT */ | |
| .prompt-wrap{max-width:700px;margin:0 auto;animation:fadeUp .8s .15s ease both} | |
| .pbox{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);border-radius:20px;padding:7px 7px 7px 22px;margin-bottom:18px;backdrop-filter:blur(20px);box-shadow:0 20px 60px rgba(0,0,0,.4);transition:border-color .25s,box-shadow .25s} | |
| .pbox:focus-within{border-color:rgba(99,102,241,.45);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 3px rgba(99,102,241,.1)} | |
| .pinp{flex:1;background:transparent;border:none;outline:none;color:#e2e8f0;font-size:15.5px;padding:12px 0;font-family:'Inter',sans-serif} | |
| .pinp::placeholder{color:#252e45} | |
| .pbtn{position:relative;overflow:hidden;padding:13px 26px;border:none;border-radius:14px;color:#fff;font-size:14.5px;font-weight:700;flex-shrink:0;transition:all .2s;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 4px 20px rgba(99,102,241,.4)} | |
| .pbtn:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(99,102,241,.5)} | |
| .pbtn:active{transform:scale(.96)} | |
| .pbtn.off{background:#1a1f33;color:#334155;box-shadow:none;pointer-events:none} | |
| .pbtn::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);transition:transform .6s} | |
| .pbtn:hover:not(.off)::after{transform:translateX(100%)} | |
| .chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center} | |
| .chip{padding:8px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-size:12.5px;color:#64748b;transition:all .2s;font-weight:500} | |
| .chip:hover{border-color:rgba(99,102,241,.4);color:#a5b4fc;background:rgba(99,102,241,.07);transform:translateY(-1px)} | |
| .chip:active{transform:scale(.97)} | |
| /* PROOF */ | |
| .proof-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:44px;flex-wrap:wrap;animation:fadeUp .9s .2s ease both} | |
| .avs{display:flex} | |
| .av{width:32px;height:32px;border-radius:50%;border:2px solid #07080f;margin-left:-9px;font-size:14px;display:flex;align-items:center;justify-content:center;background:#1a1f33} | |
| .av:first-child{margin-left:0} | |
| .pt{font-size:13px;color:#334155;font-weight:500} | |
| .pt strong{color:#64748b} | |
| .pdiv{width:1px;height:16px;background:#1e2740} | |
| .stars{color:#f59e0b;letter-spacing:2px;font-size:12px} | |
| /* API BADGES */ | |
| .api-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:48px 24px 20px;max-width:700px;margin:0 auto} | |
| .ab{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:9px;font-size:12px;color:#475569;font-weight:500;transition:all .2s} | |
| .ab:hover{border-color:rgba(99,102,241,.2);color:#818cf8} | |
| .adot{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981;animation:pulse 2.5s ease infinite} | |
| /* FEATURES */ | |
| .sec{padding:88px 24px;max-width:1080px;margin:0 auto} | |
| .eyebrow{font-size:11px;font-weight:700;color:#6366f1;letter-spacing:3px;text-transform:uppercase;text-align:center;margin-bottom:14px} | |
| .sec-h{font-size:clamp(26px,4vw,40px);font-weight:900;text-align:center;letter-spacing:-1.2px;margin-bottom:12px;color:#f1f5f9} | |
| .sec-p{font-size:15px;color:#475569;text-align:center;max-width:480px;margin:0 auto 52px;line-height:1.8} | |
| .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px} | |
| .fc{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:26px;transition:all .3s} | |
| .fc:hover{border-color:rgba(99,102,241,.3);transform:translateY(-4px);background:rgba(99,102,241,.04)} | |
| .fi{font-size:28px;margin-bottom:16px;display:block} | |
| .ft{font-size:14.5px;font-weight:700;color:#c4d4f0;margin-bottom:8px} | |
| .fd{font-size:12.5px;color:#475569;line-height:1.75} | |
| /* STEPS */ | |
| .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px} | |
| .step{text-align:center;padding:32px 24px} | |
| .snum{width:52px;height:52px;border-radius:999px;background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.2));border:1px solid rgba(99,102,241,.3);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#a78bfa;margin:0 auto 20px;font-family:'JetBrains Mono',monospace} | |
| .st{font-size:16px;font-weight:700;color:#f1f5f9;margin-bottom:8px} | |
| .sd{font-size:13px;color:#475569;line-height:1.75} | |
| /* TESTIMONIALS */ | |
| .tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px} | |
| .tc{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:24px;transition:all .25s} | |
| .tc:hover{border-color:rgba(99,102,241,.2);transform:translateY(-2px)} | |
| .tc-stars{display:flex;gap:3px;margin-bottom:14px} | |
| .tc-star{color:#f59e0b;font-size:13px} | |
| .tc-q{font-size:13.5px;color:#94a3b8;line-height:1.75;margin-bottom:18px;font-style:italic} | |
| .tc-a{display:flex;align-items:center;gap:12px} | |
| .tc-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} | |
| .tc-n{font-size:13px;font-weight:700;color:#f1f5f9} | |
| .tc-r{font-size:11px;color:#475569;margin-top:2px} | |
| /* CTA BANNER */ | |
| .cta-wrap{max-width:1080px;margin:0 auto;padding:0 24px 80px} | |
| .cta-box{padding:64px 40px;background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.08));border:1px solid rgba(99,102,241,.2);border-radius:24px;text-align:center;position:relative;overflow:hidden} | |
| .cta-box::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(99,102,241,.07) 0%,transparent 60%);pointer-events:none} | |
| .cta-h{font-size:clamp(26px,4vw,42px);font-weight:900;letter-spacing:-1.5px;margin-bottom:14px;color:#f1f5f9;position:relative} | |
| .cta-p{font-size:16px;color:#475569;margin-bottom:34px;position:relative} | |
| .cta-btn{position:relative;overflow:hidden;padding:17px 48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:16px;color:#fff;font-size:16px;font-weight:800;transition:transform .15s,box-shadow .2s;box-shadow:0 10px 40px rgba(99,102,241,.4)} | |
| .cta-btn:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(99,102,241,.5)} | |
| .cta-btn:active{transform:scale(.97)} | |
| .cta-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);transition:transform .6s} | |
| .cta-btn:hover::after{transform:translateX(100%)} | |
| .cta-note{font-size:12px;color:#334155;margin-top:14px;position:relative} | |
| /* FOOTER */ | |
| .footer{border-top:1px solid rgba(255,255,255,.05);padding:32px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:1080px;margin:0 auto} | |
| .f-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px} | |
| .f-links{display:flex;gap:24px} | |
| .f-link{font-size:13px;color:#334155;transition:color .2s} | |
| .f-link:hover{color:#818cf8} | |
| .f-copy{font-size:12px;color:#1e2740} | |
| @media(max-width:768px){ | |
| .nav{padding:0 18px} | |
| .nav-links{display:none} | |
| .hero{padding:90px 18px 60px} | |
| .h1{letter-spacing:-2px} | |
| .pbox{padding:6px 6px 6px 16px} | |
| .pinp{font-size:14px} | |
| .pbtn{padding:11px 18px;font-size:13px} | |
| .sec{padding:56px 18px} | |
| .cta-box{padding:44px 22px} | |
| .footer{padding:28px 18px;flex-direction:column;align-items:flex-start} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="nav"> | |
| <div class="nav-logo"> | |
| <div class="nav-icon">⚡</div> | |
| <span class="nav-name">BuildAI</span> | |
| <span class="nav-v">v7</span> | |
| </div> | |
| <div class="nav-links"> | |
| <a class="nav-link" href="#features">Features</a> | |
| <a class="nav-link" href="#how">How it works</a> | |
| <a class="nav-link" href="#reviews">Reviews</a> | |
| </div> | |
| <div class="nav-btns"> | |
| <button class="btn-g" onclick="goBuilder()">Sign in</button> | |
| <button class="btn-p" onclick="goBuilder()">Get started free</button> | |
| </div> | |
| </nav> | |
| <section class="hero"> | |
| <div class="hero-bg"> | |
| <div class="orb o1"></div> | |
| <div class="orb o2"></div> | |
| <div class="orb o3"></div> | |
| <div class="hero-grid"></div> | |
| </div> | |
| <div class="hero-inner"> | |
| <div class="hero-pill"> | |
| <span class="pill-tag">NEW</span> | |
| Powered by Cerebras · Gemini · Groq | |
| </div> | |
| <h1 class="h1"> | |
| <span class="pl">Build websites</span><br> | |
| <span class="gr">with AI in seconds</span> | |
| </h1> | |
| <p class="hero-sub">Describe any website. 5 AI models collaborate in 3 rounds to generate professional React + Tailwind code — live, in front of you.</p> | |
| <div class="prompt-wrap"> | |
| <div class="pbox"> | |
| <input | |
| class="pinp" | |
| id="hero-inp" | |
| type="text" | |
| placeholder="Describe your website… e.g. 'SaaS landing page for a project management tool'" | |
| autocomplete="off" | |
| oninput="syncBtn()" | |
| onkeydown="if(event.key==='Enter' && !document.getElementById('hero-btn').classList.contains('off')) launch()" | |
| /> | |
| <button class="pbtn off" id="hero-btn" onclick="launch()">Build it →</button> | |
| </div> | |
| <div class="chips"> | |
| <button class="chip" onclick="pick('Premium sneaker e-commerce store with product grid, cart and checkout')">🛒 E-commerce</button> | |
| <button class="chip" onclick="pick('SaaS landing page with pricing, features and testimonials')">💼 SaaS</button> | |
| <button class="chip" onclick="pick('Italian restaurant with menu, gallery and reservation form')">🍕 Restaurant</button> | |
| <button class="chip" onclick="pick('UI/UX designer portfolio with case studies')">🎨 Portfolio</button> | |
| <button class="chip" onclick="pick('Dark analytics dashboard with charts and KPI cards')">📊 Dashboard</button> | |
| </div> | |
| </div> | |
| <div class="proof-row"> | |
| <div class="avs"> | |
| <div class="av">😊</div> | |
| <div class="av">😎</div> | |
| <div class="av">🤩</div> | |
| <div class="av">🎯</div> | |
| </div> | |
| <span class="pt"><strong>4,200+</strong> websites built</span> | |
| <div class="pdiv"></div> | |
| <span class="stars">★★★★★</span> | |
| <span class="pt"><strong>4.9</strong>/5 rating</span> | |
| </div> | |
| </div> | |
| </section> | |
| <div style="text-align:center"> | |
| <div class="api-row"> | |
| <div class="ab"><div class="adot"></div>Cerebras · 1,000 tok/s</div> | |
| <div class="ab"><div class="adot"></div>Gemini Flash</div> | |
| <div class="ab"><div class="adot"></div>Groq LPU</div> | |
| <div class="ab"><div class="adot"></div>OpenRouter</div> | |
| <div class="ab"><div class="adot"></div>Mistral AI</div> | |
| </div> | |
| </div> | |
| <section class="sec" id="features"> | |
| <div class="eyebrow">Why BuildAI</div> | |
| <h2 class="sec-h">Everything you need</h2> | |
| <p class="sec-p">No subscriptions. No tools to install. Every feature works out of the box, completely free.</p> | |
| <div class="fgrid"> | |
| <div class="fc"><span class="fi">⚡</span><div class="ft">Cerebras Ultra-Fast</div><div class="fd">Cerebras runs at 1,000+ tokens/sec. Your website draft appears in seconds, not minutes.</div></div> | |
| <div class="fc"><span class="fi">🧠</span><div class="ft">5-Model Pipeline</div><div class="fd">Cerebras builds → Gemini reviews design → Groq polishes. Three rounds, dramatically better output every time.</div></div> | |
| <div class="fc"><span class="fi">⚛️</span><div class="ft">React + Tailwind</div><div class="fd">Every website uses real React components with hooks, Tailwind CDN, and premium Google Fonts.</div></div> | |
| <div class="fc"><span class="fi">🗺️</span><div class="ft">Smart Templates</div><div class="fd">AI automatically picks the best template — landing, ecommerce, restaurant, portfolio, or dashboard.</div></div> | |
| <div class="fc"><span class="fi">📸</span><div class="ft">Real Photos</div><div class="fd">Every website gets keyword-matched real photos. No stock photo subscription ever needed.</div></div> | |
| <div class="fc"><span class="fi">📦</span><div class="ft">Download as ZIP</div><div class="fd">Download your website as a ZIP — index.html, style.css, app.js, README. Ready to deploy anywhere.</div></div> | |
| </div> | |
| </section> | |
| <section style="padding:0 24px 88px;max-width:1080px;margin:0 auto" id="how"> | |
| <div class="eyebrow">The Process</div> | |
| <h2 class="sec-h">How it works</h2> | |
| <p class="sec-p">Three AI models, three rounds, one stunning website. About 30 seconds total.</p> | |
| <div class="steps"> | |
| <div class="step"><div class="snum">01</div><div class="st">You describe it</div><div class="sd">Type what you want or click a template chip. Be as detailed or brief as you like.</div></div> | |
| <div class="step"><div class="snum">02</div><div class="st">3 AIs collaborate</div><div class="sd">Cerebras builds at 1,000+ tok/s. Gemini Flash elevates the design. Groq polishes every detail.</div></div> | |
| <div class="step"><div class="snum">03</div><div class="st">Download or publish</div><div class="sd">Preview in desktop/tablet/mobile. Refine via chat. Download ZIP or publish live in one click.</div></div> | |
| </div> | |
| </section> | |
| <section class="sec" id="reviews"> | |
| <div class="eyebrow">Reviews</div> | |
| <h2 class="sec-h">Loved by builders worldwide</h2> | |
| <p class="sec-p">Developers, designers, and entrepreneurs use BuildAI every day.</p> | |
| <div class="tgrid"> | |
| <div class="tc"> | |
| <div class="tc-stars"><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span></div> | |
| <p class="tc-q">"Built a complete restaurant website in under a minute. The design quality blew me away — looked like a $5,000 agency site."</p> | |
| <div class="tc-a"><div class="tc-av">👩🍳</div><div><div class="tc-n">Priya Sharma</div><div class="tc-r">Restaurant Owner, Mumbai</div></div></div> | |
| </div> | |
| <div class="tc"> | |
| <div class="tc-stars"><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span></div> | |
| <p class="tc-q">"The 3-round pipeline actually works. By Round 3 it looks like Stripe's design team made it. Genuinely impressed."</p> | |
| <div class="tc-a"><div class="tc-av">👨💻</div><div><div class="tc-n">Marcus Chen</div><div class="tc-r">Full-Stack Developer, Singapore</div></div></div> | |
| </div> | |
| <div class="tc"> | |
| <div class="tc-stars"><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span></div> | |
| <p class="tc-q">"Finally an AI builder that doesn't give me the same purple gradient every time. Cerebras + Gemini = unbeatable combo."</p> | |
| <div class="tc-a"><div class="tc-av">🎨</div><div><div class="tc-n">Fatima Al-Rashid</div><div class="tc-r">UI/UX Designer, Dubai</div></div></div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="cta-wrap"> | |
| <div class="cta-box"> | |
| <h2 class="cta-h">Start building for free</h2> | |
| <p class="cta-p">No credit card. No account required to try. Describe your website and watch AI build it live.</p> | |
| <button class="cta-btn" onclick="goBuilder()">Launch the Builder →</button> | |
| <div class="cta-note">Free forever · No credit card · React + Tailwind output</div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <div class="f-logo"><div class="nav-icon" style="width:26px;height:26px;font-size:13px">⚡</div>BuildAI</div> | |
| <div class="f-links"> | |
| <a class="f-link" href="#features">Features</a> | |
| <a class="f-link" href="#how">How it works</a> | |
| <a class="f-link" href="/builder">Builder</a> | |
| </div> | |
| <span class="f-copy">© 2025 BuildAI · Powered by Cerebras, Gemini & Groq</span> | |
| </div> | |
| <script> | |
| // ── ZERO Firebase dependencies here. All buttons guaranteed to work. ── | |
| function syncBtn() { | |
| var inp = document.getElementById('hero-inp'); | |
| var btn = document.getElementById('hero-btn'); | |
| if (!inp || !btn) return; | |
| var ok = inp.value.trim().length > 0; | |
| if (ok) { | |
| btn.classList.remove('off'); | |
| } else { | |
| btn.classList.add('off'); | |
| } | |
| } | |
| function pick(text) { | |
| var inp = document.getElementById('hero-inp'); | |
| if (!inp) return; | |
| inp.value = text; | |
| inp.focus(); | |
| syncBtn(); | |
| } | |
| function goBuilder() { | |
| window.location.href = '/builder'; | |
| } | |
| function launch() { | |
| var inp = document.getElementById('hero-inp'); | |
| var text = inp ? inp.value.trim() : ''; | |
| if (!text) return; | |
| try { sessionStorage.setItem('bai_prompt', text); } catch(e) {} | |
| window.location.href = '/builder'; | |
| } | |
| // Scroll reveal | |
| (function() { | |
| var targets = document.querySelectorAll('.fc, .step, .tc'); | |
| if (!window.IntersectionObserver) return; | |
| targets.forEach(function(el, i) { | |
| el.style.cssText += 'opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease;transition-delay:' + (i % 3) * 0.1 + 's'; | |
| }); | |
| var io = new IntersectionObserver(function(entries) { | |
| entries.forEach(function(e) { | |
| if (e.isIntersecting) { | |
| e.target.style.opacity = '1'; | |
| e.target.style.transform = 'translateY(0)'; | |
| io.unobserve(e.target); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| targets.forEach(function(el) { io.observe(el); }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |