Enhance Sponsor Display Strategy Across Site

[tyaga001]

Overview

We need a comprehensive approach to showcase our sponsors across the site. Currently, we have basic sponsor displays on the landing page and a dedicated sponsor page, but we need a consistent strategy that maximizes sponsor visibility while maintaining a clean design.

Recommended Implementation

1. Footer Enhancement (Priority)

Add a dedicated sponsors section to the footer that appears on every page:

• Layout: Horizontal row of sponsor logos in the footer, above copyright
• Design: Clean, minimal logo cards with hover effects
• CTA: "Become a Sponsor" card at the end of the row
• Responsive: Wrap to multiple rows on smaller screens

2. Homepage Current Sponsors Section (Maintain & Enhance)

Keep the current sponsors section on the homepage but enhance it:

• Placement: Keep below the fold as currently positioned
• Design: Keep current simple design
• Labels: Add "Gold Sponsors" label to indicate tier
• Visibility: Ensure proper spacing and contrast for better visibility

3. Sponsors Page Improvements

Update the existing sponsors page with:

• Tier Visualization: Visual distinction between VIP ($2000) and Hero ($1000) sponsors
• Testimonials: Add option for sponsor testimonials
• Benefits: Clearer visual hierarchy of sponsorship benefits
• FAQ: Add sponsorship FAQ section

Technical Implementation

1. Centralized Sponsors Data

Create a centralized data store for sponsors:

// data/sponsors.ts
export interface Sponsor {
  id: string;
  name: string;
  tier: 'vip' | 'hero';
  logo: string;
  url: string;
  description?: string;
  testimonial?: {
    quote: string;
    author: string;
    title: string;
  };
}

export const sponsors: Sponsor[] = [
  {
    id: 'coderabbit',
    name: 'CodeRabbit',
    tier: 'vip',
    logo: '/sponsors/coderabbit.svg',
    url: 'https://coderabbit.ai',
    description: 'AI-powered code review assistant'
  },
  {
    id: 'stream',
    name: 'Stream',
    tier: 'hero',
    logo: '/sponsors/stream.svg',
    url: 'https://getstream.io',
    description: 'Chat & Activity Feed APIs'
  }
];

2. Footer Component

Create a new footer component that includes the sponsors section:

• Responsive grid layout
• Logo cards with hover states
• "Become a Sponsor" CTA
• Copyright and existing elements maintained

3. Responsive Considerations

• Desktop: Display 4-5 sponsors per row
• Tablet: Display 2-3 sponsors per row
• Mobile: Display 2 sponsors per row or stack vertically

Design Specifications

Footer Sponsors Section

• Background: Slightly darker than main footer (bg-gray-900)
• Sponsor Card:
  • Size: 180px × 100px
  • Padding: 16px
  • Background: Subtle elevation (bg-gray-800)
  • Border radius: 8px
  • Hover: Scale effect (transform: scale(1.05))
• "Become a Sponsor" Card:
  • Same dimensions but with dashed border
  • Text: Purple highlight

Visual Example

[FOOTER]
+----------------------------------------+
| [Logo 1] [Logo 2] [Logo 3] [Become a] |
|                                Sponsor |
+----------------------------------------+
|            Copyright text              |
+----------------------------------------+

Success Criteria

• Sponsors visible in footer across all pages
• Responsive design works on all screen sizes
• Consistent branding and styling
• Clear "Become a Sponsor" CTA
• Home page sponsors section maintained
• Sponsors page enhanced
• All sponsor links tracked with analytics

Implementation Plan

1. Create centralized sponsors data store
2. Implement footer sponsors section
3. Enhance homepage sponsors display
4. Update sponsors page design
5. Add analytics tracking
6. Test across devices and browsers

Design Assets Needed

• Sponsor logo placeholders (180px × 100px)
• Hover/active states for sponsor cards
• "Become a Sponsor" CTA design

Additional Notes

• Consider adding a small description tooltip on logo hover
• Investigate lazy loading for sponsor logos
• Consider adding a small "Sponsored by" label above certain content areas