https://nomba.com/assets/V2InvoicingPage-Cj1JyvVs.js

1import{j as e,bN as n,bC as p,d2 as j,r as x,l as f,cs as v,n as w,de as b}from"./index-BkJTBr6j.js";import{H as N,h as I}from"./heroImage--z_WLYVN.js";const S=[{client:"Jonathan Smith",amount:"₦70,200",status:"Pending"},{client:"Emily Davis",amount:"₦30,450",status:"Paid"},{client:"Michael Brown",amount:"₦90,100",status:"Overdue"}],k={Paid:"bg-[#e7f4ed] text-[#1a6b42]",Pending:"bg-[#fdf3e2] text-[#8a5a10]",Overdue:"bg-[#fbeaea] text-[#a32f2f]"},m="grid grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)_auto] items-center gap-[4%] px-[5.5%] py-[clamp(8px,0.9vw,13px)]";function _({className:s=""}){return e.jsxs("div",{className:["font-sans text-[12px] leading-[1.45] sm:text-[clamp(11px,0.95vw,14px)]","overflow-hidden rounded-[clamp(14px,1.6vw,24px)] bg-white","shadow-[0_24px_60px_rgba(0,0,0,0.28),0_2px_6px_rgba(0,0,0,0.12)]",s].join(" "),children:[e.jsxs("div",{className:`${m} bg-[#fafafa] font-medium text-[#6b6b6b]`,children:[e.jsx("span",{children:"Client"}),e.jsx("span",{children:"Amount"}),e.jsx("span",{className:"justify-self-end",children:"Status"})]}),S.map(i=>e.jsxs("div",{className:`${m} border-t border-solid border-[#ececec]`,children:[e.jsx("span",{className:"truncate text-[#0d0d0d]",children:i.client}),e.jsx("span",{className:"truncate tabular-nums text-[#0d0d0d]",children:i.amount}),e.jsx("span",{className:["justify-self-end whitespace-nowrap rounded-full font-medium","px-[clamp(7px,0.8vw,12px)] py-[clamp(2px,0.32vw,5px)]",k[i.status]].join(" "),children:i.status})]},i.client))]})}

1const g="/assets/invoicing/invoices-hero",z=`${g}.webp`,C=I(g,1504);function A(){return e.jsx("section",{className:"relative -mt-[var(--site-header-height)] bg-white layout-inset-x pb-12 pt-[calc(var(--site-header-height)+48px)] sm:pb-16 md:pb-24 lg:pb-24 lg:pt-[calc(var(--site-header-height)+96px)]","aria-labelledby":"invoicing-hero-heading",children:e.jsxs("div",{className:"layout-container flex flex-col gap-[64px]",children:[e.jsxs("div",{className:"flex w-full flex-col items-center",children:[e.jsxs(n,{className:"flex w-full max-w-[750px] flex-col items-center gap-[24px] text-center",children:[e.jsx("h1",{id:"invoicing-hero-heading",className:"type-display w-full",children:"Create Professional Invoices. Get Paid Faster."}),e.jsx("p",{className:"type-section-sub w-full max-w-[592px]",children:"Send branded invoices, track payments in real time, and collect money instantly, all from one platform built for African businesses."})]}),e.jsx(n,{className:"mt-[32px] flex flex-wrap items-center justify-center gap-[12px]",delay:.06,children:e.jsx("button",{type:"button",className:"btn-animated flex h-[48px] w-fit shrink-0 items-center justify-center gap-[8px] rounded-[10px] bg-[var(--yellow\\/6,#fc0)] px-[20px] py-[14px]",onClick:p,children:e.jsx("span",{className:"type-button whitespace-nowrap",children:"Start sending invoices"})})})]}),e.jsxs("div",{className:"relative",children:[e.jsx(j,{className:"relative aspect-[1280/673] w-full overflow-clip rounded-[24px] sm:rounded-[40px]",children:e.jsx("img",{alt:"Business owner working late at a desk, reviewing invoices on a laptop",className:"absolute inset-0 size-full object-cover object-center",src:z,srcSet:C,sizes:N,width:1504,height:790,decoding:"async",fetchPriority:"high",draggable:!1})}),e.jsx(_,{className:"mt-[16px] w-full sm:absolute sm:left-[4%] sm:top-1/2 sm:mt-0 sm:w-[45%] sm:max-w-[430px] sm:-translate-y-1/2 lg:w-[31%]"})]})]})})}const P=[{title:"Share your invoices anywhere",description:"Send invoices instantly through WhatsApp, email, SMS, or a link for easy access.",icon:"/assets/invoicing/icon-share.png"},{title:"Trusted Payment Methods",description:"Offer secure and reliable payment options your customers can trust.",icon:"/assets/invoicing/icon-payment.png"},{title:"Get notified when you're paid",description:"Receive instant payment notifications the moment a customer completes payment.",icon:"/assets/invoicing/icon-notify.png"}];function R(){return e.jsx("section",{className:"bg-white layout-section lg:py-24","aria-labelledby":"invoicing-simplified-heading",children:e.jsxs("div",{className:"layout-container flex flex-col items-center gap-[56px] md:gap-[64px]",children:[e.jsxs(n,{className:"flex w-full max-w-[750px] flex-col items-center gap-[24px] text-center",children:[e.jsx("h2",{id:"invoicing-simplified-heading",className:"type-section-title w-full",children:"Your Invoicing simplified"}),e.jsx("p",{className:"type-section-sub w-full",children:"Create professional invoices, get paid faster, and manage your cash flow, all from your Nomba business account."})]}),e.jsx("div",{className:"grid w-full max-w-[1100px] grid-cols-1 gap-[40px] md:grid-cols-3",children:P.map((s,i)=>e.jsxs(n,{delay:i*.06,className:"flex flex-col items-center text-center",children:[e.jsx("div",{className:"mb-[28px] flex size-[150px] items-center justify-center",children:e.jsx("img",{alt:"","aria-hidden":!0,className:"size-[150px] object-contain",src:s.icon,width:150,height:150,loading:"lazy",decoding:"async"})}),e.jsx("h3",{className:"type-card-title mb-[12px]",children:s.title}),e.jsx("p",{className:"type-body-muted max-w-[340px]",children:s.description})]},s.title))})]})})}const O="/assets/invoicing/reminder-profile-1.png",T="/assets/invoicing/reminder-profile-2.png",F="/assets/invoicing/reminder-profile-3.png",D="/assets/invoicing/icon-tax.svg",E="/assets/invoicing/icon-discount.svg";function B(){const s=[{profile:O,name:"Daisy",when:"1 day",size:"lg",width:"w-[351px]",padding:"px-6 py-4",z:"z-[3]",top:"top-[calc(50%-55px)]"},{profile:T,name:"Tunde",when:"3 days",size:"md",width:"w-[311px]",padding:"px-5 py-3",z:"z-[2]",top:"top-[calc(50%-22px)]"},{profile:F,name:"Amara",when:"5 days",size:"sm",width:"w-[272px]",padding:"px-4 py-3",z:"z-[1]",to

1p:"top-[calc(50%+1px)]"}];return e.jsx("div",{className:"relative mx-auto h-[200px] w-full max-w-[351px]",children:s.map(({profile:i,name:t,when:l,size:a,width:d,padding:o,z:r,top:y})=>e.jsxs("div",{className:["absolute flex items-center gap-3 rounded-[16px] bg-white shadow-[0px_4px_12px_rgba(13,13,18,0.04)]","-translate-x-1/2 left-1/2",d,o,r,y,a==="sm"?"opacity-80":""].join(" "),children:[e.jsx("img",{src:i,alt:"","aria-hidden":!0,className:["shrink-0 rounded-full object-cover",a==="lg"?"size-[44px]":a==="md"?"size-[40px]":"size-[36px]"].join(" ")}),e.jsxs("div",{className:"min-w-0",children:[e.jsxs("p",{className:"truncate text-[14px] font-medium text-[#0d0d0d]",children:["Reminder sent to ",t]}),a==="lg"?e.jsxs("p",{className:"text-[14px] text-[#666]",children:["Reminder sent · ",l]}):null]})]},a))})}function H(){return e.jsxs("div",{className:"mx-auto w-full max-w-[428px] rounded-[16px] bg-white p-5 shadow-[0px_4px_11px_-1px_rgba(10,10,10,0.04)]",children:[e.jsxs("div",{className:"mb-4 flex items-center gap-2.5",children:[e.jsx("div",{className:"flex size-8 items-center justify-center rounded-full bg-[#a199ff] text-[11px] font-semibold text-white",children:"AC"}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[11px] font-semibold text-[#0d0d0d]",children:"Alesana Corp"}),e.jsx("p",{className:"text-[10px] text-[#737373]",children:"[email protected]"})]})]}),e.jsx("div",{className:"mb-4 grid grid-cols-3 gap-5",children:["Bill from","Billed To","Status"].map(s=>e.jsxs("div",{children:[e.jsx("p",{className:"mb-1.5 text-[11px] text-[#717171]",children:s}),e.jsx("div",{className:"h-1.5 w-12 rounded-full bg-[#f2f2f2]"})]},s))}),e.jsxs("div",{className:"flex items-end justify-between rounded-[12px] border border-[#f2f2f2] p-3",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-[10px] text-[#737373]",children:"5 items"}),e.jsx("p",{className:"text-[15px] font-semibold text-[#0d0d0d]",children:"₦28,000.00"}),e.jsx("p",{className:"text-[10px] text-[#737373]",children:"Due date: Oct 23, 2023"})]}),e.jsx("p",{className:"text-[10px] font-semibold text-[#163300]",children:"Download"})]})]})}function M(){return e.jsxs("div",{className:"mx-auto w-full max-w-[297px] rounded-[16px] bg-white px-5 py-6",children:[e.jsx("p",{className:"mb-3 text-[14.5px] text-[#808080]",children:"Invoice note"}),e.jsx("div",{className:"rounded-[12px] bg-[#fafafa] p-2.5",children:e.jsx("p",{className:"text-[8px] leading-[20px] text-[#0d0d0d]",style:{fontFamily:"'Redacted Script', cursive"},children:"Thank you for your business. Please make payment on or before the due date. For any questions regarding this invoice, feel free to contact us. due date. For any questions regarding this invoice, feel free to contact us."})})]})}function G(){return e.jsxs("div",{className:"mx-auto w-full max-w-[332px] rounded-[16px] bg-white px-5 py-7",children:[e.jsxs("div",{className:"mb-8 flex items-center gap-2",children:[e.jsx("p",{className:"text-[18px] font-medium text-[#0d0d0d]",children:"₦500,200"}),e.jsx("span",{className:"size-1.5 rounded-full bg-[#0d0d0d]","aria-hidden":!0}),e.jsx("p",{className:"text-[18px] font-medium text-[#0d0d0d]",children:"24 Invoices"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("div",{className:"h-[11px] overflow-hidden rounded-full bg-[#f2f2f2]",children:e.jsx("div",{className:"h-full w-[60%] rounded-full bg-[#fc0]"})}),e.jsx("p",{className:"text-[14.5px] text-[#808080]",children:"Total invoices paid this month"})]})]})}function u({on:s}){const i=f()===!0;return e.jsxs("svg",{width:"40",height:"20",viewBox:"0 0 40 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,style:{opacity:s?1:.3,transition:i?void 0:"opacity 200ms ease-out"},children:[e.jsx("rect",{width:"40",height:"20",rx:"10",fill:"#FFCC00"}),e.jsx("circle",{cx:"10",cy:"10",r:"7",fill:"white",style:{transform:s?"translateX(20px)":"translateX(0)",transition:i?void 0:"transform 200ms ease-out"}})]})}function V(){const[s,i]=x.useState(!0),[t,l]=x.useState(!0);return e.jsxs("div",{className:"relative mx-auto h-[157px] w-full max-w-[304px]",children:[e.jsxs("div",{className:"absolute left-0 top-0 flex w-[263px] items-center justify-between rounded-[16px] bg-white px-5 py-4 shadow-[0px_4px_11px_-1px_rgba(10,10,10,0.04)]",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("img",{src:D,alt:"","aria-hidden":!0,

1className:"size-9 shrink-0"}),e.jsx("p",{className:"text-[12px] font-medium text-[#0d0d0d]",children:"Include tax"})]}),e.jsx("button",{type:"button",role:"switch","aria-checked":s,"aria-label":"Include tax",onClick:()=>i(a=>!a),className:"shrink-0",children:e.jsx(u,{on:s})})]}),e.jsxs("div",{className:"absolute left-[30px] top-[89px] flex w-[274px] items-center justify-between rounded-[16px] bg-white px-5 py-4 shadow-[0px_4px_11px_-1px_rgba(10,10,10,0.04)]",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("img",{src:E,alt:"","aria-hidden":!0,className:"size-9 shrink-0"}),e.jsx("p",{className:"text-[12px] font-medium text-[#0d0d0d]",children:"Include discount"})]}),e.jsx("button",{type:"button",role:"switch","aria-checked":t,"aria-label":"Include discount",onClick:()=>l(a=>!a),className:"shrink-0",children:e.jsx(u,{on:t})})]})]})}function c({title:s,description:i,Illustration:t,className:l="",delay:a=0}){return e.jsxs(n,{delay:a,className:["flex min-h-[380px] flex-col rounded-[22px] border border-solid border-[#f2f2f2] bg-[#fafafa] p-[24px] sm:p-[29px]",l].join(" "),children:[e.jsxs("div",{className:"flex flex-col gap-[8px]",children:[e.jsx("h3",{className:"type-card-heading",children:s}),e.jsx("p",{className:"type-body-secondary",children:i})]}),e.jsx("div",{className:"mt-[24px] flex min-h-[176px] flex-1 items-center justify-center",children:e.jsx(t,{})})]})}function W(){return e.jsx("section",{className:"bg-white layout-section lg:py-24","aria-labelledby":"invoicing-finances-heading",children:e.jsxs("div",{className:"layout-container flex flex-col gap-[56px]",children:[e.jsx(n,{className:"mx-auto w-full max-w-[672px] text-center",children:e.jsx("h2",{id:"invoicing-finances-heading",className:"type-section-title",children:"Your business finances, working together"})}),e.jsxs("div",{className:"flex flex-col gap-[24px]",children:[e.jsxs("div",{className:"grid grid-cols-1 gap-[24px] lg:grid-cols-2",children:[e.jsx(c,{title:"Stop chasing payments manually.",description:"Nomba sends helpful reminders at 7, 3, and even 0 days before the due date, ensuring you never miss a deadline.",Illustration:B,delay:0}),e.jsx(c,{title:"Customize Invoices to Your Brand",description:"Personalize invoices with your unique brand and let clients easily download and keep a copy.",Illustration:H,delay:.06})]}),e.jsxs("div",{className:"grid grid-cols-1 gap-[24px] md:grid-cols-2 lg:grid-cols-3",children:[e.jsx(c,{title:"Add Invoice Note",description:"Include extra details, payment terms, or a personal message on your invoice.",Illustration:M,delay:.12}),e.jsx(c,{title:"Track Paid Invoices Seamlessly",description:"Easily monitor completed payments and keep your invoice records organized in one place.",Illustration:G,delay:.18}),e.jsx(c,{title:"Apply Tax & Discount",description:"Add taxes and discounts to adjust the final invoice total.",Illustration:V,delay:.24,className:"md:col-span-2 lg:col-span-1"})]})]})]})})}const Y=[.22,1,.36,1];function q({screenSrc:s,screenAlt:i}){const t=x.useRef(null),l=v(t,{once:!0,amount:.25}),a=f()===!0;return e.jsx("div",{ref:t,className:"relative w-full overflow-hidden rounded-[24px] sm:rounded-[32px]",children:e.jsx(w.img,{alt:i,className:"block h-auto w-full max-w-none object-contain will-change-transform",src:s,width:600,height:578,loading:"lazy",decoding:"async",initial:a?!1:{y:"12%",opacity:0},animate:l||a?{y:0,opacity:1}:{y:"12%",opacity:0},transition:{duration:a?0:.6,ease:Y}})})}function h({title:s,description:i,cta:t,onCta:l=p,screenSrc:a,screenAlt:d,reverse:o=!1,delay:r=0}){return e.jsx("section",{className:"bg-[#0d0d0d] layout-section lg:py-24","aria-label":s,children:e.jsx("div",{className:"layout-container",children:e.jsxs("div",{className:"grid w-full grid-cols-1 items-center gap-[40px] lg:grid-cols-2 lg:gap-[80px]",children:[e.jsxs("div",{className:["contents lg:flex lg:max-w-[568px] lg:flex-col lg:gap-[40px]",o?"lg:order-2":"lg:order-1"].join(" "),children:[e.jsxs(n,{delay:r,className:"order-1 flex flex-col gap-[24px] lg:order-none",children:[e.jsx("h2",{className:"type-section-title-inverse w-full",children:s}),e.jsx("p",{className:"type-section-sub-inverse",children:i})]}),e.jsx(n,{delay:r,className:"order-3 lg:order-none",children:e.jsx("button",{type:"button",className:"btn-animated flex h-[48px] w-full items-center justify-center gap-[8px] rounded-[10px] bg-[var(--yellow\\/6,#fc0)] px-[20px] py-[14px] sm:w-fit",onClick:l,children:e.jsx("span",{className:"type-button",children:t})})})]}),e.jsx("div",{className:o?"order-2 lg:order-1":"order-2 lg:order-2",children:e.jsx(q,{screenSrc:a,screenAlt:d})})]})})})}const $=["I","II","III"],J=[{title:"Create your invoice",description:"Add your client's details, line items, amounts, and due date from the Nomba app or dashboard."},{title:"Send to your client",description:"Share via email, WhatsApp, or a payment link. Your client gets a professional downloadable invoice."},{title:"Get paid instantly",description:"Payment lands straight in y

1our Nomba account. Automatic reminders chase overdue invoices so you don't have to."}];function X(){return e.jsx("section",{className:"bg-white layout-section lg:py-24","aria-labelledby":"invoicing-how-it-works-heading",children:e.jsxs("div",{className:"layout-container grid grid-cols-1 items-start gap-[40px] md:gap-[48px] lg:grid-cols-2 lg:gap-x-[80px] lg:gap-y-[64px]",children:[e.jsx(n,{className:"flex flex-col items-start gap-[20px] sm:gap-[24px] lg:gap-[32px]",children:e.jsxs("div",{className:"flex max-w-[480px] flex-col gap-[24px]",children:[e.jsx("h2",{id:"invoicing-how-it-works-heading",className:"type-section-title",children:"Three steps to start getting paid."}),e.jsx("p",{className:"type-section-sub",children:"From link to payment in under a minute."})]})}),e.jsx(n,{delay:.06,className:"flex w-full min-w-0 flex-col gap-[12px] sm:gap-[16px]",children:e.jsx("ol",{className:"flex flex-col gap-[12px] sm:gap-[16px]","aria-label":"Steps to start getting paid with Nomba Invoicing",children:J.map((s,i)=>e.jsxs("li",{className:"flex h-fit flex-col gap-[16px] rounded-[16px] border border-solid border-[#e6e6e6] p-[20px] sm:flex-row sm:rounded-[20px] sm:gap-[20px] sm:px-[28px] sm:py-[32px]",children:[e.jsx("div",{"aria-hidden":"true",className:"flex size-[40px] shrink-0 items-center justify-center rounded-[8px] bg-[#fc0] sm:size-[44px] sm:rounded-[10px]",children:e.jsx("span",{className:["type-roman-numeral",i>0?"type-roman-numeral--compact":""].join(" "),children:$[i]})}),e.jsxs("div",{className:"flex min-w-0 flex-col gap-[8px]",children:[e.jsx("h3",{className:"type-card-title",children:s.title}),e.jsx("p",{className:"type-body-muted",children:s.description})]})]},s.title))})})]})})}const Z="/assets/multi-currency/cta-divider-white.svg";function K(){return e.jsxs("section",{className:"relative overflow-visible bg-[#fff9e4] layout-section-wide","aria-labelledby":"invoicing-cta-heading",children:[e.jsx("div",{className:"pointer-events-none absolute top-0 left-1/2 z-10 hidden w-screen -translate-x-1/2 overflow-visible md:block","aria-hidden":!0,children:e.jsx("div",{className:"scale-y-[-1]",children:e.jsx("img",{alt:"",className:"block h-[51.5px] w-full min-w-[1440px] object-fill",src:Z})})}),e.jsx(n,{className:"layout-container-wide relative flex w-full flex-col items-center",children:e.jsxs("div",{className:"flex w-full max-w-[896px] flex-col items-center gap-[32px] text-center md:gap-[40px]",children:[e.jsxs("div",{className:"flex w-full max-w-[672px] flex-col gap-[24px]",children:[e.jsx("h2",{id:"invoicing-cta-heading",className:"type-cta-title",children:"Send your first invoice today."}),e.jsx("p",{className:"type-section-sub",children:"Join thousands of Nigerian businesses getting paid faster with Nomba invoicing, no setup fees, no learning curve."})]}),e.jsx("button",{type:"button",className:"btn-animated flex h-[48px] w-full max-w-[348px] items-center justify-center rounded-[10px] bg-[var(--yellow\\/6,#fc0)] px-[24px] py-[14px] sm:w-auto sm:max-w-none",onClick:p,children:e.jsx("span",{className:"type-button whitespace-nowrap",children:"Send first invoice"})})]})})]})}function U(){return e.jsxs("div",{className:"w-full",children:[e.jsx(A,{}),e.jsx(R,{}),e.jsx(W,{}),e.jsx(h,{title:"Receive Instant Payment Notifications",description:"Get notified on your mobile phone immediately whenever you receive a payment.",cta:"Enable payment notifications",screenSrc:"/assets/invoicing/notification-mockup.webp",screenAlt:"Nomba app showing an instant invoice payment notification on a phone lock screen"}),e.jsx(h,{title:"Manage your Invoices on the Go",description:"Access and manage your invoices anytime directly from the Nomba mobile app.",cta:"Download the Nomba app",onCta:b,screenSrc:"/assets/invoicing/mobile-invoices-mockup.webp",screenAlt:"Nomba mobile app showing invoice dashboard with sent, paid, and overdue tabs",reverse:!0,delay:.05}),e.jsx(X,{}),e.jsx(K,{})]})}export{U as default};