Periluna Studios

A single-page website for Periluna Studios, a picture editing service specializing in watermark creation and removal for verified owners.

Tech Stack

• Framework: Next.js 14+ (App Router)
• Styling: Tailwind CSS
• Database: Supabase (PostgreSQL)
• File Storage: Supabase Storage
• Payments: Stripe Checkout
• Email: Resend
• Hosting: Vercel

Getting Started

1. Clone and Install

npm install

2. Environment Variables

Copy .env.local.example to .env.local and fill in your credentials:

cp .env.local.example .env.local

Required variables:

• NEXT_PUBLIC_SUPABASE_URL - Your Supabase project URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY - Supabase anonymous key
• SUPABASE_SERVICE_ROLE_KEY - Supabase service role key (server-side only)
• STRIPE_SECRET_KEY - Stripe secret key
• STRIPE_WEBHOOK_SECRET - Stripe webhook signing secret
• NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - Stripe publishable key
• RESEND_API_KEY - Resend API key for emails
• NEXT_PUBLIC_SITE_URL - Your site URL (e.g., http://localhost:3000)
• ADMIN_EMAIL - Email address for admin notifications
• NEXT_PUBLIC_CONTACT_EMAIL - Public contact email displayed on site

3. Database Setup

Run the migration in your Supabase SQL editor:

# Copy the contents of supabase/migrations/001_initial_schema.sql
# and run it in your Supabase Dashboard > SQL Editor

Create a storage bucket:

1. Go to Supabase Dashboard > Storage
2. Create a new bucket called order-files
3. Set it to private (not public)
4. Recommended file size limit: 50MB
5. Allowed MIME types: image/*

4. Stripe Setup

1. Create products in Stripe Dashboard for each pricing tier (optional - we use dynamic pricing)
2. Set up webhook endpoint: https://your-domain.com/api/webhook
3. Enable checkout.session.completed event
4. Copy the webhook signing secret to STRIPE_WEBHOOK_SECRET

5. Run Development Server

npm run dev

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

Project Structure

periluna/
├── app/
│   ├── layout.tsx          # Root layout, fonts, metadata
│   ├── page.tsx            # Main landing page
│   ├── api/
│   │   ├── submit/route.ts # Form submission handler
│   │   └── webhook/route.ts# Stripe webhook handler
│   ├── success/page.tsx    # Payment success page
│   ├── cancel/page.tsx     # Payment cancelled page
│   ├── sitemap.ts          # Auto-generated sitemap
│   ├── robots.ts           # Robots.txt configuration
│   └── globals.css         # Tailwind + custom styles
├── components/
│   ├── Hero.tsx            # Hero section with logo
│   ├── Services.tsx        # Services overview
│   ├── Pricing.tsx         # Pricing tiers
│   ├── PricingCalculator.tsx # Volume pricing calculator
│   ├── IntakeForm.tsx      # Order intake form
│   ├── FileUpload.tsx      # Drag-drop file upload
│   ├── FAQ.tsx             # Accordion FAQ section
│   └── Footer.tsx          # Site footer
├── lib/
│   ├── supabase.ts         # Supabase client
│   ├── stripe.ts           # Stripe client & pricing
│   └── email.ts            # Email notifications
├── supabase/
│   └── migrations/         # Database migrations
├── public/
│   └── periluna.png        # Logo
└── .env.local.example      # Environment variables template

Pricing

Tier	Quantity	Price
Single	1 image	$2.50
Bundle	Up to 10 images	$20.00
Custom	11-25 images	$1.75/each
Custom	26-50 images	$1.50/each
Custom	51+ images	$1.25/each

Features

• Single-page design with smooth scroll navigation
• Dark navy theme matching the brand aesthetic
• File upload with drag-drop and image previews
• Real-time pricing calculator for volume orders
• Stripe Checkout for secure payments
• Etsy order support - bypass payment for existing customers
• Admin email notifications for all orders
• SEO optimized with meta tags, structured data, and sitemap
• Mobile responsive design

Deployment

Vercel (Recommended)

1. Push to GitHub
2. Import project in Vercel
3. Add environment variables
4. Deploy

Other Platforms

npm run build
npm start

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

License

Private - All rights reserved