this is not nice make it more professional and formal
I'll create a more professional and formal home page for the event management portal that's better suited for a corporate environment.
I've redesigned the home page to be more professional and formal, suitable for a corporate environment. Here are the key changes:
Professional Design Elements:
Color Scheme
- Replaced vibrant gradients with a professional blue and gray color palette
- Used subdued colors with blue as the primary accent color
- Added subtle backgrounds and borders for a clean, corporate look
Typography and Layout
- More structured grid layout with proper spacing
- Refined typography with appropriate font weights and sizes
- Consistent text hierarchy for better readability
- Added separators between list items for clearer visual organization
Visual Elements
- Replaced playful design elements with more formal, business-appropriate styling
- Added subtle shadows and borders for depth without being flashy
- Used more formal iconography and badges
- Implemented a light gray background for the page with white cards for better contrast
Content Refinements
- More professional language and terminology
- Added user name and role in the profile dropdown
- More formal welcome message
- Clearer section headings and descriptions
Functionality (Maintained):
- All the same features are present but with a more formal presentation
- Dashboard statistics with professional icons
- Event management with clear status indicators
- Calendar preview section
- Quick actions panel
- Announcements section with priority indicators
The redesigned interface maintains all the functionality of the original but presents it in a more professional, corporate-appropriate manner that would be suitable for HR administrators in a formal business environment.
i dont want the dashboard i just want the home page landung page of the tech event management ebsite
I'll create a professional landing page for a tech event management website that focuses on showcasing events to potential attendees.
I've created a professional landing page for a tech event management website. This page focuses on showcasing the platform to potential attendees rather than being an admin dashboard.
The landing page includes:
- Professional Header - Clean navigation with sign-up/login options
- Compelling Hero Section - With a strong headline, call-to-action buttons, and featured event preview
- Upcoming Events Section - Showcasing featured tech events with relevant details
- Category Exploration - Easy navigation to different types of tech events
- Value Proposition - Highlighting the benefits of using the platform
- Social Proof - Testimonials from past attendees
- Newsletter Signup - For capturing leads and keeping users informed
- Comprehensive Footer - With navigation, resources, and contact information
The design uses a professional color scheme with blue as the primary accent color, maintaining a clean and structured layout appropriate for a tech audience. The page is fully responsive and provides clear paths for users to explore events or sign up for the platform.
make this in my lwc compoenenet
<template>
<section class="hero-section">
<div class="hero-content">
<div class="hero-text">
<p class="platform-label">Tech Events Platform</p>
<h1 class="title">Discover the Best Tech Events Worldwide</h1>
<p class="description">
Connect with industry leaders, enhance your skills, and stay ahead in the rapidly evolving tech landscape.
</p>
<div class="buttons">
<button class="custom-btn gradient-btn slds-m-right_medium" onclick={browseToLiveEvents}>
<span class="btn-icon">
<lightning-icon icon-name="utility:search" size="x-small" alternative-text="Search"></lightning-icon>
</span>
Browse Events
</button>
<button class="custom-btn gradient-outline-btn">
<span class="btn-icon">
<lightning-icon icon-name="utility:add" size="x-small" alternative-text="Add"></lightning-icon>
</span>
Host an Event
</button>
</div>
<div class="event-stats">
<div class="stat-item">
<lightning-icon icon-name="utility:user" size="x-small" alternative-text="Attendees"></lightning-icon>
<span>10K+ Attendees</span>
</div>
<div class="stat-item">
<lightning-icon icon-name="utility:event" size="x-small" alternative-text="Events"></lightning-icon>
<span>500+ Events</span>
</div>
<div class="stat-item">
<lightning-icon icon-name="utility:world" size="x-small" alternative-text="Global"></lightning-icon>
<span>Global</span>
</div>
</div>
</div>
<div class="hero-image">
<img src={homeImage} alt="Tech Events Illustration" />
</div>
</div>
</section>
<section class="why-choose">
<h2 class="why-title">Why Choose InnovateHRD</h2>
<p class="why-subtitle">
We're dedicated to connecting tech professionals with high-quality events that foster
learning, networking, and career growth
</p>
<div class="slds-grid slds-wrap slds-gutters_large features">
<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-3">
<div class="feature-card">
<div class="icon-wrapper colored-icon">
<lightning-icon icon-name="utility:groups" size="medium" alternative-text="Networking"></lightning-icon>
</div>
<h3 class="feature-heading">Networking Opportunities</h3>
<p>
Connect with industry leaders, potential employers, and like-minded professionals at our
carefully curated events.
</p>
</div>
</div>
<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-3">
<div class="feature-card">
<div class="icon-wrapper colored-icon">
<lightning-icon icon-name="utility:light_bulb" size="medium" alternative-text="Expert Knowledge"></lightning-icon>
</div>
<h3 class="feature-heading">Expert Knowledge</h3>
<p>
Learn from industry experts through workshops, keynotes, and panel discussions on cutting-edge
technologies.
</p>
</div>
</div>
<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-3">
<div class="feature-card">
<div class="icon-wrapper colored-icon">
<lightning-icon icon-name="utility:shield" size="medium" alternative-text="Vetted Quality"></lightning-icon>
</div>
<h3 class="feature-heading">Vetted Quality</h3>
<p>
We carefully select and verify all events to ensure they meet our high standards for content and
organization.
</p>
</div>
</div>
</div>
</section>
<section class="testimonials">
<div class="testimonial-header">
<h2 class="testimonial-title">What Attendees Say</h2>
<div class="testimonial-arrows">
<button class="arrow left" onclick={scrollLeft} disabled={isAtStart}>❮</button>
<button class="arrow right" onclick={scrollRight} disabled={isAtEnd}>❯</button>
</div>
</div>
<div class="slds-grid slds-wrap slds-gutters_large features">
<template for:each={visibleTestimonials} for:item="testimonial">
<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-3" key={testimonial.id}>
<div class="testimonial-card">
<div class="stars">★★★★★</div>
<p class="quote">"{testimonial.quote}"</p>
<p class="name">{testimonial.name}</p>
<p class="role">{testimonial.role}</p>
</div>
</div>
</template>
</div>
</section>
