1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <!-- Favicon --> 5 <link rel="icon" type="image/png" href="/favicon.png?v=1790948744"> 6 <link rel="apple-touch-icon" href="/favicon.png?v=1790948744"> 7 <!-- Acquisition copy assignment: runs pre-paint, byte-identical on every 8 host. No cookie -> weighted pick + 1-year vo_acq cookie; cookie -> its 9 copy; a valid ?copy= override wins. A cookie whose copy id is no longer 10 in VARIANTS re-rolls as a brand-new visitor (fresh UUID) so retired 11 copy rows never absorb new-test traffic. The beacon fires on every 12 eligible load (single redundancy) â the server keeps only the first 13 touch. The static HTML below stays the crawler/no-JS copy. 14 VARIANTS ids/weights must match pricing.html exactly. --> 15
15<script> 16 (function () { 17 var VARIANTS = { free3_base: 1, free3_paywall: 1 }; // copy id -> assignment weight 18 var HERO = { heroTitle: 'Easy Professional Websites', heroSubtitle: 'Tell the Otter what you want and build a website in 24 minutes' }; 19 var TEXT = { free3_base: HERO, free3_paywall: HERO }; // copy id -> { heroTitle, heroSubtitle } overrides; both Free-3 arms share the base hero (the paywall arm differs on pricing.html only) 20 if (location.pathname.indexOf('/es-mx/') === 0) return; // Spanish pages always show baseline 21 if (!window.crypto || !crypto.randomUUID) return; // ancient browser: baseline, unrecorded 22 var m = document.cookie.match(/(?:^|; )vo_acq=([0-9a-f-]{36})\.([A-Za-z0-9_-]{1,40})/); 23 var visitorId = m && VARIANTS[m[2]] != null ? m[1] : crypto.randomUUID(); 24 var copyId = m && VARIANTS[m[2]] != null ? m[2] : null; 25 var qs = /[?&]copy=([A-Za-z0-9_-]{1,40})/.exec(location.search); 26 if (qs && VARIANTS[qs[1]] != null) copyId = qs[1]; 27 if (!copyId) { 28 var total = 0, k; 29 for (k in VARIANTS) total += VARIANTS[k]; 30 var buf = new Uint32Array(1); 31 crypto.getRandomValues(buf); 32 var roll = (buf[0] / 4294967296) * total; 33 for (k in VARIANTS) { roll -= VARIANTS[k]; if (roll < 0) { copyId = k; break; } } 34 if (!copyId) copyId = 'free3_base'; 35 } 36 document.cookie = 'vo_acq=' + visitorId + '.' + copyId + '; Max-Age=31536000; Path=/; Secure; SameSite=Lax'; 37 window.__voAcq = { visitorId: visitorId, copyId: copyId, text: TEXT[copyId] || {} }; 38 // Inlined hostname -> API map (mirror of js/config.js, which loads too late for pre-paint work) 39 var h = location.hostname, api; 40 if (h === 'vibeotter.com' || h === 'www.vibeotter.com') api = 'https://api.vibeotter.com'; 41 else if (h === 'vibeotter.dev' || h === 'www.vibeotter.dev') api = 'https://api.vibeotter.dev'; 42 else if (h.indexOf('firebaseapp.com') !== -1 || h.indexOf('web.app') !== -1) api = h.indexOf('vibeotter-staging') !== -1 ? 'https://api.vibeotter.dev' : 'https://api.vibeotter.com'; 43 else if (h === 'localhost' || h === '127.0.0.1') api = 'http://localhost:3000'; 44 else if (/^\d+\.\d+\.\d+\.\d+$/.test(h)) api = 'http://' + h + ':3000'; 45 else api = 'https://api.vibeotter.com'; 46 var url = api + '/api/acquisition/visit'; 47 var payload = JSON.stringify({ v: visitorId, c: copyId, p: location.pathname }); 48 var sent = false; 49 if (navigator.sendBeacon) { try { sent = navigator.sendBeacon(url, payload); } catch (e) {} } 50 if (!sent) { try { fetch(url, { method: 'POST', body: payload, keepalive: true, headers: { 'Content-Type': 'text/plain' } }); } catch (e) {} } 51 })(); 52 </script>
52 53 <!-- Delayed analytics for better LCP --> 54
54<script> 55 window.dataLayer = window.dataLayer || []; 56 window.gtag = window.gtag || function(){dataLayer.push(arguments);}; 57 window.oaiq = window.oaiq || function () { 58 (window.oaiq.q = window.oaiq.q || []).push(arguments); 59 }; 60 oaiq("init", { pixelId: "4qF82rZnJLBSZ9XnXMA3b3" }); 61 function loadMarketingAnalytics() { 62 if (window.__vibeotterMarketingLoaded) return; 63 window.__vibeotterMarketingLoaded = true; 64 65 var gtagScript = document.createElement('script'); 66 gtagScript.async = true; 67 gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-STJCL8CQ43'; 68 document.head.appendChild(gtagScript); 69 70 gtag('js', new Date()); 71 gtag('config', 'G-STJCL8CQ43');
vendor: 472 bytes, lines 71-81
71 72 73 !function(f,b,e,v,n,t,s) 74 {if(f.fbq)return;n=f.fbq=function(){n.callMethod? 75 n.callMethod.apply(n,arguments):n.queue.push(arguments)}; 76 if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; 77 n.queue=[];t=b.createElement(e);t.async=!0; 78 t.src=v;s=b.getElementsByTagName(e)[0]; 79 s.parentNode.insertBefore(t,s)}(window, document,'script', 80 'https://connect.facebook.net/en_US/fbevents.js'); 81 fbq('init', '
81773856955066155
vendor: 47 bytes, lines 81-84
81'); 82 fbq('track', 'PageView'); 83 84
84var oaiqScript = document.createElement('script'); 85 oaiqScript.async = true; 86 oaiqScript.src = 'https://bzrcdn.openai.com/sdk/oaiq.min.js'; 87 document.head.appendChild(oaiqScript); 88 } 89 function scheduleMarketingAnalytics() { 90 setTimeout(function() { 91 if ('requestIdleCallback' in window) { 92 requestIdleCallback(loadMarketingAnalytics, { timeout: 3000 }); 93 } else { 94 loadMarketingAnalytics(); 95 } 96 }, 6000); 97 } 98 if (document.readyState === 'complete') { 99 scheduleMarketingAnalytics(); 100 } else { 101 window.addEventListener('load', scheduleMarketingAnalytics, { once: true }); 102 } 103 </script>
103 104 <!-- End Meta Pixel JavaScript --> 105 <!-- Capture affiliate referral code from ?ref= parameter --> 106
106<script> 107 (function(){var p=new URLSearchParams(window.location.search);var r=p.get('ref');if(r)localStorage.setItem('vibeotter_ref',r.toUpperCase());})(); 108 </script>
108 109
109<script type="text/javascript"> 110 (function(c,l,a,r,i,t,y){ 111 c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; 112 t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; 113 y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); 114 })(window, document, "clarity", "script", "tq769k1tdw"); 115</script>
115 116 <meta charset="UTF-8"> 117 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 118 <title>Vibe Otter - Websites Made Simple</title> 119 120 <!-- Open Graph / Facebook --> 121 <meta property="og:type" content="website"> 122 <meta property="og:url" content="https://vibeotter.com/"> 123 <meta property="og:title" content="Vibe Otter - Websites Made Simple"> 124 <meta property="og:description" content="If You Can Text, You Can Build A Website. Tell the Otter what you want: pages, booking, customer logins, and hosting, live in about 30 minutes."> 125 <meta property="og:image" content="https://vibeotter.com/images/homepage-og.png"> 126 <meta property="og:image:width" content="1200"> 127 <meta property="og:image:height" content="630"> 128 129 <!-- Twitter --> 130 <meta property="twitter:card" content="summary_large_image"> 131 <meta property="twitter:url" content="https://vibeotter.com/"> 132 <meta property="twitter:title" content="Vibe Otter - Websites Made Simple"> 133 <meta property="twitter:description" content="If You Can Text, You Can Build A Website. Tell the Otter what you want: pages, booking, customer logins, and hosting, live in about 30 minutes."> 134 <meta property="twitter:image" content="https://vibeotter.com/images/homepage-og.png"> 135 136 <!-- Standard meta description --> 137 <meta name="description" content="If You Can Text, You Can Build A Website. Tell the Otter what you want: pages, booking, customer logins, and hosting, live in about 30 minutes."> 138 <meta name="robots" content="index, follow"> 139 <link rel="canonical" href="https://vibeotter.com/"> 140 <!-- DNS prefetch for faster resolution --> 141 <link rel="dns-prefetch" href="https://vibeotter-5690a.firebaseapp.com"> 142 <link rel="dns-prefetch" href="https://www.googleapis.com"> 143 <link rel="dns-prefetch" href="https://www.gstatic.com"> 144 <link rel="dns-prefetch" href="https://www.googletagmanager.com"> 145 <link rel="dns-prefetch" href="https://connect.facebook.net"> 146 147 <!-- Preconnect to speed up external resources --> 148 <link rel="preconnect" href="https://vibeotter-5690a.firebaseapp.com" crossorigin> 149 <link rel="preconnect" href="https://www.googleapis.com" crossorigin> 150 <link rel="preconnect" href="https://www.gstatic.com" crossorigin> 151 <link rel="preconnect" href="https://apis.google.com" crossorigin> 152 153 154
154<script> 155 (function(){ 156 var heicConverterPromise = null; 157 function isHeicFile(file) { 158 if (!file) return false; 159 var name = (file.name || '').toLowerCase(); 160 return file.type === 'image/heic' || file.type === 'image/heif' || name.endsWith('.heic') || name.endsWith('.heif'); 161 } 162 function loadHeicConverter() { 163 if (window.heic2any) return Promise.resolve(); 164 if (!heicConverterPromise) { 165 heicConverterPromise = new Promise(function(resolve, reject) { 166 var script = document.createElement('script'); 167 script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/heic2any.min.js'; 168 script.async = true; 169 script.onload = resolve; 170 script.onerror = reject; 171 document.head.appendChild(script); 172 }); 173 } 174 return heicConverterPromise; 175 } 176 document.addEventListener('change', function(event) { 177 var input = event.target; 178 if (!input || input.type !== 'file' || input.__heicReplayInProgress || window.heic2any) return; 179 var files = Array.prototype.slice.call(input.files || []); 180 if (!files.some(isHeicFile)) return; 181 182 event.preventDefault(); 183 event.stopImmediatePropagation(); 184 loadHeicConverter().then(function() { 185 input.__heicReplayInProgress = true; 186 input.dispatchEvent(new Event('change', { bubbles: true })); 187 input.__heicReplayInProgress = false; 188 }).catch(function() { 189 input.__heicReplayInProgress = true; 190 input.dispatchEvent(new Event('change', { bubbles: true })); 191 input.__heicReplayInProgress = false; 192 }); 193 }, true); 194 })(); 195 </script>
195 196 <link rel="preconnect" href="https://fonts.googleapis.com"> 197 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 198 <link rel="preload" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"> 199 <noscript><link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap" rel="stylesheet"></noscript> 200 <link rel="stylesheet" href="css/styles.css?v=1790948744"> 201 <link rel="stylesheet" href="css/otter-input-bar.css?v=1790948744"> 202 <link rel="stylesheet" href="css/prompts-info.css?v=prompts-refine-20260710"> 203
203<script src="js/prompts-info.js?v=prompts-refine2-20260710" defer></script>
203 204 <style> 205 #vo-support-lite-btn { 206 position: fixed; 207 bottom: 24px; 208 right: 24px; 209 width: 56px; 210 height: 56px; 211 border-radius: 50%; 212 background: #2D7D7D; 213 border: 0; 214 cursor: pointer; 215 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); 216 z-index: 99999; 217 display: flex; 218 align-items: center; 219 justify-content: center; 220 transition: transform 0.2s ease, box-shadow 0.2s ease; 221 padding: 0; 222 } 223 224 #vo-support-lite-btn:hover { 225 transform: scale(1.08); 226 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); 227 } 228 229 #vo-support-lite-btn svg { 230 width: 26px; 231 height: 26px; 232 fill: #fff; 233 } 234 235 #vo-support-lite-btn.vo-support-lite-hidden { 236 display: none !important; 237 } 238 239 @media (max-width: 768px) { 240 #vo-support-lite-btn { 241 bottom: 16px; 242 right: 16px; 243 } 244 } 245 </style> 246 247 <!-- Organization Schema --> 248
248<script type="application/ld+json"> 249 { 250 "@context": "https://schema.org", 251 "@type": "Organization", 252 "name": "Vibe Otter", 253 "url": "https://vibeotter.com", 254 "logo": "https://vibeotter.com/images/logo-og.png", 255 "description": "Vibe Otter builds complete websites from a plain-English description â design, booking, customer accounts, database, file storage, hosting, security, and search visibility included. The best prompt-based builder with direct click-to-edit control, for small businesses, non-profits, and professional services.", 256 "contactPoint": { 257 "@type": "ContactPoint", 258 "telephone": "206-608-7108", 259 "contactType": "Customer Service", 260 "availableLanguage": "English" 261 }, 262 "sameAs": [ 263 "https://twitter.com/vibeotter", 264 "https://github.com/vibeotter", 265 "https://linkedin.com/company/vibeotter" 266 ], 267 "address": { 268 "@type": "PostalAddress", 269 "addressCountry": "US" 270 }, 271 "foundingDate": "2025", 272 "slogan": "If You Can Text, You Can Build A Website" 273 } 274 </script>
274 275 276 <!-- WebSite SearchBox Schema --> 277
277<script type="application/ld+json"> 278 { 279 "@context": "https://schema.org", 280 "@type": "WebSite", 281 "name": "Vibe Otter", 282 "url": "https://vibeotter.com", 283 "potentialAction": { 284 "@type": "SearchAction", 285 "target": { 286 "@type": "EntryPoint", 287 "urlTemplate": "https://vibeotter.com/blog.html?search={search_term_string}" 288 }, 289 "query-input": "required name=search_term_string" 290 } 291 } 292 </script>
292 293 294 <!-- FAQPage Schema (matches the visible FAQ below) --> 295
295<script type="application/ld+json"> 296 { 297 "@context": "https://schema.org", 298 "@type": "FAQPage", 299 "mainEntity": [ 300 { 301 "@type": "Question", 302 "name": "How do I start?", 303 "acceptedAnswer": { "@type": "Answer", "text": "Don't be intimidated - Vibe Otter is designed to do all the hard creative work for you. Just say exactly what you want like you were wishing to a genie: \"I want a consulting website\" or \"I want a booking site for my salon\" â or drop in a link to a site you'd like to use as a template and the otter will do the rest." } 304 }, 305 { 306 "@type": "Question", 307 "name": "What happens if something goes wrong?", 308 "acceptedAnswer": { "@type": "Answer", "text": "You're covered by our Build Your Site Guarantee: start a site and you'll finish it. Real web designers and real engineers â not bots â are on live chat on every plan, including free, to get you unstuck on anything: design feedback, prompt help, domains, payments, connections. Every change has an undo button. And if you'd rather write in, tech support is humans only â a real person reads your message and writes back." } 309 }, 310 { 311 "@type": "Question", 312 "name": "Who owns the rights to the site?", 313 "acceptedAnswer": { "@type": "Answer", "text": "You keep everything you upload. Paid Accounts also receive ownership and export rights for content and code created through Vibe Otter." } 314 }, 315 { 316 "@type": "Question", 317 "name": "Is it really free?", 318 "acceptedAnswer": { "@type": "Answer", "text": "Yes - Vibe Otter is truly free for simple pages. You get 3 free Prompts per month and a yoursite.vibeotter.com address. We give away genuinely valuable free sites on purpose: if launching your business for free helps you grow, we're confident you'll reward us with your business when you can afford to. It's part of our commitment to helping small business owners. When the site starts getting real business activity, Starter gives you more room to grow and adds a custom domain." } 319 }, 320 { 321 "@type": "Question", 322 "name": "What can I build with Vibe Otter?", 323 "acceptedAnswer": { "@type": "Answer", "text": "Everything from a polished landing page to a complete site with customer accounts. Small-business websites, booking pages, non-profit sites, member areas, client portals, dashboards, and full products with private data and file uploads. If you sell through Shopify, Vibe Otter can build your storefront with a working cart and checkout." } 324 }, 325 { 326 "@type": "Question", 327 "name": "Does Vibe Otter only make simple websites?", 328 "acceptedAnswer": { "@type": "Answer", "text": "No â that's old news. Vibe Otter builds complete products: your pages plus the database, customer logins, file storage, and behind-the-scenes functions that power them, with hosting included. The full behind-the-scenes toolkit is part of the Pro plan." } 329 }, 330 { 331 "@type": "Question", 332 "name": "Do I need to know how to code?", 333 "acceptedAnswer": { "@type": "Answer", "text": "No. Describe what you want in plain English, then refine it by prompting or by clicking anything on the page and changing it directly. Vibe Otter handles everything technical behind the scenes." } 334 }, 335 { 336 "@type": "Question", 337 "name": "Can I edit the site myself, without prompts?", 338 "acceptedAnswer": { "@type": "Answer", "text": "Yes. Click any part of your site and change the text, swap photos, pick fonts and colors, move things around, or delete them â instantly, without spending a Prompt. Prompt for the big changes, click for the small ones. Vibe Otter is the rare builder that gives you both." } 339 }, 340 { 341 "@type": "Question", 342 "name": "Does Vibe Otter handle the technical parts â database, logins, hosting?", 343 "acceptedAnswer": { "@type": "Answer", "text": "Yes, all of it. A database for your records, customer accounts with email verification, file storage, behind-the-scenes functions, scheduled tasks, and hosting on your own web address â set up as part of the build, not sold as extras." } 344 }, 345 { 346 "@type": "Question", 347 "name": "How does Vibe Otter handle security?",
348 "acceptedAnswer": { "@type": "Answer", "text": "Security is our responsibility, not yours. Passwords and keys are kept out of your page code, records marked sensitive are locked down automatically, sites holding sensitive data require extra sign-in verification, and Vibe Otter refuses to build setups that would be unsafe." } 349 }, 350 { 351 "@type": "Question", 352 "name": "Is Vibe Otter an established/trusted platform?", 353 "acceptedAnswer": { "@type": "Answer", "text": "Yes. Vibe Otter is an established platform that hosts more than 3,000 websites. It is the only website platform created by a practicing web design agency. Vibe Otter began as an internal tool our agency used to make client websites easier to build, better-performing, and simpler to maintain. The platform became so effective that clients realized they could use it to build and manage their own websites at a fraction of traditional agency costs. We then released Vibe Otter to the public. Because Vibe Otter was created by working web designers, its SEO, security, design, hosting, and maintenance are optimized around the real needs of small businesses. Ongoing hosting and maintenance are included in the Vibe Otter subscription. Vibe Otter receives less media attention than many competitors because it has never needed venture capital or large advertising campaigns to grow. Strong customer referrals and word of mouth have allowed the platform to grow independentlyâwhich is good news for our customers." } 354 }, 355 { 356 "@type": "Question", 357 "name": "Will my site show up on Google and in chatbot answers?", 358 "acceptedAnswer": { "@type": "Answer", "text": "Yes. Every site is published with robots.txt, sitemap.xml, llms.txt, canonical links, and structured data â the files search engines and answer engines read. No setup on your end." } 359 }, 360 { 361 "@type": "Question", 362 "name": "How is Vibe Otter different from Wix, Squarespace, or WordPress?", 363 "acceptedAnswer": { "@type": "Answer", "text": "Effort and risk. Wix, Squarespace, and WordPress take 12â72 hours of work, and many people never finish â Wix's own data shows 33% of customers fail to publish a professional website. Vibe Otter takes about 24 minutes of effort, launches in hours, and comes with guaranteed web designer and engineering support so you never get stuck." } 364 }, 365 { 366 "@type": "Question", 367 "name": "How do I connect a custom domain I purchased elsewhere (GoDaddy, Namecheap, etc.)?", 368 "acceptedAnswer": { "@type": "Answer", "text": "You can connect any site built on Vibe Otter to a custom domain you've purchased from any registrar like GoDaddy, Namecheap, Google Domains, or others. Vibe Otter has a simple, step-by-step walkthrough built right into your dashboard that guides you through the process of pointing your domain to your Vibe Otter site. No technical knowledge required - just follow the prompts and you'll be live on your custom domain in minutes." } 369 } 370 ] 371 } 372 </script>
372 373
373<script src="/js/i18n.js?v=1790948744-prelaunch"></script>
373 374
374<script src="/js/i18n-catalog.en.js?v=1790948744-prelaunch"></script>
374 375
375<script src="/js/i18n-catalog.es-MX.js?v=1790948744-prelaunch"></script>
375 376</head> 377<body> 378 <!-- Meta Pixel no-JavaScript fallback --> 379 <noscript><img height="1" width="1" style="display:none" 380 src="https://www.facebook.com/tr?id=773856955066155&ev=PageView&noscript=1" 381 loading="lazy" alt="" /></noscript> 382 <!-- Static gradient background --> 383 <div class="gradient-bg"></div> 384 385 <nav class="navbar"> 386 <div class="nav-container"> 387 <a href="/" class="nav-logo"> 388 <picture> 389 <source srcset="images/logo-small.webp" type="image/webp"> 390 <img src="images/logo-small.png" alt="Vibe Otter website builder logo - Create professional websites without coding" class="logo-img" width="52" height="52" decoding="async"> 391 </picture> 392 <span class="logo-text">Vibe Otter</span> 393 </a> 394 395 <!-- Desktop Navigation --> 396 <div class="nav-links desktop-only"> 397 <a href="https://community.vibeotter.com">Community</a> 398 <a href="/webdesign">Web Design</a> 399 <a href="https://marketing.vibeotter.com">Marketing</a> 400 <a href="/pricing.html">Pricing</a> 401 <a href="/blog">Blog</a> 402 <a href="#support" onclick="event.preventDefault(); document.getElementById('supportModal').classList.add('show'); document.body.style.overflow='hidden';">Support</a> 403 </div> 404 <div class="nav-actions desktop-only"> 405 <button class="btn-secondary" data-analytics-event="login">Login</button> 406 </div> 407 408 <!-- Mobile Menu Button --> 409 <button class="mobile-menu-toggle" aria-label="Toggle mobile menu"> 410 <span class="hamburger-line"></span> 411 <span class="hamburger-line"></span> 412 <span class="hamburger-line"></span> 413 </button> 414 </div> 415 416 <!-- Mobile Menu --> 417 <div class="mobile-menu"> 418 <div class="mobile-menu-content"> 419 <a href="https://community.vibeotter.com" class="mobile-menu-item">Community</a> 420 <a href="/webdesign" class="mobile-menu-item">Web Design</a> 421 <a href="https://marketing.vibeotter.com" class="mobile-menu-item">Marketing</a> 422 <a href="/pricing.html" class="mobile-menu-item">Pricing</a> 423 <a href="/blog" class="mobile-menu-item">Blog</a> 424 <a href="#support" class="mobile-menu-item" onclick="event.preventDefault(); document.getElementById('supportModal').classList.add('show'); document.body.style.overflow='hidden';">Support</a> 425 <button class="btn-secondary mobile-login" data-analytics-event="login">Login</button> 426 </div> 427 </div> 428 </nav> 429 430 <main class="hero-section" id="hero"> 431 <div class="hero-container"> 432 <h1 class="hero-title">Easy Professional Websites</h1> 433 <p class="hero-subtitle" style="margin-bottom: 2.5rem;"><span class="hero-subtitle-text">Tell the Otter what you want and build a website in 24 minutes</span><sup><button type="button" class="compare-src" data-pop="pop-vo-effort">1</button></sup></p> 434 <!-- Acquisition copy swap: synchronous right after the hero so the 435 assigned variant paints instead of the baseline. Baseline (or 436 any missing key) leaves the static text above untouched. --> 437
437<script> 438 (function () { 439 var t = window.__voAcq && window.__voAcq.text; 440 if (!t) return; 441 var el; 442 if (t.heroTitle) { el = document.querySelector('.hero-title'); if (el) el.textContent = t.heroTitle; } 443 if (t.heroSubtitle) { el = document.querySelector('.hero-subtitle-text'); if (el) el.textContent = t.heroSubtitle; } 444 })(); 445 </script>
445 446 447 <div class="chat-input-container" style="margin-top: 0; margin-bottom: 0.75rem;"> 448 <div id="homepage-input-bar"> 449 <div class="otter-input-bar-wrapper"> 450 <!-- Otter Assistant --> 451 <div class="otter-assistant" id="otterAssistant"> 452 <img src="/images/otter-waving.svg" alt="Friendly website builder assistant otter" id="otterImage"> 453 <div class="otter-bubble" id="otterBubble"> 454 <p class="otter-bubble-text" id="otterMessage">Tell me what you want built!</p> 455 </div> 456 <div class="otter-trial-bubble">7-Day Free Trial!</div> 457 </div> 458 <div class="otter-chat-form-wrapper"> 459 <!-- File Preview Container --> 460 <div class="otter-file-preview-container" id="otterFilePreviewContainer" style="display: none;"> 461 <div class="otter-file-preview-content"> 462 <span class="otter-file-icon" id="otterFileIcon">ð</span> 463 <span class="otter-file-name" id="otterFileName">File attached</span> 464 <button type="button" class="otter-remove-file-btn">Ã</button> 465 </div> 466 </div> 467 <form id="otterChatForm" class="otter-chat-form"> 468 <!-- File input is now the attach button itself (not hidden + triggered) to bypass Safari privacy restrictions --> 469 <input 470 type="text" 471 id="otterChatInput" 472 class="otter-chat-input" 473 placeholder="Share a link to a site you want to build something similar to" 474 autocomplete="off" 475 readonly 476 > 477 <label class="otter-attach-btn" aria-label="Attach file" tabindex="0"> 478 <input type="file" id="otterFileInput" accept="image/*,.heic,.heif,.pdf,.doc,.docx,.txt,.xlsx,text/plain,video/*,video/mp4,video/webm,video/quicktime,video/x-msvideo,video/x-matroska,video/x-m4v,video/3gpp,video/3gpp2,video/ogg,video/mpeg,.mp4,.webm,.mov,.avi,.mkv,.m4v,.3gp,.3g2,.ogv,.mpeg,.mpg,.wmv,.flv,.ts,.mts,audio/*,audio/mpeg,audio/mp3,audio/wav,audio/ogg,audio/aac,audio/flac,.mp3,.wav,.ogg,.m4a,.aac,.flac,.wma" multiple class="sr-only" style="position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;"> 479 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 480 <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path> 481 </svg> 482 </label> 483 <button type="submit" class="otter-chat-submit" aria-label="Send"> 484 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 485 <line x1="22" y1="2" x2="11" y2="13"></line> 486 <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> 487 </svg> 488 </button> 489 </form> 490 </div> 491 </div> 492 </div> 493 </div> 494 495 <div class="mode-selector"> 496 <button class="mode-btn" data-mode="website" data-i18n="marketing.home.mode.website">Website</button> 497 <button class="mode-btn" data-mode="app" data-i18n="marketing.home.mode.app">Mobile</button> 498 <button class="mode-btn" data-mode="presentation" data-i18n="marketing.home.mode.presentation">Presentation</button> 499 <button class="mode-btn" data-mode="flyer" data-i18n="marketing.home.mode.flyer">Flyer</button> 500 <button class="mode-btn mode-more-btn" id="modeMoreBtn" data-i18n="marketing.home.mode.more_collapsed">More â¾</button> 501 </div> 502 <div class="mode-more-options" id="modeMoreOptions"> 503 <button class="mode-btn" data-mode="proposal" data-i18n="marketing.home.mode.proposal">Proposal</button> 504 <button class="mode-btn" data-mode="ebook" data-i18n="marketing.home.mode.ebook">Ebook</button> 505 </div> 506 <p class="mode-pitch-text" id="modePitchText"></p> 507 508 </div> 509 </main> 510 511 <div class="section-divider"></div> 512 513 <section class="community-section" id="discover"> 514 <div class="community-container"> 515 <h2>Brands Launched With Vibe Otter</h2> 516 517 <div class="showcase-filters"> 518 <button class="showcase-filter-btn" data-filter="small-business">Small Business</button> 519 <button class="showcase-filter-btn" data-filter="nonprofit">Non-Profit</button> 520 <button class="showcase-filter-btn" data-filter="personal">Personal</button> 521 </div> 522 523 <div class="examples-grid"> 524 <!-- Card 1 - Donley's Construction LLC --> 525 <div class="example-card"> 526 <a href="https://donleyconstruction.org" target="_blank" rel="noopener" class="preview-link"> 527 <div class="example-iframe-container"> 528 <div class="site-preview"> 529 <img src="/images/previews/default/1-donleyconstruction.webp" alt="Donley's Construction LLC website" class="preview-image" loading="eager" fetchpriority="high" decoding="async"> 530 <div class="preview-overlay">
531 <span>Visit Site â</span> 532 </div> 533 </div> 534 </div> 535 </a> 536 <div class="example-info"> 537 <h3 class="example-site-title">Donley's Construction LLC</h3> 538 <a href="https://donleyconstruction.org" target="_blank" rel="noopener">View Site â</a> 539 <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://donleyconstruction.org">Use as template â</a> 540 </div> 541 </div> 542 543 <!-- Card 2 - 50 States of Weird --> 544 <div class="example-card"> 545 <a href="https://50statesofweird.com" target="_blank" rel="noopener" class="preview-link"> 546 <div class="example-iframe-container"> 547 <div class="site-preview"> 548 <img src="/images/previews/default/7-50statesofweird.webp" alt="50 States of Weird website" class="preview-image" loading="lazy" decoding="async"> 549 <div class="preview-overlay"> 550 <span>Visit Site â</span> 551 </div> 552 </div> 553 </div> 554 </a> 555 <div class="example-info"> 556 <h3 class="example-site-title">50 States of Weird</h3> 557 <a href="https://50statesofweird.com" target="_blank" rel="noopener">View Site â</a> 558 <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://50statesofweird.com">Use as template â</a> 559 </div> 560 </div> 561 562 <!-- Card 3 - Maybelle Francisco Law --> 563 <div class="example-card"> 564 <a href="https://maybellefranciscolaw.com" target="_blank" rel="noopener" class="preview-link"> 565 <div class="example-iframe-container"> 566 <div class="site-preview"> 567 <img src="/images/previews/default/3-maybellefranciscolaw.webp" alt="Maybelle Francisco Law website" class="preview-image" loading="lazy" decoding="async"> 568 <div class="preview-overlay"> 569 <span>Visit Site â</span> 570 </div> 571 </div> 572 </div> 573 </a> 574 <div class="example-info"> 575 <h3 class="example-site-title">Maybelle Francisco Law</h3> 576 <a href="https://maybellefranciscolaw.com" target="_blank" rel="noopener">View Site â</a> 577 <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://maybellefranciscolaw.com">Use as template â</a> 578 </div> 579 </div> 580 581 <!-- Card 4 - Derrick Dion --> 582 <div class="example-card"> 583 <a href="https://derrickdion.com" target="_blank" rel="noopener" class="preview-link"> 584 <div class="example-iframe-container"> 585 <div class="site-preview"> 586 <img src="/images/previews/default/1-derrickdion.webp" alt="Derrick Dion website" class="preview-image" loading="lazy" decoding="async"> 587 <div class="preview-overlay"> 588 <span>Visit Site â</span> 589 </div> 590 </div> 591 </div> 592 </a> 593 <div class="example-info"> 594 <h3 class="example-site-title">Derrick Dion</h3> 595 <a href="https://derrickdion.com" target="_blank" rel="noopener">View Site â</a> 596 <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://derrickdion.com">Use as template â</a> 597 </div> 598 </div> 599 600 <!-- Card 5 - The Boujee Healer --> 601 <div class="example-card"> 602 <a href="https://theboujeehealer.com" target="_blank" rel="noopener" class="preview-link"> 603 <div class="example-iframe-container"> 604 <div class="site-preview"> 605 <img src="/images/previews/default/5-theboujeehealer.webp" alt="The Boujee Healer website" class="preview-image" loading="lazy" decoding="async"> 606 <div class="preview-overlay">
607 <span>Visit Site â</span> 608 </div> 609 </div> 610 </div> 611 </a> 612 <div class="example-info"> 613 <h3 class="example-site-title">The Boujee Healer</h3> 614 <a href="https://theboujeehealer.com" target="_blank" rel="noopener">View Site â</a> 615 <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://theboujeehealer.com">Use as template â</a> 616 </div> 617 </div> 618 619 <!-- Card 6 - FlagFitApparel --> 620 <div class="example-card"> 621 <a href="https://flagfitapparel.com" target="_blank" rel="noopener" class="preview-link"> 622 <div class="example-iframe-container"> 623 <div class="site-preview"> 624 <img src="/images/previews/default/6-flagfitapparel-face.webp" alt="FlagFitApparel website" class="preview-image" loading="lazy" decoding="async"> 625 <div class="preview-overlay"> 626 <span>Visit Site â</span> 627 </div> 628 </div> 629 </div> 630 </a> 631 <div class="example-info"> 632 <h3 class="example-site-title">FlagFitApparel</h3> 633 <a href="https://flagfitapparel.com" target="_blank" rel="noopener">View Site â</a> 634 <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://flagfitapparel.com">Use as template â</a> 635 </div> 636 </div> 637 638 <!-- Card 7 - Mama Bear & Cub Co. --> 639 <div class="example-card"> 640 <a href="https://mamabearandcubco.com" target="_blank" rel="noopener" class="preview-link"> 641 <div class="example-iframe-container"> 642 <div class="site-preview"> 643 <img src="/images/previews/default/8-mamabearandcubco.webp" alt="Mama Bear & Cub Co. website" class="preview-image" loading="lazy" decoding="async"> 644 <div class="preview-overlay"> 645 <span>Visit Site â</span> 646 </div> 647 </div> 648 </div> 649 </a> 650 <div class="example-info"> 651 <h3 class="example-site-title">Mama Bear & Cub Co.</h3> 652 <a href="https://mamabearandcubco.com" target="_blank" rel="noopener">View Site â</a> 653 <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://mamabearandcubco.com">Use as template â</a> 654 </div> 655 </div> 656 657 <!-- Card 8 - Renew Chiropractics --> 658 <div class="example-card"> 659 <a href="https://renewchiropractics.com" target="_blank" rel="noopener" class="preview-link"> 660 <div class="example-iframe-container"> 661 <div class="site-preview"> 662 <img src="/images/previews/default/9-renewchiropractics.webp" alt="Renew Chiropractics website" class="preview-image" loading="lazy" decoding="async"> 663 <div class="preview-overlay"> 664 <span>Visit Site â</span> 665 </div> 666 </div> 667 </div> 668 </a> 669 <div class="example-info"> 670 <h3 class="example-site-title">Renew Chiropractics</h3> 671 <a href="https://renewchiropractics.com" target="_blank" rel="noopener">View Site â</a> 672 <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://renewchiropractics.com">Use as template â</a> 673 </div> 674 </div> 675 676 <!-- Card 9 - Nastassia Domenique --> 677 <div class="example-card"> 678 <a href="https://nastassiadomenique.com" target="_blank" rel="noopener" class="preview-link"> 679 <div class="example-iframe-container"> 680 <div class="site-preview"> 681 <img src="/images/previews/default/8-nastassiadomenique.webp" alt="Nastassia Domenique website" class="preview-image" loading="lazy" decoding="async"> 682 <div class="preview-overlay">
683 <span>Visit Site â</span> 684 </div> 685 </div> 686 </div> 687 </a> 688 <div class="example-info"> 689 <h3 class="example-site-title">Nastassia Domenique</h3> 690 <a href="https://nastassiadomenique.com" target="_blank" rel="noopener">View Site â</a> 691 <a href="#" class="use-template-btn" data-analytics-event="template" data-site="https://nastassiadomenique.com">Use as template â</a> 692 </div> 693 </div> 694 </div> 695 </div> 696 </section> 697 698 <!-- SEO Content Section --> 699 <section class="seo-content-section" style="padding: 80px 20px; background: var(--background);"> 700 <div class="seo-content-container" style="max-width: 1200px; margin: 0 auto;"> 701 <!-- Main SEO H1 --> 702 <div style="text-align: center; margin-bottom: 60px;"> 703 <h2 style="font-size: 3rem; margin-bottom: 20px; color: var(--text-primary); font-weight: 700;">Get Leads The Easy Way</h2> 704 <p style="font-size: 1.2rem; color: var(--text-secondary); max-width: 800px; margin: 0 auto; line-height: 1.6;">Small business owners have always had to choose between paying $1,000's of dollars for a web developer that may or may not listen to them, or spending 100's of hours learning a drag and drop website builder platform to build a site themselves. Vibe Otter gives you the best of both worlds: your own personal web designer at $34/month.</p> 705 </div> 706 707 <!-- Value Proposition Blocks --> 708 <div class="value-props-section" style="margin-bottom: 80px;"> 709 <div class="value-prop-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px;"> 710 <div class="value-prop-card"> 711 <div class="value-prop-icon-badge" aria-hidden="true"> 712 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 713 <path d="M4.5 8.5L6 3h12l1.5 5.5"></path> 714 <path d="M3 8.5h18"></path> 715 <path d="M3 8.5a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0"></path> 716 <path d="M5 13v8h14v-8"></path> 717 <path d="M10 21v-5h4v5"></path> 718 </svg> 719 </div> 720 <h3>Perfect For Small Business</h3> 721 <ul class="value-prop-list"> 722 <li>Your business is missing tons of leads if you don't have a website in 2026</li> 723 <li>Web designers can cost more than those leads are worth</li> 724 <li>Other website builders are so difficult many small businesses just give up</li> 725 </ul> 726 </div> 727 <div class="value-prop-card"> 728 <div class="value-prop-icon-badge" aria-hidden="true"> 729 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 730 <rect x="2" y="3" width="20" height="14" rx="2"></rect> 731 <path d="M2 7h20"></path> 732 <rect x="5.5" y="10" width="8" height="4.5" rx="1" stroke-dasharray="2.2 1.8"></rect> 733 <path d="M14.5 12.5l6.5 2.6-2.8 1.1-1.1 2.8z"></path> 734 </svg> 735 </div> 736 <h3>Easy Website Building</h3> 737 <ul class="value-prop-list"> 738 <li>Most users take 30 minutes to launch a professional quality site</li> 739 <li>Prompt your own web designer by selecting the parts of your site you want to change in Lasso Mode</li> 740 <li>Make small edits by hand yourself, such as wordsmithing text or nudging a photo</li> 741 </ul> 742 </div> 743 <div class="value-prop-card"> 744 <div class="value-prop-icon-badge" aria-hidden="true"> 745 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 746 <rect x="2.5" y="4" width="19" height="4.5" rx="1"></rect> 747 <path d="M4.5 8.5V19a1.5 1.5 0 0 0 1.5 1.5h12a1.5 1.5 0 0 0 1.5-1.5V8.5"></path> 748 <path d="M9 13.5l2.2 2.2 4-4.5"></path> 749 </svg> 750 </div> 751 <h3>Everything Included</h3> 752 <ul class="value-prop-list"> 753 <li>Hosting, custom domains, and a secure database in one place</li> 754 <li>Booking calendars, contact forms, file uploads, and customer accounts built in</li> 755 <li>Security and search visibility are our job, not yours</li> 756 </ul> 757 </div> 758 </div> 759 </div> 760 761 <!-- How It Works Section --> 762 <div class="how-it-works-section" style="margin-bottom: 80px; text-align: center;"> 763 <h2 style="font-size: 2.5rem; margin-bottom: 50px; color: var(--text-primary);">How It Works</h2> 764 <div class="steps-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px;"> 765 <div class="step-card" style="background: var(--surface); padding: 40px; border-radius: 20px; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); position: relative;"> 766 <div class="step-number" style="width: 60px; height: 60px; background: var(--accent-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 20px; box-shadow: 0 4px 12px rgba(45, 125, 125, 0.3);">1</div> 767 <h3 style="font-size: 1.4rem; margin-bottom: 15px; color: var(--text-primary);">Tell Us Your Vision</h3> 768 <p style="color: var(--text-secondary); line-height: 1.6;">Describe your business, or share a site you like. The otter understands context, industry needs, and design preferences.</p> 769 </div> 770 <div class="step-card" style="background: var(--surface); padding: 40px; border-radius: 20px; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); position: relative;"> 771 <div class="step-number" style="width: 60px; height: 60px; background: var(--accent-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 20px; box-shadow: 0 4px 12px rgba(45, 125, 125, 0.3);">2</div> 772 <h3 style="font-size: 1.4rem; margin-bottom: 15px; color: var(--text-primary);">The Otter Builds It</h3> 773 <p style="color: var(--text-secondary); line-height: 1.6;">Watch as the otter creates your professional website â content, images, layout, and all the working parts behind it.</p> 774 </div> 775 <div class="step-card" style="background: var(--surface); padding: 40px; border-radius: 20px; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); position: relative;"> 776 <div class="step-number" style="width: 60px; height: 60px; background: var(--accent-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 20px; box-shadow: 0 4px 12px rgba(45, 125, 125, 0.3);">3</div> 777 <h3 style="font-size: 1.4rem; margin-bottom: 15px; color: var(--text-primary);">Launch & Grow</h3> 778 <p style="color: var(--text-secondary); line-height: 1.6;">Your site goes live instantly with hosting, search-engine files, and mobile polish handled for you. Change anything later by prompting â or just click it and edit.</p> 779 </div> 780 </div> 781 </div> 782 783 <!-- Agency Promotion Box --> 784 <div class="agency-promo-section" style="margin-bottom: 80px;"> 785 <div style="background: linear-gradient(135deg, var(--accent-primary), #2a8080); border-radius: 20px; padding: 48px 40px; box-shadow: 5px 5px 0px #236060; border: 2.5px solid #2D7D7D; text-align: center; max-width: 900px; margin: 0 auto;"> 786 <p style="color: white; font-size: 1.3rem; margin-bottom: 24px; line-height: 1.6; font-weight: 500;">Don't want to build your own site?</p> 787 <a href="/webdesign" style="display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: white; color: var(--accent-primary); text-decoration: none; border-radius: 10px; font-weight: 700; font-size: 1.1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 24px rgba(0, 0, 0, 0.2)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 6px 20px rgba(0, 0, 0, 0.15)';"> 788 View Our Agency Services 789 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 790 <line x1="5" y1="12" x2="19" y2="12"></line> 791 <polyline points="12 5 19 12 12 19"></polyline> 792 </svg> 793 </a> 794 </div> 795 </div> 796 797 <!-- Website Builder Comparison Section --> 798 <div class="compare-section" id="compare-website-builders" style="margin-bottom: 80px;"> 799 <div style="text-align: center; margin-bottom: 40px;"> 800 <p class="compare-eyebrow">Vibe Otter versus traditional website builders</p> 801 <h2 style="font-size: 2.5rem; margin-bottom: 20px; color: var(--text-primary);">How Hard is Building Your Own Website?</h2> 802 <p style="font-size: 1.1rem; color: var(--text-secondary); max-width: 800px; margin: 0 auto; line-height: 1.6;">Before Vibe Otter, building a website was a major pain people often failed at. Vibe Otter gives you what you really want â a fast, affordable website with a fun, low-stress build experience.</p> 803 </div> 804 <div class="compare-card"> 805 <div class="compare-table-wrap"> 806 <table class="compare-table"> 807 <thead> 808 <tr> 809 <th scope="col">What it takes</th> 810 <th scope="col" class="compare-best-col">Vibe Otter</th> 811 <th scope="col">Wix</th> 812 <th scope="col">Squarespace</th> 813 <th scope="col">WordPress</th> 814 </tr> 815 </thead> 816 <tbody> 817 <tr> 818 <th scope="row">Effort Required</th> 819 <td class="compare-best-col" data-label="Vibe Otter"><span class="compare-rating rating-good">Low</span><span class="compare-cell-detail">24 minutes <button type="button" class="compare-src" data-pop="pop-vo-effort">source</button></span></td> 820 <td data-label="Wix"><span class="compare-rating rating-mid">Medium</span><span class="compare-cell-detail">12 hours <button type="button" class="compare-src" data-pop="pop-wix-launch">source</button></span></td> 821 <td data-label="Squarespace"><span class="compare-rating rating-mid">Medium</span><span class="compare-cell-detail">35 hours <button type="button" class="compare-src" data-pop="pop-godaddy">source</button></span></td> 822 <td data-label="WordPress"><span class="compare-rating rating-bad">High</span><span class="compare-cell-detail">72 hours <button type="button" class="compare-src" data-pop="pop-wp-hours">source</button></span></td> 823 </tr> 824 <tr> 825 <th scope="row">Average Time to Launch</th> 826 <td class="compare-best-col" data-label="Vibe Otter"><span class="compare-rating rating-good">Hours</span><span class="compare-cell-detail">Most sites launch the same day <button type="button" class="compare-src" data-pop="pop-vo-effort">source</button></span></td> 827 <td data-label="Wix"><span class="compare-rating rating-mid">Days</span><span class="compare-cell-detail">4 days <button type="button" class="compare-src" data-pop="pop-wix-launch">source</button></span></td> 828 <td data-label="Squarespace"><span class="compare-rating rating-warn">Weeks</span><span class="compare-cell-detail">8 days <button type="button" class="compare-src" data-pop="pop-wix-launch">source</button></span></td> 829 <td data-label="WordPress"><span class="compare-rating rating-bad">Months</span><span class="compare-cell-detail">14 days <button type="button" class="compare-src" data-pop="pop-wp-hours">source</button></span></td> 830 </tr> 831 <tr> 832 <th scope="row">Failure Risk</th> 833 <td class="compare-best-col" data-label="Vibe Otter"><span class="compare-rating rating-good">None</span><span class="compare-cell-detail">Guaranteed Web Designer / Engineering Support <button type="button" class="compare-src" data-pop="pop-guarantee">source</button></span></td> 834 <td data-label="Wix"><span class="compare-rating rating-bad">High</span><span class="compare-cell-detail">33% of customers fail to publish a professional website according to Wix itself <button type="button" class="compare-src" data-pop="pop-wix-fail">source</button></span></td> 835 <td data-label="Squarespace"><span class="compare-rating rating-bad">High</span><span class="compare-cell-detail">76% of entrepreneurs lacked the time and skills to complete a website <button type="button" class="compare-src" data-pop="pop-godaddy">source</button></span></td> 836 <td data-label="WordPress"><span class="compare-rating rating-bad">Extreme</span><span class="compare-cell-detail">Complex ecosystem of 300+ plugins and themes requires professional skillset <button type="button" class="compare-src" data-pop="pop-wp-frustration">source</button></span></td> 837 </tr> 838 <tr class="compare-problems-row"> 839 <th scope="row">Common Problems</th> 840 <td class="compare-best-col" data-label="Vibe Otter"> 841 <ul class="compare-bullets"> 842 <li>Vibe Otter doesn't listen occasionally, requiring 2-5 minutes of rework per site on average</li> 843 <li>Prompt anxiety - some customers aren't sure what to say. Contact support for help learning to prompt</li> 844 </ul> 845 <button type="button" class="compare-src" data-pop="pop-vo-problems">source</button> 846 </td> 847 <td data-label="Wix"> 848 <ul class="compare-bullets"> 849 <li>Wix's AI Builder errors at a high rate, requ
849iring 3-7 hours of rework</li> 850 <li>No support if the builder gets completely stuck and can't change a critical item</li> 851 </ul> 852 <button type="button" class="compare-src" data-pop="pop-wix-problems">source</button> 853 </td> 854 <td data-label="Squarespace"> 855 <ul class="compare-bullets"> 856 <li>Easy to learn upfront, but days of boring clicking</li> 857 <li>No design help if you aren't already artistic</li> 858 </ul> 859 <button type="button" class="compare-src" data-pop="pop-godaddy">source</button> 860 </td> 861 <td data-label="WordPress"> 862 <ul class="compare-bullets"> 863 <li>Most users have to take a literal weeklong course to even begin</li> 864 <li>Then weeks of boring clicking over and over again and continual learning</li> 865 <li>Then ~6 hours of maintenance a week to manage plugin changes</li> 866 </ul> 867 <button type="button" class="compare-src" data-pop="pop-wp-frustration">source</button> 868 </td> 869 </tr> 870 </tbody> 871 </table> 872 </div> 873 </div> 874 <!-- Source popup cards for the chart's "source" links; re-parented to <body> at init so absolute positioning uses page coordinates --> 875 <div class="compare-pop" id="pop-vo-effort" role="dialog" aria-label="Source details"> 876 <button type="button" class="compare-pop-close" aria-label="Close">×</button> 877 <p class="compare-pop-title">Our internal data</p> 878 <ul class="compare-pop-bullets"> 879 <li>24 minutes average time spent actively working on the site across all new Vibe Otter customers in the month of August 2026.</li> 880 <li>Ranged from 8 minutes (low) to 35 minutes time actively designing the website.</li> 881 </ul> 882 </div> 883 <div class="compare-pop" id="pop-vo-problems" role="dialog" aria-label="Source details"> 884 <button type="button" class="compare-pop-close" aria-label="Close">×</button> 885 <p class="compare-pop-title">Our internal data</p> 886 <ul class="compare-pop-bullets"> 887 <li>Average of 1 in 13 prompts unsuccessful for users during the month of August 2026, causing users minor frustration and an extra 3 minutes active time on average.</li> 888 </ul> 889 </div> 890 <div class="compare-pop" id="pop-wix-launch" role="dialog" aria-label="Source details"> 891 <p class="compare-pop-title">Wix State of Websites Report</p> 892 <a class="compare-pop-link" href="https://www.wix.com/data/state-of-websites#:~:text=average%20time%20to%20publish%20a%20website%20dropped%2050%25" target="_blank" rel="noopener">Read the source →</a> 893 </div> 894 <div class="compare-pop" id="pop-wix-fail" role="dialog" aria-label="Source details"> 895 <p class="compare-pop-title">Wix State of Websites Report</p> 896 <p class="compare-pop-body">33% of customers fail to publish a professional website according to Wix itself.</p> 897 <a class="compare-pop-link" href="https://www.wix.com/data/state-of-websites#:~:text=Custom%20domain%20rates%20among%20published%20sites" target="_blank" rel="noopener">Read the source →</a> 898 </div> 899 <div class="compare-pop" id="pop-wix-problems" role="dialog" aria-label="Source details"> 900 <p class="compare-pop-title">Wix State of Websites Report</p> 901 <p class="compare-pop-body">Wix's own report: 90% of Wix Harmony users still choose to edit brand-sensitive details by hand.</p> 902 <a class="compare-pop-link" href="https://www.wix.com/data/state-of-websites#:~:text=90%25%20of%20Wix%20Harmony%20users" target="_blank" rel="noopener">Read the source →</a> 903 </div> 904 <div class="compare-pop" id="pop-godaddy" role="dialog" aria-label="Source details"> 905 <p class="compare-pop-title">Small-business survey</p> 906 <p class="compare-pop-body">In the survey, 76% of entrepreneurs lacked the time and skills to complete a website.</p> 907 <a class="compare-pop-link" href="https://www.godaddy.com/resources/news/what-clients-want#:~:text=76%25%20indicated%20limited%20time%20or%20skills" target="_blank" rel="noopener">Read the source →</a> 908 </div> 909 <div class="compare-pop" id="pop-wp-hours" role="dialog" aria-label="Source details"> 910 <p class="compare-pop-title">WordPress official user survey</p> 911 <p class="compare-pop-body">WordPress's own 2015–2017 survey: even professionals report a typical site takes 20 to 200+ working hours to complete.</p> 912 <a class="compare-pop-link" href="https://wordpress.org/news/2017/12/wordpress-user-survey-data-for-2015-2017/#:~:text=How%20many%20hours%20of%20work%20does%20your%20typical%20WordPress%20project%20take%20to%20launch" target="_blank" rel="noopener">Read the source →</a> 913 </div> 914 <div class="compare-pop" id="pop-wp-frustration" role="dialog" aria-label="Source details"> 915 <p class="compare-pop-title">WordPress official user survey</p> 916 <p class="compare-pop-body">WordPress's own survey asks users "What's the most frustrating thing about WordPress?" — see the answers in their published results.</p> 917 <a class="compare-pop-link" href="https://wordpress.org/news/2017/12/wordpress-user-survey-data-for-2015-2017/#:~:text=most%20frustrating%20thing%2
9170about%20WordPress" target="_blank" rel="noopener">Read the source →</a> 918 </div> 919 <!-- Build Your Site Guarantee card (opened from the chart's Failure Risk source link). 920 Copy of the guarantee section on pricing.html â keep the two in sync by hand. --> 921 <div class="compare-pop compare-pop-wide" id="pop-guarantee" role="dialog" aria-label="Build Your Site Guarantee"> 922 <button type="button" class="compare-pop-close" aria-label="Close">×</button> 923 <h2 class="guarantee-pop-heading">Build Your Site Guarantee</h2> 924 <p class="guarantee-modal-note">Start it and you'll finish it. Real web designers and real engineers are on live chat to get you unstuck — included on all plans.</p> 925 <div class="guarantee-modal-grid"> 926 <div class="guarantee-modal-card"> 927 <h3>Design help</h3> 928 <ul> 929 <li>How to design your site</li> 930 <li>How to write prompts that get what you want</li> 931 <li>Honest feedback on any page or section</li> 932 <li>How to test everything before you launch</li> 933 </ul> 934 </div> 935 <div class="guarantee-modal-card"> 936 <h3>Engineering & platform help</h3> 937 <ul> 938 <li>Plan how to build an advanced app the right way</li> 939 <li>Hook up payments, APIs, and other connections</li> 940 <li>Set up your domain and business email</li> 941 <li>Everyday tech support, any question</li> 942 </ul> 943 </div> 944 </div> 945 <div class="guarantee-modal-cta-row"> 946 <button class="guarantee-modal-cta" onclick="this.closest('.compare-pop').classList.remove('show'); if (window.VibeOtterSupportModal) VibeOtterSupportModal.openLiveChat();">Talk to a Live Expert</button> 947 </div> 948 </div> 949 </div> 950 951 <!-- FAQ Section --> 952 <div class="faq-section" style="margin-bottom: 80px;"> 953 <h2 style="font-size: 2.5rem; margin-bottom: 50px; color: var(--text-primary); text-align: center;">Frequently Asked Questions</h2> 954 <div class="faq-accordion" style="max-width: 800px; margin: 0 auto;"> 955 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 956 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;"> 957 <span>How do I start?</span> 958 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 959 <polyline points="6 9 12 15 18 9"></polyline> 960 </svg> 961 </button> 962 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 963 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Don't be intimidated - Vibe Otter is designed to do all the hard creative work for you. Just say exactly what you want like you were wishing to a genie: "I want a consulting website" or "I want a booking site for my salon" â or drop in a link to a site you'd like to use as a template and the otter will do the rest.</p> 964 </div> 965 </div> 966 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 967 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
968 <span>What happens if something goes wrong?</span> 969 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 970 <polyline points="6 9 12 15 18 9"></polyline> 971 </svg> 972 </button> 973 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 974 <div style="padding: 4px 22px 20px;"> 975 <p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px;">You're covered by our Build Your Site Guarantee: start a site and you'll finish it. Real web designers and real engineers â not bots â are on live chat on every plan, including free, to get you unstuck on anything: design feedback, prompt help, domains, payments, connections. Every change has an undo button. And if you'd rather write in, tech support is humans only â a real person reads your message and writes back.</p> 976 <button onclick="event.preventDefault(); document.getElementById('supportModal').classList.add('show'); document.body.style.overflow='hidden';" style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--accent-primary); color: white; text-decoration: none; border: none; border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 3px 3px 0px #236060;" onmouseover="this.style.transform='translate(-1px, -1px)'; this.style.boxShadow='4px 4px 0px #236060';" onmouseout="this.style.transform='translate(0, 0)'; this.style.boxShadow='3px 3px 0px #236060';"> 977 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 978 <circle cx="12" cy="12" r="10"></circle> 979 <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path> 980 <line x1="12" y1="17" x2="12.01" y2="17"></line> 981 </svg> 982 Get Support 983 </button> 984 </div> 985 </div> 986 </div> 987 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 988 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;"> 989 <span>Who owns the rights to the site?</span> 990 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 991 <polyline points="6 9 12 15 18 9"></polyline> 992 </svg> 993 </button> 994 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 995 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">You keep everything you upload. Paid Accounts also receive ownership and export rights for content and code created through Vibe Otter.</p> 996 </div> 997 </div> 998 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 999 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1000 <span>Is it really free?</span> 1001 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 1002 <polyline points="6 9 12 15 18 9"></polyline> 1003 </svg> 1004 </button> 1005 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 1006 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;"><strong>Yes</strong> - Vibe Otter is truly free for simple pages. You get <span data-prompts-copy>3 free Prompts per month</span> and a yoursite.vibeotter.com address. We give away genuinely valuable free sites on purpose: if launching your business for free helps you grow, we're confident you'll reward us with your business when you can afford to. It's part of our commitment to helping small business owners. When the site starts getting real business activity, Starter gives you more room to grow and adds a custom domain.</p> 1007 </div> 1008 </div> 1009 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 1010 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;"> 1011 <span>What can I build with Vibe Otter?</span> 1012 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 1013 <polyline points="6 9 12 15 18 9"></polyline> 1014 </svg> 1015 </button> 1016 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 1017 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Everything from a polished landing page to a complete site with customer accounts. Small-business websites, booking pages, non-profit sites, member areas, client portals, dashboards, and full products with private data and file uploads. If you sell through Shopify, Vibe Otter can build your storefront with a working cart and checkout.</p> 1018 </div> 1019 </div> 1020 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 1021 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;"> 1022 <span>Does Vibe Otter only make simple websites?</span> 1023 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 1024 <polyline points="6 9 12 15 18 9"></polyline> 1025 </svg> 1026 </button> 1027 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 1028 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">No â that's old news. Vibe Otter builds complete products: your pages plus the database, customer logins, file storage, and behind-the-scenes functions that power them, with hosting included. The full behind-the-scenes toolkit is part of the Pro plan.</p> 1029 </div> 1030 </div> 1031 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 1032 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1033 <span>Do I need to know how to code?</span> 1034 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 1035 <polyline points="6 9 12 15 18 9"></polyline> 1036 </svg> 1037 </button> 1038 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 1039 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">No. Describe what you want in plain English, then refine it by prompting or by clicking anything on the page and changing it directly. Vibe Otter handles everything technical behind the scenes.</p> 1040 </div> 1041 </div> 1042 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 1043 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;"> 1044 <span>Can I edit the site myself, without prompts?</span> 1045 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 1046 <polyline points="6 9 12 15 18 9"></polyline> 1047 </svg> 1048 </button> 1049 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 1050 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Yes. Click any part of your site and change the text, swap photos, pick fonts and colors, move things around, or delete them â instantly, without spending a Prompt. Prompt for the big changes, click for the small ones. Vibe Otter is the rare builder that gives you both.</p> 1051 </div> 1052 </div> 1053 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 1054 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;"> 1055 <span>Does Vibe Otter handle the technical parts â database, logins, hosting?</span> 1056 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 1057 <polyline points="6 9 12 15 18 9"></polyline> 1058 </svg> 1059 </button> 1060 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 1061 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Yes, all of it. A database for your records, customer accounts with email verification, file storage, behind-the-scenes functions, scheduled tasks, and hosting on your own web address â set up as part of the build, not sold as extras.</p> 1062 </div> 1063 </div> 1064 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 1065 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
1066 <span>How does Vibe Otter handle security?</span> 1067 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 1068 <polyline points="6 9 12 15 18 9"></polyline> 1069 </svg> 1070 </button> 1071 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 1072 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Security is our responsibility, not yours. Passwords and keys are kept out of your page code, records marked sensitive are locked down automatically, sites holding sensitive data require extra sign-in verification, and Vibe Otter refuses to build setups that would be unsafe.</p> 1073 </div> 1074 </div> 1075 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 1076 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;"> 1077 <span>Is Vibe Otter an established/trusted platform?</span> 1078 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 1079 <polyline points="6 9 12 15 18 9"></polyline> 1080 </svg> 1081 </button> 1082 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 1083 <p style="padding: 0 0 12px 0; color: var(--text-secondary); line-height: 1.6;">Yes. Vibe Otter is an established platform that hosts more than 3,000 websites. It is the only website platform created by a practicing web design agency.</p> 1084 <p style="padding: 0 0 12px 0; color: var(--text-secondary); line-height: 1.6;">Vibe Otter began as an internal tool our agency used to make client websites easier to build, better-performing, and simpler to maintain. The platform became so effective that clients realized they could use it to build and manage their own websites at a fraction of traditional agency costs. We then released Vibe Otter to the public.</p> 1085 <p style="padding: 0 0 12px 0; color: var(--text-secondary); line-height: 1.6;">Because Vibe Otter was created by working web designers, its SEO, security, design, hosting, and maintenance are optimized around the real needs of small businesses. Ongoing hosting and maintenance are included in the Vibe Otter subscription.</p> 1086 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Vibe Otter receives less media attention than many competitors because it has never needed venture capital or large advertising campaigns to grow. Strong customer referrals and word of mouth have allowed the platform to grow independentlyâwhich is good news for our customers.</p> 1087 </div> 1088 </div> 1089 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 1090 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;"> 1091 <span>Will my site show up on Google and in chatbot answers?</span> 1092 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20p
1092x; height: 20px; transition: transform 0.3s ease;"> 1093 <polyline points="6 9 12 15 18 9"></polyline> 1094 </svg> 1095 </button> 1096 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 1097 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Yes. Every site is published with robots.txt, sitemap.xml, llms.txt, canonical links, and structured data â the files search engines and answer engines read. No setup on your end.</p> 1098 </div> 1099 </div> 1100 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 1101 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;"> 1102 <span>How is Vibe Otter different from Wix, Squarespace, or WordPress?</span> 1103 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 1104 <polyline points="6 9 12 15 18 9"></polyline> 1105 </svg> 1106 </button> 1107 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 1108 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">Effort and risk. Wix, Squarespace, and WordPress take 12–72 hours of work, and many people never finish â Wix's own data shows 33% of customers fail to publish a professional website. Vibe Otter takes about 24 minutes of effort, launches in hours, and comes with guaranteed web designer and engineering support so you never get stuck.</p> 1109 </div> 1110 </div> 1111 <div class="faq-item" style="border-bottom: 1px solid var(--border); margin-bottom: 10px;"> 1112 <button class="faq-question" onclick="toggleFaq(this)" aria-expanded="false" style="width: 100%; padding: 20px 0; background: none; border: none; text-align: left; font-size: 1.1rem; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;"> 1113 <span>How do I connect a custom domain I purchased elsewhere (GoDaddy, Namecheap, etc.)?</span> 1114 <svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 20px; height: 20px; transition: transform 0.3s ease;"> 1115 <polyline points="6 9 12 15 18 9"></polyline> 1116 </svg> 1117 </button> 1118 <div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;"> 1119 <p style="padding: 0 0 20px 0; color: var(--text-secondary); line-height: 1.6;">You can connect any site built on Vibe Otter to a custom domain you've purchased from any registrar like GoDaddy, Namecheap, Google Domains, or others. Vibe Otter has a simple, step-by-step walkthrough built right into your dashboard that guides you through the process of pointing your domain to your Vibe Otter site. No technical knowledge required - just follow the prompts and you'll be live on your custom domain in minutes.</p> 1120 </div> 1121 </div> 1122 </div> 1123 </div> 1124 1125 <!-- Latest Articles Section --> 1126 <style> 1127 /* Section divider between hero and brands */ 1128 .section-divider { 1129 width: 250px; 1130 height: 3px; 1131 background: #2D7D7D; 1132 margin: 0 auto; 1133 border-radius: 2px; 1134 position: relative; 1135 z-index: 2; 1136 } 1137 1138 /* Mode selector pills â teal border + amber hard shadow + push-down */ 1139 .mode-selector { 1140 display: flex; 1141 justify-content: center; 1142 gap: 0.5rem; 1143 margin-bottom: 2.5rem; 1144 flex-wrap: wrap; 1145 } 1146 1147 .mode-btn { 1148 padding: 0.5rem 1.25rem; 1149 border-radius: 999px; 1150 border: 2.5px solid #4A9B9B; 1151 background: transparent; 1152 color: #2D7D7D; 1153 font-size: 0.9rem; 1154 font-weight: 600; 1155 cursor: pointer; 1156 transition: all 0.15s cubic-bezier(0.2, 0, 0, 1); 1157 font-family: 'Inter', -apple-system, sans-serif; 1158 box-shadow: 3px 3px 0px #4A9B9B; 1159 } 1160 1161 .mode-btn:hover { 1162 background: rgba(74, 155, 155, 0.08); 1163 transform: translateY(-1px) translateX(-1px); 1164 box-shadow: 4px 4px 0px #4A9B9B; 1165 } 1166 1167 .mode-btn:active { 1168 transform: translateY(3px) translateX(3px); 1169 box-shadow: 0px 0px 0px transparent; 1170 } 1171 1172 .mode-btn.active { 1173 background: #2D7D7D; 1174 color: white; 1175 border-color: #2D7D7D; 1176 box-shadow: 0 0 0 0.5px white, 4px 4px 0px #2D7D7D; 1177 } 1178 1179 .mode-more-options { 1180 display: none; 1181 justify-content: center; 1182 gap: 0.5rem; 1183 margin-top: -2rem; 1184 margin-bottom: 2.5rem; 1185 flex-wrap: wrap; 1186 } 1187 .mode-more-options.open { 1188 display: flex; 1189 } 1190 1191 1192 /* Blog cards â warm cream + amber hard shadow */ 1193 .blog-cards-grid { 1194 display: grid; 1195 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 1196 gap: 1.5rem; 1197 margin-top: 2rem; 1198 } 1199 1200 .blog-card { 1201 background: rgba(255, 252, 247, 0.85); 1202 backdrop-filter: blur(12px); 1203 -webkit-backdrop-filter: blur(12px); 1204 border: 2.5px solid rgba(45, 125, 125, 0.15); 1205 border-radius: 16px; 1206 padding: 1.5rem; 1207 text-decoration: none; 1208 color: #3D3229; 1209 transition: all 0.25s cubic-bezier(0.2, 0, 0, 1); 1210 display: block; 1211 box-shadow: 4px 4px 0px #4A9B9B; 1212 } 1213 1214 .blog-card:hover { 1215 transform: translateY(-3px) translateX(-2px); 1216 box-shadow: 6px 6px 0px #4A9B9B; 1217 border-color: #2D7D7D; 1218 } 1219 1220 .blog-card-category { 1221 font-size: 0.75rem; 1222 font-weight: 700; 1223 text-transform: uppercase; 1224 letter-spacing: 0.05em; 1225 color: #2D7D7D; 1226 margin-bottom: 0.5rem; 1227 } 1228 1229 .blog-card-title { 1230 font-size: 1.1rem; 1231 font-weight: 700; 1232 line-height: 1.4; 1233 color: #3D3229; 1234 } 1235 1236 .blog-card-excerpt { 1237 font-size: 0.85rem; 1238 color: #6B5D50; 1239 margin-top: 0.5rem; 1240 line-height: 1.5; 1241 } 1242 1243 /* SEO section headings */ 1244 .seo-section h2, 1245 .seo-section h3 { 1246 color: #3D3229; 1247 font-weight: 700; 1248 } 1249 1250 .seo-section p, 1251 .seo-section li { 1252 color: #6B5D50; 1253 } 1254 1255 /* Value prop cards â warm + amber hard shadow */ 1256 .value-prop-card { 1257 background: #FFFCF7; 1258 border: 2.5px solid rgba(45, 125, 125, 0.15); 1259 border-radius: 20px; 1260 box-shadow: 5px 5px 0px #4A9B9B; 1261 } 1262 1263 /* Steps section â teal gradient numbers */ 1264 .step-number { 1265 background: linear-gradient(135deg, #2D7D7D 0%, #4A9B9B 100%); 1266 color: white; 1267 font-weight: 700; 1268 border-radius: 50%; 1269 box-shadow: 2px 2px 0px #236060; 1270 } 1271 1272 /* Value proposition cards */ 1273 .value-prop-card { 1274 background: #FFFCF7; 1275 padding: 36px 32px; 1276 border-radius: 20px; 1277 border: 2.5px solid rgba(45, 125, 125, 0.15); 1278 box-shadow: 5px 5px 0px #4A9B9B; 1279 transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1); 1280 } 1281 1282 .value-prop-card:hover { 1283 transform: translate(-2px, -2px); 1284 box-shadow: 7px 7px 0px #4A9B9B; 1285 } 1286 1287 .value-prop-icon-badge { 1288 width: 64px; 1289 height: 64px; 1290 margin: 0 auto 22px; 1291 display: flex; 1292 align-items: center; 1293 justify-content: center; 1294 background: linear-gradient(135deg, #2D7D7D 0%, #4A9B9B 100%); 1295 color: white; 1296 border-radius: 16px; 1297 box-shadow: 2px 2px 0px #236060; 1298 } 1299 1300 .value-prop-icon-badge svg { 1301 width: 34px; 1302 height: 34px; 1303 } 1304 1305 .value-prop-card h3 { 1306 font-size: 1.5rem; 1307 margin-bottom: 18px; 1308 color: var(--text-primary); 1309 text-align: center; 1310 } 1311 1312 .value-prop-list { 1313 list-style: none; 1314 padding: 0; 1315 margin: 0; 1316 text-align: left; 1317 } 1318 1319 .value-prop-list li { 1320 color: var(--text-secondary); 1321 line-height: 1.65; 1322 margin-bottom: 14px; 1323 padding-left: 30px; 1324 position: relative; 1325 } 1326 1327 .value-prop-list li:last-child { 1328 margin-bottom: 0; 1329 } 1330 1331 .value-prop-list li::before { 1332 content: ''; 1333 position: absolute; 1334 left: 0; 1335 top: 3px; 1336 width: 19px; 1337 height: 19px; 1338 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D7D7D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8 12.5 11 15.5 16 9.5'/%3E%3C/svg%3E") no-repeat center / contain; 1339 } 1340 1341 /* FAQ section â brutalist cards */ 1342 .faq-item { 1343 background: #FFFCF7; 1344 border: 2.5px solid rgba(45, 125, 125, 0.15) !important; 1345 border-radius: 14px; 1346 box-shadow: 4px 4px 0px #4A9B9B; 1347 margin-bottom: 18px !important; 1348 overflow: hidden; 1349 transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1); 1350 } 1351 1352 .faq-item:hover { 1353 transform: translate(-1px, -1px); 1354 box-shadow: 6px 6px 0px #4A9B9B; 1355 } 1356 1357 .faq-question { 1358 color: #3D3229; 1359 font-weight: 600; 1360 padding: 18px 22px !important; 1361 transition: background 0.2s ease; 1362 } 1363 1364 .faq-question:hover, 1365 .faq-question[aria-expanded="true"] { 1366 background: rgba(45, 125, 125, 0.06); 1367 } 1368 1369 .faq-question .faq-icon { 1370 color: var(--accent-primary); 1371 flex-shrink: 0; 1372 margin-left: 14px; 1373 } 1374 1375 .faq-answer { 1376 color: #6B5D50; 1377 } 1378 1379 .faq-answer p { 1380 padding: 4px 22px 20px !important; 1381 } 1382 1383 .faq-answer div p { 1384 padding: 0 !important; 1385 } 1386 1387 /* Comparison sections */ 1388 .compare-eyebrow { 1389 text-transform: uppercase; 1390 letter-spacing: 0.08em; 1391 font-size: 0.85rem; 1392 font-weight: 700; 1393 color: var(--accent-primary); 1394 margin-bottom: 12px; 1395 } 1396 1397 .compare-card { 1398 max-width: 1100px; 1399 margin: 0 auto; 1400 background: #FFFCF7; 1401 border: 2.5px solid rgba(45, 125, 125, 0.25); 1402 border-radius: 18px; 1403 box-shadow: 6px 6px 0px #4A9B9B; 1404 overflow: hidden; 1405 } 1406 1407 .compare-table-wrap { 1408 overflow-x: auto; 1409 } 1410 1411 .compare-table { 1412 width: 100%; 1413 border-collapse: separate; 1414 border-spacing: 0; 1415 } 1416 1417 .compare-caption { 1418 caption-side: top; 1419 text-align: left; 1420 font-size: 0.85rem; 1421 color: var(--text-secondary); 1422 padding: 16px 20px 12px; 1423 } 1424 1425 .compare-table th, 1426 .compare-table td { 1427 padding: 14px 16px; 1428 text-align: left; 1429 font-size: 0.95rem; 1430 line-height: 1.5; 1431 border-bottom: 1.5px solid rgba(45, 125, 125, 0.14); 1432 vertical-align: top; 1433 } 1434 1435 .compare-table thead th { 1436 background: var(--accent-primary); 1437 color: white; 1438 font-weight: 700; 1439 white-space: nowrap; 1440 padding: 16px; 1441 font-size: 1rem; 1442 border-bottom: 2.5px solid #236060; 1443 } 1444 1445 .compare-table thead th.compare-best-col { 1446 background: #D95B3E; 1447 color: #fff; 1448 border-left: 2.5px solid #B94C31; 1449 border-right: 2.5px solid #B94C31; 1450 border-bottom: 2.5px solid #B94C31; 1451 } 1452 1453 .compare-table thead th:not(:first-child) { 1454 text-align: center; 1455 } 1456 1457 .compare-table tbody th[scope="row"] { 1458 color: var(--text-primary); 1459 font-weight: 600; 1460 max-width: 220px; 1461 background: rgba(45, 125, 125, 0.05); 1462 vertical-align: middle; 1463 } 1464 1465 .compare-problems-row td { vertical-align: top; } 1466 1467 .compare-table td { 1468 color: var(--text-secondary); 1469 text-align: center; 1470 vertical-align: middle; 1471 } 1472 1473 .compare-table tbody tr:not(.compare-total-row):hover th, 1474 .compare-table tbody tr:not(.compare-total-row)
1474:hover td:not(.compare-best-col) { 1475 background: rgba(45, 125, 125, 0.07); 1476 } 1477 1478 .compare-table tbody tr:last-child th, 1479 .compare-table tbody tr:last-child td { 1480 border-bottom: none; 1481 } 1482 1483 .compare-table .compare-best-col { 1484 background: rgba(217, 91, 62, 0.08); 1485 color: var(--text-primary); 1486 font-weight: 600; 1487 border-left: 2.5px solid #D95B3E; 1488 border-right: 2.5px solid #D95B3E; 1489 } 1490 1491 .compare-table .compare-total-row th, 1492 .compare-table .compare-total-row td { 1493 font-weight: 700; 1494 font-size: 1.05rem; 1495 color: var(--text-primary); 1496 background: rgba(217, 91, 62, 0.08); 1497 border-top: 2.5px solid rgba(61, 50, 41, 0.2); 1498 } 1499 1500 @media (max-width: 768px) { 1501 .compare-card { 1502 background: none; 1503 border: none; 1504 border-radius: 0; 1505 box-shadow: none; 1506 overflow: visible; 1507 } 1508 .compare-table thead { 1509 display: none; 1510 } 1511 .compare-table, 1512 .compare-table tbody, 1513 .compare-table tr, 1514 .compare-table th[scope="row"], 1515 .compare-table td { 1516 display: block; 1517 width: 100%; 1518 max-width: none; 1519 } 1520 .compare-caption { 1521 display: block; 1522 padding: 0 4px 14px; 1523 } 1524 .compare-table tbody tr { 1525 background: #FFFCF7; 1526 border: 2.5px solid rgba(45, 125, 125, 0.2); 1527 border-radius: 14px; 1528 box-shadow: 4px 4px 0px #4A9B9B; 1529 margin-bottom: 18px; 1530 overflow: hidden; 1531 } 1532 .compare-table tbody th[scope="row"] { 1533 background: var(--accent-primary); 1534 color: white; 1535 font-weight: 700; 1536 max-width: none; 1537 border-bottom: none; 1538 padding: 12px 16px; 1539 } 1540 .compare-table tbody tr.compare-total-row { 1541 border-color: rgba(61, 50, 41, 0.3); 1542 } 1543 .compare-table td { 1544 display: flex; 1545 justify-content: space-between; 1546 gap: 12px; 1547 text-align: left; 1548 border-bottom: 1px solid rgba(45, 125, 125, 0.08); 1549 } 1550 .compare-table td::before { 1551 content: attr(data-label); 1552 font-weight: 700; 1553 color: var(--text-primary); 1554 flex-shrink: 0; 1555 } 1556 .compare-table .compare-total-row th, 1557 .compare-table .compare-total-row td { 1558 border-top: none; 1559 } 1560 .compare-table .compare-best-col { 1561 border-left: none; 1562 border-right: none; 1563 } 1564 } 1565 1566 /* Rating words + detail lines inside chart cells */ 1567 .compare-rating { 1568 display: block; 1569 font-weight: 800; 1570 font-size: 1.05rem; 1571 letter-spacing: 0.02em; 1572 } 1573 1574 .rating-good { color: #1E7A52; } 1575 .rating-mid { color: #8A6410; } 1576 .rating-warn { color: #B3552E; } 1577 .rating-bad { color: #B02E23; } 1578 1579 .compare-cell-detail { 1580 display: block; 1581 margin-top: 8px; 1582 font-size: 0.88rem; 1583 font-weight: 400; 1584 color: var(--text-secondary); 1585 line-height: 1.5; 1586 } 1587 1588 .compare-src { 1589 display: inline; 1590 margin-left: 4px; 1591 padding: 0; 1592 border: none; 1593 background: transparent; 1594 color: var(--accent-primary); 1595 font: inherit; 1596 font-size: 0.82rem; 1597 font-weight: 600; 1598 text-decoration: underline; 1599 cursor: pointer; 1600 white-space: nowrap; 1601 } 1602 1603 .compare-src:hover { color: #236060; } 1604 1605 /* Chart source links sit on their own centered line below the cell/bullet text */ 1606 .compare-table .compare-src { display: block; margin: 4px auto 0; } 1607 1608 /* Hero footnote superscript: plain footnote look in the surrounding text color */ 1609 .hero-subtitle sup .compare-src { font-size: 0.75em; margin-left: 2px; color: inherit; text-decoration: none; } 1610 .hero-subtitle sup .compare-src:hover { color: inherit; } 1611 1612 .compare-bullets { 1613 list-style: disc; 1614 margin: 0; 1615 padding-left: 18px; 1616 text-align: left; 1617 font-size: 0.88rem; 1618 font-weight: 400; 1619 color: var(--text-secondary); 1620 line-height: 1.5; 1621 display: grid; 1622 gap: 6px; 1623 } 1624 1625 .compare-bullets li::marker { color: var(--accent-primary); } 1626 1627 /* Source popup cards (re-parented to <body> at init) */ 1628 .compare-pop { 1629 display: none; 1630 position: absolute; 1631 z-index: 2100; 1632 width: 320px; 1633 max-width: calc(100vw - 24px); 1634 background: var(--bg-primary); 1635 border: 2.5px solid rgba(45, 125, 125, 0.15); 1636 border-radius: 8px; 1637 padding: 16px 18px; 1638 box-shadow: 4px 4px 0px #4A9B9B; 1639 text-align: left; 1640 animation: modalFadeIn 0.2s ease; 1641 } 1642 1643 .compare-pop.show { display: block; } 1644 1645 .compare-pop-title { 1646 font-size: 0.95rem; 1647 font-weight: 700; 1648 color: var(--text-primary); 1649 margin: 0 0 6px; 1650 } 1651 1652 .compare-pop-body { 1653 font-size: 0.85rem; 1654 color: var(--text-secondary); 1655 line-height: 1.55; 1656 margin: 0; 1657 } 1658 1659 .compare-pop-link { 1660 display: inline-block; 1661 margin-top: 8px; 1662 font-size: 0.85rem; 1663 font-weight: 600; 1664 color: var(--accent-primary); 1665 text-decoration: underline; 1666 } 1667 1668 .compare-pop-link:hover { color: #236060; } 1669 1670 .compare-pop-close { 1671 position: absolute; 1672 top: 6px; 1673 right: 10px; 1674 padding: 4px; 1675 background: none; 1676 border: none; 1677 font-size: 1.25rem; 1678 line-height: 1; 1679 color: var(--text-secondary); 1680 cursor: pointer; 1681 } 1682 1683 .compare-pop-close:hover { color: var(--text-primary); } 1684 1685 .compare-pop-bullets { 1686 list-style: disc; 1687 margin: 0; 1688 padding-left: 18px; 1689 font-size: 0.85rem; 1690 color: var(--text-secondary); 1691 line-height: 1.55; 1692 display: grid; 1693 gap: 6px; 1694 } 1695 1696 .compare-pop-bullets li::marker { color: var(--accent-primary); } 1697 1698 /* Wide variant for the guarantee card */ 1699 .compare-pop-wide { 1700 width: 720px; 1701 padding: 24px 26px; 1702 } 1703 1704 .guarantee-pop-heading { 1705 font-size: 1.4rem; 1706 color: var(--text-primary); 1707 text-align: center; 1708 margin: 0 0 12px; 1709 } 1710 1711 /* Stacked mobile cells: label above badge/detail instead of the flex row used by the old one-line cells */ 1712 @media (max-width: 768px) { 1713 .compare-table td { display: block; } 1714 .compare-table td::before { display: block; margin-bottom: 6px; } 1715 } 1716 1717 /* Build Your Site Guarantee card (opened from the chart'
1717s Failure Risk source link) */ 1718 .guarantee-modal-note { 1719 text-align: center; 1720 color: var(--text-secondary); 1721 line-height: 1.6; 1722 margin-bottom: 20px; 1723 } 1724 1725 .guarantee-modal-grid { 1726 display: grid; 1727 grid-template-columns: 1fr 1fr; 1728 gap: 16px; 1729 margin-bottom: 24px; 1730 } 1731 1732 @media (max-width: 640px) { 1733 .guarantee-modal-grid { grid-template-columns: 1fr; } 1734 } 1735 1736 .guarantee-modal-card { 1737 background: var(--bg-secondary); 1738 border: 2.5px solid rgba(45, 125, 125, 0.15); 1739 border-radius: 8px; 1740 padding: 18px 20px; 1741 box-shadow: 4px 4px 0px #4A9B9B; 1742 } 1743 1744 .guarantee-modal-card h3 { 1745 color: var(--text-primary); 1746 font-size: 1.05rem; 1747 margin-bottom: 10px; 1748 } 1749 1750 .guarantee-modal-card ul { 1751 list-style: none; 1752 margin: 0; 1753 padding: 0; 1754 } 1755 1756 .guarantee-modal-card li { 1757 color: var(--text-secondary); 1758 line-height: 1.6; 1759 margin-bottom: 6px; 1760 padding-left: 24px; 1761 position: relative; 1762 } 1763 1764 .guarantee-modal-card li::before { 1765 content: '\2713'; 1766 position: absolute; 1767 left: 0; 1768 color: var(--accent-primary); 1769 font-weight: 700; 1770 } 1771 1772 .guarantee-modal-cta-row { text-align: center; } 1773 1774 .guarantee-modal-cta { 1775 display: inline-block; 1776 padding: 12px 26px; 1777 background: var(--accent-primary); 1778 color: white; 1779 border: none; 1780 border-radius: 8px; 1781 font-weight: 700; 1782 font-size: 1rem; 1783 cursor: pointer; 1784 box-shadow: 3px 3px 0px #236060; 1785 transition: transform 0.15s ease, box-shadow 0.15s ease; 1786 } 1787 1788 .guarantee-modal-cta:hover { 1789 transform: translate(-1px, -1px); 1790 box-shadow: 4px 4px 0px #236060; 1791 } 1792 1793 .compare-panel-grid { 1794 display: grid; 1795 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 1796 gap: 32px; 1797 max-width: 1000px; 1798 margin: 50px auto 0; 1799 } 1800 1801 .compare-panel { 1802 background: #FFFCF7; 1803 border-radius: 16px; 1804 padding: 32px; 1805 border: 2.5px solid rgba(45, 125, 125, 0.15); 1806 } 1807 1808 .compare-panel-us { 1809 box-shadow: 5px 5px 0px #4A9B9B; 1810 } 1811 1812 .compare-panel-them { 1813 box-shadow: 5px 5px 0px rgba(107, 93, 80, 0.35); 1814 opacity: 0.92; 1815 } 1816 1817 .compare-check-list, 1818 .compare-x-list { 1819 list-style: none; 1820 padding: 0; 1821 margin: 0; 1822 } 1823 1824 .compare-check-list li, 1825 .compare-x-list li { 1826 color: var(--text-secondary); 1827 line-height: 1.7; 1828 margin-bottom: 8px; 1829 padding-left: 26px; 1830 position: relative; 1831 } 1832 1833 .compare-check-list li::before { 1834 content: '\2713'; 1835 position: absolute; 1836 left: 0; 1837 color: var(--accent-primary); 1838 font-weight: 700; 1839 } 1840 1841 .compare-x-list li::before { 1842 content: '\2717'; 1843 position: absolute; 1844 left: 0; 1845 color: #b3552e; 1846 font-weight: 700; 1847 } 1848 1849 .compare-callout { 1850 max-width: 900px; 1851 margin: 50px auto 0; 1852 } 1853 1854 .compare-quote { 1855 max-width: 700px; 1856 margin: 0 auto; 1857 padding: 18px 24px; 1858 border-left: 4px solid var(--accent-primary); 1859 background: rgba(45, 125, 125, 0.06); 1860 border-radius: 0 12px 12px 0; 1861 font-size: 1.15rem; 1862 font-style: italic; 1863 color: var(--text-primary); 1864 line-height: 1.6; 1865 } 1866 </style> 1867 <div class="latest-articles-section" style="margin-bottom: 80px;"> 1868 <h2 style="font-size: 2.5rem; font-weight: 800; margin-bottom: 20px; text-align: center; color: var(--text-primary);">Latest Articles</h2> 1869 <p style="font-size: 1.2rem; text-align: center; color: var(--text-secondary); margin-bottom: 48px;">Insights and guides to help you build your online presence</p> 1870 1871 <div class="blog-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 32px; max-width: 1200px; margin: 0 auto;"> 1872 <!-- Article: Small-Business Website Launch Checklist --> 1873 <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);"> 1874 <a href="/blog/launch-promote-small-business-website.html" style="text-decoration: none; color: inherit;"> 1875 <div style="aspect-ratio: 16/9; overflow: hidden;"> 1876 <img src="/images/blog/small-business.webp" alt="Small-business owner preparing a website for launch and promotion" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy"> 1877 </div> 1878 </a> 1879 <div style="padding: 24px;"> 1880 <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">From Launch to Discovery: A Practical Small-Business Website Checklist</h3> 1881 <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Plan the essentials, explore a <a href="https://freewebdesignservice.com/" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">free web design service</a>, and learn where to <a href="https://showcaseyourwebsite.com/" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">showcase your website</a> after launch.</p> 1882 <a href="/blog/launch-promote-small-business-website.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;"> 1883 Read more
1884 <span style="transition: transform 0.2s ease;">â</span> 1885 </a> 1886 </div> 1887 </article> 1888 1889 <!-- Article: Best Free Contractor Calculators --> 1890 <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);"> 1891 <a href="/blog/best-free-contractor-calculators.html" style="text-decoration: none; color: inherit;"> 1892 <div style="aspect-ratio: 16/9; overflow: hidden;"> 1893 <img src="https://images.unsplash.com/photo-1541888946425-d81bb19240f5?w=800&q=80" alt="Free contractor calculators and tools featured on Vibe Otter" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy"> 1894 </div> 1895 </a> 1896 <div style="padding: 24px;"> 1897 <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Best Free Calculators & Tools for Contractors (2026)</h3> 1898 <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Cover every job with these <a href="https://contractorcalcs.pro" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">free calculators and tools for contractors</a> â electrical, materials, estimating, structural, and business documents.</p> 1899 <a href="/blog/best-free-contractor-calculators.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;"> 1900 Read more 1901 <span style="transition: transform 0.2s ease;">â</span> 1902 </a> 1903 </div> 1904 </article> 1905 1906 <!-- Article 0: Soul India & Taj Mahal Seattle --> 1907 <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);"> 1908 <a href="/blog/soul-india-seattle-indian-culture.html" style="text-decoration: none; color: inherit;"> 1909 <div style="aspect-ratio: 16/9; overflow: hidden;"> 1910 <img src="https://images.unsplash.com/photo-1524492412937-b28074a5d7da?w=800&q=80" alt="Soul India Seattle and Taj Mahal Seattle featured on Vibe Otter" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy"> 1911 </div> 1912 </a> 1913 <div style="padding: 24px;"> 1914 <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Soul India Seattle & Taj Mahal Seattle: Indian Culture in the Pacific Northwest</h3> 1915 <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">How Soul India Seattle and Taj Mahal Seattle share authentic Indian culture â from <a href="https://soulindiaseattle.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">Indian cultural tours</a> to <a href="https://tajmahalseattle.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">Indian clothing and jewelry at Pike Place Market</a>.</p> 1916 <a href="/blog/soul-india-seattle-indian-culture.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;"> 1917 Read more
1918 <span style="transition: transform 0.2s ease;">â</span> 1919 </a> 1920 </div> 1921 </article> 1922 1923 <!-- Article 1: QuotesForMoms Featured Site --> 1924 <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);"> 1925 <a href="/blog/quotesformoms-inspirational-mom-quotes-website.html" style="text-decoration: none; color: inherit;"> 1926 <div style="aspect-ratio: 16/9; overflow: hidden;"> 1927 <img src="https://images.unsplash.com/photo-1491013516836-7db643ee125a?w=800&q=80" alt="Inspirational mom quotes website built on Vibe Otter" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy"> 1928 </div> 1929 </a> 1930 <div style="padding: 24px;"> 1931 <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">QuotesForMoms.com: Inspirational Mom Quotes for Every Kind of Mother</h3> 1932 <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">How QuotesForMoms.com became a go-to home for <a href="https://quotesformoms.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">inspirational mom quotes</a>, funny mom quotes, and encouraging words â built on Vibe Otter.</p> 1933 <a href="/blog/quotesformoms-inspirational-mom-quotes-website.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;"> 1934 Read more 1935 <span style="transition: transform 0.2s ease;">â</span> 1936 </a> 1937 </div> 1938 </article> 1939 1940 <!-- Article 2: Two Passports One Planet --> 1941 <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);"> 1942 <a href="https://twopassportsoneplanet.com" target="_blank" rel="noopener" style="text-decoration: none; color: inherit;"> 1943 <div style="aspect-ratio: 16/9; overflow: hidden;"> 1944 <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=800&q=80" alt="Two Passports One Planet travel inspiration featured on Vibe Otter" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy"> 1945 </div> 1946 </a> 1947 <div style="padding: 24px;"> 1948 <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Two Passports One Planet: Travel Inspiration for Global Adventures</h3> 1949 <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Browse <a href="https://twopassportsoneplanet.com/unique-places-to-visit-in-nairobi.html" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">unique places to visit in Nairobi</a> and practical travel inspiration from Two Passports One Planet.</p> 1950 <a href="https://twopassportsoneplanet.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;"> 1951 Explore travel guides
1952 <span style="transition: transform 0.2s ease;">â</span> 1953 </a> 1954 </div> 1955 </article> 1956 1957 <!-- Article 3: Tree Removal Cost Calculators --> 1958 <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);"> 1959 <a href="/blog/best-tree-removal-calculators.html" style="text-decoration: none; color: inherit;"> 1960 <div style="aspect-ratio: 16/9; overflow: hidden;"> 1961 <img src="https://images.unsplash.com/photo-1473448912268-2022ce9509d8?w=800&q=80" alt="Tree removal cost calculator resources featured on Vibe Otter" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy"> 1962 </div> 1963 </a> 1964 <div style="padding: 24px;"> 1965 <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Best Tree Removal Cost Calculators & Resources (2026)</h3> 1966 <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Get a location-adjusted estimate with this <a href="https://treeremovalcostcalculator.app" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">tree removal cost calculator</a> before your next tree project.</p> 1967 <a href="/blog/best-tree-removal-calculators.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;"> 1968 Read more 1969 <span style="transition: transform 0.2s ease;">â</span> 1970 </a> 1971 </div> 1972 </article> 1973 1974 <!-- Article 4: Small Business Tool Comparisons --> 1975 <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);"> 1976 <a href="/blog/best-small-business-tool-comparisons.html" style="text-decoration: none; color: inherit;"> 1977 <div style="aspect-ratio: 16/9; overflow: hidden;"> 1978 <img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=800&q=80" alt="Business owners comparing tools and software for their small business" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy"> 1979 </div> 1980 </a> 1981 <div style="padding: 24px;"> 1982 <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">How to Pick the Right Tools for Your Business (Without the Headache)</h3> 1983 <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">One site compares everything â payments, accounting, POS, banking, and websites â so you don't have to. Start with these <a href="https://runsmartguide.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">small business software reviews and comparisons</a>.</p> 1984 <a href="/blog/best-small-business-tool-comparisons.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;"> 1985 Read more
1986 <span style="transition: transform 0.2s ease;">â</span> 1987 </a> 1988 </div> 1989 </article> 1990 1991 <!-- Article 5: Stretching & Workout Resources --> 1992 <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);"> 1993 <a href="/blog/best-stretching-workout-resources.html" style="text-decoration: none; color: inherit;"> 1994 <div style="aspect-ratio: 16/9; overflow: hidden;"> 1995 <img src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=800&q=80" alt="Best free stretching and workout resources online" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy"> 1996 </div> 1997 </a> 1998 <div style="padding: 24px;"> 1999 <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Best Free Stretching & Workout Resources Online (2026)</h3> 2000 <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Explore <a href="https://stretchworkouts.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">free stretching and workout resources</a>: dumbbell workouts, stretching routines, recovery programs, and interactive anatomy tools.</p> 2001 <a href="/blog/best-stretching-workout-resources.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;"> 2002 Read more 2003 <span style="transition: transform 0.2s ease;">â</span> 2004 </a> 2005 </div> 2006 </article> 2007 2008 <!-- Article 6: Bible Verses Faith Guide --> 2009 <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);"> 2010 <a href="/blog/bible-verses-faith-guide.html" style="text-decoration: none; color: inherit;"> 2011 <div style="aspect-ratio: 16/9; overflow: hidden;"> 2012 <img src="https://images.unsplash.com/photo-1504052434569-70ad5836ab65?w=800&q=80" alt="Bible verses for every season of life" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy"> 2013 </div> 2014 </a> 2015 <div style="padding: 24px;"> 2016 <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Best Bible Verses for Every Season of Life (2026)</h3> 2017 <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Curated scripture for marriage, courage, and heaven â plus a meaningful <a href="https://thankgoditsmonday.org/thanksgiving.html" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">prayer of thanksgiving</a> for meals, gatherings, and daily gratitude.</p> 2018 <a href="/blog/bible-verses-faith-guide.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;"> 2019 Read more 2020 <span style="transition: transform 0.2s ease;">â</span> 2021 </a> 2022 </div> 2023 </article> 2024 2025 <!-- Article: Puppy Weight Predictors --> 2026 <article class="blog-card" style="background: #FFFCF7; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 0px #4A9B9B; border: 2.5px solid rgba(45, 125, 125, 0.15); transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);"> 2027 <a href="/blog/best-puppy-weight-predictors.html" style="text-decoration: none; color: inherit;"> 2028 <div style="aspect-ratio: 16/9; overflow: hidden;"> 2029 <img src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=800&q=80" alt="Puppy weight calculator and growth tools featured on Vibe Otter" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;" loading="lazy"> 2030 </div> 2031 </a> 2032 <div style="padding: 24px;"> 2033 <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); line-height: 1.3;">Best Puppy Weight Predictors & Growth Tools (2026)</h3> 2034 <p style="color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6;">Estimate your dog's adult size with this <a href="https://puppyweightpredictor.com" target="_blank" rel="noopener" style="color: var(--accent-primary); font-weight: 600; text-decoration: none;">puppy weight calculator</a> â plus growth charts and breed tools.</p> 2035 <a href="/blog/best-puppy-weight-predictors.html" style="color: var(--accent-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;"> 2036 Read more
2037 <span style="transition: transform 0.2s ease;">â</span> 2038 </a> 2039 </div> 2040 </article> 2041 2042 </div> 2043 2044 <div style="text-align: center; margin-top: 48px;"> 2045 <a href="/blog" style="display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: var(--accent-primary); color: white; text-decoration: none; border-radius: 10px; font-weight: 700; font-size: 1.1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 6px 20px rgba(45, 125, 125, 0.25);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 24px rgba(45, 125, 125, 0.35)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 6px 20px rgba(45, 125, 125, 0.25)';"> 2046 View All Articles 2047 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 2048 <line x1="5" y1="12" x2="19" y2="12"></line> 2049 <polyline points="12 5 19 12 12 19"></polyline> 2050 </svg> 2051 </a> 2052 </div> 2053 </div> 2054 </div> 2055 </section> 2056 2057 2058 <footer class="footer"> 2059 <div class="footer-container"> 2060 <div class="footer-grid"> 2061 <div class="footer-column"> 2062 <h4>Company</h4> 2063 <a href="/about.html">About</a> 2064 <a href="mailto:[email protected]">Careers</a> 2065 <a href="/blog">Blog</a> 2066 <a href="mailto:[email protected]">Press</a> 2067 </div> 2068 <div class="footer-column"> 2069 <h4>Product</h4> 2070 <a href="#discover">Discover</a> 2071 <a href="/pricing.html">Pricing</a> 2072 <a href="/apps.html">Apps</a> 2073 <a href="#support">Support</a> 2074 </div> 2075 <div class="footer-column"> 2076 <h4>Legal</h4> 2077 <a href="/privacy.html">Privacy</a> 2078 <a href="/terms.html">Terms</a> 2079 </div> 2080 </div> 2081 <div class="footer-bottom"> 2082 <a href="/" class="footer-logo" style="text-decoration: none; color: inherit;"> 2083 <img src="images/otter-relaxed.svg" alt="Vibe Otter footer logo - website builder platform for professional websites" class="logo-emoji" width="32" height="32"> 2084 <span>© 2025 VibeOtter</span> 2085 </a> 2086 <div class="social-links"> 2087 <a href="#" aria-label="X">ð</a> 2088 <a href="#" aria-label="GitHub">GitHub</a> 2089 <a href="#" aria-label="LinkedIn">LinkedIn</a> 2090 </div> 2091 <div data-vo-lang-toggle></div> 2092 </div> 2093 </div> 2094 </footer> 2095 2096 <!-- Support Modal --> 2097 <div id="supportModal" class="modal vo-support-modal"></div> 2098 <button type="button" id="vo-support-lite-btn" data-vo-support-modal aria-label="Open support options"> 2099 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> 2100 <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/> 2101 </svg> 2102 </button> 2103 2104 <!-- Authentication Modal --> 2105 <div id="authModal" class="modal"> 2106 <div class="modal-content auth-modal-content"> 2107 <span class="modal-close" onclick="document.getElementById('authModal').classList.remove('show'); document.body.style.overflow='';">×</span> 2108 2109 <!-- Login Form --> 2110 <div id="loginForm" class="auth-form"> 2111 <h2>Welcome Back</h2> 2112 <p class="auth-subtitle">Sign in to continue building amazing things</p> 2113 2114 <form id="loginFormElement"> 2115 <div class="form-group"> 2116 <input type="email" id="loginEmail" class="form-input" placeholder="Email address" required> 2117 </div> 2118 <div class="form-group"> 2119 <input type="password" id="loginPassword" class="form-input" placeholder="Password" required> 2120 </div> 2121 <button type="submit" class="btn-primary auth-submit" data-analytics-event="login">Sign In</button> 2122 </form> 2123 2124 <div class="auth-divider">
2125 <span>or</span> 2126 </div> 2127 2128 <button class="btn-google" id="googleSignInBtn"> 2129 <svg width="20" height="20" viewBox="0 0 24 24"> 2130 <path fill="#4285F4" d="M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"/> 2131 <path fill="#34A853" d="M12.255 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96h-3.98v3.09C3.515 21.3 7.565 24 12.255 24z"/> 2132 <path fill="#FBBC05" d="M5.525 14.29c-.25-.72-.38-1.49-.38-2.29s.14-1.57.38-2.29V6.62h-3.98a11.86 11.86 0 000 10.76l3.98-3.09z"/> 2133 <path fill="#EA4335" d="M12.255 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C18.205 1.19 15.495 0 12.255 0c-4.69 0-8.74 2.7-10.71 6.62l3.98 3.09c.95-2.85 3.6-4.96 6.73-4.96z"/> 2134 </svg> 2135 Continue with Google 2136 </button> 2137 2138 <p class="auth-switch"> 2139 Don't have an account? 2140 <a href="#" onclick="switchToSignup(); return false;">Sign up</a> 2141 </p> 2142 </div> 2143 2144 <!-- Signup Form --> 2145 <div id="signupForm" class="auth-form" style="display: none;"> 2146 <h2>Create Your Account</h2> 2147 <p class="auth-subtitle">Start building amazing websites today</p> 2148 2149 <form id="signupFormElement"> 2150 <div class="form-group"> 2151 <input type="email" id="signupEmail" class="form-input" placeholder="Email address" required> 2152 </div> 2153 <div class="form-group"> 2154 <input type="password" id="signupPassword" class="form-input" placeholder="Password (6+ characters)" required> 2155 </div> 2156 <div class="form-group"> 2157 <input type="password" id="signupPasswordConfirm" class="form-input" placeholder="Confirm password" required> 2158 </div> 2159 <button type="submit" class="btn-primary auth-submit" data-analytics-event="signup">Create Account</button> 2160 </form> 2161 2162 <div class="auth-divider"> 2163 <span>or</span> 2164 </div> 2165 2166 <button class="btn-google" id="googleSignUpBtn"> 2167 <svg width="20" height="20" viewBox="0 0 24 24"> 2168 <path fill="#4285F4" d="M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"/> 2169 <path fill="#34A853" d="M12.255 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96h-3.98v3.09C3.515 21.3 7.565 24 12.255 24z"/> 2170 <path fill="#FBBC05" d="M5.525 14.29c-.25-.72-.38-1.49-.38-2.29s.14-1.57.38-2.29V6.62h-3.98a11.86 11.86 0 000 10.76l3.98-3.09z"/> 2171 <path fill="#EA4335" d="M12.255 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C18.205 1.19 15.495 0 12.255 0c-4.69 0-8.74 2.7-10.71 6.62l3.98 3.09c.95-2.85 3.6-4.96 6.73-4.96z"/> 2172 </svg> 2173 Continue with Google 2174 </button> 2175 2176 <p class="auth-switch"> 2177 Already have an account? 2178 <a href="#" onclick="switchToLogin(); return false;">Sign in</a> 2179 </p> 2180 2181 <div class="designer-signup-option"> 2182 <button class="designer-signup-link" onclick="handleDesignerSignup(); return false;">Designer Sign Up</button> 2183 </div> 2184 </div> 2185 </div> 2186 </div> 2187 2188 <!-- FAQ Functionality --> 2189
2189<script> 2190 function toggleFaq(button) { 2191 const answer = button.nextElementSibling; 2192 const icon = button.querySelector('.faq-icon'); 2193 const isOpen = button.getAttribute('aria-expanded') === 'true'; 2194 2195 if (isOpen) { 2196 answer.style.maxHeight = '0'; 2197 button.setAttribute('aria-expanded', 'false'); 2198 icon.style.transform = 'rotate(0deg)'; 2199 } else { 2200 answer.style.maxHeight = answer.scrollHeight + 'px'; 2201 button.setAttribute('aria-expanded', 'true'); 2202 icon.style.transform = 'rotate(180deg)'; 2203 } 2204 } 2205 2206 // Comparison-chart source popups: chips with data-pop open the matching 2207 // .compare-pop card anchored under the chip. Cards are re-parented to 2208 // <body> so position:absolute uses page coordinates (the compare section 2209 // has positioned ancestors that would otherwise offset them). 2210 (function() { 2211 var openPop = null; 2212 document.querySelectorAll('.compare-pop').forEach(function(pop) { document.body.appendChild(pop); }); 2213 function closePop() { if (openPop) { openPop.classList.remove('show'); openPop = null; } } 2214 document.querySelectorAll('.compare-src[data-pop]').forEach(function(btn) { 2215 btn.addEventListener('click', function(e) { 2216 e.stopPropagation(); 2217 var pop = document.getElementById(btn.getAttribute('data-pop')); 2218 if (!pop) return; 2219 if (openPop === pop) { closePop(); return; } 2220 closePop(); 2221 pop.classList.add('show'); 2222 var r = btn.getBoundingClientRect(); 2223 var left = r.left + r.width / 2 - pop.offsetWidth / 2; 2224 left = Math.max(12, Math.min(left, window.innerWidth - pop.offsetWidth - 12)); 2225 pop.style.left = (left + window.scrollX) + 'px'; 2226 pop.style.top = (r.bottom + 10 + window.scrollY) + 'px'; 2227 openPop = pop; 2228 }); 2229 }); 2230 document.querySelectorAll('.compare-pop-close').forEach(function(btn) { 2231 btn.addEventListener('click', function(e) { e.stopPropagation(); closePop(); }); 2232 }); 2233 document.addEventListener('click', function(e) { if (openPop && !openPop.contains(e.target)) closePop(); }); 2234 document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closePop(); }); 2235 })(); 2236 2237 // Comparison-section disclosures (same pattern as the paywall) 2238 function toggleFeature(button) { 2239 const item = button.closest('.feature-expandable'); 2240 if (!item) return; 2241 const isExpanded = item.classList.toggle('expanded'); 2242 button.setAttribute('aria-expanded', isExpanded ? 'true' : 'false'); 2243 } 2244 </script>
2244 2245 2246
2246<script src="js/config.js?v=1790948744" defer></script>
2246 2247
2247<script> 2248 (function() { 2249 var authLoadPromise = null; 2250 var authScriptVersion = '?v=1790948744'; 2251 2252 function loadScript(src) { 2253 return new Promise(function(resolve, reject) { 2254 var target = new URL(src, window.location.href).href.split('?')[0]; 2255 var scripts = document.querySelectorAll('script[src]'); 2256 for (var i = 0; i < scripts.length; i++) { 2257 if (scripts[i].src.split('?')[0] === target) { 2258 if (scripts[i].dataset.loaded === 'true') { 2259 resolve(); 2260 } else { 2261 scripts[i].addEventListener('load', resolve, { once: true }); 2262 scripts[i].addEventListener('error', reject, { once: true }); 2263 } 2264 return; 2265 } 2266 } 2267 2268 var script = document.createElement('script'); 2269 script.src = src; 2270 script.async = true; 2271 script.onload = function() { 2272 script.dataset.loaded = 'true'; 2273 resolve(); 2274 }; 2275 script.onerror = reject; 2276 document.head.appendChild(script); 2277 }); 2278 } 2279 2280 function waitForInitialAuth() { 2281 return new Promise(function(resolve) { 2282 if (!window.firebaseAuth || typeof window.firebaseAuth.onAuthStateChanged !== 'function') { 2283 resolve(); 2284 return; 2285 } 2286 2287 var settled = false; 2288 var timeout = setTimeout(done, 1500); 2289 var unsubscribe = window.firebaseAuth.onAuthStateChanged(done); 2290 2291 function done() { 2292 if (settled) return; 2293 settled = true; 2294 clearTimeout(timeout); 2295 if (typeof unsubscribe === 'function') unsubscribe(); 2296 resolve(); 2297 } 2298 }); 2299 } 2300 2301 function loadVibeOtterAuth() { 2302 if (window.firebaseAuth && typeof window.initializeAuth === 'function') { 2303 window.initializeAuth(); 2304 return waitForInitialAuth(); 2305 } 2306 2307 if (!authLoadPromise) { 2308 authLoadPromise = loadScript('https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js') 2309 .then(function() { 2310 return loadScript('https://www.gstatic.com/firebasejs/10.7.1/firebase-auth-compat.js'); 2311 }) 2312 .then(function() { 2313 return loadScript('/js/firebase-config.js' + authScriptVersion); 2314 }) 2315 .then(function() { 2316 return loadScript('/js/auth.js' + authScriptVersion); 2317 }) 2318 .then(function() { 2319 if (typeof window.initializeAuth === 'function') { 2320 window.initializeAuth(); 2321 } 2322 return waitForInitialAuth(); 2323 }) 2324 .catch(function(error) { 2325 authLoadPromise = null; 2326 throw error; 2327 }); 2328 } 2329 2330 return authLoadPromise; 2331 } 2332 2333 // Signed-in hint left by auth.js/dashboard: relabel the static Login buttons 2334 // without loading Firebase. Stale hint self-heals â the click still loads 2335 // auth, which shows the login modal and clears the hint. 2336 if (localStorage.getItem('vibeotter_authed') === '1' && window.voI18n) { 2337 document.querySelectorAll('.btn-secondary, .mobile-login').forEach(function(btn) { 2338 btn.textContent = window.voI18n.t('auth.btn.dashboard'); 2339 }); 2340 } 2341 2342 document.addEventListener('click', function(e) { 2343 var loginButton = e.target && e.target.closest && e.target.closest('.btn-secondary, .mobile-login'); 2344 if (!loginButton || window.firebaseAuth) return; 2345 2346 e.preventDefault(); 2347 e.stopImmediatePropagation(); 2348 loadVibeOtterAuth().then(function() { 2349 // Already signed in: go to the dashboard, same as the eager-auth pages 2350 if (window.firebaseAuth && window.firebaseAuth.currentUser) { 2351 window.location.href = '/dashboard.html'; 2352 return; 2353 } 2354 if (typeof window.handleLoginButtonClick === 'function') { 2355 window.handleLoginButtonClick(); 2356 } 2357 }); 2358 }, true); 2359 2360 document.addEventListener('submit', function(e) { 2361 var form = e.target; 2362 if (!form || form.id !== 'otterChatForm' || window.firebaseAuth || form.dataset.voAuthReady === 'true') return; 2363 2364 e.preventDefault(); 2365 e.stopImmediatePropagation(); 2366 loadVibeOtterAuth().then(function() { 2367 form.dataset.voAuthReady = 'true'; 2368 if (typeof form.requestSubmit === 'function') { 2369 form.requestSubmit(); 2370 } else { 2371 form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })); 2372 } 2373 setTimeout(function() { 2374 delete form.dataset.voAuthReady; 2375 }, 0); 2376 }); 2377 }, true); 2378 2379 window.loadVibeOtterAuth = loadVibeOtterAuth; 2380 })(); 2381 </script>
2381 2382
2382<script src="js/otter-input-bar.js?v=1790948744" defer></script>
2382 2383
2383<script src="js/app.js?v=1790948744" defer></script>
2383 2384
2384<script src="js/analytics-tracking.js?v=1790948744" defer></script>
2384 2385
2385<script src="js/showcase-sites.js?v=1790948744" defer></script>
2385 2386
2386<script src="js/showcase-filter.js?v=1790948744" defer></script>
2386 2387 2388
2388<script> 2389// GA4 Event Tracking 2390(function() { 2391 if (typeof gtag === 'undefined') return; 2392 2393 // Track all button clicks 2394 document.addEventListener('click', function(e) { 2395 if (e.target.tagName === 'BUTTON' || e.target.closest('button')) { 2396 const btn = e.target.tagName === 'BUTTON' ? e.target : e.target.closest('button'); 2397 gtag('event', 'button_click', { 2398 'button_text': btn.textContent.trim(), 2399 'button_class': btn.className 2400 }); 2401 } 2402 2403 // Track link clicks 2404 if (e.target.tagName === 'A' || e.target.closest('a')) { 2405 const link = e.target.tagName === 'A' ? e.target : e.target.closest('a'); 2406 const href = link.href; 2407 2408 if (href.startsWith('tel:')) { 2409 gtag('event', 'phone_click', {'phone_number': href.replace('tel:', '')}); 2410 } else if (href.startsWith('mailto:')) { 2411 gtag('event', 'email_click', {'email': href.replace('mailto:', '')}); 2412 } else if (href.includes('http') && !href.includes('vibeotter.com')) { 2413 gtag('event', 'external_link_click', {'url': href}); 2414 } 2415 } 2416 }); 2417 2418 // Track scroll depth 2419 let scrollDepths = {25: false, 50: false, 75: false, 100: false}; 2420 window.addEventListener('scroll', function() { 2421 const scrollPercent = (window.scrollY + window.innerHeight) / document.documentElement.scrollHeight * 100; 2422 2423 Object.keys(scrollDepths).forEach(depth => { 2424 if (scrollPercent >= depth && !scrollDepths[depth]) { 2425 scrollDepths[depth] = true; 2426 gtag('event', 'scroll_depth', {'depth': depth + '%'}); 2427 } 2428 }); 2429 }); 2430})(); 2431</script>
vendor: 1 bytes, line 2431
2431
2432<script> 2433(function() { 2434 var supportLiteBtn = document.getElementById('vo-support-lite-btn'); 2435 if (supportLiteBtn) { 2436 supportLiteBtn.addEventListener('click', function(e) { 2437 if (window.VibeOtterSupportModal && typeof window.VibeOtterSupportModal.open === 'function') { 2438 window.VibeOtterSupportModal.open(e); 2439 } 2440 }); 2441 document.addEventListener('click', function(e) { 2442 if (e.target && e.target.closest && e.target.closest('[data-vo-chat-live]')) { 2443 supportLiteBtn.classList.add('vo-support-lite-hidden'); 2444 } 2445 }, true); 2446 } 2447 2448 var pitchText = { 2449 website: '', 2450 app: voT('marketing.home.mode.pitch.app'), 2451 presentation: voT('marketing.home.mode.pitch.presentation'), 2452 proposal: voT('marketing.home.mode.pitch.proposal'), 2453 ebook: voT('marketing.home.mode.pitch.ebook'), 2454 flyer: voT('marketing.home.mode.pitch.flyer') 2455 }; 2456 2457 var pitchEl = document.getElementById('modePitchText'); 2458 var moreBtn = document.getElementById('modeMoreBtn'); 2459 var moreOptions = document.getElementById('modeMoreOptions'); 2460 2461 // Set Website as the default active pill and clear any stored build mode 2462 // so storage always matches the pill shown on a fresh load (a leftover 2463 // 'app' from a prior apps.html visit would otherwise silently flip a 2464 // homepage-started build into app mode). 2465 var defaultBtn = document.querySelector('.mode-btn[data-mode="website"]'); 2466 if (defaultBtn) defaultBtn.classList.add('active'); 2467 sessionStorage.removeItem('vibeotter_build_mode'); 2468 2469 // More button toggles the expanded row 2470 moreBtn.addEventListener('click', function() { 2471 moreOptions.classList.toggle('open'); 2472 moreBtn.textContent = moreOptions.classList.contains('open') 2473 ? voT('marketing.home.mode.more_expanded') 2474 : voT('marketing.home.mode.more_collapsed'); 2475 }); 2476 2477 document.querySelectorAll('.mode-btn[data-mode]').forEach(function(btn) { 2478 btn.addEventListener('click', function() { 2479 document.querySelectorAll('.mode-btn[data-mode]').forEach(function(b) { b.classList.remove('active'); }); 2480 this.classList.add('active'); 2481 var mode = this.dataset.mode; 2482 2483 // Only website clears build mode; all others (including app) store it 2484 if (mode === 'website') { 2485 sessionStorage.removeItem('vibeotter_build_mode'); 2486 } else { 2487 sessionStorage.setItem('vibeotter_build_mode', mode); 2488 } 2489 2490 // Update input bar placeholders (app uses website mode) 2491 var inputBar = document.querySelector('#homepage-input-bar'); 2492 if (inputBar && inputBar.__otterInstance && inputBar.__otterInstance.setMode) { 2493 inputBar.__otterInstance.setMode(mode === 'app' ? 'website' : mode); 2494 } 2495 2496 2497 2498 // Update pitch text below pills 2499 pitchEl.style.opacity = '0'; 2500 setTimeout(function() { 2501 pitchEl.textContent = pitchText[mode] || ''; 2502 pitchEl.style.opacity = '1'; 2503 }, 150); 2504 }); 2505 }); 2506})(); 2507</script>
2507 2508
2508<script src="js/support-modal.js?v=support-hash-20260914" defer></script>
2508 2509</body> 2510</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.