Scope
Implement the visual and layout changes for the product and homepage in the Dawn theme. This brief lists exact content to paste and frontend work to implement.
Pages to create (done)
• "Homepage sections — Hero & benefits (copy for Dawn)" (draft) — contains the hero, benefits, gallery captions and CTAs.
• "Developer job brief — Theme & CSS implementation" (this page).
Design defaults (apply unless brand guide provided)
- Primary CTA color: #FF6B35 (use for Add to cart, primary buttons)
- Accent / link color: #1A73E8
- Font stack: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
- Button radius: 8px
CSS snippets (example)
Apply these rules to theme.css / base.css. Replace token names if Dawn uses design tokens.
/* Primary button */
.button--primary { background-color: #FF6B35; color: #fff; border-radius: 8px; }
/* Product page layout */
.product__media { width: 55%; float: left; }
.product__info { width: 40%; float: right; }
/* Mobile sticky buy bar */
@media (max-width: 749px) { .sticky-buybar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; box-shadow: 0 -4px 12px rgba(0,0,0,0.08); padding: 12px; } }
Homepage implementation notes
- Add a hero section with a centered headline, subheadline and two CTAs (primary and secondary). Primary should link to the product URL /products/hydrogen-water-bottle.
- Add a 3-column benefits block under the hero using the copy from the Homepage sections page.
- Place a 3–5 image gallery below benefits. Use the product images and captions from the Homepage sections page.
- Add a small reviews/testimonial strip below the gallery (use placeholder copy until real reviews are available).
Product page changes
- Left: large image gallery. Right: title, price, short description (first paragraph), bullets, Add to cart button, and secondary details (technology + specs).
- Enable variant swatches if multiple colors are available.
- Use the sticky mobile buy bar when product is scrolled out of view.
Testing checklist
- Desktop hero layout correct and responsive.
- Gallery images are full-width on mobile and large on desktop.
- Add-to-cart works and sticky buy bar appears on mobile.
- Buttons use primary color and meet contrast standards.
- Alt text already updated for product images (accessibility fixed).
Handoff
Developer should paste the hero, benefits and gallery copy from the "Homepage sections" page into the Dawn theme sections. Use the CSS snippets above as starting points and adapt to theme tokens. Leave both pages as drafts until ready to publish.