Skip to content

feat: add situation selector above service detail blocks#61

Merged
romahawk merged 1 commit intomainfrom
dev
Apr 29, 2026
Merged

feat: add situation selector above service detail blocks#61
romahawk merged 1 commit intomainfrom
dev

Conversation

@romahawk
Copy link
Copy Markdown
Owner

Summary

  • Adds a "Choose your situation" 4-card selector section between the overview and detail sections on /services, letting SME buyers jump directly to the relevant offer without scrolling
  • Ships with full EN + DE i18n (titles, descriptions in locale files; anchor hrefs hardcoded as structural constants in JSX)
  • Fixes a root-cause bug: --nav-h was never declared in :root, so every scroll-margin-top: calc(var(--nav-h) + …) silently resolved to its offset only — service titles were hidden under the navbar on anchor jump

Changes

File What changed
main.css Added --nav-h: 72px to :root — fixes all anchor scroll offsets site-wide
services-page.css Added .services-page__selector-* styles; added scroll-margin-top to .services-page__detail; responsive + reduced-motion coverage
ServicesPage.jsx SITUATION_HREFS constant; selectorCards data read; new selector <section> inserted between overview and details
locales/en.js servicesPage.selector kicker, title, subtitle, 4 cards
locales/de.js German equivalent

Test plan

  • Visit /services — confirm selector section appears between overview cards and detail blocks
  • Click each selector card — verify page scrolls to the correct service with title fully visible below navbar
  • Confirm "Not Sure Yet?" links to #book-call
  • Switch to DE — confirm German copy renders
  • Resize to ≤1060px → 2×2 grid; ≤640px → 1-col stack
  • Check prefers-reduced-motion — no transform on hover
  • Lint and build exit 0 ✓

🤖 Generated with Claude Code

- Add 4-card "Choose your situation" selector (Outdated Website,
  Manual Operations, AI Automation, Not Sure Yet?) linking directly
  to the relevant service detail anchor
- Add EN + DE locale strings for selector section
- Fix scroll-margin-top on detail articles so navbar does not
  cover the service title on anchor jump
- Fix root cause: define --nav-h: 72px in :root so all
  calc(var(--nav-h)+…) usages resolve correctly across the codebase
- Responsive: 4-col → 2×2 at 1060px → 1-col stack at 640px
  with 52px min-height for mobile tap targets
- Selector cards covered by prefers-reduced-motion block

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 29, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
portfolio-fullstack Ready Ready Preview, Comment Apr 29, 2026 10:04pm
portfolio-react Ready Ready Preview, Comment Apr 29, 2026 10:04pm

@romahawk romahawk merged commit 6ec87de into main Apr 29, 2026
4 checks passed
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.

1 participant