https://tanstack-start-community-photo-wall.vercel.app/assets/routes-ClgSUDdU.js

1import{i as e,o as t}from"./index-Ns2NWYeH.js";import{t as n}from"./button-DYzrrp25.js";var r=t();function i(){return(0,r.jsxs)(`main`,{className:`page-wrap px-4 pb-20 pt-14`,children:[(0,r.jsxs)(`section`,{className:`island-shell rise-in relative overflow-hidden rounded-4xl px-6 py-14 sm:px-12 sm:py-20`,children:[(0,r.jsx)(`div`,{className:`pointer-events-none absolute -left-24 -top-24 h-72 w-72 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.28),transparent_60%)]`}),(0,r.jsx)(`div`,{className:`pointer-events-none absolute -bottom-24 -right-24 h-72 w-72 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.16),transparent_60%)]`}),(0,r.jsx)(`p`,{className:`island-kicker mb-3`,children:`TanStack Start · Cloudinary`}),(0,r.jsx)(`h1`,{className:`display-title mb-5 max-w-3xl text-4xl font-bold leading-tight tracking-tight text-(--sea-ink) sm:text-5xl lg:text-6xl`,children:`Build a community photo wall — the right way.`}),(0,r.jsx)(`p`,{className:`mb-8 max-w-2xl text-base text-(--sea-ink-soft) sm:text-lg`,children:`Users upload anything. Your app resizes it, watermarks it, and only shows approved photos. Cloudinary handles the hard part — you handle the experience.`}),(0,r.jsxs)(`div`,{className:`flex flex-wrap gap-3`,children:[(0,r.jsx)(n,{asChild:!0,size:`lg`,children:(0,r.jsx)(e,{to:`/upload`,children:`Upload a Photo`})}),(0,r.jsx)(n,{asChild:!0,variant:`outline`,size:`lg`,children:(0,r.jsx)(e,{to:`/gallery`,children:`Browse Gallery`})})]})]}),(0,r.jsxs)(`section`,{className:`mt-10 grid gap-4 sm:grid-cols-2`,children:[(0,r.jsxs)(`div`,{className:`island-shell feature-card rise-in rounded-2xl p-6`,style:{animationDelay:`80ms`},children:[(0,r.jsx)(`p`,{className:`island-kicker mb-2`,children:`The problem`}),(0,r.jsx)(`p`,{className:`text-sm text-(--sea-ink-soft)`,children:`Managing user-generated content is scary. Users upload huge files, wrong formats, or portraits that crop terribly. You need to resize, watermark, and moderate — before anything hits your storage.`})]}),(0,r.jsxs)(`div`,{className:`island-shell feature-card rise-in rounded-2xl p-6`,style:{animationDelay:`160ms`},children:[(0,r.jsx)(`p`,{className:`island-kicker mb-2`,children:`The solution`}),(0,r.jsxs)(`p`,{className:`text-sm text-(--sea-ink-soft)`,children:[(0,r.jsx)(`strong`,{className:`text-(--sea-ink)`,children:`Cloudinary incoming transformations`}),` `,`fire the moment a file arrives — not at request time. The stored image is already resized, watermarked, and face-cropped.`]})]})]}),(0,r.jsxs)(`section`,{className:`mt-10`,children:[(0,r.jsx)(`p`,{className:`island-kicker mb-1`,children:`Cloudinary powers every upload`}),(0,r.jsx)(`h2`,{className:`display-title mb-6 text-2xl font-bold tracking-tight text-(--sea-ink) sm:text-3xl`,children:`Four features, zero effort on your part`}),(0,r.jsx)(`div`,{className:`grid gap-4 sm:grid-cols-2 lg:grid-cols-4`,children:a.map(({icon:e,title:t,tag:n,desc:i},a)=>(0,r.jsxs)(`article`,{className:`island-shell feature-card rise-in flex flex-col rounded-2xl p-5`,style:{animationDelay:`${a*70+80}ms`},children:[(0,r.jsx)(`span`,{className:`mb-3 text-3xl`,children:e}),(0,r.jsx)(`h3`,{className:`mb-1 text-sm font-semibold text-(--sea-ink)`,children:t}),(0,r.jsx)(`code`,{className:`mb-2 self-start rounded-md bg-black/5 px-2 py-0.5 font-mono text-[11px] text-(--lagoon-deep) dark:bg-white/10`,children:n}),(0,r.jsx)(`p`,{className:`text-xs text-(--sea-ink-soft)`,children:i})]},t))})]}),(0,r.jsxs)(`section`,{className:`island-shell mt-10 rounded-2xl p-6 sm:p-8`,children:[(0,r.jsx)(`p`,{className:`island-kicker mb-1`,children:`Incoming transformations`}),(0,r.jsx)(`h2`,{className:`display-title mb-2 text-xl font-bold text-(--sea-ink) sm:text-2xl`,children:`Applied once, at upload time`}),(0,r.jsx)(`p`,{className:`mb-6 max-w-2xl text-sm text-(--sea-ink-soft)`,children:`Unlike eager or on-the-fly transforms, incoming transformations run before the file is stored. The result is baked in — delivery is instant and there are no per-request compute costs.`}),(0,r.jsx)(`div`,{className:`overflow-x-auto`,children:(0,r.jsx)(`div`,{className:`flex min-w-max items-center gap-2`,children:o.map((e,t)=>(0,r.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,r.jsxs)(`div`,{className:`flex flex-col items-center gap-1.5 rounded-xl border border-(--line) bg-(--surface) px-4 py-3 text-center`,children:[(0,r.jsx)(`span`,{className:`text-xl`,children:e.icon}),(0,r.jsx)(`span`,{className:`text-xs font-semibold text-(--sea-ink)`,children:e.label}),e.param&&(0,r.jsx)(`code`,{className:`rounded bg-black/5 px-1.5 py-0.5 font-mono text-[10px] text-(--lagoon-deep) dark:bg-white/10`,children:e.param})]}),t<o.length-1&&(0,r.jsx)(`span`,{className:`text-sm text-(--lagoon)`,children:`→`})]},e.label))})})]}),(0,r.jsx)(`section`,{className:`mt-6 grid gap-4 sm:grid-cols-3`,children:s.map(({icon:e,status:t,label:n,desc:i,style:a},o)=>(0,r.jsxs)(`div`,{className:`island-shell rise-in rounded-2xl p-5`,style:{animationDelay:`${o*80+80}ms`},children:[(0,r.jsxs)(`div`,{className:`mb-3 flex items-center gap-2`,children:[(0,r.jsx)(`span`,{className:`text-2xl`,children:e}),(0,r.jsx)(`span`,{className:`rounded-full px-2.5 py-0.5 text-xs font-semibold ${a}`,children:t})]}),(0,r.jsx)(`p`,{className:`mb-0.5 text-sm font-semibold text-(--sea-ink)`,children:n}),(0,r.jsx)(`p`,{className:`text-xs text-(--sea-ink-soft)`,children:i})]},t))})]})}var a=[{icon:`🔄`,title:`Incoming Transformations`,tag:`transformation: [...]`,desc:`Resize, crop, and optimise the moment the file lands — before it is stored. No per-request cost.`},{icon:`👤`,title:`Face Detection Crop`,tag:`g_auto:faces`,desc:`Gravity set to auto:faces so the crop always centres on the most prominent detected face.`},{icon:`💧`,title:`Logo Watermark`,tag:`l_logo / text overlay`,desc:`Your brand stamp is baked into the stored file at upload time — not rendered at delivery.`},{icon:`⚡`,title:`Auto Format & Quality`,tag:`f_auto, q_auto`,desc:`Serve WebP or AVIF based on browser support. Cloudinary picks the smallest file with good fidelity.`}],o=[{icon:`📁`,label:`User file`,param:null},{icon:`🛡️`,label:`Client check`,param:`type + size`},{icon:`☁`,label:`Cloudinary`,param:`upload_stream`}

1,{icon:`↔`,label:`Resize`,param:`c_fill, w_800`},{icon:`👤`,label:`Face crop`,param:`g_auto:faces`},{icon:`💧`,label:`Watermark`,param:`l_logo`},{icon:`⚡`,label:`Optimise`,param:`f_auto, q_auto`},{icon:`🗄️`,label:`Stored`,param:`pending`}],s=[{icon:`⏳`,status:`pending`,style:`bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400`,label:`Awaiting review`,desc:`Every upload starts here. The photo is stored and processed but not yet public.`},{icon:`✅`,status:`approved`,style:`bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400`,label:`Visible in gallery`,desc:`Moderator approved it. The photo appears on the public wall for everyone to see.`},{icon:`🚫`,status:`rejected`,style:`bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400`,label:`Hidden from gallery`,desc:`Moderator rejected it. The photo stays stored but never appears publicly.`}];export{i as component};