I built open source website templates that actually talk to the business system

#nextjs #typescript #opensource #webdev

Every website template on the market looks great — until you need it to actually do something.

You pick a beautiful restaurant template and... the booking button links to OpenTable. The menu is a static image. There's no WhatsApp. No real-time availability. No loyalty program.

The website and the business system are two separate worlds.

SCALA Sites fixes this

SCALA Sites is an open source collection of vertical website templates built with Next.js 14 + TypeScript + Tailwind CSS. Each template is designed for a specific industry and connects natively to a business operating system.

6 verticals live today:

DineOS — Restaurant: interactive menu with 86'd badges, story section, booking widget with real-time slots
PropertyOS — Real estate: listing search with filters, agent cards, instant valuation lead capture
BeautyOS — Hair salon/spa: pick-your-stylist booking, before/after gallery, transparent service pricing
GymOS — Gym/CrossFit: class schedule with live spots, membership tier comparison, trainer profiles
TravelOS — Hotel: room showcase with availability, experience grid, check-in/check-out date picker
StudioOS — Creative agency: portfolio showcase with lightbox, service packages, project inquiry form

Each vertical gets 3 unique components plus 9 shared core components: Hero, BookingWidget, ReviewCarousel, WhatsAppCTA, TeamGrid, Gallery, FAQAccordion, LoyaltyPrompt, Footer.

The architecture

scala-sites/
  packages/
    core/        # 9 shared components, i18n (5 langs), SEO, analytics
    themes/      # 3 themes (minimal/bold/classic) + createCustomTheme()
    verticals/   # 6 industry-specific component packages
  apps/
    demo/        # Live demos for all verticals

Key design decisions:

CSS variable theming — No Tailwind theme colors. Every component uses var(--color-primary) etc., so you can restyle the entire site by changing 9 variables
npm workspaces monorepo — Each vertical is an independent package. Use only what you need
Zero dependencies beyond React and Next.js — No UI libraries, no state management, no CSS-in-JS runtime
i18n built in — 5 languages (EN/IT/DE/ES/FR) with a dead-simple t() function, no i18n framework needed
Works standalone — Every template ships with realistic mock data. No backend required to see it in action

What makes this different from other template collections

	Regular Templates	SCALA Sites
Booking	Links to OpenTable/Fresha	Native widget on your site
Availability	Static text	Real-time ("3 spots left")
WhatsApp	None	Built-in floating CTA
Pricing	Often hidden	Always transparent
Social proof	Badge in footer	Inside the booking flow
Menu/Catalog	Static PDF	Interactive with filters and dietary tags

Try it

git clone https://github.com/Alessandro114/scala-sites.git
cd scala-sites
npm install
npm run dev

Open localhost:3099 — you'll see all 6 demo sites.

What's next

More verticals: LegalOS, ClinicoOS, RetailOS, AgencyOS, EduOS, AutoOS
Vercel deploy template (one-click)
SCALA API integration guide
Community-contributed verticals

The repo is MIT licensed. PRs for new verticals are welcome.

GitHub: github.com/Alessandro114/scala-sites

Built as part of SCALA AI OS — an agentic AI platform for business operations.

DEV Community