ADDED 3

assets/css/custom.css

@@ -0,0 +1,85 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap');
+
+:root {
+    --bs-primary-rgb: 127, 90, 240; /* #7F5AF0 */
+    --bs-secondary-rgb: 44, 182, 125; /* #2CB67D */
+    --primary: #7F5AF0;
+    --secondary: #2CB67D;
+    --text-color: #16161A;
+    --bg-light: #F9F9F9;
+    --surface: #FFFFFF;
+    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --bs-body-color: var(--text-color);
+    --bs-border-radius: 0.5rem;
+    --bs-border-radius-lg: 1rem;
+    --bs-border-radius-sm: 0.25rem;
+}
+
+body {
+    background-color: var(--bg-light);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+}
+
+.btn-primary {
+    --bs-btn-bg: var(--primary);
+    --bs-btn-border-color: var(--primary);
+    --bs-btn-hover-bg: #6a44d3;
+    --bs-btn-hover-border-color: #6a44d3;
+}
+
+.btn-secondary {
+    --bs-btn-bg: var(--secondary);
+    --bs-btn-border-color: var(--secondary);
+    --bs-btn-hover-bg: #249d6a;
+    --bs-btn-hover-border-color: #249d6a;
+}
+
+.navbar-sticky {
+    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+}
+
+.navbar-sticky.scrolled {
+    background-color: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.hero-section {
+    padding: 8rem 0;
+    background: linear-gradient(45deg, rgba(127, 90, 240, 0.1), rgba(44, 182, 125, 0.1));
+}
+
+.section-icon {
+    width: 64px;
+    height: 64px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(45deg, var(--primary), var(--secondary));
+    color: white;
+    border-radius: var(--bs-border-radius-lg);
+    margin-bottom: 1rem;
+}
+
+.testimonial-card {
+    background-color: var(--surface);
+    border: 0;
+}
+
+.faq-accordion .accordion-button:not(.collapsed) {
+    color: var(--text-color);
+    background-color: #fff;
+    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
+}
+
+.faq-accordion .accordion-button:focus {
+    box-shadow: 0 0 0 0.25rem rgba(127, 90, 240, 0.25);
+}
+
+.footer {
+    background-color: var(--surface);
+}

assets/js/main.js

@@ -0,0 +1,40 @@
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Navbar shrink on scroll
+    const navbar = document.querySelector('.navbar-sticky');
+    if (navbar) {
+        const handleScroll = () => {
+            if (window.scrollY > 50) {
+                navbar.classList.add('scrolled');
+            } else {
+                navbar.classList.remove('scrolled');
+            }
+        };
+        window.addEventListener('scroll', handleScroll);
+        handleScroll(); // Initial check
+    }
+
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href');
+            const targetElement = document.querySelector(targetId);
+            if(targetElement){
+                targetElement.scrollIntoView({ behavior: 'smooth' });
+            }
+        });
+    });
+
+    // Basic form validation feedback
+    const form = document.querySelector('.needs-validation');
+    if(form){
+        form.addEventListener('submit', function (event) {
+            if (!form.checkValidity()) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            form.classList.add('was-validated');
+        }, false);
+    }
+});

index.php

@@ -1,237 +1,303 @@
-<?php
-$message_sent = null;
-if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['contact_form'])) {
-    require_once __DIR__ . '/mail/MailService.php';
-    $name = filter_var($_POST['name'] ?? '', FILTER_SANITIZE_STRING);
-    $email = filter_var($_POST['email'] ?? '', FILTER_SANITIZE_EMAIL);
-    $message = filter_var($_POST['message'] ?? '', FILTER_SANITIZE_STRING);
 
-    if (!empty($name) && !empty($email) && !empty($message) && filter_var($email, FILTER_VALIDATE_EMAIL)) {
-        // The recipient is determined by MailService, using MAIL_TO from .env
-        $res = MailService::sendContactMessage($name, $email, $message, null, 'Contact Form Submission');
-        if (!empty($res['success'])) {
-            $message_sent = true;
-        } else {
-            $message_sent = false;
-        }
-    } else {
-        $message_sent = false;
-    }
-}
-?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ava Reed | Designer & Developer</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <title>EventFlow - Effortless Event Management</title>
+
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    
+    <!-- Bootstrap Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+
+    <!-- Custom CSS -->
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+
 </head>
 <body>
 
-    <!-- Navbar -->
-    <nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
-        <div class="container">
-            <a class="navbar-brand fw-bold" href="#">Ava Reed</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="#work">Work</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
-                </ul>
+    <!-- Header & Navbar -->
+    <header class="header">
+        <nav class="navbar navbar-expand-lg navbar-light navbar-sticky fixed-top">
+            <div class="container">
+                <a class="navbar-brand fw-bold fs-4" href="#">
+                    <i class="bi bi-calendar2-heart-fill text-primary"></i>
+                    EventFlow
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
+                        <li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
+                        <li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li>
+                        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
+                    </ul>
+                    <a href="#contact" class="btn btn-primary ms-lg-3">Get Started</a>
+                </div>
             </div>
-        </div>
-    </nav>
-
-    <!-- Hero Section -->
-    <header class="vh-100 d-flex align-items-center text-center text-white" style="background: url('https://picsum.photos/seed/ava-hero/1600/900') no-repeat center center; background-size: cover;">
-        <div class="container" style="background-color: rgba(0,0,0,0.5); padding: 2rem; border-radius: 1rem;">
-            <h1 class="display-4 fw-bold">Design & Development by Ava Reed.</h1>
-            <p class="lead my-4">Crafting elegant and effective digital solutions.</p>
-            <a href="#work" class="btn btn-primary btn-lg mx-2">View My Work</a>
-            <a href="#contact" class="btn btn-outline-light btn-lg mx-2">Contact Me</a>
-        </div>
+        </nav>
     </header>
 
-    <!-- Work Gallery -->
-    <section id="work" class="section">
-        <div class="container">
-            <h2 class="text-center mb-5">My Work</h2>
-            <div class="text-center mb-4">
-                <button type="button" class="btn btn-outline-primary active" data-filter="all">All</button>
-                <button type="button" class="btn btn-outline-primary" data-filter="web">Web Development</button>
-                <button type="button" class="btn btn-outline-primary" data-filter="uiux">UI/UX Design</button>
-                <button type="button" class="btn btn-outline-primary" data-filter="branding">Brand Identity</button>
+    <main>
+        <!-- Hero Section -->
+        <section class="hero-section text-center">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-lg-8">
+                        <h1 class="display-4 fw-bold mb-3">UPDATED</h1>
+                        <p>ADDED</p>
+                        <p>ADDED 2</p>
+                        <p>ADDED 3</p>
+                        <p class="lead text-muted mb-4">
+                            Your all-in-one solution for planning, managing, and executing flawless events. From small gatherings to large corporate affairs, we've got you covered.
+                        </p>
+                        <a href="#contact" class="btn btn-primary btn-lg px-4 me-sm-3">Get Started for Free</a>
+                        <a href="#features" class="btn btn-outline-secondary btn-lg px-4">See Features</a>
+                    </div>
+                </div>
+                <div class="row justify-content-center mt-5">
+                    <div class="col-lg-10">
+                         <img src="https://picsum.photos/seed/event-hero/1600/900" class="img-fluid rounded-3 shadow-lg" alt="A vibrant and modern illustration of people collaborating on an event plan.">
+                    </div>
+                </div>
             </div>
-            <div class="row g-4 portfolio-container">
-                <?php 
-                $projects = [
-                    ['category' => 'web', 'title' => 'Corporate Website Redesign'],
-                    ['category' => 'uiux', 'title' => 'Mobile App UI/UX'],
-                    ['category' => 'branding', 'title' => 'Startup Branding'],
-                    ['category' => 'uiux', 'title' => 'E-commerce Platform Design'],
-                    ['category' => 'web', 'title' => 'Portfolio Website'],
-                    ['category' => 'branding', 'title' => 'Logo & Identity Pack'],
-                ];
-                $i = 1;
-                foreach ($projects as $project): ?>
-                <div class="col-md-6 col-lg-4 portfolio-item" data-category="<?php echo $project['category']; ?>">
-                    <div class="card">
-                        <img src="https://picsum.photos/seed/ava-work-<?php echo $i; ?>/600/400" class="card-img-top" alt="A sample of Ava Reed's design and development work.">
-                        <div class="card-body">
-                            <h5 class="card-title"><?php echo $project['title']; ?></h5>
-                            <p class="card-text">A brief description of the project, its goals, and the technologies used.</p>
+        </section>
+
+        <!-- Features Section -->
+        <section id="features" class="py-5">
+            <div class="container text-center">
+                <h2 class="mb-5">Everything you need, all in one place</h2>
+                <div class="row g-4">
+                    <div class="col-md-4">
+                        <div class="section-icon"><i class="bi bi-building-gear fs-2"></i></div>
+                        <h3 class="fs-4">Venue Management</h3>
+                        <p class="text-muted">Keep an eye on all available event spaces, including their size, special features, and availability.</p>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="section-icon"><i class="bi bi-people-fill fs-2"></i></div>
+                        <h3 class="fs-4">Vendor Coordination</h3>
+                        <p class="text-muted">Organize your go-to caterers, decorators, and entertainers with all their contact info and ratings.</p>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="section-icon"><i class="bi bi-calendar-check fs-2"></i></div>
+                        <h3 class="fs-4">Guest & Schedule Tracking</h3>
+                        <p class="text-muted">Manage guest lists, RSVPs, and event timelines down to the minute, all in one unified dashboard.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Value Section 1 -->
+        <section class="py-5 bg-white">
+            <div class="container">
+                <div class="row align-items-center g-5">
+                    <div class="col-lg-6">
+                        <img src="https://picsum.photos/seed/event-dashboard/800/600" class="img-fluid rounded-3 shadow" alt="A clean and modern dashboard interface for event management.">
+                    </div>
+                    <div class="col-lg-6">
+                        <h2 class="mb-3">All Your Tools in One Dashboard</h2>
+                        <p class="text-muted">Stop juggling spreadsheets, emails, and calendars. EventFlow brings every aspect of your event into a single, easy-to-use dashboard. See the big picture and drill down into details with just a few clicks.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Value Section 2 -->
+        <section class="py-5">
+            <div class="container">
+                <div class="row align-items-center g-5 flex-lg-row-reverse">
+                    <div class="col-lg-6">
+                        <img src="https://picsum.photos/seed/event-budget/800/600" class="img-fluid rounded-3 shadow" alt="An illustration of financial charts and budget tracking for an event.">
+                    </div>
+                    <div class="col-lg-6">
+                        <h2 class="mb-3">Stay on Budget, Stress-Free</h2>
+                        <p class="text-muted">Our dedicated finance tools help you manage everything from initial deposits to final payments. Track expenses, monitor your budget in real-time, and make informed financial decisions without the headache.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Testimonials Section -->
+        <section id="testimonials" class="py-5 bg-white">
+            <div class="container text-center">
+                <h2 class="mb-5">Loved by planners everywhere</h2>
+                <div class="row g-4">
+                    <div class="col-md-4">
+                        <div class="card testimonial-card h-100 p-4">
+                            <img src="https://picsum.photos/seed/avatar1/96/96" class="rounded-circle mx-auto mb-3" alt="Avatar of a satisfied customer.">
+                            <p class="text-muted">"EventFlow transformed how we manage corporate events. What used to take weeks now takes days. A total game-changer."</p>
+                            <h5 class="mb-0 mt-auto pt-3">Sarah K.</h5>
+                            <small class="text-muted">Corporate Event Planner</small>
                         </div>
                     </div>
-                </div>
-                <?php $i++; endforeach; ?>
-            </div>
-        </div>
-    </section>
-
-    <!-- Services -->
-    <section id="services" class="section bg-light">
-        <div class="container">
-            <h2 class="text-center mb-5">Services</h2>
-            <div class="row text-center">
-                <div class="col-md-4">
-                    <div class="card p-4 mb-4">
-                        <i class="bi bi-palette-fill fs-1 text-primary mb-3"></i>
-                        <h4>UI/UX Design</h4>
-                        <p>Creating intuitive and beautiful user interfaces that provide a seamless user experience.</p>
-                    </div>
-                </div>
-                <div class="col-md-4">
-                    <div class="card p-4 mb-4">
-                        <i class="bi bi-code-slash fs-1 text-primary mb-3"></i>
-                        <h4>Web Development</h4>
-                        <p>Building responsive, high-performance websites from the ground up.</p>
-                    </div>
-                </div>
-                <div class="col-md-4">
-                    <div class="card p-4 mb-4">
-                        <i class="bi bi-vector-pen fs-1 text-primary mb-3"></i>
-                        <h4>Brand Identity</h4>
-                        <p>Developing strong and memorable brand identities that tell a story.</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- About -->
-    <section id="about" class="section">
-        <div class="container">
-            <div class="row align-items-center">
-                <div class="col-md-4 text-center">
-                    <img src="https://picsum.photos/seed/ava-avatar/256/256" class="img-fluid rounded-circle mb-4" alt="A portrait of Ava Reed.">
-                </div>
-                <div class="col-md-8">
-                    <h2 class="mb-4">About Me</h2>
-                    <p class="lead">I'm Ava Reed, a passionate and creative designer and developer with a knack for building things that are both beautiful and functional. With over 5 years of experience, I help clients bring their ideas to life.</p>
-                    <p>My approach is collaborative and user-centric, focusing on creating digital experiences that not only look good but also solve real-world problems and are a joy to use.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Testimonials -->
-    <section id="testimonials" class="section bg-light">
-        <div class="container">
-            <h2 class="text-center mb-5">What My Clients Say</h2>
-            <div class="row g-4">
-                <div class="col-lg-4">
-                    <div class="card h-100">
-                        <div class="card-body text-center">
-                            <img src="https://picsum.photos/seed/client-1/100/100" class="rounded-circle mb-3" alt="Client 1">
-                            <p class="card-text fst-italic">"Ava is a true professional. The final product exceeded all our expectations. Her attention to detail is second to none."</p>
-                            <footer class="blockquote-footer mt-3">John Doe, CEO of ExampleCorp</footer>
+                    <div class="col-md-4">
+                        <div class="card testimonial-card h-100 p-4">
+                            <img src="https://picsum.photos/seed/avatar2/96/96" class="rounded-circle mx-auto mb-3" alt="Avatar of a happy event planner.">
+                            <p class="text-muted">"As a wedding planner, this tool is indispensable. The vendor and guest management features saved me countless hours."</p>
+                            <h5 class="mb-0 mt-auto pt-3">Michael B.</h5>
+                            <small class="text-muted">Wedding Coordinator</small>
                         </div>
                     </div>
-                </div>
-                <div class="col-lg-4">
-                    <div class="card h-100">
-                        <div class="card-body text-center">
-                            <img src="https://picsum.photos/seed/client-2/100/100" class="rounded-circle mb-3" alt="Client 2">
-                            <p class="card-text fst-italic">"Working with Ava was a fantastic experience. She is not only a talented developer but also a great communicator."</p>
-                            <footer class="blockquote-footer mt-3">Jane Smith, Marketing Director at Creative Inc.</footer>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4">
-                    <div class="card h-100">
-                        <div class="card-body text-center">
-                            <img src="https://picsum.photos/seed/client-3/100/100" class="rounded-circle mb-3" alt="Client 3">
-                            <p class="card-text fst-italic">"The website Ava built for us is both beautiful and highly functional. We've seen a significant increase in user engagement."</p>
-                            <footer class="blockquote-footer mt-3">Sam Wilson, Founder of TechStart</footer>
+                    <div class="col-md-4">
+                        <div class="card testimonial-card h-100 p-4">
+                            <img src="https://picsum.photos/seed/avatar3/96/96" class="rounded-circle mx-auto mb-3" alt="Avatar of a smiling user.">
+                            <p class="text-muted">"Finally, a beautiful and intuitive app that handles all the complexities of event planning. I can't imagine working without it."</p>
+                            <h5 class="mb-0 mt-auto pt-3">Jessica L.</h5>
+                            <small class="text-muted">Freelance Organizer</small>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
+        </section>
 
-    <!-- Contact Form -->
-    <section id="contact" class="section bg-light">
-        <div class="container">
-            <h2 class="text-center mb-5">Get In Touch</h2>
-            <div class="row justify-content-center">
-                <div class="col-lg-8">
-                    <form action="index.php#contact" method="POST" class="needs-validation" novalidate>
-                        <input type="hidden" name="contact_form" value="1">
-
-                        <?php if ($message_sent === true): ?>
-                            <div class="alert alert-success" role="alert">
-                                Thank you! Your message has been sent successfully.
+        <!-- FAQ Section -->
+        <section id="faq" class="py-5">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-lg-8 text-center">
+                        <h2 class="mb-5">Frequently Asked Questions</h2>
+                        <div class="accordion faq-accordion" id="faqAccordion">
+                            <div class="accordion-item">
+                                <h2 class="accordion-header" id="headingOne">
+                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                        What kind of events can I manage?
+                                    </button>
+                                </h2>
+                                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
+                                    <div class="accordion-body text-start">
+                                        EventFlow is designed for a wide range of events, from small private gatherings and weddings to large corporate conferences, trade shows, and festivals. Its flexible features can adapt to your specific needs.
+                                    </div>
+                                </div>
                             </div>
-                        <?php elseif ($message_sent === false): ?>
-                            <div class="alert alert-danger" role="alert">
-                                Sorry, there was an error sending your message. Please try again later.
+                            <div class="accordion-item">
+                                <h2 class="accordion-header" id="headingTwo">
+                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                                        Is there a free trial available?
+                                    </button>
+                                </h2>
+                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
+                                    <div class="accordion-body text-start">
+                                        Yes! You can get started with a 14-day free trial on all our plans to explore the full range of features. No credit card is required to sign up.
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="accordion-item">
+                                <h2 class="accordion-header" id="headingThree">
+                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                                        Can I collaborate with my team?
+                                    </button>
+                                </h2>
+                                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
+                                    <div class="accordion-body text-start">
+                                        Absolutely. Our team plans allow you to invite colleagues, clients, and vendors to collaborate in real-time. You can assign roles and control permissions to ensure everyone has access to the right information.
+                                    </div>
+                                </div>
+                            </div>
+                             <div class="accordion-item">
+                                <h2 class="accordion-header" id="headingFour">
+                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+                                        How secure is my data?
+                                    </button>
+                                </h2>
+                                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
+                                    <div class="accordion-body text-start">
+                                        We take data security very seriously. All your data is encrypted in transit and at rest. We use industry-standard security protocols to ensure your information is always safe and private.
+                                    </div>
+                                </div>
                             </div>
-                        <?php endif; ?>
-
-                        <div class="mb-3">
-                            <label for="name" class="form-label">Name</label>
-                            <input type="text" class="form-control" id="name" name="name" required>
-                            <div class="invalid-feedback">Please enter your name.</div>
                         </div>
-                        <div class="mb-3">
-                            <label for="email" class="form-label">Email</label>
-                            <input type="email" class="form-control" id="email" name="email" required>
-                            <div class="invalid-feedback">Please enter a valid email address.</div>
-                        </div>
-                        <div class="mb-3">
-                            <label for="message" class="form-label">Message</label>
-                            <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
-                            <div class="invalid-feedback">Please enter your message.</div>
-                        </div>
-                        <button type="submit" class="btn btn-primary btn-lg">Send Message</button>
-                    </form>
+                    </div>
                 </div>
             </div>
-        </div>
-    </section>
+        </section>
+
+        <!-- Contact/Lead Capture Section -->
+        <section id="contact" class="py-5 bg-white">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-lg-7 text-center">
+                        <h2 class="mb-3">Ready to streamline your events?</h2>
+                        <p class="text-muted mb-5">Drop us a message to get started or request a demo. We'd love to hear from you.</p>
+                        <form class="needs-validation" novalidate>
+                            <div class="form-floating mb-3">
+                                <input type="text" class="form-control" id="name" placeholder="Your Name" required>
+                                <label for="name">Your Name</label>
+                                <div class="invalid-feedback">Please enter your name.</div>
+                            </div>
+                            <div class="form-floating mb-3">
+                                <input type="email" class="form-control" id="email" placeholder="name@example.com" required>
+                                <label for="email">Email address</label>
+                                <div class="invalid-feedback">Please enter a valid email address.</div>
+                            </div>
+                            <div class="form-floating mb-3">
+                                <textarea class="form-control" placeholder="Leave a message here" id="message" style="height: 120px" required></textarea>
+                                <label for="message">Message</label>
+                                <div class="invalid-feedback">Please enter your message.</div>
+                            </div>
+                            <button type="submit" class="btn btn-primary btn-lg w-100">Send Message</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
 
     <!-- Footer -->
-    <footer class="py-5 bg-dark text-white text-center">
+    <footer class="footer py-5">
         <div class="container">
-            <div class="mb-3">
-                <a href="#" class="text-white mx-2"><i class="bi bi-linkedin fs-4"></i></a>
-                <a href="#" class="text-white mx-2"><i class="bi bi-github fs-4"></i></a>
-                <a href="#" class="text-white mx-2"><i class="bi bi-dribbble fs-4"></i></a>
+            <div class="row">
+                <div class="col-lg-4 mb-4 mb-lg-0">
+                    <a class="navbar-brand fw-bold fs-4 d-block mb-2" href="#">
+                        <i class="bi bi-calendar2-heart-fill text-primary"></i>
+                        EventFlow
+                    </a>
+                    <p class="text-muted">The future of event management.</p>
+                    <div>
+                        <a href="#" class="text-muted me-3"><i class="bi bi-twitter-x"></i></a>
+                        <a href="#" class="text-muted me-3"><i class="bi bi-facebook"></i></a>
+                        <a href="#" class="text-muted me-3"><i class="bi bi-instagram"></i></a>
+                        <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
+                    </div>
+                </div>
+                <div class="col-6 col-lg-2 offset-lg-1">
+                    <h5 class="mb-3">Product</h5>
+                    <ul class="list-unstyled">
+                        <li class="mb-2"><a href="#features" class="text-muted text-decoration-none">Features</a></li>
+                        <li class="mb-2"><a href="#" class="text-muted text-decoration-none">Pricing</a></li>
+                        <li class="mb-2"><a href="#testimonials" class="text-muted text-decoration-none">Testimonials</a></li>
+                    </ul>
+                </div>
+                <div class="col-6 col-lg-2">
+                    <h5 class="mb-3">Company</h5>
+                    <ul class="list-unstyled">
+                        <li class="mb-2"><a href="#" class="text-muted text-decoration-none">About Us</a></li>
+                        <li class="mb-2"><a href="#" class="text-muted text-decoration-none">Careers</a></li>
+                        <li class="mb-2"><a href="#contact" class="text-muted text-decoration-none">Contact</a></li>
+                    </ul>
+                </div>
+                <div class="col-6 col-lg-2">
+                    <h5 class="mb-3">Legal</h5>
+                    <ul class="list-unstyled">
+                        <li class="mb-2"><a href="#" class="text-muted text-decoration-none">Privacy Policy</a></li>
+                        <li class="mb-2"><a href="#" class="text-muted text-decoration-none">Terms of Service</a></li>
+                    </ul>
+                </div>
+            </div>
+            <hr class="my-4">
+            <div class="text-center text-muted">
+                &copy; <?php echo date("Y"); ?> EventFlow. All Rights Reserved.
             </div>
-            <p class="mb-0">&copy; <?php echo date("Y"); ?> Ava Reed. All Rights Reserved.</p>
         </div>
     </footer>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Bootstrap 5 JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    
+    <!-- Custom JS -->
     <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
-</html>
+</html>