glass/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Commands

npm run dev       # Start dev server with HMR (Vite)
npm run build     # Production build to dist/
npm run preview   # Preview production build locally
npm run lint      # ESLint check

No test suite is configured.

Project Overview

Russian-language landing page for a ballistic window film (бронирование стекол) company. Single-page marketing site with a lead capture form that posts to a Telegram bot.

Architecture

Single-page React 19 app with Vite, no routing. App.jsx composes all sections in vertical order: Navbar → Hero → PhysicsOfSafety → UseCases → TrustBar → Comparison → Estimator → LeadForm → Footer.

Key patterns:

• All styling is inline style={{}} props — there are no CSS modules or Tailwind classes. The only utility classes are defined in src/index.css: .glass-panel, .btn-primary, .btn-outline, .container, .text-accent-blue/yellow/orange.
• Animations use framer-motion (motion.* components with whileInView, whileHover, whileTap).
• Icons come from lucide-react.
• CSS custom properties (set in :root in index.css) define the design tokens — use these for any new color or spacing values.

Lead form integration: LeadForm.jsx reads VITE_TG_BOT_TOKEN and VITE_TG_CHAT_ID from .env and POSTs to the Telegram Bot API. Copy .env.example to .env to configure locally.

Estimator: Estimator.jsx calculates cost client-side based on film thickness (200µm = 2000 ₽/m², 300µm = 3000 ₽/m²) and glazing area. The windows slider state exists but is not used in the cost formula.