https://vzgate.com/assets/MarketingAssets-Ca8yMlV_.js

1import{r as c,s as u,n as d,j as e,B as n,L as h,C as x,x as U,a as f,d as b,b as w,e as k}from"./index-Dez-oSnR.js";import{R as y}from"./refresh-cw-Bmb7T1v0.js";import{I as v}from"./image-FhB1AplB.js";import{D as I}from"./download-DGkedQy3.js";import{E as G}from"./external-link-BJULMmzV.js";const j=[{id:"paystack-receipt",title:"Paystack Payment Receipt",description:"Verified payment confirmation showing $60 (20 × $3 service)",prompt:"Create a clean modern payment receipt mockup UI screenshot. White background, large green checkmark icon at top center, heading 'Payment Successful' in dark text, Order ID: #VZG-2024-0847, Amount: $60.00 USD in bold, Service: F1 Visa Consultation Package, Vendor: Global Visa Consultants, Transaction Reference: PAY_abc123xyz, 'Verified by Paystack' badge with green shield icon at bottom, large blue 'Start Chat with Consultant' button. Professional fintech UI design with rounded corners, subtle shadows, clean typography. 16:9 aspect ratio. Ultra high resolution.",filename:"paystack-receipt.png"},{id:"weekly-report",title:"Weekly Orders Report",description:"Dashboard showing 16 orders this week",prompt:"Create a modern analytics dashboard mockup UI screenshot. Dark navy sidebar on left, white main content area. Header shows 'Weekly Performance Report'. One large prominent stat card in center showing '16 Orders' with green up arrow and +23% badge, bold number. Below is a bar chart showing daily orders Monday through Sunday with varying heights. At bottom is a 'Recent Orders' table with columns for Order ID, Student, Service, Status (showing green 'Completed' and yellow 'In Progress' badges). 'Export Report' button in top right. Clean minimal professional SaaS dashboard design. 16:9 aspect ratio. Ultra high resolution.",filename:"weekly-report.png"},{id:"supabase-users",title:"User Management Backend",description:"Admin dashboard showing 456 total users",prompt:"Create a Supabase-style admin dashboard mockup UI screenshot. Dark green/black sidebar on left with Supabase-like logo and menu items. Main content area with breadcrumb 'Authentication > Users'. Header shows prominent badge '456 users' in green. Below is a data table with columns: checkbox, Email (showing example emails), Created At (dates), Last Sign In (dates), Provider (Google and Email icons). Table shows 10 rows of user data. Pagination at bottom showing '1-50 of 456'. Search bar at top of table. Green 'Invite User' button in top right. Dark theme, professional backend admin UI. 16:9 aspect ratio. Ultra high resolution.",filename:"supabase-users.png"}],P=()=>{const[i,o]=c.useState(j),[m,p]=c.useState(!1);c.useEffect(()=>{(async()=>{const t=await Promise.all(j.map(async s=>{const{data:r}=u.storage.from("demo-assets").getPublicUrl(s.filename);try{if((await fetch(r.publicUrl,{method:"HEAD"})).ok)return{...s,imageUrl:r.publicUrl}}catch{}return s}));o(t)})()},[]);const g=c.useCallback(async a=>{o(t=>t.map(s=>s.id===a.id?{...s,isGenerating:!0}:s));try{const{data:t,error:s}=await u.functions.invoke("generate-wireframe",{body:{prompt:a.prompt,filename:a.filename}});if(s)throw s;t!=null&&t.url&&(o(r=>r.map(l=>l.id===a.id?{...l,imageUrl:t.url+"?t="+Date.now(),isGenerating:!1}:l)),d.success(`Generated: ${a.title}`))}catch(t){console.error("Error generating image:",t),d.error(t.message||"Failed to generate image"),o(s=>s.map(r=>r.id===a.id?{...r,isGenerating:!1}:r))}},[]),N=async()=>{p(!0);for(const a of i)await g(a);p(!1),d.success("All marketing assets generated!")},C=(a,t)=>{const s=document.createElement("a");s.href=a,s.download=t,s.target="_blank",document.body.appendChild(s),s.click(),document.body.removeChild(s)};return e.jsx("div",{className:"min-h-screen bg-background p-8",children:e.jsxs("div",{className:"max-w-6xl mx-auto space-y-8",children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx("h1",{className:"text-4xl font-bold",children:"Marketing Assets Generator"}),e.jsx("p",{className:"text-muted-foreground max-w-2xl mx-auto",children:"Generate AI-powered wireframe mockups for your marketing materials. Click generate to create each image, then download for use in your pitch decks, social media, and website."}),e.jsxs(n,{size:"lg",onClick:N,disabled:m,className:"mt-4",children:[m?e.jsx(h,{className:"h-4 w-4 mr-2 animate-spin"}):e.jsx(y,{className:"h-4 w-4 mr-2"}),"Generate All Images"]})]}),e.jsx("div",{className:"grid md:grid-cols-2 lg:grid-cols-3 gap-6",children:i.map(a=>e.jsxs(x,{className:"overflow-hidden",children:[e.jsx("div",{className:"aspect-video bg-muted relative",children:a.imageUrl?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:a.imageUrl,alt:a.title,className:"w-full h-full object-cover"}),e.jsxs("div",{className:"absolute top-2 right-2 bg-secondary text-secondary-foreground px-2 py-1 rounded text-xs font-medium flex items-center gap-1",children:[e.jsx(U,{className:"h-3 w-3"}),"Generated"]})]}):a.isGenerating?e.jsx("div",{className:"flex items-center justify-center h-full",children:e.jsx(h,{className:"h-8 w-8 animate-spin text-primary"})}):e.jsx("div",{className:"flex items-center justify-center h-full",children:e.jsx(v,{className:"h-12 w-12 text-muted-foreground"})})}),e.jsxs(f,{className:"pb-2",children:[e.jsx(b,{className:"text-lg",children:a.title}),e.jsx(w,{children:a.description})]}),e.jsx(k,{className:"space-y-2",children:e.jsxs("div",{className:"flex gap-2",children:[e.jsxs(n,{variant:"outline",size:"sm",className:"flex-1",onClick:()=>g(a),disabled:a.isGenerating||m,children:[a.isGenerating?e.jsx(h,{className:"h-4 w-4 mr-2 animate-spin"}):e.jsx(y,{className:"h-4 w-4 mr-2"}),a.imageUrl?"Regenerate":"Generate"]}),a.imageUrl&&e.jsxs(e.Fragment,{children:[e.jsx(n,{variant:"default",size:"sm",onClick:()=>C(a.imageUrl,a.filename),children:e.jsx(I,{className:"h-4 w-4"})}),e.jsx(n,{variant:"ghost",size:"sm",onClick:()=>window.open(a.imageUrl,"_blank"),children:e.jsx(G,{className:"h-4 w-4"})})]})]})})]},a.id))}),e.jsxs(x,{className:"mt-8",children:[e.jsxs(f,{children:[e.jsx(b,{children:"Direct Download Links"}),e.jsx(w,{children:"Copy these URLs to share or download your marketing assets directly"})]}),e.jsxs(k,{className:"space-y-2",children:[i.filter(a=>a.imageUrl).map(a=>{var t;return e.jsxs("div",{className:"flex items-center justify-between p-3 bg-muted rounded-lg",children:[e.jsxs("div",{children:[e.jsx("p",{className:"font-medium text-sm",children:a.title}),e.jsx("p",{className:"text-xs text-muted-foreground break-all",children:(t=a.imageUrl)==null?void 0:t.split("?")[0]})]}),e.jsx(n,{variant:"ghost",size:"sm",onClick:()=>{var s;navigator.clipboard.writeText(((s=a.imageUrl)==null?void 0:s.split("?")[0])||""),d.success("URL copied to clipboard!")},children:"Copy URL"})]},a.id)}),i.filter(a=>a.imageUrl).length===0&&e.jsx("p",{className:"text-muted-foreground text-center py-4",children:"Generate images first to see download links"})]})]})]})})};export{P as default};