Files

Sanil Chawla fd7d977c65 feat(page): initial landing page with dev tooling

Pre-launch landing page for The Lofty Project — a 501(c)(4) connecting
creative talent with leftist organizing. Includes hero with blur-in
line-by-line animation, three-pillar section (Talent/Media/Infrastructure),
interest signup buttons, and responsive design with fluid typography.

Tooling: Astro 5, Biome linting/formatting, Lefthook git hooks,
Commitizen with conventional commits, and project documentation.

2026-02-11 16:49:59 -08:00

2.8 KiB

Raw Blame History

CLAUDE.md

Project Overview

Lofty is a 501(c)(4) social welfare organization connecting creative professionals with the progressive movement. This repo is the pre-launch landing page — a single-page static site to collect email signups.

Stack: Astro 5 (static output), TypeScript, Bun 1.3+

Project Structure

src/
  layouts/Layout.astro   # HTML shell, meta tags, Typekit fonts, design tokens, CSS reset
  pages/index.astro      # All page sections (hero, pillars, signup form, footer), scoped CSS, client JS
public/
  favicon.svg            # Stylized "L" mark
astro.config.mjs         # Static output, site URL, dev toolbar disabled

Two-file architecture: Layout.astro (global concerns) + index.astro (all content). No component files — single page with no reuse opportunity.

Development

bun run dev       # Start dev server (localhost:4321)
bun run build     # Static build to dist/
bun run preview   # Preview production build

Linting & Formatting

Uses Biome for both linting and formatting.

bun run lint       # Check for lint + format issues
bun run lint:fix   # Auto-fix lint + format issues
bun run format     # Format all files

Biome config: 4-space indent, 100 char line width, double quotes, trailing commas, semicolons. Astro files have noUnusedImports/noUnusedVariables disabled (Biome can't parse Astro template references).

Commit Standards

This project uses conventional commits enforced by commitlint + lefthook.

Format: type(scope): subject

Types: feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert

Scopes: page, style, config, deps (custom scopes allowed)

bun run commit    # Guided commit via commitizen (cz-git)

Do not include co-author lines or "Generated by" attributions in commit messages.

Git Hooks (Lefthook)

pre-commit: Biome check on staged files
commit-msg: Commitlint validation
pre-push: Full build

Design Tokens

Colors, typography, and spacing are defined as CSS custom properties in Layout.astro:

Colors: cream (#F5F0EB), dusty-rose (#C48B8B), slate-blue (#8A9BB5), navy (#1A1F2E)
Fonts: neue-haas-grotesk-display (body, weight 500), meno-text (display/headings) via Typekit
Spacing/type: Fluid scales using clamp()

Environment Variables

PUBLIC_SIGNUP_ENDPOINT — Form submission endpoint (defaults to /api/signup). See .env.example.

Key Patterns

All scroll animations use .reveal class + IntersectionObserver (threshold 0.1, -40px root margin)
Hero animations are CSS-only with staggered delays via --i custom property
prefers-reduced-motion is detected via inline script and disables all animations via .reduce-motion class
Form handler uses progressive enhancement — works as standard POST without JS

2.8 KiB Raw Blame History