/**

* Clean Modern Website - Cloudflare Worker

* A beautiful, responsive, single-page site with dark mode support

export default {

async fetch(request, env, ctx) {

const url = new URL(request.url);

// Optional: Serve different content based on path (e.g., /about)

if (url.pathname === "/about") {

return new Response(`

<!DOCTYPE html>

<head>

<title>About</title>

</head>

<h1 class="text-5xl font-bold mb-6">About Us</h1>

<p class="text-zinc-400 text-lg">This is a simple about page served by a Cloudflare Worker.</p>

</div>

</body>

</html>

`, {

headers: { "Content-Type": "text/html;charset=UTF-8" }

});

}

// Main homepage

return new Response(`

<!DOCTYPE html>

<head>

<title>Neon • Clean</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

body {

font-family: 'Inter', system_ui, sans-serif;

}

.heading {

font-family: 'Space Grotesk', sans-serif;

}

.hero-bg {

background: linear-gradient(135deg, #18181b 0%, #27272a 100%);

}

</style>

</head>

</div>

<a href="#" onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})" class="hover:text-white transition-colors">Features</a>

<a href="#" onclick="document.getElementById('about').scrollIntoView({behavior: 'smooth'})" class="hover:text-white transition-colors">About</a>

</div>

<button onclick="alert('Thank you for visiting! 🚀 (This is a demo)')"

class="px-6 py-2.5 bg-white text-zinc-900 rounded-2xl font-semibold text-sm hover:bg-zinc-200 transition-all active:scale-95">

Get Started

</button>

</div>

</nav>

</span>

Now faster than ever

</div>

Clean.<br>Fast.<br>Yours.

</h1>

A beautifully minimal website served instantly from the edge with Cloudflare Workers.

</p>

<button onclick="window.scrollTo({top: document.getElementById('features').offsetTop - 80, behavior: 'smooth'})"

class="px-8 py-4 bg-white text-black rounded-3xl font-semibold flex items-center gap-3 hover:bg-zinc-100 transition-all">

Explore the site

</button>

<button onclick="alert('Demo: This would open a live preview in a real app')"

class="px-8 py-4 border border-zinc-700 hover:border-zinc-400 rounded-3xl font-medium transition-all">

Watch 18s demo

</button>

</div>

<div>✓ Blazing fast</div>

<div>✓ Zero config</div>

<div>✓ Global edge</div>

</div>

</div>

</div>

<p class="text-zinc-400">Your clean website is live on Cloudflare</p>

</div>

</section>

<span class="text-sm uppercase tracking-widest text-zinc-500 font-medium">Why this works</span>

<h2 class="heading text-5xl font-semibold mt-3">Simple. Powerful. Edge-native.</h2>

</div>

</div>

<h3 class="text-2xl font-semibold mb-3">Lightning Fast</h3>

<p class="text-zinc-400">Served from 300+ cities worldwide. Sub-50ms response times guaranteed.</p>

</div>

</div>

<h3 class="text-2xl font-semibold mb-3">Beautiful by Default</h3>

<p class="text-zinc-400">Modern design with dark mode, smooth animations, and perfect responsiveness.</p>

</div>

</div>

<p class="text-zinc-400">Everything lives in a single Worker. No build step. Instant deploys.</p>

</div>

</section>

<p>Made with ❤️ using Cloudflare Workers • Edit the code and run <code class="bg-zinc-900 px-2 py-1 rounded">npm run deploy</code></p>

<p class="mt-4">This entire website is generated dynamically by your Worker.</p>

</div>

</footer>

// Tailwind script already loaded via CDN

// You can add more interactivity here if needed

</script>

</body>

</html>

`, {

headers: {

"Content-Type": "text/html;charset=UTF-8",

"Cache-Control": "public, max-age=60" // Adjust as needed

}

});

}

};