Astra Agency Setup

This guide documents setting up the Astra Agency project using the BCMS CLI with the Next.js agency starter template, then customizing it to match the Med Spa Ranker design.

Prerequisites

Node.js 18+
npm or pnpm
BCMS account (free at thebcms.com)

Quick Start

1. Create the Project

npx @thebcms/cli create next starter agency

When prompted:

Project name: Astra Agency (or your preferred name)
A browser window will open for BCMS authentication

The CLI will:

Clone the agency starter from GitHub
Create a new BCMS project
Set up API keys automatically

2. Install Dependencies

cd "Astra Agency"
npm install

3. Start Development Server

npm run dev

The site runs at http://localhost:3000

Project URLs

Resource	URL
Local Dev	http://localhost:3000
BCMS Dashboard	https://app.thebcms.com/d/o/alive-wildfowl/i/astra-agency/bcms

Project Structure

Astra Agency/
├── bcms/              # BCMS types and configuration
│   └── types/         # Auto-generated TypeScript types
├── src/
│   ├── app/           # Next.js App Router pages
│   ├── components/
│   │   ├── layout/    # Header, Footer components
│   │   ├── medspa/    # Med Spa Ranker custom components
│   │   └── home-page/ # Original BCMS home components
│   └── styles/        # SCSS styles
├── public/            # Static assets
└── .env               # Environment variables (auto-configured)

Customization: Med Spa Ranker Theme

The project was customized to match the Med Spa Ranker website design with a dark theme and medical spa branding.

Color Scheme (tailwind.config.ts)

colors: {
    primary: {
        DEFAULT: '#4AB8B8', // Teal/cyan accent
        dark: '#3A9A9A',
    },
    coral: {
        DEFAULT: '#E8736C', // Coral/salmon for CTAs
        dark: '#D4605A',
    },
    dark: {
        DEFAULT: '#1A1F2E', // Main dark background
        lighter: '#242B3D', // Slightly lighter sections
        card: '#2A3248',    // Card backgrounds
        nav: '#0D1117',     // Navigation background
    },
}

Custom Components Created

Component	Path	Purpose
Hero	`src/components/medspa/Hero.tsx`	Full-width hero with background image
Features	`src/components/medspa/Features.tsx`	4-column feature cards
Testimonials	`src/components/medspa/Testimonials.tsx`	Customer reviews with star ratings
Services	`src/components/medspa/Services.tsx`	SEO, PPC, Website services
WebDesign	`src/components/medspa/WebDesign.tsx`	Web design process section
Benefits	`src/components/medspa/Benefits.tsx`	Trust, Responsive, Convert cards
CTA	`src/components/medspa/CTA.tsx`	”Ready to Talk?” call-to-action

Layout Updates

Header: Dark navigation bar with teal logo and coral CTA button
Footer: Centered layout with navigation links and legal pages
Body: Dark background (bg-dark) with white text

Managing Content

Go to the BCMS Dashboard
Select the astra-agency project
Edit entries in the content types (Team, Services, Portfolio, etc.)
Changes sync to your local dev server automatically

Deployment

Vercel (Recommended)

npm install -g vercel
vercel

Manual Build

npm run build
npm run start

Troubleshooting

BCMS Types Not Updating

Pull the latest types manually:

npx bcms --pull types --lng ts

Authentication Expired

Re-authenticate with BCMS:

npx @thebcms/cli login