.footer {
    background-color: #020617;
    color: #e5e7eb;
    padding: 40px 20px 20px;
    margin-top: 40px;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: auto;
}

.footer-section h2,
.footer-section h3 {
    color: white;
    margin-bottom: 10px;
}

.footer-section p {
    font-size: 14px;
    color: #94a3b8;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin: 8px 0;
}

.footer-section a {
    color: #94a3b8;
    text-decoration: none;
    transition: 0.3s;
}

.footer-section a:hover {
    color: #22c55e;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #1e293b;
    margin-top: 30px;
    padding-top: 15px;
    font-size: 13px;
    color: #64748b;
}
<div class="container">

    <!-- Hero Section -->
    <section class="hero">
        <h1>Find Your Talent. Build Your Band.</h1>
        <p>Connect with nearby musicians and creators</p>
        <a href="#" class="btn">Get Started</a>
    </section>

    <!-- Search Section -->
    <section class="search-section">
        <input type="text" class="search-bar" placeholder="Search talent near you...">
    </section>

    <!-- Talent Grid -->
    <section>
        <h2 style="margin-bottom: 20px;">Explore Talents</h2>

        <div class="grid">

            <p>No talents found</p>
        </div>
    </section>

    <!-- Bands Section -->
    <section style="margin-top: 40px;">
        <h2 style="margin-bottom: 20px;">Find or Create a Band</h2>

        <div class="grid">

            <p>No bands available</p>
        </div>

        <div style="text-align:center; margin-top:20px;">
            <a href="#" class="btn">Create a Band</a>
        </div>

    </section>

</div>

<footer class="footer">
    <div class="container footer-container">

        <!-- App Info -->
        <div class="footer-section">
            <h2>Talent Finder</h2>
            <p>Find your talent. Build your band. Connect with creators near you.</p>
        </div>

        <!-- Quick Links -->
        <div class="footer-section">
            <h3>Quick Links</h3>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Find Talent</a></li>
                <li><a href="#">Create Band</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

        <!-- Social -->
        <div class="footer-section">
            <h3>Follow Us</h3>
            <p>
                <a href="#">Instagram</a><br>
                <a href="#">Facebook</a><br>
                <a href="#">YouTube</a>
            </p>
        </div>

    </div>

    <!-- Bottom -->
    <div class="footer-bottom">
        <p>© 2026 Talent Finder. All rights reserved.</p>
    </div>

</footer>

<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/hello-elementor/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
</body>
</html>