1import{r as a,j as e,O as h}from"./index-ByYYWl6V.js";import{l as g}from"./landing-snapshot-CYE73VN1.js";import{L as b}from"./LandingHeader-DCL9I9j6.js";import{C as y}from"./CookieConsentBanner-DSrJYeAj.js";import{S as j}from"./SeoHead-BIrEUc6b.js";import{L as v}from"./layout-grid-_L0PwbdX.js";import"./ThemeToggle-BMzpTRWb.js";import"./sun-CAzXMSBU.js";import"./LanguageSwitcher-DnKojN5t.js";import"./dropdown-menu-BZRKspBv.js";import"./index-CnBNeFET.js";import"./chevron-right-X_hlXzqd.js";import"./circle-DcpkfI2n.js";import"./landing-alt-C7TGiWlj.js";import"./AiMonitorDemoAnimation-CdBbjFGN.js";import"./link-2-C5arFvZC.js";import"./cookie-D8PMgl4a.js";import"./shield-BxVvGnYN.js";import"./settings-Cp6SvoNk.js";function I(){const[r,x]=a.useState([]),[o,n]=a.useState("Templates that don't box you in."),[p,u]=a.useState("Mix layouts, combine design elements, and add freeform Canvas Pages with ease. From portfolio websites and CMS-style image pages to fullscreen video landing pages, Vsble gives you the flexibility to build it your way."),[m,d]=a.useState(!0),[s,c]=a.useState(null);return a.useEffect(()=>{g("landing").then(t=>{const i=t==null?void 0:t.find(l=>l.section_key==="header");i&&c(i.content)}),g("templates").then(t=>{if(t&&t.length>0){const i=t.find(l=>l.section_key==="template_page_heading");if(i){const l=i.content;l!=null&&l.headline&&n(l.headline),l!=null&&l.subline&&u(l.subline)}x(t.filter(l=>l.section_key!=="template_page_heading"))}d(!1)})},[]),e.jsxs("div",{className:"min-h-screen flex flex-col bg-background",children:[e.jsx(j,{title:"Portfolio Website Templates for Creatives | Vsble",description:"Browse Vsble's portfolio website templates for photographers, designers, and visual creatives. Mix layouts, customize freely, no code required.",path:"/templates"}),e.jsx(b,{logoText:s==null?void 0:s.logo_text,loginText:s==null?void 0:s.login_text,loginLink:s==null?void 0:s.login_link,navItems:s==null?void 0:s.nav_items,content:s}),e.jsx("main",{className:"flex-1 pt-24 pb-16 px-6",children:e.jsxs("div",{className:"max-w-7xl mx-auto",children:[e.jsx("h1",{className:"text-3xl md:text-4xl font-bold text-foreground mb-4 text-center",children:o}),e.jsx("h2",{className:"text-base md:text-lg text-muted-foreground text-center max-w-3xl mx-auto mb-8",children:p}),e.jsx("div",{className:"mb-12"}),m?e.jsx("div",{className:"flex justify-center py-20",children:e.jsx("div",{className:"h-6 w-6 border-2 border-primary border-t-transparent rounded-full animate-spin"})}):r.length===0?e.jsx("p",{className:"text-center text-muted-foreground py-20",children:"No templates available yet."}):e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-10 lg:gap-14",children:r.map((t,i)=>e.jsx(_,{template:t,index:i},t.id))})]})}),e.jsx(h,{}),e.jsx(y,{})]})}const f=r=>!!r&&/\.webm($|\?)/i.test(r);function _({template:r,index:x}){const{content:o}=r,[n,p]=a.useState(!1),u=!!(o.desktop_gallery_url||o.mobile_gallery_url),m=x<4,d=n?o.desktop_gallery_url:o.desktop_image_url,s=n?o.mobile_gallery_url:o.mobile_image_url,c=(t,i,l)=>t?f(t)?e.jsx("video",{src:t,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,preload:"metadata",className:"w-full h-auto"}):e.jsx("img",{src:t,alt:i,className:"w-full h-full object-cover",loading:m?"eager":"lazy",decoding:"async",...!m&&{fetchPriority:"low"}}):e.jsx("div",{className:"w-full h-full flex items-center justify-center text-muted-foreground/30 text-sm",children:l});return e.jsxs("div",{children:[e.jsxs("div",{className:"relative flex items-end gap-4",children:[e.jsx("div",{className:`flex-1 border border-border overflow-hidden bg-muted/30 relative ${f(d)?"":"aspect-square"}`,children:c(d,o.name||"Template desktop","Desktop")}),e.jsx("div",{className:"w-[22%] border border-border overflow-hidden bg-muted/30 flex-shrink-0",style:f(s)?void 0:{aspectRatio:"9 / 19.5"},children:c(s,o.name||"Template mobile","Mobile")})]}),e.jsxs("div",{className:"mt-3 flex items-start justify-between",children:[e.jsxs("div",{children:[o.name&&e.jsx("p",{className:"text-sm font-semibold text-foreground",children:o.name}),o.profession&&e.jsx("p",{className:"text-sm italic text-muted-foreground",children:o.profession})]}),u&&e.jsxs("button",{onClick:()=>p(t=>
1!t),className:`flex items-center gap-1.5 text-xs transition-colors ${n?"text-primary":"text-muted-foreground hover:text-foreground"}`,children:[e.jsx(v,{className:"h-3.5 w-3.5"}),"Gallery View"]})]})]})}export{I as default};
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.