us-hero-design

US Landing Page Hero — Price Comparison Visual for 3 Popular US Products

Issue: BUY-3217
Purpose: Design US landing page hero section showcasing price comparison for 3 popular US products
Target Handoff: 2026-04-20
Target Audience: US consumers looking to compare prices across major retailers

1. Design Philosophy

The US landing page hero must instantly communicate BuyWhere's core value proposition: helping consumers find the best prices across major US retailers.

Key objectives:

Clarity — Immediately show what BuyWhere does (price comparison)
Concrete Value — Demonstrate real savings with actual product examples
Trust — Establish credibility with retailer logos and usage stats
Action — Encourage immediate search behavior

Avoid: abstract concepts, technical jargon, developer-focused messaging.
Prefer: concrete examples, recognizable retailer brands, clear savings visualization.

2. Hero Section Layout

Desktop (≥1024px)

┌─────────────────────────────────────────────────────────────────────────┐
│  [BuyWhere Logo]                    [Search ██████████████████]    [→] │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│     ┌─────────────────────────────────────────────────────────┐         │
│     │                                                         │         │
│     │   Compare prices across Amazon, Walmart, Target & more  │         │
│     │                                                         │         │
│     │                                                         │         │
│     │   ┌─────────────────────────────────────────────────┐    │         │
│     │   │               PRICE COMPARISON TABLE            │    │         │
│     │   ├──────────────┬──────────┬──────────┬──────────┬────────┤   │
│     │   │ Product      │ Amazon   │ Walmart  │ Target   │ Best   │   │
│     │   ├──────────────┼──────────┼──────────┼──────────┼────────┤   │
│     │   │ iPhone Case  │ $12.99   │ $10.99   │ $11.49   │ Walmart│   │
│     │   │              │          │          │          │ (Save 15%)│ │
│     │   ├──────────────┼──────────┼──────────┼──────────┼────────┤   │
│     │   │ Running      │ $45.00   │ $38.99   │ $42.50   │ Walmart│   │
│     │   │ Shoes        │          │          │          │ (Save 13%)│ │
│     │   ├──────────────┼──────────┼──────────┼──────────┼────────┤   │
│     │   │ Coffee Maker │ $89.99   │ $79.99   │ $84.99   │ Walmart│   │
│     │   │              │          │          │          │ (Save 11%)│ │
│     │   └──────────────┴──────────┴──────────┴──────────┴────────┘   │
│     │                                                         │         │
│     │                                                         │         │
│     │   [Search 900K+ US products... ████████████████]        │         │
│     │                                                         │         │
│     │   ─────────────────────────────────────────────         │         │
│     │                                                         │         │
│     │   ✓ 21 US retailers  ✓ Updated daily  ✓ Free to use     │         │
│     │                                                         │         │
│     │   [Amazon]    [Walmart]    [Target]    [Best Buy] ...   │         │
│     └─────────────────────────────────────────────────────────┘         │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Mobile (<640px)

┌─────────────────────────────────────────────────┐
│ [Logo]                     [Search]    [→]      │
├─────────────────────────────────────────────────┤
│                                                 │
│  Compare prices across Amazon, Walmart,         │
│  Target & more                                  │
│                                                 │
│  ┌───────────────────────────────────────┐     │
│  │               PRICE COMPARISON        │     │
│  ├──────────────┬──────────┬──────────┬──────┤ │
│  │ Product      │ Amazon   │ Walmart  │ Best │ │
│  ├──────────────┼──────────┼──────────┼──────┤ │
│  │ iPhone Case  │ $12.99   │ $10.99   │ Wal  │ │
│  │              │          │          │ (15%)│ │
│  ├──────────────┼──────────┼──────────┼──────┤ │
│  │ Running Shoes│ $45.00   │ $38.99   │ Wal  │ │
│  │              │          │          │ (13%)│ │
│  ├──────────────┼──────────┼──────────┼──────┤ │
│  │ Coffee Maker │ $89.99   │ $79.99   │ Wal  │ │
│  │              │          │          │ (11%)│ │
│  └──────────────┴──────────┴──────────┴──────┘ │
│                                                 │
│  [Search 900K+ US products... ████████████████] │
│                                                 │
│  ────────────────────────────────────────       │
│                                                 │
│  ✓ 21 US retailers                              │
│  ✓ Updated daily                                │
│  ✓ Free to use                                  │
│                                                 │
│  [Amazon] [Walmart] [Target] [Best Buy] ...     │
└─────────────────────────────────────────────────┘

3. Visual Treatment

Color Palette

Background: White (#FFFFFF) with subtle gray (#F9FAFB) accent for table
Primary CTA: Indigo (#4F46E5) — matches existing brand
Search Bar: White with gray border (#E5E7EB), focus state with indigo ring
Text: Gray-900 (#111827) for headlines, Gray-500 (#6B7280) for body
Savings Highlight: Green (#10B981) background with white text for best price
Trust Badges: Indigo-100 (#E0E7FF) background with indigo-600 text
Retailer Logos: Grayscale with color on hover

Typography

Headline: Inter Bold (700), 36px desktop / 24px mobile, line-height 1.2
Subheadline: Inter Regular (400), 18px desktop / 16px mobile
Table Header: Inter SemiBold (600), 14px
Table Body: Inter Regular (400), 13px
Savings Badge: Inter SemiBold (600), 12px
Search Input: Inter Regular (400), 16px
CTA Button: Inter SemiBold (600), 16px
Trust Stats: Inter Medium (500), 14px
Retailer Labels: Inter Medium (500), 12px

Spacing

Hero Section Padding: 64px top/bottom desktop, 40px mobile
Search Bar: 52px height desktop, 44px mobile, 8px border-radius
CTA Button: 44px height, 20px horizontal padding, 8px border-radius
Table: 16px border-radius, overflow-hidden
Trust Stats: 10px gap between items, vertical stack on mobile
Retailer Logo Section: 20px top margin, 12px gap between logos

Retailer Logos

Display as muted/grayscale initially (opacity-70)
On hover: reveal full color with subtle scale (1.05)
Logos: Amazon (wordmark), Walmart (spark), Target (bullseye), Best Buy (yellow tag)
Height: 24px for logos
Container shows 4 logos with "..." indicating more

Price Comparison Table Styling

Header: bg-gray-50, text-gray-800, bold text
Rows: Alternating bg-white and bg-gray-50 for readability
Best Price Column: bg-green-50 with green text and savings badge
Savings Badge: bg-green-100 text-green-800 text-xs px-2 py-1 rounded
Borders: border border-gray-200 between cells
Hover State: bg-gray-50 on rows (desktop only)

4. Component Specifications

Hero Container

<section className="bg-white py-16 md:py-20">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Content goes here -->
  </div>
</section>

Headline Block

<h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
  Compare prices across Amazon, Walmart, Target & more
</h1>

Price Comparison Table

<div className="overflow-hidden rounded-lg shadow-sm mb-6">
  <table className="min-w-full divide-y divide-gray-200">
    <thead className="bg-gray-50">
      <tr>
        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
          Product
        </th>
        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
          Amazon
        </th>
        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
          Walmart
        </th>
        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
          Target
        </th>
        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
          Best Price
        </th>
      </tr>
    </thead>
    <tbody className="bg-white divide-y divide-gray-200">
      <!-- iPhone Case Row -->
      <tr className="hover:bg-gray-50">
        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
          iPhone Case
        </td>
        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$12.99</td>
        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">$10.99</td>
        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$11.49</td>
        <td className="px-6 py-4 whitespace-nowrap text-sm">
          <span className="flex items-center">
            <span className="mr-2">$10.99</span>
            <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
              Save 15%
            </span>
          </span>
        </td>
      </tr>
      <!-- Running Shoes Row -->
      <tr className="hover:bg-gray-50">
        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
          Running Shoes
        </td>
        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$45.00</td>
        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">$38.99</td>
        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$42.50</td>
        <td className="px-6 py-4 whitespace-nowrap text-sm">
          <span className="flex items-center">
            <span className="mr-2">$38.99</span>
            <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
              Save 13%
            </span>
          </span>
        </td>
      </tr>
      <!-- Coffee Maker Row -->
      <tr className="hover:bg-gray-50">
        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
          Coffee Maker
        </td>
        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$89.99</td>
        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">$79.99</td>
        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$84.99</td>
        <td className="px-6 py-4 whitespace-nowrap text-sm">
          <span className="flex items-center">
            <span className="mr-2">$79.99</span>
            <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">
              Save 11%
            </span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Search Bar Container

<div className="relative mb-6">
  <label className="sr-only" for="hero-search">
    Product search
  </label>
  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
    <SearchIcon className="h-5 w-5 text-gray-400" />
  </div>
  <input
    type="search"
    id="hero-search"
    className="block w-full rounded-md border-0 py-3 pl-10 pr-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
    placeholder="Search 900K+ US products..."
  />
</div>

CTA Button

<button type="button"
        className="w-full flex justify-center items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-indigo-600 border border-transparent rounded-md active:bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
  Compare prices →
</button>

Trust Stats

<div className="flex flex-wrap items-center justify-between gap-4 text-sm text-gray-500 mt-6">
  <div className="flex items-center gap-2">
    <CheckCircleIcon className="h-4 w-4 text-indigo-600" />
    <span>21 US retailers</span>
  </div>
  <div className="flex items-center gap-2">
    <ClockIcon className="h-4 w-4 text-indigo-600" />
    <span>Updated daily</span>
  </div>
  <div className="flex items-center gap-2">
    <CheckCircleIcon className="h-4 w-4 text-indigo-600" />
    <span>Free to use</span>
  </div>
</div>

Retailer Logos

<div className="flex flex-wrap items-center justify-center gap-4 mt-6">
  <p className="text-xs text-gray-500">Powered by:</p>
  <div className="flex gap-3">
    <img src="/logos/amazon.svg" alt="Amazon" className="h-5 w-auto opacity-70 hover:opacity-100 transition-opacity" />
    <img src="/logos/walmart.svg" alt="Walmart" className="h-5 w-auto opacity-70 hover:opacity-100 transition-opacity" />
    <img src="/logos/target.svg" alt="Target" className="h-5 w-auto opacity-70 hover:opacity-100 transition-opacity" />
    <img src="/logos/bestbuy.svg" alt="Best Buy" className="h-5 w-auto opacity-70 hover:opacity-100 transition-opacity" />
    <span className="text-xs text-gray-400">and more</span>
  </div>
</div>

5. Mobile Responsiveness

Breakpoints

Mobile (<640px): Stacked elements, full-width table scrollable horizontally
Tablet (640-1024px): Similar to mobile with increased padding
Desktop (>1024px): Grid layout with table and search side-by-side on larger screens

Mobile-Specific Adjustments

Headline size: 24px
Table becomes scrollable horizontally with min-w-[600px]
Search bar: Full width, 44px height
CTA button: Full width
Trust stats: Vertical stack with centered alignment
Retailer logos: 20px height, 24px gap

6. Accessibility

WCAG 2.1 AA Compliance

Color Contrast: All text meets 4.5:1 minimum contrast ratio
Focus Indicators: Visible focus rings on all interactive elements
Touch Targets: Minimum 44x44px for all interactive elements
Screen Reader: Proper heading hierarchy, descriptive labels
Keyboard: Logical tab order: Logo → Search Input → Table → CTA → Trust Stats → Retailer Links

ARIA Implementation

Search input: aria-label="Search for products to compare prices"
Table: aria-label="Price comparison of popular products" with proper scope attributes
Savings badges: aria-label="Save 15% at Walmart" etc.
CTA button: Descriptive text (not just "→")
Retailer links: aria-label="View Amazon products on BuyWhere"

7. Product Selection Rationale

The three products were chosen to represent different price points and categories:

iPhone Case ($10.99-$12.99) - Low-cost, high-volume accessory
- Represents everyday purchases where small percentage savings matter
- Widely recognized product with consistent pricing
Running Shoes ($38.99-$45.00) - Mid-range apparel/footwear
- Represents considered purchases where brand and price both matter
- Shows meaningful dollar savings from percentage differences
Coffee Maker ($79.99-$89.99) - Higher-cost home goods
- Represents occasional purchases where research and comparison are valuable
- Demonstrates that BuyWhere works across all price ranges

All products are nationally available at the selected retailers with consistent models/SKUs.

8. Implementation Notes

Data Source

Prices should be fetched from the BuyWhere API endpoint for real-time accuracy
Fallback to static values if API unavailable
Consider caching strategy for frequently viewed products

Interaction States

Table rows: Subtle hover highlight (desktop only)
Search bar: Clear button appears on input, loading state during search
CTA button: Loading state during search submission
Retailer logos: Grayscale to color transition on hover

Performance Considerations

Optimize logo loading with lazy loading and appropriate sizing
Consider virtualization if expanding to more products
Use CSS transitions for smooth hover effects

Analytics Tracking

Track price table views as engagement metric
Monitor click-through to individual product comparisons
Measure search initiation rate from hero section
A/B test different product combinations for optimal engagement

9. Open Questions

Dynamic vs Static Data: Should prices be pulled from live API or use static examples?
- Recommendation: Use static examples for consistency, with disclaimer "Example prices"
Number of Products: Should we show 3 products or vary based on screen size?
- Recommendation: Fixed 3 products for consistency, scrollable on mobile
Retailer Count: Should we show all 21 retailers or just major ones?
- Recommendation: Show 4 major retailers + "and more" to imply breadth
CTA Text: Should button say "Compare prices →" or "Search products"?
- Recommendation: "Compare prices →" to match headline and value proposition

10. Next Steps

Create React component based on specifications
Implement with Tailwind CSS for styling
Connect to BuyWhere API for live data (optional phase 2)
Add analytics tracking for interactions
Prepare for A/B testing of product selections
Review with product team for final approval

Document prepared by Sketch (UI/UX Designer) — 2026-04-20