Svelte with TailwindCSS

# Install Tailwind and dependencies
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'], // Scan Svelte files
  darkMode: 'class', // Enable class-based dark mode
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif']
      },
      colors: {
        brand: {
          50: '#fef3f2', 100: '#fee5e2',
          500: '#ff3e00', 600: '#e53500',
          700: '#c22d00'
        }
      }
    }
  },
  plugins: []
}

/* src/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

// src/main.js
import './app.css';
import App from './App.svelte';

<!-- Navbar.svelte -->
<script>
  let isMenuOpen = false;
</script>

<nav class="bg-white shadow-sm sticky top-0 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <a href="/" class="text-2xl font-bold text-brand-500">⚡ SvelteApp</a>

      <!-- Desktop nav -->
      <div class="hidden md:flex items-center gap-6">
        <a href="/features" class="text-gray-600 hover:text-brand-500 transition-colors">Features</a>
        <a href="/pricing" class="text-gray-600 hover:text-brand-500 transition-colors">Pricing</a>
        <a href="/docs" class="text-gray-600 hover:text-brand-500 transition-colors">Docs</a>
        <button class="bg-brand-500 text-white px-4 py-2 rounded-lg hover:bg-brand-600 transition-colors">
          Get Started
        </button>
      </div>

      <!-- Mobile menu toggle -->
      <button class="md:hidden" on:click={() => isMenuOpen = !isMenuOpen}>
        {isMenuOpen ? &#039;✕' : '☰'}
      </button>
    </div>

    <!-- Mobile menu -->
    {#if isMenuOpen}
      <div class="md:hidden py-4 border-t flex flex-col gap-3">
        <a href="/features" class="text-gray-600 hover:text-brand-500">Features</a>
        <a href="/pricing" class="text-gray-600 hover:text-brand-500">Pricing</a>
      </div>
    {/if}
  </div>
</nav>

<script>
  let variant = &#039;primary'; // primary, secondary, danger
  let size = &#039;md';

  const variants = {
    primary: &#039;bg-brand-500 text-white hover:bg-brand-600',
    secondary: &#039;bg-gray-100 text-gray-800 hover:bg-gray-200',
    danger: &#039;bg-red-500 text-white hover:bg-red-600'
  };

  const sizes = {
    sm: &#039;px-3 py-1.5 text-sm',
    md: &#039;px-4 py-2',
    lg: &#039;px-6 py-3 text-lg'
  };
</script>

<button class="rounded-lg font-medium transition-colors {variants[variant]} {sizes[size]}">
  Click Me
</button>

<!-- LandingPage.svelte -->
<script>
  import { fly, fade } from &#039;svelte/transition';
  let email = &#039;';
</script>

<!-- Hero Section -->
<section class="bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900 text-white min-h-screen flex items-center">
  <div class="max-w-4xl mx-auto px-6 text-center" in:fly={{ y: 40, duration: 700 }}>
    <div class="inline-block bg-white/10 px-4 py-2 rounded-full text-sm font-medium mb-6">
      ⚡ Built with Svelte + TailwindCSS
    </div>
    <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-white to-pink-300 bg-clip-text text-transparent">
      Build Faster Apps
    </h1>
    <p class="text-xl text-white/70 mb-10 max-w-2xl mx-auto">
      The most efficient framework meets the most flexible CSS framework. 
      Zero compromise on performance or developer experience.
    </p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <input
        bind:value={email}
        type="email"
        placeholder="Enter your email"
        class="px-5 py-3 rounded-xl bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-pink-400 w-64"
      />
      <button class="bg-pink-500 hover:bg-pink-600 text-white px-6 py-3 rounded-xl font-semibold transition-colors">
        Get Started Free
      </button>
    </div>
  </div>
</section>

<!-- Features Section -->
<section class="py-24 bg-gray-50">
  <div class="max-w-6xl mx-auto px-6">
    <h2 class="text-4xl font-bold text-center text-gray-900 mb-16">Why Choose Us?</h2>
    <div class="grid md:grid-cols-3 gap-8">
      {#each [
        { icon: &#039;⚡', title: 'Lightning Fast', desc: 'Compiled to vanilla JS with zero runtime overhead.' },
        { icon: &#039;🎨', title: 'Beautiful UI', desc: 'TailwindCSS utility classes for rapid, consistent styling.' },
        { icon: &#039;📦', title: 'Tiny Bundles', desc: 'Ship less JavaScript. Faster load times. Better UX.' }
      ] as feature}
        <div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
          <div class="text-4xl mb-4">{feature.icon}</div>
          <h3 class="text-xl font-semibold text-gray-900 mb-2">{feature.title}</h3>
          <p class="text-gray-600">{feature.desc}</p>
        </div>
      {/each}
    </div>
  </div>
</section>