Polaris360 Starter — Whitelabel Website Template

One config. One build. Beautiful auto-industry websites in minutes.

Dark-themed, high-conversion React website template built for auto detailing studios, garages, car wrapping businesses, and similar service companies. Fully whitelabel — just fill in site.config.ts and the i18n locale files.

---

Quick Start

# 1. Install dependencies
npm install

# 2. Fill in your client data
#    → Edit site.config.ts     (brand, contact, services, pricing, …)
#    → Edit src/i18n/locales/nl.json   (Dutch translations)
#    → Edit src/i18n/locales/pl.json   (Polish translations — or delete if not needed)

# 3. Preview
npm run dev

# 4. Build for production
npm run build

---

Workflow: New Client Setup

Step 1 — Gather intel

Fill in analysis.md with all client data:

• Company profile (name, address, phone, Instagram, hours)
• Services offered (max 6)
• Reviews from Google/Marktplaats/Facebook
• Pricing packages
• Brand logos they work with
• Instagram shortcodes for feed section
• Stats/counters
• Languages needed

Step 2 — Configure site.config.ts

Open site.config.ts and fill in each section using data from the analysis:

Section	What to fill
1. Brand	Name, logo text parts, tagline, copyright
2. Contact	WhatsApp number, address, Instagram, Google Maps embed URL
3. Hours	Opening hours summary + per-day schedule
4. Theme	Primary/accent colors (or keep defaults)
5. Stats	Counter numbers (years, rating, cars done, etc.)
6. Services	Up to 6 services with lucide icons
7. Pricing	Tabs + packages with prices
8. Reviews	Customer names, ratings, sources
9. Brands	Brand logos (Simple Icons slugs or custom SVG)
10. Instagram	Post shortcodes, initials, embed toggle
11. Videos	Stock videos (pre-filled with Pexels auto industry footage)
12. Navigation	Route paths (Dutch by default)
13. Languages	Language switcher entries
14. Why Choose Us	USP cards with lucide icons

Step 3 — Translate locale files

Edit src/i18n/locales/nl.json (and other locales). Replace all UPDATE_* and BRAND_NAME placeholders with real copy. Key sections:

• hero.* — Main heading + subtitle
• services.* — Service titles + descriptions (6 items)
• pricing.* — Package names + feature lists
• reviews.* — Review text translations
• whyChooseUs.* — USP titles + descriptions
• instagram.captions.* — Instagram post caption text
• contact.* / about.* — Page content

Step 4 — Preview & polish

npm run dev

Review every page. Replace stock Pexels videos/images if the client provides own media.

Step 5 — Deploy

npm run build    # → outputs to dist/

Deploy dist/ to Vercel, Netlify, or any static host. The included vercel.json handles SPA rewrites automatically.

---

Architecture

site.config.ts          ← SINGLE SOURCE OF TRUTH (edit this)
src/
  i18n/locales/         ← All display text (edit these)
    nl.json
    pl.json
  data/                 ← Bridge files (read from config, rarely touch)
    services.ts
    pricing.ts
    reviews.ts
    navigation.ts
    pexels-videos.ts    ← Reusable stock video library
  lib/utils.ts          ← Derived constants from config
  components/
    layout/             ← Navbar, Footer, WhatsAppButton
    sections/           ← Hero, Stats, Services, Pricing, Reviews, etc.
    ui/                 ← Reusable cards, buttons, badges
    effects/            ← Particles, gradients, animated counters
  hooks/                ← useScrollReveal, useCountUp, usePageMeta
  pages/                ← Route pages (Home, Contact, Diensten, etc.)

How data flows

site.config.ts
     ↓
  src/data/*.ts (bridge files — map config → component interfaces)
     ↓
  components (import from @/data/* and use useTranslation() for text)

• Numbers, icons, structure → site.config.ts
• Display text → src/i18n/locales/*.json
• Components read from both, never hardcode client data

---

Tech Stack

Technology	Version	Purpose
React	19	UI framework
Vite	7	Build tool
TailwindCSS	4	Styling
Framer Motion	12	Animations
i18next	25	Internationalization
react-router-dom	7	Client-side routing
lucide-react	—	Icon library
TypeScript	~5.9	Type safety

---

Stock Videos

The template includes 14 Pexels stock videos by Pavel Danilyuk (auto detailing industry). These are free to use and work as realistic placeholders. Replace with client footage when available.

See src/data/pexels-videos.ts for the full library.

---

Customization

Colors

Edit the CSS custom properties in src/index.css under @theme:

• --color-primary / --color-primary-light — Purple by default
• --color-accent / --color-accent-light — Gold by default
• Surface colors, border, text tones

Routes

Routes are in Dutch by default (/diensten, /pakketten, etc.). Change in site.config.ts → navLinks and update App.tsx routes to match.

Languages

Add/remove languages in site.config.ts → languages array. Each entry needs a matching src/i18n/locales/<code>.json file.

adding a logo image

Replace the <DiamondIcon /> component usage in Navbar, Hero, and Footer with an <img> tag pointing to your logo file in public/images/.

---

License

Private template — Polaris360 internal use.