# SpendWise - Expense Tracker SaaS Landing Website

SpendWise is a responsive financial SaaS landing website built with pure **HTML5, CSS3, and Vanilla JavaScript**. Designed for a modern Android expense tracker application, it features landing sections, app previews, dark/light theme switching, and dedicated legal/informational pages.

---

## 📁 Project Directory Structure

```text
/
├── index.html            # Main SaaS landing page (14 sections, SEO & Open Graph meta, JSON-LD)
├── privacy-policy.html   # Detailed Privacy Policy (14 sections: Google Auth, server storage, deletion)
├── terms.html            # Terms & Conditions (18 sections: license, payments, disclaimer)
├── about.html            # Product story, philosophy, roadmap, and values
├── contact.html          # Contact page with client-side JS validation
├── css/
│   ├── style.css         # Main stylesheet, CSS variables, dark/light theme tokens, components
│   ├── responsive.css    # Media queries for 320px to 1920px viewports & mobile drawer
│   └── pages.css         # Dedicated styling for document pages & contact form
├── js/
│   ├── main.js           # Central CONFIG object, navbar scroll observer, theme toggle, drawer
│   ├── animations.js     # IntersectionObserver reveals & animated number counters
│   └── contact.js        # Contact form field validation & API submission handler
├── assets/
│   ├── logo.svg          # Brand logo asset
│   ├── favicon.svg       # Browser favicon asset
│   ├── app-icon.svg      # App icon asset
│   ├── google-play-badge.svg # Google Play Store badge graphic
│   └── screenshots/      # High-res SVG mobile interface mockups
│       ├── dashboard.svg
│       ├── expenses.svg
│       ├── analytics.svg
│       └── profile.svg
└── README.md
```

---

## ⚙️ Configuration (`js/main.js`)

Centralized configuration object located at the top of `js/main.js`:

```javascript
const CONFIG = {
  APP_NAME: "SpendWise",
  PLAY_STORE_URL: "https://play.google.com/store/apps/details?id=com.spendwise.expensetracker", // Replace with real Play Store URL
  SUPPORT_EMAIL: "support@spendwise.app", // Replace with real support email
  API_BASE_URL: "https://api.spendwise.app/v1", // Replace with Hostinger backend API endpoint
  VERSION: "1.0.0"
};
```

Updating `PLAY_STORE_URL` will automatically re-bind all download buttons and badges across all HTML pages dynamically.

---

## 🔗 Connecting to Hostinger Backend API

### Contact Form Integration (`js/contact.js`)
To send contact messages to your Hostinger server backend (e.g. PHP / Node.js API), update the `submit` event listener in `js/contact.js`:

```javascript
const response = await fetch(`${CONFIG.API_BASE_URL}/contact`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(formData)
});
```

---

## 🎨 Features & Accessibility
- **Dark Mode**: Supports system preference (`prefers-color-scheme`) and persists user preference in `localStorage`.
- **Responsive Layout**: Designed for 320px mobile screens up to 1920px desktop monitors.
- **Accessibility**: Includes `aria-label`, `aria-expanded` accordion states, focus rings, and `prefers-reduced-motion` compliance.
- **SEO & Schema**: Includes canonical tags, Open Graph meta tags, and `SoftwareApplication` JSON-LD schema.

---

## 🚀 How to Run Locally

You can serve the static files using any local web server:

### Option 1: Python 3
```bash
python -m http.server 8000
```
Then visit `http://localhost:8000`.

### Option 2: Node.js (`npx serve`)
```bash
npx serve .
```
Then visit `http://localhost:3000`.