Skip to content

Add SGRR v6 website with redesigned styles and HTML structure#265

Open
sideling wants to merge 1 commit intonextlevelbuilder:mainfrom
sideling:claude/implement-sgrr-v6-7kuRZ
Open

Add SGRR v6 website with redesigned styles and HTML structure#265
sideling wants to merge 1 commit intonextlevelbuilder:mainfrom
sideling:claude/implement-sgrr-v6-7kuRZ

Conversation

@sideling
Copy link
Copy Markdown

Summary

This PR introduces the complete SGRR v6 website redesign, featuring a bold visual refresh with serif typography, a warmer color palette, and a modern component-based layout. The site is fully responsive and includes integrated quote form functionality with success states.

Key Changes

  • New stylesheet (styles.css): 1,088 lines of comprehensive CSS including:

    • Design token system with warm, deeper color palette (navy, orange, cream, sage)
    • Typography system using Instrument Serif for display and Inter Tight for body text
    • Component styles for navigation, hero section, quote card, comparison grid, process cards, pricing cards, service tiles, reviews, FAQ accordion, and footer
    • Responsive grid layouts with mobile-first approach
    • Smooth animations and transitions (pulse effect, fade-in, accordion expand/collapse)
    • Sticky mobile bar with CTA buttons
    • Accessibility features (reduced motion support, proper contrast ratios)
  • New HTML page (SGRR v6.html): 705-line responsive website featuring:

    • Fixed navigation with logo, links, and CTA button
    • Full-height hero section with background image overlay, pricing display, and dual CTA buttons
    • Embedded quote form with file upload capability and success state messaging
    • "Skip bin vs SGRR" comparison section with feature lists
    • Three-step process cards with icons
    • Pricing grid with featured tier highlighting
    • Service tiles grid (6 services with icons)
    • Sydney-focused split section with stats
    • Reviews section with 5-star ratings and testimonials
    • FAQ accordion with 6 common questions
    • Suburb tags section
    • Final CTA section with phone number and trust indicators
    • Comprehensive footer with business hours, links, and contact info
    • JSON-LD structured data (LocalBusiness and FAQPage schemas)
    • Open Graph meta tags for social sharing
  • Assets: Added logo.png and hero.jpg image files

Notable Implementation Details

  • Form handling: Quote form includes client-side submission with success state toggle and photo upload support
  • Responsive design: Breakpoints at 560px, 640px, 768px, 960px, and 1024px for optimal mobile, tablet, and desktop experiences
  • Accessibility: Semantic HTML, ARIA labels, icon sprites for SVG reuse, and support for prefers-reduced-motion
  • Performance: Preconnect to Google Fonts, image preloading, and optimized CSS with minified selectors
  • SEO: Comprehensive meta tags, JSON-LD schemas, and semantic heading hierarchy

https://claude.ai/code/session_01Wa8NZSJEkMYXbs8xVqGwUT

Full pixel-faithful implementation of the SGRR (Sydney Garage & Rubbish
Removal) v6 design from claude.ai/design:

- sgrr/SGRR v6.html — complete single-page landing site with Nav, Hero +
  quote form, Skip vs SGRR compare, Process, Pricing, Services, Sydney
  split, Reviews, FAQ, Suburbs, Final CTA, Footer, sticky mobile bar
- sgrr/styles.css — design tokens (Instrument Serif / Inter Tight /
  JetBrains Mono, navy + orange + cream palette), full responsive layout
- sgrr/assets/hero.jpg + logo.png — externalized images (no base64 bloat)

Key design highlights: SVG icon sprite (no emoji), JSON-LD LocalBusiness +
FAQPage structured data, client-side quote form success state, prefers-
reduced-motion guard, WCAG-AA contrast, OG/Twitter meta tags.

https://claude.ai/code/session_01Wa8NZSJEkMYXbs8xVqGwUT
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