Tailwind CSS Components – Flow Library

<section class="py-12 lg:py-24 bg-orange-50">
        <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="#BEF264"></circle>
                </svg>                    
                <span class="inline-block ml-2 text-sm font-medium text-teal-900">Our experts</span>                        
            </div>
            <div class="border-t pt-16">
                <div class="md:max-w-xl lg:max-w-none mx-auto">
                    <div class="mb-20 lg:mb-32">
                        <h1 class="font-heading text-5xl sm:text-6xl mb-4">Meet our experts</h1>
                        <p class="text-gray-700">Our team boasts top green energy experts, driving innovation in sustainability.</p>
                    </div>
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
                            <div class="py-4 pl-4 pr-4 sm:pr-10 mb-8 bg-white shadow-md rounded-2xl">
                                <div class="flex flex-wrap -mx-4 items-center">
                                    <div class="w-full xs:w-3/12 sm:w-2/12 lg:w-3/12 px-4 mb-6 xs:mb-0">
                                        <img class="block w-24 lg:w-full" src="flow-assets/team/square-avatar-1.png" alt="">
                                    </div>
                                    <div class="w-full xs:w-7/12 sm:w-6/12 md:w-7/12 px-4 mb-4 xs:mb-0">
                                        <div>
                                            <span class="block text-xl font-medium">Jenny Wilson</span>

<section x-data="{ showContent: false }" class="py-12 lg:py-24 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap mb-20 -mx-4">
                <div class="w-full lg:w-1/2 px-4 mb-10 lg:mb-0">
                    <div class="flex flex-col h-full items-start max-w-md">
                        <h1 class="font-heading text-4xl xs:text-6xl mb-6">Learn more from our blog</h1>
                        <p class="text-lg text-gray-700 mb-20">Our team boasts top green energy experts, driving innovation in sustainability.</p>
                        <a x-on:click.prevent="showContent = true" :class="{'hidden': showContent}" href="#" class="inline-flex mt-auto 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">See all</a>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 px-4">
                    <div class="max-w-xl">
                        <a href="#" class="flex flex-wrap sm:flex-nowrap group mb-8 items-center">
                            <img class="block w-44 h-44 rounded-2xl" src="flow-assets/blog/image-sm-1.png" alt="">
                            <div class="mt-6 sm:mt-0 sm:ml-8">
                                <h3 class="text-2xl font-medium group-hover:text-teal-600 transition duration-200 mb-6">Wind Power: A Breath of Fresh Air for Clean Energy Enthusiasts</h3>
                                <div class="flex items-center">
                                    <img class="w-8 h-8 rounded-full" src="flow-assets/blog/circle-avatar-1.png" alt="">
                                    <div class="flex items-center ml-4">
                                        <span class="text-sm font-medium">Wade Warren</span>
                                        <span class="mx-2 sm:mx-4">
                                            <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx="2" cy="2" r="2" fill="#929C9A"></circle>
                                            </svg>

<section class="py-12 lg:py-24 bg-teal-900">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full lg:w-1/2 px-4 mb-10 lg:mb-0">
                    <div>
                        <h4 class="font-heading text-4xl md:text-5xl text-white">Global partners that trusted us</h4>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 px-4">
                    <div class="flex flex-wrap justify-between -mx-2">
                        <div class="w-1/2 px-2 mb-2">
                            <div class="flex h-14 px-12 items-center justify-center bg-white bg-opacity-25 rounded-lg">
                                <img class="block h-7" src="flow-assets/logos/brands/logo-light-4.svg" alt="">
                            </div>
                        </div>
                        <div class="w-1/2 px-2 mb-2">
                            <div class="flex h-14 px-12 items-center justify-center bg-white bg-opacity-25 rounded-lg">
                                <img class="block h-7" src="flow-assets/logos/brands/logo-light-3.svg" alt="">
                            </div>
                        </div>
                        <div class="w-1/2 px-2 mb-2">
                            <div class="flex h-14 px-12 items-center justify-center bg-white bg-opacity-25 rounded-lg">
                                <img class="block h-7" src="flow-assets/logos/brands/logo-light-2.svg" alt="">
                            </div>

<section class="py-12 lg:py-24 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap -mx-4 mb-24">
                <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
                    <div>
                        <h1 class="font-heading text-6xl">About us</h1>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-4">
                    <div class="lg:max-w-lg md:ml-auto">
                        <p class="text-xl 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-teal-900 hover:text-lime-500 border border-lime-500 hover:border-teal-900 bg-lime-500 hover:bg-teal-900 rounded-full transition duration-300">Read more</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex overflow-x-hidden">
            <div class="w-1/3 lg:w-1/5 -ml-32 flex-shrink-0 px-2 md:px-4">
                <img class="block w-full h-112 object-cover rounded-3xl" src="flow-assets/about/about-image1.png" alt="">
            </div>
            <div class="w-1/3 lg:w-1/5 flex-shrink-0 px-2 md:px-4">
                <img class="block w-full h-112 object-cover rounded-3xl" src="flow-assets/about/about-image2.png" alt="">
            </div>
            <div class="w-1/3 lg:w-1/5 flex-shrink-0 px-2 md:px-4">

<section class="relative pb-12 md:pb-16 bg-orange-50 overflow-hidden">
        <img class="absolute top-0 left-0 h-full w-full" src="flow-assets/sign-in/double-waves.png" alt="">
        <div class="container mx-auto px-4 relative">
            <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>
            <div class="max-w-sm pt-32 lg:pt-40 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">
                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Password</label>
                    <div class="relative mb-6" x-data="{ visible: false }">
                        <input type="password" :type="visible ? 'text': 'password'" class="relative w-full px-4 py-3 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">

<section class="pt-12 lg:py-24 bg-orange-50 relative overflow-hidden">
        <div class="hidden lg:flex items-center absolute top-0 right-0 h-full w-2/5 max-w-sm xl:max-w-lg bg-teal-900">
            <div class="relative xl:h-full transform -translate-x-1/2 rounded-full overflow-hidden">
                <img class="block xl:h-full" src="flow-assets/cta/circle-photo.png" alt="">
                <img class="absolute top-0 right-0 h-full transform scale-105" src="flow-assets/cta/lime-half-circle.png" alt="">
            </div>
        </div>
        <div class="container mx-auto px-4 relative">
            <div class="max-w-md lg:max-w-none lg:w-2/5 mx-auto lg:mx-0">
                <h1 class="font-heading text-5xl sm:text-6xl tracking-sm mb-6">Join the green movement</h1>
                <p class="text-lg text-gray-700 mb-10">Our commitment to green energy is paving the way for a cleaner, healthier planet. </p>
                <a href="#" class="inline-flex py-4 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 class="lg:hidden flex items-center mt-20 ml-auto w-1/2 bg-teal-900">
            <div class="relative xl:h-full transform -translate-x-1/2 rounded-full overflow-hidden">
                <img class="block xl:h-full" src="flow-assets/cta/circle-photo.png" alt="">
                <img class="absolute top-0 right-0 h-full transform scale-105" src="flow-assets/cta/lime-half-circle.png" alt="">
            </div>
        </div>
    </section>

<section class="pb-12 pt-52 lg:pb-24 bg-orange-50 relative overflow-hidden">
        <img class="absolute top-0 left-0 w-full" src="flow-assets/career/lines-horizontal-waves-bg.png" alt="">
        <div class="container mx-auto px-4 relative">
            <img class="absolute top-0 left-0 mt-36 md:mt-24 w-24 rounded-full" src="flow-assets/career/avatar-float-bg-1.png" alt="">
            <img class="absolute top-0 left-0 md:ml-10 lg:ml-32 -mt-24 sm:-mt-16 w-24 rounded-full" src="flow-assets/career/avatar-float-bg-2.png" alt="">
            <img class="absolute top-0 left-1/2 transform -translate-x-1/2 -mt-32 w-24 rounded-full" src="flow-assets/career/avatar-float-bg-3.png" alt="">
            <img class="absolute top-0 right-0 -mt-24 sm:-mt-10 md:-mr-10 lg:-mr-0 w-24 rounded-full" src="flow-assets/career/avatar-float-bg-4.png" alt="">
            <img class="absolute top-0 right-0 mt-36 md:mt-24 lg:mr-32 w-24 rounded-full" src="flow-assets/career/avatar-float-bg-5.png" alt="">
            <div class="text-center mb-32">
                <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="max-w-4xl mx-auto">
                <div class="mb-16">
                    <span class="block font-medium text-gray-600 mb-6">Research and Development (R&amp;D)</span>
                    <div class="py-6 px-8 mb-4 bg-white rounded-2xl shadow-md">
                        <div class="flex flex-col sm:flex-row md:justify-between items-start">
                            <div class="mb-6 sm:mb-0">
                                <h4 class="text-xl font-medium mb-3">Renewable Energy Researcher</h4>
                                <div class="inline-flex mr-8 items-center">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M16.75 8.5C16.75 13.75 10 18.25 10 18.25C10 18.25 3.25 13.75 3.25 8.5C3.25 6.70979 3.96116 4.9929 5.22703 3.72703C6.4929 2.46116 8.20979 1.75 10 1.75C11.7902 1.75 13.5071 2.46116 14.773 3.72703C16.0388 4.9929 16.75 6.70979 16.75 8.5Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M10 10.75C11.2426 10.75 12.25 9.74264 12.25 8.5C12.25 7.25736 11.2426 6.25 10 6.25C8.75736 6.25 7.75 7.25736 7.75 8.5C7.75 9.74264 8.75736 10.75 10 10.75Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>

<section class="py-12 lg:py-24 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-20">
                <h2 class="font-heading text-6xl mb-6">Our results</h2>
                <p class="text-lg text-gray-700">We are committed to a sustainable future</p>
            </div>
            <div class="max-w-md mx-auto lg:max-w-none">
                <div class="flex flex-wrap -mx-4">
                    <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
                        <div class="h-full py-10 px-5 xs:px-10 bg-white rounded-2xl shadow-md">
                            <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="#BEF264"></path>
                                <rect x="23" y="8" width="2" height="12" rx="1" fill="#022C22"></rect>
                                <rect x="23" y="28" width="2" height="12" rx="1" fill="#022C22"></rect>
                                <rect x="34.6066" y="11.9792" width="2" height="12" rx="1" transform="rotate(45 34.6066 11.9792)" fill="#022C22"></rect>
                                <rect x="20.4645" y="26.1213" width="2" height="12" rx="1" transform="rotate(45 20.4645 26.1213)" fill="#022C22"></rect>
                                <rect x="28" y="25" width="2" height="12" rx="1" transform="rotate(-90 28 25)" fill="#022C22"></rect>
                                <rect x="8" y="25" width="2" height="12" rx="1" transform="rotate(-90 8 25)" fill="#022C22"></rect>
                                <rect x="26.1213" y="27.5356" width="2" height="12" rx="1" transform="rotate(-45 26.1213 27.5356)" fill="#022C22"></rect>
                                <rect x="11.9792" y="13.3936" width="2" height="12" rx="1" transform="rotate(-45 11.9792 13.3936)" fill="#022C22"></rect>
                            </svg>                            
                            <h5 class="text-2xl xs:text-3xl lg:text-4xl xl:text-5xl mt-6 mb-4">5,000 Mwh</h5>
                            <span class="block mb-6 text-base lg:text-xl font-medium">Renewable Energy Generated</span>
                            <p class="text-gray-700">Our commitment to sustainability shines through as we proudly announce the generation of 5,000 megawatt-hours of renewable energy, contributing to a greener and more environmentally friendly future.</p>

<section class="py-12 lg:py-24 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="max-w-xl mx-auto lg:max-w-none">
                <div class="flex flex-wrap items-center -mx-4 mb-20">
                    <div class="w-full lg:w-3/5 px-4 mb-10 lg:mb-0">
                        <h1 class="font-heading text-5xl sm:text-6xl mb-6">Pricing</h1>
                        <p class="text-lg text-gray-700">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="w-full lg:w-2/5 lg:text-right px-4">
                        <a href="#" class="inline-flex items-center p-6 text-lg font-medium bg-white hover:bg-lime-50 shadow-md rounded-2xl transition duration-200">
                            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z" fill="#BEF264"></path>
                                <path d="M11.3966 12.9681C9.82919 14.8835 8.88879 17.332 8.88879 20C8.88879 22.6681 9.82922 25.1166 11.3967 27.032L15.7667 22.662C15.2809 21.8912 14.9999 20.9784 14.9999 20C14.9999 19.0217 15.2809 18.1089 15.7666 17.3381L11.3966 12.9681Z" fill="#022C22"></path>
                                <path d="M12.9679 11.3968L17.3379 15.7668C18.1087 15.281 19.0215 15 19.9999 15C20.9783 15 21.8911 15.2811 22.6619 15.7668L27.0319 11.3968C25.1165 9.82934 22.668 8.88892 19.9999 8.88892C17.3318 8.88892 14.8834 9.82933 12.9679 11.3968Z" fill="#022C22"></path>
                                <path d="M28.6032 12.9682L24.2332 17.3382C24.7189 18.1089 24.9999 19.0217 24.9999 20C24.9999 20.9784 24.7189 21.8912 24.2332 22.662L28.6031 27.032C30.1706 25.1166 31.111 22.6681 31.111 20C31.111 17.332 30.1706 14.8836 28.6032 12.9682Z" fill="#022C22"></path>
                                <path d="M27.0318 28.6033L22.6618 24.2333C21.891 24.719 20.9783 25 19.9999 25C19.0216 25 18.1088 24.719 17.338 24.2333L12.968 28.6033C14.8834 30.1707 17.3319 31.1111 19.9999 31.1111C22.668 31.1111 25.1164 30.1707 27.0318 28.6033Z" fill="#022C22"></path>
                            </svg>
                            <span class="ml-6 mr-6">Book a free consultation</span>                                
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.69995 12H18.3" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M12 5.69995L18.3 12L12 18.3" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                                
                        </a>
                    </div>

<div x-data="{ modal: true }" :class="{'hidden': !modal}" class="fixed z-50 bottom-0 left-0 p-6 md:p-16">
    <div class="container mx-auto px-4">
        <div class="max-w-sm py-6 px-10 mx-auto w-full bg-teal-900 border rounded-2xl">
            <h5 class="text-lg font-medium text-white mb-2">Privacy Settings</h5>
            <p class="text-white opacity-80 mb-8">By clicking “Accept Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.</p>
            <div class="flex flex-wrap -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-black border border-lime-500 hover:border-white bg-lime-500 hover:bg-white rounded-full transition duration-200">Accept All</a>
                </div>
                <div class="w-auto mb-3">
                    <a 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">Settings</a>
                </div>
            </div>
        </div>
    </div>
</div>

<section>
        <div class="container mx-auto px-4">
          <div class="max-w-xl mx-auto xl:max-w-none">
            <div class="relative flex flex-wrap py-12 items-center justify-between">
                <a href="#" class="inline-block">
                    <img class="h-8" src="flow-assets/logos/flow-logo.svg" alt="">
                </a>
                <ul class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden xl:flex">
                    <li class="mr-16"><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">Solutions</a></li>
                    <li class="mr-16"><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">How it works</a></li>
                    <li class="mr-16"><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">Pricing</a></li>
                    <li class="mr-16"><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">About</a></li>
                    <li><a class="inline-block text-teal-900 hover:text-teal-700 font-medium" href="#">Blog</a></li>
                </ul>
                <div class="flex items-center justify-end">
                    <a href="#" class="inline-block mr-4 text-black hover:text-lime-500">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_230_4832)">
                            <path d="M11.5481 19.9999V10.8776H14.6088L15.068 7.32147H11.5481V5.05138C11.5481 4.02211 11.8327 3.32067 13.3104 3.32067L15.1919 3.3199V0.139138C14.8665 0.0968538 13.7496 -9.15527e-05 12.4496 -9.15527e-05C9.735 -9.15527e-05 7.87654 1.65687 7.87654 4.69918V7.32147H4.80652V10.8776H7.87654V19.9999H11.5481Z" fill="currentColor"></path>
                            </g>
                        </svg>                            
                    </a>
                    <a href="#" class="inline-block mr-4 text-black hover:text-lime-500">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="relative pb-12 md:pb-16 bg-orange-50 overflow-hidden">
        <img class="absolute top-0 left-0 h-full w-full" src="flow-assets/sign-in/double-waves.png" alt="">
        <div class="container mx-auto px-4 relative">
            <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>
            <div class="max-w-sm pt-32 lg:pt-40 mx-auto">
                <form action="">
                    <h3 class="text-4xl text-center font-medium mb-10">Create your account</h3>
                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Full name</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">
                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Email</label>
                    <input type="email" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Password</label>

<section class="py-12 lg:py-24 bg-orange-50 overflow-hidden">
        <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 text-teal-900">Testimonials</span>                        
            </div>
            <div class="border-t pt-14">
                <div class="max-w-sm sm:max-w-md md:max-w-none mb-20">
                    <h1 class="font-heading text-5xl sm:text-6xl">What our customers say</h1>
                </div>
                <div class="flex -mx-4 pb-16">
                    <div class="flex-shrink-0 w-full sm:w-100 xl:w-1/3 px-4">
                        <div class="flex flex-col h-full p-10 bg-white shadow-md rounded-2xl">
                            <p class="text-2xl font-medium mb-10">“Flow transformed my energy use. Efficient, green tech, outstanding service!”</p>
                            <div class="mt-auto flex items-center">
                                <img class="block w-14 h-14 rounded-full" src="flow-assets/testimonials/avatar-circle-sm-3.png" alt="">
                                <div class="ml-6">
                                    <span class="block text-xl font-medium">Jenny Wilson</span>
                                    <span class="block text-lg text-gray-700">Solar energy service</span>
                                </div>
                            </div>
                        </div>

<section class="py-12 lg:py-24 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="max-w-lg mx-auto lg:max-w-none">
                <div class="flex flex-wrap -mx-4">
                    <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
                        <div class="max-w-lg">
                            <p class="text-2xl font-medium mb-20">Our commitment to green energy is paving the way for a cleaner, healthier planet. </p>
                            <div>
                                <div x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" :class="{'text-black mb-8': accordion, 'text-gray-500 mb-0': !accordion }" class="cursor-pointer text-gray-500">
                                    <div class="relative"> 
                                        <div class="inline-block relative">
                                            <h4 class="text-5xl">EV charging</h4>
                                            <div x-ref="container" :style="accordion ? 'width: ' + $refs.container.scrollWidth + 'px' : 'opacity: 0'" class="relative transition duration-250">
                                                <div class="absolute bottom-0 left-0 -mb-6 transform translate-y-1/2 w-full border-b-2 border-gray-100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="relative overflow-hidden h-0 pr-5 mt-12 duration-500">
                                        <p class="text-lg text-gray-600 mb-12">Solar panels convert sunlight into electricity. Photovoltaic (PV) cells on these panels capture the energy from the sun and convert it into electrical power.</p>
                                        <a href="#" class="absolute bottom-0 left-0 inline-block text-lg font-medium text-black hover:text-lime-600">Learn more</a>
                                    </div>
                                </div>
                                <div x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" :class="{'text-black mb-8': accordion, 'text-gray-500 mb-0': !accordion }" class="cursor-pointer text-gray-500">
                                    <div class="relative">

<section class="py-12 lg:py-24 bg-orange-50">
        <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="#022C22"></circle>
                </svg>
                <span class="inline-block ml-2 text-sm font-medium text-teal-900">Contact</span>                        
            </div>
            <div class="border-t pt-16">
                <div class="max-w-lg mx-auto lg:max-w-none">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                            <div class="max-w-lg py-7">
                                <h1 class="font-heading text-4xl sm:text-6xl tracking-sm mb-6">Contact us</h1>
                                <p class="text-lg text-gray-700 mb-16">We are here to help you make a first move to greener choice. </p>
                                <form action="">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Full Name</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">
                                    <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">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium">
                                        <span>Company</span> 
                                        <span class="text-gray-700">(optional)</span>
                                    </label>

<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 8 8" 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">FAQ</span>                        
                </div>
                <div class="border-t border-white border-opacity-25 pt-16">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
                            <div class="flex flex-col h-full max-w-sm sm:max-w-lg">
                                <h1 class="font-heading text-4xl sm:text-6xl text-white mb-16">Answers to the frequently asked questions.</h1>
                                <div class="mt-auto">
                                    <a href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-white hover:text-black border border-white hover:bg-white rounded-full transition duration-200">
                                        <span class="mr-2">Conatct us</span>
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M4.75 10H15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                            <path d="M10 4.75L15.25 10L10 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>                                            
                                    </a>
                                </div>
                            </div>

<section class="relative pb-64 md:pb-16 pt-32 sm:pt-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>
        <img class="absolute bottom-0 left-0 w-48 lg:w-64 xl:w-80 rounded-r-2xl" src="flow-assets/sign-in/image-place1.png" alt="">
        <img class="absolute top-0 left-0 ml-24 md:ml-64 w-40 sm:w-48 lg:w-64 xl:w-72 h-24 rounded-b-2xl" src="flow-assets/sign-in/image-place2.png" alt="">
        <img class="hidden sm:block absolute top-0 right-0 mt-20 w-48 lg:w-64 xl:w-72 rounded-l-2xl" src="flow-assets/sign-in/image-place3.png" alt="">
        <img class="hidden md:block absolute bottom-0 right-0 mr-12 xl:mr-20 w-44 lg:w-64 xl:w-72 rounded-t-2xl" src="flow-assets/sign-in/image-place4.png" alt="">
        <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">
        <div class="max-w-2xl mx-auto lg:max-w-none py-16 bg-teal-900 rounded-2xl">
            <div class="container mx-auto px-4">
                <div class="max-w-lg lg:max-w-none mx-auto">
                    <div class="flex flex-wrap items-center -mx-4">
                        <div class="w-full lg:w-1/2 xl:w-3/5 px-4 mb-10 lg:mb-0">
                            <h1 class="font-heading text-4xl xs:text-5xl xl:text-6xl text-white">Your Source for Green Energy Updates</h1>
                        </div>
                        <div class="w-full lg:w-1/2 xl:w-2/5 px-4">
                            <div class="flex flex-col sm:flex-row">
                                <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-black 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>
        </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/footer/waves-lines-left-bottom.png" alt="">
        <div class="container px-4 mx-auto relative">
            <div class="max-w-xl lg:max-w-none mx-auto">
                <div class="flex flex-wrap mb-12 lg:mb-24 -mx-4">
                    <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
                        <a class="inline-block mb-18" href="#">
                            <img class="h-8" src="flow-assets/logos/flow-logo.svg" alt="">
                        </a>
                        <div class="max-w-md">
                            <h5 class="text-xl font-medium mb-4">Your Source for Green Energy Updates</h5>
                            <p class="text-sm text-gray-700 leading-normal 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-12 w-full px-4 py-1 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-12 inline-flex mt-3 sm:mt-0 sm:ml-2 py-1 px-5 items-center justify-center 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>
                    <div class="w-full lg:w-1/2 px-4">
                        <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>

<section class="relative pb-64 md:pb-16 pt-32 sm:pt-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>
        <img class="absolute bottom-0 left-0 w-48 lg:w-64 xl:w-80 rounded-r-2xl" src="flow-assets/sign-in/image-place1.png" alt="">
        <img class="absolute top-0 left-0 ml-24 md:ml-64 w-40 sm:w-48 lg:w-64 xl:w-72 h-24 rounded-b-2xl" src="flow-assets/sign-in/image-place2.png" alt="">
        <img class="hidden sm:block absolute top-0 right-0 mt-20 w-48 lg:w-64 xl:w-72 rounded-l-2xl" src="flow-assets/sign-in/image-place3.png" alt="">
        <img class="hidden md:block absolute bottom-0 right-0 mr-12 xl:mr-20 w-44 lg:w-64 xl:w-72 rounded-t-2xl" src="flow-assets/sign-in/image-place4.png" alt="">
        <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">Create your account</h3>
                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Full name</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">