Cuối Tuần Đi Đâu? — Landing Page

Landing page for Cuối Tuần Đi Đâu?, a mobile app helping Vietnamese parents in Hanoi and Ho Chi Minh City discover weekend activities for their families.

Pages

• index.html — Main landing page
• privacy.html — Privacy policy
• terms.html — Terms of service
• community-standards.html — Community standards

Tech Stack

• HTML with Tailwind CSS v3 (self-hosted, built from source)
• Inter font (self-hosted woff2)
• Playwright for visual regression tests
• Build system: TailwindCSS CLI + custom HTML partial compiler

Prerequisites

• Node.js >= 18
• npm

Setup

npm install
npx playwright install --with-deps   # for visual tests

Development

Source files live in src/ — do not edit the root HTML files directly (they are generated by the build).

• src/*.src.html — HTML templates (with <!-- @include --> directives)
• src/input.css — Tailwind CSS source
• partials/ — Reusable HTML fragments (footer, icons)
• assets/js/ — JavaScript (carousel, menu)
• assets/css/carousel.css — Hand-authored carousel styles

npm run dev        # Watch CSS changes (rebuilds on save)
npm run build      # Build CSS + HTML (one-shot)
npm run build:css  # Build CSS only
npm run build:html # Build HTML only

The build script (scripts/build-html.js) processes src/*.src.html templates:

• Resolves <!-- @include partials/file.html --> directives
• Replaces {{APK_VERSION}} with appVersion from package.json
• Strips HTML comments from output

Testing

npm run test:visual          # Run visual regression tests
npm run test:visual:update   # Update screenshot baselines

Tests run across 4 viewports: mobile (375px), tablet (768px), desktop (1280px), wide (1440px).

Contributing

1. Edit files in src/, partials/, or assets/ — not the root HTML files
2. Run npm run build before committing
3. Run npm run test:visual to check for regressions
4. Use conventional commit messages: feat:, fix:, refactor:, docs:

License

All rights reserved.