<section class="py-20" x-data="{ activeSlide: 1, slideCount: 4 }">
<div class="container mx-auto px-4">
<div class="flex flex-wrap -m-4">
<div class="w-full lg:w-1/2 p-4">
<div class="lg:max-w-md">
<div class="mb-6 relative" style="height: 445px;">
<img class="absolute bottom-0 left-0 z-10 -ml-20" src="cronos-assets/elements/green-light-left.svg" alt="">
<img class="absolute top-0 right-0 z-10" src="cronos-assets/elements/dark-green-dark-warning.svg" alt="">
<img class="w-full object-cover h-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80" alt="">
</div>
<div class="flex justify-center gap-2">
<button x-on:click="activeSlide=1" class="w-3 h-3 bg-gray-100 transform rotate-45" :class="{'bg-green-500': activeSlide==1, 'bg-gray-100': activeSlide!=1}"></button>
<button x-on:click="activeSlide=2" class="w-3 h-3 bg-gray-100 transform rotate-45" :class="{'bg-green-500': activeSlide==2, 'bg-gray-100': activeSlide!=2}"></button>
<button x-on:click="activeSlide=3" class="w-3 h-3 bg-gray-100 transform rotate-45" :class="{'bg-green-500': activeSlide==3, 'bg-gray-100': activeSlide!=3}"></button>
<button x-on:click="activeSlide=4" class="w-3 h-3 bg-gray-100 transform rotate-45" :class="{'bg-green-500': activeSlide==4, 'bg-gray-100': activeSlide!=4}"></button>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 p-4">
<img class="mb-8 w-16" src="cronos-assets/elements/quote.svg" alt="">
<div class="overflow-hidden">
<div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex -mx-4 transition-transform duration-500" style="transform: translateX(-0%)">
<div class="flex-shrink-0 px-4 w-full">
<h2 class="font-heading text-4xl lg:text-5xl font-bold mb-4">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
<p class="text-gray-600 mb-8">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
<p class="text-green-500 font-bold text-xl mb-1">Danny Bailey</p>
<p class="font-bold">CEO & Founder</p>
</div>
<div class="flex-shrink-0 px-4 w-full">
<h2 class="font-heading text-4xl lg:text-5xl font-bold mb-4">Unlock Your Business Potential with Strategic Growth Subtitle</h2>
<p class="text-gray-600 mb-8">Discover the key strategies to elevate your brand and drive success. Take the leap towards expanding your market presence today.</p>
<p class="text-green-500 font-bold text-xl mb-1">Darrell Steward</p>
<p class="font-bold">Founder</p>
</div>
<div class="flex-shrink-0 px-4 w-full">
<h2 class="font-heading text-4xl lg:text-5xl font-bold mb-4">Master the Art of Branding for Business Success Subtitle</h2>
<p class="text-gray-600 mb-8">Ready to enhance your brand’s influence? Learn proven techniques to strengthen your business and accelerate growth</p>
<p class="text-green-500 font-bold text-xl mb-1">Esther Howards</p>
<p class="font-bold">Chief Operating Officer</p>
</div>
<div class="flex-shrink-0 px-4 w-full">
<h2 class="font-heading text-4xl lg:text-5xl font-bold mb-4">Transform Your Brand and Ignite Business Growth Subtitle</h2>
<p class="text-gray-600 mb-8">Want to take your brand to the next level? Explore actionable insights to fuel your company's journey to success.</p>
<p class="text-green-500 font-bold text-xl mb-1">Michael Johnson</p>
<p class="font-bold">Chief Technology Officer</p>
</div>
</div>
</div>
</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
