README

Smart CMS project built with React + Zod + Inertia.js with validation and type safety.

Quick Start

# Install dependencies
composer setup

# Start dev server
composer dev

# Build the project
npm run build

How to Use This Documentation

For Creating New Sections

Read the Universal Section Creation Guide - Learn the Smart CMS patterns, Zod schemas, and workflow
Reference Project Design System - Get exact colors, components, and design patterns for this project
Check existing sections in resources/js/sections/ for real examples
Build and test with npm run build

Documentation Approach

This project uses a two-guide approach:

Universal Guide = Smart CMS stack patterns (works for any project)
Project Design System = This project's specific choices (colors, components, etc.)

This separation allows the universal guide to be reused across different Smart CMS projects while keeping project-specific details separate.

Documentation Structure

Core Documentation (English)

universal-section-creation-guide.md ⭐ START HERE

Universal guide for creating sections in any Smart CMS project. Technology stack-specific but project-agnostic.

What's inside:

Smart CMS + Tailwind 4 + Laravel 12+ stack overview
Complete Zod schema patterns
Section creation workflow (3 steps)
All available variable types (Image, Link, Navigation, etc.)
System variables reference
Project-specific context gathering template
Best practices and validation patterns
Complete code examples

project-design-system.md ⭐ PROJECT REFERENCE

This project's specific design choices, colors, components, and patterns.

What's inside:

Color palette with usage guidelines
Typography (fonts, sizes, weights)
Spacing standards
Button component variants
Kit components reference
Animations and transitions
Responsive patterns
Common section templates

Core Concepts

Creating a Section

import z from "zod";

// 1. Schema
const mySchema = z.object({
  title: z.string().describe("Title"),
}).meta({
  id: "MySection",
  title: "My Section",
  component: MySection
});

// 2. Component
export default function MySection(props: z.infer<typeof mySchema>) {
  return <section><h2>{props.title}</h2></section>;
}

// 3. Build
// npm run build

System Variables

import { usePage } from "@inertiajs/react";

const { props: pageProps } = usePage();
const logo = pageProps.logo;
const companyName = pageProps.company_name;

Using Components

import { Button } from '@/components/ui';
import { KitLink, KitImage } from '@/components/kit';

<Button variant="primary" href="/contact">Contact</Button>
<KitImage options={{ url: logo.source, alt: companyName }} />

Available Sections

Header - Header with topbar, navbar, dropdown menu
Footer - Footer with 4 columns
HeroBanner - Main banner with background and CTA
ContentFlat - Page content with sidebar

Available Components

UI Components

Button - Button with 3 variants (primary, secondary, outline)

Kit Components

KitLink - Link with automatic routing
KitImage - Image with lazy loading
KitIcon - Icons
KitHeading - Headings

Color Palette

--color-primary: #001F54      /* Dark Blue */
--color-secondary: #D4A574    /* Gold */
--color-accent: #FFD700       /* Bright Yellow */
--color-dark: #0F1A2E         /* Dark */
--color-light: #F8F9FA        /* Light */

Typography

M PLUS Rounded 1c - Headings
Exo 2 - Body text

Workflow

Create section file resources/js/sections/MySection.tsx
Define Zod schema with .meta()
Implement React component
Run npm run build
Section will appear in admin panel

Technology Stack

Smart CMS - Block-based content management system
Laravel 12+ - Backend framework
React - Frontend framework
Inertia.js - Server-side routing with SPA experience
Tailwind CSS v4 - Utility-first CSS framework
Zod - TypeScript-first schema validation
TypeScript - Type safety

smart-cms / starter-kit

Package info

Security

Statistics