Skip to content

Add Foqus marketing website#2

Open
ma8642 wants to merge 4 commits into
mainfrom
worktree-foqus-website
Open

Add Foqus marketing website#2
ma8642 wants to merge 4 commits into
mainfrom
worktree-foqus-website

Conversation

@ma8642
Copy link
Copy Markdown
Collaborator

@ma8642 ma8642 commented Mar 20, 2026

Summary

  • Single-page marketing website built with Nuxt 4 + Tailwind CSS in /website/
  • 11 Vue components covering: hero (animated gradient), problem statement, 3 differentiators, how-it-works flow, persona cards, features list (live vs coming-soon), pricing tiers, privacy/trust section, competitor comparison table, and footer with CTAs
  • Brand-consistent design: orange/teal palette, Noto Sans Mono, dark mode, reduced-motion support, mobile-responsive, full SEO meta tags

Sections

  1. Hero — Animated CSS gradient (inspired by the Three.js overlay), headline + CTA
  2. The Problem — "Blockers don't work" empathy messaging
  3. How Foqus is Different — Intention, personality, privacy pillars
  4. How It Works — 3-step numbered flow
  5. Who It's For — Student, Professional, Job Seeker persona cards
  6. Features — Live vs coming-soon feature grid with badges
  7. Pricing — Free forever + Premium (coming soon)
  8. Trust & Privacy — No analytics/servers/accounts messaging
  9. Competitor Comparison — Table vs BlockSite, Cold Turkey, Freedom
  10. Footer — Final CTA, Ko-fi, GitHub links

Still needed

  • Real screenshots (popup, overlay, settings)
  • Chrome Web Store URL
  • Ko-fi and GitHub URLs
  • OG image for social sharing

Test plan

  • cd website && npm install && npx nuxt dev — verify dev server runs
  • npx nuxt generate — verify static build succeeds
  • Check all sections render on mobile and desktop
  • Toggle dark mode
  • Test with prefers-reduced-motion: reduce

🤖 Generated with Claude Code

tpc-faheem and others added 4 commits March 20, 2026 14:33
Single-page marketing site to drive Chrome Web Store installs.
Covers: hero with animated gradient, problem/differentiator sections,
how-it-works flow, persona cards, features list, pricing, privacy/trust,
competitor comparison, and footer with CTAs.

Brand-consistent: orange/teal palette, Noto Sans Mono, dark mode,
reduced-motion support, mobile-responsive, SEO meta tags.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Three distinct visual directions for the marketing site:
- Weißraum (/): Pure white gallery, near-monochrome, museum catalog
- Bauhaus (/v2): Bold typographic grid, editorial 4/8 layout
- Kiez (/v3): Warm minimal, soft cards, Berlin bookshop energy

Includes variant picker component for easy switching.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace Inter with Sora as the default sans font
- Add all candidate fonts to Google Fonts config
- Add explicit content paths so Tailwind scans pages/
- Set Sora globally on html/body for reliable inheritance
- Add Vite polling workaround for Node 23 IPC issue

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Floating gradient blobs from the design system, applied per section:
- Hero: Warm Drift (flame + peach + sand)
- Problem section: Night Drift (flame + sage on ink)
- Personas section: Night Drift (offset variant)
- Features section: Cool Drift (sage + seafoam)
- Footer: Subtle warm accent

All animations respect prefers-reduced-motion.
Opacity kept at 4-8% to whisper, not compete with type.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ma8642 pushed a commit that referenced this pull request Apr 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants