A section that introduces your page with a headline, supporting text, and call-to-action buttons.
Simple Hero
A centered hero section with a headline, subtext, and call-to-action buttons.
Build something great
A clean, minimal hero section to introduce your product or service with a clear call to action.
1 2 3 4 5 6 7 8 9 10 | <section class="py-20 px-4 text-center"> <div class="max-w-2xl mx-auto"> <h1 class="heading-5xl mb-6">Build something great</h1> <p class="para opacity-60 mb-8">A clean, minimal hero section to introduce your product or service with a clear call to action.</p> <div class="flex flex-wrap justify-center gap-3"> <a href="#" class="btn btn-primary btn-lg">Get started</a> <a href="#" class="btn btn-outline btn-lg">Learn more</a> </div> </div> </section> |
Gradient Hero
A hero with a radial gradient accent and gradient-clipped headline text for a modern, polished look.
Build faster with
beautiful UI
A standards-first component system. Semantic, accessible, and ready to ship.
Split Hero
A two-column layout with content on one side and a visual on the other — ideal for product showcases.
Components that scale with your product
From prototype to production — Frutjam gives you the building blocks to ship faster without sacrificing quality.
Hero with Social Proof
Reinforce trust with user avatars and a star rating below the primary call-to-action.
Ship UI faster, with confidence
Copy-paste components that are accessible, themeable, and built on real CSS standards.
Loved by developers worldwide