1(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,90412,e=>{"use strict";let t=(0,e.i(61875).default)("search",[["path",{d:"m21 21-4.34-4.34",key:"14j7rj"}],["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}]]);e.s(["Search",()=>t],90412)},46140,e=>{"use strict";let t=(0,e.i(61875).default)("check",[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]]);e.s(["Check",()=>t],46140)},43690,e=>{"use strict";let t=(0,e.i(61875).default)("sparkles",[["path",{d:"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z",key:"1s2grr"}],["path",{d:"M20 2v4",key:"1rf3ol"}],["path",{d:"M22 4h-4",key:"gwowj6"}],["circle",{cx:"4",cy:"20",r:"2",key:"6kqj1y"}]]);e.s(["Sparkles",()=>t],43690)},72890,e=>{"use strict";let t=(0,e.i(61875).default)("arrow-right",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"m12 5 7 7-7 7",key:"xquz4c"}]]);e.s(["ArrowRight",()=>t],72890)},79520,e=>{"use strict";let t=(0,e.i(61875).default)("wand-sparkles",[["path",{d:"m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72",key:"ul74o6"}],["path",{d:"m14 7 3 3",key:"1r5n42"}],["path",{d:"M5 6v4",key:"ilb8ba"}],["path",{d:"M19 14v4",key:"blhpug"}],["path",{d:"M10 2v2",key:"7u0qdc"}],["path",{d:"M7 8H3",key:"zfb6yr"}],["path",{d:"M21 16h-4",key:"1cnmox"}],["path",{d:"M11 3H9",key:"1obp7u"}]]);e.s(["Wand2",()=>t],79520)},4183,e=>{"use strict";let t=(0,e.i(61875).default)("laptop",[["path",{d:"M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z",key:"1pdavp"}],["path",{d:"M20.054 15.987H3.946",key:"14rxg9"}]]);e.s(["Laptop",()=>t],4183)},17784,e=>{"use strict";let t=(0,e.i(61875).default)("lock",[["rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2",key:"1w4ew1"}],["path",{d:"M7 11V7a5 5 0 0 1 10 0v4",key:"fwvmzm"}]]);e.s(["Lock",()=>t],17784)},50879,e=>{"use strict";let t=(0,e.i(61875).default)("smartphone",[["rect",{width:"14",height:"20",x:"5",y:"2",rx:"2",ry:"2",key:"1yt0o3"}],["path",{d:"M12 18h.01",key:"mhygvu"}]]);e.s(["Smartphone",()=>t],50879)},95592,e=>{"use strict";let t=(0,e.i(61875).default)("tablet",[["rect",{width:"16",height:"20",x:"4",y:"2",rx:"2",ry:"2",key:"76otgf"}],["line",{x1:"12",x2:"12.01",y1:"18",y2:"18",key:"1dp563"}]]);e.s(["Tablet",()=>t],95592)},60890,24168,e=>{"use strict";let t=(0,e.i(61875).default)("maximize-2",[["path",{d:"M15 3h6v6",key:"1q9fwt"}],["path",{d:"m21 3-7 7",key:"1l2asr"}],["path",{d:"m3 21 7-7",key:"tjx5ai"}],["path",{d:"M9 21H3v-6",key:"wtvkvv"}]]);e.s(["Maximize2",()=>t],60890);var a=e.i(73903),r=e.i(5825),s=e.i(57679),i=e.i(84490),l=e.i(81860),n=e.i(68523),o=e.i(34774);let d={background:"linear-gradient(to right, #B87333, #D4A853)",color:"#fff",padding:"14px 16px",borderRadius:"10px",fontSize:"14px",boxShadow:"0 10px 25px -5px rgba(0,0,0,0.2)",border:"1px solid rgba(255,255,255,0.12)"},c="/#pricing",m=()=>{try{return localStorage.getItem("authToken")}catch{return null}};function u(){}function p(e,t){let{plansHref:a}=void 0===t?{}:t,s=e?`${e} is part of our paid plans â upgrade to unlock it.`:"This feature is part of our paid plans â upgrade to unlock it.",i=a?r.default.createElement("span",null,s," ",r.default.createElement("a",{href:a,style:{color:"#fff",fontWeight:700,textDecoration:"underline",whiteSpace:"nowrap"},onClick:x},"See plans â")):s;(0,l.default)(i,{id:"ws-upsell",duration:a?6500:4500,position:"top-center",icon:"â¨",style:d})}function x(){return l.default.dismiss("ws-upsell")}e.s(["PLANS_HREF",0,c,"default",0,function(){let e,t,x,b,g,h,f,w,y,v=(0,a.c)(31),k=(0,s.use
1Selector)(n.UserSelector),C=(0,s.useDispatch)(),S=(0,i.useRouter)(),j=k?.currentPlan||"Free";v[0]!==j||v[1]!==k?.currentPlan?(e=!k?.currentPlan||j.toLowerCase().includes("free"),v[0]=j,v[1]=k?.currentPlan,v[2]=e):e=v[2];let A=e,[T,N]=(0,r.useState)(!1),[D,F]=(0,r.useState)(!1);v[3]===Symbol.for("react.memo_cache_sentinel")?(t=()=>{N(!!m())},x=[],v[3]=t,v[4]=x):(t=v[3],x=v[4]),(0,r.useEffect)(t,x),v[5]!==C||v[6]!==k?._id?(b=()=>{if(k?._id)return void F(!0);let e=m();if(!e)return void F(!0);let t=!1;return Promise.resolve(C((0,o.GetUserData)(e))).finally(()=>{t||F(!0)}),()=>{t=!0}},v[5]=C,v[6]=k?._id,v[7]=b):b=v[7];let M=k?._id;v[8]!==C||v[9]!==M?(g=[M,C],v[8]=C,v[9]=M,v[10]=g):g=v[10],(0,r.useEffect)(b,g);let L=!!k?._id||T,B=L&&!A,E=D||!!k?._id;v[11]!==A?(h=(e,t)=>(...a)=>A?void p(t):e(...a),v[11]=A,v[12]=h):h=v[12];let _=h;v[13]!==A||v[14]!==L||v[15]!==S?(f=(e,t)=>(...a)=>{if(!L){(0,l.default)(t?`Sign in and upgrade to a paid plan to unlock ${t.toLowerCase()}.`:"Sign in and upgrade to a paid plan to unlock this.",{id:"ws-upsell",duration:5e3,position:"top-center",icon:"ð",style:d}),S.push("/login");return}return A?void p(t,{plansHref:c}):e(...a)},v[13]=A,v[14]=L,v[15]=S,v[16]=f):f=v[16];let P=f;v[17]!==B||v[18]!==P||v[19]!==E?(w=e=>{E&&!B&&P(u,e)()},v[17]=B,v[18]=P,v[19]=E,v[20]=w):w=v[20];let R=w;return v[21]!==B||v[22]!==_||v[23]!==P||v[24]!==A||v[25]!==L||v[26]!==j||v[27]!==E||v[28]!==R||v[29]!==k?(y={user:k,plan:j,isFreeUser:A,isLoggedIn:L,canUsePaid:B,planResolved:E,gate:_,gatePublic:P,requestUnlock:R,showUpsell:p,plansHref:c},v[21]=B,v[22]=_,v[23]=P,v[24]=A,v[25]=L,v[26]=j,v[27]=E,v[28]=R,v[29]=k,v[30]=y):y=v[30],y}],24168)},5949,e=>{"use strict";let t=(0,e.i(61875).default)("copy",[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]]);e.s(["Copy",()=>t],5949)},99430,e=>{"use strict";let t="data-redesignr-editor",a="data-section-instance",r=["script","style","noscript","template","link","meta"],s=e=>e?.body?Array.from(e.body.children).filter(e=>{let a=e.tagName?.toLowerCase();return!r.includes(a)&&!e.hasAttribute(t)}):[];e.s(["EDITOR_NODE_ATTR",0,t,"SECTION_CATEGORY_LABELS",0,{hero:"Hero",features:"Features",pricing:"Pricing",testimonials:"Testimonials",faq:"FAQ",cta:"Call to action",footer:"Footer",stats:"Stats",team:"Team",contact:"Contact",general:"General"},"SECTION_QUICK_PROMPTS",0,[{category:"hero",label:"Hero section",prompt:"A bold hero section with a headline, supporting copy and two call-to-action buttons"},{category:"features",label:"Feature grid",prompt:"A features section highlighting six product capabilities with icons"},{category:"pricing",label:"Pricing table",prompt:"A pricing section with three tiers and a highlighted recommended plan"},{category:"testimonials",label:"Testimonials",prompt:"A testimonials section with customer quotes, names and roles"},{category:"faq",label:"FAQ",prompt:"An FAQ section with six expandable questions and answers"},{category:"cta",label:"Final CTA",prompt:"A closing call-to-action section encouraging visitors to start a free trial"},{category:"stats",label:"Stats band",prompt:"A stats section showing four key metrics with short labels"},{category:"contact",label:"Contact",prompt:"A contact section with a short form and the company contact details"}],"buildSectionPreviewDoc",0,(e,t={})=>{let a=t.headAssets||"",r=/cdn\.tailwindcss\.com|tailwindcss/i.test(a),s=/lucide/i.test(a),i=t.bodyClass||("dark"===t.mode?"bg-slate-950 text-slate-100":"bg-white text-slate-900");return`<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="utf-8" /> 5<meta name="viewport" content="width=device-width, initial-scale=1" /> 6${r?"":'<script src="https://cdn.tailwindcss.com"></script>'} 7${a} 8${s?"":'<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>'} 9<style> 10 html, body { margin: 0; padding: 0; } 11 /* Thumbnails are non-interactive previews. */ 12 body * { animation: none !important; transition: none !important; } 13</style> 14</head> 15<body class="${i}"> 16${e||""} 17<script> 18 try { if (window.lucide && window.lucide.createIcons) window.lucide.createIcons(); } catch (e) {} 19</script> 20</body> 21</html>`}
21,"getBodyBlocks",0,s,"insertSectionAtSlot",0,(e,t,r,i)=>{if(!e?.body||!t)return null;let l=e.createElement("div");l.innerHTML=t.trim();let n=l.firstElementChild;if(!n)return null;i&&n.setAttribute(a,i);let o=s(e);return o.length?r>=o.length?o[o.length-1].after(n):e.body.insertBefore(n,o[r]):e.body.appendChild(n),n},"parseDocument",0,e=>new DOMParser().parseFromString(e||"","text/html"),"refreshIcons",0,e=>{try{e?.lucide?.createIcons&&e.lucide.createIcons()}catch(e){}},"removeSectionInstance",0,(e,t)=>{let r=e?.querySelector(`[${a}="${t}"]`);return r&&r.remove(),!!r},"replaceSectionInstance",0,(e,t,r)=>{let s=e?.querySelector(`[${a}="${t}"]`);if(!s||!r)return null;let i=e.createElement("div");i.innerHTML=r.trim();let l=i.firstElementChild;return l?(l.setAttribute(a,t),s.replaceWith(l),l):null},"resolveDropTarget",0,(e,t)=>{let a=s(e);if(!a.length)return{reference:null,position:"append",slot:0};let r=e.defaultView,i=a.filter(e=>"fixed"!==r?.getComputedStyle(e)?.position),l=i.length?i:a;for(let e of l){let r=e.getBoundingClientRect();if(t<r.top+r.height/2)return{reference:e,position:"before",slot:a.indexOf(e)};if(t<=r.bottom)return{reference:e,position:"after",slot:a.indexOf(e)+1}}let n=l[l.length-1];return{reference:n,position:"after",slot:a.indexOf(n)+1}},"serializeDocument",0,e=>{if(!e?.documentElement)return"";let a=e.documentElement.cloneNode(!0);return a.querySelectorAll(`[${t}]`).forEach(e=>e.remove()),a.querySelectorAll(".redesignr-drop-target").forEach(e=>e.classList.remove("redesignr-drop-target")),`<!DOCTYPE html> 22${a.outerHTML}`},"stripInstanceMarkers",0,e=>(e||"").replace(RegExp(`\\s${a}="[^"]*"`,"g"),"")])},34076,e=>{"use strict";let t=[{_id:"sec-hero-split-01",slug:"saas-split-hero-gradient-badge",category:"hero",typeName:"SaaS Split Hero with Live App Mockup",name:"High-Converting SaaS Split Hero",description:"Modern split-screen layout with an interactive pill badge, compelling value headline, dual action buttons, and a glossy application card preview.",layoutArchetype:"split-left-media",styleFamily:"startup-modern",colorScheme:"light",qualityScore:98,useCount:1420,tags:["hero","saas","startup","conversion","cta"],html:`<section class="relative overflow-hidden bg-gradient-to-b from-amber-50/50 via-white to-white py-20 lg:py-28"> 23 <div class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.amber.100),white)] opacity-40"></div> 24 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> 25 <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-12 lg:gap-8"> 26 <div class="lg:col-span-7 text-center lg:text-left"> 27 <div class="inline-flex items-center gap-2 rounded-full border border-amber-300 bg-amber-100/60 px-3 py-1 text-xs font-semibold text-amber-900 shadow-sm mb-6"> 28 <span class="flex h-2 w-2 rounded-full bg-amber-600 animate-ping"></span> 29 <span>Redesignr 3.0 is Live</span> 30 <span class="text-amber-700/60">⢠Explore New AI Studio</span> 31 </div> 32 <h1 class="text-4xl font-extrabold tracking-tight text-neutral-900 sm:text-5xl lg:text-6xl leading-[1.15]"> 33 Redesign Any Website in Seconds with <span class="bg-gradient-to-r from-amber-700 via-amber-600 to-amber-500 bg-clip-text text-transparent">Intelligent AI</span> 34 </h1> 35 <p class="mt-6 text-lg leading-relaxed text-neutral-600 max-w-2xl mx-auto lg:mx-0"> 36 Transform outdated webpages into modern, high-converting digital experiences. Instant live previews, 10,000+ modular sections, and one-click code export. 37 </p> 38 <div class="mt-8 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4"> 39 <a href="/login" class="w-full sm:w-auto inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-amber-700 to-amber-500 px-6 py-3.5 text-sm font-bold text-white shadow-lg shadow-amber-600/20 hover:opacity-95 transition-all"> 40 Start Redesigning Free 41 </a> 42 <a href="#demo" class="w-full sm:w-auto inline-flex items-center justify-center rounded-xl border border-neutral-300 bg-white px-6 py-3.5 text-sm font-semibold text-neutral-700 hover:bg-neutral-50 shadow-sm transition-all"> 43 Watch 1-Min Demo 44 </a> 45 </div> 46 <div class="mt-8 flex items-center justify-center lg:justify-start gap-3 text-xs text-neutral-500 font-medium">
47 <div class="flex -space-x-2"> 48 <div class="w-7 h-7 rounded-full bg-amber-300 border-2 border-white flex items-center justify-center font-bold text-[10px] text-amber-900">JD</div> 49 <div class="w-7 h-7 rounded-full bg-orange-300 border-2 border-white flex items-center justify-center font-bold text-[10px] text-orange-900">SK</div> 50 <div class="w-7 h-7 rounded-full bg-yellow-300 border-2 border-white flex items-center justify-center font-bold text-[10px] text-yellow-900">AL</div> 51 </div> 52 <span>Trusted by 45,000+ creators & founders</span> 53 </div> 54 </div> 55 <div class="lg:col-span-5 relative"> 56 <div class="relative rounded-2xl border border-neutral-200/80 bg-white p-3 shadow-2xl shadow-neutral-900/10"> 57 <div class="flex items-center gap-1.5 pb-3 border-b border-neutral-100 px-2"> 58 <div class="w-2.5 h-2.5 rounded-full bg-red-400"></div> 59 <div class="w-2.5 h-2.5 rounded-full bg-yellow-400"></div> 60 <div class="w-2.5 h-2.5 rounded-full bg-green-400"></div> 61 <span class="ml-2 text-[11px] font-mono text-neutral-400">preview.redesignr.ai</span> 62 </div> 63 <div class="space-y-3 pt-3"> 64 <div class="h-28 rounded-xl bg-gradient-to-br from-amber-50 to-orange-100 p-4 border border-amber-200/50 flex flex-col justify-between"> 65 <div class="flex justify-between items-center"> 66 <span class="text-xs font-bold text-amber-900">Conversion Rate</span> 67 <span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">+48.2%</span> 68 </div> 69 <div class="text-2xl font-black text-amber-950">4.82%</div> 70 </div> 71 <div class="grid grid-cols-2 gap-3"> 72 <div class="rounded-xl border border-neutral-100 bg-neutral-50 p-3"> 73 <span class="text-[10px] font-semibold text-neutral-400 uppercase tracking-wider block">Speed Score</span> 74 <span class="text-lg font-bold text-neutral-800">99 / 100</span> 75 </div> 76 <div class="rounded-xl border border-neutral-100 bg-neutral-50 p-3"> 77 <span class="text-[10px] font-semibold text-neutral-400 uppercase tracking-wider block">Time Saved</span> 78 <span class="text-lg font-bold text-amber-700">14 hrs</span> 79 </div> 80 </div> 81 </div> 82 </div> 83 </div> 84 </div> 85 </div> 86</section>`},{_id:"sec-features-bento-02",slug:"asymmetric-bento-feature-showcase",category:"features",typeName:"Bento Grid Feature Showcase",name:"Asymmetric Bento Feature Grid",description:"Four interactive feature cards with glowing gradient accents, metric badges, and detailed utility descriptions.",layoutArchetype:"bento-grid",styleFamily:"glass-depth",colorScheme:"dark",qualityScore:96,useCount:1180,tags:["features","bento","dark-mode","glass","saas"],html:`<section class="relative bg-neutral-950 py-20 lg:py-28 text-white overflow-hidden"> 87 <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(217,119,6,0.15),rgba(255,255,255,0))]"></div> 88 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10"> 89 <div class="text-center max-w-3xl mx-auto mb-16"> 90 <span class="text-xs font-bold tracking-widest uppercase text-amber-400 bg-amber-400/10 px-3 py-1 rounded-full border border-amber-400/20"> 91 Supercharged Capabilities 92 </span> 93 <h2 class="mt-4 text-3xl font-extrabold tracking-tight sm:text-4xl lg:text-5xl"> 94 Engineered for Pixel-Perfect Velocity 95 </h2> 96 <p class="mt-4 text-base text-neutral-400"> 97 Replace hours of manual styling with smart agentic design generation, automated theme synchronization, and clean production code. 98 </p> 99 </div> 100 <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> 101 <div class="md:col-span-2 rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur-xl hover:border-amber-500/40 transition-all duration-300"> 102 <div class="w-10 h-10 rounded-xl bg-amber-500/20 border border-amber-500/30 flex items-center justify-center text-amber-400 mb-6 font-bold">01</div> 103 <h3 class="text-xl font-bold text-white">Full Page Theme-Aware Blending</h3> 104 <p class="mt-2 text-neutral-400 text-sm leading-relaxed max-w-lg"> 105 Drop any section into your layout and our model adapts colors, typography scale, font tokens, and spacing to match your exact site hierarchy. 106 </p> 107 </div> 108 <div class="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur-xl hover:border-amber-500/40 transition-all duration-300"> 109 <div class="w-10 h-10 rounded-xl bg-amber-500/20 border border-amber-500/30 flex items-center justify-center text-amber-400 mb-6 font-bold">02</div> 110 <h3 class="text-xl font-bold text-white">Clean Tailwind Code</h3> 111 <p class="mt-2 text-neutral-400 text-sm leading-relaxed"> 112 Zero bloat, zero runtime dependencies. Copy clean HTML and standard utility classes ready for production. 113 </p> 114 </div> 115 <div class="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur-xl hover:border-amber-500/40 transition-all duration-300"> 116 <div class="w-10 h-10 rounded-xl bg-amber-500/20 border border-amber-500/30 flex items-center justify-center text-amber-400 mb-6 font-bold">03</div> 117 <h3 class="text-xl font-bold text-white">10,000+ Pre-Made Library</h3> 118 <p class="mt-2 text-neutral-400 text-sm leading-relaxed"> 119 Browse thousands of pre-generated archetypes across 16 visual style languages instantly for free. 120 </p> 121 </div> 122 <div class="md:col-span-2 rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur-xl hover:border-amber-500/40 transition-all duration-300"> 123 <div class="w-10 h-10 rounded-xl bg-amber-500/20 border border-amber-500/30 flex items-center justify-center text-amber-400 mb-6 font-bold">04</div> 124 <h3 class="text-xl font-bold text-white">Automated SEO & Accessibility</h3> 125 <p class="mt-2 text-neutral-400 text-sm leading-relaxed max-w-lg"> 126 Built with semantic HTML5 elements, accessible ARIA contrasts, fast load times, and structured content hierarchy. 127 </p> 128 </div> 129 </div> 130 </div> 131</section>`},{_id:"sec-pricing-tier-03",slug:"3-tier-saas-pricing-with-toggle",category:"pricing",typeName:"3-Tier SaaS Pricing Table with Monthly/Annual Toggle",name:"Trans
131parent 3-Tier Pricing Table",description:"Comprehensive pricing card grid with monthly and annual plan options, prominent Pro tier highlighting, and complete feature checklists.",layoutArchetype:"split-3-col",styleFamily:"minimal-swiss",colorScheme:"light",qualityScore:97,useCount:940,tags:["pricing","saas","tiers","checkout","cards"],html:`<section class="bg-neutral-50 py-20 lg:py-28"> 132 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> 133 <div class="text-center max-w-3xl mx-auto mb-16"> 134 <h2 class="text-3xl font-black tracking-tight text-neutral-900 sm:text-4xl"> 135 Predictable Pricing for High-Growth Teams 136 </h2> 137 <p class="mt-4 text-base text-neutral-600"> 138 Start free today and scale as your conversion rate climbs. All plans include full access to the section library. 139 </p> 140 </div> 141 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch"> 142 <div class="rounded-2xl border border-neutral-200 bg-white p-8 shadow-sm flex flex-col justify-between"> 143 <div> 144 <h3 class="text-lg font-bold text-neutral-900">Starter</h3> 145 <p class="mt-1 text-xs text-neutral-500">Perfect for single projects and indie creators.</p> 146 <div class="mt-6 flex items-baseline gap-1"> 147 <span class="text-4xl font-black text-neutral-900">$0</span> 148 <span class="text-sm font-semibold text-neutral-500">/ month</span> 149 </div> 150 <ul class="mt-6 space-y-3 text-xs text-neutral-600 border-t border-neutral-100 pt-6"> 151 <li class="flex items-center gap-2">â Unlimited Public Section Copying</li> 152 <li class="flex items-center gap-2">â Standard Tailwind Code Export</li> 153 <li class="flex items-center gap-2">â 3 AI Redesigns / month</li> 154 </ul> 155 </div> 156 <a href="/login" class="mt-8 block w-full rounded-xl border border-neutral-300 py-3 text-center text-xs font-bold text-neutral-700 hover:bg-neutral-50 transition-colors"> 157 Get Started Free 158 </a> 159 </div> 160 <div class="rounded-2xl border-2 border-amber-600 bg-white p-8 shadow-xl relative flex flex-col justify-between"> 161 <span class="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-r from-amber-700 to-amber-500 px-3 py-1 text-[11px] font-extrabold uppercase tracking-wider text-white shadow-md"> 162 Most Popular 163 </span> 164 <div> 165 <h3 class="text-lg font-bold text-neutral-900">Professional</h3> 166 <p class="mt-1 text-xs text-neutral-500">For active agencies and fast-moving startups.</p> 167 <div class="mt-6 flex items-baseline gap-1"> 168 <span class="text-4xl font-black text-neutral-900">$29</span> 169 <span class="text-sm font-semibold text-neutral-500">/ month</span> 170 </div> 171 <ul class="mt-6 space-y-3 text-xs text-neutral-700 border-t border-neutral-100 pt-6"> 172 <li class="flex items-center gap-2 font-semibold text-amber-900">â Everything in Starter</li> 173 <li class="flex items-center gap-2">â Unlimited AI Layout Generations</li> 174 <li class="flex items-center gap-2">â Instant Full-Site Theme Blending</li> 175 <li class="flex items-center gap-2">â Custom Domain Publishing</li> 176 </ul> 177 </div> 178 <a href="/login" class="mt-8 block w-full rounded-xl bg-gradient-to-r from-amber-700 to-amber-500 py-3 text-center text-xs font-bold text-white shadow-md shadow-amber-600/20 hover:opacity-95 transition-all"> 179 Upgrade to Pro 180 </a> 181 </div> 182 <div class="rounded-2xl border border-neutral-200 bg-white p-8 shadow-sm flex flex-col justify-between"> 183 <div> 184 <h3 class="text-lg font-bold text-neutral-900">Enterprise</h3> 185 <p class="mt-1 text-xs text-neutral-500">Tailored custom agent workflows and priority support.</p> 186 <div class="mt-6 flex items-baseline gap-1"> 187 <span class="text-4xl font-black text-neutral-900">$99</span> 188 <span class="text-sm font-semibold text-neutral-500">/ month</span> 189 </div> 190 <ul class="mt-6 space-y-3 text-xs text-neutral-600 border-t border-neutral-100 pt-6"> 191 <li class="flex items-center gap-2 font-semibold text-neutral-900">â Everything in Pro</li> 192 <li class="flex items-center gap-2">â Dedicated API & Webhook Access</li> 193 <li class="flex items-center gap-2">â Custom Token Limits & SLAs</li> 194 <li class="flex items-center gap-2">â Dedicated Account Strategist</li> 195 </ul> 196 </div> 197 <a href="/login" class="mt-8 block w-full rounded-xl border border-neutral-300 py-3 text-center text-xs font-bold text-neutral-700 hover:bg-neutral-50 transition-colors"> 198 Contact Sales 199 </a> 200 </div> 201 </div> 202 </div> 203</section>`},{_id:"sec-testimonials-grid-04",slug:"masonry-social-proof-cards",category:"testimonials",typeName:"Customer Review Wall with Ratings",name:"Masonry
203Social Proof Cards",description:"A 3-column review card section with star ratings, user avatars, verified badges, and verified testimonial quotes.",layoutArchetype:"masonry-grid",styleFamily:"warm-earthy",colorScheme:"light",qualityScore:95,useCount:820,tags:["testimonials","reviews","ratings","social-proof"],html:`<section class="bg-amber-50/40 py-20 lg:py-28"> 204 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> 205 <div class="text-center max-w-2xl mx-auto mb-14"> 206 <span class="text-xs font-bold uppercase tracking-widest text-amber-800">Customer Love</span> 207 <h2 class="mt-2 text-3xl font-extrabold text-neutral-900 sm:text-4xl"> 208 Loved by Designers, Trusted by Founders 209 </h2> 210 </div> 211 <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> 212 <div class="rounded-2xl border border-amber-200/70 bg-white p-6 shadow-sm"> 213 <div class="flex text-amber-500 gap-1 text-sm mb-3">â â â â â </div> 214 <p class="text-sm text-neutral-700 leading-relaxed italic"> 215 "Redesignr saved our agency over 30 design hours on our last launch. The sections drop right into our stack without breaking responsive rules." 216 </p> 217 <div class="mt-5 flex items-center gap-3"> 218 <div class="w-9 h-9 rounded-full bg-amber-200 font-bold text-amber-900 flex items-center justify-center text-xs">MK</div> 219 <div> 220 <div class="text-xs font-bold text-neutral-900">Marcus Kelly</div> 221 <div class="text-[11px] text-neutral-500">Founder, Studio Apex</div> 222 </div> 223 </div> 224 </div> 225 <div class="rounded-2xl border border-amber-200/70 bg-white p-6 shadow-sm"> 226 <div class="flex text-amber-500 gap-1 text-sm mb-3">â â â â â </div> 227 <p class="text-sm text-neutral-700 leading-relaxed italic"> 228 "The variety of archetypes is incredible. We redesigned our entire SaaS landing page in 20 minutes and saw a 34% jump in signup conversion." 229 </p> 230 <div class="mt-5 flex items-center gap-3"> 231 <div class="w-9 h-9 rounded-full bg-orange-200 font-bold text-orange-900 flex items-center justify-center text-xs">SL</div> 232 <div> 233 <div class="text-xs font-bold text-neutral-900">Sarah Lin</div> 234 <div class="text-[11px] text-neutral-500">Head of Growth, FlowStack</div> 235 </div> 236 </div> 237 </div> 238 <div class="rounded-2xl border border-amber-200/70 bg-white p-6 shadow-sm"> 239 <div class="flex text-amber-500 gap-1 text-sm mb-3">â â â â â </div> 240 <p class="text-sm text-neutral-700 leading-relaxed italic"> 241 "Being able to copy clean Tailwind code without wading through bloated component libraries is a breath of fresh air. Absolutely 10/10." 242 </p> 243 <div class="mt-5 flex items-center gap-3"> 244 <div class="w-9 h-9 rounded-full bg-amber-300 font-bold text-amber-950 flex items-center justify-center text-xs">DV</div> 245 <div> 246 <div class="text-xs font-bold text-neutral-900">David Vance</div> 247 <div class="text-[11px] text-neutral-500">Lead Frontend, StackPulse</div> 248 </div> 249 </div> 250 </div> 251 </div> 252 </div> 253</section>`},{_id:"sec-faq-grid-05",slug:"2-column-accordion-faq",category:"faq",typeName:"2-Column Clean FAQ Accordion",name:"2-Column Expandable FAQ Section",description:"Clean two-column FAQ layout with high-contrast question headers, comprehensive answers, and a help desk contact banner.",layoutArchetype:"split-2-col",styleFamily:"minimal-swiss",colorScheme:"light",qualityScore:96,useCount:650,tags:["faq","questions","support","accordion"],html:`<section class="bg-white py-20 lg:py-28"> 254 <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8"> 255 <div class="text-center max-w-2xl mx-auto mb-16"> 256 <span class="text-xs font-bold uppercase tracking-widest text-amber-700">Got Questions?</span> 257 <h2 class="mt-2 text-3xl font-extrabold text-neutral-900 sm:text-4xl">Frequently Asked Questions</h2> 258 </div> 259 <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> 260 <div class="rounded-xl border border-neutral-200 p-6 bg-neutral-50/50"> 261 <h3 class="text-sm font-bold text-neutral-900">Are these sections free to use in commercial projects?</h3> 262 <p class="mt-2 text-xs text-neutral-600 leading-relaxed">Yes! All copied sections can be used freely in personal and commercial web applications, client sites, and software products.</p> 263 </div> 264 <div class="rounded-xl border border-neutral-200 p-6 bg-neutral-50/50"> 265 <h3 class="text-sm font-bold text-neutral-900">How do I integrate with Tailwind CSS?</h3> 266 <p class="mt-2 text-xs text-neutral-600 leading-relaxed">Every component uses standard Tailwind CSS classes. As long as Tailwind is configured in your project, the classes render automatically.</p> 267 </div> 268 <div class="rounded-xl border border-neutral-200 p-6 bg-neutral-50/50"> 269 <h3 class="text-sm font-bold text-neutral-900">Can I generate new sections on demand?</h3> 270 <p class="mt-2 text-xs text-neutral-600 leading-relaxed">Yes, inside Redesignr AI Studio you can type any natural language prompt and generate 6 completely custom section layouts in seconds.</p> 271 </div> 272 <div class="rounded-xl border border-neutral-200 p-6 bg-neutral-50/50"> 273 <h3 class="text-sm font-bold text-neutral-900">Are icons included in the code?</h3> 274 <p class="mt-2 text-xs text-neutral-600 leading-relaxed">Yes, sections use Lucide icon markers and inline SVG elements that render crisply across all modern devices and browsers.</p> 275 </div> 276 </div> 277 </div> 278</section>`},{_id:"sec-cta-banner-06",slug:"gradient-glow-action-banner",category:"cta",typeName:"Full Width Gradient Glow Call to Action",name:"High-Impact Gradient Glow CTA",description:"Full-bleed conversion banner with vibrant gold/amber glowing backdrop, direct sign-up input, and benefit highlights.",layoutArchetype:"centered-stacked",styleFamily:"dark-luxury",colorScheme:"dark",qualityScore:99,useCount:1720,tags:["cta","banner","glow","dark-mode","conversion"],html:`<section class="relative overflow-hidden bg-neutral-950 py-20 lg:py-24 text-white"> 279 <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(217,119,6,0.25),transparent_70%)]"></div> 280 <div class="relative mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 text-center z-10"> 281 <span class="inline-flex items-center gap-2 rounded-full border border-amber-500/30 bg-amber-500/10 px-3 py-1 text-xs font-semibold text-amber-300 mb-6"> 282 ð Modernize Your Web Presence Today 283 </span> 284 <h2 class="text-3xl font-black sm:text-5xl lg:text-6xl tracking-tight leading-tight"> 285 Ready to Build High-Converting Websites with AI? 286 </h2> 287 <p class="mt-6 text-base text-neutral-400 max-w-2xl mx-auto leading-relaxed"> 288 Join 45,000+ developers, designers, and entrepreneurs who use Redesignr to create stunning web interfaces in minutes. 289 </p> 290 <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4"> 291 <a href="/login" class="w-full sm:w-auto px-8 py-4 rounded-xl bg-gradient-to-r from-amber-600 to-amber-400 font-bold text-white text-sm shadow-xl shadow-amber-500/25 hover:opacity-95 transition-all"> 292 Get Started For Free 293 </a> 294 <a href="/sections" class="w-full sm:w-auto px-8 py-4 rounded-xl border border-white/20 bg-white/5 font-semibold text-white text-sm hover:bg-white/10 transition-all"> 295 Browse 10,000+ Sections 296 </a> 297 </div> 298 <p class="mt-6 text-xs text-neutral-500">No credit card required ⢠Instant access ⢠100% free starter tier</p> 299 </div> 300</section>`}];e.s(["GALLERY_FAQS",0,[{q:"What is the Redesignr Sections Gallery?",a:"The Redesignr Sections Gallery is a massive collection of 10,000+ pre-generated, theme-agnostic website UI sections built with Tailwind CSS. You can preview, copy the code directly with one click, or drop and blend them into your website project inside Redesignr AI Studio."},{q:"How do I use these Tailwind CSS sections in my own project?",a:'Every section is 100% standalone HTML styled with standard Tailwind CSS utility classes. Simply click the "Copy HTML" button on any card or detail page, and paste it directly into your HTML, Next.js, React, Vue, or Svelte codebase.'},{q:"Are these sections responsive on mobile and tablets?",a:"Yes, every section is engineered and tested to be fully responsive across mobile phones (375px), tablets (768px), and wide desktop screens (1440px+)."},{q:"Can I customize the colors, typography, and content?",a:"Absolutely! Because they are pure Tailwind CSS markup, you can change class names like text colors, background gradients, padding, and layout flex/grid utilities directly, or use Redesignr AI to restyle them automatically."},{q:"Do I need an account or AI credits to browse and copy sections?",a:"Browsing, searching and previewing the gallery is free and needs no account. Copying the HTML or JSX, downloading a section, or dropping one into your site in Redesignr AI Studio is included in every paid plan â and library sections never cost AI credits."},{q:"How does theme blending work in Redesignr AI Studio?",a:"When you import a section into Redesignr AI Studio, our intelligent blending engine adapts the sectionâs color palette, typography font families, and border radii to match your target websiteâs unique brand design system."}],"SAMPLE_FALLBACK_TEMPLATES",0,t,"SECTION_GALLERY_CATEGORIES",0,{hero:{name:"Hero Sections",singular:"Hero",slug:"hero",tagline:"High-converting, visually striking header sections designed to grab attention in the first 3 seconds.",description:"Discover responsive, modern Hero sections built with Tailwind CSS. Perfect for SaaS products, startups, mobile apps, agencies, and e-commerce websites.",metaTitle:"100+ Free Tailwind CSS Hero Sections & Header Components | redesignr.ai",metaDescription:"Browse free responsive Tailwind CSS Hero section components. Modern split layouts, video backgrounds, bento grid hero cards, and animated call-to-actions.",ke
300ywords:["tailwind hero section","hero component tailwind","responsive hero header","saas hero section","modern landing page hero"],archetypes:["Split Hero with Media","Centered Stacked Hero","Bento Grid Header","Minimal Headline with Social Proof","Full Bleed Video Hero"]},features:{name:"Feature Grids",singular:"Features",slug:"features",tagline:"Showcase product capabilities, architectural workflows, and value propositions with high impact.",description:"Explore feature grids, interactive tabs, bento feature cards, and alternating visual blocks styled with Tailwind CSS.",metaTitle:"Tailwind CSS Feature Grid Components & Bento Layouts | redesignr.ai",metaDescription:"High-converting feature sections and bento grids built with Tailwind CSS. Showcase software features, metrics, and workflows cleanly.",keywords:["tailwind feature grid","bento grid features","feature section tailwind","saas feature showcase","ui feature cards"],archetypes:["3-Column Icon Grid","Asymmetric Bento Box","Alternating Feature Rows","Tabbed Interactive Showcase","Sticky Sidebar Features"]},pricing:{name:"Pricing Tables",singular:"Pricing",slug:"pricing",tagline:"Drive subscriptions and conversions with transparent, persuasive pricing tables and tier comparisons.",description:"Clean, responsive Tailwind CSS pricing tables with monthly/annual billing toggles, featured tier badges, and feature comparison checklists.",metaTitle:"Tailwind CSS Pricing Table Components & Billing Grids | redesignr.ai",metaDescription:"Convert visitors with beautiful Tailwind CSS pricing cards and tables. Includes monthly/annual toggles, badge highlights, and comparison matrices.",keywords:["tailwind pricing table","pricing cards tailwind","saas pricing component","responsive pricing tier","pricing matrix tailwind"],archetypes:["3-Tier Tier Comparison","Highlighted Pro Card","Matrix Feature Comparison","Toggle Monthly/Annual","Minimalist Flat Pricing"]},testimonials:{name:"Testimonials & Proof",singular:"Testimonials",slug:"testimonials",tagline:"Build immediate credibility and trust with authentic customer reviews, star ratings, and social proof.",description:"Responsive customer review cards, quote walls, avatar grids, and marquee testimonial carousels styled with Tailwind CSS.",metaTitle:"Tailwind CSS Testimonials, Reviews & Social Proof Sections | redesignr.ai",metaDescription:"Boost credibility with Tailwind CSS testimonial sections. Modern masonry review cards, avatar grids, star ratings, and client quotes.",keywords:["tailwind testimonials","social proof component","customer review cards tailwind","testimonial carousel","star rating section"],archetypes:["Masonry Review Cards","Large Featured Quote","Avatar Grid with Star Ratings","Marquee Scrolling Testimonials","Video Story Testimonials"]},faq:{name:"FAQ & Accordions",singular:"FAQ",slug:"faq",tagline:"Eliminate customer doubts and improve SEO with clean, expandable accordion FAQ components.",description:"Accessible, responsive FAQ sections and interactive accordion questions crafted in Tailwind CSS.",metaTitle:"Tailwind CSS FAQ Accordion Components & Question Grids | redesignr.ai",metaDescription:"Engage visitors and resolve objections with Tailwind CSS FAQ sections. 2-column grids, smooth accordion disclosures, and support search bars.",keywords:["tailwind faq accordion","faq component tailwind","frequently asked questions ui","expandable accordion tailwind"],archetypes:["2-Column Question Grid","Accordion Disclosure List","Category Filtered FAQ","Minimal Centered FAQ","Split FAQ with Contact Card"]},cta:{name:"Call to Action (CTA)",singular:"CTA",slug:"cta",tagline:"Compel visitors to take immediate action with high-converting banner and card layouts.",description:"Standout call-to-action sections featuring vibrant gradient meshes, glassmorphism overlays, and email capture inputs in Tailwind CSS.",metaTitle:"Tailwind CSS Call to Action (CTA) Components & Banners | redesignr.ai",metaDescription:"Convert ready visitors with high-impact Tailwind CSS CTA sections. Gradient card banners, newsletter captures, and app download prompts.",keywords:["tailwind cta section","call to action component","gradient banner tailwind","conversion cta section"],archetypes:["Gradient Mesh Card Banner","Split Text & Form CTA","Full Bleed Minimal CTA","Floating Glass CTA","Multi-Button Action Banner"]},stats:{name:"Stats & Metrics",singular:"Stats",slug:"stats",tagline:"Highlight numbers, customer milestones, and scale with prominent stat counters and badges.",description:"Display impressive platform statistics, uptime metrics, and scale indicators with clean Tailwind typography.",metaTitle:"Tailwind CSS Stats, Numbers & Metrics Counter Sections | redesignr.ai",metaDescription:"Showcase your company traction and numbers with Tailwind CSS stats sections. 4-column metric counters, progress badges, and milestone cards.",ke
300ywords:["tailwind stats component","metrics counter tailwind","statistics section ui","numbers grid tailwind"],archetypes:["4-Column Metric Bar","Card Based Stats Grid","Split Stat with Narrative","Glow Stat Counter","Minimalist Numbers Band"]},team:{name:"Team & Leadership",singular:"Team",slug:"team",tagline:"Introduce the minds behind your product with elegant member cards, social links, and bios.",description:"Responsive team grids, leadership bios, and advisor showcases built with modern Tailwind CSS utilities.",metaTitle:"Tailwind CSS Team Grid & Member Profile Components | redesignr.ai",metaDescription:"Present your founders and crew with stylish Tailwind CSS team sections. Rounded avatar cards, hover social icons, and role badges.",keywords:["tailwind team section","team members grid","about team ui","founder cards tailwind"],archetypes:["Rounded Avatar Grid","Leadership Bio Cards","Minimal Modern Team","Hover Flip Member Cards","Compact Crew Carousel"]},contact:{name:"Contact Forms",singular:"Contact",slug:"contact",tagline:"Make reaching out effortless with sleek contact forms, office info, and map embeds.",description:"Clean, responsive contact sections with intuitive form inputs, location details, and direct support links.",metaTitle:"Tailwind CSS Contact Form & Support Sections | redesignr.ai",metaDescription:"Streamline lead generation with responsive Tailwind CSS contact forms. Includes split layout info cards, modern input fields, and social support links.",keywords:["tailwind contact form","contact us section ui","support contact component","contact split layout tailwind"],archetypes:["Split Form with Office Details","Floating Card Contact Form","Minimal Centered Reach Out","Interactive Support Form","Multi-Channel Contact Bar"]},logos:{name:"Logo Walls & Trust",singular:"Logos",slug:"logos",tagline:"Highlight trusted brands, investor logos, and press mentions to boost social proof.",description:"Monochrome and full-color logo tickers, client trust bands, and press quote sections in Tailwind CSS.",metaTitle:"Tailwind CSS Logo Wall, Client Tickers & Trust Bands | redesignr.ai",metaDescription:"Show off partner logos and press mentions with Tailwind CSS logo walls. Infinite scrolling tickers, grid logo displays, and trust lines.",keywords:["tailwind logo wall","client logo ticker","trusted by section tailwind","partner logos ui"],archetypes:["Monochrome Logo Grid","Infinite Marquee Ticker","Trust Headline with Logos","Investor & Partner Wall","Press Quote Badge Bar"]},footer:{name:"Footers & Navigation",singular:"Footer",slug:"footer",tagline:"Anchor your website with organized sitemap links, newsletter signups, and copyright details.",description:"Comprehensive multi-column footer layouts, minimalist bottom bars, and newsletter signup footers in Tailwind CSS.",metaTitle:"Tailwind CSS Footer Components & Multi-Column Sitemaps | redesignr.ai",metaDescription:"Wrap your website seamlessly with Tailwind CSS footer sections. Multi-column directory links, newsletter boxes, and social icons.",keywords:["tailwind footer component","responsive website footer","multi column footer tailwind","minimal footer ui"],archetypes:["5-Column Directory Footer","Newsletter Centric Footer","Minimalist Single Row Footer","Mega Sitemap Footer","Branded Footer with Badges"]},about:{name:"About & Story",singular:"About",slug:"about",tagline:"Tell your company story, mission, and values through compelling narrative layouts.",description:"Inspiring company story sections, mission statement blocks, and timeline narratives in Tailwind CSS.",metaTitle:"Tailwind CSS About Us & Company Story Sections | redesignr.ai",metaDescription:"Share your brand story with Tailwind CSS about sections. Mission statements, photo galleries, and milestone timelines.",keywords:["tailwind about section","company story ui","mission statement component","about us tailwind"],archetypes:["Split Image & Mission Story","Values & Principles Bento","Timeline Milestone Journey","Founders Letter Section","Impact & Purpose Grid"]}},"STYLE_OPTIONS",0,[{slug:"all",name:"All Styles"},{slug:"minimal-swiss",name:"Minimal Swiss"},{slug:"editorial-serif",name:"Editorial Serif"},{slug:"bold-brutalist",name:"Bold Brutalist"},{slug:"glass-depth",name:"Glass Depth"},{slug:"gradient-mesh",name:"Gradient Mesh"},{slug:"dark-luxury",name:"Dark Luxury"},{slug:"playful-rounded",name:"Playful Rounded"},{slug:"corporate-trust",name:"Corporate Trust"},{slug:"techno-grid",name:"Techno Grid"},{slug:"warm-earthy",name:"Warm Earthy"},{slug:"monochrome-contrast",name:"Monochrome Contrast"},{slug:"vibrant-pop",name:"Vibrant Pop"},{slug:"cyber-neon",name:"Cyber Neon"},{slug:"soft-pastel",name:"Soft Pastel"},{slug:"startup-modern",name:"Startup Modern"}]])},46347,e=>{"use strict";var t=e.i(96623),a=e.i(73903),r=e.i(5825),s=e.i(1860),i=e.i(84490),l=e.i(19838),n=e.i(40344),o=e.i(90412),d=e.i(43690),c=e.i(5949),m=e.i(17784),u=e.i(46140),p=e.i(60890),x=e.i(38493),b=e.i(14928),g=e.i(55726),h=e.i(4183),f=e.i(95592),w=e.i(50879),y=e.i(72890),v=e.i(27223),k=e.i(79520),C=e.i(81860),S=e.i(5678),j=e.i(61),A=e.i(34774),T=e.i(24168),N=e.i(34076),D=e.i(99430);let F=[{id:"best",label:"Best Quality"},{id:"popular",label:"Most Popular"},{id:"newest",label:"Recently Added"}];function M({lang:e="en",translation:a}){(0,i.useRouter)();let{gatePublic:p,canUsePaid:M}=(0,T.default)(),[B,E]=(0,r.useState)(""),[_,P]=(0,r.useState)("all"),[R,I]=(0,r.useState)("all"),[H,q]=(0,r.useState)("all"),[G,$]=(0,r.useState)("best"),[O,Q]=(0,r.useState)(1),[z,W]=(0,r.useState)([]),[U,Y]=(0,r.useState)(!0),[V,K]=(0,r.useState)(0),[J,X]=(0,r.useState)(!1),[Z,ee]=(0,r.useState)(null),[et,ea]=(0,r.useState)(null),[er,es]=(0,r.useState)(null),[ei,el]=(0,r.useState)("desktop"),[en,eo]=(0,r.useState)("grid"),[ed,ec]=(0,r.useState)(null),em=(0,r.useRef)(null);(0,r.useEffect)(()=>{(0,A.getSectionTemplateFacets)().then(e=>ee(e)).catch(()=>{});{let e=new URLSearchParams(window.location.search),t=e.get("q")||e.get("search"),a=e.get("
300category");t&&E(t),a&&P(a)}},[]);let eu=(0,r.useCallback)(async(e=1,t=!1)=>{Y(!0);try{let a=await (0,A.getSectionTemplates)({category:"all"!==_?_:void 0,style:"all"!==R?R:void 0,colorScheme:"all"!==H?H:void 0,search:B.trim()||void 0,sort:G,page:e,limit:18});if(a?.items&&a.items.length>0)W(e=>t?[...e,...a.items]:a.items),K(a.total||a.items.length),X(!!a.hasMore),Q(a.page||e);else if(!t&&1===e){let e=N.SAMPLE_FALLBACK_TEMPLATES;if("all"!==_&&(e=e.filter(e=>e.category===_)),"all"!==H&&(e=e.filter(e=>e.colorScheme===H)),B.trim()){let t=B.toLowerCase();e=e.filter(e=>e.name.toLowerCase().includes(t)||e.description.toLowerCase().includes(t)||e.category.toLowerCase().includes(t))}W(e),K(e.length),X(!1)}}catch(t){let e=N.SAMPLE_FALLBACK_TEMPLATES;"all"!==_&&(e=e.filter(e=>e.category===_)),"all"!==H&&(e=e.filter(e=>e.colorScheme===H)),W(e),K(e.length),X(!1)}finally{Y(!1)}},[_,R,H,G,B]);(0,r.useEffect)(()=>(clearTimeout(em.current),em.current=setTimeout(()=>{eu(1,!1)},200),()=>clearTimeout(em.current)),[eu]);let ep=p(e=>{let t=e.html||e.blendedHtml||"";t&&(navigator.clipboard.writeText(t),ea(e._id),C.default.success("Tailwind HTML copied to clipboard!"),setTimeout(()=>ea(null),2e3))},"Copying section code"),ex=p(e=>es(e),"Live previews"),eb=(e,t)=>{e.stopPropagation(),ep(t)},eg=p(e=>{let t=e.html||e.blendedHtml||"";if(t){let a=new Blob([t],{type:"text/html"}),r=URL.createObjectURL(a),s=document.createElement("a");s.href=r,s.download=`${e.slug||"section"}.html`,s.click(),URL.revokeObjectURL(r),C.default.success("Downloaded HTML!")}},"Downloading section code"),eh=Object.entries(N.SECTION_GALLERY_CATEGORIES),ef={"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://redesignr.ai/sections#webpage",url:"https://redesignr.ai/sections",name:"10,000+ Free Tailwind CSS Sections Gallery & UI Components | redesignr.ai",description:"Browse, preview, and copy 10,000+ pre-generated responsive Tailwind CSS sections. Hero headers, pricing tables, feature bento grids, and testimonials.",isPartOf:{"@type":"WebSite","@id":"https://redesignr.ai/#website",name:"redesignr.ai",url:"https://redesignr.ai"}},{"@type":"BreadcrumbList","@id":"https://redesignr.ai/sections#breadcrumb",itemListElement:[{"@type":"ListItem",position:1,name:"Home",item:"https://redesignr.ai"},{"@type":"ListItem",position:2,name:"Sections Gallery",item:"https://redesignr.ai/sections"}]},{"@type":"FAQPage","@id":"https://redesignr.ai/sections#faq",mainEntity:N.GALLERY_FAQS.map(e=>({"@type":"Question",name:e.q,acceptedAnswer:{"@type":"Answer",text:e.a}}))}]};return(0,t.jsxs)("div",{className:"min-h-screen bg-transparent text-[#2C1810] dark:text-[#D4C4B0] transition-colors duration-300",children:[(0,t.jsx)("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(ef)}}),(0,t.jsx)(S.default,{translation:a?.nav,lang:e}),(0,t.jsx)("main",{className:"pt-36 sm:pt-44 pb-24 px-4 sm:px-6 lg:px-8",children:(0,t.jsxs)("div",{className:"container mx-auto max-w-7xl",children:[(0,t.jsxs)("div",{className:"text-center max-w-4xl mx-auto mb-14 sm:mb-18",children:[(0,t.jsxs)(l.motion.div,{initial:{scale:.9,opacity:0},animate:{scale:1,opacity:1},transition:{duration:.4},className:"inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-gradient-to-r from-amber-100 to-amber-200/80 dark:from-amber-950/70 dark:to-amber-900/50 text-amber-900 dark:text-amber-300 text-xs font-bold mb-6 border border-amber-300/80 dark:border-amber-700/60 shadow-sm",children:[(0,t.jsx)(d.Sparkles,{className:"w-3.5 h-3.5 text-amber-600 dark:text-amber-400"}),(0,t.jsx)("span",{children:"10,000+ Production-Ready Tailwind CSS Sections"}),(0,t.jsx)("span",{className:"hidden sm:inline opacity-60",children:"⢠Free to Browse"})]}),(0,t.jsx)(l.motion.h1,{initial:{y:-15,opacity:0},animate:{y:0,opacity:1},transition:{delay:.1,duration:.5},className:"text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-r from-[#2C1810] via-[#8B5E2F] to-[#5C3D2E] dark:from-white dark:via-[#D4A853] dark:to-[#C4956A] leading-[1.15]",children:"Explore Public Sections Gallery"}),(0,t.jsxs)(l.motion.p,{initial:{y:15,opacity:0}
300,animate:{y:0,opacity:1},transition:{delay:.2,duration:.5},className:"text-base sm:text-lg text-[#5C3D2E] dark:text-[#C4956A] max-w-3xl mx-auto leading-relaxed",children:["Browse modern, responsive website sections crafted with standard Tailwind CSS utility classes. Copy code with 1-click or customize with ",(0,t.jsx)("span",{className:"font-bold text-[#B87333] dark:text-[#D4A853]",children:"Redesignr AI Studio"}),"."]}),(0,t.jsx)(l.motion.div,{initial:{y:20,opacity:0},animate:{y:0,opacity:1},transition:{delay:.3,duration:.5},className:"mt-8 sm:mt-10 max-w-2xl mx-auto relative",children:(0,t.jsxs)("div",{className:"relative flex items-center",children:[(0,t.jsx)(o.Search,{className:"absolute left-4 w-5 h-5 text-amber-700/60 dark:text-amber-400/60 pointer-events-none"}),(0,t.jsx)("input",{type:"text",placeholder:"Search 10,000+ sections (e.g. 'hero split', 'bento pricing', 'dark testimonials')...",value:B,onChange:e=>E(e.target.value),className:"w-full pl-12 pr-28 py-4 rounded-2xl bg-white dark:bg-[#2C1810]/90 border border-[#D4C4B0] dark:border-[#3C2415] focus:outline-none focus:ring-2 focus:ring-[#D4A853] focus:border-transparent text-sm text-[#2C1810] dark:text-white shadow-xl shadow-amber-900/5 transition-all"}),(0,t.jsx)("div",{className:"absolute right-3.5 flex items-center gap-1.5",children:U?(0,t.jsxs)("div",{className:"flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-amber-100/80 dark:bg-amber-950/60 text-amber-900 dark:text-amber-300 text-[11px] font-semibold",children:[(0,t.jsx)("div",{className:"w-3.5 h-3.5 border-2 border-amber-600 border-t-transparent rounded-full animate-spin"}),(0,t.jsx)("span",{children:"Searching"})]}):B?(0,t.jsx)("button",{type:"button",onClick:()=>E(""),className:"p-1 rounded-full text-neutral-400 hover:text-neutral-600 dar
300k:hover:text-white transition-colors cursor-pointer",title:"Clear search",children:(0,t.jsx)(g.X,{className:"w-4 h-4"})}):null})]})})]}),(0,t.jsxs)("div",{className:"mb-8",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between gap-2 mb-3 px-1",children:[(0,t.jsx)("span",{className:"text-xs font-bold uppercase tracking-wider text-[#8B6914] dark:text-[#C4956A]",children:"Browse by Category"}),(0,t.jsxs)("span",{className:"text-xs font-medium text-neutral-500 dark:text-neutral-400",children:[V," sections found"]})]}),(0,t.jsxs)("div",{className:"flex items-center gap-2 overflow-x-auto pb-3 no-scrollbar scroll-smooth",children:[(0,t.jsx)("button",{type:"button",onClick:()=>P("all"),className:`shrink-0 px-4 py-2 rounded-full text-xs font-bold transition-all border shadow-xs cursor-pointer ${"all"===_?"bg-gradient-to-r from-[#B87333] to-[#D4A853] text-white border-transparent shadow-md":"bg-white dark:bg-[#2C1810]/70 border-[#D4C4B0] dark:border-[#3C2415] text-[#5C3D2E] dark:text-[#D4C4B0] hover:border-[#D4A853]"}`,children:"All Categories"}),eh.map(([e,a])=>(0,t.jsx)("button",{type:"button",onClick:()=>P(e),className:`shrink-0 px-3.5 py-2 rounded-full text-xs font-semibold transition-all border shadow-xs cursor-pointer flex items-center gap-1.5 ${_===e?"bg-gradient-to-r from-[#B87333] to-[#D4A853] text-white border-transparent shadow-md":"bg-white dark:bg-[#2C1810]/70 border-[#D4C4B0] dark:border-[#3C2415] text-[#5C3D2E] dark:text-[#D4C4B0] hover:border-[#D4A853]"}`,children:(0,t.jsx)("span",{children:a.singular||a.name})},e))]})]}),(0,t.jsxs)("div",{className:"p-3.5 sm:p-4 rounded-2xl bg-white/80 dark:bg-[#2C1810]/60 border border-[#D4C4B0] dark:border-[#3C2415] backdrop-blur-md mb-10 flex flex-wrap items-center justify-between gap-4 shadow-sm",children:[(0,t.jsxs)("div",{className:"flex flex-wrap items-center gap-3",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2 text-xs",children:[(0,t.jsx)("span",{className:"font-semibold text-[#8B6914] dark:text-[#C4956A]",children:"Style:"}),(0,t.jsx)("select",{value:R,onChange:e=>I(e.target.value),className:"rounded-xl border border-[#D4C4B0] dark:border-[#3C2415] bg-white dark:bg-[#2C1810] px-3 py-1.5 text-xs font-medium text-[#2C1810] dark:text-white focus:outline-none focus:ring-1 focus:ring-[#D4A853] cursor-pointer shadow-2xs",children:N.STYLE_OPTIONS.map(e=>(0,t.jsx)("option",{value:e.slug,children:e.name},e.slug))})]}),(0,t.jsx)("div",{className:"flex items-center gap-1 p-0.5 rounded-xl border border-[#D4C4B0] dark:border-[#3C2415] bg-neutral-100/80 dark:bg-[#1A0F0A]",children:[{id:"all",label:"All Modes"},{id:"dark",label:"Dark",icon:(0,t.jsx)(b.Moon,{className:"w-3 h-3"})},{id:"light",label:"Light",icon:(0,t.jsx)(x.Sun,{className:"w-3 h-3"})}].map(e=>(0,t.jsxs)("button",{type:"button",onClick:()=>q(e.id),className:`px-2.5 py-1 rounded-lg text-xs font-semibold flex items-center gap-1 transition-all cursor-pointer ${H===e.id?"bg-white dark:bg-[#2C1810] text-[#2C1810] dark:text-white shadow-xs font-bold":"text-[#8B6914] dark:text-[#C4956A]"}`,children:[e.icon,(0,t.jsx)("span",{children:e.label})]},e.id))})]}),(0,t.jsxs)("div",{className:"flex items-center gap-3",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2 text-xs",children:[(0,t.jsx)("span",{className:"font-semibold text-[#8B6914] dark:text-[#C4956A]",children:"Sort:"}),(0,t.jsx)("select",{value:G,onChange:e=>$(e.target.value),className:"rounded-xl border border-[#D4C4B0] dark:border-[#3C2415] bg-white dark:bg-[#2C1810] px-3 py-1.5 text-xs font-medium text-[#2C1810] dark:text-white focus:outline-none focus:ring-1 focus:ring-[#D4A853] cursor-pointer shadow-2xs",children:F.map(e=>(0,t.jsx)("option",{value:e.id,children:e.label},e.id))})]}),(0,t.jsxs)(s.default,{href:"/dashboard",className:"inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl bg-gradient-to-r from-[#B87333] to-[#D4A853] text-white text-xs font-bold shadow-md hover:opacity-95 transition-all",children:[(0,t.jsx)(k.Wand2,{className:"w-3.5 h-3.5"}),(0,t.jsx)("span",{children:"Open AI Studio"})]})]})]}),U&&0===z.length?(0,t.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8",children:Array.from({length:6}).map((e,a)=>(0,t.jsxs)("div",{className:"rounded-2xl border border-[#D4C4B0] dark:border-[#3C2415] bg-white/60 dark:bg-[#2C1810]/40 overflow-hidden animate-pulse",children:[(0,t.jsx)("div",{className:"h-48 bg-neutral-200/70 dark:bg-[#140C07]"}),(0,t.jsxs)("div",{className:"p-4 space-y-3",children:[(0,t.jsx)("div",{className:"h-4 bg-neutral-200/80 dark:bg-neutral-800 rounded w-3/4"}),(0,t.jsx)("div",{className:"h-3 bg-neutral-200/60 dark:bg-neutral-800 rounded w-full"}),(0,t.jsx)("div",{className:"h-3 bg-neutral-200/60 dark:bg-neutral-800 rounded w-2/3"})]})]},a))}):0===z.length?(0,t.jsxs)("div",{className:"text-center py-16 bg-white/60 dark:bg-[#2C1810]/40 rounded-3xl border border-[#D4C4B0] dark:border-[#3C2415] p-8 max-w-2xl mx-auto
300shadow-sm",children:[(0,t.jsx)("div",{className:"w-14 h-14 rounded-2xl bg-amber-100 dark:bg-amber-950/60 text-amber-700 dark:text-amber-400 flex items-center justify-center mx-auto mb-4 border border-amber-300/50",children:(0,t.jsx)(o.Search,{className:"w-7 h-7"})}),B.trim()?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("h3",{className:"text-xl font-bold mb-2",children:['No sections match "',B,'" ',"all"!==_?`in ${_}`:""]}),(0,t.jsx)("p",{className:"text-sm text-[#5C3D2E] dark:text-[#C4956A] mb-6 leading-relaxed",children:"all"!==_?`We couldn't find any ${_} sections matching "${B}". Would you like to search across all categories?`:"Try adjusting your search terms or resetting filters."}),(0,t.jsxs)("div",{className:"flex flex-wrap items-center justify-center gap-3",children:["all"!==_&&(0,t.jsxs)("button",{type:"button",onClick:()=>P("all"),className:"px-6 py-3 rounded-xl bg-gradient-to-r from-[#B87333] to-[#D4A853] text-white text-xs font-bold shadow-md hover:scale-105 transition-all flex items-center gap-2 cursor-pointer",children:[(0,t.jsx)(d.Sparkles,{className:"w-4 h-4"}),(0,t.jsxs)("span",{children:['Search "',B,'" in All Categories']})]}),(0,t.jsx)("button",{type:"button",onClick:()=>{E(""),P("all"),I("all"),q("all")},className:"px-5 py-3 rounded-xl bg-white dark:bg-[#2C1810] border border-[#D4C4B0] dark:border-[#3C2415] text-[#2C1810] dark:text-white text-xs font-bold hover:bg-neutral-50 transition-all cursor-pointer",children:"Reset All Filters"})]})]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("h3",{className:"text-lg font-bold mb-2",children:"No sections match your criteria"}),(0,t.jsx)("p",{className:"text-sm text-[#5C3D2E] dark:text-[#C4956A] max-w-md mx-auto mb-6",children:"Try changing your category filter, clearing your search query, or switching the color mode."}),(0,t.jsx)("button",{type:"button",onClick:()=>{P("all"),I("all"),q("all"),E("")},className:"px-5 py-2.5 rounded-xl bg-gradient-to-r from-[#B87333] to-[#D4A853] text-white text-xs font-bold shadow-md cursor-pointer",children:"Reset All Filters"})]})]}):(0,t.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8",children:z.map(e=>(0,t.jsx)(L,{variant:e,onExpand:()=>ex(e),onCopy:t=>eb(t,e),onDownload:t=>{t.stopPropagation(),eg(e)},isCopied:et===e._id,locked:!M},e._id||e.slug))}),J&&(0,t.jsx)("div",{className:"mt-12 text-center",children:(0,t.jsx)("button",{type:"button",onClick:()=>eu(O+1,!0),disabled:U,className:"px-8 py-3.5 rounded-2xl bg-white dark:bg-[#2C1810] border border-[#D4C4B0] dark:border-[#3C2415] hover:border-[#D4A853] text-sm font-bold text-[#2C1810] dark:text-white shadow-md hover:shadow-lg transition-all cursor-pointer disabled:opacity-50",children:U?"Loa
300ding More Sections...":"Load More Sections"})}),(0,t.jsxs)("div",{className:"mt-24 pt-16",children:[(0,t.jsxs)("div",{className:"text-center max-w-3xl mx-auto mb-12",children:[(0,t.jsx)("span",{className:"text-xs font-bold uppercase tracking-widest text-[#B87333] dark:text-[#D4A853]",children:"Component Catalog"}),(0,t.jsx)("h2",{className:"mt-2 text-2xl sm:text-3xl font-bold",children:"Browse Sections by UI Category"}),(0,t.jsx)("p",{className:"mt-3 text-sm text-[#5C3D2E] dark:text-[#C4956A]",children:"Dedicated design libraries optimized for every block on your landing page."})]}),(0,t.jsx)("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6",children:eh.map(([e,a])=>(0,t.jsxs)(s.default,{href:`/sections/${e}`,className:"group p-6 rounded-2xl bg-white/70 dark:bg-[#2C1810]/40 border border-[#D4C4B0] dark:border-[#3C2415] hover:border-[#D4A853] transition-all duration-300 shadow-sm hover:shadow-md flex flex-col justify-between",children:[(0,t.jsxs)("div",{children:[(0,t.jsxs)("div",{className:"flex items-center justify-between mb-3",children:[(0,t.jsx)("h3",{className:"text-base font-bold text-[#2C1810] dark:text-white group-hover:text-amber-700 dark:group-hover:text-amber-400 transition-colors",children:a.name}),(0,t.jsx)(y.ArrowRight,{className:"w-4 h-4 text-[#8B6914] group-hover:translate-x-1 transition-transform"})]}),(0,t.jsx)("p",{className:"text-xs text-[#5C3D2E] dark:text-[#C4956A] leading-relaxed line-clamp-2",children:a.tagline})]}),(0,t.jsx)("div",{className:"mt-4 flex flex-wrap gap-1",children:a.archetypes.slice(0,2).map(e=>(0,t.jsx)("span",{className:"text-[10px] px-2 py-0.5 rounded-md bg-amber-100/60 dark:bg-[#1A0F0A] text-amber-900 dark:text-amber-300 font-medium",children:e},e))})]},e))})]}),(0,t.jsxs)("div",{className:"mt-24 pt-16 max-w-4xl mx-auto",children:[(0,t.jsxs)("div",{className:"text-center mb-12",children:[(0,t.jsx)("span",{className:"text-xs font-bold uppercase tracking-widest text-[#B87333] dark:text-[#D4A853]",children:"Common Questions"}),(0,t.jsx)("h2",{className:"mt-2 text-2xl sm:text-3xl font-bold",children:"Frequently Asked Questions"})]}),(0,t.jsx)("div",{className:"space-y-4",children:N.GALLERY_FAQS.map((e,a)=>{let r=ed===a;return(0,t.jsxs)("div",{className:"rounded-2xl border border-[#D4C4B0] dark:border-[#3C2415] bg-white/70 dark:bg-[#2C1810]/50 overflow-hidden transition-all shadow-xs",children:[(0,t.jsxs)("button",{type:"button",onClick:()=>ec(r?null:a),className:"w-full p-5 text-left flex items-center justify-between gap-4 font-bold text-sm text-[#2C1810] dark:text-white cursor-pointer",children:[(0,t.jsx)("span",{children:e.q}),(0,t.jsx)(v.ChevronDown,{className:`w-4 h-4 text-amber-600 transition-transform duration-300 ${r?"rotate-180":""}`})]}),(0,t.jsx)(n.AnimatePresence,{children:r&&(0,t.jsx)(l.motion.div,{initial:{height:0,opacity:0},animate:{height:"auto",opacity:1},exit:{height:0,opacity:0},className:"px-5 pb-5 text-xs text-[#5C3D2E] dark:text-[#C4956A] leading-relaxed border-t border-[#D4C4B0]/30 dark:border-[#3C2415]/30 pt-3",children:e.a})})]},a)})})]}),(0,t.jsxs)("div",{className:"mt-24 p-8 sm:p-12 rounded-3xl bg-gradient-to-br from-[#B87333] via-amber-700 to-[#8B5E2F] text-white text-center shadow-2xl shadow-amber-600/20 relative overflow-hidden",children:[(0,t.jsx)("div",{className:"absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.2),transparent_70%)] pointer-events-none"}),(0,t.jsx)("h2",{className:"text-3xl sm:text-4xl font-extrabold mb-4 relative z-10",children:"Build and Redesign Entire Sites with AI"}),(0,t.jsx)("p",{className:"text-sm sm:text-base text-amber-100 max-w-2xl mx-auto mb-8 relative z-10 leading-relaxed",children:"Need a complete landing page redesign with matching brand tokens, smart page sync, and clean code generation? Try Redesignr AI."}),(0,t.jsxs)("div",{className:"flex flex-col sm:flex-row gap-4 justify-center relative z-10",children:[(0,t.jsx)(s.default,{href:"/login",className:"px-8 py-4 rounded-2xl bg-white text-amber-900 font-bold text-sm hover:scale-105 active:scale-95 transition-all shadow-lg",children:"Start Free Redesign"}),(0,t.jsx)("a",{href:"https://discord.gg/mg7Z4XeF3k",target:"_blank",rel:"noreferrer",className:"px-8 py-4 rounded-2xl bg-amber-900/40 border border-white/20 text-white font-bold text-sm hover:bg-amber-900/60 transition-all",children:"Join Community"})]})]})]})}),(0,t.jsx)(n.AnimatePresence,{children:er&&(0,t.jsx)(l.motion.div,{initial:{opacity:0}
300,animate:{opacity:1},exit:{opacity:0},className:"fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-md",onClick:()=>es(null),children:(0,t.jsxs)(l.motion.div,{initial:{scale:.95,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.95,opacity:0},onClick:e=>e.stopPropagation(),className:"w-full max-w-6xl h-[90vh] bg-white dark:bg-[#1A0F0A] rounded-3xl border border-neutral-200 dark:border-[#3C2415] shadow-2xl flex flex-col overflow-hidden",children:[(0,t.jsxs)("div",{className:"p-4 border-b border-neutral-200 dark:border-[#3C2415] flex flex-wrap items-center justify-between gap-4 bg-neutral-50 dark:bg-[#140C07]",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)("h3",{className:"text-base font-bold text-[#2C1810] dark:text-white",children:er.name}),(0,t.jsxs)("div",{className:"flex items-center gap-2 mt-1",children:[(0,t.jsx)("span",{className:"text-[11px] font-semibold text-amber-700 dark:text-amber-400 capitalize",children:er.category}),(0,t.jsx)("span",{className:"text-[11px] text-neutral-400",children:"â¢"}),(0,t.jsx)("span",{className:"text-[11px] text-neutral-500",children:er.styleFamily||"Minimal Swiss"})]})]}),(0,t.jsxs)("div",{className:"flex items-center gap-1 p-1 rounded-xl bg-neutral-200/80 dark:bg-[#2C1810] border border-neutral-300 dark:border-neutral-800",children:[(0,t.jsxs)("button",{type:"button",onClick:()=>el("desktop"),title:"Desktop view",className:`p-1.5 rounded-lg text-xs font-semibold flex items-center gap-1 transition-all ${"desktop"===ei?"bg-white dark:bg-[#1A0F0A] text-amber-700 dark:text-white shadow-xs":"text-neutral-500"}`,children:[(0,t.jsx)(h.Laptop,{className:"w-3.5 h-3.5"}),(0,t.jsx)("span",{className:"hidden sm:inline",children:"Desktop"})]}),(0,t.jsxs)("button",{type:"button",onClick:()=>el("tablet"),title:"Tablet view (768px)",className:`p-1.5 rounded-lg text-xs font-semibold flex items-center gap-1 transition-all ${"tablet"===ei?"bg-white dark:bg-[#1A0F0A] text-amber-700 dark:text-white shadow-xs":"text-neutral-500"}`,children:[(0,t.jsx)(f.Tablet,{className:"w-3.5 h-3.5"}),(0,t.jsx)("span",{className:"hidden sm:inline",children:"Tablet"})]}),(0,t.jsxs)("button",{type:"button",onClick:()=>el("mobile"),title:"Mobile view (375px)",className:`p-1.5 rounded-lg text-xs font-semibold flex items-center gap-1 transition-all ${"mobile"===ei?"bg-white dark:bg-[#1A0F0A] text-amber-700 dark:text-white shadow-xs":"text-neutral-500"}`,children:[(0,t.jsx)(w.Smartphone,{className:"w-3.5 h-3.5"}),(0,t.jsx)("span",{className:"hidden sm:inline",children:"Mobile"})]})]}),(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsxs)("button",{type:"button",onClick:e=>eb(e,er),className:"px-3.5 py-1.5 rounded-xl bg-gradient-to-r from-[#B87333] to-[#D4A853] text-white text-xs font-bold flex items-center gap-1.5 shadow-sm hover:opacity-95",children:[et===er._id?(0,t.jsx)(u.Check,{className:"w-3.5 h-3.5"}):M?(0,t.jsx)(c.Copy,{className:"w-3.5 h-3.5"}):(0,t.jsx)(m.Lock,{className:"w-3.5 h-3.5"}),(0,t.jsx)("span",{children:et===er._id?"Copied HTML!":"Copy HTML"})]}),(0,t.jsx)("button",{type:"button",onClick:()=>es(null),className:"p-1.5 rounded-xl text-neutral-400 hover:text-neutral-600 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors",children:(0,t.jsx)(g.X,{className:"w-5 h-5"})})]})]}),(0,t.jsx)("div",{className:"flex-1 bg-neutral-900/5 dark:bg-black p-4 flex items-center justify-center overflow-auto",children:(0,t.jsx)("div",{className:"bg-white dark:bg-black rounded-2xl shadow-xl border border-neutral-300 dark:border-neutral-800 overflow-hidden transition-all duration-300 h-full",style:{width:(()=>{switch(ei){case"mobile":return"375px";case"tablet":return"768px";default:return"100%"}})(),maxWidth:"100%"},children:(0,t.jsx)("iframe",{srcDoc:(0,D.buildSectionPreviewDoc)(er.html||er.blendedHtml),title:er.name,className:"w-full h-full border-0",sandbox:"allow-scripts allow-same-origin"})})})]})})}),(0,t.jsx)(j.default,{translation:a?.footer,lang:e})]})}function L(e){let i,l,n,o,d,x,b,g,h,f,w,v,k,C,S,j,A,T,N,F,M,L,B,E,_,P,R,I,H,q,G,$,O,Q,z,W,U,Y,V,K,J,X=(0,a.c)(93),{variant:Z,onExpand:ee,onCopy:et,isCopied:ea,locked:er}=e,es=void 0!==er&&er,ei=(0,r.useRef)(null),el=(0,r.useRef)(null),[en,eo]=(0,r.useState)(.26),[ed,ec]=(0,r.useState)(720),[em,eu]=(0,r.useState)(!1);X[0]===Symbol.for("react.memo_cache_sentinel")?(i=()=>{let e=el.current?.contentDocument,t=e?.body?.scrollHeight;t&&t>40&&ec(t)},X[0]=i):i=X[0];let ep=i;X[1]===Symbol.for("react.memo_cache_sentinel")?(l=[],X[1]=l):l=X[1];let ex=(0,r.useRef)(l);X[2]===Symbol.for("react.memo_cache_sentinel")?(n=()=>{ep(),ex.current.forEach(clearTimeout),ex.current=[120,500,1200].map(e=>setTimeout(ep,e))},X[2]=n):n=X[2];let eb=n;X[3]===Symbol.for("react.memo_cache_sentinel")?(o=()=>()=>ex.current.forEach(clearTimeout),d=[],X[3]=o,X[4]=d):(o=X[3],d=X[4]),(0,r.useEffect)(o,d),X[5]===Symbol.for("react.memo_cache_sentinel")?(x=()=>{let e=ei.current;if(!e||"undefined"==typeof ResizeObserver)return;let t=new ResizeObserver(e=>{let[t]=e,a=t.contentRect.width;a>0&&eo(a/1440)});return t.observe(e),()=>t.disconnect()},b=[],X[5]=x,X[6]=b):(x=X[5],b=X[6]),(0,r.useEffect)(x,b);let eg=Z.html||Z.blendedHtml;
300X[7]!==eg?(g=(0,D.buildSectionPreviewDoc)(eg),X[7]=eg,X[8]=g):g=X[8];let eh=g;X[9]===Symbol.for("react.memo_cache_sentinel")?(h=()=>eu(!0),f=()=>eu(!1),X[9]=h,X[10]=f):(h=X[9],f=X[10]);let ef=`${Math.min(260,Math.max(160,ed*en))}px`;X[11]!==ef?(w={height:ef},X[11]=ef,X[12]=w):w=X[12];let ew=`${ed}px`,ey=`scale(${en})`;X[13]!==ew||X[14]!==ey?(v={width:"1440px",height:ew,transform:ey,transformOrigin:"top left"},X[13]=ew,X[14]=ey,X[15]=v):v=X[15],X[16]!==eh||X[17]!==v||X[18]!==Z.name?(k=(0,t.jsx)("iframe",{ref:el,srcDoc:eh,title:Z.name,tabIndex:-1,scrolling:"no",onLoad:eb,sandbox:"allow-scripts allow-same-origin",className:"border-0 pointer-events-none origin-top-left absolute top-0 left-0",style:v}),X[16]=eh,X[17]=v,X[18]=Z.name,X[19]=k):k=X[19];let ev=`absolute inset-0 bg-black/60 backdrop-blur-[2px] flex items-center justify-center gap-2 p-3 transition-opacity duration-200 ${em?"opacity-100":"opacity-0 pointer-events-none"}`,ek=`/sections/${Z.category||"general"}/${Z.slug||Z._id}`;X[20]===Symbol.for("react.memo_cache_sentinel")?(C=(0,t.jsx)("span",{children:"View Details"}),S=(0,t.jsx)(y.ArrowRight,{className:"w-3.5 h-3.5"}),X[20]=C,X[21]=S):(C=X[20],S=X[21]),X[22]!==ek?(j=(0,t.jsxs)(s.default,{href:ek,className:"px-3 py-2 rounded-xl bg-gradient-to-r from-[#B87333] to-[#D4A853] text-white text-xs font-bold flex items-center gap-1.5 shadow-lg hover:scale-105 active:scale-95 transition-all cursor-pointer",children:[C,S]}),X[22]=ek,X[23]=j):j=X[23];let eC=es?"Live preview is part of our paid plans":"Open live preview";X[24]!==es?(A=es?(0,t.jsx)(m.Lock,{className:"w-3.5 h-3.5"}):(0,t.jsx)(p.Maximize2,{className:"w-3.5 h-3.5"}),X[24]=es,X[25]=A):A=X[25],X[26]===Symbol.for("react.memo_cache_sentinel")?(T=(0,t.jsx)("span",{children:"Preview"}),X[26]=T):T=X[26],X[27]!==ee||X[28]!==eC||X[29]!==A?(N=(0,t.jsxs)("button",{type:"button",onClick:ee,title:eC,className:"px-3 py-2 rounded-xl bg-white text-neutral-900 text-xs font-bold flex items-center gap-1.5 shadow-lg hover:scale-105 active:scale-95 transition-all cursor-pointer",children:[A,T]}),X[27]=ee,X[28]=eC,X[29]=A,X[30]=N):N=X[30];let eS=es?"Copying code is part of our paid plans":"Copy HTML";X[31]!==ea||X[32]!==es?(F=ea?(0,t.jsx)(u.Check,{className:"w-4 h-4 text-emerald-400"}):es?(0,t.jsx)(m.Lock,{className:"w-4 h-4"}):(0,t.jsx)(c.Copy,{className:"w-4 h-4"}),X[31]=ea,X[32]=es,X[33]=F):F=X[33],X[34]!==et||X[35]!==eS||X[36]!==F?(M=(0,t.jsx)("button",{type:"button",onClick:et,className:"p-2 rounded-xl bg-black/40 hover:bg-black/60 text-white text-xs border border-white/20 shadow-lg hover:scale-105 transition-all cursor-pointer",title:eS,children:F}),X[34]=et,X[35]=eS,X[36]=F,X[37]=M):M=X[37],X[38]!==ev||X[39]!==j||X[40]!==N||X[41]!==M?(L=(0,t.jsxs)("div",{className:ev,children:[j,N,M]}),X[38]=ev,X[39]=j,X[40]=N,X[41]=M,X[42]=L):L=X[42],X[43]!==Z.category?(B=(0,t.jsx)("span",{className:"px-2.5 py-1 rounded-lg text-[10.5px] font-bold uppercase tracking-wider bg-black/75 text-white backdrop-blur-md shadow-xs",children:Z.category}),X[43]=Z.category,X[44]=B):B=X[44],X[45]!==Z.colorScheme?(E=Z.colorScheme&&(0,t.jsx)("span",{className:"px-2 py-0.8 rounded-lg text-[10px] font-semibold bg-white/90 dark:bg-[#2C1810]/95 text-neutral-800 dark:text-neutral-200 backdrop-blur-md shadow-xs border border-white/20",children:Z.colorScheme}),X[45]=Z.colorScheme,X[46]=E):E=X[46],X[47]!==B||X[48]!==E?(_=(0,t.jsxs)("div",{className:"absolute top-3 left-3 flex items-center gap-1.5 pointer-events-none",children:[B,E]}
300),X[47]=B,X[48]=E,X[49]=_):_=X[49],X[50]!==w||X[51]!==k||X[52]!==L||X[53]!==_?(P=(0,t.jsxs)("div",{ref:ei,className:"relative w-full overflow-hidden bg-neutral-100 dark:bg-black border-b border-neutral-200/80 dark:border-[#3C2415]",style:w,children:[k,L,_]}),X[50]=w,X[51]=k,X[52]=L,X[53]=_,X[54]=P):P=X[54];let ej=`/sections/${Z.category||"general"}/${Z.slug||Z._id}`;X[55]!==ej||X[56]!==Z.name?(R=(0,t.jsx)(s.default,{href:ej,className:"text-sm font-bold text-[#2C1810] dark:text-white leading-snug line-clamp-1 group-hover:text-amber-700 dark:group-hover:text-amber-400 transition-colors block hover:underline",children:Z.name}),X[55]=ej,X[56]=Z.name,X[57]=R):R=X[57];let eA=Z.description||`${Z.typeName||Z.category} styled with responsive Tailwind CSS.`;X[58]!==eA?(I=(0,t.jsx)("p",{className:"mt-1.5 text-xs text-[#5C3D2E] dark:text-[#C4956A] line-clamp-2 leading-relaxed",children:eA}),X[58]=eA,X[59]=I):I=X[59],X[60]!==R||X[61]!==I?(H=(0,t.jsxs)("div",{children:[R,I]}),X[60]=R,X[61]=I,X[62]=H):H=X[62],X[63]!==Z.layoutArchetype?(q=Z.layoutArchetype&&(0,t.jsx)("span",{className:"px-2 py-0.5 rounded-md text-[10.5px] font-mono bg-neutral-100 dark:bg-[#2C1810] text-neutral-600 dar
300k:text-neutral-300 border border-neutral-200 dark:border-[#3C2415]",children:Z.layoutArchetype}),X[63]=Z.layoutArchetype,X[64]=q):q=X[64],X[65]!==Z.styleFamily?(G=Z.styleFamily&&(0,t.jsx)("span",{className:"px-2 py-0.5 rounded-md text-[10px] font-medium bg-amber-50 dark:bg-amber-950/40 text-amber-800 dark:text-amber-300 border border-amber-200/50 dark:border-amber-900/30",children:Z.styleFamily}),X[65]=Z.styleFamily,X[66]=G):G=X[66],X[67]!==q||X[68]!==G?($=(0,t.jsxs)("div",{className:"flex items-center gap-1.5 flex-wrap",children:[q,G]}),X[67]=q,X[68]=G,X[69]=$):$=X[69];let eT=`/sections/${Z.category||"general"}/${Z.slug||Z._id}`;X[70]===Symbol.for("react.memo_cache_sentinel")?(O=(0,t.jsx)("span",{children:"Details"}),Q=(0,t.jsx)(y.ArrowRight,{className:"w-3 h-3"}),X[70]=O,X[71]=Q):(O=X[70],Q=X[71]),X[72]!==eT?(z=(0,t.jsxs)(s.default,{href:eT,className:"px-2.5 py-1.5 rounded-lg border border-[#D4C4B0] dark:border-[#3C2415] hover:border-[#D4A853] text-[11px] font-bold text-amber-800 dark:text-amber-300 hover:bg-[#F5E6C8]/60 dark:hover:bg-[#2C1810] transition-colors flex items-center gap-1",children:[O,Q]}),X[72]=eT,X[73]=z):z=X[73];let eN=es?"Copying code is part of our paid plans":"Copy Tailwind HTML";return X[74]!==ea||X[75]!==es?(W=ea?(0,t.jsx)(u.Check,{className:"w-3.5 h-3.5 text-emerald-600"}):es?(0,t.jsx)(m.Lock,{className:"w-3.5 h-3.5"}):(0,t.jsx)(c.Copy,{className:"w-3.5 h-3.5"}),X[74]=ea,X[75]=es,X[76]=W):W=X[76],X[77]!==et||X[78]!==eN||X[79]!==W?(U=(0,t.jsx)("button",{type:"button",onClick:et,title:eN,className:"p-1.5 rounded-lg border border-[#D4C4B0] dark:border-[#3C2415] hover:border-[#D4A853] text-neutral-600 dar
300k:text-neutral-400 hover:text-amber-700 transition-colors cursor-pointer bg-neutral-50 dark:bg-[#2C1810]/40",children:W}),X[77]=et,X[78]=eN,X[79]=W,X[80]=U):U=X[80],X[81]!==z||X[82]!==U?(Y=(0,t.jsxs)("div",{className:"flex items-center gap-1.5",children:[z,U]}),X[81]=z,X[82]=U,X[83]=Y):Y=X[83],X[84]!==$||X[85]!==Y?(V=(0,t.jsxs)("div",{className:"mt-4 pt-3.5 border-t border-neutral-100 dark:border-[#3C2415]/70 flex items-center justify-between",children:[$,Y]}),X[84]=$,X[85]=Y,X[86]=V):V=X[86],X[87]!==H||X[88]!==V?(K=(0,t.jsxs)("div",{className:"p-4 sm:p-5 flex-1 flex flex-col justify-between",children:[H,V]}),X[87]=H,X[88]=V,X[89]=K):K=X[89],X[90]!==P||X[91]!==K?(J=(0,t.jsxs)("div",{onMouseEnter:h,onMouseLeave:f,className:"group rounded-2xl bg-white/70 dark:bg-[#2C1810]/40 border border-[#D4C4B0] dark:border-[#3C2415] hover:border-[#D4A853] overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col justify-between",children:[P,K]}),X[90]=P,X[91]=K,X[92]=J):J=X[92],J}e.s(["default",()=>M])}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.