01: The Client

KosmosPRO is an education and development centre for children, teachers and parents. Its work builds on the legacy of innovative Russian educators (Shatalov, Shchetinin, Amonashvili, Sukhomlinsky) and on Bazarny's health-preserving learning environment.

They needed a site that conveys this philosophy rather than just listing services — and one that lives without a developer: the centre's team must update the event calendar, courses and news themselves.

[ SYS_IMAGE_LOAD ] Home: "cosmos and gold", orbits, smooth scroll

02: The Brief

• Present the centre's values warmly and convincingly — the audience is parents and teachers, not "service buyers"
• Bring the event calendar, kids' courses, teacher programmes and enquiries into one place
• Give the team a simple admin panel: no training, no CMS jargon
• Fit the client's ordinary shared hosting — no Node.js, no subscription cloud services

"Instead of forcing a hosting migration, we designed a hybrid: Next.js exported to static, everything server-side in PHP."

03: Identity

The site was preceded by the centre's identity — from mark exploration to a brand book and carriers.

Exploration ran in several directions: four-field shield crests (traditions, health, upbringing, educators), dot matrices, "growth" plus-crosses. The simplest metaphor won: orbits. The mark is concentric rings, like a section of a planetary system or the growth rings of a tree: the child at the centre, family, teachers and culture around. The logo is "КОС / МОС / ПРО" set in three lines, where the О in "МОС" is those orbits.

[ SYS_IMAGE_LOAD ] Mark exploration: crests, matrices, crosses

[ SYS_IMAGE_LOAD ] Evolution: from shields and dots to orbits

[ SYS_IMAGE_LOAD ] The final mark: three lines, an orbit for the О, the ring key graphic

Brand book

Palette — deep cosmic blue with a golden sunrise gradient; type — a wide grotesque for headings; illustrations — warm scenes with children, stars and Kazan in a textured flat style; icons and graphic elements built from the same rings and four-point stars. Separate slides cover logo rules on photos and coloured grounds, and usage in presentations and social media.

[ SYS_IMAGE_LOAD ] Brand book: logo, colours, type, usage

[ SYS_IMAGE_LOAD ] Brand book: illustration style, icons, graphic elements, carriers

Carriers

Posters and roll-ups with orbits and the line "Development · Upbringing · Learning", tees and totes, badges, pens and folders, signage on the centre's fence.

[ SYS_IMAGE_LOAD ] Posters and roll-ups

[ SYS_IMAGE_LOAD ] Merch: tee, tote, badge

04: Public Site

A single-page landing with sections About, Events, For Kids, For Teachers, Space, Team, Contacts — plus separate course and article pages. The visual language is "cosmos and gold": brand orbits slowly rotating with scroll parallax, gentle block reveals, smooth scrolling.

Each of the centre's four core values opens in a modal with the full text — the home page stays light, and depth is there for those who want to read.

[ SYS_IMAGE_LOAD ] Four pillars of the centre — cards with modals

// Brand orbits: rotation + scroll parallax
const { scrollYProgress } = useScroll();
const y = useTransform(scrollYProgress, [0, 1], [0, -160]);

<motion.div style={{ y }} aria-hidden>
  <motion.svg animate={{ rotate: 360 }}
    transition={{ duration: 160, repeat: Infinity, ease: "linear" }}>
    <circle r="70"  strokeWidth="9" />
    <circle r="120" strokeWidth="8" strokeDasharray="540 220" />
    <circle r="170" strokeWidth="7" />
    <circle r="225" strokeWidth="6" strokeDasharray="900 400" />
  </motion.svg>
</motion.div>

[ SYS_IMAGE_LOAD ] Kids' classes — course cards

[ SYS_IMAGE_LOAD ] The centre's space — gallery with lightbox

05: Content Builder

Events, articles and courses are assembled from blocks: text, heading, quote, key points, schedule timeline, image. Events share one card template with the key fields "Dates / Time / Age / Price / Place" — the editor never thinks about layout, everything looks consistently neat.

export type Block =
  | { type: "text"; text: string }
  | { type: "heading"; text: string }
  | { type: "quote"; text: string }
  | { type: "highlights"; title?: string; items: string[] }
  | { type: "timeline"; title?: string; items: TimelineItem[] }
  | { type: "image"; url: string; caption?: string };

export type EventRecord = {
  published: boolean;
  eyebrow: string | null;   // "4 September · free entry"
  title: string;
  meta: EventMeta;          // Dates / Time / Age / Price / Place
  blocks: Block[];          // the builder
};

06: Admin Panel

Password login, four sections: enquiries, events, articles, courses. Form submissions land in the database with statuses (New / In progress / Done / Archive) and comments — effectively a lightweight CRM. Publishing is a single toggle: drafts are invisible on the site.

[ SYS_IMAGE_LOAD ] Admin: enquiries with statuses and sources

[ SYS_IMAGE_LOAD ] Admin: events, drafts and one-toggle publishing

Notifications

A new enquiry instantly arrives in the centre's Telegram chat and by email. If Telegram isn't configured, intake still works: the enquiry is simply saved to the database, no errors.

07: Engineering for the Hosting

The client's hosting is shared PHP 8 + MySQL, no Node. The Next.js front end is exported to static (output: export), while everything server-side — enquiries, admin API, auth, image uploads — is written in PHP. Content from the database is "baked" into HTML at build time, so the site is served as static files and loads instantly.

Browser ──> static   /index.html, /deti/, /admin/…     ← next build (export)
        └─> PHP API  /api/leads.php, /api/content.php,   ← php/
                     /api/admin/*.php               ──> MySQL

Admin auth has no server sessions: a signed cookie whose value is expiry + HMAC-SHA256 over the secret. Secrets live outside the web root and are unreachable over HTTP. Deployment is one FTP command.

function sign_session(int $expires): string {
    return $expires . '.' . hash_hmac('sha256', (string) $expires, admin_secret());
}

function is_admin(): bool {
    [$expires, $sig] = explode('.', $_COOKIE[ADMIN_COOKIE] ?? '.', 2);
    if (!ctype_digit($expires) || (int) $expires < time()) return false;
    return hash_equals(hash_hmac('sha256', $expires, admin_secret()), $sig);
}

[ SYS_IMAGE_LOAD ] Contacts: map, entrance photo, enquiry form

08: Stack

• Next.js 16, React 19, Tailwind v4, Framer Motion, Lenis (smooth scroll)
• PHP 8, MySQL — enquiries, content, auth, file uploads
• Static export + one-command FTP deploy to shared hosting

09: Outcome

• A site the centre's team runs themselves: events, courses and news update without a developer
• No lost enquiries — one database with statuses and instant Telegram notifications
• Fast static pages on the client's inexpensive hosting — no monthly cloud bills
• An extensible block system: a new content type is added without redesigning