173 lines
8.5 KiB
PHP
173 lines
8.5 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>EventFlow - Effortless Event Management</title>
|
|
|
|
<!-- Bootstrap 5 CDN -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">EventFlow</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<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="#faq">FAQ</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<header class="hero text-center">
|
|
<div class="container">
|
|
<h1 class="display-4">Effortless Events, Unforgettable Moments.</h1>
|
|
<p class="lead col-lg-8 mx-auto">Your all-in-one platform to manage venues, vendors, guests, and budgets without the chaos.</p>
|
|
<a href="#contact" class="btn btn-primary btn-lg mt-3">Get Started Free</a>
|
|
<a href="#" class="btn btn-secondary btn-lg mt-3">Watch Demo</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="section">
|
|
<div class="container text-center">
|
|
<h2 class="mb-5">Just TITLE</h2>
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<div class="card p-4 h-100">
|
|
<h5>Venue Management</h5>
|
|
<p>Keep an eye on all available event spaces, including their size, special features, and availability.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card p-4 h-100">
|
|
<h5>Vendor Coordination</h5>
|
|
<p>Organize your go-to caterers, decorators, and entertainers with all their contact info and ratings in one place.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card p-4 h-100">
|
|
<h5>Guest Logistics</h5>
|
|
<p>Track who's coming, who's not, and who needs the vegetarian option at dinner, effortlessly.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Value Prop 1 -->
|
|
<section class="section bg-light">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6">
|
|
<h2>Visualize Your Venue</h2>
|
|
<p>From grand ballrooms to intimate garden settings, manage all your spaces with our intuitive digital layout tools. See availability at a glance, book with a click, and ensure your chosen venue perfectly matches your event's vision.</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<img src="https://picsum.photos/600/400" class="img-fluid rounded" alt="A digital layout of an event venue on a tablet.">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Value Prop 2 -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6 order-md-2">
|
|
<h2>Streamline Your Schedule</h2>
|
|
<p>Plan every minute of your event, from the first vendor arrival to the last dance. Our dynamic scheduling tool helps you avoid conflicts, coordinate with your team, and share timelines with stakeholders instantly.</p>
|
|
</div>
|
|
<div class="col-md-6 order-md-1">
|
|
<img src="https://picsum.photos/600/400?grayscale" class="img-fluid rounded" alt="A close-up of a detailed event schedule.">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ Section -->
|
|
<section id="faq" class="section bg-light">
|
|
<div class="container col-lg-8">
|
|
<h2 class="text-center mb-5">Frequently Asked Questions</h2>
|
|
<div class="accordion" id="faqAccordion">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">Is this platform suitable for small, private events?</button>
|
|
</h2>
|
|
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">Absolutely! Our platform is designed to scale, making it just as effective for a small birthday party as it is for a large corporate conference.</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">Can I integrate my own list of vendors?</button>
|
|
</h2>
|
|
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">Yes, you can easily import your existing vendor lists and manage them all from one central dashboard.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Form -->
|
|
<section id="contact" class="section">
|
|
<div class="container col-lg-6">
|
|
<h2 class="text-center mb-4">Get in Touch</h2>
|
|
<form class="row g-3 needs-validation" novalidate>
|
|
<div class="col-md-6">
|
|
<label for="name" class="form-label">Name</label>
|
|
<input type="text" class="form-control" id="name" required>
|
|
<div class="invalid-feedback">Please enter your name.</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="email" class="form-label">Email</label>
|
|
<input type="email" class="form-control" id="email" required>
|
|
<div class="invalid-feedback">Please enter a valid email.</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label for="message" class="form-label">Message</label>
|
|
<textarea class="form-control" id="message" rows="5" required></textarea>
|
|
<div class="invalid-feedback">Please leave us a message.</div>
|
|
</div>
|
|
<div class="col-12 text-center">
|
|
<button type="submit" class="btn btn-primary">Send Message</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="py-5 mt-5 border-top">
|
|
<div class="container text-center">
|
|
<p class="text-muted">© 2025 EventFlow. All Rights Reserved.</p>
|
|
<ul class="nav justify-content-center">
|
|
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Privacy</a></li>
|
|
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Terms</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap 5 JS Bundle -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js"></script>
|
|
|
|
</body>
|
|
</html> |