{
  "scopeId": "hero-dark",
  "tailwindCss": ".hero-dark .pointer-events-none{pointer-events:none}.hero-dark .absolute{position:absolute}.hero-dark .relative{position:relative}.hero-dark .inset-0{inset:0}.hero-dark .z-10{z-index:10}.hero-dark .mx-auto{margin-left:auto;margin-right:auto}.hero-dark .mb-10{margin-bottom:2.5rem}.hero-dark .mb-6{margin-bottom:1.5rem}.hero-dark .flex{display:flex}.hero-dark .inline-flex{display:inline-flex}.hero-dark .max-w-2xl{max-width:42rem}.hero-dark .max-w-3xl{max-width:48rem}.hero-dark .max-w-7xl{max-width:80rem}.hero-dark .flex-col{flex-direction:column}.hero-dark .items-center{align-items:center}.hero-dark .justify-center{justify-content:center}.hero-dark .gap-4{gap:1rem}.hero-dark .overflow-hidden{overflow:hidden}.hero-dark .rounded-xl{border-radius:.75rem}.hero-dark .border-2{border-width:2px}.hero-dark .border-white\\/30{border-color:hsla(0,0%,100%,.3)}.hero-dark .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hero-dark .bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.hero-dark .from-neutral-900{--tw-gradient-from:color-mix(in srgb,var(--pg-neutral-900) 100%,transparent) var(--tw-gradient-from-position);--tw-gradient-to:color-mix(in srgb,var(--pg-neutral-900) 0%,transparent) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hero-dark .from-white\\/5{--tw-gradient-from:hsla(0,0%,100%,.05) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hero-dark .via-neutral-800{--tw-gradient-to:color-mix(in srgb,var(--pg-neutral-800) 0%,transparent) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),color-mix(in srgb,var(--pg-neutral-800) 100%,transparent) var(--tw-gradient-via-position),var(--tw-gradient-to)}.hero-dark .via-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}.hero-dark .to-neutral-900{--tw-gradient-to:color-mix(in srgb,var(--pg-neutral-900) 100%,transparent) var(--tw-gradient-to-position)}.hero-dark .to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.hero-dark .px-4{padding-left:1rem;padding-right:1rem}.hero-dark .px-8{padding-left:2rem;padding-right:2rem}.hero-dark .py-20{padding-bottom:5rem;padding-top:5rem}.hero-dark .py-4{padding-bottom:1rem;padding-top:1rem}.hero-dark .text-center{text-align:center}.hero-dark .text-4xl{font-size:2.25rem;line-height:2.5rem}.hero-dark .text-base{font-size:1rem;line-height:1.5rem}.hero-dark .text-lg{font-size:1.125rem;line-height:1.75rem}.hero-dark .font-bold{font-weight:700}.hero-dark .font-extrabold{font-weight:800}.hero-dark .tracking-tight{letter-spacing:-.025em}.hero-dark .text-base{--tw-text-opacity:1;color:color-mix(in srgb,var(--pg-neutral-50) calc(var(--tw-text-opacity, 1)*100%),transparent)}.hero-dark .text-neutral-300{--tw-text-opacity:1;color:color-mix(in srgb,var(--pg-neutral-300) calc(var(--tw-text-opacity, 1)*100%),transparent)}.hero-dark .text-neutral-900{--tw-text-opacity:1;color:color-mix(in srgb,var(--pg-neutral-900) calc(var(--tw-text-opacity, 1)*100%),transparent)}.hero-dark .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hero-dark .shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hero-dark .transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hero-dark .duration-200{transition-duration:.2s}.hero-dark .hover\\:-translate-y-0\\.5:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hero-dark .hover\\:border-white\\/60:hover{border-color:hsla(0,0%,100%,.6)}.hero-dark .hover\\:bg-neutral-100:hover{--tw-bg-opacity:1;background-color:color-mix(in srgb,var(--pg-neutral-100) calc(var(--tw-bg-opacity, 1)*100%),transparent)}.hero-dark .hover\\:bg-white\\/5:hover{background-color:hsla(0,0%,100%,.05)}.hero-dark .hover\\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:640px){.hero-dark .sm\\:flex-row{flex-direction:row}.hero-dark .sm\\:px-6{padding-left:1.5rem;padding-right:1.5rem}.hero-dark .sm\\:py-28{padding-bottom:7rem;padding-top:7rem}.hero-dark .sm\\:text-5xl{font-size:3rem;line-height:1}.hero-dark .sm\\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.hero-dark .lg\\:px-8{padding-left:2rem;padding-right:2rem}.hero-dark .lg\\:py-32{padding-bottom:8rem;padding-top:8rem}.hero-dark .lg\\:text-6xl{font-size:3.75rem;line-height:1}}",
  "dependencies": [],
  "version": "1.0",
  "processedHtml": "<div class=\"hero-dark\"><section class=\"relative overflow-hidden bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900 py-20 sm:py-28 lg:py-32\">\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10\">\n        <div class=\"max-w-3xl mx-auto text-center\">\n            <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white tracking-tight mb-6\">\n                Build Something Amazing\n            </h1>\n            <p class=\"text-lg sm:text-xl text-neutral-300 mb-10 max-w-2xl mx-auto\">\n                Create professional websites with our powerful tools and templates. Get started in minutes.\n            </p>\n            <div class=\"flex flex-col sm:flex-row gap-4 justify-center\">\n                <a href=\"#\" class=\"inline-flex items-center justify-center px-8 py-4 text-base font-bold text-neutral-900 bg-white rounded-xl hover:bg-neutral-100 transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5\">\n                    Get Started\n                </a>\n                <a href=\"#\" class=\"inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white border-2 border-white/30 rounded-xl hover:border-white/60 hover:bg-white/5 transition-all duration-200\">\n                    Learn More\n                </a>\n            </div>\n        </div>\n    </div>\n    <div class=\"absolute inset-0 from-white/5 via-transparent to-transparent pointer-events-none\" style=\"bg: radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))\"></div>\n</section></div>"
}