Explore Tailwind CSS feature section examples to showcase the key features of your product or service. These blocks offer a range of layouts and styles, making it easy to present information clearly and effectively.
<section class="px-6 py-20 max-w-7xl mx-auto">
<div class="text-center max-w-2xl mx-auto mb-12">
<h2 class="text-4xl sm:text-5xl mb-6">Build Experiences That Feel Effortless from Start to Finish</h2>
<p class="text-lg text-muted">Create applications that feel smooth and natural while helping users stay focused and move forward with clarity at every moment</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- card 1 -->
<div class="card p-6 rounded-2xl border-subtle hover:border-primary-light">
<div class="flex items-center justify-center size-12 rounded-lg bg-primary-lighter text-primary mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M6.75.875c0-.345.28-.625.625-.625h.25a2.375 2.375 0 1 1 0 4.75h-7a.625.625 0 1 1 0-1.25h7a1.125 1.125 0 0 0 0-2.25h-.25A.625.625 0 0 1 6.75.875M1 9.625C1 9.28 1.28 9 1.625 9h5.5a2.375 2.375 0 1 1 0 4.75h-.25a.625.625 0 1 1 0-1.25h.25a1.125 1.125 0 0 0 0-2.25h-5.5A.625.625 0 0 1 1 9.625m1.125-3.25a.625.625 0 1 0 0 1.25h9.5a1.125 1.125 0 0 1 0 2.25h-.25a.625.625 0 1 0 0 1.25h.25a2.375 2.375 0 1 0 0-4.75z" clip-rule="evenodd"></path></svg>
</div>
<h3 class="text-lg font-semibold mb-2">Effortless User Flow</h3>
<p class="text-base text-muted mb-6">Guide users step by step with a structure that feels natural and predictable.</p>
<a href="#" class="font-semibold no-underline">Learn more →</a>
</div>
<!-- card 2 -->
<div class="card p-6 rounded-2xl border-subtle hover:border-primary-light">
<div class="flex items-center justify-center size-12 rounded-lg bg-warning-lighter text-warning mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24"><path fill="currentColor" d="M16.41 10.41a.998.998 0 0 0 0-1.82l-4.15-1.84l-1.84-4.15a.99.99 0 0 0-.91-.59c-.4-.03-.75.22-.92.58L6.74 6.6L2.56 8.61c-.35.17-.57.53-.57.92s.24.74.59.9l4.15 1.84l1.84 4.15a.998.998 0 0 0 1.82 0l1.84-4.15l4.15-1.84Zm-5.82.68L9.5 13.53l-1.09-2.44a.98.98 0 0 0-.51-.51L5.37 9.46l2.55-1.23c.21-.1.38-.27.47-.48l1.08-2.33l1.1 2.48c.1.23.28.41.51.51l2.44 1.09l-2.44 1.09c-.23.1-.41.28-.51.51Zm11.01 5.3l-2.77-1.23l-1.23-2.77a.68.68 0 0 0-.6-.4c-.27-.02-.5.15-.61.39l-1.23 2.67l-2.78 1.34c-.23.11-.38.35-.38.61s.16.49.4.6l2.77 1.23l1.23 2.77a.663.663 0 0 0 1.22 0l1.23-2.77l2.77-1.23c.24-.11.4-.35.4-.61s-.16-.5-.4-.61ZM7.76 18.63l-1.66-.74l-.74-1.66a.41.41 0 0 0-.36-.24c-.16-.01-.3.09-.37.23l-.74 1.6l-1.67.8c-.14.07-.23.21-.23.37s.1.3.24.36l1.66.74l.74 1.66a.404.404 0 0 0 .74 0l.74-1.66l1.66-.74a.404.404 0 0 0 0-.74Z"></path></svg>
</div>
<h3 class="text-lg font-semibold mb-2">Meaningful Feedback</h3>
<p class="text-base text-muted mb-6">Every interaction responds clearly, helping users stay confident and in control.</p>
<a href="#" class="font-semibold no-underline">Learn more →</a>
</div>
<!-- card 3 -->
<div class="card p-6 rounded-2xl border-subtle hover:border-primary-light">
<div class="flex items-center justify-center size-12 rounded-lg bg-danger-lighter text-danger mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24"><path fill="currentColor" d="M20.97 7.27a.996.996 0 0 0 0-1.41l-2.83-2.83a.996.996 0 0 0-1.41 0l-4.49 4.49l-3.89-3.89c-.78-.78-2.05-.78-2.83 0l-1.9 1.9c-.78.78-.78 2.05 0 2.83l3.89 3.89L3 16.76V21h4.24l4.52-4.52l3.89 3.89c.95.95 2.23.6 2.83 0l1.9-1.9c.78-.78.78-2.05 0-2.83l-3.89-3.89zM5.04 6.94l1.89-1.9L8.2 6.31L7.02 7.5l1.41 1.41l1.19-1.19l1.2 1.2l-1.9 1.9zm11.23 7.44l-1.19 1.19l1.41 1.41l1.19-1.19l1.27 1.27l-1.9 1.9l-3.89-3.89l1.9-1.9zM6.41 19H5v-1.41l9.61-9.61l1.3 1.3l.11.11zm9.61-12.44l1.41-1.41l1.41 1.41l-1.41 1.41z"></path></svg>
</div>
<h3 class="text-lg font-semibold mb-2">Flexible Architecture</h3>
<p class="text-base text-muted mb-6">Adapt your UI easily as new features and requirements evolve.</p>
<a href="#" class="font-semibold no-underline">Learn more →</a>
</div>
<!-- card 4 -->
<div class="card p-6 rounded-2xl border-subtle hover:border-primary-light">
<div class="flex items-center justify-center size-12 rounded-lg bg-secondary-lighter text-secondary mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24"><path fill="currentColor" d="M3 21q-.825 0-1.412-.587T1 19v-2q0-.825.588-1.412T3 15h6q.825 0 1.413.588T11 17v2q0 .825-.587 1.413T9 21zm12 0q-.825 0-1.412-.587T13 19V5q0-.825.588-1.412T15 3h6q.825 0 1.413.588T23 5v14q0 .825-.587 1.413T21 21zM3 19h6v-2H3zm12 0h6V5h-6zm3-1q.425 0 .713-.288T19 17t-.288-.712T18 16t-.712.288T17 17t.288.713T18 18M3 13q-.825 0-1.412-.587T1 11V5q0-.825.588-1.412T3 3h6q.825 0 1.413.588T11 5v6q0 .825-.587 1.413T9 13zm4-5q.425 0 .713-.288T8 7t-.288-.712T7 6t-.712.288T6 7t.288.713T7 8m-4 2.675L5 8l2.25 3H9V5H3zM6 8"></path></svg>
</div>
<h3 class="text-lg font-semibold mb-2">Consistent Layouts</h3>
<p class="text-base text-muted mb-6">Maintain clarity and structure across every screen and component.</p>
<a href="#" class="font-semibold no-underline">Learn more →</a>
</div>
<!-- card 5 -->
<div class="card p-6 rounded-2xl border-subtle hover:border-primary-light">
<div class="flex items-center justify-center size-12 rounded-lg bg-info-lighter text-info mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24"><path fill="currentColor" d="m11 14.5l-5.925-.75q-.625-.075-.813-.675t.263-1.025l10.225-9.8q.125-.125.3-.187T15.525 2q.5 0 .763.425t.012.875L13 9.5l5.925.75q.625.075.813.675t-.263 1.025L9.25 21.75q-.125.125-.3.188T8.475 22q-.5 0-.763-.425T7.7 20.7zm1.55 1.325l4.025-3.85l-6.725-.85L11.425 8.2l-4 3.85l6.7.825zM12 12"></path></svg>
</div>
<h3 class="text-lg font-semibold mb-2">Fast Interactions</h3>
<p class="text-base text-muted mb-6">Reduce delays and keep workflows smooth across all touchpoints.</p>
<a href="#" class="font-semibold no-underline">Learn more →</a>
</div>
<!-- card 6 -->
<div class="card p-6 rounded-2xl border-subtle hover:border-primary-light">
<div class="flex items-center justify-center size-12 rounded-lg bg-success-lighter text-success mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24"><path fill="currentColor" d="M21.92 6.62a1 1 0 0 0-.54-.54A1 1 0 0 0 21 6h-5a1 1 0 0 0 0 2h2.59L13 13.59l-3.29-3.3a1 1 0 0 0-1.42 0l-6 6a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0L9 12.41l3.29 3.3a1 1 0 0 0 1.42 0L20 9.41V12a1 1 0 0 0 2 0V7a1 1 0 0 0-.08-.38"></path></svg>
</div>
<h3 class="text-lg font-semibold mb-2">Built to Scale</h3>
<p class="text-base text-muted mb-6">Create a foundation that supports long-term product growth.</p>
<a href="#" class="font-semibold no-underline">Learn more →</a>
</div>
</div>
</section>
<section class="px-6 py-20 max-w-3xl lg:max-w-7xl mx-auto">
<div class="grid lg:grid-cols-2 gap-20 items-center">
<!-- left content -->
<div>
<h2 class="text-4xl sm:text-5xl mb-3">Everything you need to build better products</h2>
<p class="text-lg text-muted max-w-xl mb-10">A thoughtfully crafted system that helps you design faster, ship confidently, and scale without friction.</p>
<div class="space-y-3 mb-10">
<div class="flex gap-5">
<div class="flex items-center justify-center size-12 rounded-xl bg-primary-lighter text-primary shrink-0">
<svg class="size-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
<path d="M7 22h10M2 17V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2Z"></path>
<path d="m9 10.5l2 2l4-4"></path>
</svg>
</div>
<div>
<h3 class="text-base font-semibold">Intuitive by design</h3>
<p class="text-sm text-muted">Reduce cognitive load and guide users naturally through every flow.</p>
</div>
</div>
<div class="flex gap-5">
<div class="flex items-center justify-center size-12 rounded-xl bg-secondary-lighter text-secondary shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24"><path fill="currentColor" d="m11 14.5l-5.925-.75q-.625-.075-.813-.675t.263-1.025l10.225-9.8q.125-.125.3-.187T15.525 2q.5 0 .763.425t.012.875L13 9.5l5.925.75q.625.075.813.675t-.263 1.025L9.25 21.75q-.125.125-.3.188T8.475 22q-.5 0-.763-.425T7.7 20.7zm1.55 1.325l4.025-3.85l-6.725-.85L11.425 8.2l-4 3.85l6.7.825zM12 12"></path></svg>
</div>
<div>
<h3 class="text-base font-semibold">Lightning-fast performance</h3>
<p class="text-sm text-muted">Built for speed to keep users engaged without friction or delay.</p>
</div>
</div>
<div class="flex gap-5">
<div class="flex items-center justify-center size-12 rounded-xl bg-success-lighter text-success shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24"><path fill="currentColor" d="M21.92 6.62a1 1 0 0 0-.54-.54A1 1 0 0 0 21 6h-5a1 1 0 0 0 0 2h2.59L13 13.59l-3.29-3.3a1 1 0 0 0-1.42 0l-6 6a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0L9 12.41l3.29 3.3a1 1 0 0 0 1.42 0L20 9.41V12a1 1 0 0 0 2 0V7a1 1 0 0 0-.08-.38"></path></svg>
</div>
<div>
<h3 class="text-base font-semibold">Built to scale</h3>
<p class="text-sm text-muted">Grow your product without redesigning your foundation.</p>
</div>
</div>
</div>
<div class="flex items-center gap-3">
<a href="#" class="btn btn-primary">Get started</a>
<a href="#" class="btn">Explore all features</a>
</div>
</div>
<!-- right content -->
<div class="relative aspect-4/3 max-w-xl">
<img class="size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1532102235608-dc8fc689c9ab?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<div class="absolute bottom-3 left-3 lg:-bottom-6 lg:-left-6 card p-4 w-48 border-primary-light rounded-xl">
<p class="text-sm font-semibold mb-2">+32% faster workflows</p>
<span class="text-xs text-muted">Measured after UI improvements</span>
</div>
</div>
</div>
</section>
<div class="px-6 py-20 max-w-7xl mx-auto">
<div class="max-w-3xl mb-12">
<h1 class="text-4xl sm:text-5xl mb-6">Design Experiences That Feel Natural from the First Interaction</h1>
<p class="text-lg text-muted">Create applications that guide users smoothly through every step and help them stay focused with clarity and confidence</p>
</div>
<div class="grid gap-6 grid-cols-12">
<!-- card 1 -->
<div class="col-span-12 lg:col-span-8 card p-6 bg-default rounded-xl rounded-t-3xl lg:rounded-tr-xl border-subtle">
<h6 class="mb-2 text-default font-semibold">Seamless user experience</h6>
<p class="mb-6 text-muted max-w-md">Designed to guide users naturally through every step without friction or confusion</p>
<img class="h-80 w-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1728044849280-10a1a75cff83?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="feature_1" />
</div>
<!-- card 2 -->
<div class="col-span-12 md:col-span-6 lg:col-span-4 card p-6 bg-default rounded-xl lg:rounded-tr-3xl border-subtle">
<h6 class="mb-2 text-default font-semibold">Fast performance</h6>
<p class="mb-6 text-muted">Optimized for fast load times and smooth interactions across all devices</p>
<img class="h-80 w-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1625296276703-3fbc924f07b5?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="feature_2" />
</div>
<!-- card 3 -->
<div class="col-span-12 md:col-span-6 lg:col-span-4 card p-6 bg-default rounded-xl lg:rounded-bl-3xl border-subtle">
<h6 class="mb-2 text-default text-xl">Built for real world projects</h6>
<p class="mb-6 text-muted">Adapt easily as your application grows and evolves over time</p>
<img class="h-80 w-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1535957998253-26ae1ef29506?q=80&w=872&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="feature_3" />
</div>
<!-- card 4 -->
<div class="col-span-12 lg:col-span-8 card p-6 bg-default rounded-xl rounded-b-3xl lg:rounded-bl-xl border-subtle">
<h6 class="mb-2 text-default font-semibold">Clean interface design</h6>
<p class="mb-6 text-muted max-w-md">Crafted with a focus on clarity and simplicity to create a distraction free and user friendly experience</p>
<img class="h-80 w-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1686061594225-3e92c0cd51b0?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="feature_4" />
</div>
</div>
</div>
<div class="px-6 py-20 max-w-7xl mx-auto">
<div class="max-w-3xl text-center mx-auto mb-16">
<h2 class="text-4xl sm:text-5xl mb-6">
A better way to design & build
<span class="text-primary">digital experiences</span>
</h2>
<p class="text-base text-muted max-w-xl mx-auto">Create applications that feel intuitive and guide users through every step with clarity, purpose, and surgical precision.</p>
</div>
<div class="flex flex-col lg:flex-row gap-6">
<div class="flex-1 card rounded-2xl p-6 sm:p-8 border-subtle group">
<h3 class="text-default text-2xl mb-4">Experience that feels natural</h3>
<p class="text-base mb-6">Every detail is crafted to help users move forward without friction. We focus on the tiny interactions that make a product feel "right."</p>
<div class="h-80 rounded-xl overflow-hidden"><img class="size-full object-cover transition duration-700 ease-out group-hover:scale-105 group-hover:rotate-1" src="https://images.unsplash.com/photo-1594823274242-19036bf455e9?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="User Experience Design" /></div>
</div>
<div class="flex-1 flex flex-col gap-4">
<div class="card p-6 sm:flex-row gap-4 rounded-2xl border-subtle grow">
<div class="flex items-center justify-center size-10 rounded-lg bg-primary-lighter text-primary shrink-0">
<svg class="size-4.5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_36849_49075)">
<path d="M9.61991 1.63527C9.42449 1.54613 9.2122 1.5 8.99741 1.5C8.78262 1.5 8.57033 1.54613 8.37491 1.63527L1.94741 4.56027C1.81432 4.61895 1.70117 4.71507 1.62173 4.83691C1.54229 4.95875 1.5 5.10107 1.5 5.24652C1.5 5.39197 1.54229 5.53428 1.62173 5.65613C1.70117 5.77797 1.81432 5.87408 1.94741 5.93277L8.38241 8.86527C8.57783 8.95441 8.79012 9.00054 9.00491 9.00054C9.2197 9.00054 9.43199 8.95441 9.62741 8.86527L16.0624 5.94027C16.1955 5.88158 16.3087 5.78547 16.3881 5.66363C16.4675 5.54178 16.5098 5.39947 16.5098 5.25402C16.5098 5.10857 16.4675 4.96625 16.3881 4.84441C16.3087 4.72257 16.1955 4.62645 16.0624 4.56777L9.61991 1.63527Z" stroke="#0074E6" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.5 9C1.49965 9.14345 1.54044 9.28399 1.61754 9.40496C1.69464 9.52593 1.80482 9.62225 1.935 9.6825L8.385 12.615C8.5794 12.703 8.79035 12.7486 9.00375 12.7486C9.21715 12.7486 9.4281 12.703 9.6225 12.615L16.0575 9.69C16.1903 9.63033 16.3028 9.53332 16.3814 9.4108C16.4599 9.28828 16.5012 9.14555 16.5 9" stroke="#0074E6" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.5 12.75C1.49965 12.8935 1.54044 13.034 1.61754 13.155C1.69464 13.2759 1.80482 13.3723 1.935 13.4325L8.385 16.365C8.5794 16.453 8.79035 16.4986 9.00375 16.4986C9.21715 16.4986 9.4281 16.453 9.6225 16.365L16.0575 13.44C16.1903 13.3803 16.3028 13.2833 16.3814 13.1608C16.4599 13.0383 16.5012 12.8955 16.5 12.75" stroke="#0074E6" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<defs>
<clipPath id="clip0_36849_49075"><rect width="18" height="18" fill="white"></rect></clipPath>
</defs>
</svg>
</div>
<div>
<h3 class="text-default text-lg font-semibold mb-2">Clear visual hierarchy</h3>
<p class="text-base">Present information in a way that feels structured and easy to follow, reducing cognitive load.</p>
</div>
</div>
<div class="card p-6 sm:flex-row gap-4 rounded-2xl border-subtle grow">
<div class="flex items-center justify-center size-10 rounded-lg bg-secondary-lighter text-secondary shrink-0">
<svg class="size-4.5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.75 1.5H5.25C4.42157 1.5 3.75 2.17157 3.75 3V15C3.75 15.8284 4.42157 16.5 5.25 16.5H12.75C13.5784 16.5 14.25 15.8284 14.25 15V3C14.25 2.17157 13.5784 1.5 12.75 1.5Z" stroke="#68279D" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9 13.5H9.0075" stroke="#68279D" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div>
<h3 class="text-default text-lg font-semibold mb-2">Responsive interaction design</h3>
<p class="text-base">Ensure every interaction feels smooth across different devices, from mobile gestures to desktop hovers.</p>
</div>
</div>
<div class="card p-6 sm:flex-row gap-4 rounded-2xl border-subtle grow">
<div class="flex items-center justify-center size-10 rounded-lg bg-success-lighter text-success shrink-0">
<svg class="size-4.5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 2.25H11.25C10.8358 2.25 10.5 2.58579 10.5 3V6.75C10.5 7.16421 10.8358 7.5 11.25 7.5H15C15.4142 7.5 15.75 7.16421 15.75 6.75V3C15.75 2.58579 15.4142 2.25 15 2.25Z" stroke="#026A44" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7.5 15.75V6C7.5 5.80109 7.42098 5.61032 7.28033 5.46967C7.13968 5.32902 6.94891 5.25 6.75 5.25H3C2.80109 5.25 2.61032 5.32902 2.46967 5.46967C2.32902 5.61032 2.25 5.80109 2.25 6V15C2.25 15.1989 2.32902 15.3897 2.46967 15.5303C2.61032 15.671 2.80109 15.75 3 15.75H12C12.1989 15.75 12.3897 15.671 12.5303 15.5303C12.671 15.3897 12.75 15.1989 12.75 15V11.25C12.75 11.0511 12.671 10.8603 12.5303 10.7197C12.3897 10.579 12.1989 10.5 12 10.5H2.25" stroke="#026A44" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div>
<h3 class="text-default text-lg font-semibold mb-2">Flexible structure for growth</h3>
<p class="text-base">A modular architecture that adapts as your product scales and your user base expands.</p>
</div>
</div>
</div>
</div>
</div>
<div class="px-6 py-20 max-w-7xl mx-auto">
<div class="max-w-2xl mx-auto text-center mb-16">
<h2 class="text-4xl md:text-5xl mb-8">
Everything you need to ship
<span class="text-primary">world-class</span>
products.
</h2>
<p class="text-lg md:text-xl text-muted max-w-xl mx-auto">A cohesive system designed to eliminate friction and elevate the standard of your digital interactions.</p>
</div>
<div class="grid lg:grid-cols-12 items-center gap-16">
<div class="lg:col-span-3 space-y-16 order-2 lg:order-1">
<div class="group">
<div class="flex items-center gap-4 mb-4">
<span class="text-4xl font-black text-subtle/50 transition group-hover:text-primary/50">01</span>
<div class="h-px flex-1 bg-linear-to-r from-primary/50 to-transparent lg:hidden"></div>
</div>
<h4 class="text-xl mb-2 group-hover:text-primary transition">Visual Structure</h4>
<p class="text-sm sm:text-base text-muted">Intentional layouts that prioritize content and guide the eye naturally through the interface.</p>
</div>
<div class="group">
<div class="flex items-center gap-4 mb-4">
<span class="text-4xl font-black text-subtle/50 transition group-hover:text-primary/50">02</span>
<div class="h-px flex-1 bg-linear-to-r from-primary/50 to-transparent lg:hidden"></div>
</div>
<h4 class="text-xl mb-2 group-hover:text-primary transition">Fluid Motion</h4>
<p class="text-sm sm:text-base text-muted">Interactions designed with physics-based easing to feel responsive and high-end.</p>
</div>
</div>
<div class="lg:col-span-6 order-1 lg:order-2 card p-3 max-w-xl mx-auto rounded-3xl border-subtle">
<div class="aspect-4/3 rounded-2xl overflow-hidden"><img src="https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=1200&auto=format&fit=crop" class="size-full object-cover scale-105 hover:scale-100 transition-transform ease-in-out duration-700" alt="feature" /></div>
</div>
<div class="lg:col-span-3 space-y-16 order-3 lg:text-right">
<div class="group">
<div class="flex items-center gap-4 mb-4 lg:flex-row-reverse">
<span class="text-4xl font-black text-subtle/50 transition group-hover:text-primary/50">03</span>
<div class="h-px flex-1 bg-linear-to-l from-primary/50 to-transparent lg:hidden"></div>
</div>
<h4 class="text-xl mb-2 group-hover:text-primary transition">Flexible Systems</h4>
<p class="text-sm sm:text-base text-muted">Scalable components that adapt to your brand as it grows from startup to enterprise.</p>
</div>
<div class="group">
<div class="flex items-center gap-4 mb-4 lg:flex-row-reverse">
<span class="text-4xl font-black text-subtle/50 transition group-hover:text-primary/50">04</span>
<div class="h-px flex-1 bg-linear-to-l from-primary/50 to-transparent lg:hidden"></div>
</div>
<h4 class="text-xl mb-2 group-hover:text-primary transition">Deep Focus</h4>
<p class="text-sm sm:text-base text-muted">Minimalist aesthetics that remove cognitive load, keeping users focused on the task.</p>
</div>
</div>
</div>
</div>