glow/first-home-diy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: Cookie consent banner is visually intrusive — competes with hero CTA #55

New issue
Closed
opened 2026-06-09 21:35:05 +00:00 by glow · 1 comment
glow commented 2026-06-09 21:35:05 +00:00
Owner
Copy link

The cookie consent banner renders as a prominent block mid-page that interrupts the visual flow between the hero section and the content below. It sits at a key decision point, drawing disproportionate attention and competing with the primary CTA button.

Location

`src/components/cookie-consent.tsx`

Suggested Fix

  1. Move to bottom-sticky bar (most common, least intrusive pattern)
  2. Reduce visual weight — thinner bar, smaller buttons, muted colors
  3. Delay appearance — show only after user scrolls or 5+ seconds
The cookie consent banner renders as a prominent block mid-page that interrupts the visual flow between the hero section and the content below. It sits at a key decision point, drawing disproportionate attention and competing with the primary CTA button. ## Location \`src/components/cookie-consent.tsx\` ## Suggested Fix 1. Move to bottom-sticky bar (most common, least intrusive pattern) 2. Reduce visual weight — thinner bar, smaller buttons, muted colors 3. Delay appearance — show only after user scrolls or 5+ seconds
glow closed this issue 2026-06-09 21:39:19 +00:00
glow commented 2026-06-09 21:39:26 +00:00
Author
Owner
Copy link

Changes in 950386d

1. 2-second delay: Wrapped the consent check in setTimeout(() => { visible.value = !hasConsent; }, 2000) so the banner waits 2s before appearing.

2. Slide-up transition: Replaced the return null early-exit with CSS-driven visibility:

  • Banner is always in the DOM but hidden off-screen via translate-y-full
  • When visible, translate-y-0 slides it up
  • transition-all duration-500 smooths the animation

3. Signal initial value changed to false: Prevents server-rendered HTML from rendering the banner on-screen before the client-side task runs.

Behavior

  • New visitor (no cookie): Banner off-screen for 2s, then slides up
  • Returning visitor (has consent): Banner stays hidden off-screen (no visual flash)
  • Decline: Banner slides back down off-screen
## Changes in 950386d **1. 2-second delay:** Wrapped the consent check in `setTimeout(() => { visible.value = !hasConsent; }, 2000)` so the banner waits 2s before appearing. **2. Slide-up transition:** Replaced the `return null` early-exit with CSS-driven visibility: - Banner is always in the DOM but hidden off-screen via `translate-y-full` - When visible, `translate-y-0` slides it up - `transition-all duration-500` smooths the animation **3. Signal initial value changed to `false`:** Prevents server-rendered HTML from rendering the banner on-screen before the client-side task runs. ### Behavior - **New visitor (no cookie):** Banner off-screen for 2s, then slides up - **Returning visitor (has consent):** Banner stays hidden off-screen (no visual flash) - **Decline:** Banner slides back down off-screen
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
bug
Bug fix

  
feature
New feature

  
improvement
Code improvements and refactors

No labels
bug
feature
improvement
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
glow/first-home-diy#55
No description provided.