UI Components – Flow Library

<section class="pb-12 md:pb-24">
        <div class="relative pt-10 pb-80">
            <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/content/bg-teal-waves.png" alt="">
            <div class="container mx-auto px-4 relative">
                <a href="#" class="inline-block mb-14 text-lg font-medium text-white hover:text-lime-600">Back to blog</a>
                <div class="max-w-3xl mx-auto text-center">
                    <span class="inline-block px-2 mb-4 text-sm leading-5 font-medium bg-white rounded-full">Solar Power</span>
                    <h2 class="font-heading text-4xl xs:text-5xl md:text-6xl tracking-xs text-white mb-6">Harnessing the Power of the Sun: Exploring the World of Solar Energy</h2>
                    <div class="flex items-center justify-center">
                        <span class="text-sm font-medium text-white">9 min read</span>
                        <span class="mx-3">
                            <svg width="5" height="4" viewBox="0 0 5 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="2.5" cy="2" r="2" fill="#929C9A"></circle>
                            </svg>        
                        </span>                    
                        <span class="text-sm font-medium text-white">December 11, 2023</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="container mx-auto -mt-64 px-4 relative">
            <div class="flex flex-wrap -mx-4 mb-18">
                <div class="w-full md:w-1/6 px-4 mb-6 md:mb-0">
                    <div class="flex flex-row md:flex-col items-center md:items-start gap-4">

<section class="relative py-12 lg:py-24 bg-orange-50 overflow-hidden">
        <img class="absolute bottom-0 left-0" src="flow-assets/footer/waves-lines-left-bottom.png" alt="">
        <div class="container px-4 mx-auto relative">
            <div class="flex flex-wrap mb-16 -mx-4">
                <div class="w-full lg:w-2/12 xl:w-2/12 px-4 mb-16 lg:mb-0">
                    <a class="inline-block mb-4" href="#">
                        <img class="h-8" src="flow-assets/logos/flow-logo.svg" alt="">
                    </a>
                </div>
                <div class="w-full md:w-7/12 lg:w-6/12 px-4 mb-16 lg:mb-0">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-1/2 xs:w-1/3 px-4 mb-8 xs:mb-0">
                            <h3 class="mb-6 font-bold">Platform</h3>
                            <ul>
                                <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Solutions</a></li>
                                <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">How it works</a></li>
                                <li><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Pricing</a></li>
                            </ul>
                        </div>
                        <div class="w-1/2 xs:w-1/3 px-4 mb-8 xs:mb-0">
                            <h3 class="mb-6 font-bold">Resources</h3>
                            <ul>
                            <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Blog</a></li>
                            <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Help Center</a></li>

<section class="relative pt-52 xs:pt-40 pb-16 md:pb-24 lg:pb-52 bg-orange-50 overflow-hidden">
        <a href="#" class="absolute top-0 left-0 ml-5 mt-12 inline-block">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V36C40 38.2091 38.2091 40 36 40H4C1.79086 40 0 38.2091 0 36V4Z" fill="#BEF264"></path>
                <rect x="19.1664" y="6.6665" width="1.66667" height="10" rx="0.833333" fill="#022C22"></rect>
                <rect x="19.1664" y="23.3335" width="1.66667" height="10" rx="0.833333" fill="#022C22"></rect>
                <rect x="28.8392" y="9.98291" width="1.66667" height="10" rx="0.833333" transform="rotate(45 28.8392 9.98291)" fill="#022C22"></rect>
                <rect x="17.0537" y="21.7678" width="1.66667" height="10" rx="0.833333" transform="rotate(45 17.0537 21.7678)" fill="#022C22"></rect>
                <rect x="23.3335" y="20.8333" width="1.66667" height="10" rx="0.833333" transform="rotate(-90 23.3335 20.8333)" fill="#022C22"></rect>
                <rect x="6.66638" y="20.8333" width="1.66667" height="10" rx="0.833333" transform="rotate(-90 6.66638 20.8333)" fill="#022C22"></rect>
                <rect x="21.7677" y="22.9463" width="1.66667" height="10" rx="0.833333" transform="rotate(-45 21.7677 22.9463)" fill="#022C22"></rect>
                <rect x="9.98267" y="11.1611" width="1.66667" height="10" rx="0.833333" transform="rotate(-45 9.98267 11.1611)" fill="#022C22"></rect>
            </svg>                    
        </a>
        <p class="absolute top-0 right-0 mt-32 xs:mt-12 mr-5">
            <span>New to Flow?</span>
            <a href="#" class="inline-block font-medium underline hover:text-lime-600">Create an account</a>
        </p>
        <div class="container mx-auto px-4 relative">
            <div class="max-w-sm mx-auto">
                <form action="">
                    <h3 class="text-4xl text-center font-medium mb-10">Login</h3>
                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Email</label>
                    <input type="text" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">

<section class="p-4 bg-orange-50">
        <div class="py-16 px-4 sm:px-8 bg-teal-900 rounded-3xl">
            <div class="container mx-auto px-4">
                <div class="flex mb-4 items-center">
                    <svg width="8" height="8" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="4" cy="4" r="4" fill="#BEF264"></circle>
                    </svg>
                    <span class="inline-block ml-2 text-sm font-medium text-white">Our experts</span>                        
                </div>
                <div class="border-t border-white border-opacity-25 pt-16">
                    <h1 class="font-heading text-5xl sm:text-6xl text-white mb-24">Meet our experts</h1>
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
                            <div class="h-full p-8 bg-lime-500 rounded-xl">
                                <img class="block h-36 rounded-full mx-auto mb-8" src="flow-assets/team/avatar-circle-team1.png" alt="">
                                <div class="text-center">
                                    <span class="block text-xl font-medium">Jenny Wilson</span>
                                    <span class="text-lg">Senior Sustainability Consultant</span>
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
                            <div class="h-full p-8 bg-lime-500 rounded-xl">
                                <img class="block h-36 rounded-full mx-auto mb-8" src="flow-assets/team/avatar-circle-team2.png" alt="">

<section class="relative py-12 lg:py-24 bg-teal-900 overflow-hidden">
        <img class="absolute top-0 right-0" src="flow-assets/pricing/waves-right-top.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-2xl mx-auto text-center mb-20">
                <h1 class="font-heading text-5xl sm:text-6xl tracking-xs text-white mb-6">Pricing</h1>
                <p class="text-lg text-white opacity-80">Our pricing plans are simple and designed to cater to households and companies of various sizes. Choose a plan that suits your needs and budget.</p>
            </div>
            <div class="flex flex-wrap -mx-4 mb-24">
                <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
                    <div class="relative pt-14 pb-8 px-8 bg-white rounded-2xl overflow-hidden">
                        <div class="absolute top-0 left-0 h-1 w-full bg-lime-500"></div>
                        <span class="block text-2xl font-medium mb-6">Basic</span>     
                        <div class="flex items-center mb-6">
                            <span class="text-6xl">$59</span>
                            <span class="ml-4 text-xl font-medium text-gray-700 ">per month</span>
                        </div>  
                        <p class="text-lg mb-8">For small households or businesses with moderate energy consumption</p>
                        <a href="#" class="inline-flex w-full group py-4 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-200">
                            <span class="mr-2">Get started</span>
                            <span class="transform group-hover:translate-x-1 transition-transform duration-200">
                                <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5.25 10H15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10.5 4.75L15.75 10L10.5 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>

<section>
        <div class="p-4">
            <div class="max-w-xl lg:max-w-5xl mx-auto xl:max-w-none px-5 md:px-12 xl:px-24 py-16 bg-teal-900 rounded-2xl">
                <div class="container mx-auto px-4">
                    <div class="flex flex-wrap items-center -mx-4">
                        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
                            <div class="max-w-md xl:max-w-none">
                                <h1 class="font-heading text-4xl xs:text-5xl sm:text-6xl tracking-sm text-white mb-6">Join the green movement</h1>
                                <p class="text-lg text-white opacity-80">Our commitment to green energy is paving the way for a cleaner, healthier planet. </p>
                            </div>
                        </div>
                        <div class="w-full lg:w-1/3 px-4 lg:text-right">
                            <a href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-teal-900 border border-lime-500 hover:border-white bg-lime-500 hover:bg-white rounded-full transition duration-200">Get in touch</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="relative py-12 lg:py-24 bg-orange-50 overflow-hidden">
        <img class="absolute bottom-0 left-0" src="flow-assets/about/lines.svg" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="font-heading text-5xl sm:text-6xl mb-8">About us</h1>
                <p class="text-2xl text-black font-medium mb-10">At Flow, we're committed to a sustainable future. As a pioneering force in the green energy sector, we've been at the forefront of the transition to clean, renewable power sources. Our mission is simple yet profound: to create a world where energy is not only abundant but also environmentally responsible. We believe that by harnessing the power of nature, we can power the world and protect it simultaneously.</p>
                <a href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-300">Read more</a>
            </div>
        </div>
    </section>

<section x-data="{ showContent: false }" class="py-12 lg:py-24 bg-orange-50 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap items-center justify-between mb-20 -mx-4">
                <div class="w-full sm:w-2/3 px-4 mb-10 sm:mb-0">
                    <div class="sm:max-w-lg xl:max-w-none">
                        <h1 class="font-heading text-4xl xs:text-6xl mb-6">Learn more from our blog</h1>
                        <p class="text-lg text-gray-700">Our team boasts top green energy experts, driving innovation in sustainability.</p>
                    </div>
                </div>
                <div class="w-full sm:w-1/3 px-4 sm:text-right">
                    <a x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-black hover:text-white bg-lime-500 hover:bg-black border border-lime-500 hover:border-black rounded-full transition duration-300">See all</a>
                </div>
            </div>
            <div class="flex flex-wrap -mx-4 -mb-8 mt-20">
                <div class="w-full lg:w-1/2 px-4 mb-8">
                    <a href="#" class="block border hover:border-teal-700 rounded-2xl shadow hover:shadow-none overflow-hidden transition duration-200">
                        <img class="block w-full h-64 md:h-96 object-cover" src="flow-assets/blog/image-post2-1.png" alt="">
                        <div class="flex flex-col lg:h-80 py-8 pl-8 pr-10 bg-white">
                            <h4 class="text-3xl font-medium mb-4">Harnessing the Power of the Sun: Exploring the World of Solar Energy</h4>
                            <p class="text-lg text-gray-700 mb-6">Solar energy is revolutionizing the way we power our world. In this blog post, we'll delve into the incredible po...</p>
                            <div class="flex mt-auto items-center">
                                <img class="w-10 h-10 rounded-full" src="flow-assets/blog/circle-avatar-3.png" alt="">
                                <div class="flex items-center ml-4">
                                    <span class="text-sm font-medium">Leslie Alexander</span>

<section class="relative bg-orange-50 overflow-hidden">
        <img class="hidden md:block absolute top-0 left-0 h-full w-1/3 xl:w-2/6" src="flow-assets/newsletter/image-car-left.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-md lg:max-w-xl py-12 lg:py-24 mx-auto md:mr-0">
                <h1 class="font-heading text-5xl xl:text-6xl mb-6">Your Source for Green Energy Updates</h1>
                <p class="lg:max-w-md xl:max-w-none text-lg text-gray-700 mb-10">Stay in the loop with our Green Horizon newsletter, where we deliver bite-sized insights into the latest green energy solutions.</p>
                <div class="flex flex-col sm:flex-row lg:max-w-md xl:max-w-none">
                    <input type="email" class="h-14 w-full px-4 py-3 placeholder-gray-700 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full" placeholder="Your e-mail...">
                    <a href="#" class="flex-shrink-0 h-14 inline-flex mt-3 sm:mt-0 sm:ml-2 py-2 px-6 items-center justify-center text-lg font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Get in touch</a>
                </div>
            </div>
        </div>
        <img class="block md:hidden w-full" src="flow-assets/newsletter/image-car-left.png" alt="">
    </section>

<section>
        <div x-data="{ modal: true }" x-show="modal" class="fixed z-50 bottom-0 left-0 w-full">
            <div class="py-6 bg-teal-900">
                <div class="container mx-auto px-4">
                    <div class="flex flex-wrap items-center -mx-4">
                        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
                            <h5 class="text-lg font-medium text-white">Privacy Settings</h5>
                            <p class="text-white opacity-80">This site uses third-party website tracking technologies to provide and continually improve our services.</p>
                        </div>
                        <div class="w-full md:w-1/2 px-4">
                            <div class="flex flex-wrap md:justify-end -mb-3">
                                <div class="w-auto mb-3 mr-4">
                                    <a x-on:click.prevent="modal = false" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-white hover:text-teal-900 border border-white hover:bg-white rounded-full transition duration-200">Deny</a>
                                </div>
                                <div class="w-auto mb-3">
                                    <a x-on:click.prevent="modal = false" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-black border border-lime-500 hover:border-white bg-lime-500 hover:bg-white rounded-full transition duration-200">Accept All</a>
                                </div>
                            </div>
                        </div>
                    </div>
               </div>
            </div>
        </div>
    </section>

<section class="py-12 lg:py-24 bg-orange-50 overflow-hidden" x-data="{ activeSlide: 1, slideCount: 3 }">
        <div class="container mx-auto px-4">
            <div class="max-w-xs sm:max-w-md md:max-w-none mx-auto text-center mb-20">
                <h1 class="font-heading text-5xl sm:text-6xl tracking-tight mb-6">What our customers say</h1>
                <p class="text-gray-700">Thousands of happy customers that changed their energy use </p>
            </div>
            <div class="max-w-md md:max-w-2xl lg:max-w-6xl mx-auto">
                <div class="flex flex-wrap items-center justify-center md:justify-between -mx-4">
                    <div class="px-4 order-last md:order-first">
                        <a href="#" x-on:click.prevent="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="inline-block mr-4 text-gray-700 hover:text-lime-500">
                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M24.4 16H7.59998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M16 24.4L7.59998 16L16 7.59998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                                    
                        </a>
                    </div>
                    <div class="w-full md:w-2/3 lg:w-auto px-4 mb-12 md:mb-0">
                        <div class="relative px-6">
                            <div class="absolute top-1/2 left-0 transform -translate-y-1/2 h-full w-full py-8">
                                <div class="h-full bg-gray-50 bg-opacity-70 shadow-md rounded-2xl"></div>
                            </div>
                            <div class="relative py-12 px-16 text-center bg-white shadow-md rounded-2xl">
                               <div class="max-w-2xl mx-auto">
                                    <div class="mb-4 inline-block mx-auto">

<section class="py-12 lg:pt-16 lg:pb-24 bg-orange-50 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="mb-20">
                <h1 class="font-heading text-4xl sm:text-6xl md:text-7xl tracking-sm mb-6">Join our team</h1>
                <p class="text-lg text-gray-700">Our philosophy is simple – make the world a greener place. </p>
            </div>
            <div class="mb-14">
                <span class="block font-medium text-gray-600 mb-6">Research and Development (R&amp;D)</span>
                <div class="flex flex-wrap -mx-4 -mb-8">
                    <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
                        <div class="relative py-6 px-8 bg-white rounded-2xl shadow-md overflow-hidden">
                            <div class="absolute top-0 left-0 w-full pt-1 bg-lime-500"></div>
                            <h5 class="text-xl font-medium mb-4">Renewable Energy Researcher</h5>
                            <div class="flex flex-wrap gap-2 mb-6">
                                <span class="inline-flex items-center pl-2 pr-3 text-sm font-medium border rounded-full">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M13.4 6.79999C13.4 11 7.99998 14.6 7.99998 14.6C7.99998 14.6 2.59998 11 2.59998 6.79999C2.59998 5.36783 3.1689 3.99431 4.1816 2.98162C5.1943 1.96892 6.56781 1.39999 7.99998 1.39999C9.43214 1.39999 10.8057 1.96892 11.8184 2.98162C12.831 3.99431 13.4 5.36783 13.4 6.79999Z" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M8.00001 8.6C8.99413 8.6 9.80001 7.79411 9.80001 6.8C9.80001 5.80589 8.99413 5 8.00001 5C7.0059 5 6.20001 5.80589 6.20001 6.8C6.20001 7.79411 7.0059 8.6 8.00001 8.6Z" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>                                                                     
                                    <span class="ml-2 text-gray-900 leading-5">San Francisco, US</span>
                                </span>
                                <span class="inline-flex items-center pl-2 pr-3 text-sm font-medium border rounded-full">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="relative py-24 md:py-32 xl:py-52 overflow-hidden">
        <img class="absolute top-0 left-0" src="flow-assets/http-codes/lime-shadow.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="text-center">
                <span class="block mx-auto text-8xl sm:text-9xl md:text-10xl text-lime-500 font-bold">404</span>
                <p class="max-w-md mx-auto mb-12 text-lg text-gray-700">The page you are looking for was moved, removed, renamed or might have never existed!</p>
                <div class="flex flex-col sm:flex-row justify-center">
                    <a href="#" class="inline-flex py-4 px-6 mb-3 sm:mb-0 sm:mr-4 items-center justify-center text-lg font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Back to home</a>
                    <a href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-200">Support</a>
                </div>
            </div>
        </div>
    </section>

<section class="py-12 lg:py-24 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-20">
                <h1 class="font-heading text-6xl mb-6">FAQ</h1>
                <p class="text-gray-700">Here you will find the answers to the frequently asked questions.</p>
            </div>
           <div class="max-w-xl mx-auto lg:max-w-none">
                <div class="flex flex-wrap -mx-4 mb-24">
                    <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-0">
                        <button x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="flex w-full py-4 px-8 mb-4 items-start justify-between text-left bg-white shadow-md rounded-2xl">
                            <div class="pr-5">
                                <h5 class="text-lg font-medium">What is green energy?</h5>
                                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                                    <p class="text-gray-700 mt-4">We provide a range of green energy solutions, including solar power systems, wind turbines, energy-efficient appliances, and smart home technologies to enhance energy sustainability.</p>
                                </div>
                            </div>
                            <span class="flex-shrink-0">
                                <div :class="{'hidden': accordion}">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 5.69995V18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>   
                                  </div>
                                  <div :class="{'hidden': !accordion}" class="hidden">

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
        <div class="bg-teal-900">
            <nav class="mx-4 py-6">
                <div class="container mx-auto px-4">
                    <div class="relative flex items-center justify-between">
                        <div class="flex items-center">
                            <a href="#" class="inline-block">
                                <img class="h-8" src="flow-assets/logos/logo-white-flow.svg" alt="">
                            </a>
                            <ul class="hidden md:flex ml-10">
                                <li class="mr-8"><a class="inline-block text-white hover:text-lime-500 font-medium" href="#">About us</a></li>
                                <li class="mr-8"><a class="inline-block text-white hover:text-lime-500 font-medium" href="#">Team</a></li>
                                <li class="mr-8"><a class="inline-block text-white hover:text-lime-500 font-medium" href="#">Solutions</a></li>
                                <li><a class="inline-block text-white hover:text-lime-500 font-medium" href="#">Blog</a></li>
                            </ul>
                        </div>
                        <div class="flex items-center justify-end">
                            <div class="hidden md:block">
                                <a href="#" class="inline-flex py-2.5 px-4 mr-4 items-center justify-center text-sm font-medium text-white hover:text-teal-900 border border-white hover:border-lime-500 hover:bg-lime-500 rounded-full transition duration-200">Login</a>                                
                                <a href="#" class="inline-flex py-2.5 px-4 items-center justify-center text-sm font-medium text-teal-900 border border-lime-500 hover:border-white bg-lime-500 hover:bg-white rounded-full transition duration-200">Get in touch</a>
                            </div>
                            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="md:hidden text-white hover:text-lime-500">
                                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5.19995 23.2H26.7999" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="relative py-12 lg:py-24 bg-teal-900 overflow-hidden">
        <img class="absolute bottom-0 left-0" src="flow-assets/footer/waves-lines-left-bottom.png" alt="">
        <div class="container px-4 mx-auto relative">
            <div class="flex flex-wrap mb-12 md:mb-24 xl:mb-40 -mx-4">
                <div class="w-full lg:w-2/12 xl:w-3/12 px-4 mb-16 lg:mb-0">
                    <a class="inline-block mb-4" href="#">
                        <img class="h-8" src="flow-assets/logos/logo-white-flow.svg" alt="">
                    </a>
                </div>
                <div class="w-full md:w-7/12 lg:w-7/12 xl:w-6/12 px-4 mb-16 lg:mb-0">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-1/2 xs:w-1/3 px-4 mb-8 xs:mb-0">
                            <h3 class="mb-6 text-white font-bold">Platform</h3>
                            <ul>
                                <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Solutions</a></li>
                                <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">How it works</a></li>
                                <li><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Pricing</a></li>
                            </ul>
                        </div>
                        <div class="w-1/2 xs:w-1/3 px-4 mb-8 xs:mb-0">
                            <h3 class="mb-6 text-white font-bold">Resources</h3>
                            <ul>
                            <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Blog</a></li>
                            <li class="mb-4"><a class="inline-block text-gray-600 hover:text-lime-500 font-medium" href="#">Help Center</a></li>

<section class="relative bg-teal-900 overflow-hidden">
        <div class="flex flex-wrap">
            <div class="w-full lg:w-1/2 xl:w-2/3 pt-12 px-5 xl:px-20 pb-24">
                <div class="flex mb-20 lg:mb-32 items-center justify-between">
                    <span>
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V36C40 38.2091 38.2091 40 36 40H4C1.79086 40 0 38.2091 0 36V4Z" fill="#BEF264"></path>
                            <rect x="19.1665" y="6.6665" width="1.66667" height="10" rx="0.833333" fill="#022C22"></rect>
                            <rect x="19.1665" y="23.3335" width="1.66667" height="10" rx="0.833333" fill="#022C22"></rect>
                            <rect x="28.8391" y="9.98291" width="1.66667" height="10" rx="0.833333" transform="rotate(45 28.8391 9.98291)" fill="#022C22"></rect>
                            <rect x="17.0537" y="21.7678" width="1.66667" height="10" rx="0.833333" transform="rotate(45 17.0537 21.7678)" fill="#022C22"></rect>
                            <rect x="23.3335" y="20.8333" width="1.66667" height="10" rx="0.833333" transform="rotate(-90 23.3335 20.8333)" fill="#022C22"></rect>
                            <rect x="6.6665" y="20.8333" width="1.66667" height="10" rx="0.833333" transform="rotate(-90 6.6665 20.8333)" fill="#022C22"></rect>
                            <rect x="21.7678" y="22.9463" width="1.66667" height="10" rx="0.833333" transform="rotate(-45 21.7678 22.9463)" fill="#022C22"></rect>
                            <rect x="9.98267" y="11.1611" width="1.66667" height="10" rx="0.833333" transform="rotate(-45 9.98267 11.1611)" fill="#022C22"></rect>
                        </svg>                    
                    </span>
                    <p class="text-white">
                        <span class="opacity-80">New to Flow?</span>
                        <a href="#" class="inline-block font-medium underline opacity-80 hover:opacity-100">Create an account</a>
                    </p>
                </div>
                <div class="max-w-sm mx-auto">
                    <form action="">

<section class="py-12 lg:py-24 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap -mx-4">
                <div class="w-full lg:w-1/3 px-4 mb-10 lg:mb-0">
                    <div>
                        <span class="font-medium">Global partners that trusted us</span>
                    </div>
                </div>
                <div class="w-full lg:w-2/3 px-4">
                    <div class="flex flex-wrap justify-between -mx-4">
                        <div class="w-1/2 xs:w-1/4 lg:w-1/5 px-4 mb-6 sm:mb-0">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-4.svg" alt="">
                        </div>
                        <div class="w-1/2 xs:w-1/4 lg:w-1/5 px-4 mb-6 sm:mb-0">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-3.svg" alt="">
                        </div>
                        <div class="w-1/2 xs:w-1/4 lg:w-1/5 px-4">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-2.svg" alt="">
                        </div>
                        <div class="w-1/2 xs:w-1/4 lg:w-1/5 px-4">
                            <img class="block h-7" src="flow-assets/logos/brands/logo-clouds-1.svg" alt="">
                        </div>
                    </div>
                </div>

<section class="p-4 bg-white">
        <div class="pt-16 pb-24 px-5 xs:px-8 xl:px-12 bg-lime-500 rounded-3xl">
            <div class="container mx-auto px-4">
                <div class="flex mb-4 items-center">
                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="4" cy="4" r="4" fill="#022C22"></circle>
                    </svg>                                           
                    <span class="inline-block ml-2 text-sm font-medium">Solutions</span>                        
                </div>
                <div class="border-t border-teal-900 border-opacity-25 pt-14">
                    <h1 class="font-heading text-4xl sm:text-6xl mb-24">Key to clean future</h1>
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-12 lg:mb-0">
                            <div class="flex flex-col h-full">
                                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="white"></path>
                                    <circle cx="16" cy="16" r="4" fill="#022C22"></circle>
                                    <circle cx="24" cy="32" r="4" fill="#022C22"></circle>
                                    <circle cx="32" cy="16" r="4" fill="#022C22"></circle>
                                </svg>                                    
                                <h5 class="text-2xl font-medium mt-6 mb-3">EV charging </h5>
                                <p class="mb-6">EVs use electricity as a power source, which can be generated from renewable energy sources. Our solutions help reducing greenhouse gas emissions in the transportation sector.</p>
                                <a href="#" class="inline-block mt-auto text-lg font-medium hover:text-teal-800">Read more</a>
                            </div>

<section x-data="{ activeSlide: 1, slideCount: 2}" class="py-12 lg:py-24 bg-teal-900 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap items-center mb-12 md:mb-20 -mx-4">
                <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0">
                    <div>
                        <h1 class="font-heading text-5xl sm:text-6xl text-white mb-4">Meet our experts</h1>
                        <p class="text-white opacity-80">Our team boasts top green energy experts, driving innovation in sustainability.</p>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-4">
                    <div class="flex items-center justify-end">
                        <button x-on:click.prevent="activeSlide = 1" class="inline-block text-white opacity-80 mr-1">
                            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g opacity="0.4">
                                <path d="M17.5 29.1667L8.33333 20.0001L17.5 10.8334" stroke="currentColor" stroke-width="1.5"></path>
                                <path d="M8.33329 20L31.6666 20" stroke="currentColor" stroke-width="1.5"></path>
                                </g>
                            </svg>                                
                        </button>
                        <button x-on:click.prevent="activeSlide = 2" class="inline-block text-white hover:text-lime-500">
                            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M22.5 10.8333L31.6667 19.9999L22.5 29.1666" stroke="currentColor" stroke-width="1.5"></path>
                                <path d="M31.6666 20H8.33331" stroke="currentColor" stroke-width="1.5"></path>
                            </svg>