Update the website. This is content: Build & sell local‑biz sites in an afternoon. AI workflow • Zero bloat • Ghost‑approved. Your best email… Get Preview Pre‑order $59 Neon ghost logo 34 → 99 PageSpeed score 1 Afternoon build 3‑step Ghost workflow ∞ Upside How it prints cash 💸 🔎 Hunt legacy sites Use Google Maps + the included Lead‑Tracker Lite to spot slow, ugly neighbourhood websites. 🤖 One‑click AI rebuild Copy‑paste prompts, autogenerate a shiny Tailwind site, deploy to Netlify in minutes. 💼 Close & cash out Walk in, show 34→99, and hand them a ready site + simple contract. Invoice by Friday. FAQ Do I need to code? How fast can I launch a site? What’s inside the Playbook? Ready to ghost slow sites? Grab the early‑bird price before the next price bump. Pre‑order for $59 → © 2025 GhostSiteZero · Built with ⚡ + 👻 ....... And this is the color schemes: Role Hex Notes Primary background #0E0E14 (near-black midnight) Makes neon pop & feels “dev-tool” legit Surface/alt background #181926 Slightly lighter for cards, keeps depth Primary accent (neon blue) #22E1FF Matches ghost outline; use for buttons, links Secondary accent (neon pink) #FF38B4 Matches glasses; sparingly for highlights/CTA badges Success / pagespeed brag #7CFC9A Soft neon green—good contrast vs dark and screams “99” Text-main #FFFFFF Pure white on dark for crisp legibility Text-muted #A1A1AA Subtle copy, helper text - Initial Deployment
7b68983 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GhostSiteZero | Build & Sell Local Biz Sites Fast</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0E0E14', | |
| surface: '#181926', | |
| neonblue: '#22E1FF', | |
| neonpink: '#FF38B4', | |
| neongreen: '#7CFC9A', | |
| muted: '#A1A1AA', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| mono: ['Fira Code', 'monospace'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet"> | |
| <style> | |
| .glow-text-blue { | |
| text-shadow: 0 0 8px rgba(34, 225, 255, 0.6); | |
| } | |
| .glow-text-pink { | |
| text-shadow: 0 0 8px rgba(255, 56, 180, 0.6); | |
| } | |
| .glow-box-blue { | |
| box-shadow: 0 0 12px rgba(34, 225, 255, 0.4); | |
| } | |
| .glow-box-pink { | |
| box-shadow: 0 0 12px rgba(255, 56, 180, 0.4); | |
| } | |
| .ghost-logo { | |
| filter: drop-shadow(0 0 8px rgba(34, 225, 255, 0.8)); | |
| } | |
| .neon-border { | |
| border-image: linear-gradient(45deg, #22E1FF, #FF38B4) 1; | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: .15em solid #22E1FF; | |
| white-space: nowrap; | |
| animation: | |
| typing 3.5s steps(40, end), | |
| blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #22E1FF; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-primary text-white font-sans min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-surface/80 backdrop-blur-md sticky top-0 z-50 border-b border-surface"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <svg class="ghost-logo w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2C6.48 2 2 6.48 2 12V22H12C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" stroke="#22E1FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| <path d="M8 11C8.55228 11 9 10.5523 9 10C9 9.44772 8.55228 9 8 9C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11Z" fill="#FF38B4"/> | |
| <path d="M16 11C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10C15 10.5523 15.4477 11 16 11Z" fill="#FF38B4"/> | |
| <path d="M12 15C11.2044 15 10.4413 15.3161 9.87868 15.8787C9.31607 16.4413 9 17.2044 9 18H15C15 17.2044 14.6839 16.4413 14.1213 15.8787C13.5587 15.3161 12.7956 15 12 15Z" fill="#22E1FF"/> | |
| </svg> | |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-neonblue to-neonpink">GhostSiteZero</span> | |
| </div> | |
| <button class="bg-neonblue hover:bg-neonblue/90 text-primary font-bold py-2 px-6 rounded-full transition-all duration-300 glow-box-blue"> | |
| Pre-order $59 | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary to-surface opacity-90"></div> | |
| <div class="container mx-auto px-4 py-20 md:py-32 relative z-10"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <div class="inline-block mb-4 px-4 py-1 bg-surface rounded-full border border-surface-light"> | |
| <span class="text-neonblue font-mono text-sm">v2.0 launching soon</span> | |
| </div> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| Build & sell <span class="text-neonblue glow-text-blue">local‑biz</span> sites <br> | |
| <span class="typewriter">in an afternoon.</span> | |
| </h1> | |
| <p class="text-xl text-muted mb-8 max-w-2xl mx-auto"> | |
| AI workflow • Zero bloat • Ghost‑approved | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto"> | |
| <input | |
| type="email" | |
| placeholder="Your best email…" | |
| class="flex-grow px-6 py-3 bg-surface border border-surface-light rounded-full focus:outline-none focus:ring-2 focus:ring-neonblue" | |
| > | |
| <button class="bg-neonpink hover:bg-neonpink/90 text-primary font-bold px-6 py-3 rounded-full transition-all duration-300 glow-box-pink flex items-center justify-center space-x-2"> | |
| <span>Get Preview</span> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-surface py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8 text-center"> | |
| <div class="p-6 rounded-xl bg-primary/30 border border-surface-light"> | |
| <div class="text-4xl font-bold text-neonblue mb-2">34 → 99</div> | |
| <div class="text-muted text-sm">PageSpeed score</div> | |
| </div> | |
| <div class="p-6 rounded-xl bg-primary/30 border border-surface-light"> | |
| <div class="text-4xl font-bold text-neonblue mb-2">1</div> | |
| <div class="text-muted text-sm">Afternoon build</div> | |
| </div> | |
| <div class="p-6 rounded-xl bg-primary/30 border border-surface-light"> | |
| <div class="text-4xl font-bold text-neonblue mb-2">3‑step</div> | |
| <div class="text-muted text-sm">Ghost workflow</div> | |
| </div> | |
| <div class="p-6 rounded-xl bg-primary/30 border border-surface-light"> | |
| <div class="text-4xl font-bold text-neonblue mb-2">∞</div> | |
| <div class="text-muted text-sm">Upside</div> | |
| </div> | |
| <div class="p-6 rounded-xl bg-gradient-to-br from-neonblue to-neonpink text-primary"> | |
| <div class="text-4xl font-bold mb-2">$59</div> | |
| <div class="font-medium">Early-bird price</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-20 bg-primary"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">How it prints cash <span class="text-neonpink glow-text-pink">💸</span></h2> | |
| <p class="text-muted max-w-2xl mx-auto">From zero to ghosted in three simple steps</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Step 1 --> | |
| <div class="bg-surface rounded-xl p-8 border border-surface-light hover:border-neonblue transition-all duration-300 group"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-neonblue text-xl font-bold mb-6 border border-neonblue group-hover:bg-neonblue/10 transition-all duration-300"> | |
| 1 | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <span class="mr-2">🔎 Hunt legacy sites</span> | |
| </h3> | |
| <p class="text-muted mb-4"> | |
| Use Google Maps + the included Lead‑Tracker Lite to spot slow, ugly neighbourhood websites. | |
| </p> | |
| <div class="mt-6 p-4 bg-primary rounded-lg border border-surface-light font-mono text-sm"> | |
| <span class="text-neonblue">$</span> find --local --pagespeed:below 50 | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="bg-surface rounded-xl p-8 border border-surface-light hover:border-neonpink transition-all duration-300 group"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-neonpink text-xl font-bold mb-6 border border-neonpink group-hover:bg-neonpink/10 transition-all duration-300"> | |
| 2 | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <span class="mr-2">🤖 One‑click AI rebuild</span> | |
| </h3> | |
| <p class="text-muted mb-4"> | |
| Copy‑paste prompts, autogenerate a shiny Tailwind site, deploy to Netlify in minutes. | |
| </p> | |
| <div class="mt-6 p-4 bg-primary rounded-lg border border-surface-light font-mono text-sm"> | |
| <span class="text-neonblue">$</span> ghost build --template pizza --deploy | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="bg-surface rounded-xl p-8 border border-surface-light hover:border-neongreen transition-all duration-300 group"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-neongreen text-xl font-bold mb-6 border border-neongreen group-hover:bg-neongreen/10 transition-all duration-300"> | |
| 3 | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <span class="mr-2">💼 Close & cash out</span> | |
| </h3> | |
| <p class="text-muted mb-4"> | |
| Walk in, show 34→99, and hand them a ready site + simple contract. Invoice by Friday. | |
| </p> | |
| <div class="mt-6 p-4 bg-primary rounded-lg border border-surface-light font-mono text-sm"> | |
| <span class="text-neonblue">$</span> invoice send --amount 1999 --due friday | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonial --> | |
| <section class="py-20 bg-surface"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <div class="inline-block p-3 bg-primary rounded-full mb-8"> | |
| <svg class="ghost-logo w-10 h-10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2C6.48 2 2 6.48 2 12V22H12C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" stroke="#22E1FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| <path d="M8 11C8.55228 11 9 10.5523 9 10C9 9.44772 8.55228 9 8 9C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11Z" fill="#FF38B4"/> | |
| <path d="M16 11C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10C15 10.5523 15.4477 11 16 11Z" fill="#FF38B4"/> | |
| <path d="M12 15C11.2044 15 10.4413 15.3161 9.87868 15.8787C9.31607 16.4413 9 17.2044 9 18H15C15 17.2044 14.6839 16.4413 14.1213 15.8787C13.5587 15.3161 12.7956 15 12 15Z" fill="#22E1FF"/> | |
| </svg> | |
| </div> | |
| <blockquote class="text-2xl md:text-3xl font-medium mb-8 leading-relaxed"> | |
| "GhostSiteZero turned my side hustle into a <span class="text-neonblue">$12k/month</span> business. I can now build and sell sites faster than my clients can say 'How much?'" | |
| </blockquote> | |
| <div class="text-muted"> | |
| <p class="font-medium">— Mark D., Freelance Developer</p> | |
| <p class="text-sm">Converted 17 clients in first 30 days</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section class="py-20 bg-primary"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-12 text-center">FAQ</h2> | |
| <div class="space-y-4"> | |
| <!-- FAQ Item 1 --> | |
| <div class="group"> | |
| <button onclick="toggleFAQ(1)" class="w-full flex justify-between items-center p-6 bg-surface rounded-xl border border-surface-light hover:border-neonblue transition-all duration-300"> | |
| <span class="text-left font-medium text-lg">Do I need to code?</span> | |
| <svg class="w-5 h-5 text-neonblue transform group-[.active]:rotate-180 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> | |
| </svg> | |
| </button> | |
| <div id="faq-1" class="hidden px-6 pt-2 pb-6 bg-surface rounded-b-xl border-l border-r border-b border-surface-light"> | |
| <p class="text-muted">Not at all! GhostSiteZero uses AI-powered templates and a simple CLI interface. If you can copy-paste, you can build sites.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="group"> | |
| <button onclick="toggleFAQ(2)" class="w-full flex justify-between items-center p-6 bg-surface rounded-xl border border-surface-light hover:border-neonblue transition-all duration-300"> | |
| <span class="text-left font-medium text-lg">How fast can I launch a site?</span> | |
| <svg class="w-5 h-5 text-neonblue transform group-[.active]:rotate-180 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> | |
| </svg> | |
| </button> | |
| <div id="faq-2" class="hidden px-6 pt-2 pb-6 bg-surface rounded-b-xl border-l border-r border-b border-surface-light"> | |
| <p class="text-muted">Our fastest user went from finding a lead to collecting payment in 3 hours. Typical builds take an afternoon including client meeting.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="group"> | |
| <button onclick="toggleFAQ(3)" class="w-full flex justify-between items-center p-6 bg-surface rounded-xl border border-surface-light hover:border-neonblue transition-all duration-300"> | |
| <span class="text-left font-medium text-lg">What's inside the Playbook?</span> | |
| <svg class="w-5 h-5 text-neonblue transform group-[.active]:rotate-180 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> | |
| </svg> | |
| </button> | |
| <div id="faq-3" class="hidden px-6 pt-2 pb-6 bg-surface rounded-b-xl border-l border-r border-b border-surface-light"> | |
| <p class="text-muted">The Ghost Playbook includes: 12 industry templates, lead finder script, AI prompt library, contract templates, pricing guides, and our famous "34→99" conversion pitch deck.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="py-20 bg-gradient-to-br from-primary to-surface"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to ghost slow sites?</h2> | |
| <p class="text-xl text-muted mb-8 max-w-2xl mx-auto"> | |
| Grab the early‑bird price before the next price bump. | |
| </p> | |
| <button class="bg-gradient-to-r from-neonblue to-neonpink hover:opacity-90 text-primary font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 glow-box-blue glow-box-pink flex items-center justify-center space-x-2 mx-auto"> | |
| <span>Pre-order for $59</span> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-surface py-12 border-t border-surface-light"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <svg class="ghost-logo w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2C6.48 2 2 6.48 2 12V22H12C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" stroke="#22E1FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| <path d="M8 11C8.55228 11 9 10.5523 9 10C9 9.44772 8.55228 9 8 9C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11Z" fill="#FF38B4"/> | |
| <path d="M16 11C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9C15.4477 9 15 9.44772 15 10C15 10.5523 15.4477 11 16 11Z" fill="#FF38B4"/> | |
| <path d="M12 15C11.2044 15 10.4413 15.3161 9.87868 15.8787C9.31607 16.4413 9 17.2044 9 18H15C15 17.2044 14.6839 16.4413 14.1213 15.8787C13.5587 15.3161 12.7956 15 12 15Z" fill="#22E1FF"/> | |
| </svg> | |
| <span class="text-lg font-bold bg-clip-text text-transparent bg-gradient-to-r from-neonblue to-neonpink">GhostSiteZero</span> | |
| </div> | |
| <div class="text-muted text-sm"> | |
| © 2025 GhostSiteZero · Built with <span class="text-neonblue">⚡</span> + <span class="text-neonpink">👻</span> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // FAQ toggle functionality | |
| function toggleFAQ(index) { | |
| const faq = document.getElementById(`faq-${index}`); | |
| faq.classList.toggle('hidden'); | |
| // Close other FAQs | |
| document.querySelectorAll('[id^="faq-"]').forEach(item => { | |
| if (item.id !== `faq-${index}`) { | |
| item.classList.add('hidden'); | |
| } | |
| }); | |
| } | |
| // Typewriter effect restart | |
| setInterval(() => { | |
| const typewriter = document.querySelector('.typewriter'); | |
| typewriter.classList.remove('typewriter'); | |
| void typewriter.offsetWidth; // Trigger reflow | |
| typewriter.classList.add('typewriter'); | |
| }, 8000); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=TeemuSor/ghostsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |