frontend/README.md

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

cd soapbox-candles
npm install

Development

npm run dev

Open http://localhost:3000 in your browser.

Build

npm run build

Production

npm start

Deploy to Vercel

Option 1: Vercel CLI

npm i -g vercel
vercel

Option 2: GitHub Integration

1. Push this project to a GitHub repository
2. Go to 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