SaaS Landing Gen

saas-landing/
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
├── src/
│   ├── main.jsx
│   ├── App.jsx
│   ├── index.css
│   └── components/
│       ├── Navbar.jsx
│       ├── Hero.jsx
│       ├── Features.jsx
│       ├── Pricing.jsx
│       ├── Testimonials.jsx
│       ├── CTA.jsx
│       └── Footer.jsx
└── public/
    └── favicon.svg

# Install EdgeOne Pages CLI
npm install -g edgeone-pages-cli

# Deploy
edgeone-pages deploy . --name <project-name>

{
  "name": "saas-landing",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "@vitejs/plugin-react": "^4.2.0",
    "autoprefixer": "^10.4.17",
    "postcss": "^8.4.33",
    "tailwindcss": "^3.4.1",
    "vite": "^5.0.0"
  }
}

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
        },
      },
    },
  },
  plugins: [],
}

import React from 'react'
import Navbar from './components/Navbar'
import Hero from './components/Hero'
import Features from './components/Features'
import Pricing from './components/Pricing'
import Testimonials from './components/Testimonials'
import CTA from './components/CTA'
import Footer from './components/Footer'

export default function App() {
  return (
    <div className="min-h-screen bg-white">
      <Navbar />
      <main>
        <Hero />
        <Features />
        <Pricing />
        <Testimonials />
        <CTA />
      </main>
      <Footer />
    </div>
  )
}

import React from 'react'

export default function Hero({ productName = "Your SaaS", tagline = "The best solution for your business" }) {
  return (
    <section className="relative bg-gradient-to-br from-brand-600 to-brand-800 text-white py-24 px-6 text-center">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-5xl font-bold mb-6">{productName}</h1>
        <p className="text-xl mb-8 text-brand-100">{tagline}</p>
        <div className="flex gap-4 justify-center">
          <button className="bg-white text-brand-700 px-8 py-3 rounded-lg font-semibold hover:bg-brand-50 transition">
            Get Started Free
          </button>
          <button className="border border-white px-8 py-3 rounded-lg font-semibold hover:bg-white/10 transition">
            See Demo
          </button>
        </div>
      </div>
    </section>
  )
}

npx edgeone-pages-cli deploy . --name saas-landing-demo

Create a SaaS landing page for [Product Name].
Tagline: [One line description]
Features: [Feature 1], [Feature 2], [Feature 3]
Pricing: Free / Pro ($29/mo) / Enterprise (contact)
Color scheme: [Blue/ Purple/ Green/ Custom]
Deploy to EdgeOne Pages.