<section class="has-background-light" x-data="{ mobileNavOpen: false }">
<nav class="navbar py-8 is-light mb-24">
<div class="container mx-auto px-8">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="flaro-assets/logos/flaro-logo-black.svg" alt="" style="height: 32px;">
</a>
<button class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu" x-on:click="mobileNavOpen = !mobileNavOpen">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</button>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<ul class="navbar-item">
<li><a class="navbar-item" href="#">Features</a></li>
<li><a class="navbar-item" href="#">Solutions</a></li>
<li><a class="navbar-item" href="#">Resources</a></li>
<li><a class="navbar-item" href="#">Pricing</a></li>
</ul>
<div class="navbar-item is-hidden-mobile"><a class="button is-link" href="#">Try 14 Days Free Trial</a></div>
</div>
</div>
</div>
</nav>
<div :class="{ 'is-block': mobileNavOpen, 'is-hidden': !mobileNavOpen }" class="is-hidden navbar-side is-fixed is-inset-0" style="width: 75%; z-index: 9999; height: 100%;">
<div x-on:click="mobileNavOpen = !mobileNavOpen" class="is-fixed is-inset-0 has-background-dark" style="opacity: 75%; z-index: 50;"></div>
<aside class="menu is-relative is-flex is-flex-direction-column py-6 px-6 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
<div class="is-flex is-align-items-center mb-10">
<a class="mr-auto mb-0" href="#">
<span class="navbar-item">
<img src="flaro-assets/logos/flaro-logo-black.svg" alt="" style="height: 28px;" width="auto">
</span>
</a>
<button class="button is-text p-0 mb-2" type="button" aria-label="Close" x-on:click="mobileNavOpen = !mobileNavOpen">
<svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<ul class="menu-list is-size-7">
<li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Features</a></li>
<li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Solutions</a></li>
<li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Resources</a></li>
<li class="mb-2"><a class="has-background-white has-text-dark is-size-5" href="#">Pricing</a></li>
</ul>
<div class="mt-auto">
<div class="py-6"><a class="button is-link is-fullwidth" href="#">Try 14 Days Free Trial</a></div>
<p class="mb-4 has-text-centered has-text-grey-dark">
<span>© 2021 All rights reserved.</span>
</p>
</div>
</aside>
</div>
<div class="container mx-auto px-8">
<div class="columns">
<div class="column is-6">
<div class="is-flex">
<div class="notification is-success py-2 px-3 mb-6 has-background-success-light" style="border-radius: 60px;">
<span class="has-text-weight-semibold">👋 We are hiring . View open roles</span>
<a href="#" class="ml-2">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.66667 3.41675L12.75 7.50008M12.75 7.50008L8.66667 11.5834M12.75 7.50008L2.25 7.50008" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
<h1 class="mb-6 title has-text-weight-bold is-size-1">Discover mentors that helps you grow</h1>
<p class="subtitle mb-8 has-text-weight-medium">Get the best-in-class group mentoring plans and professional benefits for your team</p>
<div class="is-flex is-flex-wrap-wrap mb-24 -m-2">
<div class="p-2">
<a href="#" class="button is-link">Join Free for 30 Days</a>
</div>
<div class="p-2">
<a href="#" class="button">
<div class="mr-2" style="height: 18px;">
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.75 3.75C2.75 2.92157 3.42157 2.25 4.25 2.25H6.70943C7.03225 2.25 7.31886 2.45657 7.42094 2.76283L8.5443 6.13291C8.66233 6.48699 8.50203 6.87398 8.1682 7.0409L6.47525 7.88737C7.30194 9.72091 8.77909 11.1981 10.6126 12.0247L11.4591 10.3318C11.626 9.99796 12.013 9.83767 12.3671 9.9557L15.7372 11.0791C16.0434 11.1811 16.25 11.4677 16.25 11.7906V14.25C16.25 15.0784 15.5784 15.75 14.75 15.75H14C7.7868 15.75 2.75 10.7132 2.75 4.5V3.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<span>Book a call</span>
</a>
</div>
</div>
<p class="has-text-weight-semibold mb-6">TRUSTED AND LOVED BY 100+ TECH FIRST TEAMS</p>
<div class="is-flex is-align-items-center is-flex-wrap-wrap">
<div class="p-1">
<img class="mr-4" style="height: 28px;" src="flaro-assets/logos/brands/brand.png" alt="">
</div>
<div class="p-1">
<img class="mr-4" style="height: 24px;" src="flaro-assets/logos/brands/brand2.png" alt="">
</div>
<div class="p-1">
<img style="height: 19px;" src="flaro-assets/logos/brands/brand3.png" alt="">
</div>
</div>
</div>
<div class="column is-6">
<img class="is-cover" style="height: 690px;" src="flaro-assets/images/headers/header.png" alt="">
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
