\n 100+ clients getting better design, faster.\n

\n \n

\n $\"User\"$ \n

\n Book a 15-min intro call\n

\n Available now\n

\n \n

\n\n \n

\n\n

\n\n\nchange the content","applicationCategory":"DesignApplication","applicationSubCategory":"UI Component","image":"https://assets.landinghero.app/library/thumbnails/THEME_PROJECT_COMPONENTCTA_10/1770187122037_3c9ce8e9d059a181.jpg","url":"https://www.landinghero.ai/library/e620fd9a-0878-482b-91d2-33bdc87ceddf","author":{"@type":"Person","name":"LandingHero"},"publisher":{"@type":"Organization","name":"LandingHero","url":"https://www.landinghero.ai"},"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"datePublished":"2026-02-04T06:38:43.449Z","dateModified":"2026-02-24T07:13:00.921Z"}

CTA section with animated circular pattern

Category: CTA

Below is the component for your context <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>Clients Showcase</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Source+Serif+4:ital,wght@1,600&display=swap" rel="stylesheet"> <style type="text/tailwindcss">@tailwind base; @tailwind components; @tailwind utilities; @layer base { body { @apply bg-neutral-background antialiased; } } .clients-mask { mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); } .progressive-blur { backdrop-filter: blur(8px); mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)); }</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = { important: '#app-root', theme: { extend: { colors: { 'brand-primary': 'rgb(0, 0, 0)', 'neutral-background': 'rgb(240, 240, 240)', 'text-primary': 'rgb(0, 0, 0)', 'text-secondary': 'rgb(152, 152, 152)', }, fontFamily: { 'inter': ['Inter', 'sans-serif'], 'serif-styling': ['Source Serif 4', 'serif'], }, animation: { 'rotate-slow': 'rotate-slow 60s linear infinite', }, keyframes: { 'rotate-slow': { '0%': { transform: 'rotate(0deg)' }, '100%': { transform: 'rotate(360deg)' }, } } }, }, plugins: [], }</script></head> <body id="app-root" class="font-inter bg-neutral-background overflow-x-hidden"> <main><section id="clients" class="relative w-full h-[760px] flex items-center justify-center overflow-hidden bg-neutral-background">  <div class="absolute inset-0 flex items-center justify-center pointer-events-none overflow-visible"> <div class="relative w-[1130px] h-[1130px] animate-rotate-slow">  <div class="absolute inset-0 flex justify-center rotate-[0deg]"> <div class="flex flex-col justify-between h-full py-0"> <img src="https://framerusercontent.com/images/D4OlAav8RISd0opp4Z1aT4ypRXw.png?scale-down-to=512" class="w-[110px] h-[110px] rounded-full border-[6px] border-white shadow-xl object-cover"> <img src="https://framerusercontent.com/images/QbjA7E37T5SDQiAS2aDV1zMrG4.png?scale-down-to=512" class="w-[110px] h-[110px] rounded-full border-[6px] border-white shadow-xl object-cover rotate-180"> </div> </div> <div class="absolute inset-0 flex justify-center rotate-[30deg]"> <div class="flex flex-col justify-between h-full py-0"> <img src="https://framerusercontent.com/images/w5X4QRiIXVeXf71DL6mW0nV6Awk.png?scale-down-to=512" class="w-[110px] h-[110px] rounded-full border-[6px] border-white shadow-xl object-cover"> <img src="https://framerusercontent.com/images/UT4fxQBnxf542T5Cf7zZOvBxy0.png?scale-down-to=512" class="w-[110px] h-[110px] rounded-full border-[6px] border-white shadow-xl object-cover rotate-180"> </div> </div> <div class="absolute inset-0 flex justify-center rotate-[60deg]"> <div class="flex flex-col justify-between h-full py-0"> <img src="https://framerusercontent.com/images/4UX9uXT3N0WRExPOcc1r8bpVQAk.png?scale-down-to=512" class="w-[110px] h-[110px] rounded-full border-[6px] border-white shadow-xl object-cover"> <img src="https://framerusercontent.com/images/GSFkssTRojMMfTCPqH1HENDnw.png?scale-down-to=512" class="w-[110px] h-[110px] rounded-full border-[6px] border-white shadow-xl object-cover rotate-180"> </div> </div> <div class="absolute inset-0 flex justify-center rotate-[90deg]"> <div class="flex flex-col justify-between h-full py-0"> <img src="https://framerusercontent.com/images/pSEmRq7TZ5niunpklVk0dvh1mDA.png?scale-down-to=512" class="w-[110px] h-[110px] rounded-full border-[6px] border-white shadow-xl object-cover"> <img src="https://framerusercontent.com/images/WdMlO6P4eyTomKkSRBDtGLAio4.png?scale-down-to=512" class="w-[110px] h-[110px] rounded-full border-[6px] border-white shadow-xl object-cover rotate-180"> </div> </div> <div class="absolute inset-0 flex justify-center rotate-[120deg]"> <div class="flex flex-col justify-between h-full py-0"> <img src="https://framerusercontent.com/images/AcrDBNPoA5kazwDFtUC2IeoPoo.png?scale-down-to=512" class="w-[110px] h-[110px] rounded-full border-[6px] border-white shadow-xl object-cover"> <img src="https://framerusercontent.com/images/AcrDBNPoA5kazwDFtUC2IeoPoo.png?scale-down-to=512" class="w-[110px] h-[110px] rounded-full border-[6px] border-white shadow-xl object-cover rotate-180"> </div> </div> <div class="absolute inset-0 flex justify-center rotate-[150deg]"> <div class="flex flex-col justify-between h-full py-0"> <img src="https://framerusercontent.com/images/d8p3LHFKtLnBbQ65oGYA48cZwYI.png?scale-down-to=512" class="w-[110px] h-[110px] rounded-full border-[6px] border-white shadow-xl object-cover"> <img src="https://framerusercontent.com/images/d8p3LHFKtLnBbQ65oGYA48cZwYI.png?scale-down-to=512" class="w-[110px] h-[110px] rounded-full border-[6px] border-white shadow-xl object-cover rotate-180"> </div> </div> </div> </div>  <div class="relative z-10 flex flex-col items-center justify-center text-center max-w-[559px] gap-8"> <h2 class="text-[56px] font-semibold tracking-[-0.07em] leading-[120%] text-brand-primary"> 100+ clients getting <span class="font-serif-styling italic tracking-[-0.08em]">better</span> design, faster. </h2> <div class="framer-ypt11t-container"> <a href="./#book-a-call" class="flex items-center gap-3 bg-white px-2 py-2 rounded-[50px] shadow-xl border-[4px] border-white transition-transform hover:scale-105"> <div class="w-10 h-10 rounded-full overflow-hidden shrink-0"> <img src="https://framerusercontent.com/images/hfneFL6CHBi5BnNvCeOaqU9HqE4.png?scale-down-to=512" alt="User" class="w-full h-full object-cover"> </div> <div class="flex flex-col pr-6"> <span class="text-sm font-semibold tracking-[-0.56px] text-brand-primary leading-tight">Book a 15-min intro call</span> <div class="flex items-center gap-1"> <div class="w-2 h-2 rounded-full bg-green-500"></div> <span class="text-xs font-semibold tracking-[-0.72px] text-text-secondary leading-none">Available now</span> </div> </div> </a> </div> </div>  <div class="absolute bottom-0 left-0 right-0 h-[178px] progressive-blur z-20"></div> </section> <script> document.addEventListener('DOMContentLoaded', () => { // Logic for keeping individual images upright while the parent rotates const images = document.querySelectorAll('#clients img'); const parent = document.querySelector('.animate-slow-rotate'); // Actually, simplified approach: we can use a CSS override or just let them rotate // since the design typically allows the logos to follow the orbit. // The provided HTML doesn't explicitly counter-rotate them, but gives them specific initial rotations. }); </script></main> </body></html> change the content

Created by: LandingHero

CTA section with animated circular pattern

LandingHero