Skip to content

Conversation

Copy link

Copilot AI commented May 7, 2025

Thanks for assigning this issue to me. I'm starting to work on it and will keep this PR's description up to date as I form a plan and make progress.

Original issue description:

Description
Add an informative section below the hero in home.tsx that explains how Build Events works to help users understand the platform’s core features and benefits.

Implementation Details
Section Structure
Add a new section below the hero with:

Section heading: "How Build Events Works"

Three feature cards in a responsive grid:

Voice-Guided Planning
Smart Recommendations
End-to-End Support
Content
Voice-Guided Planning

Heading: Voice-Guided Planning
Description: Simply speak your event details and let our AI guide you through the planning process.
Smart Recommendations

Heading: Smart Recommendations
Description: Get personalized suggestions for venues, vendors, and more based on your preferences.
End-to-End Support

Heading: End-to-End Support
Description: From initial concept to final execution, we’re here to ensure your event’s success.
Color Palette & Styling
Use the color palette sampled from the Build Events hero background image:

Primary Colors:

Deep Purple: #5A3FBB
Soft Lavender: #A685E2
Warm Peach: #E8A47F
White: #FFFFFF
Background & Effects:

Background Gradient:

Start: #5A3FBB (deep purple)
End: #E8A47F (warm peach)
Card Background: rgba(255, 255, 255, 0.9)

Shadow Color: rgba(0, 0, 0, 0.08)

Typography:

Heading and text colors:

Primary text: #FFFFFF on dark backgrounds
Secondary text: #E8A47F for accents
Styling Requirements
Top section should remain full page height with this new section always appearing below the fold on all screen sizes

Full-width section with max-width container (1200px)

Responsive grid layout for cards

Hover transform and subtle shadow effects on cards

Grid gap: 2rem

Card padding: 2.5rem (or 1.5rem on mobile)

Font sizes:

Section heading: 3rem (2.5rem on mobile)
Card headings: 1.5rem
Card text: 1.1rem
Line height: 1.6 for card text

Border radius: 1rem for cards

Smooth transitions for hover interactions

Technical Notes
Implement using CSS Modules
Use semantic HTML structure
Ensure fully responsive layout and mobile optimization
Maintain accessibility and text contrast standards (WCAG AA+)
Add smooth transitions/animations for interactive elements
Acceptance Criteria

Existing top section still occupies entire "above the fold" space

Add section with heading and feature grid

Implement all three feature cards with content

Apply the Build Events color palette and gradients

Implement responsive layout with no horizontal scroll

Add hover animations on feature cards

Verify text contrast meets accessibility standards

Test across modern mobile and desktop devices
Additional Context
This section should clearly communicate Build Events' core features while preserving the elegant, premium event-planning aesthetic reflected in the existing hero section. The purple-lavender-peach gradient creates a modern, inviting, and polished atmosphere suitable for a professional event services brand.

Fixes #19


💜 Share your feedback and help improve Copilot

  • Complete our 1 minute survey for the chance to win $200 in GitHub Shop credit
  • Leave quick feedback on Copilot's PRs and comments using the 👍 or 👎 buttons
  • Join the conversation in #padawan-dogfood in Slack or the Teams channel

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.

Content update - add Informative section

2 participants