Astro
Install
Use this as a template path now; later it can map to a real registry package.
pnpm dlx shadcn@latest add @squadkode/ui-lab/agency-proof-heroUsage (with your settings)
A compact React example generated from this template data.
import "./agency-proof-hero.css"; export function AgencyProofHero() { return ( <section className="sk-hero"> <p>Launch faster</p> <h1>Design systems for teams that ship.</h1> <a href="/contact">Book a build sprint</a> </section> );}Code
Switch between HTML, CSS, TSX, and Astro versions.
<section class="sk-hero"> <p>Launch faster</p> <h1>Design systems for teams that ship.</h1> <a href="/contact">Book a build sprint</a></section>.sk-hero { min-height: 520px; display: grid; align-content: center; gap: 1rem; padding: clamp(3rem, 8vw, 7rem); color: #f8f8ff; background: linear-gradient(135deg, rgba(213,171,255,.2), transparent 42%), linear-gradient(135deg, #05070a, #121a27);} .sk-hero h1 { max-width: 760px; font: 800 clamp(3rem, 9vw, 7rem)/.95 Sora, Inter, sans-serif;} .sk-hero a { width: max-content; border-radius: 999px; padding: .9rem 1.2rem; background: #d5abff; color: #050208; font-weight: 800;}import "./agency-proof-hero.css"; export function AgencyProofHero() { return ( <section className="sk-hero"> <p>Launch faster</p> <h1>Design systems for teams that ship.</h1> <a href="/contact">Book a build sprint</a> </section> );}---// Agency Proof Hero--- <section class="sk-hero"> <p>Launch faster</p> <h1>Design systems for teams that ship.</h1> <a href="/contact">Book a build sprint</a></section> <style>.sk-hero { min-height: 520px; display: grid; align-content: center; gap: 1rem; padding: clamp(3rem, 8vw, 7rem); color: #f8f8ff; background: linear-gradient(135deg, rgba(213,171,255,.2), transparent 42%), linear-gradient(135deg, #05070a, #121a27);} .sk-hero h1 { max-width: 760px; font: 800 clamp(3rem, 9vw, 7rem)/.95 Sora, Inter, sans-serif;} .sk-hero a { width: max-content; border-radius: 999px; padding: .9rem 1.2rem; background: #d5abff; color: #050208; font-weight: 800;}</style>Copy Prompt
Use this prompt to recreate or extend the element with the same intent.
Create a polished Agency Proof Hero component for a modern Astro or React website. Requirements: - Match the SquadKode visual system with clean spacing, 8px card radius, accessible labels, and responsive behavior. - Provide HTML, CSS, TSX, and Astro versions. - Keep the component lightweight, semantic, and easy to copy into a production page. - Include notes for accessibility, reduced motion, and where this pattern works best. Context: A compact service hero with metric chips and a productized offer.
Variations
1 related patterns from this category.
Implementation Notes
Small details that make this template useful in production pages.
Service page ready
Fast LCP structure
Simple content hierarchy