# Cove — Modern SaaS Startup Free Template

**A boutique, editorial-style SaaS landing page template with warm aesthetics, bento grids, and handcrafted details.**

---

## 📑 Table of Contents

1. [Overview](#overview)
2. [Key Features](#key-features)
3. [Tech Stack](#tech-stack)
4. [File Structure](#file-structure)
5. [Installation](#installation)
6. [Customization Guide](#customization-guide)
7. [Sections Breakdown](#sections-breakdown)
8. [CSS Variables Reference](#css-variables-reference)
9. [Credits & Sources](#credits--sources)
10. [Changelog](#changelog)
11. [License](#license)
12. [Support](#support)

---

## 🌿 Overview

**Cove** is a carefully handcrafted SaaS landing page template designed for startups, software products, and modern teams who value craft over noise. Built with a warm, editorial aesthetic — cream backgrounds, deep indigo accents, asymmetric bento layouts, and buttery-smooth micro-interactions.

This template deliberately avoids the overused "AI-generated SaaS" look: no glassmorphism, no gradient text, no dark-mode neon, no rigid 3-column grids. Instead, it offers a calm, sophisticated, human-centered design that stands out in a crowded marketplace.

**Perfect for:**
- SaaS products & software startups
- Developer tools & productivity apps
- Design agencies & studios
- Fintech, AI, and workflow products
- Any brand that wants to feel premium and intentional

---

## ✨ Key Features

### Design
- 🎨 **Warm, editorial aesthetic** — cream backgrounds, deep indigo accents
- 🧩 **Asymmetric bento grid** — modern, non-generic feature layout
- 🖼️ **Custom CSS dashboard mockup** — no placeholder images needed
- 📐 **Intentional asymmetry** — staggered testimonials, offset hero visual
- 🌫️ **Buttery-smooth animations** — subtle AOS scroll reveals

### Technical
- ⚡ **Lightweight & fast** — vanilla HTML/CSS/JS, no heavy frameworks
- 📱 **Fully responsive** — mobile, tablet, and desktop optimized
- 🎯 **Bootstrap 5.3 grid** — familiar, reliable responsive system
- 🎭 **AOS scroll animations** — subtle, purposeful, performant
- 🔤 **Google Fonts** — Plus Jakarta Sans + Inter for modern typography
- 🎨 **FontAwesome 6 (regular/light)** — elegant, non-chunky icons
- 🧪 **Clean, semantic HTML5** — accessible and SEO-friendly

### Interactive
- 💰 **Pricing toggle** — monthly/yearly with smooth transitions
- 🗂️ **Tabbed product tour** — switch between 3 product views
- 📖 **Smooth FAQ accordion** — single-open behavior with height animation
- 📅 **Dynamic copyright year** — auto-updates via JavaScript
- 🍔 **Mobile menu** — clean, functional mobile navigation

---

## 🛠️ Tech Stack

| Technology | Version | Purpose |
|---|---|---|
| HTML5 | 5 | Semantic structure |
| CSS3 | 3 | Custom styling with variables |
| JavaScript | ES6 | Interactions (vanilla, no jQuery) |
| Bootstrap | 5.3.2 | Responsive grid system only |
| AOS | 2.3.4 | Scroll animations |
| FontAwesome | 6.5.1 | Icons (regular/light styles) |
| Google Fonts | — | Plus Jakarta Sans + Inter |

**All libraries loaded via CDN — no build step required.**

---

## 📁 File Structure
cove-template/
│
├── index.html # Main landing page
├── style.css # All custom styles (with CSS variables)
├── script.js # Interactive behaviors
├── README.md # This documentation
│
└── assets/ # (Optional — add your own)
├── images/ # Screenshots, logos, team photos
└── fonts/ # Custom fonts (if needed)




**That's it. Just 3 files to run the entire template.**

---

## 🚀 Installation

### Quick Start (5 minutes)

1. **Download** the template files (`index.html`, `style.css`, `script.js`)
2. **Place all 3 files** in the same folder
3. **Open `index.html`** in any modern browser
4. **Done!** The template is ready to customize

### No Build Step Required
- No Node.js
- No npm install
- No webpack/vite
- No compilation

Just open the HTML file and start editing.

### Deploy Anywhere
- **GitHub Pages** — push to a repo, enable Pages
- **Netlify** — drag & drop the folder
- **Vercel** — import from GitHub
- **Any web host** — upload via FTP

---

## 🎨 Customization Guide

### 1. Change Colors (30 seconds)

Open `style.css` and edit the `:root` variables at the top:

```css
:root {
  --cove-bg: #FAFAF8;          /* Main background */
  --cove-bg-warm: #F3F0EA;     /* Secondary background */
  --cove-text: #1C1917;        /* Primary text */
  --cove-accent: #4338CA;      /* Primary accent (buttons, links) */
  --cove-accent-hover: #3730A3;/* Accent hover state */
  /* ... more variables below */
}