UI Components – Flow Library

<section x-data="{ activeSlide: 1, slideCount: 2 }" 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 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 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>
                <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-gray-800 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-black 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>

<section x-data="{ activeSlide: 1, slideCount: 3 }" 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 -mx-4">
                <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0">
                    <div class="max-w-lg mx-auto md:mx-0 overflow-hidden rounded-4xl">
                        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex -mx-4 transition-transform duration-500">
                            <img class="block flex-shrink-0 w-full px-4" src="flow-assets/testimonials/photo-lg.png" alt="">
                            <img class="block flex-shrink-0 w-full px-4" src="flow-assets/testimonials/photo-lg.png" alt="">
                            <img class="block flex-shrink-0 w-full px-4" src="flow-assets/testimonials/photo-lg.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-4">
                    <div class="max-w-lg mx-auto md:mr-0 overflow-hidden">
                        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex -mx-4 transition-transform duration-500">
                            <div class="flex-shrink-0 px-4 w-full">
                                <h4 class="text-3xl lg:text-4xl font-medium mb-10">“Flow transformed my energy use. Efficient, green tech, outstanding service!”</h4>
                                <span class="block text-xl font-medium">Jenny Wilson</span>
                                <span class="block mb-12 lg:mb-32 text-lg text-gray-700">Solar energy service</span>
                            </div>
                            <div class="flex-shrink-0 px-4 w-full">
                                <h4 class="text-3xl lg:text-4xl font-medium mb-10">“Efficient, green tech, outstanding service”</h4>
                                <span class="block text-xl font-medium">John Jones</span>
                                <span class="block mb-12 lg:mb-32 text-lg text-gray-700">CE0 Solar Company</span>

<section class="py-12 lg:py-24 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="max-w-lg lg:max-w-2xl mx-auto text-center">
                <img class="block w-32 sm:w-auto mx-auto sm:h-52 mb-16 rounded-md" src="flow-assets/newsletter/square-image-center.png" alt="">
                <h1 class="font-heading text-4xl xs:text-5xl xl:text-6xl mb-6">Your Source for Green Energy Updates</h1>
                <p class="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 w-full lg:max-w-md xl:max-w-xl mx-auto">
                    <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>
    </section>

<div x-data="{ modal: true }" :class="{'hidden': !modal}" class="fixed z-50 bottom-0 w-full p-6 md:p-16">
    <div class="container mx-auto px-4">
        <div class="py-6 px-10 mx-auto w-full bg-teal-900 border rounded-2xl">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
                    <p class="text-white opacity-80">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>
                <div class="w-full lg:w-1/3 px-4 md:text-right">
                    <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 Cookies</a>
                </div>
            </div>
        </div>
    </div>
</div>

<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="mb-16 pb-16 border-b">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full md:w-4/12 lg:w-1/2 px-4 mb-10 md:mb-0">
                            <img class="block w-20 h-20 rounded-full" src="flow-assets/testimonials/avatar-circle-sm-3.png" alt="">
                        </div>
                        <div class="w-full md:w-8/12 lg:w-1/2 px-4">
                            <div class="max-w-md lg:max-w-lg md:ml-auto">
                                <h4 class="text-3xl lg:text-4xl font-medium mb-10">“Flow transformed my energy use. Efficient, green tech, outstanding service!”</h4>
                                <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>
                </div>
                <div class="mb-16 pb-16 border-b">

<section class="p-4">
        <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">About us</span>                        
                </div>
                <div class="border-t border-white border-opacity-25 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-2/3 px-4 mb-12 lg:mb-0">
                                <div class="max-w-xl">
                                    <h1 class="font-heading text-6xl text-white mb-6">Committed to a sustainable future</h1>
                                    <p class="text-lg text-white opacity-80">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>
                                </div>
                            </div>
                            <div class="w-full lg:w-1/3 px-4">
                                <div>
                                    <div class="mb-16">
                                        <span class="block text-5xl text-white">5,000 Mwh</span>
                                        <p class="text-lg text-white opacity-80">Renewable Energy Generated</p>
                                    </div>

<section class="p-4 bg-white">
        <div class="pt-16 pb-24 px-5 xs:px-8 xl:px-12 bg-orange-50 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">Solutions</span>                        
                </div>
                <div class="border-t 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 px-4 mb-16">
                            <div>
                                <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>
                                    <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>
                                <div class="mt-6">
                                    <h5 class="text-2xl font-medium mb-3">EV charging </h5>
                                    <p class="text-gray-700 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 text-lg  font-medium hover:text-teal-700">Read more</a>

<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">Our results</h2>
            </div>
            <div class="max-w-sm md:max-w-6xl mx-auto">
                <div class="flex flex-wrap -mx-4">
                    <div class="w-full md:w-1/2 px-4 mb-8">
                        <div class="relative py-14 px-5 text-center bg-teal-900 rounded-2xl overflow-hidden">
                            <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/stats/waves-sm-left.svg" alt="">
                            <div class="relative">
                                <h5 class="text-2xl xs:text-3xl lg:text-4xl xl:text-5xl text-white mb-4">5,000 Mwh</h5>
                                <span class="text-base lg:text-lg text-white opacity-80">Renewable Energy Generated</span>
                            </div>
                        </div>
                    </div>
                    <div class="w-full md:w-1/2 px-4 mb-8">
                        <div class="relative py-14 px-5 text-center bg-teal-900 rounded-2xl overflow-hidden">
                            <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/stats/waves-sm-right.svg" alt="">
                            <div class="relative">
                                <h5 class="text-2xl xs:text-3xl lg:text-4xl xl:text-5xl text-white mb-4">2,500+</h5>
                                <span class="text-base lg:text-lg text-white opacity-80">Metric Tons of CO2 Reduced</span>
                            </div>
                        </div>

<section class="py-12 lg:py-24 xl:py-32 bg-orange-50 relative overflow-hidden">
        <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/cta/bg-light-lines.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-6xl mx-auto text-center">
                <h1 class="font-heading text-4xl sm:text-6xl md:text-7xl tracking-sm mb-16">Our commitment to green energy is paving the way for a cleaner, healthier planet. </h1>
                <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>
    </section>

<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="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="mb-8 pb-8 border-b">
                    <div class="flex flex-wrap items-center -mx-4">
                        <div class="w-full lg:w-1/12 px-4 mb-6 lg:mb-0">
                            <img class="block w-24 lg:w-full" src="flow-assets/team/square-avatar-1.png" alt="">
                        </div>
                        <div class="w-full sm:w-4/12 lg:w-3/12 px-4 mb-4 sm:mb-0">
                            <span class="text-2xl font-medium">Jenny Wilson</span>
                        </div>
                        <div class="w-full sm:w-6/12 lg:w-6/12 px-4 mb-4 sm:mb-0">
                            <span class="text-2xl font-medium text-gray-700">Senior Sustainability Consultant</span>
                        </div>

<section class="py-12 lg:pt-16 lg:pb-24 bg-orange-50 overflow-hidden">
        <div class="container mx-auto px-4">
            <div class="border-b pb-4 mb-14">
                <div class="flex 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">Careers</span>                        
                </div>
            </div>
            <div class="flex flex-wrap items-center -mx-4 mb-24">
                <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                    <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="w-full lg:w-1/2 px-4">
                <img class="block md:h-80 lg:h-72" src="flow-assets/career/team-members-photos.png" alt="">
                </div>
            </div>
            <div class="flex flex-wrap -mx-4">
                <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
                    <h3 class="text-3xl font-medium">Open positions</h3>
                </div>
                <div class="w-full lg:w-2/3 px-4">

<section class="p-4">
        <div class="relative py-16 px-4 sm:px-8 bg-orange-50 rounded-3xl overflow-hidden">
            <img class="absolute bottom-0 left-0 h-full" src="flow-assets/footer/waves-lines-bg.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/flow-logo.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 font-bold">Platform</h3>
                                <ul>
                                    <li class="mb-4"><a class="inline-block text-black hover:text-lime-600 font-medium" href="#">Solutions</a></li>
                                    <li class="mb-4"><a class="inline-block text-black hover:text-lime-600 font-medium" href="#">How it works</a></li>
                                    <li><a class="inline-block text-black hover:text-lime-600 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-black hover:text-lime-600 font-medium" href="#">Blog</a></li>

<section class="py-12 bg-orange-50">
        <div class="container px-4 mx-auto">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full md:w-1/3 lg:w-1/2 px-4 order-last md:order-first">
                    <img class="block w-full max-w-sm md:max-w-sm mx-auto" src="flow-assets/sign-in/circle-complet-side.png" alt="">
                </div>
                <div class="w-full md:w-2/3 lg:w-1/2 px-4 mb-12 md:mb-0">
                    <div class="max-w-sm mx-auto md:mr-0">
                        <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">
                                <a href="#" x-on:click.prevent="visible = !visible" class="absolute top-1/2 right-0 transform -translate-y-1/2 mr-4">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1.75 10C1.75 10 4.75 4 10 4C15.25 4 18.25 10 18.25 10C18.25 10 15.25 16 10 16C4.75 16 1.75 10 1.75 10Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M10 12.25C11.2426 12.25 12.25 11.2426 12.25 10C12.25 8.75736 11.2426 7.75 10 7.75C8.75736 7.75 7.75 8.75736 7.75 10C7.75 11.2426 8.75736 12.25 10 12.25Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </a>
                            </div>
                            <div class="text-right mb-10">
                                <a href="#" class="inline-block text-sm underline font-medium">Forgot password?</a>

<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">FAQ</span>                        
            </div>
            <div class="border-t 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 mb-16">Answers to the frequently asked questions.</h1>
                            <div class="mt-auto">
                                <div class="mb-8">
                                    <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>
                                        <path d="M13.676 15.5617C11.7951 17.8602 10.6666 20.7983 10.6666 24C10.6666 27.2017 11.7951 30.1398 13.6761 32.4383L18.9201 27.1943C18.3372 26.2694 18 25.174 18 24C18 22.8259 18.3372 21.7306 18.92 20.8057L13.676 15.5617Z" fill="#022C22"></path>
                                        <path d="M15.5616 13.6761L20.8056 18.9201C21.7306 18.3372 22.8259 18 24 18C25.174 18 26.2694 18.3372 27.1943 18.9201L32.4383 13.6761C30.1398 11.7951 27.2017 10.6666 24 10.6666C20.7982 10.6666 17.8601 11.7951 15.5616 13.6761Z" fill="#022C22"></path>
                                        <path d="M34.3239 15.5617L29.0799 20.8057C29.6628 21.7307 30 22.8259 30 24C30 25.174 29.6627 26.2693 29.0799 27.1943L34.3238 32.4383C36.2048 30.1398 37.3333 27.2017 37.3333 24C37.3333 20.7983 36.2048 17.8602 34.3239 15.5617Z" fill="#022C22"></path>
                                        <path d="M32.4382 34.3239L27.1942 29.0799C26.2693 29.6628 25.174 30 24 30C22.8259 30 21.7307 29.6628 20.8057 29.0799L15.5617 34.3239C17.8602 36.2048 20.7983 37.3333 24 37.3333C27.2016 37.3333 30.1397 36.2048 32.4382 34.3239Z" fill="#022C22"></path>
                                    </svg>                            
                                </div>
                                <div>

<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 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">Blog</span>                        
            </div>
            <div class="border-t pt-16">
                <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 border border-teal-900 hover:bg-teal-900 rounded-full transition duration-300">See all</a>
                    </div>
                </div>
            </div>
            <div class="mt-20 flex">
                <a href="#" class="sm:flex-shrink-0 max-w-md md:max-w-xl h-full sm:mr-8 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-87 rounded-t-2xl object-cover" src="flow-assets/blog/image-post2-1.png" alt="">

<section class="py-12 lg:py-24 relative overflow-hidden">
        <img class="absolute top-0 left-0 w-full h-full max-h-116 md:max-h-128" src="flow-assets/contact/waves-bg-light.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-lg mx-auto">
                <div class="text-center mb-20">
                    <h1 class="font-heading text-5xl sm:text-6xl md:text-7xl 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>
                </div>
                <div class="p-8 bg-white rounded-2xl shadow-md">
                    <div>
                         <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>
                            <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">Service</label>
                            <div class="relative w-full mb-8 bg-white rounded-full">
                                <span class="absolute top-1/2 right-0 mr-4 transform -translate-y-1/2">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-12 lg:py-24 bg-teal-900">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="font-medium text-white">Global partners that trusted us</span>
            </div>
            <div class="md:max-w-4xl mx-auto xl:max-w-none">
                <div class="flex flex-wrap justify-between -mx-4 lg:-mx-6 xl:-mx-10 -mb-6">
                    <div class="w-1/3 md:w-1/6 px-4 lg:px-6 xl:px-10 mb-6">
                        <img class="block mx-auto h-7" src="flow-assets/logos/brands/logo-clouds-4.svg" alt="">
                    </div>
                    <div class="w-1/3 md:w-1/6 px-4 lg:px-6 xl:px-10 mb-6">
                        <img class="block mx-auto h-7" src="flow-assets/logos/brands/logo-clouds-3.svg" alt="">
                    </div>
                    <div class="w-1/3 md:w-1/6 px-4 lg:px-6 xl:px-10 mb-6">
                        <img class="block mx-auto h-7" src="flow-assets/logos/brands/logo-clouds-2.svg" alt="">
                    </div>
                    <div class="w-1/3 md:w-1/6 px-4 lg:px-6 xl:px-10 mb-6">
                        <img class="block mx-auto h-7" src="flow-assets/logos/brands/logo-clouds-1.svg" alt="">
                    </div>
                    <div class="w-1/3 md:w-1/6 px-4 lg:px-6 xl:px-10 mb-6">
                        <img class="block mx-auto h-7" src="flow-assets/logos/brands/logo-clouds-4.svg" alt="">
                    </div>
                    <div class="w-1/3 md:w-1/6 px-4 lg:px-6 xl:px-10 mb-6">
                        <img class="block mx-auto h-7" src="flow-assets/logos/brands/logo-clouds-3.svg" alt="">

<section class="py-12 bg-orange-50">
        <div class="container px-4 mx-auto">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full md:w-1/3 lg:w-1/2 px-4 order-last md:order-first">
                    <img class="block w-full max-w-sm md:max-w-sm mx-auto" src="flow-assets/sign-in/circle-complet-side.png" alt="">
                </div>
                <div class="w-full md:w-2/3 lg:w-1/2 px-4 mb-12 md:mb-0">
                    <div class="max-w-sm mx-auto md:mr-0">
                        <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>
                            <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">
                                <a href="#" x-on:click.prevent="visible = !visible" class="absolute top-1/2 right-0 transform -translate-y-1/2 mr-4">
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1.75 10C1.75 10 4.75 4 10 4C15.25 4 18.25 10 18.25 10C18.25 10 15.25 16 10 16C4.75 16 1.75 10 1.75 10Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M10 12.25C11.2426 12.25 12.25 11.2426 12.25 10C12.25 8.75736 11.2426 7.75 10 7.75C8.75736 7.75 7.75 8.75736 7.75 10C7.75 11.2426 8.75736 12.25 10 12.25Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </a>
                            </div>

<section x-data="{toggle: false}" 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="max-w-2xl mb-14 md:mb-20">
                    <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="flex md:flex-row flex-col mb-12 items-start md:items-center justify-end">
                    <div>
                        <div class="flex justify-center items-center">
                            <div class="relative flex h-5 px-0.5 items-center justify-between transition duration-200 ease-linear rounded-full bg-gray-200 shadow">
                                <a x-on:click.prevent="toggle = !toggle" class="inline-block w-4 h-4 bg-white rounded-full" :class="{'bg-white': !toggle, 'bg-transparent': toggle }" href="#"></a>
                                <a x-on:click.prevent="toggle = !toggle" class="inline-block w-4 h-4 rounded-full" :class="{'bg-transparent': !toggle, 'bg-white': toggle }" href="#"></a>
                            </div>
                            <span :class="{'hidden': toggle}" class="ml-4 font-medium">Monthly</span>
                            <span :class="{'hidden': !toggle}" class="hidden ml-4 font-medium">Annually</span>
                        </div>
                    </div>
                    <span class="inline-block mt-5 md:mt-0 md:ml-6 px-2 text-sm leading-6 text-teal-800 font-medium bg-lime-50 rounded-full">SAVE 15% with annual billing</span>
                </div>
                <div class="flex flex-wrap -mx-4 mb-20">
                    <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                        <div class="relative xl:h-87 p-8 mb-10 bg-white rounded-2xl shadow-md overflow-hidden">
                            <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/pricing/waves-pricing-card.svg" alt="">

<section class="py-52 lg:py-24 bg-orange-50 relative overflow-hidden">
        <img class="absolute bottom-0 right-0 mr-10 w-40 lg:w-1/6 max-w-xs xl:px-4" src="flow-assets/newsletter/float-bottom-image.png" alt="">
        <img class="absolute top-0 left-0 ml-10 w-40 lg:w-1/6 max-w-xs xl:px-4" src="flow-assets/newsletter/float-top-image.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-lg xl:max-w-2xl mx-auto text-center">
                <h1 class="font-heading text-4xl xs:text-5xl xl:text-6xl mb-6">Your Source for Green Energy Updates</h1>
                <p class="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 w-full lg:max-w-md xl:max-w-xl mx-auto">
                    <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>
    </section>