Modern luxury design studio marketing site built with Next.js 15 + React 19 + Tailwind 4
- Framework: Next.js 15 (app router + Turbopack)
- UI: React 19 with framer-motion animations
- Styling: Tailwind CSS 4 with design tokens
- Language: TypeScript 5
- Deployment: AWS S3 + CloudFront via GitHub Actions
cd marketing
npm install
npm run devVisit http://localhost:3000 to see the site.
npm run buildThis generates a static export in ./out ready for S3 deployment.
npm run deployUses AWS CLI with profile con to sync to S3 bucket byconstruct.com.
The site auto-deploys via GitHub Actions when changes are pushed to main:
- Build & Test: Lints code, builds Next.js, runs static export
- Deploy: Syncs to S3, invalidates CloudFront cache
- Lighthouse: Performance audit with minimum 90% scores
AWS_ACCESS_KEY_IDAWS_SECRET_ACCESS_KEYCLOUDFRONT_DISTRIBUTION_ID
| Color | Hex | Usage |
|---|---|---|
| Emerald Forest | #014421 |
Primary brand, hero backgrounds |
| Oxblood Red | #4A0000 |
Accent elements, CTAs |
| Imperial Yellow | #F6C700 |
Highlights, hover states |
| Royal Blue | #002366 |
Secondary sections |
| Ivory Mist | #F6F5F0 |
Light backgrounds, text on dark |
| Charcoal Black | #121212 |
Text, dark sections |
marketing/
├─ components/
│ ├─ ui/ # Reusable primitives (Button, Container, Section)
│ └─ sections/ # Marketing blocks (Hero, About, Experience)
├─ app/ # Next.js 15 app router
└─ styles/ # Global CSS + Tailwind config
Rule: ui/* components never import from sections/*; the reverse is allowed.
- Lighthouse: ≥90 on all metrics (Performance, SEO, Best Practices, A11y)
- Core Web Vitals: Optimized with Next.js image optimization and static export
- Caching: Immutable assets (1 year), HTML files (no-cache)
- Production: https://byconstruct.com
- Staging: Deploy previews on every PR via GitHub Actions
Built with precision. Designed to be felt.