Spaces:
Sleeping
Sleeping
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
- Push this project to a GitHub repository
- Go to vercel.com
- Import your GitHub repository
- 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