<section class="py-12 lg:py-24 overflow-hidden">
<div class="container mx-auto px-4">
<div class="max-w-6xl mx-auto mb-24 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 class="flex justify-center">
<div class="flex-shrink-0 h-full max-w-xs sm:max-w-md md:max-w-xl mr-4 sm:mr-8">
<img class="block w-72 h-96 object-cover rounded-3xl" src="flow-assets/about/about-image2.png" alt="">
</div>
<div class="flex-shrink-0 h-full max-w-xs sm:max-w-md md:max-w-xl mr-4 sm:mr-8">
<img class="block w-72 h-96 object-cover rounded-3xl" src="flow-assets/about/about-image3.png" alt="">
</div>
<div class="flex-shrink-0 h-full max-w-xs sm:max-w-md md:max-w-xl mr-4 sm:mr-8">
<img class="block w-72 h-96 object-cover rounded-3xl" src="flow-assets/about/about-image4.png" alt="">
</div>
<div class="flex-shrink-0 h-full max-w-xs sm:max-w-md md:max-w-xl mr-4 sm:mr-8">
<img class="block w-72 h-96 object-cover rounded-3xl" src="flow-assets/about/about-image2.png" alt="">
</div>
<div class="hidden md:block sm:flex-shrink-0 h-full max-w-md md:max-w-xl mr-4 sm:mr-8">
<img class="block w-72 h-96 object-cover rounded-3xl" src="flow-assets/about/about-image3.png" alt="">
</div>
<div class="hidden md:block sm:flex-shrink-0 h-full max-w-md md:max-w-xl mr-4 sm:mr-8">
<img class="block w-72 h-96 object-cover rounded-3xl" src="flow-assets/about/about-image4.png" alt="">
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
