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

UI: Homepage hero is text-only with no visual hook #60

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 hero section is entirely text-based: headline + subtext + CTA. Only decoration is a subtle SVG pattern at 3% opacity.

Location

`src/routes/index.tsx` lines 36-54, `src/global.css` lines 196-204

Suggested Fix

  1. Add a warm hero image (before/after repair, home interior)
  2. Richer background gradient
  3. Increase pattern visibility or use different pattern
  4. Add floating SVG tool/home illustrations as decorative accents
The hero section is entirely text-based: headline + subtext + CTA. Only decoration is a subtle SVG pattern at 3% opacity. ## Location \`src/routes/index.tsx\` lines 36-54, \`src/global.css\` lines 196-204 ## Suggested Fix 1. Add a warm hero image (before/after repair, home interior) 2. Richer background gradient 3. Increase pattern visibility or use different pattern 4. Add floating SVG tool/home illustrations as decorative accents
glow closed this issue 2026-06-09 21:43:39 +00:00
glow commented 2026-06-09 21:43:42 +00:00
Author
Owner
Copy link

Fixed in commit 469cfa2

Three changes applied:

  1. More pronounced gradient — changed from 180deg (straight down) to 160deg diagonal with a #f0ede6 mid-stop at 50%. Adds visual warmth and depth.

  2. Pattern opacity — bumped from 0.03 to 0.05. Still subtle but more visible texture.

  3. Floating wrench icon — added a decorative SVG wrench (Lucide wrench path) positioned absolutely at top-left with opacity 0.1, rotated 12deg. Hidden on mobile, visible on md+ screens.

Closes #60

**Fixed in commit 469cfa2** Three changes applied: 1. **More pronounced gradient** — changed from `180deg` (straight down) to `160deg` diagonal with a `#f0ede6` mid-stop at 50%. Adds visual warmth and depth. 2. **Pattern opacity** — bumped from `0.03` to `0.05`. Still subtle but more visible texture. 3. **Floating wrench icon** — added a decorative SVG wrench (Lucide wrench path) positioned absolutely at top-left with opacity 0.1, rotated 12deg. Hidden on mobile, visible on md+ screens. Closes #60
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#60
No description provided.