Response Details (ID: 369 - UIGEN-X-32B-0727)

Text Before HTML:

We are creating a landing page for a Charity Run Event. We'll use the provided template as inspiration but adapt it for a charity run.
 The design should be vibrant and energetic, with a focus on encouraging registrations.

 Key changes:
 1. Change the color scheme to something more suitable for a charity/run event (e.g., greens, blues, or oranges for energy).
 2. Update the content to reflect a charity run: event details, registration, sponsors, etc.
 3. Adjust the sections to include:
    - Hero section with event name, date, and call to action for registration.
    - About the event: what it's for, the charity, etc.
    - Schedule or event details.
    - Registration form or button.
    - Sponsors section.
    - Contact information.

 We'll keep the overall structure and animations but repurpose the content.

 Let's choose a color scheme:
   Primary: A vibrant color for energy (e.g., #FF6B35 - orange) and a complementary color (e.g., #4A7C59 - green for charity).
   Background: Light and clean (white or light gray) to keep the focus on the content.

 We'll define:
   --color-primary: #FF6B35;
   --color-secondary: #4A7C59;
   --color-accent: #1A535C; (a deep teal for contrast)
   --color-text: #333333;
   --color-text-light: #666666;
   --color-background: #FFFFFF;
   --color-background-alt: #F8F9FA;

 We'll update the fonts to something modern and clean. We can use:
   --font-heading: 'Montserrat', sans-serif;
   --font-body: 'Open Sans', sans-serif;

 We'll change the logo and navigation links accordingly.

 Steps:
 1. Replace the template's content with charity run content.
 2. Adjust the hero section to have a dynamic background and a call to action for registration.
 3. Update the "About Us" section to be "About the Event".
 4. The "Services" section can become "Event Details" or "Schedule".
 5. The "Testimonials" section can be kept or repurposed for "Why Participate?" or "Impact".
 6. The "Projects" section can be "Sponsors" or "Past Events".
 7. The "Team" section can be "Our Organizers" or "Volunteers".
 8. The "Contact" section remains but with charity-specific info.

 We'll also update the footer.

 Note: We are using Tailwind via CDN and custom CSS. We'll keep the same animation and interaction scripts.

 Let's start by setting up the HTML structure with the new content and color scheme.


# Charity Run Event Landing Page

I'll create a vibrant, energetic landing page for a charity run event with Tailwind CSS. The design will focus on encouraging registrations while maintaining a clean, professional look.

Generated HTML Page:

Text After HTML:

This landing page for a charity run event includes:

1. **Modern Design** - Clean layout with vibrant colors (orange, teal, and green) that evoke energy and charity
2. **Responsive Layout** - Fully responsive design that works on all device sizes
3. **Key Sections**:
   - Hero section with event details and call-to-action
   - About the event with mission and details
   - Route map and details
   - Impact statistics showing how donations help
   - Registration form with early bird discount
   - Sponsors showcase
   - Contact information

4. **Interactive Elements**:
   - Animated scroll effects
   - Countdown timer to event date
   - Hover effects on buttons and sponsor logos
   - Form validation

5. **Professional Typography** - Using Montserrat for headings and Open Sans for body text

The design is optimized for conversions with clear calls-to-action throughout the page to encourage event registrations.