Spaces:
Sleeping
Sleeping
File size: 2,269 Bytes
5e0532d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
# 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
|