Optimize homepage layout and implement teal brand color scheme#17
Merged
Optimize homepage layout and implement teal brand color scheme#17
Conversation
Replace blue/purple color palette with teal/cyan theme extracted from the DevFest header image to create unified brand identity. Color Palette: - Primary Teal: #14B8A6 → #0D9488 (main actions) - Cyan Accent: #06B6D4 → #0891B2 (secondary actions) - Dark Teal: #115E59 (hover states) - Light Teal: #F0FDFA → #E0F7F4 (backgrounds) Updated Components: - Hero title gradient text - Date text and subheadings - Primary CTA buttons (Get Tickets) - Secondary sponsor buttons (Become a Sponsor) - Navigation bar hover states and active indicators - Sidebar event info card background - Sponsorship card borders and checkmarks - Newsletter section background - Photo gallery accent text - Speaker social media links - Mobile sticky bottom bar Button Updates: - Logo sponsorship CTA updated to $500 (from $100) All color transitions maintain proper contrast ratios and accessibility standards while creating visual cohesion with header branding. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…s anchor The homepage no longer has a #sponsors section since sponsor info moved to the sidebar. Update both hero and mobile sticky sponsor buttons to link directly to /prospectus page. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1kevgriff
force-pushed
the
feature/page-reorganization-teal-theme
branch
from
38d07aa to
6c0b9ea
Compare
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://orange-water-00a09360f-17.eastus2.4.azurestaticapps.net |
Remove max-height and overflow-y from sticky sidebar to eliminate unnecessary scrollbars. The sidebar content naturally fits within viewport without needing scroll. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://orange-water-00a09360f-17.eastus2.4.azurestaticapps.net |
- Remove 'Stay Updated' newsletter signup from sidebar - Increase sponsor logo sizes: * Platinum: 64px → 80px height * Gold: 56px → 72px height * Silver: 48px → 64px height * Logo: 40px → 56px height - Reorder sidebar to show sponsors immediately after Event Info - Increase heading size and spacing for sponsor section - Move sponsors above sponsorship CTA for maximum visibility These changes prioritize sponsor recognition by making logos more prominent and positioning them higher in the visual hierarchy. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://orange-water-00a09360f-17.eastus2.4.azurestaticapps.net |
- Remove sponsor logos from sidebar - Add dedicated full-width sponsors section after 2024 photos - Increase logo sizes for better visibility in main content: * Platinum: 112px height (max-h-28) * Gold: 96px height (max-h-24) * Silver: 80px height (max-h-20) * Logo: 64px height (max-h-16) - Add thank you message above sponsor logos - Include prominent sponsorship CTA below logos with dual buttons - Larger gap between logos (gap-12) for better spacing Sponsors now have maximum visibility in the main content area with significantly larger logos and more prominent placement. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://orange-water-00a09360f-17.eastus2.4.azurestaticapps.net |
Reposition full-width sponsors section to appear as the second section in main content (after About, before Venue). This gives sponsors maximum early visibility while maintaining logical content flow. Section order is now: 1. Tickets 2. About 3. Sponsors (moved here) 4. Venue 5. Speakers 6. Scholarship 7. 2024 Photos 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://orange-water-00a09360f-17.eastus2.4.azurestaticapps.net |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR significantly restructures the homepage to optimize for two primary conversion goals:
Additionally implements a cohesive teal/cyan color scheme extracted from the header image to strengthen brand identity.
Layout Reorganization
Two-Column Desktop Layout
Hero Section Improvements
Mobile Optimizations
Conversion Optimizations
Color Scheme Update
New Teal/Cyan Palette (from header image)
#14B8A6→#0D9488#06B6D4→#0891B2#115E59(hover states)#F0FDFA(backgrounds)Updated Components
Test Plan
Desktop (1920x1080)
Tablet (768px - 1023px)
Mobile (375px - 767px)
Conversion Flow Testing
Cross-Browser Testing
Accessibility
Performance
Screenshots
Before reviewing, please test at:
🤖 Generated with Claude Code