https://hdmcincy.com/assets/HeroSectionsDemo-C9zvDrsf.js

1import{r as o,j as e,t as u,p as l,m as t,A as b,Z as n,s as g}from"./index-DgKBjRuh.js";import{P as y}from"./PageSEO-DyR4iuYi.js";import{G as i}from"./glass-card-D2kJ2fju.js";import{B as s}from"./button-BfFD5fLb.js";import{N as j}from"./noise-overlay-BKsFF0cy.js";import{A as v}from"./arrow-left-DSoWhB_z.js";import{P as d}from"./panels-top-left-BAfMEsPF.js";import{P as N}from"./play-UhBqtHwR.js";import"./index-EXUQdBu-.js";const w=[{key:"minimal",label:"Minimal"},{key:"split",label:"Split"},{key:"video",label:"Video BG"},{key:"gradient",label:"Gradient"},{key:"animated",label:"Animated"}];function k(){return e.jsxs("div",{className:"bg-card rounded-lg p-12 text-center min-h-[320px] flex flex-col items-center justify-center",children:[e.jsx("p",{className:"text-sm text-muted-foreground mb-3",children:"Welcome to our platform"}),e.jsxs("h2",{className:"text-3xl md:text-4xl font-bold font-serif mb-4",children:["Build Something",e.jsx("br",{}),"Extraordinary"]}),e.jsx("p",{className:"text-muted-foreground max-w-md mb-6",children:"Clean, typography-focused design. Let your message speak for itself."}),e.jsxs("div",{className:"flex gap-3",children:[e.jsx(s,{children:"Get Started"}),e.jsx(s,{variant:"outline",children:"Explore Our Services"})]})]})}function S(){return e.jsxs("div",{className:"bg-card rounded-lg min-h-[320px] grid grid-cols-1 md:grid-cols-2 overflow-hidden",children:[e.jsxs("div",{className:"p-8 flex flex-col justify-center",children:[e.jsx("p",{className:"text-xs font-semibold uppercase tracking-wider text-secondary mb-2",children:"New Platform"}),e.jsx("h2",{className:"text-2xl md:text-3xl font-bold font-serif mb-3",children:"Content on One Side, Visual on the Other"}),e.jsx("p",{className:"text-sm text-muted-foreground mb-5",children:"A balanced approach that pairs messaging with imagery for maximum impact."}),e.jsxs("div",{className:"flex gap-3",children:[e.jsx(s,{size:"sm",children:"Get Started"}),e.jsx(s,{size:"sm",variant:"outline",children:"See Demo"})]})]}),e.jsx("div",{className:"bg-gradient-to-br from-secondary/20 to-primary/20 flex items-center justify-center p-8",children:e.jsx("div",{className:"w-32 h-32 rounded-2xl bg-secondary/15 border border-secondary/20 flex items-center justify-center",children:e.jsx(d,{className:"w-12 h-12 text-secondary/50"})})})]})}

1function G(){return e.jsxs("div",{className:"bg-foreground/90 rounded-lg min-h-[320px] flex flex-col items-center justify-center text-center p-8 relative overflow-hidden",children:[e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-transparent to-foreground/60"}),e.jsxs("div",{className:"relative z-10",children:[e.jsx(N,{className:"w-12 h-12 text-background/70 mx-auto mb-4 border-2 border-background/30 rounded-full p-3"}),e.jsx("h2",{className:"text-2xl md:text-3xl font-bold font-serif text-background mb-3",children:"Immersive Video Experience"}),e.jsx("p",{className:"text-background/70 max-w-md mb-5",children:"Video backgrounds create emotional connection and high impact."}),e.jsx(s,{variant:"secondary",children:"Watch Our Story"})]})]})}function P(){return e.jsxs("div",{className:"bg-gradient-to-br from-primary via-secondary to-accent rounded-lg min-h-[320px] flex flex-col justify-center p-8 md:p-12 relative overflow-hidden",children:[e.jsxs("span",{className:"inline-flex items-center gap-1 text-xs font-semibold bg-background/20 text-background backdrop-blur-sm rounded-full px-3 py-1 mb-4 w-fit",children:[e.jsx(n,{className:"w-3 h-3"})," Now Available"]}),e.jsx("h2",{className:"text-2xl md:text-4xl font-bold font-serif text-background mb-3 max-w-lg",children:"Build Something Beautiful"}),e.jsx("p",{className:"text-background/80 max-w-md mb-6",children:"Modern gradients add depth and personality to your brand."}),e.jsxs("div",{className:"flex gap-3",children:[e.jsx(s,{variant:"outline",className:"border-background/30 text-background hover:bg-background/10",children:"Get Started Free"}),e.jsx(s,{className:"bg-background/20 text-background hover:bg-background/30 backdrop-blur-sm",children:"See Examples"})]})]})}function A(){return e.jsxs("div",{className:"bg-card rounded-lg min-h-[320px] flex flex-col items-center justify-center text-center p-8 relative overflow-hidden",children:[e.jsx(t.div,{animate:{y:[0,-8,0]},transition:{duration:3,repeat:1/0,ease:"easeInOut"},children:e.jsx("div",{className:"w-16 h-16 rounded-2xl bg-gradient-to-br from-secondary/20 to-primary/20 flex items-center justify-center mb-5",children:e.jsx(n,{className:"w-7 h-7 text-secondary"})})}),e.jsx(t.h2,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.2},className:"text-2xl md:text-3xl font-bold font-serif mb-3",children:"Innovation Starts Here"}),e.jsx(t.p,{initial:{opacity:0}

1,animate:{opacity:1},transition:{delay:.4},className:"text-muted-foreground max-w-md mb-5",children:"Subtle animations grab attention and show technical capability."}),e.jsx(t.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{delay:.6},children:e.jsx(s,{children:"Explore Platform"})})]})}const H={minimal:k,split:S,video:G,gradient:P,animated:A},B=[{title:"Minimal",description:"Clean, typography-focused design. Lets your message speak for itself.",bestFor:"SaaS, professional services, portfolios"},{title:"Split Layout",description:"Content on one side, visual on the other. Balanced approach.",bestFor:"Product showcases, apps, e-commerce"},{title:"Video Background",description:"Immersive video creates emotional connection. High impact.",bestFor:"Hospitality, real estate, experiences"},{title:"Gradient",description:"Modern gradients add depth without complexity. Versatile.",bestFor:"Tech startups, creative agencies, modern brands"},{title:"Animated",description:"Subtle animations grab attention. Shows technical capability.",bestFor:"Innovation, tech, gaming, creative"}],D=()=>{const[r,c]=o.useState("gradient"),[m,x]=o.useState(0),p=H[r];return e.jsxs(u,{children:[e.jsx(y,{title:"Hero Section Styles Demo | The Lab",description:"Choose from 5 hero section approaches to make the right first impression.",canonical:"/lab/demos/hero-sections",pageType:"landing"}),e.jsxs("section",{className:"relative py-16 md:py-24",children:[e.jsx(j,{opacity:.03}),e.jsxs("div",{className:"container px-4 relative z-10 max-w-4xl mx-auto",children:[e.jsxs(l,{to:"/lab",className:"inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-8",children:[e.jsx(v,{className:"w-4 h-4"}),"Back to Showcase"]}),e.jsxs(t.div,{initial:{opacity:0,y:16},animate:{opacity:1,y:0},children:[e.jsxs("div",{className:"flex items-center gap-3 mb-2",children:[e.jsx("div",{className:"w-10 h-10 rounded-xl bg-secondary/15 flex items-center justify-center",children:e.jsx(d,{className:"w-5 h-5 text-secondary"})}),e.jsx("span",{className:"text-xs font-semibold uppercase tracking-wider text-secondary",children:"UI/UX Patterns"})]}),e.jsx("h1",{className:"font-serif text-3xl md:text-4xl font-bold mb-3",children:"Hero Section Styles"}),e.jsx("p",{className:"text-muted-foreground text-lg max-w-xl",children:"Your hero section is the first thing visitors see. Choose from 5 different approaches to make the right first impression."})]}),e.jsx(t.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.15},className:"mt-10",children:e.jsxs(i,{className:"p-6 md:p-8",children:[e.jsx("h2",{className:"font-serif text-xl font-semibold mb-1",children:"Live Demos"}),e.jsx("p",{className:"text-sm text-muted-foreground mb-5",children:"Select a style to preview. Each demo is fully responsive."}),e.jsx("div",{className:"flex border-b border-border mb-6 overflow-x-auto",children:w.map(({key:a,label:h})=>e.jsx("button",{onClick:()=>{c(a),x(f=>f+1)},className:`px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors border-b-2 -mb-px ${r===a?"border-secondary text-foreground":"border-transparent text-muted-foreground hover:text-foreground"}`,children:h},a))}),e.jsx(b,{mode:"wait",children:e.jsx(t.div,{initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},children:e.jsx(p,{})},`${r}-${m}`)})]})}),e.jsxs(t.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.3},className:"mt-16",children:[e.jsx("h2",{className:"font-serif text-2xl font-bold mb-6",children:"When to Use Each Style"}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",children:B.map(a=>e.jsxs(i,{className:"p-5",spotlight:!1,children:[e.jsx("h3",{className:"font-semibold text-sm mb-2",children:a.title}),e.jsx("p",{className:"text-xs text-muted-foreground mb-2",children:a.description}),e.jsxs("p",{className:"text-xs",children:[e.jsx("span",{className:"font-medium text-foreground",children:"Best for:"})," ",e.jsx("span",{className:"text-muted-foreground",children:a.bestFor})]})]},a.title))})]}),e.jsx(t.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.45},className:"mt-16",children:e.jsxs(i,{className:"text-center p-8 md:p-10",children:[e.jsx("h3",{className:"font-serif text-2xl font-bold mb-2",children:"Ready to Make a Great First Impression?"}),e.jsx("p",{className:"text-muted-foreground mb-6",children:"We'll design a hero section that captures your brand and converts visitors."}),e.jsx(s,{size:"lg",asChild:!0,className:"group",children:e.jsxs(l,{to:"/strategy",children:[e.jsx(n,{className:"w-5 h-5 mr-2"}),"Get Started",e.jsx(g,{className:"w-5 h-5 ml-2 transition-transform group-hover:translate-x-1"})]})})]})})]})]})]})};export{D as default};