# SoapBox Candles - Web App

A Next.js web application for SoapBox Super App's Candles feature - spiritual engagement rewards and AI feature credits.

## Getting Started

### Prerequisites
- Node.js 18+
- npm or yarn

### Installation

```bash
cd soapbox-candles
npm install
```

### Development

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser.

### Build

```bash
npm run build
```

### Production

```bash
npm start
```

## Deploy to Vercel

### Option 1: Vercel CLI

```bash
npm i -g vercel
vercel
```

### Option 2: GitHub Integration

1. Push this project to a GitHub repository
2. Go to [vercel.com](https://vercel.com)
3. Import your GitHub repository
4. Vercel will auto-detect Next.js and deploy

## Project Structure

```
soapbox-candles/
├── app/
│   ├── globals.css        # Global styles & animations
│   ├── layout.tsx         # Root layout with Navbar/Footer
│   ├── page.tsx           # Home page (Candles landing)
│   ├── features/          # Features page
│   ├── pricing/           # Pricing page
│   ├── about/             # About page
│   ├── contact/           # Contact page
│   ├── signin/            # Sign in page
│   └── get-started/       # Sign up page
├── components/
│   ├── Navbar.tsx         # Navigation component
│   ├── Footer.tsx         # Footer component
│   ├── SpotlightCard.tsx  # Interactive card component
│   └── ShinyButton.tsx    # Animated CTA button
├── public/                # Static assets
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── next.config.js
```

## Features

- **Responsive Design** - Works on all devices
- **Animations** - Sonar, beam, float, flicker effects
- **Interactive Cards** - Spotlight effect on hover
- **Shiny CTA Buttons** - Animated gradient borders
- **Dark Theme** - Warm amber/gold color scheme
- **TypeScript** - Full type safety
- **Tailwind CSS** - Utility-first styling

## Pages

- `/` - Candles landing page
- `/features` - Platform features
- `/pricing` - Pricing plans
- `/about` - About SoapBox
- `/contact` - Contact form
- `/signin` - Sign in
- `/get-started` - Sign up