SPRAY — Art School

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

# SPRAY — Art School Template

A four-page React + TypeScript template for **SPRAY**, a fictional street-art school where beginners learn graffiti, sketching, muralism, and stencil work from working artists. No clean corners, no boring classrooms.

Built with React, TypeScript, Tailwind CSS, react-router-dom, and Framer Motion, bundled by Vite. The template ships with **zero image assets** — every artwork slot is a labeled gradient placeholder, so it renders correctly out of the box.

## Design direction

**Raw DIY-zine street art** — a deliberate anti-gallery aesthetic:

- **Type:** Anton (condensed display, tight tracking) for headlines; Space Grotesk (body, 400–700) for copy.
- **Palette:** ink-black `#0a0a0f` surfaces, ink-navy panels, bone `#f2f0e6` text, one neon-green `#39FF14` primary accent, hot-pink `#ff2ec4` secondary accent.
- **Texture:** torn-paper divider strips (`TornDivider.tsx`), hanging spray-splatter SVG blobs (`SplatterDecoration.tsx`), a subtle fixed film-grain noise overlay, and clip-path spray-button silhouettes (`Button.tsx`).
- **Motion:** restrained Framer Motion reveals on headlines, cards, and roadmap steps; splatter blobs idle-float and torn strips drift.
- **Composition:** rotated cards and badges, an oversized `clamp()`-scaled headline, numbered roadmap only where the sequence is real (enroll → sketch → wall time → critique → show).

The visual system lives entirely in `tailwind.config.ts` (colors, fonts, keyframes), `src/styles/globals.css`, and the presentational components — it does not depend on the shared DevSnips `--ds-*` tokens.



## Pages

| Route | File | Composition |
| --- | --- | --- |
| `/` | `src/pages/Home.tsx` | Hero, Selected Work, Courses, About, Roadmap, Testimonials, CTA, Footer |
| `/work` | `src/pages/Work.tsx` | Section heading + full Selected Work archive, CTA, Footer |
| `/about` | `src/pages/About.tsx` | About, Roadmap, Testimonials, CTA, Footer |
| `/contact` | `src/pages/Contact.tsx` | Labelled contact form with validation + success state, Footer |

## Structure

```text
spray-art-school/
├── index.html                 # Vite entry (theme-color, root mount)
├── preview.html               # self-contained static preview of the whole site (open directly)
├── package.json               # React 18, React Router 6, Framer Motion 11, Vite 5
├── tailwind.config.ts         # colors, fonts, animation keyframes
├── postcss.config.js
├── tsconfig.json              # strict TypeScript
└── src/
    ├── main.tsx              # BrowserRouter + StrictMode mount
    ├── App.tsx               # Navbar + routed pages + noise overlay
    ├── components/           # Navbar, Button, Logo, Badge, ProjectCard, ServiceCard,
    │                            SectionHeading, TornDivider, SplatterDecoration
    ├── sections/              # Hero, SelectedWork, Services, About, Process,
    │                            Testimonials, CTA, Footer
    ├── pages/                # Home, Work, About, Contact
    ├── data/                 # Typed content arrays: projects, services, testimonials
    └── styles/
        └── globals.css        # Google Fonts, Tailwind layers, noise texture, clip-paths
```

## Setup & run

Requires Node.js + npm. From the template root:

```bash
npm install
npm run dev        # Vite dev server — open the printed URL (usually http://localhost:5173)
```

Production build + local preview:

```bash
npm run build      # tsc type-check + Vite production build → dist/
npm run preview     # serve the built app
```

**Static preview:** `preview.html` at the template root is a fully self-contained
static prototype of the whole site (Tailwind CDN + hash-routed home/work/about/
contact, working mobile menu and contact form, scroll reveals). Open it directly
in a browser or serve the folder — no build step needed. It mirrors the real
app's markup and design system so you can preview the template without
installing dependencies.

## Sections & components

- **Navbar** — sticky header that gains a blurred ink backdrop on scroll; mobile menu toggles `aria-expanded` and swaps ☰/✕ icons; Sign-up CTA.
- **Hero** — oversized clamp()-scaled “ART / SCHOOL” display, torn divider, lede, spray CTA, floating splatters.

- **SelectedWork** — responsive grid of rotated student-piece cards (gradient placeholder, category badge, student + year).
- **Services** — five course cards with bullets and schedule metadata (Basics, Sketching, Muralism, Stencils, Freedom).
- **About** — oversized manifesto pull-copy with neon/pink emphasis words, splat decoration.

- **Process** — five-step numbered roadmap (Enroll → Sketch → Wall time → Critique → Show) on a vertical/horizontal timeline.

- **Testimonials** — three rotated quote cards with student name + course.
- **CTA** — centered display call-to-action with spray Button..
- **Footer** — logo, social links, auto-year copyright.
- **Contact page** — labelled Name/Email/Message form with native required validation; submit swaps to a `role="status"` success message.



## Customization

- **Content:** edit the typed arrays in `src/data/` (projects, services, testimonials) — card copy never lives in the components themselves.
- **Re-theme:** colors, fonts, and keyframes are defined once in `tailwind.config.ts` and the base styles in `src/styles/globals.css`; swapping the palette re-colors every section consistently.


- **Real artwork:** drop image files into `src/assets/images/`and replace the placeholder blocks in `ProjectCard.tsx` with `<img>` tags when ready. The scaffold intentionally ships asset-free so it always renders without broken images.
- **Add a page:** create a `src/pages/*.tsx` route, compose existing sections, and register it in `src/App.tsx`.



## Accessibility

- Semantic landmarks (`header`, `main`, `section`, `footer`, `nav`, `form`).
- Single `h1` per page; descriptive `h2` section headings with eyebrows..
- Mobile menu wired with `aria-expanded`; contact form labels tied via `htmlFor`/`id`; the success message uses `role="status"`.
- Global `:focus-visible` dashed outline; decorative SVGs (`SplatterDecoration`, `TornDivider`) are `aria-hidden`.
- Reduced-motion: Framer Motion transitions resolve instantly under `prefers-reduced-motion`; CSS animations are purely cosmetic, and the noise overlay is static.



## Browser support

Modern evergreen browsers (Chrome, Firefox, Safari, Edge). Requires JS for routing and animations; no legacy-IE support.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{
  "name": "spray-art-school",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "framer-motion": "^11.2.10",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.24.0"
  },
  "devDependencies": {
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.4",
    "typescript": "^5.5.2",
    "vite": "^5.3.1"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#0a0a0f" />
    <link
      rel="icon"
      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230a0a0f'/%3E%3Ccircle cx='16' cy='15' r='7' fill='%2339FF14'/%3E%3Crect x='10' y='22' width='12' height='4' fill='%23ff2ec4'/%3E%3C/svg%3E"
    />
    <title>SPRAY — Art School</title>
  </head>
  <body class="bg-ink-black">
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

# AGENTS.md — SPRAY Art School

Guidance for an AI agent adapting this template. Read this before editing.

## What this template is

A four-page **React + TypeScript** template for **SPRAY**,a fictional street-art school where beginners learn graffiti, sketching, muralism,and stencil work from working artists. The template ships the full Vite project with **zero image assets** — every artwork slot is a labeled gradient placeholder,so it renders correctly out of the box. Built with React 18, TypeScript, Tailwind CSS, react-router-dom,and Framer Motion,bundled by Vite.



## Design system

**Raw DIY-zine street art** — a deliberate anti-gallery aesthetic: **Anton**(condensed display, tight tracking) for headlines + **Space Grotesk**(body, 400–700)for copy; palette ink-black `#0a0a0f` surfaces, ink-navy panels, bone `#f2f0e6` text, one neon-green `#39FF14` primary accent + hot-pink `#ff2ec4` secondary accent; texture via torn-paper dividers(`TornDivider.tsx`),hanging spray-splatter SVG blobs(`SplatterDecoration.tsx`),a subtle fixed film-grain noise overlay,and clip-path spray-button silhouettes(`Button.tsx`). Motion:restrained Framer Motion reveals on headlines, cards,and roadmap steps(reduced-motion friendly. The visual system lives entirely in `tailwind.config.ts` (colors, fonts, keyframes), `src/styles/globals.css`,and the presentational components — it does not depend on the shared DevSnips `--ds-*` tokens.



## File layout

```
spray-art-school/
├── index.html                 # Vite entry (theme-color, root mount)
├── preview.html               # Self-contained static preview of the whole site (open directly)
├── package.json               # React 18, React Router 6, Framer Motion 11, Vite 5
├── tailwind.config.ts         # colors, fonts, animation keyframes
├── postcss.config.js
├── tsconfig.json              # strict TypeScript
└── src/
    ├── main.tsx              # BrowserRouter + StrictMode mount
    ├── App.tsx               # Navbar + routed pages + noise overlay
    ├── components/           # Navbar, Button, Logo, Badge, ProjectCard, ServiceCard,
    │                            SectionHeading, TornDivider, SplatterDecoration
    ├── sections/              # Hero, SelectedWork, Services, About, Process,
    │                            Testimonials, CTA, Footer
    ├── pages/                # Home, Work, About, Contact
    ├── data/                 # Typed content arrays: projects, services, testimonials
    └── styles/
        └── globals.css        # Google Fonts, Tailwind layers, noise texture, clip-paths
```

Routes: `/` Home(Hero, Selected Work, Courses( Services), About, Roadmap( Process), Testimonials, CTA, Footer), `/work` Work(archive), `/about` About( Roadmap, Testimonials, CTA, Footer}, `/contact` Contact(labelled form with validation + success state.



## How to adapt it

1. **Swap the school**: edit the typed content arrays in `src/data/` (projects, services, testimonials) — card copy never lives in the components themselves.
2. **Re-theme**: colors, fonts,and keyframes are defined once in `tailwind.config.ts` + `src/styles/globals.css`;swapping the palette re-colors every section consistently..
3. **Add a page**: create a `src/pages/*.tsx` route, compose existing sections,and register it in `src/App.tsx`.
4. **Real artwork**: drop image files into `src/assets/images/` and replace the placeholder blocks in `ProjectCard.tsx` with `<img>` tags when ready..
5. **Run the app**: `npm install` → `npm run dev` (dev server); `npm run build` (tsc + Vite production build→ `dist/`,then `npm run preview`.



## Do not

- Do not introduce a state-management library or extra runtime dependencies—the template deliberately has zero beyond React, React Router,and Framer Motion..
- Do not remove the `aria-hidden` treatment on decorative splatters/torn dividers or the `role="status"` success state on the contact form..
- Do not change the gradient-placeholder artwork slots into broken `<img>` tags without adding real asset files.



## Quality bar

Semantic landmarks(`header`, `main`, `section`, `footer`, `nav`, `form`), single `h1` per page, descriptive `h2` section headings with eyebrows, mobile menu `aria-expanded`, form labels via `htmlFor`/`id`, `role="status"` success message, global `:focus-visible` dashed outline, `prefers-reduced-motion` resolves Framer Motion transitions instantly. Run `npm run build` (strict `tsc` type-check) and `python3 scripts/tooling/validators/validate.py` after changes.