GitHub - Alessandro114/scala-sites: Open source vertical website templates powered by SCALA AI OS · GitHub
/" data-turbo-transient="true" />
Skip to content
Type / to search
Sign in<br>Sign upAppearance settings
You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
{{ message }}
Alessandro114
scala-sites
Public
Notifications<br>You must be signed in to change notification settings
Fork
Star
main
BranchesTags
Go to file
CodeOpen more actions menu
Folders and files<br>NameNameLast commit message<br>Last commit date<br>Latest commit
History<br>5 Commits<br>5 Commits
apps/demo
apps/demo
packages
packages
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
package-lock.json
package-lock.json
package.json
package.json
vercel.json
vercel.json
View all files
Repository files navigation
SCALA Sites
Open source vertical website templates powered by SCALA AI OS.
Pre-built, industry-optimized websites for restaurants, real estate agencies, salons, gyms, hotels, creative studios, and more. Each template connects natively to SCALA for live booking, WhatsApp, CRM, and AI-powered features — or works standalone with mock data.
Why SCALA Sites?
The gap in every vertical is not design — beautiful templates already exist. The gap is that the website doesn't talk to the business system. Every template on the market redirects to third-party booking, hides pricing, has no WhatsApp, no real-time availability, and no post-conversion flow.
SCALA Sites solves this:
Feature<br>Regular Templates<br>SCALA Sites
Booking<br>Redirects to OpenTable/Fresha<br>Native widget, stays on your site
Availability<br>Static<br>Real-time ("3 spots left")
WhatsApp<br>None<br>SARA-connected confirmations
Pricing<br>Often hidden<br>Always transparent
Social proof<br>Badge in footer<br>Inside the booking flow
Multilingual<br>Manual<br>5 languages built-in
Verticals
Vertical<br>Components<br>Demo
DineOS (Restaurant)<br>MenuSection, StorySection, UpsellBanner<br>/restaurant
PropertyOS (Real Estate)<br>ListingSearch, AgentCard, ValuationWidget<br>/property
BeautyOS (Salon/Spa)<br>StylistBooking, BeforeAfter, ServiceMenu<br>/beauty
GymOS (Gym/CrossFit)<br>ClassSchedule, MembershipTiers, TrainerCard<br>/gym
TravelOS (Hotel/Resort)<br>RoomShowcase, ExperienceGrid, AvailabilityChecker<br>/hotel
StudioOS (Creative Agency)<br>PortfolioShowcase, ServicePackages, ProjectInquiry<br>/studio
LegalOS (Law Firms)<br>Coming soon
ClinicoOS (Clinics)<br>Coming soon
RetailOS (Shops)<br>Coming soon
Shared Components (Core)
Every vertical gets these out of the box:
Hero — Full-width with image/video, overlay, dual CTAs
BookingWidget — Multi-step, real-time slots, urgency badges, social proof
ReviewCarousel — Auto-advancing, aggregate rating, verified badges
WhatsAppCTA — Floating button with pulse animation
TeamGrid — Staff profiles with individual booking
Gallery — Filterable masonry with keyboard-accessible lightbox
FAQAccordion — Schema markup for SEO
LoyaltyPrompt — Phone capture for WhatsApp loyalty
Footer — Contact, map, social, "Powered by SCALA"
Themes
Three built-in themes, each fully customizable via CSS variables:
Minimal — Clean white, Inter font, subtle borders (luxury, professional)
Bold — Dark background, Bebas Neue headings, sharp edges (gyms, bars)
Classic — Warm tones, Playfair Display serif, soft radius (traditional, heritage)
Use createCustomTheme() to override any color in a base theme:
import { createCustomTheme, themeToStyleObject } from '@scala-sites/themes'
const myTheme = createCustomTheme('classic', {<br>primary: '#1e3a5f',<br>accent: '#c9a84c',<br>background: '#ffffff',<br>})
Quick Start
git clone https://github.com/Alessandro114/scala-sites.git<br>cd scala-sites<br>npm install<br>npm run dev
Open http://localhost:3099 to see all demos.
Project Structure
scala-sites/<br>packages/<br>core/ # Shared components, API client, i18n, SEO, analytics<br>themes/ # 3 theme presets (minimal, bold, classic) + createCustomTheme<br>verticals/<br>dineos/ # Restaurant components<br>propertyos/ # Real estate components<br>beautyos/ # Salon/spa components<br>gymos/ # Gym/fitness components<br>travelos/ # Hotel/resort components<br>studioos/ # Creative studio components<br>apps/<br>demo/ # Next.js demo with all verticals
Tech Stack
Next.js 14 (App Router, SSG + ISR)
Tailwind CSS with CSS variable theming
TypeScript throughout
Zero dependencies beyond React and Next.js
Using with SCALA
These templates work standalone with mock data. To connect to SCALA:
import { createScalaAPI } from '@scala-sites/core/lib/scala-api'
const api = createScalaAPI({<br>baseUrl: 'https://api.get-scala.com',<br>apiKey: 'your-api-key',<br>tenantId: 'your-tenant-id',<br>})
// Real-time booking slots<br>const slots = await api.getAvailableSlots('2026-08-10')
// Live menu with 86'd items<br>const menu = await api.getMenu()
// Reviews from all sources<br>const reviews = await...