https://modinteriorsonline.com/assets/portfolio-Boz7Tg01.js

1import{r as x,j as e}from"./query-DYVpeFO3.js";import{p as f,H as u,m as c,F as n,d as b,L as m}from"./index-CSVg_3Up.js";import"./react-vendor-DYU0Rr6N.js";import"./radix-ui-BrXWnT8S.js";const o=f,i="https://modinteriorsdesign.com",y={"Full-Service Design":"Residential","Remodeling & Renovation":"Residential","Commercial Interiors":"Commercial","Commercial Design":"Commercial","Commercial Interior Design":"Commercial"};function v(t){return y[t]??"Residential"}const j=".pf-light { background: #FAFAF8; color: #1A1A1A; } .pf-light .pf-border { border-color: #D8D4E0; } .pf-light .pf-eyebrow { color: #386373; } .pf-light .pf-heading { color: #1A1A1A; } .pf-light .pf-body { color: #5A5668; } .pf-light .pf-tab { color: #5A5668; } .pf-light .pf-tab-active { color: #1A1A1A; } .pf-light .pf-tab-underline { background: #386373; } .pf-light .pf-muted-bg { background: #F0EEF5; } .pf-light .pf-cta-btn { background: #386373; color: #FAFAF8; } .pf-light .pf-cta-btn:hover { background: #61828F; } .pf-light .pf-link { color: #1A1A1A; border-color: #1A1A1A; } .pf-light .pf-link:hover { color: #386373; border-color: #386373; }";

1function I(){const[t,r]=x.useState("All"),d=(o.projects??[]).filter(a=>t==="All"||v(a.category)===t),g={"@context":"https://schema.org","@type":"WebPage","@id":`${i}/portfolio#webpage`,name:"Portfolio | MOD Interiors",url:`${i}/portfolio`,isPartOf:{"@id":`${i}/#website`},about:{"@id":`${i}/#organization`}};return e.jsxs(e.Fragment,{children:[e.jsxs(u,{children:[e.jsx("title",{children:"Portfolio | MOD Interiors — Luxury Interior Design, DFW"}),e.jsx("meta",{name:"description",content:"Explore selected projects by MOD Interiors — full-service interior design, remodeling, and new construction for discerning clients in Colleyville, Southlake, Westlake, and the DFW area."}),e.jsx("link",{rel:"canonical",href:`${i}/portfolio`}),e.jsx("meta",{property:"og:title",content:"Portfolio | MOD Interiors"}),e.jsx("meta",{property:"og:description",content:"Selected interior design projects by MOD Interiors — luxury residential and commercial design in the DFW area."}),e.jsx("meta",{property:"og:type",content:"website"}),e.jsx("meta",{property:"og:url",content:`${i}/portfolio`}),e.jsx("meta",{property:"og:image",content:`${i}/og-image.jpg`}),e.jsx("meta",{name:"twitter:card",content:"summary_large_image"}),e.jsx("script",{type:"application/ld+json",children:JSON.stringify(g).replace(/</g,"\\u003c")})]}),e.jsx("style",{dangerouslySetInnerHTML:{__html:j}}),e.jsxs("main",{className:"pf-light",children:[e.jsx("section",{className:"pt-24 pb-10 lg:pt-32 lg:pb-14 px-8 md:px-14 lg:px-20 xl:px-28",children:e.jsxs("div",{className:"flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 lg:gap-20",children:[e.jsxs("div",{className:"max-w-2xl",children:[e.jsx(c.p,{initial:{opacity:0,y:12},animate:{opacity:1,y:0},transition:{duration:.55},className:"mb-4 text-[10px] font-medium tracking-[0.28em] uppercase",style:{color:"hsl(var(--teal-rule))"},children:e.jsx(n,{devId:"a61d0b",guard:{file:"src/pages/portfolio.tsx",tagName:"p",sourceKind:"bound-expression",contentKey:null,contentKeyTemplate:null,expressionHash:"sha256:591c6d5ceaf41ed5d57dfade15c3196126e0f4107198ccfbfc81b4ac7d8a8ed1"},children:o.hero.eyebrow})}),e.jsx(c.h1,{initial:{opacity:0,y:22},animate:{opacity:1,y:0},transition:{duration:.7,delay:.07},className:"font-heading font-light leading-[0.95] tracking-tight",style:{color:"hsl(var(--text-dark))",fontSize:"clamp(3.5rem, 8vw, 7.5rem)"},children:e.jsx(n,{devId:"659574",guard:{file:"src/pages/portfolio.tsx",tagName:"h1",sourceKind:"bound-expression",contentKey:null,contentKeyTemplate:null,expressionHash:"sha256:cd52a035a91bc708114949442a6fe6f0fdf2516640e87756c5cc47d1de2ed50c"},children:o.hero.headline})})]}),e.jsxs(c.div,{initial:{opacity:0,y:14},animate:{opacity:1,y:0},transition:{duration:.6,delay:.2},className:"lg:max-w-sm xl:max-w-md shrink-0",children:[e.jsx("div",{className:"mb-5 h-px w-10",style:{background:"hsl(var(--teal-rule))"}}),e.jsx("p",{className:"text-sm leading-[1.85]",style:{color:"hsl(var(--text-mid))"},children:e.jsx(n,{devId:"40468b",guard:{file:"src/pages/portfolio.tsx",tagName:"p",sourceKind:"bound-expression",contentKey:null,contentKeyTemplate:null,expressionHash:"sha256:133abd01ede3d9a0c7c1240bd2f03a3032543cdfa69379b5a493c21cb4af35f0"},children:o.hero.body})})]})]})}),e.jsx("div",{className:"mx-8 md:mx-14 lg:mx-20 xl:mx-28 h-px",style:{background:"hsl(var(--surface-divider))"}}),e.jsx("div",{className:"sticky top-0 z-20 border-b",style:{background:"hsl(var(--surface-white))",borderColor:"hsl(var(--surface-divider))"},children:e.jsx("nav",{className:"flex items-center gap-10 px-8 md:px-14 lg:px-20 xl:px-28","aria-label":"Portfolio categories",role:"group",children:o.CATEGORIES.map(a=>e.jsxs("button",{onClick:()=>r(a),className:"relative py-5 text-[10px] font-medium tracking-[0.22em] uppercase transition-colors",style:{color:t===a?"hsl(var(--text-dark))":"hsl(var(--text-mid))"},children:[a,t===a&&e.jsx(c.span,{layoutId:"tab-indicator",className:"absolute bottom-0 left-0 right-0 h-px",style:{background:"hsl(var(--text-dark))"}})]},a))})}),e.jsx("section",{className:"pt-0.5",children:e.jsx(b,{mode:"wait",children:e.jsx(c.div,{initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},children:k(d).map((a,l)=>e.jsx("div",{className:["grid",a.length===1?"grid-cols-1":"grid-cols-1 md:grid-cols-2"].join(" "),style:{gap:"2px",marginBottom:"2px"},children:a.map((p,h)=>e.jsx(N,{project:p,tall:a.length===1,delay:l*.07+h*.05},p.id))},l))},t)})}),e.jsx("section",{className:"mt-0.5 px-8 md:px-14 lg:px-20 xl:px-28 py-24 lg:py-32 border-t",style:{background:"hsl(var(--surface-off-white))",borderColor:"hsl(var(--surface-divider))"},children:e.jsxs("div",{className:"flex flex-col lg:flex-row lg:items-end lg:justify-between gap-10 lg:gap-20",children:[e.jsxs("div",{children:[e.jsx("p",{className:"mb-4 text-[10px] font-medium tracking-[0.28em] uppercase",style:{color:"hsl(var(--teal-rule))"},children:"Begin Your Project"}),e.jsx("h2",{className:"font-heading font-light leading-tight",style:{color:"hsl(var(--text-dark))",fontSize:"clamp(2rem, 4vw, 3.5rem)"},children:e.jsx(n,{devId:"666bb3",guard:{file:"src/pages/portfolio.tsx",tagName:"h2",sourceKind:"bound-expression",contentKey:null,contentKeyTemplate:null,expressionHash:"sha256:d4ddf8ac5d8d142c5e72166d44180ff4d403d5357abf85f0fb604056d1c93ea0"},children:o.cta.headline})})]}),e.jsxs("div",{className:"lg:max-w-sm shrink-0",children:[e.jsx("p",{className:"mb-8 text-sm leading-[1.85]",style:{color:"hsl(var(--text-mid))"},children:e.jsx(n,{devId:"c7bfca",guard:{file:"src/pages/portfolio.tsx",tagName:"p",sourceKind:"bound-expression",contentKey:null,contentKeyTemplate:null,expressionHash:"sha256:b02b46445cc9d4aa450971b3643e5585222e5ff947f33bfd7a885bae098df63a"},children:o.cta.body})}),e.jsx(m,{to:"/contact",className:"inline-flex items-center gap-3 border px-10 py-4 text-[10px] font-medium tracking-[0.22em] uppercase transition-colors",style:{borderColor:"hsl(var(--text-dark))",color:"hsl(var(--text-dark))"},onMouseEnter:a=>{const l=a.currentTarget;l.style.background="hsl(var(--teal-cta))",l.style.borderColor="hsl(var(--teal-cta))",l.style.color="hsl(var(--text-white))"},onMouseLeave:a=>{const l=a.currentTarget;l.style.background="",l.style.borderColor="hsl(var(--text-dark))",l.style.color="hsl(var(--text-dark))"},children:"Become a Client"})]})]})})]})]})}function k(t){const r=[];let s=0,d="full";for(;s<t.length;)d==="full"?(r.push([t[s]]),s+=1):(r.push(t.slice(s,s+2)),s+=2),d=d==="full"?"half":"full";return r}function N({project:t,tall:r,delay:s}){return e.jsxs(c.article,{initial:{opacity:0}

1,whileInView:{opacity:1},viewport:{once:!0},transition:{duration:.7,delay:s},className:"group relative overflow-hidden",style:{aspectRatio:r?"21/9":"4/3"},children:[e.jsx(m,{to:`/portfolio/${t.slug}`,className:"absolute inset-0 z-10","aria-label":`View ${t.title}`}),e.jsx("img",{src:`/airo-assets/images/${t.slot}`,alt:`${t.title} — MOD Interiors`,className:"absolute inset-0 h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]",width:r?2100:1050,height:r?900:787,loading:"lazy"}),e.jsx("div",{className:"pointer-events-none absolute inset-0 transition-opacity duration-500",style:{background:"linear-gradient(to top, hsl(var(--overlay-image-dark) / 0.75) 0%, hsl(var(--overlay-image-dark) / 0.18) 45%, transparent 100%)"}}),e.jsxs("div",{className:"absolute bottom-0 left-0 right-0 p-6 md:p-8 lg:p-10",children:[e.jsx("p",{className:"mb-1.5 text-[9px] font-medium tracking-[0.24em] uppercase",style:{color:"hsl(var(--text-white) / 0.5)"},children:e.jsx(n,{devId:"fb54f1",guard:{file:"src/pages/portfolio.tsx",tagName:"p",sourceKind:"bound-expression",contentKey:null,contentKeyTemplate:null,expressionHash:"sha256:c9877907ff1ca81c662b6167a2ba6d69c8ef93b40c8cb93d6a36a5ac14519bc7"},children:t.category})}),e.jsxs("div",{className:"flex items-end justify-between gap-4",children:[e.jsx("h2",{className:"font-heading font-light leading-tight",style:{color:"hsl(var(--text-white))",fontSize:r?"clamp(1.5rem, 3vw, 2.75rem)":"clamp(1.25rem, 2.2vw, 2rem)"},children:e.jsx(n,{devId:"c046af",guard:{file:"src/pages/portfolio.tsx",tagName:"h2",sourceKind:"bound-expression",contentKey:null,contentKeyTemplate:null,expressionHash:"sha256:dad90d15bb6c7f8bd9360d9d0721bf378edf49d7412dba6a69b621e2fef2016a"},children:t.title})}),e.jsx("span",{className:"mb-0.5 shrink-0 text-[9px] font-medium tracking-[0.2em] uppercase opacity-0 transition-opacity duration-300 group-hover:opacity-100",style:{color:"hsl(var(--text-white) / 0.75)"},children:"View Project"})]})]})]})}export{I as default};