https://makelane.ai/assets/Store-BVpyXHlH.js

1import{r as s,j as e,L as x,u as B}from"./index-Bj4e8vdO.js";import{R as k}from"./Reveal-CPq_MHYa.js";import{S as z}from"./SectionHeading-Bka3NQmn.js";import{H as O}from"./HelpBeacon-CmKdrxa7.js";import{o as T,c as P,n as F,i as W,cA as I,C as S,a as q,m as j,X as D,S as G,D as C,p as Q,O as Y,cB as K}from"./App-CnwSKRsr.js";import{C as U}from"./copy-CRf6lmcK.js";import{L as V}from"./lock-DQWoJQ3Q.js";import"./use-reduced-motion-bmZhLwtP.js";const J=[{id:"all",label:"Everything",blurb:"The whole shelf"},{id:"prompt",label:"Prompt packs",blurb:"Injectable AI prompts, curated"},{id:"effect",label:"Effect recipes",blurb:"Drop-in motion & atmosphere"},{id:"template",label:"Templates",blurb:"Whole starter builds"},{id:"tool",label:"Tools",blurb:"Things you install & run"}],M={prompt:"Prompt pack",effect:"Effect recipe",template:"Template",tool:"Tool"},N=[{id:"lib-pack-heroes",title:"Hero Pack",tagline:"Six openers that stop the scroll.",type:"prompt",credits:500,accent:"cyan",bullets:["6 production hero prompts","Mesh, split, orbit, manifesto layouts","Brand-token aware — paste and pour"],deliverables:[{title:"Aurora Mesh Hero",body:"Build a full-viewport hero with a slow aurora-mesh background (3 blurred radial gradients drifting on a 24s loop, brand accent + a cool complement), a thin-weight display headline (clamp 40–88px) that reveals with a line-mask wipe on load, one supporting line at 60% opacity, and a single magnetic CTA that breathes a soft glow. Respect prefers-reduced-motion. Tokens only — no hard-coded colors."},{title:"Editorial Split Hero",body:"A 1.25fr / .75fr split hero: left column carries a serif-display headline and a two-sentence deck; right column holds a bordered media card that parallaxes ~8% slower than scroll. A hairline rule and an uppercase mono eyebrow above the headline. Fully responsive: stack on mobile, media first."},{title:"Orbit Hero",body:"Center a wordmark with 2–3 concentric dashed orbit rings rotating at different slow speeds; small nodes ride the rings. Headline below. Canvas or CSS conic-gradient rings; pause on reduced-motion."},{title:"Manifesto Hero",body:"A text-only manifesto hero: 3 short declarative lines, each rising in on scroll with a 70ms stagger, the last line in the brand accent. Generous leading, max-width 20ch, a blinking caret at the end."},{title:"Wall Hero",body:"A tiled 'wall' hero: a masonry grid of 8–12 muted cards behind a darkening vignette, one headline floating centered above with a backdrop-blur plate. Cards drift subtly on mouse-move (desktop only)."},{title:"Liquid Descent Hero",body:"Full-bleed hero where a meniscus line divides 'air' (top) from 'melt' (bottom); the wordmark stands on the surface with a rippling reflection. WebGL if available, gradient fallback otherwise. Reduced-motion → still frame."}]},{id:"lib-pack-conversion",title:"Conversion Kit",tagline:"The sections that close.",type:"prompt",credits:500,accent:"violet",bullets:["Pricing, testimonials, FAQ, stats","Objection-handling copy scaffolds","A/B-ready structure"],deliverables:[{title:"Pricing Section",body:"Three-tier pricing with a highlighted middle plan (scale 1.04, accent border, 'Most popular' ribbon), per-feature checklist, monthly/annual toggle that animates the price with a count-up, and a reassurance line under each CTA. Tokenized, AA contrast on every interactive element."},{title:"Testimonials Band",body:"A quote band: one large pull-quote that cross-fades through 3–4 testimonials every 7s (pausable), attribution with role + logo, and a subtle grain overlay. Keyboard-navigable dots."},{title:"FAQ Accordion",body:"Accessible FAQ using native <details>: 6–8 Q&As, chevron rotates on open, one-open-at-a-time optional, smooth height. Content answers the top objections for the brand's category."},{title:"Stats Strip",body:"A 3–4 metric strip with huge tabular-nums numerals that count up when scrolled into view, an eased curve, and a one-line context under each. Never fake — placeholders labeled as such."}]},{id:"lib-pack-sections",title:"Section Pack",tagline:"The body of every page.",type:"prompt",credits:500,accent:"magenta",bullets:["Bento, feature grid, logos, team","Reveal-on-scroll baked in","Consistent rhythm & spacing"],deliverables:[{title:"Bento Feature Grid",body:"An asymmetric bento grid (one 2×2 hero tile + smaller tiles), each tile a feature with an icon, a bold line, and a supp

1orting sentence; tiles lift and their borders brighten on hover; reveal on scroll with a slight stagger."},{title:"Logo Wall",body:"A trust strip of 8–12 client/partner logos in a muted single-color treatment that colorizes on hover; auto-scrolling marquee on mobile, static grid on desktop; 'as seen in' mono eyebrow."},{title:"Team Grid",body:"A team section: portrait cards (or monogram fallbacks), name, role, and a one-line bio that expands on click; subtle tilt on hover; deliberately international, balanced grid."},{title:"Steps / Process",body:"A numbered process timeline (only if the content is genuinely sequential): connected nodes down a brass hairline, each step titled with a short body, the active step emphasized as it enters the viewport."}]},{id:"fx-pack-atmosphere",title:"Atmosphere Pack",tagline:"Depth, light, and grain — engineered.",type:"effect",credits:300,accent:"amber",bullets:["Aurora, cursor spotlight, film grain, diagonal vignette","Vanilla CSS/JS — zero deps","Reduced-motion safe"],deliverables:[{title:"Aurora background",body:"CSS: a fixed layer with 3 radial-gradients (accent, complement, deep) at large blur, each animated on a long desynced keyframe translating a few percent. `.aurora{position:fixed;inset:-20%;filter:blur(90px);opacity:.5;background:radial-gradient(40% 40% at 30% 30%,var(--accent),transparent),radial-gradient(45% 45% at 70% 60%,var(--accent-2),transparent)}` + @keyframes drifting transform; kill under prefers-reduced-motion."},{title:"Cursor spotlight",body:"JS: track pointer, set `--mx/--my` CSS vars; a fixed radial-gradient masked layer follows the cursor to lift what's underneath. Gate on (pointer:fine) and reduced-motion. `background:radial-gradient(600px at var(--mx) var(--my),rgba(255,255,255,.06),transparent 60%)`."},{title:"Film grain",body:"An SVG feTurbulence data-URI as a fixed 200% overlay at ~5% opacity, animated in 8 steps for a living grain. Pointer-events:none, mix-blend-mode:overlay."},{title:"Diagonal vignette",body:"A fixed dual-layer veil: a radial darkening from center + a 135° linear that deepens two opposite corners. Pure CSS, always-on, pointer-events:none — the 'expensive photograph' finish."}]},{id:"fx-pack-motion",title:"Motion Pack",tagline:"Reveal, drift, and count — with restraint.",type:"effect",credits:300,accent:"cyan",bullets:["Reveal-on-scroll, marquee, count-up, magnetic CTA","IntersectionObserver-based","One import, class-gated"],deliverables:[{title:"Reveal on scroll",body:"IO utility: elements with .reveal start at opacity 0 / translateY(16px) / blur(6px); add .in when 12% visible (rootMargin bottom -8%), transition 800ms cubic-bezier(.22,.61,.21,1) with an index-based stagger. First-viewport elements reveal immediately so nothing stays dark."},{title:"Magnetic CTA",body:"Buttons with .mag: on pointermove within a radius, translate toward the cursor at ~0.2 strength with a patient 0.9s ease back on leave; a breathing glow ring. Disable on touch/reduced-motion."},{title:"Count-up",body:"Data-count elements animate 0→target with an eased (1-(1-p)^4) curve over 1600ms when scrolled into view; tabular-nums; prefix/suffix support; runs once."},{title:"Marquee",body:"A seamless CSS marquee (duplicate the track, translateX -50% on a linear loop); pauses on hover; respects reduced-motion by falling back to a static, wrapping row."}]},{id:"fx-a11y-widget",title:"Accessibility Widget",tagline:"Give every visitor voice, contrast & sizing.",type:"effect",credits:300,accent:"mint",bullets:["Read-aloud voice guide (Web Speech)","High-contrast dark & light","Four text sizes — persists on device"],deliverables:[{title:"What it is",body:"A self-contained accessibility widget baked into your page: a floating button opens voice guide (reads headings/menus aloud via the free Web Speech API), high-contrast dark/light modes, and four interface sizes — all saved on the visitor's device. WCAG as a feature, not an afterthought."},{title:"How to add it",body:"In the MakeLane builder, open Effects studio → toggle 'Accessibility (fx-a11y)'. It ships into your exported site as vanilla CSS/JS (no dependencies), rendering the widget for every visitor automatically. This unlock marks it yours across builds."}]},{id:"lib-tpl-booking",title:"Booking Site Template",tagline:"Rentals, appointments, deposits — ready to pour.",type:"template",credits:500,accent:"cyan",bullets:["Booking + Payments cores wired","Deposit checkout via owner Stripe","Hero, services, reviews, contact"],deliverables:[{title:"The build",body:"Pours a booking site: a hero, a services list with prices, a real booking form (date + slot + deposit), an approved-reviews wall, and a contact form that lands in your inbox. Booking and Payments cores are pre-selected — connect your Str

1ipe and take deposits."}],template:{name:"Booking Site",brief:"A booking site for my rentals/appointments — visitors pick a service and a time slot and pay a deposit. Include a services list with prices, a reviews wall, and a contact form.",mode:"custom",modules:["booking-engine","payments-core","reviews-core","marketing-leads"],themeId:"abyss"}},{id:"lib-tpl-shop",title:"Storefront Template",tagline:"Products, checkout, reviews — a real shop.",type:"template",credits:500,accent:"violet",bullets:["Storefront + Payments cores","Product list → owner-Stripe checkout","Moderated reviews"],deliverables:[{title:"The build",body:"Pours a storefront: a product grid with real buy buttons, checkout on your connected Stripe, a moderated reviews section, and a contact form. Add your products in App settings after the pour."}],template:{name:"Storefront",brief:"An online storefront selling my products — a product grid with buy buttons and checkout, plus customer reviews and a contact form.",mode:"custom",modules:["storefront-core","payments-core","reviews-core"],themeId:"abyss"}},{id:"lib-tpl-portfolio",title:"Portfolio Template",tagline:"Work, story, and a way to reach you.",type:"template",credits:500,accent:"magenta",bullets:["Editorial hero + case grid","Client sign-in optional","Contact → your inbox"],deliverables:[{title:"The build",body:"Pours a portfolio: an editorial hero, a case-study bento grid, an about/manifesto band, and a contact form that lands in your inbox. Add a client sign-in in App settings if you want a private area."}],template:{name:"Portfolio",brief:"A portfolio site for my work — an editorial hero, a grid of case studies, a short about section, and a contact form.",mode:"custom",modules:["marketing-leads","cms-core"],themeId:"abyss"}},{id:"fx-tool-capture",title:"LIQ Capture (browser extension)",tagline:"Note, pin, and record on any site.",type:"tool",credits:250,accent:"gold",bullets:["Right-click capture anywhere","Post-its that re-anchor as you scroll","Syncs to your LIQpmo board"],deliverables:[{title:"Install (unpacked)",body:"1) Download the extension/ folder from your MakeLane account. 2) In Brave/Chrome open chrome://extensions, enable Developer mode, click 'Load unpacked', pick the folder. 3) Open the popup, paste your capture token (Account → API), pick a project. Right-click any page → 'MakeLane: note this' or 'pin a post-it here'."},{title:"What it does",body:"Captures notes, voice, screen recordings, and post-its from ANY website, anchored to the exact element (survives scroll + reloads), and sends them to your live MakeLane project board through the configured API."}]},{id:"lib-pack-navigation",title:"Navigation Pack",tagline:"Get people around — beautifully.",type:"prompt",credits:500,accent:"cyan",bullets:["Sticky header, mega-menu, mobile drawer","In-page anchor rail + breadcrumbs","Footer with sitemap & trust row"],deliverables:[{title:"Sticky Header",body:"A header that starts transparent over the hero and solidifies (backdrop-blur + hairline bottom border) after ~40px of scroll; logo left, nav center, one accent CTA right. The active link carries an underline that slides between items. Shrinks padding when solid, keyboard-navigable, aria-current on the active route."},{title:"Mega Menu",body:"A mega-menu dropping from a nav item: a 3-column panel (grouped links with mono eyebrows + one featured card), opens on hover for mouse and click/Enter for keyboard, closes on Esc or outside-click with a soft scale+fade. Traps focus while open."},{title:"Mobile Drawer",body:"A right-side slide-in drawer toggled by a morphing hamburger, backdrop scrim locking body scroll, staggered link reveal, and a footer row with sign-in + CTA. Swipe-to-close on touch, Esc on keyboard."},{title:"Anchor Rail",body:"A sticky in-page anchor rail (desktop): a dot per section, the active dot expands with its label as you scroll (IntersectionObserver), click to smooth-scroll. Hidden under a breakpoint, respects reduced-motion."}]},{id:"lib-pack-forms",title:"Forms & Capture Pack",tagline:"Ask well, convert more.",type:"prompt",credits:500,accent:"violet",bullets:["Contact, multi-step, newsletter, quote","Inline validation + honeypot","Success & error states written"],deliverables:[{title:"Contact Form",body:"An accessible contact form (name, email, message) with validation on blur, a honeypot + submit throttle, a loading to success to error state machine, and a confirmation panel that replaces the form on success. Labels tied to inputs, aria-invalid on errors."},{title:"Multi-step Wizard",body:"A 3-step form with a progress bar, per-step validation gating Next, slide transitions, and a review step before submit. State persists across steps; aria-live announces each step for screen readers."},{title:"Newsletter Inline",body:"A single-field capture (email + arrow) that expands to a two-line success message with a check draw-on; validates format, guards double-submit, and reassures ('no spam, leave anytime')."},{title:"Quote Intake",body:"A quote-request block: budget range, service checkboxes, timeline dropdown, and a details textarea; assembles a clean summary on submit — ideal for feeding a CRM or your inbox."}]},{id:"lib-pack-commerce",title:"Commerce Sections Pack",tagline:"The parts that sell product.",type:"prompt",credits:500,accent:"magenta",bullets:["Product grid, detail, cart drawer","Variant + quantity patterns","Checkout trust & shipping reassurance"],deliverables:[{title:"Product Grid",body:"A responsive grid with image, title, price, and a quick 'Add' that flies the item to the cart icon; filter chips across the top; skeleton cards while loading; a second image on hover."},{title:"Product Detail",body:"Sticky gallery left, buy panel right: variant pills, a quantity stepper, a price that updates with the variant, add-to-cart with inline confirmation, and an accordion for details / shipping / returns."},{title:"Cart Drawer",body:"A slide-in cart: line items with thumbnail / qty / remove, an animated subtotal, a free-shipping progress bar ('almost there — a little more unlocks free shipping'), and a sticky checkout button. Body-scroll locked, Esc closes."},{title:"Checkout Trust Row",body:"A reassurance strip above the buy button — secure-payment, easy-returns, and support badges with short copy, plus an accepted-payments logo row — to calm cart anxiety."}]},{id:"lib-pack-onboarding",title:"Onboarding & States Pack",tagline:"First runs and honest empties.",type:"prompt",credits:500,accent:"mint",bullets:["Welcome, empty states, coachmarks","Honest 'nothing here yet' patterns","What's-new popover"],deliverables:[{title:"Welcome Panel",body:"A first-run card: a warm one-liner, three 'how it works' steps with icons, and a primary Start CTA plus a 'skip for now' ghost. Dismiss persists so it never nags twice."},{title:"Empty States",body:"A reusable empty-state block: a soft monogram or illustration, a plain line about why it's empty, and the single action that fills it — one per surface (no data, no results, error). Never a dead end."},{title:"Coachmark",body:"A pulsing dot anchored to an element that, on hover/focus, reveals a short tip bubble with a 'got it' dismiss; supports a 3-step sequence. Keyboard reachable, reduced-motion safe."},{title:"What's New",body:"A 'what's new' popover from the header: dated entries with a kind chip (new / fix / improved) and an unread dot until opened. Markdown-simple content, newest first."}]},{id:"lib-pack-copy",title:"Copy & Voice Pack",tagline:"Words that carry the design.",type:"prompt",credits:500,accent:"gold",bullets:["Headline formulas + CTA microcopy","Meta/OG writer","Reusable brand-voice prompt"],deliverables:[{title:"Headline Formulas",body:"Ten fill-in headline structures that convert without hype — outcome-first, objection-flip, before/after, and 'the [thing] that [benefit]' — each with a filled example. Paste your brand + product; get on-brand options, not clichés."},{title:"CTA Microcopy",body:"A bank of button + reassurance microcopy per intent (start, buy, book, subscribe, contact), each with the calming subline that lifts clicks ('No card required', 'Takes 30 seconds'). Verb-first, AA-legible."},{title:"Meta & OG Writer",body:"A prompt that writes your title (under 60 chars), meta description (under 155, benefit + CTA), and OG title/description for shares — tuned to the page's real content and your voice."}

1,{title:"Brand-Voice Prompt",body:"A reusable system prompt capturing your voice (tone words, do/don't, reading level, signature phrases) so every future block sounds like you. Fill it once, keep it in your brand kit."}]},{id:"fx-pack-hero",title:"Hero Frame Presets",tagline:"Six framings for the first screen.",type:"effect",credits:300,accent:"cyan",bullets:["Cinematic, editorial, spotlight & more","Scrim, focal, zoom, motion levers","Mirrors the MakeLane Hero editor"],deliverables:[{title:"Cinematic",body:"Full-bleed image hero: cover-fit with a bottom-weighted scrim (linear-gradient to bg at ~85%), a slow 1.06 scale-in over 12s (Ken Burns), focal point biased to the subject via object-position, headline on the dark base. Reduced-motion falls to a still frame."},{title:"Editorial",body:"Side-card hero: a text column beside a bordered media card (radius 16px, hairline border, soft shadow) that parallaxes ~8% slower than scroll; mono eyebrow + thin-weight headline. Stacks media-first on mobile."},{title:"Spotlight",body:"A dark hero with a radial spotlight behind the headline (accent glow ~30% opacity, blur 46px), the wordmark bright at center, vignette corners — cheap, atmospheric, text-first."},{title:"Full-bleed",body:"Edge-to-edge media with a position-aware scrim (left / center / right) so the headline stays legible wherever the focal point sits; a thin progress-drip scroll hint at the bottom."},{title:"Split-feature",body:"A 1.15fr / 1fr split: headline + deck + dual CTA on one side, a framed product shot with a subtle tilt-on-mouse (desktop) on the other. Balanced to a baseline grid."},{title:"Minimal",body:"Type-only hero: an oversized thin display headline (clamp 44 to 120px), one 60%-opacity line, generous whitespace, no imagery — the fastest, most premium option, with a line-mask reveal on load."}]},{id:"fx-pack-styles",title:"Signature Style Presets",tagline:"Five looks, one toggle each.",type:"effect",credits:300,accent:"violet",bullets:["Liquid, Flat, Glassy, Minimal, Bold","Effect + surface bundles","The presets behind the studio"],deliverables:[{title:"Liquid",body:"The signature feel: aurora background + smooth momentum + reveal-on-scroll + gradient headline on a glassy surface (blur cards, hairline borders). Toggle on fx: aurora, smooth, reveal, grad; surface: glassy. Warm, alive, premium."},{title:"Flat",body:"Confident and fast: no aurora or parallax, solid surfaces, crisp hairlines, reveal reduced to a short fade. fx: reveal only; surface: flat. Editorial and legible for content-heavy or enterprise pages."},{title:"Glassy",body:"Frosted everything: translucent panels with blur(24px)+saturate, layered depth, vignette, subtle grain. fx: vignette, grain, smooth; surface: glassy. Best over rich imagery."},{title:"Minimal",body:"Maximum restraint: mono accents, tiny motion, lots of air, one accent used sparingly. fx: reveal (gentle); surface: flat. Lets the words carry it."},{title:"Bold",body:"High-energy: saturated accent, larger type scale, beam borders on CTAs, snappier reveals. fx: reveal, beam, grad; surface: bold. For launches that want to shout, tastefully."}]},{id:"fx-pack-scroll",title:"Scroll Choreography",tagline:"Make the scroll do the talking.",type:"effect",credits:300,accent:"amber",bullets:["Sticky scrollytelling + progress rail","Layered parallax, gentle section snap","IO-driven, reduced-motion safe"],deliverables:[{title:"Sticky Scrollytelling",body:"A sticky media stage on one side while steps scroll past on the other; the step in view swaps the stage frame with a cross-fade and advances a progress bar. IntersectionObserver with a ~-45% rootMargin band picks the active step."},{title:"Progress Rail",body:"A thin top-of-page reading-progress bar (accent gradient) driven by scroll ratio, plus an optional per-section dot rail. rAF-throttled; hidden under reduced-motion."},{title:"Parallax Layers",body:"Data-speed layers translate at fractional scroll rates (bg .3, mid .6, fg 1) in a single rAF loop, clamped to avoid gaps; disabled under reduced-motion."}

1,{title:"Section Snap",body:"Opt-in CSS scroll-snap for full-height sections (scroll-snap-type: y proximity) — proximity, not mandatory, so it guides without ever trapping the user."}]},{id:"fx-pack-cursor",title:"Cursor & Pointer FX",tagline:"A pointer that feels alive.",type:"effect",credits:300,accent:"cyan",bullets:["Custom cursor + magnetic ring","Hover labels + pointer spotlight","Auto-off on touch & reduced-motion"],deliverables:[{title:"Custom Cursor",body:"A dot + trailing ring (ring eases toward the pointer at .16); the ring grows and shows a mono label ('open', 'drag') over elements with data-cursor. mix-blend-mode:difference so it reads on any background. Hidden on coarse pointers."},{title:"Magnetic Ring",body:"Interactive elements pull the ring — and themselves at ~.2 strength — toward the cursor within a radius, easing back on leave. The 'alive' feel on CTAs and cards."},{title:"Hover Labels",body:"Cursor-following labels: data-cursor text renders inside the ring — 'view' on gallery items, 'open' on links, 'drag' on handles."},{title:"Pointer Spotlight",body:"A soft radial light following the pointer to lift content beneath it (--mx / --my vars + a masked fixed layer). Gated on fine pointers + reduced-motion."}]},{id:"fx-pack-transitions",title:"Loaders & Transitions",tagline:"Smooth in, smooth between.",type:"effect",credits:300,accent:"mint",bullets:["Intro pour loader, route transitions","Skeleton shimmer, image fade-up","Zero layout shift"],deliverables:[{title:"Intro Loader",body:"A brief brand loader: the wordmark 'pours' in (letters rise + unblur, ~90ms stagger) over a solid bg, then the veil lifts to reveal the page. Caps at ~1.4s and is skipped under reduced-motion (page shows immediately)."},{title:"Route Transition",body:"Between routes the outgoing view fades and slides down 8px while the incoming rises in (AnimatePresence); scroll resets to top and the header stays stable so nav never flickers."},{title:"Skeleton Shimmer",body:"Content-shaped skeletons with a diagonal shimmer sweep (2s linear) while data loads — the exact box sizes of the real content, so there's zero layout shift on swap."},{title:"Image Fade-up",body:"Images start at opacity 0 / translateY(10px) / blur(8px) and settle when decoded (decoding=async + a load handler); lazy below the fold. No pop-in, no CLS."}]},{id:"lib-tpl-saas",title:"SaaS Landing Template",tagline:"Hero to pricing to sign-up, poured.",type:"template",credits:500,accent:"cyan",bullets:["Hero, features, pricing, FAQ, CTA","Leads + CMS cores wired","Payments-ready"],deliverables:[{title:"The build",body:"Pours a SaaS landing: a spotlight hero with dual CTA, a bento feature grid, a 3-tier pricing section with a monthly/annual toggle, a testimonials band, an FAQ, and a closing CTA with a lead form to your inbox. Marketing-leads + CMS cores pre-selected; connect Stripe when you're ready to charge."}],template:{name:"SaaS Landing",brief:"A SaaS product landing page — a spotlight hero with two CTAs, a feature grid, 3-tier pricing with a monthly/annual toggle, testimonials, an FAQ, and a final call-to-action with an email capture.",mode:"custom",modules:["marketing-leads","cms-core","payments-core"],themeId:"abyss"}},{id:"lib-tpl-agency",title:"Agency / Studio Template",tagline:"Work, proof, and a way in.",type:"template",credits:500,accent:"gold",bullets:["Editorial hero, services, case grid","Reviews + leads wired","Gilded theme"],deliverables:[{title:"The build",body:"Pours an agency site: an editorial hero, a services list, a case-study bento grid, a testimonials wall, a short about band, and a contact form that lands in your inbox. Reviews + leads cores pre-selected; dressed in the Gilded theme."}],template:{name:"Agency Studio",brief:"An agency/studio website — an editorial hero, a services section, a grid of case studies, client testimonials, a short about band, and a contact form.",mode:"custom",modules:["marketing-leads","cms-core","reviews-core"],themeId:"gilded"}}],E={cyan:"#3aa7ff",violet:"#8b5cf6",magenta:"#ff3dac",amber:"#ffb347",mint:"#57d9be",gold:"#d9b15a"};function re(){const[,i]=s.useState(0);s.useEffect(()=>T(()=>i(a=>a+1)),[]),s.useEffect(()=>{const a=document.title;return document.title="Shop — MakeLane",()=>{document.title=a}},[]);const l=P(),v=F(),[c,g]=s.useState("all"),[h,f]=s.useState(null),p=s.useMemo(()=>c==="all"?N:N.filter(a=>a.type===c),[c]);return e.jsxs("main",{className:"mx-auto max-w-6xl px-5 pb-28 pt-28 md:pt-36",children:[e.jsx(z,{eyebrow:"The Shop",title:e.jsxs(e.Fragment,{children:["Stocked goods,",e.jsx("br",{}),e.jsx("span",{className:"text-cyan",children:"poured by the lab."})]}),description:"Prompt packs, drop-in effect recipes, and whole starter templates — the parts we build with, on the shelf. Buy with credits; unlock once, yours forever."}),e.jsx("div",{className:"mt-3 flex justify-center",children:e.jsx(O,{spot:"store-shelf",title:"The Shop",blurb

1:"Prompt packs, effect recipes, and starter templates. Buy with credits and unlock once — it's yours forever."})}),e.jsx(k,{className:"mt-8",children:e.jsxs(x,{to:"/intel",className:"hairline group flex items-center justify-between gap-4 rounded-2xl p-5 transition-colors hover:border-cyan/40",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("span",{className:"flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-cyan/30 bg-cyan/[0.06] text-cyan",children:"⌖"}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[15px] font-medium text-ink",children:"Site & Domain Intelligence"}),e.jsx("p",{className:"text-[12.5px] font-light text-muted",children:"Audit any website — scored, with the exact fix per issue — plus ICANN/RDAP domain lookup."})]})]}),e.jsx("span",{className:"hidden shrink-0 font-mono text-[10px] uppercase tracking-[0.18em] text-dim transition-colors group-hover:text-cyan sm:inline",children:"Open tool →"})]})}),e.jsx(k,{className:"mt-6",children:e.jsxs("div",{className:"hairline flex flex-wrap items-center justify-between gap-4 rounded-2xl px-5 py-4",children:[e.jsx("p",{className:"text-sm font-light text-muted",children:l?e.jsxs(e.Fragment,{children:["Your balance: ",e.jsxs("span",{className:"font-mono text-cyan",children:[v," credits"]})]}):e.jsxs(e.Fragment,{children:["Prices are in credits — ",e.jsx(x,{to:"/account",className:"text-cyan hover:underline",children:"sign in"})," to unlock and keep."]})}),e.jsx(x,{to:"/account",className:"rounded-full border border-line px-4 py-2 text-[12.5px] text-ink/90 transition-colors hover:border-cyan/40",children:"Need credits? Buy a pack →"})]})}),e.jsx("div",{className:"mt-8 flex flex-wrap gap-2",children:J.map(a=>e.jsx("button",{onClick:()=>g(a.id),className:W("rounded-full border px-4 py-2 text-[12.5px] transition-colors",c===a.id?"border-cyan/50 bg-white/[0.05] text-ink":"border-line text-muted hover:text-ink"),title:a.blurb,children:a.label},a.id))}),e.jsx("div",{className:"mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3",children:p.map((a,m)=>{const y=I(a.id),d=E[a.accent]??"#3aa7ff";return e.jsx(k,{delay:m%3*.05,children:e.jsxs("button",{onClick:()=>f(a),className:"hairline group flex h-full w-full flex-col rounded-2xl p-5 text-left transition-colors hover:border-line-bright",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"rounded-full px-2.5 py-1 font-mono text-[9px] uppercase tracking-wider",style:{color:d,background:`${d}18`,border:`1px solid ${d}44`},children:M[a.type]}),y?e.jsxs("span",{className:"flex items-center gap-1 font-mono text-[10px] uppercase tracking-wider text-mint",style:{color:"#57d9be"},children:[e.jsx(S,{size:11})," Owned"]}):e.jsxs("span",{className:"font-mono text-[11px] text-dim",children:[a.credits," cr"]})]}),e.jsx("h3",{className:"mt-4 font-display text-xl font-light text-ink",children:a.title}),e.jsx("p",{className:"mt-1.5 text-[13px] font-light leading-relaxed text-muted",children:a.tagline}),e.jsx("ul",{className:"mt-4 flex-1 space-y-1.5",children:a.bullets.map(u=>e.jsxs("li",{className:"flex items-start gap-2 text-[12.5px] font-light text-muted",children:[e.jsx("span",{className:"mt-1.5 h-1 w-1 shrink-0 rounded-full",style:{background:d}}),u]},u))}),e.jsxs("span",{className:"mt-4 inline-flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-[0.18em] text-dim transition-colors group-hover:text-cyan",children:[y?"Open":"View"," ",e.jsx(q,{size:11})]})]})},a.id)})}),h&&e.jsx($,{product:h,onClose:()=>f(null)},h.id)]})}function $({product:i,onClose:l}){const[,v]=s.useState(0);s.useEffect(()=>T(()=>v(t=>t+1)),[]);const c=B(),g=P(),h=F(),f=I(i.id),p=E[i.accent]??"#3aa7ff",[a,m]=s.useState(null),[y,d]=s.useState(null),u=s.useRef(null);s.useEffect(()=>{const t=document.activeElement,r=u.current;r==null||r.focus();const b=o=>{if(o.key==="Escape"){l();return}if(o.key==="Tab"&&r){const n=Array.from(r.querySelectorAll('a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"])'));if(!n.length)return;const w=n[0],A=n[n.length-1];o.shiftKey&&document.activeElement===w?(o.preventDefault(),A.focus()):!o.shiftKey&&document.activeElement===A&&(

1o.preventDefault(),w.focus())}};return window.addEventListener("keydown",b),()=>{var o;window.removeEventListener("keydown",b),(o=t==null?void 0:t.focus)==null||o.call(t)}},[l]);const L=()=>{if(!g){m("Sign in to unlock — takes 20 seconds.");return}const t=K(i.id,i.credits,i.title);if(!t.ok){m(t.error);return}m(`Unlocked — ${i.title} is yours.`)},R=async(t,r)=>{try{await navigator.clipboard.writeText(t),d(r),setTimeout(()=>d(null),1500)}catch{m("Copy failed — select and copy manually.")}},H=()=>{const t=i.template;if(!t)return;try{const b=localStorage.getItem(C);if(b){const o=JSON.parse(b),n=o==null?void 0:o.build;if(!!n&&n.status!=="ready"&&((n.brief??"").trim().length>0||!!n.name&&n.name!=="Untitled build")&&!window.confirm("You have an unfinished build in progress. Start this template and replace it?"))return}}catch{}const r=Q({name:t.name,brief:t.brief,mode:t.mode,modules:t.modules??[],themeId:t.themeId??"abyss"});try{localStorage.setItem(C,JSON.stringify({build:r,step:0})),localStorage.removeItem(Y)}catch{}c("/build")};return e.jsx(j.div,{initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},className:"fixed inset-0 z-[80] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm",onClick:l,role:"dialog","aria-modal":"true","aria-label":i.title,children:e.jsxs(j.div,{initial:{opacity:0,y:18,scale:.98},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:12},transition:{duration:.28,ease:[.22,.61,.21,1]},className:"glass-deep relative max-h-[86vh] w-full max-w-2xl overflow-y-auto rounded-3xl border border-line-bright p-7 focus:outline-none",onClick:t=>t.stopPropagation(),ref:u,tabIndex:-1,children:[e.jsx("button",{onClick:l,"aria-label":"Close",className:"absolute right-5 top-5 text-dim transition-colors hover:text-ink",children:e.jsx(D,{size:18})}),e.jsx("span",{className:"rounded-full px-2.5 py-1 font-mono text-[9px] uppercase tracking-wider",style:{color:p,background:`${p}18`,border:`1px solid ${p}44`},children:M[i.type]}),e.jsx("h2",{className:"mt-4 font-display text-3xl font-light text-ink",children:i.title}),e.jsx("p",{className:"mt-2 text-[15px] font-light leading-relaxed text-muted",children:i.tagline}),e.jsx("ul",{className:"mt-5 grid gap-2 sm:grid-cols-2",children:i.bullets.map(t=>e.jsxs("li",{className:"flex items-start gap-2 text-[13px] font-light text-ink/85",children:[e.jsx("span",{className:"mt-1.5 h-1 w-1 shrink-0 rounded-full",style:{background:p}}),t]},t))}),e.jsx("div",{className:"mt-6 border-t border-line pt-6",children:f?e.jsxs(e.Fragment,{children:[e.jsxs("p",{className:"eyebrow mb-3 flex items-center gap-2",style:{color:"#57d9be"},children:[e.jsx(S,{size:12})," Yours — here it is"]}),e.jsx("div",{className:"space-y-3",children:i.deliverables.map((t,r)=>e.jsxs("div",{className:"hairline rounded-xl p-4",children:[e.jsxs("div",{className:"flex items-center justify-between gap-3",children:[e.jsx("p",{className:"text-[13px] font-medium text-ink",children:t.title}),e.jsx("button",{onClick:()=>R(t.body,r),className:"flex shrink-0 items-center gap-1.5 rounded-lg border border-line px-2.5 py-1.5 font-mono text-[10px] uppercase tracking-wider text-muted transition-colors hover:border-cyan/40 hover:text-ink",children:y===r?e.jsxs(e.Fragment,{children:[e.jsx(S,{size:11})," Copied"]}):e.jsxs(e.Fragment,{children:[e.jsx(U,{size:11})," Copy"]})})]}),e.jsx("p",{className:"mt-2.5 whitespace-pre-wrap font-mono text-[12px] leading-relaxed text-muted",children:t.body})]},t.title))}),i.template&&e.jsxs("button",{onClick:H,className:"mt-5 flex w-full items-center justify-center gap-2 rounded-xl bg-cyan/80 px-4 py-3 text-sm font-medium text-black transition-colors hover:bg-cyan",children:[e.jsx(G,{size:15})," Start this build →"]})]}):e.jsxs("div",{className:"flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between",children:[e.jsxs("div",{children:[e.jsxs("p",{className:"font-display text-2xl font-light text-ink",children:[i.credits," ",e.jsx("span",{className:"text-base text-dim",children:"credits"})]}),e.jsx("p",{className:"mt-1 text-[12px] font-light text-dim",children:g?e.jsxs(e.Fragment,{children:["You have ",h,". Unlock once — yours across every build."]}):e.jsx(e.Fragment,{children:"Sign in to unlock and keep it forever."})})]}),e.jsxs("button",{onClick:L,className:"flex shrink-0 items-center gap-2 rounded-xl border border-line-bright bg-white/[0.04] px-5 py-3 text-sm font-medium text-ink transition-colors hover:border-cyan/50",children:[e.jsx(V,{size:14})," Unlock · ",i.credits," cr"]})]})}),a&&e.jsxs("p",{className:"mt-4 rounded-xl border border-line px-4 py-2.5 text-[13px] text-ink/90",children:[a,/needs|sign in/i.test(a)&&e.jsxs(e.Fragment,{children:[" ",e.jsx(x,{to:"/account",onClick:l,className:"text-cyan hover:underline",children:"Go to account →"})]})]})]})})}export{re as default};