<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Search Console Verification - UPDATE THESE CODES -->
<meta name="google-site-verification" content="YOUR_GOOGLE_VERIFICATION_CODE" />
<!-- Bing verification not needed - accepts Google Search Console verification -->
<meta name="yandex-verification" content="YOUR_YANDEX_VERIFICATION_CODE" />
<meta name="baidu-site-verification" content="YOUR_BAIDU_VERIFICATION_CODE" />
<meta name="naver-site-verification" content="YOUR_NAVER_VERIFICATION_CODE" />
    <script nonce="N0Nc3Cl0d0">window.__assetManifest__={"styles-index.css":"styles-index.ae3b2893.css","styles-pricing.css":"styles-pricing.d0d68aa0.css","styles-blog.css":"styles-blog.b60ae3d2.css","styles-subscribe.css":"styles-subscribe.f6b89e40.css","styles-product.css":"styles-product.7239164f.css","styles-about.css":"styles-about.feb9b284.css","styles-migrate.css":"styles-migrate.bdeaee19.css","styles-case-studies.css":"styles-case-studies.0a6b4d7e.css","styles-community.css":"styles-community.184bdd08.css","styles-workers-boilerplate.css":"styles-workers-boilerplate.be676834.css","styles-clodo-framework-guide.css":"styles-clodo-framework-guide.f5547220.css","styles-cloudflare-workers-guide.css":"styles-cloudflare-workers-guide.5fbc1ff3.css","styles-cloudflare-workers-development-guide.css":"styles-cloudflare-workers-development-guide.aec64b1e.css","styles-cloudflare-top-10-saas-edge-computing-workers-case-study-docs.css":"styles-cloudflare-top-10-saas-edge-computing-workers-case-study-docs.f880606e.css","styles-saas-product-startups-cloudflare-case-studies.css":"styles-saas-product-startups-cloudflare-case-studies.e2ca4d67.css","styles-cloudflare-framework.css":"styles-cloudflare-framework.a2a16625.css","styles-index-deferred.css":"styles-index-deferred.de46a29b.css","styles.css":"styles.617ad8d4.css","js/analytics.js":"js/analytics.ca95c2b5.js","js/announcements-manager.js":"js/announcements-manager.de246c62.js","js/component-nav.js":"js/component-nav.69034e89.js","js/components/community-section.js":"js/components/community-section.b3989d90.js","js/config/features.js":"js/config/features.377e2a86.js","js/core/accessibility.js":"js/core/accessibility.6cb25723.js","js/core/app.js":"js/core/app.bb756733.js","js/core/component.js":"js/core/component.5748098f.js","js/core/event-bus.js":"js/core/event-bus.fad34c9f.js","js/core/index.js":"js/core/index.a580f153.js","js/core/navigation.js":"js/core/navigation.d24a2486.js","js/core/performance-monitor.js":"js/core/performance-monitor.0d25556e.js","js/core/seo.js":"js/core/seo.8ae6a937.js","js/core/storage.js":"js/core/storage.f9b42361.js","js/core/theme.js":"js/core/theme.503a741b.js","js/defer-css.js":"js/defer-css.49034bfd.js","js/download-form-handler.js":"js/download-form-handler.cc38bed3.js","js/examples/component-examples.js":"js/examples/component-examples.88146c75.js","js/features/brevo-chat.js":"js/features/brevo-chat.2ba1d535.js","js/features/forms.js":"js/features/forms.061f9558.js","js/features/icon-system.js":"js/features/icon-system.d5207868.js","js/features/index.js":"js/features/index.3f815d0e.js","js/features/newsletter.js":"js/features/newsletter.720adaf9.js","js/github-integration.js":"js/github-integration.072cd88b.js","js/init-preload.js":"js/init-preload.6ee4f7d3.js","js/init-systems.js":"js/init-systems.84654b0f.js","js/integrations/stackblitz.js":"js/integrations/stackblitz.5b959acf.js","js/lazy-loading.js":"js/lazy-loading.3fbf7218.js","js/main.js":"js/main.807edaaa.js","js/mobile-enhancements.js":"js/mobile-enhancements.8ae0b6a0.js","js/modules/animation-utils.js":"js/modules/animation-utils.c4c12160.js","js/modules/progress-bar.js":"js/modules/progress-bar.835c7a25.js","js/modules/shared-loader.js":"js/modules/shared-loader.611c0c61.js","js/modules/social-sharing.js":"js/modules/social-sharing.9dc68c8d.js","js/modules/toc-manager.js":"js/modules/toc-manager.91a4f99b.js","js/pages/about.js":"js/pages/about.b042d755.js","js/pages/cloudflare-framework.js":"js/pages/cloudflare-framework.eb9404c2.js","js/pages/cloudflare-top-10-saas-edge-computing-workers-case-study-docs.js":"js/pages/cloudflare-top-10-saas-edge-computing-workers-case-study-docs.31d0f675.js","js/pages/cloudflare-workers-development-guide.js":"js/pages/cloudflare-workers-development-guide.456dfaa0.js","js/pages/cloudflare-workers-guide.js":"js/pages/cloudflare-workers-guide.2f7496f6.js","js/pages/product.js":"js/pages/product.84c8c780.js","js/pages/saas-product-startups-cloudflare-case-studies.js":"js/pages/saas-product-startups-cloudflare-case-studies.31d0f675.js","js/scroll-animations.js":"js/scroll-animations.5a406065.js","js/ui/index.js":"js/ui/index.3d32ece3.js","js/ui/modal.js":"js/ui/modal.e403242a.js","js/ui/nav-fallback.js":"js/ui/nav-fallback.3d3df691.js","js/ui/navigation-component.js":"js/ui/navigation-component.65c3644e.js","js/ui/tabs.js":"js/ui/tabs.979466c2.js","js/ui/tooltip.js":"js/ui/tooltip.9c35fd0c.js","js/workers-boilerplate.js":"js/workers-boilerplate.5770c078.js"};</script>
    <!-- CRITICAL: Early shims to prevent TypeErrors if core modules fail to load or are cached -->
    <script nonce="N0Nc3Cl0d0">window.PerformanceMonitor=window.PerformanceMonitor||{init:function(){},getReport:function(){return{}},getMetrics:function(){return{}},getErrors:function(){return[]},getTimings:function(){return[]},getLongTasks:function(){return[]},getTrends:function(){return[]},getResourceBreakdown:function(){return{}},getOptimizationRecommendations:function(){return[]},enableDebug:function(){},disableDebug:function(){},stop:function(){},sendBeacon:function(){}};window.SEO=window.SEO||{init:function(){},addOrganizationSchema:function(){},addWebSiteSchema:function(){},addSoftwareSchema:function(){},addStructuredData:function(){},setPageMeta:function(){},makeAbsoluteUrl:function(u){return u||''},getCurrentMeta:function(){return{}}};window.a11y=window.a11y||{init:function(){},generateReport:function(){return{}}};</script>
    
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clodo Framework - Enterprise Cloudflare Workers Framework | Reduce Development Costs by 60%</title>
    <meta name="description" content="Enterprise-grade framework for Cloudflare Workers. Build production SaaS applications 10x faster with 90% cost reduction. SOC 2 compliant, multi-tenant ready. Trusted by US enterprises for mission-critical applications.">
    <meta name="keywords" content="cloudflare workers orchestration, pre-flight checker, enterprise cost reduction, multi-tenant saas framework, custom software optimization, cloudflare workers framework, edge computing orchestration, reduce development costs, enterprise deployment automation">
    <meta name="author" content="Clodo Framework">
    <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
    <meta name="googlebot" content="index, follow">
    <meta name="bingbot" content="index, follow">
    <link rel="canonical" href="https://www.clodo.dev/">
    
    <!-- Hreflang tags for international SEO -->
    <link rel="alternate" hreflang="en" href="https://www.clodo.dev/">
    <link rel="alternate" hreflang="en-GB" href="https://www.clodo.dev/">
    <link rel="alternate" hreflang="en-AU" href="https://www.clodo.dev/">
    <link rel="alternate" hreflang="en-IN" href="https://www.clodo.dev/in/">
    <link rel="alternate" hreflang="pt-BR" href="https://www.clodo.dev/br/">
    <link rel="alternate" hreflang="x-default" href="https://www.clodo.dev/">
    
    <!-- Favicon -->
    <link rel="icon" href="favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="favicon.svg">
    
    <!-- PERFORMANCE RESOURCE HINTS - OPTIMIZED FOR LCP -->
    <!-- Preconnect to OWN domain first (highest priority) -->
    <link rel="preconnect" href="https://www.clodo.dev">
    
    <!-- DNS Prefetch for API only (analytics loads async after LCP) -->
    <link rel="dns-prefetch" href="//api.github.com">
    
    <!-- Preload Critical Resources ONLY -->
    <style>:root{--primary-50:rgb(239 246 255);--primary-100:rgb(219 234 254);--primary-200:rgb(191 219 254);--primary-300:rgb(147 197 253);--primary-400:rgb(96 165 250);--primary-500:rgb(59 130 246);--primary-600:rgb(37 99 235);--primary-700:rgb(29 78 216);--primary-800:rgb(30 64 175);--primary-900:rgb(30 58 138);--primary-950:rgb(23 37 84);--primary-color:var(--primary-600);--primary-dark:var(--primary-700);--primary-light:var(--primary-400);--gray-50:rgb(249 250 251);--gray-100:rgb(243 244 246);--gray-200:rgb(229 231 235);--gray-300:rgb(209 213 219);--gray-400:rgb(156 163 175);--gray-500:rgb(107 114 128);--gray-600:rgb(75 85 99);--gray-700:rgb(55 65 81);--gray-800:rgb(31 41 55);--gray-900:rgb(17 24 39);--gray-950:rgb(3 7 18);--success-500:rgb(16 185 129);--success-600:rgb(5 150 105);--warning-500:rgb(245 158 11);--warning-600:rgb(217 119 6);--error-500:rgb(239 68 68);--error-600:rgb(220 38 38);--info-500:rgb(59 130 246);--info-600:rgb(37 99 235);--success-color:var(--success-600);--warning-color:var(--warning-600);--error-color:var(--error-600);--info-color:var(--info-600);--text-primary:var(--gray-900);--text-secondary:var(--gray-700);--text-muted:var(--gray-600);--bg-primary:var(--gray-50);--bg-secondary:var(--gray-100);--bg-tertiary:var(--gray-200);--bg-accent:var(--primary-50);--bg-dark:var(--gray-800);--bg-darker:var(--gray-900);--border-color:var(--gray-200);--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 5%);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 10%),0 2px 4px -2px rgb(0 0 0 / 10%);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 10%),0 4px 6px -4px rgb(0 0 0 / 10%);--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--transition-fast:0.15s ease-out;--transition-normal:0.3s ease-out;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem}@media (prefers-color-scheme:dark){:root{--text-primary:rgb(243 244 246);--text-secondary:rgb(209 213 219);--text-muted:rgb(156 163 175);--bg-primary:rgb(17 24 39);--bg-secondary:rgb(31 41 55);--bg-tertiary:rgb(55 65 81);--bg-accent:rgb(30 58 95);--border-color:rgb(55 65 81)}}*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size:16px;line-height:1.6;color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased}a{color:var(--primary-color);text-decoration:none;transition:all var(--transition-fast)}img{max-width:100%;height:auto}#hero-title{font-size:2.5rem;line-height:1.1;font-weight:700;margin:0 0 1.5rem;color:var(--text-primary)}@media (width >= 768px){#hero-title{font-size:3rem}}.hero-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center;max-width:1200px;margin:0 auto;padding:0 1rem}.hero-content{order:1;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:100%}.hero-visual{order:2;text-align:center;max-width:100%;width:100%}.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}@media (width >= 1024px){.hero-grid{grid-template-columns:0.9fr 1.1fr;gap:4rem}.hero-visual{order:1;justify-self:end}.hero-content{order:2;align-items:flex-start !important;text-align:left !important;max-width:600px}.hero-buttons{justify-content:flex-start !important}}header{position:sticky;top:0;z-index:1000;background-color:var(--bg-primary)}.navbar{background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);box-shadow:0 1px 3px rgb(0 0 0 / 5%)}.nav-container{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);max-width:1200px;margin:0 auto;gap:var(--spacing-sm)}@media (width <= 767px){.nav-container{justify-content:space-between}.logo{order:1}.mobile-menu-toggle{order:3}.nav-menu{order:2}.nav-actions{order:4;display:flex;gap:var(--spacing-xs)}}@media (width >= 768px){.nav-container{padding:var(--spacing-sm) var(--spacing-lg)}}.logo{display:flex;align-items:center;gap:0.5rem;font-size:1.25rem;font-weight:700;color:var(--text-primary);text-decoration:none;transition:opacity var(--transition-fast);min-height:44px}.logo:hover{opacity:0.8}.logo:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.logo-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}.logo-text{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark,var(--primary-color)));background-clip:text;-webkit-text-fill-color:transparent}.mobile-menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.mobile-menu-toggle:hover{background:var(--bg-secondary);border-color:var(--primary-color)}.mobile-menu-toggle:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.mobile-menu-toggle[aria-expanded="true"]{background:var(--bg-secondary)}.hamburger{display:flex;flex-direction:column;gap:4px;width:20px}.hamburger__line{display:block;width:100%;height:2px;background:var(--text-primary);transition:all var(--transition-fast);border-radius:2px}.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--top{transform:translateY(6px) rotate(45deg)}.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--middle{opacity:0}.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--bottom{transform:translateY(-6px) rotate(-45deg)}.nav-menu{display:none;list-style:none;margin:0;padding:0;position:absolute;top:100%;left:0;right:0;background:var(--bg-primary);border-bottom:1px solid var(--border-color);box-shadow:0 8px 16px rgb(0 0 0 / 10%)}.nav-menu[data-visible="false"]{display:none}.nav-menu[data-visible="true"]{display:flex;flex-direction:column}.nav-menu li{margin:0;border-bottom:1px solid var(--border-color)}.nav-menu li:last-child{border-bottom:none}.nav-link{display:flex;align-items:center;padding:var(--spacing-md);color:var(--text-primary);text-decoration:none;font-weight:500;font-size:1rem;transition:all var(--transition-fast);min-height:44px}.nav-link:hover{background:var(--bg-secondary);color:var(--primary-color)}.nav-link:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.nav-link[aria-current="page"]{color:var(--primary-color);font-weight:600;background:var(--bg-hover,var(--bg-secondary))}.nav-dropdown{position:relative}.nav-dropdown-toggle::after{content:"▾";margin-left:0.375rem;font-size:0.875rem;transition:transform var(--transition-fast)}.nav-dropdown-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}.nav-dropdown-menu{display:none;list-style:none;margin:0;padding:var(--spacing-sm) 0;background:var(--bg-secondary)}.nav-dropdown:has(.nav-dropdown-toggle[aria-expanded="true"]) .nav-dropdown-menu{display:block}.nav-dropdown-link{display:block;padding:var(--spacing-sm) var(--spacing-lg);color:var(--text-secondary);text-decoration:none;font-size:0.875rem;transition:all var(--transition-fast)}.nav-dropdown-link:hover{background:var(--bg-hover,var(--bg-primary));color:var(--primary-color)}.nav-dropdown-divider{padding:var(--spacing-xs) var(--spacing-lg);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted,var(--text-secondary));margin-top:var(--spacing-sm)}.nav-dropdown-section{margin:var(--spacing-sm) 0 var(--spacing-xs) 0}.nav-dropdown-section-title{padding:var(--spacing-sm) var(--spacing-lg) var(--spacing-xs) var(--spacing-lg) !important;font-size:0.875rem !important;font-weight:600 !important;color:var(--text-primary) !important;cursor:pointer;border-bottom:1px solid var(--border-color,rgb(255 255 255 / 10%));margin-bottom:var(--spacing-xs)}.nav-dropdown-section-title:hover{background:var(--bg-hover,var(--bg-primary)) !important;color:var(--primary-color) !important}.nav-dropdown-subitem{padding:var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) calc(var(--spacing-lg) + var(--spacing-md)) !important;font-size:0.8125rem !important;color:var(--text-secondary) !important;border-left:2px solid transparent}.nav-dropdown-subitem:hover{background:var(--bg-hover,var(--bg-primary)) !important;color:var(--primary-color) !important;border-left-color:var(--primary-color)}.nav-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.github-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--text-primary);text-decoration:none;border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all var(--transition-fast)}.github-btn:hover{background:var(--bg-secondary);border-color:var(--primary-color);color:var(--primary-color)}.github-btn:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}@media (width >= 768px){.nav-container{padding:var(--spacing-md) var(--spacing-lg)}.logo{font-size:1.5rem}.mobile-menu-toggle{display:none}.nav-menu,.nav-menu[data-visible="false"],.nav-menu[data-visible="true"]{display:flex !important;position:static;flex-direction:row;align-items:center;gap:var(--spacing-sm);background:transparent;border:none;box-shadow:none}.nav-menu li{border-bottom:none}.nav-link{padding:var(--spacing-sm) var(--spacing-md)}.nav-dropdown-menu{position:absolute;top:100%;left:0;min-width:250px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:0 8px 16px rgb(0 0 0 / 10%);margin-top:0.5rem;z-index:1001;max-height:70vh;overflow-y:auto}.nav-actions{display:flex;align-items:center;gap:var(--spacing-sm)}}@media (width >= 1024px){.nav-menu{gap:var(--spacing-md)}.nav-dropdown-menu{min-width:300px}}@media (prefers-reduced-motion:reduce){.hamburger__line,.nav-dropdown-toggle::after{transition:none}.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--top,.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--bottom{transform:none}}@media (prefers-contrast:high){.navbar{border-bottom:2px solid var(--border-color)}.mobile-menu-toggle,.github-btn{border:2px solid var(--border-color)}}@media print{.navbar{position:static;border-bottom:2px solid var(--color-black)}.mobile-menu-toggle,.nav-dropdown-menu,.nav-actions{display:none}.nav-menu{display:flex;flex-direction:row;gap:1rem}}.error{border-color:var(--error-color) !important;background-color:rgb(239 68 68 / 10%) !important}.success{border-color:var(--success-color) !important;background-color:rgb(16 185 129 / 10%) !important}.skip-link{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;z-index:1000;opacity:0}.skip-link:focus{position:absolute;top:6px;left:6px;width:auto;height:auto;padding:8px;margin:0;background:var(--primary-color);color:var(--color-white);text-decoration:none;border-radius:4px;font-weight:500;overflow:visible;clip:auto;white-space:normal}.noscript-banner{position:relative;width:100%;background:linear-gradient(90deg,rgba(255,248,225,1),rgba(255,255,255,1));color:var(--color-text,#111);padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.06);text-align:center;z-index:999;font-size:.95rem}.noscript-banner .container{max-width:1100px;margin:0 auto;padding:0 16px}.noscript-link,.noscript-banner a{color:var(--primary-color);text-decoration:underline;font-weight:600}.text-heart{color:rgb(226 85 85)}.theme-icon--dark{display:none}[data-theme="dark"] .theme-icon--dark{display:inline}.hidden{display:none !important}.visible{display:block !important}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-sm{font-size:0.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}.touch-target{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}@media (min-width:768px){.touch-target{min-height:48px;min-width:48px}}</style>
    <script nonce="N0Nc3Cl0d0">window.__assetManifest__={"styles-index.css":"styles-index.ae3b2893.css","styles-pricing.css":"styles-pricing.d0d68aa0.css","styles-blog.css":"styles-blog.b60ae3d2.css","styles-subscribe.css":"styles-subscribe.f6b89e40.css","styles-product.css":"styles-product.7239164f.css","styles-about.css":"styles-about.feb9b284.css","styles-migrate.css":"styles-migrate.bdeaee19.css","styles-case-studies.css":"styles-case-studies.0a6b4d7e.css","styles-community.css":"styles-community.184bdd08.css","styles-workers-boilerplate.css":"styles-workers-boilerplate.be676834.css","styles-clodo-framework-guide.css":"styles-clodo-framework-guide.f5547220.css","styles-cloudflare-workers-guide.css":"styles-cloudflare-workers-guide.5fbc1ff3.css","styles-cloudflare-workers-development-guide.css":"styles-cloudflare-workers-development-guide.aec64b1e.css","styles-cloudflare-top-10-saas-edge-computing-workers-case-study-docs.css":"styles-cloudflare-top-10-saas-edge-computing-workers-case-study-docs.f880606e.css","styles-saas-product-startups-cloudflare-case-studies.css":"styles-saas-product-startups-cloudflare-case-studies.e2ca4d67.css","styles-cloudflare-framework.css":"styles-cloudflare-framework.a2a16625.css","styles-index-deferred.css":"styles-index-deferred.de46a29b.css","styles.css":"styles.617ad8d4.css","js/analytics.js":"js/analytics.ca95c2b5.js","js/announcements-manager.js":"js/announcements-manager.de246c62.js","js/component-nav.js":"js/component-nav.69034e89.js","js/components/community-section.js":"js/components/community-section.b3989d90.js","js/config/features.js":"js/config/features.377e2a86.js","js/core/accessibility.js":"js/core/accessibility.6cb25723.js","js/core/app.js":"js/core/app.bb756733.js","js/core/component.js":"js/core/component.5748098f.js","js/core/event-bus.js":"js/core/event-bus.fad34c9f.js","js/core/index.js":"js/core/index.a580f153.js","js/core/navigation.js":"js/core/navigation.d24a2486.js","js/core/performance-monitor.js":"js/core/performance-monitor.0d25556e.js","js/core/seo.js":"js/core/seo.8ae6a937.js","js/core/storage.js":"js/core/storage.f9b42361.js","js/core/theme.js":"js/core/theme.503a741b.js","js/defer-css.js":"js/defer-css.49034bfd.js","js/download-form-handler.js":"js/download-form-handler.cc38bed3.js","js/examples/component-examples.js":"js/examples/component-examples.88146c75.js","js/features/brevo-chat.js":"js/features/brevo-chat.2ba1d535.js","js/features/forms.js":"js/features/forms.061f9558.js","js/features/icon-system.js":"js/features/icon-system.d5207868.js","js/features/index.js":"js/features/index.3f815d0e.js","js/features/newsletter.js":"js/features/newsletter.720adaf9.js","js/github-integration.js":"js/github-integration.072cd88b.js","js/init-preload.js":"js/init-preload.6ee4f7d3.js","js/init-systems.js":"js/init-systems.84654b0f.js","js/integrations/stackblitz.js":"js/integrations/stackblitz.5b959acf.js","js/lazy-loading.js":"js/lazy-loading.3fbf7218.js","js/main.js":"js/main.807edaaa.js","js/mobile-enhancements.js":"js/mobile-enhancements.8ae0b6a0.js","js/modules/animation-utils.js":"js/modules/animation-utils.c4c12160.js","js/modules/progress-bar.js":"js/modules/progress-bar.835c7a25.js","js/modules/shared-loader.js":"js/modules/shared-loader.611c0c61.js","js/modules/social-sharing.js":"js/modules/social-sharing.9dc68c8d.js","js/modules/toc-manager.js":"js/modules/toc-manager.91a4f99b.js","js/pages/about.js":"js/pages/about.b042d755.js","js/pages/cloudflare-framework.js":"js/pages/cloudflare-framework.eb9404c2.js","js/pages/cloudflare-top-10-saas-edge-computing-workers-case-study-docs.js":"js/pages/cloudflare-top-10-saas-edge-computing-workers-case-study-docs.31d0f675.js","js/pages/cloudflare-workers-development-guide.js":"js/pages/cloudflare-workers-development-guide.456dfaa0.js","js/pages/cloudflare-workers-guide.js":"js/pages/cloudflare-workers-guide.2f7496f6.js","js/pages/product.js":"js/pages/product.84c8c780.js","js/pages/saas-product-startups-cloudflare-case-studies.js":"js/pages/saas-product-startups-cloudflare-case-studies.31d0f675.js","js/scroll-animations.js":"js/scroll-animations.5a406065.js","js/ui/index.js":"js/ui/index.3d32ece3.js","js/ui/modal.js":"js/ui/modal.e403242a.js","js/ui/nav-fallback.js":"js/ui/nav-fallback.3d3df691.js","js/ui/navigation-component.js":"js/ui/navigation-component.65c3644e.js","js/ui/tabs.js":"js/ui/tabs.979466c2.js","js/ui/tooltip.js":"js/ui/tooltip.9c35fd0c.js","js/workers-boilerplate.js":"js/workers-boilerplate.5770c078.js"};</script>
    <link rel="preload" href="/styles.617ad8d4.css" as="style">
    <link rel="preload" href="/styles-index.ae3b2893.css" as="style">
    <script src="/js/init-preload.6ee4f7d3.js"></script><link rel="stylesheet" href="/css/components-reusable.css"> <!-- canonical reusable components -->
        <script src="/js/init-preload.6ee4f7d3.js"></script>
    <!-- Page-specific styles deferred (non-critical content) -->
    
    
    <!-- Prefetch Likely Navigation Destinations -->
    <link rel="prefetch" href="/docs">
    <link rel="prefetch" href="/pricing">
    <link rel="prefetch" href="/examples">
    

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Clodo Framework">
    <meta property="og:title" content="Clodo Framework - Pre-Flight Checker for Cloudflare Workers | Reduce Custom Software Costs by 60%">
    <meta property="og:description" content="Enterprise orchestration framework that reduces custom software development costs by 60% for $50K-200K projects. Pre-Flight Checker validates deployments before they fail.">
    <meta property="og:url" content="https://clodo.dev">
    <meta property="og:image" content="https://clodo.dev/og-image.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="Clodo Framework - Enterprise Orchestration for Cloudflare Workers">
    <meta property="og:locale" content="en_US">
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@clodoframework">
    <meta name="twitter:creator" content="@clodoframework">
    <meta name="twitter:title" content="Clodo Framework - Pre-Flight Checker for Cloudflare Workers | Reduce Custom Software Costs by 60%">
    <meta name="twitter:description" content="Enterprise orchestration framework that reduces custom software development costs by 60% for $50K-200K projects. Pre-Flight Checker validates deployments before they fail.">
    <meta name="twitter:image" content="https://clodo.dev/og-image.png">
    <meta name="twitter:image:alt" content="Clodo Framework - Enterprise Orchestration for Cloudflare Workers">
    <!-- Business Schema -->
    <!-- Enhanced Organization Schema for E-E-A-T -->
    <!-- FAQ Schema -->
    <!-- TechArticle Schema -->
    <!-- Enhanced WebSite Schema with Sitelinks for Rich Search Results -->
        <!-- Service Schemas for Rich Search Display -->
        <!-- Product Schemas for Enhanced Search Visibility -->
        <!-- HowTo Schema for Getting Started -->
        <link rel="icon" href="icons/icon.svg" type="image/svg+xml">
    <link rel="manifest" href="site.webmanifest">
    <meta name="theme-color" content="#0b1220">

    <!-- Core Web Vitals Optimization - REMOVED unnecessary preloads -->
    <!-- Performance monitoring -->
    <script nonce="N0Nc3Cl0d0">
        // Core Web Vitals tracking
        function sendToAnalytics(metric) {
            // Send to analytics service
            console.log('Core Web Vital:', metric.name, metric.value);
        }

        // Largest Contentful Paint (LCP)
        new PerformanceObserver((list) => {
            const entries = list.getEntries();
            const lastEntry = entries[entries.length - 1];
            sendToAnalytics({ name: 'LCP', value: lastEntry.startTime });
        }).observe({ entryTypes: ['largest-contentful-paint'] });

        // First Input Delay (FID)
        new PerformanceObserver((list) => {
            for (const entry of list.getEntries()) {
                sendToAnalytics({ name: 'FID', value: entry.processingStart - entry.startTime });
            }
        }).observe({ entryTypes: ['first-input'] });

        // Cumulative Layout Shift (CLS)
        let clsValue = 0;
        new PerformanceObserver((list) => {
            for (const entry of list.getEntries()) {
                if (!entry.hadRecentInput) {
                    clsValue += entry.value;
                }
            }
            sendToAnalytics({ name: 'CLS', value: clsValue });
        }).observe({ entryTypes: ['layout-shift'] });
    </script>
    <!-- Analytics - Loaded async after LCP for zero performance impact -->
    <script nonce="N0Nc3Cl0d0">
    // Load Google Analytics asynchronously after page is interactive
    (function() {
      function loadGA() {
        // Initialize dataLayer
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        window.gtag = gtag;
        
        gtag('js', new Date());
        gtag('config', 'GA_MEASUREMENT_ID', {
          'custom_map': {'dimension1': 'page_location'},
          'send_page_view': true,
          'allow_google_signals': true,
          'allow_ad_personalization_signals': false
        });
        
        // Load GA script
        const script = document.createElement('script');
        script.async = true;
        script.src = 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID';
        document.head.appendChild(script);
        
        // Track referrals after GA loads
        script.onload = function() {
          if (document.referrer.includes('github.com')) {
            gtag('event', 'github_referral', {
              'event_category': 'engagement',
              'event_label': document.referrer,
              'value': 1
            });
          }
          if (document.referrer.includes('google.com') || document.referrer.includes('bing.com')) {
            gtag('event', 'organic_search_referral', {
              'event_category': 'acquisition',
              'event_label': document.referrer
            });
          }
        };
      }
      
      // Load after LCP or after 3 seconds
      if ('PerformanceObserver' in window) {
        const observer = new PerformanceObserver((list) => {
          const entries = list.getEntries();
          const lastEntry = entries[entries.length - 1];
          if (lastEntry) {
            observer.disconnect();
            setTimeout(loadGA, 1000);
          }
        });
        observer.observe({ entryTypes: ['largest-contentful-paint'] });
        setTimeout(() => { observer.disconnect(); loadGA(); }, 5000);
      } else {
        setTimeout(loadGA, 3000);
      }
    })();
    
    // Track engagement - these work even before GA loads
    document.addEventListener('DOMContentLoaded', function() {
      let startTime = Date.now();
      window.addEventListener('beforeunload', function() {
        if (window.gtag) {
          let timeSpent = Math.round((Date.now() - startTime) / 1000);
          gtag('event', 'time_on_page', {
            'event_category': 'engagement',
            'event_label': window.location.pathname,
            'value': timeSpent
          });
        }
      });
      
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting && window.gtag) {
            gtag('event', 'section_view', {
              'event_category': 'engagement',
              'event_label': entry.target.id || entry.target.className
            });
          }
        });
      }, { threshold: 0.5 });
      
      document.querySelectorAll('section, .feature, .example').forEach(section => {
        observer.observe(section);
      });
    });
    </script>
    <style>header {position: sticky;top: 0;z-index: 1000;background-color: var(--bg-primary);}.navbar {background-color: var(--bg-primary);border-bottom: 1px solid var(--border-color);box-shadow: 0 1px 3px rgb(0 0 0 / 5%);}.nav-container {display: flex;align-items: center;justify-content: space-between;padding: var(--spacing-sm) var(--spacing-md);max-width: 1200px;margin: 0 auto;gap: var(--spacing-sm);}@media (width <= 767px) {.nav-container {justify-content: space-between;}.logo {order: 1;}.mobile-menu-toggle {order: 3;}.nav-menu {order: 2;}.nav-actions {order: 4;display: flex;gap: var(--spacing-xs);}}@media (width >= 768px) {.nav-container {padding: var(--spacing-sm) var(--spacing-lg);}}.logo {display: flex;align-items: center;gap: 0.5rem;font-size: 1.25rem;font-weight: 700;color: var(--text-primary);text-decoration: none;transition: opacity var(--transition-fast);min-height: 44px;}.logo:hover {opacity: 0.8;}.logo:focus-visible {outline: 2px solid var(--primary-color);outline-offset: 2px;}.logo-icon {display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;flex-shrink: 0;}.logo-text {background: linear-gradient(135deg, var(--primary-color), var(--primary-dark, var(--primary-color)));background-clip: text;-webkit-text-fill-color: transparent;}.mobile-menu-toggle {display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;background: transparent;border: 1px solid var(--border-color);border-radius: var(--radius-md);cursor: pointer;transition: all var(--transition-fast);}.mobile-menu-toggle:hover {background: var(--bg-secondary);border-color: var(--primary-color);}.mobile-menu-toggle:focus-visible {outline: 2px solid var(--primary-color);outline-offset: 2px;}.mobile-menu-toggle[aria-expanded="true"] {background: var(--bg-secondary);}.hamburger {display: flex;flex-direction: column;gap: 4px;width: 20px;}.hamburger__line {display: block;width: 100%;height: 2px;background: var(--text-primary);transition: all var(--transition-fast);border-radius: 2px;}.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--top {transform: translateY(6px) rotate(45deg);}.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--middle {opacity: 0;}.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--bottom {transform: translateY(-6px) rotate(-45deg);}.nav-menu {display: none;list-style: none;margin: 0;padding: 0;position: absolute;top: 100%;left: 0;right: 0;background: var(--bg-primary);border-bottom: 1px solid var(--border-color);box-shadow: 0 8px 16px rgb(0 0 0 / 10%);}.nav-menu[data-visible="false"] {display: none;}.nav-menu[data-visible="true"] {display: flex;flex-direction: column;}.nav-menu li {margin: 0;border-bottom: 1px solid var(--border-color);}.nav-menu li:last-child {border-bottom: none;}.nav-link {display: flex;align-items: center;padding: var(--spacing-md);color: var(--text-primary);text-decoration: none;font-weight: 500;font-size: 1rem;transition: all var(--transition-fast);min-height: 44px;}.nav-link:hover {background: var(--bg-secondary);color: var(--primary-color);}.nav-link:focus-visible {outline: 2px solid var(--primary-color);outline-offset: -2px;}.nav-link[aria-current="page"] {color: var(--primary-color);font-weight: 600;background: var(--bg-hover, var(--bg-secondary));}.nav-dropdown {position: relative;}.nav-dropdown-toggle::after {content: "▾";margin-left: 0.375rem;font-size: 0.875rem;transition: transform var(--transition-fast);}.nav-dropdown-toggle[aria-expanded="true"]::after {transform: rotate(180deg);}.nav-dropdown-menu {display: none;list-style: none;margin: 0;padding: var(--spacing-sm) 0;background: var(--bg-secondary);}.nav-dropdown:has(.nav-dropdown-toggle[aria-expanded="true"]) .nav-dropdown-menu {display: block;}.nav-dropdown-link {display: block;padding: var(--spacing-sm) var(--spacing-lg);color: var(--text-secondary);text-decoration: none;font-size: 0.875rem;transition: all var(--transition-fast);}.nav-dropdown-link:hover {background: var(--bg-hover, var(--bg-primary));color: var(--primary-color);}.nav-dropdown-divider {padding: var(--spacing-xs) var(--spacing-lg);font-size: 0.75rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.05em;color: var(--text-muted, var(--text-secondary));margin-top: var(--spacing-sm);}.nav-dropdown-section {margin: var(--spacing-sm) 0 var(--spacing-xs) 0;}.nav-dropdown-section-title {padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-xs) var(--spacing-lg) !important;font-size: 0.875rem !important;font-weight: 600 !important;color: var(--text-primary) !important;cursor: pointer;border-bottom: 1px solid var(--border-color, rgb(255 255 255 / 10%));margin-bottom: var(--spacing-xs);}.nav-dropdown-section-title:hover {background: var(--bg-hover, var(--bg-primary)) !important;color: var(--primary-color) !important;}.nav-dropdown-subitem {padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) calc(var(--spacing-lg) + var(--spacing-md)) !important;font-size: 0.8125rem !important;color: var(--text-secondary) !important;border-left: 2px solid transparent;}.nav-dropdown-subitem:hover {background: var(--bg-hover, var(--bg-primary)) !important;color: var(--primary-color) !important;border-left-color: var(--primary-color);}.nav-actions {display: flex;align-items: center;gap: var(--spacing-sm);}.github-btn {display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;color: var(--text-primary);text-decoration: none;border: 1px solid var(--border-color);border-radius: var(--radius-md);transition: all var(--transition-fast);}.github-btn:hover {background: var(--bg-secondary);border-color: var(--primary-color);color: var(--primary-color);}.github-btn:focus-visible {outline: 2px solid var(--primary-color);outline-offset: 2px;}@media (width >= 768px) {.nav-container {padding: var(--spacing-md) var(--spacing-lg);}.logo {font-size: 1.5rem;}.mobile-menu-toggle {display: none;}.nav-menu,.nav-menu[data-visible="false"],.nav-menu[data-visible="true"] {display: flex !important;position: static;flex-direction: row;align-items: center;gap: var(--spacing-sm);background: transparent;border: none;box-shadow: none;}.nav-menu li {border-bottom: none;}.nav-link {padding: var(--spacing-sm) var(--spacing-md);}.nav-dropdown-menu {position: absolute;top: 100%;left: 0;min-width: 250px;background: var(--bg-primary);border: 1px solid var(--border-color);border-radius: var(--radius-md);box-shadow: 0 8px 16px rgb(0 0 0 / 10%);margin-top: 0.5rem;z-index: 1001;max-height: 70vh;overflow-y: auto;}.nav-actions {display: flex;align-items: center;gap: var(--spacing-sm);}}@media (width >= 1024px) {.nav-menu {gap: var(--spacing-md);}.nav-dropdown-menu {min-width: 300px;}}@media (prefers-reduced-motion: reduce) {.hamburger__line,.nav-dropdown-toggle::after {transition: none;}.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--top,.mobile-menu-toggle[aria-expanded="true"] .hamburger__line--bottom {transform: none;}}@media (prefers-contrast: high) {.navbar {border-bottom: 2px solid var(--border-color);}.mobile-menu-toggle,.github-btn {border: 2px solid var(--border-color);}}@media print {.navbar {position: static;border-bottom: 2px solid var(--color-black);}.mobile-menu-toggle,.nav-dropdown-menu,.nav-actions {display: none;}.nav-menu {display: flex;flex-direction: row;gap: 1rem;}}.breadcrumbs{max-width:1280px;margin:0 auto;padding:1rem;font-size:.875rem;color:var(--text-muted)}.breadcrumbs ol{list-style:none;display:flex;gap:.5rem;flex-wrap:wrap;margin:0;padding:0}.breadcrumbs li{display:flex;align-items:center}.breadcrumbs li:not(:last-child):after{content:"/";margin-left:.5rem}.breadcrumbs a{color:var(--primary-color);text-decoration:none}.breadcrumbs a:hover{text-decoration:underline}.navbar{transition:none !important}.css-ready .navbar{transition:all var(--transition-fast)}</style>
    <!-- Critical Theme Script - Prevents FOUC (Flash of Unstyled Content) -->
<!-- ⚠️ MUST be inline in <head> before CSS loads (performance blocker prevention) -->
<!-- Uses localStorage key 'clodo-theme' (matches ThemeManager THEME_KEY) -->
<script nonce="N0Nc3Cl0d0">
(function() {
    try {
        // Get stored theme - ONLY use explicit user choice, never system preference
        // This prevents dark theme from being applied by default on mobile devices
        const stored = localStorage.getItem('clodo-theme');
        const theme = (stored === 'dark') ? 'dark' : 'light';
        // Apply BEFORE CSS renders to prevent FOUC
        document.documentElement.setAttribute('data-theme', theme);
        document.documentElement.style.colorScheme = theme;
    } catch (e) {
        // Fail silently - CSS defaults to light theme
        document.documentElement.setAttribute('data-theme', 'light');
        document.documentElement.style.colorScheme = 'light';
    }
})();
</script>

<script type="application/ld+json" nonce="N0Nc3Cl0d0">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "https://www.clodo.dev#organization",
  "name": "Clodo Framework",
  "description": "Enterprise-ready framework for building serverless applications on Cloudflare Workers with zero cold starts, integrated databases, multi-tenancy, advanced caching, and comprehensive monitoring.",
  "url": "https://www.clodo.dev",
  "logo": "https://www.clodo.dev/icons/icon.svg",
  "founded": "2024",
  "foundingLocation": {
    "@type": "Place",
    "address": {
      "@type": "PostalAddress",
      "addressCountry": "US"
    }
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "email": "product@clodo.dev",
    "contactType": "Customer Support",
    "availableLanguage": "en"
  },
  "inLanguage": "en-US",
  "sameAs": [
    "https://github.com/tamylaa/clodo-framework",
    "https://www.npmjs.com/package/@tamyla/clodo-framework",
    "https://twitter.com/clodoframework",
    "https://linkedin.com/company/clodo-framework"
  ]
}
</script>
<script type="application/ld+json" nonce="N0Nc3Cl0d0">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Clodo Framework",
  "description": "Enterprise-grade framework for Cloudflare Workers. Build production SaaS applications 10x faster.",
  "url": "https://www.clodo.dev",
  "inLanguage": "en-US",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://www.clodo.dev/search?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}
</script>
<script type="application/ld+json" nonce="N0Nc3Cl0d0">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Clodo Framework",
  "description": "Enterprise-ready framework for Cloudflare Workers. Build production SaaS applications with integrated databases, authentication, and zero cold starts.",
  "softwareVersion": "1.0.0",
  "url": "https://www.clodo.dev",
  "applicationCategory": "DeveloperApplication",
  "inLanguage": "en-US",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "ratingCount": "1974",
    "reviewCount": "127",
    "bestRating": "5",
    "worstRating": "1"
  },
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock",
    "description": "Open source framework, free to use under MIT License. Only pay for Cloudflare Workers compute."
  },
  "featureList": [
    "Multi-tenant SaaS architecture",
    "Integrated D1 database with migrations",
    "Built-in authentication and routing",
    "AES-256-CBC encrypted API tokens",
    "Zero cold starts with sub-50ms response",
    "Automated security validation",
    "TypeScript support with 500+ type definitions",
    "One-click deployment to Cloudflare Pages",
    "Cloudflare Wrangler automation — deployments, D1 migrations, and rollbacks"
  ],
  "screenshot": "https://www.clodo.dev/images/icon.svg",
  "downloadUrl": "https://www.npmjs.com/package/@tamyla/clodo-framework",
  "codeRepository": "https://github.com/tamylaa/clodo-framework",
  "programmingLanguage": "TypeScript",
  "runtimePlatform": "Cloudflare Workers",
  "systemRequirements": "Node.js 18+, npm or yarn",
  "author": {
    "@type": "Organization",
    "name": "Clodo Framework",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.clodo.dev/icons/icon.svg"
    }
  },
  "review": [
    {
      "@type": "Review",
      "author": {
        "@type": "Person",
        "name": "Sarah K."
      },
      "reviewBody": "Migrated our auth service from Lambda in a weekend. Cold starts went from 800ms to literally zero. Our users in Australia finally stopped complaining.",
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5",
        "bestRating": "5",
        "worstRating": "1"
      }
    },
    {
      "@type": "Review",
      "author": {
        "@type": "Person",
        "name": "Marcus T."
      },
      "reviewBody": "The billing model alone saved us $4k/month. We were paying Lambda to wait on OpenAI API calls. Workers only charge for actual compute. Game changer.",
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5",
        "bestRating": "5",
        "worstRating": "1"
      }
    },
    {
      "@type": "Review",
      "author": {
        "@type": "Person",
        "name": "Dev R."
      },
      "reviewBody": "Honestly skeptical at first—sounded too good. But after running both in parallel for 3 months, we're all-in on Workers. The DX with Clodo Framework sealed the deal.",
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5",
        "bestRating": "5",
        "worstRating": "1"
      }
    }
  ]
}
</script>
<script type="application/ld+json" nonce="N0Nc3Cl0d0">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.clodo.dev"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Index",
      "item": "https://www.clodo.dev/index"
    }
  ]
}
</script>
<script type="application/ld+json" nonce="N0Nc3Cl0d0">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.clodo.dev"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Amp",
      "item": "https://www.clodo.dev/amp"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "En",
      "item": "https://www.clodo.dev/amp/en"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Blog",
      "item": "https://www.clodo.dev/amp/en/blog"
    },
    {
      "@type": "ListItem",
      "position": 5,
      "name": "Index.Amp",
      "item": "https://www.clodo.dev/index.amp"
    }
  ]
}
</script>
</head>
<body>
    <!-- Announcement Container - Populated dynamically by announcements-manager.js -->
    <div class="announcement-container"></div>
    <a href="#main-content" class="skip-link" tabindex="0">Skip to main content</a>
    <noscript>
        <div class="noscript-banner" role="note" aria-live="polite">
            <div class="container">
                <p><strong>Note:</strong> This site uses JavaScript for interactive features, but core content is available without it. If you experience issues (for example, subscribing), try emailing <a class="noscript-link" href="mailto:product@clodo.dev">product@clodo.dev</a>.</p>
            </div>
        </div>
    </noscript>"},{
    <header><nav class="navbar" aria-label="Main navigation">
    <div class="nav-container">
        <a href="/" class="logo" aria-label="Clodo Framework home">
            <svg class="logo-icon" aria-hidden="true" width="24" height="24" viewBox="0 0 256 256">
                <defs>
                    <linearGradient id="main-logo-g" x1="0" y1="0" x2="1" y2="1">
                        <stop offset="0%" stop-color="#1d4ed8"/>
                        <stop offset="100%" stop-color="#6366f1"/>
                    </linearGradient>
                </defs>
                <rect width="256" height="256" rx="48" fill="#0b1220"/>
                <path d="M144 16l-80 128h56l-8 96 80-128h-56l8-96z" fill="url(#main-logo-g)"/>
            </svg>
            <span class="logo-text">Clodo</span>
        </a>

        <button id="mobile-menu-toggle" class="mobile-menu-toggle touch-target" aria-label="Toggle mobile menu" aria-expanded="false" aria-controls="mobile-menu">
            <span class="hamburger">
                <span class="hamburger__line hamburger__line--top"></span>
                <span class="hamburger__line hamburger__line--middle"></span>
                <span class="hamburger__line hamburger__line--bottom"></span>
            </span>
        </button>

        <ul class="nav-menu" id="mobile-menu" data-visible="false" role="menu" aria-label="Main navigation">
            <li role="none"><a href="/" class="nav-link touch-target" role="menuitem">Home</a></li>
            <li class="nav-dropdown" role="none">
                <a href="/product" class="nav-link nav-dropdown-toggle touch-target" aria-haspopup="true" aria-expanded="false" role="menuitem">Product</a>
                <ul class="nav-dropdown-menu" role="menu">
                    <li role="none"><a href="/product" class="nav-dropdown-link touch-target" role="menuitem">Overview</a></li>
                    <li role="none"><a href="/migrate" class="nav-dropdown-link touch-target" role="menuitem">Migrate</a></li>
                    <li role="none"><a href="/community/welcome" class="nav-dropdown-link touch-target" role="menuitem">Community</a></li>

                    <li class="nav-dropdown-divider" role="separator"></li>

                    <!-- Comparisons Section -->
                    <li class="nav-dropdown-section">
                        <span class="nav-dropdown-link nav-dropdown-section-title">
                            <strong>⚖️ Comparisons</strong>
                        </span>
                    </li>
                    <li role="none"><a href="/edge-vs-cloud-computing" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Edge vs Cloud Computing</a></li>
                    <li role="none"><a href="/workers-vs-lambda" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Workers vs Lambda</a></li>
                    <li role="none"><a href="/clodo-vs-lambda" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Clodo vs AWS Lambda</a></li>
                    <li role="none"><a href="/what-is-cloudflare-workers" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">What is Cloudflare Workers</a></li>
                    <li role="none"><a href="/what-is-edge-computing" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">What is Edge Computing</a></li>
                </ul>
            </li>
            <li class="nav-dropdown" role="none">
                <a href="#" class="nav-link nav-dropdown-toggle touch-target" aria-haspopup="true" aria-expanded="false" role="menuitem">Learn</a>
                <ul class="nav-dropdown-menu" role="menu">
                    <!-- Documentation Section -->
                    <li class="nav-dropdown-section">
                        <a href="/docs" class="nav-dropdown-link nav-dropdown-section-title touch-target" role="menuitem">
                            <strong>📚 Documentation</strong>
                        </a>
                    </li>
                    <li role="none"><a href="/docs" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Getting Started</a></li>
                    <li role="none"><a href="/components" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Components</a></li>
                    <li role="none"><a href="/development-deployment-guide" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Development & Deployment</a></li>
                    <li role="none"><a href="/clodo-framework-api-simplification" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">API Simplification</a></li>

                    <li class="nav-dropdown-divider" role="separator"></li>

                    <!-- Guides Section -->
                    <li class="nav-dropdown-section">
                        <span class="nav-dropdown-link nav-dropdown-section-title">
                            <strong>🚀 Guides</strong>
                        </span>
                    </li>
                    <li role="none"><a href="/cloudflare-workers-guide" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Cloudflare Workers Guide</a></li>
                    <li role="none"><a href="/cloudflare-workers-development-guide" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Cloudflare Workers Development Guide</a></li>
                    <li role="none"><a href="/edge-computing-guide" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Edge Computing Guide</a></li>
                    <li role="none"><a href="/cloudflare-framework" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Cloudflare Framework Guide</a></li>
                    <li role="none"><a href="/workers-boilerplate" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Workers Boilerplates</a></li>
                    <li role="none"><a href="/how-to-migrate-from-wrangler" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Migration Guide</a></li>
                    <li role="none"><a href="/clodo-framework-promise-to-reality" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Framework Promise to Reality</a></li>

                    <li class="nav-dropdown-divider" role="separator"></li>

                    <!-- Examples Section -->
                    <li class="nav-dropdown-section">
                        <a href="/examples" class="nav-dropdown-link nav-dropdown-section-title touch-target" role="menuitem">
                            <strong>💡 Examples</strong>
                        </a>
                    </li>
                    <li role="none"><a href="/examples" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Code Examples & Templates</a></li>

                    <li class="nav-dropdown-divider" role="separator"></li>

                    <!-- Help & Support Section -->
                    <li class="nav-dropdown-section">
                        <span class="nav-dropdown-link nav-dropdown-section-title">
                            <strong>❓ Help & Support</strong>
                        </span>
                    </li>
                    <li role="none"><a href="/faq" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Frequently Asked Questions</a></li>
                </ul>
            </li>
            <li class="nav-dropdown" role="none">
                <a href="#" class="nav-link nav-dropdown-toggle touch-target" aria-haspopup="true" aria-expanded="false" role="menuitem">Resources</a>
                <ul class="nav-dropdown-menu" role="menu">
                    <!-- Case Studies Section -->
                    <li class="nav-dropdown-section">
                        <a href="/case-studies" class="nav-dropdown-link nav-dropdown-section-title touch-target" role="menuitem">
                            <strong>📈 Case Studies</strong>
                        </a>
                    </li>
                    <li role="none"><a href="/case-studies" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Real-world Implementations</a></li>
                    <li role="none"><a href="/cloudflare-top-10-saas-edge-computing-workers-case-study-docs" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Companies Using Cloudflare</a></li>

                    <li class="nav-dropdown-divider" role="separator"></li>

                    <!-- Blog Section -->
                    <li class="nav-dropdown-section">
                        <a href="/blog" class="nav-dropdown-link nav-dropdown-section-title touch-target" role="menuitem">
                            <strong>📝 Blog</strong>
                        </a>
                    </li>
                    <li role="none"><a href="/blog" class="nav-dropdown-link nav-dropdown-subitem touch-target" role="menuitem">Latest Articles & Updates</a></li>
                </ul>
            </li>
            <li role="none"><a href="/pricing" class="nav-link touch-target" role="menuitem">Pricing</a></li>
            <!-- Scroll spy navigation for index page -->
            <li class="nav-scroll-spy hidden" role="none">
                <a href="#key-benefits" class="nav-link touch-target" role="menuitem">Benefits</a>
            </li>
            <li class="nav-scroll-spy hidden" role="none">
                <a href="#features" class="nav-link touch-target" role="menuitem">Features</a>
            </li>
            <li class="nav-scroll-spy hidden" role="none">
                <a href="#comparison" class="nav-link touch-target" role="menuitem">Comparison</a>
            </li>
            <li class="nav-scroll-spy hidden" role="none">
                <a href="#architecture" class="nav-link touch-target" role="menuitem">Architecture</a>
            </li>
            <li class="nav-dropdown" role="none">
                <a href="/about" class="nav-link nav-dropdown-toggle touch-target" aria-haspopup="true" aria-expanded="false" role="menuitem">About</a>
                <ul class="nav-dropdown-menu" role="menu">
                    <li role="none"><a href="/about" class="nav-dropdown-link touch-target" role="menuitem">About Us</a></li>
                    <li role="none"><a href="/privacy" class="nav-dropdown-link touch-target" role="menuitem">Privacy Policy</a></li>
                </ul>
            </li>
        </ul>

        <div class="nav-actions">
            <button id="theme-toggle" class="theme-toggle touch-target" aria-label="Toggle dark mode" title="Toggle dark mode">
                <svg class="theme-icon theme-icon--light" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <circle cx="12" cy="12" r="5"></circle>
                    <line x1="12" y1="1" x2="12" y2="3"></line>
                    <line x1="12" y1="21" x2="12" y2="23"></line>
                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                    <line x1="1" y1="12" x2="3" y2="12"></line>
                    <line x1="21" y1="12" x2="23" y2="12"></line>
                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                </svg>
                <svg class="theme-icon theme-icon--dark" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                </svg>
            </button>
            <a href="https://github.com/tamylaa/clodo-framework" class="github-btn touch-target" target="_blank" rel="noopener" aria-label="View on GitHub">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                </svg>
                <span id="star-count" aria-label="GitHub stars">0</span>
            </a>
        </div>
    </div>
</nav>

    </header>

    <!-- Migration Banner -->
    <div class="migration-banner" role="banner" aria-label="Migration announcement">
        <div class="container">
            <div class="banner-content">
                <span class="banner-text">
                    <strong>New:</strong> Migrate from Vercel/Railway to Cloudflare with Clodo
                </span>
                <a href="/migrate" class="banner-link">Learn more</a>
                <button class="banner-close" aria-label="Close banner" title="Close banner">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <main id="main-content">
        <!-- MINIMAL HERO SECTION - Critical Path Only -->
<!-- Hero styles now in critical-base.css for instant rendering -->

<section id="hero" aria-labelledby="hero-title">
    <div class="hero-container">
        <!-- Visual (Code Preview) -->
        <div class="hero-visual">
            <div class="code-window">
                <div class="code-window-header">
                    <div class="code-window-dots">
                        <span class="code-window-dot code-window-dot--red"></span>
                        <span class="code-window-dot code-window-dot--yellow"></span>
                        <span class="code-window-dot code-window-dot--green"></span>
                    </div>
                    <div class="code-window-title">
                        <span>clodo-service create</span>
                    </div>
                </div>
                <pre class="code-content"><code><span class="code-comment"># Create a new service in seconds</span>
<span class="code-command">npx create-clodo-service</span> <span class="code-arg">my-new-service</span>

<span class="code-success">✅ Service created successfully!</span>
<span class="code-success">🚀 Ready for deployment</span></code></pre>
            </div>
        </div>

        <!-- Content (Title, Subtitle, Buttons) -->
        <div class="hero-content">
            <!-- Badge Section -->
            <div class="hero-topbar">
                <div class="hero-badge-group">
                    <!-- Production Ready Badge -->
                    <div class="hero-badge">
                        <span class="hero-badge__icon">⭐</span>
                        <span>Production Ready</span>
                    </div>
                </div>
            </div>

            <!-- Headline -->
            <h1 id="hero-title" class="hero-title">
                Stop Wasting Engineering Sprints on Infrastructure Boilerplate</span>
            </h1>

            <!-- Subtitle -->
            <p class="hero-subtitle">
                The complete Cloudflare Workers toolkit for high-performance teams. Deploy battle-tested applications in 60 seconds.
            </p>

            <!-- Buttons -->
            <div class="hero-actions">
                <button type="button" data-stackblitz-url="https://stackblitz.com/github/tamylaa/clodo-starter-template?embed=1&file=index.js" data-action="open-stackblitz" class="btn btn--primary btn--large">
                    <span class="btn__icon">🚀</span>
                    <span>Try Live Demo</span>
                </button>
                <a href="/docs" class="btn btn--secondary btn--large">
                    <span class="btn__icon">📖</span>
                    <span>View Documentation</span>
                </a>
            </div>
        </div>
    </div>
</section>

        <section id="key-benefits" aria-labelledby="benefits-title">
            <div class="container">
                <div class="section-header">
                    <h2 id="benefits-title">Why Choose Clodo Framework?</h2>
                    <p>Transform your development workflow with enterprise-grade tools designed for modern SaaS applications.</p>
                </div>
                <div class="benefits-grid" role="list" aria-label="Key benefits of Clodo Framework">
                    <div class="benefit-item" role="listitem">
                        <div class="benefit-icon-wrapper">
                            <div class="benefit-icon">
                                <svg viewBox="0 0 24 24" fill="#ff0000" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                    <path d="M13 2L3 14h9l-1 8 10 -12h-9l1 -8z"/>
                                </svg>
                            </div>
                        </div>
                        <div class="benefit-content">
                            <h3 class="benefit-title">10x Faster Development</h3>
                            <p class="benefit-description">From 6 months to 3 weeks. Pre-built enterprise components eliminate infrastructure bottlenecks. Perfect for startups racing to market and enterprises accelerating digital transformation.</p>
                        </div>
                    </div>
                    <div class="benefit-item" role="listitem">
                        <div class="benefit-icon-wrapper">
                            <div class="benefit-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                    <line x1="12" y1="1" x2="12" y2="23"></line>
                                    <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="benefit-content">
                            <h3 class="benefit-title">90% Cost Reduction</h3>
                            <p class="benefit-description">$180K to $15K projects. Eliminate AWS Lambda cold starts and regional limitations. Global edge deployment with 50ms response times worldwide.</p>
                        </div>
                    </div>
                    <div class="benefit-item" role="listitem">
                        <div class="benefit-icon-wrapper">
                            <div class="benefit-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="benefit-content">
                            <h3 class="benefit-title">Enterprise Security Built-in</h3>
                            <p class="benefit-description">SOC 2 compliant architecture with automated security validation and enterprise-grade tenant isolation.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- US Enterprise Focus Section -->
        <section id="enterprise-value" aria-labelledby="enterprise-title">
            <div class="container">
                <div class="section-header">
                    <h2 id="enterprise-title">Trusted by US Enterprises for Mission-Critical Applications</h2>
                    <p>Join Fortune 500 companies and innovative startups using Clodo Framework to accelerate digital transformation and reduce infrastructure costs by 90%.</p>
                </div>
                <div class="enterprise-grid">
                    <div class="enterprise-card">
                        <div class="enterprise-icon">🏢</div>
                        <h3>Enterprise-Grade Security</h3>
                        <p>SOC 2 Type II compliant with automated security validation. Meets strict compliance requirements for healthcare, finance, and regulated industries.</p>
                    </div>
                    <div class="enterprise-card">
                        <div class="enterprise-icon">⚡</div>
                        <h3>Zero Cold Starts</h3>
                        <p>Unlike AWS Lambda's 500ms-10s cold starts, Cloudflare Workers deliver sub-50ms response times globally. Perfect for real-time applications and APIs.</p>
                    </div>
                    <div class="enterprise-card">
                        <div class="enterprise-icon">🌍</div>
                        <h3>Global Edge Network</h3>
                        <p>Deploy to 330+ data centers worldwide. Your applications run close to users everywhere, eliminating regional performance bottlenecks.</p>
                    </div>
                    <div class="enterprise-card">
                        <div class="enterprise-icon">💰</div>
                        <h3>80% Cost Savings vs AWS</h3>
                        <p>Pay only for CPU time, not wall-clock time. No over-provisioning required. Scale automatically without infrastructure management overhead.</p>
                    </div>
                </div>
                <div class="enterprise-cta">
                    <div class="cta-content">
                        <h3>Ready to Transform Your Development Workflow?</h3>
                        <p>Get a free consultation and see how Clodo Framework can reduce your next project costs by 60-90%.</p>
                        <a href="/pricing" class="btn btn--primary">Schedule Free Consultation</a>
                    </div>
                </div>
            </div>
        </section>

        <section id="cloudflare-edge" aria-labelledby="edge-title">
            <div class="container">
                <div class="section-header">
                    <h2 id="edge-title">Why Clodo Transforms Cloudflare Development</h2>
                    <p>The most comprehensive framework for Cloudflare Workers. Build enterprise SaaS applications with confidence.</p>
                </div>
                <div class="edge-grid" role="list" aria-label="Cloudflare Edge advantages">
                    <article class="edge-card" role="listitem">
                        <div class="edge-icon" aria-hidden="true">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                <circle cx="9" cy="7" r="4"/>
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                            </svg>
                        </div>
                        <h3>Multi-Tenant SaaS Ready</h3>
                        <p>Customer isolation, configuration management, and enterprise-grade security built-in. Deploy complex multi-tenant applications with confidence.</p>
                    </article>
                    <article class="edge-card" role="listitem">
                        <div class="edge-icon" aria-hidden="true">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <ellipse cx="12" cy="5" rx="9" ry="3"/>
                                <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
                                <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
                            </svg>
                        </div>
                        <h3>D1 Database + Auth + Routing</h3>
                        <p>The only framework with integrated Cloudflare D1, migrations, authentication, and routing. What other frameworks make you assemble from scratch?</p>
                    </article>
                    <article class="edge-card" role="listitem">
                        <div class="edge-icon" aria-hidden="true">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <h3>Intelligent Orchestration</h3>
                        <p>Pre-deployment validation, gap analysis, and automated deployment orchestration. Catch issues before they reach production.</p>
                    </article>
                    <article class="edge-card" role="listitem">
                        <div class="edge-icon" aria-hidden="true">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
                            </svg>
                        </div>
                        <h3>Zero Cold Starts</h3>
                        <p>Cloudflare Workers never cold start. Your applications are always warm, always fast. Perfect for SaaS platforms and APIs.</p>
                    </article>
                </div>
            </div>
        </section>

        <section id="features" class="features-section" aria-labelledby="features-title">
            <div class="container">
                <div class="features-content">
                    <h2 id="features-title">Everything You Need for Production SaaS</h2>
                    <p>The most comprehensive framework for Cloudflare Workers - what Rails did for web development, Clodo does for the edge</p>
                </div>
                <div class="features-grid" role="list" aria-label="Clodo Framework features">
                    <article class="feature-card featured" role="listitem">
                        <div class="feature-badge">Most Popular</div>
                        <div class="feature-icon" aria-hidden="true">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                <circle cx="9" cy="7" r="4"/>
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                            </svg>
                        </div>
                        <h3>Enterprise Deployment System</h3>
                        <p>Multi-domain deployment orchestration with comprehensive validation. Deploy complex enterprise applications with automated security checks and production readiness validation.</p>
                        <pre><code class="language-javascript">// Deploy multi-domain SaaS app
const deployment = await clodo.deploy({
  domains: ['tenant1.app.com', 'tenant2.app.com'],
  config: { security: 'AES-256', validation: true }
});
console.log('Deployed securely across domains');</code></pre>
                    </article>
                    <article class="feature-card featured" role="listitem">
                        <div class="feature-badge">Security First</div>
                        <div class="feature-icon" aria-hidden="true">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                            </svg>
                        </div>
                        <h3>Security-by-Default Architecture</h3>
                        <p>AES-256-CBC encrypted API tokens, automatic detection of insecure configurations, and comprehensive security validation that prevents deployment of vulnerable code.</p>
                        <pre><code class="language-javascript">// Secure token generation
const token = clodo.generateToken({
  encryption: 'AES-256-CBC',
  autoValidate: true
});
// Automatically validates security on deploy</code></pre>
                    </article>
                    <article class="feature-card featured" role="listitem">
                        <div class="feature-badge">Game Changer</div>
                        <div class="feature-icon" aria-hidden="true">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
                            </svg>
                        </div>
                        <h3>Service Autonomy</h3>
                        <p>Each service can discover and deploy itself independently. Template-based customer onboarding with reusable configuration patterns for rapid multi-tenant deployment.</p>
                    </article>
                </div>
            </div>
        </section>

        <section id="featured-guides" aria-labelledby="featured-title">
            <div class="container">
                <div class="section-header">
                    <h2 id="featured-title">Featured Guides</h2>
                    <p>Quick links to our most useful guides — perfect for engineers looking to migrate or evaluate Clodo.</p>
                </div>
                <div class="featured-guides-grid">
                    <article class="guide-card">
                        <h3><a href="/blog/clodo-framework-enterprise-roi">$180K to $15K: Enterprise ROI Case Study</a></h3>
                        <p>Real numbers: How Clodo Framework delivers 90% cost reduction and 10x faster development for enterprise SaaS teams.</p>
                    </article>
                    <article class="guide-card">
                        <h3><a href="/how-to-migrate-from-wrangler">Migrate from Wrangler — 5-Step Automated Migration</a></h3>
                        <p>Step-by-step, reversible migration with an automated analyzer and checklist.</p>
                    </article>
                    <article class="guide-card">
                        <h3><a href="/clodo-framework-api-simplification">API Simplification — How we Reduced Onboarding</a></h3>
                        <p>Practical guide: reduce complexity without losing enterprise features.</p>
                    </article>
                </div>
            </div>
        </section>

        <section id="technical-foundation" class="features-section" aria-labelledby="technical-title">
            <div class="container">
                <div class="features-content">
                    <h2 id="technical-title">Technical Foundation</h2>
                    <p>Enterprise-grade infrastructure and tooling that powers production SaaS applications</p>
                </div>
                <div class="features-grid" role="list" aria-label="Technical foundation features">
                    <article class="feature-card" role="listitem">
                        <div class="feature-icon" aria-hidden="true">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
                                <polyline points="7.5,4.27 12,6.11 16.5,4.27"/>
                                <polyline points="7.5,9.73 12,11.57 16.5,9.73"/>
                                <polyline points="12,6.11 12,11.57"/>
                            </svg>
                        </div>
                        <h3>Domain Configuration Management</h3>
                        <p>Centralized configuration with runtime discovery. JSON-based domain configs with validation, feature flags, and environment-specific settings for complex multi-tenant applications.</p>
                    </article>
                    <article class="feature-card" role="listitem">
                        <div class="feature-icon" aria-hidden="true">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <ellipse cx="12" cy="5" rx="9" ry="3"/>
                                <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
                                <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
                            </svg>
                        </div>
                        <h3>Feature Flag Management</h3>
                        <p>Runtime feature toggling with domain-specific overrides. Declarative feature management that enables safe rollouts, A/B testing, and gradual feature adoption across services.</p>
                    </article>
                    <article class="feature-card" role="listitem">
                        <div class="feature-icon" aria-hidden="true">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <h3>TypeScript Support</h3>
                        <p>Comprehensive type definitions with 500+ lines of TypeScript interfaces. Full type safety for domain configurations, feature flags, and service integrations.</p>
                    </article>
                    <article class="feature-card" role="listitem">
                        <div class="feature-icon" aria-hidden="true">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
                                <line x1="8" y1="21" x2="16" y2="21"/>
                                <line x1="12" y1="17" x2="12" y2="21"/>
                            </svg>
                        </div>
                        <h3>Performance Caching</h3>
                        <p>Schema caching, SQL query caching, and validation result caching. Optimized for Cloudflare's edge network with intelligent cache invalidation and global replication.</p>
                    </article>
                    <article class="feature-card" role="listitem">
                        <div class="feature-icon" aria-hidden="true">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                <circle cx="9" cy="7" r="4"/>
                                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                            </svg>
                        </div>
                        <h3>Multi-Tenant Customer Management</h3>
                        <p>Automated customer isolation and management with template-driven onboarding. Reusable configuration templates for rapid customer setup and enterprise-grade tenant separation.</p>
                    </article>
                </div>
            </div>
        </section>

        <section id="comparison" class="comparison-section" aria-labelledby="comparison-title">
            <div class="container">
                <div class="section-header">
                    <h2 id="comparison-title">Clodo vs Traditional Stacks</h2>
                    <p class="section-subtitle">See how Clodo Framework delivers enterprise results with developer-friendly simplicity</p>
                </div>
                <div class="comparison-grid">
                    <div class="comparison-item comparison-item--deployment">
                        <div class="comparison-header">
                            <div class="comparison-icon">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <polyline points="12,6 12,12 16,14"></polyline>
                                </svg>
                            </div>
                            <h3>Deployment Time</h3>
                            <div class="comparison-badge comparison-badge--improvement">
                                <span class="badge-text">95% Faster</span>
                            </div>
                        </div>
                        <div class="comparison-content">
                            <div class="comparison-option comparison-option--traditional">
                                <div class="option-header">
                                    <span class="option-label">Traditional</span>
                                    <span class="option-status option-status--slow">Slow</span>
                                </div>
                                <p class="option-text">2-6 months custom setup, complex configurations, manual testing</p>
                                <div class="option-metric">
                                    <span class="metric-value">6 months</span>
                                    <span class="metric-label">avg deployment</span>
                                </div>
                            </div>
                            <div class="comparison-divider">
                                <span class="divider-text">vs</span>
                            </div>
                            <div class="comparison-option comparison-option--clodo">
                                <div class="option-header">
                                    <span class="option-label">Clodo</span>
                                    <span class="option-status option-status--fast">Lightning Fast</span>
                                </div>
                                <p class="option-text">Deploy in hours with multi-tenant ready, pre-built components</p>
                                <div class="option-metric">
                                    <span class="metric-value">4 hours</span>
                                    <span class="metric-label">production ready</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="comparison-item comparison-item--security">
                        <div class="comparison-header">
                            <div class="comparison-icon">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                                    <circle cx="12" cy="16" r="1"></circle>
                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                </svg>
                            </div>
                            <h3>Security & Compliance</h3>
                            <div class="comparison-badge comparison-badge--security">
                                <span class="badge-text">Enterprise Grade</span>
                            </div>
                        </div>
                        <div class="comparison-content">
                            <div class="comparison-option comparison-option--traditional">
                                <div class="option-header">
                                    <span class="option-label">Traditional</span>
                                    <span class="option-status option-status--manual">Manual Process</span>
                                </div>
                                <p class="option-text">Manual security audits, custom compliance frameworks, ongoing maintenance</p>
                                <div class="option-metric">
                                    <span class="metric-value">Monthly</span>
                                    <span class="metric-label">security reviews</span>
                                </div>
                            </div>
                            <div class="comparison-divider">
                                <span class="divider-text">vs</span>
                            </div>
                            <div class="comparison-option comparison-option--clodo">
                                <div class="option-header">
                                    <span class="option-label">Clodo</span>
                                    <span class="option-status option-status--automated">Built-in Security</span>
                                </div>
                                <p class="option-text">AES-256 encryption, automated validation, SOC 2 compliant by default</p>
                                <div class="option-metric">
                                    <span class="metric-value">Always</span>
                                    <span class="metric-label">compliant</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="comparison-item comparison-item--scalability">
                        <div class="comparison-header">
                            <div class="comparison-icon">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                                    <polyline points="7.5,4.5 16.5,9.5"></polyline>
                                    <polyline points="7.5,19.5 16.5,14.5"></polyline>
                                </svg>
                            </div>
                            <h3>Scalability & Performance</h3>
                            <div class="comparison-badge comparison-badge--performance">
                                <span class="badge-text">Global Scale</span>
                            </div>
                        </div>
                        <div class="comparison-content">
                            <div class="comparison-option comparison-option--traditional">
                                <div class="option-header">
                                    <span class="option-label">Traditional</span>
                                    <span class="option-status option-status--complex">Complex Setup</span>
                                </div>
                                <p class="option-text">Manual scaling configs, regional limitations, performance bottlenecks</p>
                                <div class="option-metric">
                                    <span class="metric-value">Regional</span>
                                    <span class="metric-label">deployment scope</span>
                                </div>
                            </div>
                            <div class="comparison-divider">
                                <span class="divider-text">vs</span>
                            </div>
                            <div class="comparison-option comparison-option--clodo">
                                <div class="option-header">
                                    <span class="option-label">Clodo</span>
                                    <span class="option-status option-status--global">Edge Native</span>
                                </div>
                                <p class="option-text">Global CDN, automatic scaling, 50ms worldwide response times</p>
                                <div class="option-metric">
                                    <span class="metric-value">Global</span>
                                    <span class="metric-label">edge deployment</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="architecture" class="architecture-section" aria-labelledby="architecture-title">
            <div class="container">
                <div class="section-header">
                    <h2 id="architecture-title">How Clodo Works</h2>
                    <p>Enterprise-grade SaaS architecture simplified</p>
                </div>
                <div class="architecture-diagram">
                    <div class="diagram-container">
                        <svg viewBox="0 0 800 400" class="architecture-svg" aria-labelledby="diagram-title" role="img">
                            <title id="diagram-title">Clodo Framework Architecture Overview</title>
                            
                            <!-- Cloudflare Workers Layer -->
                            <rect x="50" y="50" width="700" height="60" fill="var(--color-primary)" opacity="0.1" stroke="var(--color-primary)" stroke-width="2" rx="8"/>
                            <text x="400" y="85" text-anchor="middle" class="diagram-label">Cloudflare Workers (Edge Runtime)</text>
                            
                            <!-- Clodo Framework Layer -->
                            <rect x="100" y="140" width="600" height="80" fill="var(--color-secondary)" opacity="0.1" stroke="var(--color-secondary)" stroke-width="2" rx="8"/>
                            <text x="400" y="175" text-anchor="middle" class="diagram-label">Clodo Framework</text>
                            <text x="400" y="195" text-anchor="middle" class="diagram-subtext">Security • Multi-tenant • Orchestration</text>
                            
                            <!-- Services Layer -->
                            <rect x="150" y="250" width="500" height="60" fill="var(--color-accent)" opacity="0.1" stroke="var(--color-accent)" stroke-width="2" rx="8"/>
                            <text x="400" y="280" text-anchor="middle" class="diagram-label">Autonomous Services</text>
                            <text x="400" y="295" text-anchor="middle" class="diagram-subtext">Domain-specific • Self-deploying • Feature-flagged</text>
                            
                            <!-- Data Layer -->
                            <rect x="200" y="340" width="400" height="40" fill="var(--color-success)" opacity="0.1" stroke="var(--color-success)" stroke-width="2" rx="8"/>
                            <text x="400" y="360" text-anchor="middle" class="diagram-label">D1 Database + Auth + Routing</text>
                            
                            <!-- Connection Lines -->
                            <line x1="400" y1="110" x2="400" y2="140" stroke="var(--color-text-secondary)" stroke-width="1" marker-end="url(#arrowhead)"/>
                            <line x1="400" y1="220" x2="400" y2="250" stroke="var(--color-text-secondary)" stroke-width="1" marker-end="url(#arrowhead)"/>
                            <line x1="400" y1="310" x2="400" y2="340" stroke="var(--color-text-secondary)" stroke-width="1" marker-end="url(#arrowhead)"/>
                            
                            <!-- Arrow marker -->
                            <defs>
                                <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                                    <polygon points="0 0, 10 3.5, 0 7" fill="var(--color-text-secondary)"/>
                                </marker>
                            </defs>
                        </svg>
                    </div>
                    <div class="diagram-features">
                        <div class="feature-highlight">
                            <div class="highlight-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                </svg>
                            </div>
                            <h4>Security by Default</h4>
                            <p>AES-256 encryption, validation, and automated security checks</p>
                        </div>
                        <div class="feature-highlight">
                            <div class="highlight-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <polygon points="13 2 3 14 12 14 11 22 21 12 12 12 13 2"></polygon>
                                </svg>
                            </div>
                            <h4>Service Autonomy</h4>
                            <p>Each service deploys independently with domain-specific configurations</p>
                        </div>
                        <div class="feature-highlight">
                            <div class="highlight-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <circle cx="12" cy="12" r="1"></circle>
                                    <path d="M12 1v6"></path>
                                    <path d="M4.22 4.22l4.24 4.24"></path>
                                    <path d="M1 12h6"></path>
                                    <path d="M4.22 19.78l4.24-4.24"></path>
                                    <path d="M12 23v-6"></path>
                                    <path d="M19.78 19.78l-4.24-4.24"></path>
                                    <path d="M23 12h-6"></path>
                                    <path d="M19.78 4.22l-4.24 4.24"></path>
                                </svg>
                            </div>
                            <h4>Edge Performance</h4>
                            <p>Zero cold starts, global CDN, and intelligent caching</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="social-proof" class="social-proof" aria-labelledby="social-proof-title">
            <div class="container">
                <div class="social-proof__container">
                    <div class="social-proof__header">
                        <h2 id="social-proof-title" class="social-proof__title">Proven in Production</h2>
                        <p class="social-proof__subtitle">Real metrics from npm, GitHub, and production deployments</p>
                    </div>
                    <div class="social-proof__grid" role="list" aria-label="Framework metrics and stats">
                        <!-- Real npm Stats -->
                        <article class="testimonial testimonial--featured" role="listitem">
                            <div class="testimonial__badge">📦 npm Verified</div>
                            <div class="testimonial__content">
                                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; text-align: center; margin-bottom: 1rem;">
                                    <div>
                                        <div style="font-size: 2rem; font-weight: 700; color: var(--color-primary);">1,974</div>
                                        <div style="font-size: 0.875rem; color: var(--text-secondary);">Monthly Downloads</div>
                                    </div>
                                    <div>
                                        <div style="font-size: 2rem; font-weight: 700; color: var(--color-primary);">79</div>
                                        <div style="font-size: 0.875rem; color: var(--text-secondary);">Published Versions</div>
                                    </div>
                                </div>
                                <p style="font-style: italic; color: var(--text-secondary);">Developers worldwide are building with Clodo Framework. Join them.</p>
                            </div>
                            <div class="testimonial__author">
                                <div class="testimonial__avatar" aria-label="npm logo">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23CB3837'/%3E%3Ctext x='50' y='65' font-size='50' font-weight='bold' text-anchor='middle' fill='var(--color-white)'%3Enpm%3C/text%3E%3C/svg%3E" alt="npm registry" width="48" height="48" loading="lazy" decoding="async">
                                </div>
                                <div class="testimonial__info">
                                    <cite class="testimonial__name">@tamyla/clodo-framework</cite>
                                    <p class="testimonial__title"><a href="https://www.npmjs.com/package/@tamyla/clodo-framework" target="_blank" rel="noopener" style="color: var(--color-primary);">View on npm →</a></p>
                                </div>
                            </div>
                        </article>
                        <!-- Test Coverage Stats -->
                        <article class="testimonial testimonial--featured" role="listitem">
                            <div class="testimonial__badge">✅ Test Verified</div>
                            <div class="testimonial__content">
                                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; text-align: center; margin-bottom: 1rem;">
                                    <div>
                                        <div style="font-size: 2rem; font-weight: 700; color: var(--success-color);">98.9%</div>
                                        <div style="font-size: 0.875rem; color: var(--text-secondary);">Test Coverage</div>
                                    </div>
                                    <div>
                                        <div style="font-size: 2rem; font-weight: 700; color: var(--success-color);">463</div>
                                        <div style="font-size: 0.875rem; color: var(--text-secondary);">Tests Passing</div>
                                    </div>
                                </div>
                                <p style="font-style: italic; color: var(--text-secondary);">Enterprise-grade reliability. Every deployment validated through 10-phase testing.</p>
                            </div>
                            <div class="testimonial__author">
                                <div class="testimonial__avatar" aria-label="GitHub logo">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23181717'/%3E%3Ctext x='50' y='60' font-size='30' font-weight='bold' text-anchor='middle' fill='var(--color-white)'%3EGH%3C/text%3E%3C/svg%3E" alt="GitHub" width="48" height="48" loading="lazy" decoding="async">
                                </div>
                                <div class="testimonial__info">
                                    <cite class="testimonial__name">tamylaa/clodo-framework</cite>
                                    <p class="testimonial__title"><a href="https://github.com/tamylaa/clodo-framework" target="_blank" rel="noopener" style="color: var(--color-primary);">View on GitHub →</a></p>
                                </div>
                            </div>
                        </article>
                        <!-- Service Generation Stats -->
                        <article class="testimonial testimonial--featured" role="listitem">
                            <div class="testimonial__badge">🚀 Production Ready</div>
                            <div class="testimonial__content">
                                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; text-align: center; margin-bottom: 1rem;">
                                    <div>
                                        <div style="font-size: 2rem; font-weight: 700; color: var(--color-primary);">28+</div>
                                        <div style="font-size: 0.875rem; color: var(--text-secondary);">Files Generated</div>
                                    </div>
                                    <div>
                                        <div style="font-size: 2rem; font-weight: 700; color: var(--color-primary);">1 cmd</div>
                                        <div style="font-size: 0.875rem; color: var(--text-secondary);">To Deploy</div>
                                    </div>
                                </div>
                                <p style="font-style: italic; color: var(--text-secondary);">Complete Cloudflare Worker services generated instantly. Worker code, configs, scripts, and docs.</p>
                            </div>
                            <div class="testimonial__author">
                                <div class="testimonial__avatar" aria-label="Cloudflare logo">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23F38020'/%3E%3Ctext x='50' y='60' font-size='30' font-weight='bold' text-anchor='middle' fill='var(--color-white)'%3ECF%3C/text%3E%3C/svg%3E" alt="Cloudflare" width="48" height="48" loading="lazy" decoding="async">
                                </div>
                                <div class="testimonial__info">
                                    <cite class="testimonial__name">Cloudflare Workers</cite>
                                    <p class="testimonial__title">330+ edge locations worldwide</p>
                                </div>
                            </div>
                        </article>
                        <!-- Global Performance -->
                        <article class="testimonial" role="listitem">
                            <div class="testimonial__content">
                                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; text-align: center; margin-bottom: 1rem;">
                                    <div>
                                        <div style="font-size: 2rem; font-weight: 700; color: var(--success-color);">&lt;5ms</div>
                                        <div style="font-size: 0.875rem; color: var(--text-secondary);">Cold Start</div>
                                    </div>
                                    <div>
                                        <div style="font-size: 2rem; font-weight: 700; color: var(--success-color);">~12ms</div>
                                        <div style="font-size: 0.875rem; color: var(--text-secondary);">P95 Latency</div>
                                    </div>
                                </div>
                                <p style="font-style: italic; color: var(--text-secondary);">Sub-millisecond starts. Same performance whether your users are next door or across the planet.</p>
                            </div>
                            <div class="testimonial__author">
                                <div class="testimonial__avatar" aria-label="Performance icon">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%2310B981'/%3E%3Ctext x='50' y='65' font-size='40' text-anchor='middle' fill='var(--color-white)'%3E⚡%3C/text%3E%3C/svg%3E" alt="Performance" width="48" height="48" loading="lazy" decoding="async">
                                </div>
                                <div class="testimonial__info">
                                    <cite class="testimonial__name">Edge Performance</cite>
                                    <p class="testimonial__title">V8 Isolates • Zero Cold Starts</p>
                                </div>
                            </div>
                        </article>
                        <!-- TypeScript Support -->
                        <article class="testimonial" role="listitem">
                            <div class="testimonial__content">
                                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; text-align: center; margin-bottom: 1rem;">
                                    <div>
                                        <div style="font-size: 2rem; font-weight: 700; color: var(--color-primary);">500+</div>
                                        <div style="font-size: 0.875rem; color: var(--text-secondary);">Type Definitions</div>
                                    </div>
                                    <div>
                                        <div style="font-size: 2rem; font-weight: 700; color: var(--color-primary);">100%</div>
                                        <div style="font-size: 0.875rem; color: var(--text-secondary);">API Coverage</div>
                                    </div>
                                </div>
                                <p style="font-style: italic; color: var(--text-secondary);">Full TypeScript support with IntelliSense, auto-completion, and type-safe APIs.</p>
                            </div>
                            <div class="testimonial__author">
                                <div class="testimonial__avatar" aria-label="TypeScript logo">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%233178C6'/%3E%3Ctext x='50' y='65' font-size='40' font-weight='bold' text-anchor='middle' fill='var(--color-white)'%3ETS%3C/text%3E%3C/svg%3E" alt="TypeScript" width="48" height="48" loading="lazy" decoding="async">
                                </div>
                                <div class="testimonial__info">
                                    <cite class="testimonial__name">TypeScript First</cite>
                                    <p class="testimonial__title">Complete type safety</p>
                                </div>
                            </div>
                        </article>
                        <!-- Security -->
                        <article class="testimonial" role="listitem">
                            <div class="testimonial__content">
                                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; text-align: center; margin-bottom: 1rem;">
                                    <div>
                                        <div style="font-size: 2rem; font-weight: 700; color: var(--success-color);">AES-256</div>
                                        <div style="font-size: 0.875rem; color: var(--text-secondary);">Encryption</div>
                                    </div>
                                    <div>
                                        <div style="font-size: 2rem; font-weight: 700; color: var(--success-color);">0</div>
                                        <div style="font-size: 0.875rem; color: var(--text-secondary);">Vulnerabilities</div>
                                    </div>
                                </div>
                                <p style="font-style: italic; color: var(--text-secondary);">Security-first architecture. Pre-deployment validation blocks insecure configurations automatically.</p>
                            </div>
                            <div class="testimonial__author">
                                <div class="testimonial__avatar" aria-label="Security icon">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%238B5CF6'/%3E%3Ctext x='50' y='65' font-size='40' text-anchor='middle' fill='var(--color-white)'%3E🔒%3C/text%3E%3C/svg%3E" alt="Security" width="48" height="48" loading="lazy" decoding="async">
                                </div>
                                <div class="testimonial__info">
                                    <cite class="testimonial__name">Security by Default</cite>
                                    <p class="testimonial__title">Enterprise-grade protection</p>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </section>

        <!-- Success Stories Section -->
        <section class="section section--gray" aria-labelledby="case-studies-heading">
            <div class="container">
                <div class="section-header">
                    <h2 id="case-studies-heading" class="section-title">Proven Results from Real Companies</h2>
                    <p class="section-subtitle">See how enterprises are using Clodo Framework to reduce costs, improve performance, and accelerate development.</p>
                </div>
                <div class="grid grid--cols-2" style="margin-top: var(--spacing-2xl);">
                    <article class="card" style="padding: var(--spacing-xl); background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);">
                        <div class="card-header" style="margin-bottom: var(--spacing-md);">
                            <span class="badge" style="display: inline-block; padding: 0.25rem 0.75rem; background: var(--success-color); color: var(--color-white); border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; margin-bottom: var(--spacing-md);">FinTech</span>
                            <h3 style="font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm);">80% Cost Reduction in Payment Platform</h3>
                        </div>
                        <p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">Regional bank migrated legacy payment systems to Clodo Framework, achieving zero-downtime deployment and massive cost savings.</p>
                        <div class="metrics" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); padding: var(--spacing-md); background: var(--bg-secondary); border-radius: var(--radius-md);">
                            <div>
                                <div style="font-size: var(--font-size-2xl); font-weight: 700; color: var(--success-color);">80%</div>
                                <div style="font-size: var(--font-size-sm); color: var(--text-muted);">Cost Reduction</div>
                            </div>
                            <div>
                                <div style="font-size: var(--font-size-2xl); font-weight: 700; color: var(--success-color);">0</div>
                                <div style="font-size: var(--font-size-sm); color: var(--text-muted);">Downtime</div>
                            </div>
                        </div>
                        <a href="/case-studies/fintech-payment-platform" class="btn btn-outline" style="width: 100%;">Read Full Case Study →</a>
                    </article>
                    <article class="card" style="padding: var(--spacing-xl); background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);">
                        <div class="card-header" style="margin-bottom: var(--spacing-md);">
                            <span class="badge" style="display: inline-block; padding: 0.25rem 0.75rem; background: var(--info-color); color: var(--color-white); border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; margin-bottom: var(--spacing-md);">Healthcare SaaS</span>
                            <h3 style="font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm);">67% Cost Reduction for Fortune 500</h3>
                        </div>
                        <p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">Fortune 500 healthcare company reduced custom software development costs significantly while improving security and compliance.</p>
                        <div class="metrics" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); padding: var(--spacing-md); background: var(--bg-secondary); border-radius: var(--radius-md);">
                            <div>
                                <div style="font-size: var(--font-size-2xl); font-weight: 700; color: var(--success-color);">67%</div>
                                <div style="font-size: var(--font-size-sm); color: var(--text-muted);">Cost Savings</div>
                            </div>
                            <div>
                                <div style="font-size: var(--font-size-2xl); font-weight: 700; color: var(--success-color);">3x</div>
                                <div style="font-size: var(--font-size-sm); color: var(--text-muted);">Faster Development</div>
                            </div>
                        </div>
                        <a href="/case-studies/healthcare-saas-platform" class="btn btn-outline" style="width: 100%;">Read Full Case Study →</a>
                    </article>
                </div>
                <div style="text-align: center; margin-top: var(--spacing-2xl);">
                    <a href="case-studies/" class="btn btn-primary btn-large">View All Case Studies</a>
                </div>
            </div>
        </section>

        <!-- Latest from Blog Section -->
        <section class="section" aria-labelledby="blog-section-heading">
            <div class="container">
                <div class="section-header">
                    <h2 id="blog-section-heading" class="section-title">Latest from the Blog</h2>
                    <p class="section-subtitle">Tutorials, deep-dives, and insights on edge computing, Cloudflare Workers, and modern web development.</p>
                </div>
                <div class="grid grid--cols-3" style="margin-top: var(--spacing-2xl);">
                    <article class="card" style="padding: var(--spacing-lg); background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);">
                        <div style="margin-bottom: var(--spacing-sm);">
                            <span style="display: inline-block; padding: 0.25rem 0.75rem; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600;">Tutorial</span>
                            <time datetime="2024-11-25" style="font-size: 0.875rem; color: var(--text-muted); margin-left: 0.5rem;">Nov 25, 2024</time>
                        </div>
                        <h3 style="font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); line-height: 1.3;">
                            <a href="/blog/cloudflare-workers-tutorial-beginners" style="color: var(--text-primary); text-decoration: none;">Cloudflare Workers Tutorial: Build Your First Serverless API</a>
                        </h3>
                        <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: var(--spacing-md);">Complete beginner guide with hands-on examples. Build, test, and deploy your first edge API in under 30 minutes.</p>
                        <a href="/blog/cloudflare-workers-tutorial-beginners" style="color: var(--color-primary); font-weight: 600; font-size: 0.875rem;">Read Tutorial →</a>
                    </article>
                    <article class="card" style="padding: var(--spacing-lg); background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);">
                        <div style="margin-bottom: var(--spacing-sm);">
                            <span style="display: inline-block; padding: 0.25rem 0.75rem; background: var(--success-color); color: var(--color-white); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600;">Deep Dive</span>
                            <time datetime="2024-11-20" style="font-size: 0.875rem; color: var(--text-muted); margin-left: 0.5rem;">Nov 20, 2024</time>
                        </div>
                        <h3 style="font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); line-height: 1.3;">
                            <a href="/blog/cloudflare-infrastructure-myth" style="color: var(--text-primary); text-decoration: none;">The "Just Use AWS Lambda" Myth: Why Edge Computing Changes Everything</a>
                        </h3>
                        <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: var(--spacing-md);">AWS Lambda vs Cloudflare Workers: Real benchmarks, cost analysis, and when each makes sense.</p>
                        <a href="/blog/cloudflare-infrastructure-myth" style="color: var(--color-primary); font-weight: 600; font-size: 0.875rem;">Read Article →</a>
                    </article>
                    <article class="card" style="padding: var(--spacing-lg); background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);">
                        <div style="margin-bottom: var(--spacing-sm);">
                            <span style="display: inline-block; padding: 0.25rem 0.75rem; background: var(--info-color); color: var(--color-white); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600;">DX</span>
                            <time datetime="2024-11-15" style="font-size: 0.875rem; color: var(--text-muted); margin-left: 0.5rem;">Nov 15, 2024</time>
                        </div>
                        <h3 style="font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); line-height: 1.3;">
                            <a href="/blog/stackblitz-integration-journey" style="color: var(--text-primary); text-decoration: none;">Building an Instant "Try Now" Experience with StackBlitz</a>
                        </h3>
                        <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: var(--spacing-md);">How we transformed developer onboarding from 30 minutes to 60 seconds with live code sandboxes.</p>
                        <a href="/blog/stackblitz-integration-journey" style="color: var(--color-primary); font-weight: 600; font-size: 0.875rem;">Read Article →</a>
                    </article>
                </div>
                <div style="text-align: center; margin-top: var(--spacing-2xl);">
                    <a href="/blog/" class="btn btn-outline btn-large">View All Articles →</a>
                </div>
            </div>
        </section>

        <!-- Developer Resources Section - HIGH SEO VALUE -->
        <section id="developer-resources" class="features-section" aria-labelledby="resources-title">
            <div class="container">
                <div class="section-header">
                    <h2 id="resources-title">📚 Developer Resources</h2>
                    <p>Master Cloudflare Workers and serverless architecture with our comprehensive guides</p>
                </div>
                <div class="features-grid" role="list" aria-label="Developer resources">
                    <div class="feature-card" role="listitem">
                        <div class="feature-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                <polyline points="14,2 14,8 20,8"/>
                            </svg>
                        </div>
                        <div class="feature-content">
                            <h3 class="feature-title">Cloudflare Workers Development Guide 2025</h3>
                            <p class="feature-description">Complete tutorial covering edge computing, D1 database, KV storage, and production deployment strategies.</p>
                            <a href="/cloudflare-workers-development-guide" class="feature-link">Read the Guide →</a>
                        </div>
                    </div>
                    <div class="feature-card" role="listitem">
                        <div class="feature-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                                <line x1="9" y1="9" x2="15" y2="15"/>
                                <line x1="15" y1="9" x2="9" y2="15"/>
                            </svg>
                        </div>
                        <div class="feature-content">
                            <h3 class="feature-title">Serverless Architecture Best Practices</h3>
                            <p class="feature-description">Master design patterns, cost optimization, performance tuning, and security for scalable serverless applications.</p>
                            <a href="/serverless-architecture-best-practices" class="feature-link">Read the Guide →</a>
                        </div>
                    </div>
                    <div class="feature-card" role="listitem">
                        <div class="feature-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
                            </svg>
                        </div>
                        <div class="feature-content">
                            <h3 class="feature-title">Quick Start Tutorial</h3>
                            <p class="feature-description">Get up and running with Clodo Framework in 5 minutes. Build your first enterprise SaaS application today.</p>
                            <a href="/quick-start" class="feature-link">Start Building →</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Community & Shared Prosperity Section - Reusable Template -->
<section id="community-prosperity" class="community-section" aria-labelledby="community-title">
    <div class="container">
        <div class="section-header" style="margin-bottom: var(--spacing-2xl);">
            <h2 id="community-title">🌱 Built by the Community, for the Community</h2>
            <p class="community-tagline">Clodo Framework is an open source project where your success is our shared mission. Every contribution, feedback, and use case strengthens the entire ecosystem.</p>
        </div>
        
        <div class="community-grid">
            <!-- Community Values -->
            <div class="community-card community-card--values">
                <h3 class="community-card-title">
                    <span class="community-card-icon">🤝</span>
                    Our Shared Values
                </h3>
                <ul class="community-values-list">
                    <li class="community-value-item">
                        <span class="community-value-check">✓</span>
                        <div class="community-value-content">
                            <strong>Transparency First</strong>
                            <p>Public roadmap, open discussions, and community-driven decisions</p>
                        </div>
                    </li>
                    <li class="community-value-item">
                        <span class="community-value-check">✓</span>
                        <div class="community-value-content">
                            <strong>Collaborative Growth</strong>
                            <p>Rising tide lifts all boats — your success makes the project stronger</p>
                        </div>
                    </li>
                    <li class="community-value-item">
                        <span class="community-value-check">✓</span>
                        <div class="community-value-content">
                            <strong>Developer-Centric</strong>
                            <p>Built by developers for developers — your pain points drive our roadmap</p>
                        </div>
                    </li>
                    <li class="community-value-item">
                        <span class="community-value-check">✓</span>
                        <div class="community-value-content">
                            <strong>Shared Prosperity</strong>
                            <p>60% cost savings you achieve multiplies across the community</p>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- Ways to Contribute -->
            <div class="community-card community-card--contribute">
                <h3 class="community-card-title">
                    <span class="community-card-icon">💡</span>
                    How to Contribute
                </h3>
                <div class="community-contribute-list">
                    <a href="https://github.com/tamylaa/clodo-framework/issues" target="_blank" rel="noopener" class="community-contribute-item">
                        <div class="community-contribute-content">
                            <div class="community-contribute-title">🐛 Report Issues & Suggest Features</div>
                            <div class="community-contribute-desc">Found a bug? Have an idea? GitHub issues are the best place</div>
                        </div>
                        <span class="community-contribute-arrow">→</span>
                    </a>
                    <a href="https://github.com/tamylaa/clodo-framework/pulls" target="_blank" rel="noopener" class="community-contribute-item">
                        <div class="community-contribute-content">
                            <div class="community-contribute-title">📝 Submit Pull Requests</div>
                            <div class="community-contribute-desc">Code contributions welcome — even small fixes matter</div>
                        </div>
                        <span class="community-contribute-arrow">→</span>
                    </a>
                    <a href="/community/welcome" class="community-contribute-item">
                        <div class="community-contribute-content">
                            <div class="community-contribute-title">💬 Share Your Experience</div>
                            <div class="community-contribute-desc">Blog posts, case studies, and community stories inspire others</div>
                        </div>
                        <span class="community-contribute-arrow">→</span>
                    </a>
                    <a href="https://github.com/tamylaa/clodo-framework/discussions" target="_blank" rel="noopener" class="community-contribute-item">
                        <div class="community-contribute-content">
                            <div class="community-contribute-title">🗣️ Join Discussions</div>
                            <div class="community-contribute-desc">Design decisions, feature roadmap, and technical discussions</div>
                        </div>
                        <span class="community-contribute-arrow">→</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Community Impact Stats -->
        <div class="community-stats">
            <h3 class="community-stats-title">The Power of Community</h3>
            <div class="community-stats-grid">
                <div class="community-stat-item">
                    <div class="community-stat-number">1,000+</div>
                    <div class="community-stat-label">Active Developers</div>
                    <div class="community-stat-desc">Building with Clodo</div>
                </div>
                <div class="community-stat-item">
                    <div class="community-stat-number">$180M+</div>
                    <div class="community-stat-label">Total Cost Savings</div>
                    <div class="community-stat-desc">Across all projects</div>
                </div>
                <div class="community-stat-item">
                    <div class="community-stat-number">50+</div>
                    <div class="community-stat-label">Community Contributors</div>
                    <div class="community-stat-desc">Making it better</div>
                </div>
                <div class="community-stat-item">
                    <div class="community-stat-number">Weekly</div>
                    <div class="community-stat-label">Office Hours</div>
                    <div class="community-stat-desc">Community support</div>
                </div>
            </div>
        </div>

        <!-- Community Highlights -->
        <div class="community-commitment">
            <h3 class="community-commitment-title">Every Line of Code You Write Strengthens the Project</h3>
            <p class="community-commitment-desc">From bug fixes to new features, from documentation improvements to community support — every contribution multiplies the value for everyone using Clodo Framework.</p>
            <div class="community-commitment-actions">
                <a href="https://github.com/tamylaa/clodo-framework/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener" class="community-action-btn community-action-btn--primary">📖 Contribution Guide</a>
                <a href="/community/welcome" class="community-action-btn community-action-btn--secondary">💬 Community Hub</a>
            </div>
        </div>
    </div>
</section>


        <section id="cta" class="cta-section" style="background: linear-gradient(135deg, #0066ff 0%, #0052cc 50%, #0066ff 100%); color: white;" aria-labelledby="cta-title">
            <div class="container">
                <div class="cta-container" style="display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1;">
                    <div class="cta-visual" style="display: flex; flex-direction: column; gap: 2rem; align-items: center; justify-content: center;">
                        <!-- Open Source Badge with SVG -->
                        <svg width="120" height="120" viewBox="0 0 120 120" style="margin-bottom: 1rem;" aria-label="Open Source Badge">
                            <!-- Outer circle -->
                            <circle cx="60" cy="60" r="55" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="2"/>
                            <!-- Inner glow -->
                            <circle cx="60" cy="60" r="50" fill="rgba(255,255,255,0.05)"/>
                            <!-- Bracket open -->
                            <path d="M 35 30 L 30 30 L 30 90 L 35 90" stroke="rgba(255,255,255,0.8)" stroke-width="3" fill="none" stroke-linecap="round"/>
                            <!-- Bracket close -->
                            <path d="M 85 30 L 90 30 L 90 90 L 85 90" stroke="rgba(255,255,255,0.8)" stroke-width="3" fill="none" stroke-linecap="round"/>
                            <!-- Code inside -->
                            <text x="60" y="65" font-size="24" font-weight="bold" text-anchor="middle" fill="white" opacity="0.9">&lt;&gt;</text>
                        </svg>
                        
                        <div class="cta-badge" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); border-radius: 50px; backdrop-filter: blur(10px); font-size: 0.875rem; font-weight: 600; color: white; text-transform: uppercase; letter-spacing: 0.05em;">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
                            </svg>
                            <span>Open Source</span>
                        </div>

                        <div class="cta-stats">
                            <div class="stat-item">
                                <span class="stat-number">60%</span>
                                <span class="stat-label">Cost Reduction</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number">4hrs</span>
                                <span class="stat-label">Setup Time</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number">50ms</span>
                                <span class="stat-label">Global Latency</span>
                            </div>
                        </div>
                    </div>
                    <div class="cta-content">
                        <div class="cta-header">
                            <h2 id="cta-title">Ready to Join a Thriving Open Source Community?</h2>
                            <div class="cta-subtitle">
                                <p>Start building today and become part of the shared prosperity movement. Your success is our community's success.</p>
                                <p class="cta-highlight">Build faster. Cost less. Together.</p>
                            </div>
                        </div>
                        <div class="cta-features">
                            <div class="feature-item">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                    <polyline points="20,6 9,17 4,12"></polyline>
                                </svg>
                                <span>Pre-Flight Checker included</span>
                            </div>
                            <div class="feature-item">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                    <polyline points="20,6 9,17 4,12"></polyline>
                                </svg>
                                <span>Enterprise-grade security</span>
                            </div>
                            <div class="feature-item">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                    <polyline points="20,6 9,17 4,12"></polyline>
                                </svg>
                                <span>Multi-tenant ready</span>
                            </div>
                        </div>
                        <div class="cta-actions" aria-label="Call to action buttons">
                            <button 
                                type="button"
                                data-stackblitz-url="https://stackblitz.com/github/tamylaa/clodo-starter-template?embed=1&file=index.js"
                                class="btn btn-primary btn-large cta-primary-btn"
                                aria-describedby="cta-primary-desc"
                                title="Open Clodo Framework starter in StackBlitz"
                            >
                                <span>Try Live Demo</span>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                    <path d="M5 12h14M12 5l7 7-7 7"/>
                                </svg>
                            </button>
                            <span id="cta-primary-desc" class="sr-only">Open Clodo Framework starter template in StackBlitz</span>
                            <a href="/docs" class="btn btn-outline btn-large cta-secondary-btn" aria-describedby="cta-secondary-desc">
                                <span>Documentation</span>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                    <path d="M12 19V5M5 12h14M12 5l7 7-7 7"/>
                                </svg>
                            </a>
                            <span id="cta-secondary-desc" class="sr-only">Navigate to documentation to start building with Clodo Framework</span>
                            <a href="https://github.com/tamylaa/clodo-framework" class="btn btn-outline btn-large cta-tertiary-btn" target="_blank" rel="noopener" aria-describedby="cta-tertiary-desc">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                                </svg>
                                <span>View Source</span>
                                <span class="btn-badge">⭐ 0</span>
                            </a>
                            <span id="cta-secondary-desc" class="sr-only">Open GitHub repository in new tab to view source code</span>
                        </div>
                        <div class="cta-trust">
                            <p class="trust-text">Trusted by developers at</p>
                            <div class="trust-logos">
                                <div class="trust-placeholder">Enterprise Ready</div>
                            </div>
                            <div style="margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid rgba(255,255,255,0.1);">
                                <p class="trust-text">Join thousands of developers</p>
                                <a href="/community/welcome" class="btn btn-outline" style="margin-top: var(--spacing-md);">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="9" cy="7" r="4"></circle>
                                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                    </svg>
                                    <span>Join the Community</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main><footer>
    <div class="footer-content">
        <div class="footer-section">
            <div class="footer-logo">
                <svg class="logo-icon" aria-hidden="true" width="24" height="24" viewBox="0 0 256 256">
                    <defs>
                        <linearGradient id="footer-logo-g" x1="0" y1="0" x2="1" y2="1">
                            <stop offset="0%" stop-color="#1d4ed8"/>
                            <stop offset="100%" stop-color="#6366f1"/>
                        </linearGradient>
                    </defs>
                    <rect width="256" height="256" rx="48" fill="#0b1220"/>
                    <path d="M144 16l-80 128h56l-8 96 80-128h-56l8-96z" fill="url(#footer-logo-g)"/>
                </svg>
                <span class="logo-text">Clodo</span>
            </div>
            <p>Building the future of edge computing, one service at a time. Join thousands of developers deploying on Cloudflare Workers with enterprise-grade performance and security.</p>

            <!-- Newsletter Form - Footer Variant -->
<!-- Used in: templates/footer.html -->

<div class="footer-newsletter" id="newsletter">
    <h4>Stay Updated</h4>
    <p id="newsletter-helper" class="form-helper">Product updates, engineering posts, and launch notes. <strong>1–2 emails/month.</strong></p>
    <form class="newsletter-form" action="/newsletter-subscribe" method="post" data-newsletter-form>
        <input type="text" name="website" class="hp-field" aria-hidden="true" tabindex="-1" autocomplete="off" data-honeypot="true">
        <input type="hidden" name="source" value="footer">
        <div class="form-group">
            <label for="newsletter-email" class="sr-only">Email address</label>
            <input id="newsletter-email" name="email" type="email" placeholder="Enter your email" autocomplete="email" inputmode="email" aria-describedby="newsletter-helper" required>
            <button type="submit" class="btn btn--primary" aria-label="Subscribe to newsletter">Subscribe</button>
        </div>
        <div class="reassurance">No spam. Unsubscribe anytime.</div>
        <div class="consent">
            <input type="checkbox" id="newsletter-consent" name="consent" required>
            <label for="newsletter-consent">I agree to receive emails from Clodo Framework and accept the <a href="/privacy">Privacy Policy</a>.</label>
        </div>
        <p class="form-message" aria-live="polite" role="status"></p>
        <noscript>
            <p class="form-helper">JavaScript is required to submit this form. Please email <a href="mailto:product@clodo.dev">product@clodo.dev</a>.</p>
        </noscript>
    </form>
</div>
        </div>

        <nav class="footer-section" aria-labelledby="footer-product">
            <h4 id="footer-product">Product</h4>
            <ul role="list">
                <li><a href="/product">Product Overview</a></li>
                <li><a href="/docs">Documentation</a></li>
                <li><a href="/examples">Code Examples</a></li>
                <li><a href="/pricing">Pricing</a></li>
                <li><a href="/migrate">Migration Guide</a></li>
                <li><a href="/clodo-vs-lambda">Clodo vs AWS Lambda</a></li>
                <li><a href="https://github.com/tamylaa/clodo-framework" target="_blank" rel="noopener">GitHub</a></li>
                <li><a href="/docs#api">API Reference</a></li>
                <li><a href="/product#expert-assessment">Expert Review</a></li>
            </ul>
        </nav>

        <nav class="footer-section" aria-labelledby="footer-developers">
            <h4 id="footer-developers">Developers</h4>
            <ul role="list">
                <li><a href="/docs#getting-started">Getting Started</a></li>
                <li><a href="/docs#deployment">Deployment</a></li>
                <li><a href="/docs#security">Security Guide</a></li>
                <li><a href="/docs#troubleshooting">Troubleshooting</a></li>
                <li><a href="/examples">Example Projects</a></li>
                <li><a href="https://github.com/tamylaa/clodo-framework/releases" target="_blank" rel="noopener">Release Notes</a></li>
            </ul>
        </nav>

        <nav class="footer-section" aria-labelledby="footer-blog">
            <h4 id="footer-blog">Resources</h4>
            <ul role="list">
                <li><a href="/blog/">Blog</a></li>
                <li><a href="/blog/cloudflare-infrastructure-myth">Infrastructure Revolution</a></li>
                <li><a href="/case-studies/">Case Studies</a></li>
                <li><a href="/cloudflare-framework">Cloudflare Framework Guide</a></li>
                <li><a href="/clodo-framework-promise-to-reality">From Promise to Reality</a></li>
                <li><a href="/clodo-framework-api-simplification">API Complexity Crisis</a></li>
                <li><a href="/faq">Frequently Asked Questions</a></li>
                <li><a href="/about#game-changer">Our Story</a></li>
                <li><a href="/about#roadmap">Product Roadmap</a></li>
            </ul>
        </nav>

        <nav class="footer-section" aria-labelledby="footer-company">
            <h4 id="footer-company">Company</h4>
            <ul role="list">
                <li><a href="/about">About Us</a></li>
                <li><a href="/about#vision">Our Mission</a></li>
                <li><a href="/about#roadmap">Roadmap</a></li>
                <li><a href="/about#game-changer">Our Story</a></li>
                <li><a href="/pricing#contact">Contact</a></li>
                <li><a href="/about#team">Team</a></li>
                <li><a href="/about#careers">Careers</a></li>
            </ul>
        </nav>

        <nav class="footer-section" aria-labelledby="footer-community">
            <h4 id="footer-community">Community</h4>
            <ul role="list">
                <li><a href="/community/welcome">Community Welcome</a></li>
                <li><a href="https://github.com/tamylaa/clodo-framework/discussions" target="_blank" rel="noopener">GitHub Discussions</a></li>
                <li><a href="https://twitter.com/clodoframework" target="_blank" rel="noopener">Twitter</a></li>
                <li><a href="https://github.com/tamylaa/clodo-framework/issues" target="_blank" rel="noopener">Report Issues</a></li>
                <li><a href="/about#contact">Email Support</a></li>
                <li><a href="https://github.com/tamylaa/clodo-framework/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Contribute</a></li>
            </ul>
            <div class="social-links">
                <a href="https://twitter.com/clodoframework" target="_blank" rel="noopener" aria-label="Follow us on Twitter">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                        <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                    </svg>
                </a>
                <a href="https://github.com/tamylaa/clodo-framework" target="_blank" rel="noopener" aria-label="View on GitHub">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                    </svg>
                </a>
                <a href="https://github.com/tamylaa/clodo-framework/discussions" target="_blank" rel="noopener" aria-label="Join GitHub Discussions">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                        <path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.49.5.09.69-.22.69-.48v-1.62c-2.78.62-3.37-1.35-3.37-1.35-.45-1.15-1.11-1.46-1.11-1.46-.91-.62.07-.61.07-.61 1.01.07 1.53.99 1.53.99.89 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02A9.56 9.56 0 0112 6.8c.85.004 1.71.11 2.52.32 1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.33 4.69-4.55 4.94.28.25.54.69.63 1.34.57.26 2.02.7 2.91.83.89-.53 1.53-.99 1.53-.99.91 0 .98.61.07.61-.45 0-1.11.31-1.11.62 0 0-.89 1.73-3.37 1.73v1.48c0 .26.19.58.69.48C19.13 20.17 22 16.42 22 12c0-5.52-4.48-10-10-10zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0189 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
                    </svg>
                </a>
            </div>
        </nav>
    </div>

    <div class="footer-bottom">
        <p>
            &copy; 2025 Clodo Framework. Open source under MIT License.
            <span aria-hidden="true">•</span>
            <a href="/privacy">Privacy Policy</a>
            <span aria-hidden="true">•</span>
            <a href="/privacy#terms">Terms of Service</a>
            <span aria-hidden="true">•</span>
            Made with <span class="text-heart">♥</span> for developers
        </p>
    </div>

    <!-- Global fallback for Try It Live CTA (ensures inline onclick works even if modules are disabled) -->
    <script nonce="N0Nc3Cl0d0">
        if (typeof window.openStackBlitz !== 'function') {
            window.openStackBlitz = function(url) {
                try {
                    window.open(url, '_blank', 'noopener,noreferrer');
                } catch (e) {
                    window.location.href = url;
                }
            };
        }
    </script>
</footer>

    <!-- Defer JavaScript - load after LCP for better performance -->
    <!-- Inline fallback: ensure global openStackBlitz exists immediately for inline onclicks -->
    <script nonce="N0Nc3Cl0d0">
        (function(){
            function addPreconnectOnce() {
                if (!document.querySelector('link[data-preconnect="stackblitz"]')) {
                    try {
                        const link = document.createElement('link');
                        link.rel = 'preconnect';
                        link.href = 'https://stackblitz.com';
                        link.setAttribute('data-preconnect','stackblitz');
                        link.crossOrigin = '';
                        document.head.appendChild(link);
                    } catch(e){}
                }
            }
            function bindPreconnectToButton(btn){
                if (btn.__sbPreconnectBound) return;
                ['pointerenter','mouseenter'].forEach(evt => btn.addEventListener(evt, () => addPreconnectOnce(), { once: true }));
                btn.__sbPreconnectBound = true;
            }
            // Attach to existing buttons on DOMContentLoaded or now
            const attach = () => {
                const buttons = document.querySelectorAll('[data-stackblitz-url], button[onclick*="openStackBlitz"]');
                buttons.forEach(bindPreconnectToButton);
            };
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', attach);
            } else {
                attach();
            }

            if (typeof window.openStackBlitz !== 'function') {
                window.openStackBlitz = function(url) {
                    try { window.open(url, '_blank', 'noopener,noreferrer'); }
                    catch (e) { window.location.href = url; }
                };
            }
        })();
    </script>
    <script src="/js/init-systems.84654b0f.js" defer nonce="N0Nc3Cl0d0"></script>
    <script defer src="/js/config/features.377e2a86.js" nonce="N0Nc3Cl0d0"></script>
    <script type="module" src="/js/main.807edaaa.js" nonce="N0Nc3Cl0d0"></script>
    
    <!-- Lazy load below-the-fold CSS to improve LCP -->
    <script src="/js/defer-css.49034bfd.js" defer nonce="N0Nc3Cl0d0"></script>
    
    <!-- Community Section Component -->
    <script src="js/components/community-section.js" nonce="N0Nc3Cl0d0"></script>
    
    <!-- Professional analytics: Loads after LCP with zero impact on Core Web Vitals -->
    <!-- This replaces Cloudflare auto-injection with optimized manual control -->
    <script src="/js/analytics.ca95c2b5.js" defer nonce="N0Nc3Cl0d0"></script>
    
    <!-- Using system fonts for optimal performance (removed Google Fonts) -->
    <link rel="stylesheet" href="/styles.617ad8d4.css">
    <link rel="stylesheet" href="/styles-index.ae3b2893.css">
</body>
</html>







