design-guidelines/assets/ConsumerPortal-Q9gDSGOS.js

import{c as i,r as a,j as e,O as u,F as r,i as p}from"./index-mUEXKEer.js";import{C as f}from"./NielsenHeuristics-d7HCIgJi.js";import{E as v}from"./eye-off-Dznbbs9G.js";import{E as b}from"./eye-QHwXAkqY.js";const j=[["rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2",key:"1w4ew1"}],["path",{d:"M7 11V7a5 5 0 0 1 10 0v4",key:"fwvmzm"}]],N=i("lock",j);const w=[["path",{d:"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7",key:"132q7q"}],["rect",{x:"2",y:"4",width:"20",height:"16",rx:"2",key:"izxlao"}]],y=i("mail",w),S="/assets/37fe2c33-dfa4-444f-ad03-9a34352949b1-y7FspjyH.png",k="/assets/1957d89d-66c1-44ae-9846-275775a01370-BriPJkGk.png",z="/assets/6ce4573d-ef2d-4e32-87cf-d487acd1da19-DlLBxN1D.png",L="/assets/c12cadb8-101e-4bdc-9b80-78449fafda2f-C5fJKt8t.png",I=()=>{const[n,c]=a.useState(""),[d,m]=a.useState(""),[s,x]=a.useState(!1),[o,l]=a.useState(!1),h=async t=>{t.preventDefault(),l(!0),setTimeout(()=>{alert(`Login attempted with username: ${n}`),l(!1)},1e3)},g=()=>{alert("Account request form will open")};return e.jsx("div",{className:"min-h-screen bg-muted/30 flex items-center justify-center p-8",children:e.jsxs("div",{className:"w-full max-w-7xl",children:[e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12",children:[e.jsxs("div",{className:"bg-gradient-to-br from-brand-blue-light/20 to-brand-blue-strong/10 rounded-xl p-10 relative overflow-hidden border border-border",children:[e.jsx("div",{className:"absolute top-4 right-4 opacity-5",children:e.jsx(u,{size:200,color:"var(--brand-blue-strong)"})}),e.jsx("div",{className:"relative rounded-lg overflow-hidden mb-6 shadow-lg",children:e.jsx("img",{src:S,alt:"Ghana map showing land use planning zones",className:"w-full h-auto object-cover"})}),e.jsxs("div",{className:"relative z-10",children:[e.jsx("h1",{className:"mb-4 text-brand-blue-strong",children:"Welcome to LUPMIS"}),e.jsx("p",{className:"text-[length:var(--text-md)] text-foreground/80 leading-relaxed",children:"The Land Use Planning Management Information System provides citizens with access to spatial planning information, application tracking, and land use services. Empowering communities through transparent and accessible planning data."}),e.jsxs("div",{className:"mt-6 space-y-3",children:[e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(r,{size:20,color:"var(--brand-green-bright)",className:"mt-1 shrink-0"}),e.jsxs("p",{className:"text-[length:var(--text-sm)] text-foreground/70",children:[e.jsx("strong",{className:"text-foreground",children:"Track Applications:"})," Monitor your planning application status in real-time"]})]}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(r,{size:20,color:"var(--brand-orange-warm)",className:"mt-1 shrink-0"}),e.jsxs("p",{className:"text-[length:var(--text-sm)] text-foreground/70",children:[e.jsx("strong",{className:"text-foreground",children:"Access Information:"})," View zoning regulations and land use plans"]})]}),e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(r,{size:20,color:"var(--brand-blue-strong)",className:"mt-1 shrink-0"}),e.jsxs("p",{className:"text-[length:var(--text-sm)] text-foreground/70",children:[e.jsx("strong",{className:"text-foreground",children:"Submit Requests:"})," Apply for planning permits and services online"]})]})]})]})]}),e.jsx("div",{className:"flex items-center justify-center",children:e.jsxs("div",{className:"w-full max-w-md space-y-8",children:[e.jsxs("div",{className:"flex items-center justify-center gap-8",children:[e.jsx("img",{src:p,alt:"LUSPA - Land Use and Spatial Planning Authority",className:"h-32 w-auto object-contain"}),e.jsx("img",{src:k,alt:"Ministry of Local Government and Rural Development",className:"h-32 w-auto object-contain"})]}),e.jsxs("div",{className:"bg-card rounded-xl border border-border shadow-lg p-8",children:[e.jsx("h2",{className:"mb-6 text-center",children:"Login"}),e.jsxs("form",{onSubmit:h,className:"space-y-6",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{htmlFor:"username",className:"block text-[length:var(--text-sm)] font-[weight:var(--font-weight-medium)] text-foreground",children:"Username"}),e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"absolute left-0 top-0 bottom-0 w-12 bg-muted border-r border-border rounded-l-lg flex items-center justify-center",children:e.jsx(y,{size:18,className:"text-muted-foreground"})}),e.jsx("input",{id:"username",type:"text",value:n,onChange:t=>c(t.target.value),placeholder:"johndoe@email.com",className:`
                          w-full pl-14 pr-4 py-3 
                          bg-background border border-border rounded-lg
                          text-[length:var(--text-sm)] text-foreground
                          placeholder:text-muted-foreground
                          focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent
                          transition-all
                        `,required:!0})]}),e.jsx("p",{className:"text-[length:var(--text-xs)] text-muted-foreground",children:"Enter your registered email address"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{htmlFor:"password",className:"block text-[length:var(--text-sm)] font-[weight:var(--font-weight-medium)] text-foreground",children:"Password"}),e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"absolute left-4 top-1/2 -translate-y-1/2",children:e.jsx(N,{size:18,className:"text-muted-foreground"})}),e.jsx("input",{id:"password",type:s?"text":"password",value:d,onChange:t=>m(t.target.value),placeholder:"Enter your password",className:`
                          w-full pl-12 pr-12 py-3 
                          bg-background border border-border rounded-lg
                          text-[length:var(--text-sm)] text-foreground
                          placeholder:text-muted-foreground
                          focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent
                          transition-all
                        `,required:!0}),e.jsx("button",{type:"button",onClick:()=>x(!s),className:"absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors","aria-label":s?"Hide password":"Show password",children:s?e.jsx(v,{size:18}):e.jsx(b,{size:18})})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("p",{className:"text-[length:var(--text-xs)] text-muted-foreground",children:"Minimum 8 characters"}),e.jsx("button",{type:"button",className:"text-[length:var(--text-sm)] font-[weight:var(--font-weight-semibold)] text-primary hover:text-primary/80 transition-colors",children:"Forgot Password?"})]})]}),e.jsx(f,{variant:"primary",size:"lg",className:"w-full",disabled:o,children:o?"Signing In...":"Sign In"})]}),e.jsxs("div",{className:"mt-6 text-center space-y-2",children:[e.jsx("p",{className:"text-[length:var(--text-sm)] text-muted-foreground",children:"Don't have an account?"}),e.jsx("button",{onClick:g,className:"text-[length:var(--text-sm)] font-[weight:var(--font-weight-semibold)] text-primary hover:text-primary/80 transition-colors",children:"Request an Account"})]})]})]})})]}),e.jsxs("footer",{className:"space-y-6",children:[e.jsxs("div",{className:"flex flex-col items-center gap-4",children:[e.jsx("p",{className:"text-[length:var(--text-sm)] text-muted-foreground text-center",children:"Developed with Support from"}),e.jsxs("div",{className:"flex items-center gap-8",children:[e.jsx("img",{src:z,alt:"GIZ Ghana - Deutsche Gesellschaft für Internationale Zusammenarbeit",className:"h-16 w-auto object-contain"}),e.jsx("img",{src:L,alt:"SECO - Swiss State Secretariat for Economic Affairs",className:"h-16 w-auto object-contain"})]})]}),e.jsxs("div",{className:"flex flex-col items-center gap-3 pt-6 border-t border-border",children:[e.jsxs("div",{className:"flex items-center gap-6",children:[e.jsx("a",{href:"#",className:"text-[length:var(--text-sm)] font-[weight:var(--font-weight-semibold)] text-primary hover:text-primary/80 transition-colors",children:"About"}),e.jsx("a",{href:"#",className:"text-[length:var(--text-sm)] font-[weight:var(--font-weight-semibold)] text-primary hover:text-primary/80 transition-colors",children:"Privacy"}),e.jsx("a",{href:"#",className:"text-[length:var(--text-sm)] font-[weight:var(--font-weight-semibold)] text-primary hover:text-primary/80 transition-colors",children:"Terms"})]}),e.jsx("p",{className:"text-[length:var(--text-xs)] text-muted-foreground",children:"© 2025 LUSPA. All Rights Reserved"})]})]})]})})};export{I as ConsumerPortal};