invoice-sent.pug

head
  meta(charset='UTF-8')
  meta(name='viewport' content='width=device-width, initial-scale=1.0')
  
div(style="max-width: 512px; margin: 32px auto; overflow: hidden; border: 1px solid #e5e7eb; font-weight: 500; border-radius: 8px; background: #FAFAFA")
  //- Header
  div(style="border-bottom: 1px solid #f3f4f6; background-color: #ffffff; padding: 24px")
    div(style="display: flex; align-items: center; justify-content: space-between")
      //- Staipy Logo
      svg(width="65" height="18" viewBox="0 0 65 18" fill="none" xmlns="http://www.w3.org/2000/svg" style="height: 18px")
        path(d="M4.11181 5.14693L8.44004 3.20061L14.0667 4.1954L14.4563 11.0291L9.13256 15.311L4.11181 13.408V5.14693Z" fill="#FAFAFA")
        path(d="M7.95816 8.50759C7.95306 8.21731 8.01553 7.99192 8.22278 7.77365C8.40885 7.5986 8.63753 7.49951 8.89699 7.49515C9.15982 7.5094 9.40044 7.60236 9.58196 7.795C9.77932 8.0327 9.83311 8.25977 9.81825 8.56034C9.79685 8.77446 9.66647 8.97598 9.50594 9.11654C9.46188 9.13902 9.41995 9.16145 9.37857 9.18847C9.3575 9.20897 9.34459 9.22154 9.33659 9.2367C9.32392 9.26073 9.32362 9.29128 9.32284 9.37028L9.3247 9.42745C9.32457 9.48885 9.32459 9.55019 9.32563 9.61159C9.32682 9.67486 9.32745 9.7381 9.32782 9.80137C9.32788 9.84181 9.32798 9.88224 9.3281 9.92268C9.33127 10.0727 9.32464 10.185 9.24408 10.3165C9.15996 10.4148 9.07207 10.4622 8.94368 10.4876C8.816 10.4955 8.70098 10.4534 8.60402 10.3724C8.48902 10.2545 8.46612 10.1047 8.4655 9.94675C8.46585 9.91019 8.46589 9.87362 8.46567 9.83705C8.46529 9.77828 8.46523 9.71951 8.4653 9.66073C8.46556 9.60151 8.46573 9.5423 8.46531 9.48308L8.46487 9.4271C8.46555 9.37705 8.46536 9.32775 8.46225 9.27779C8.45887 9.26289 8.45687 9.25405 8.45275 9.24635C8.44674 9.23513 8.43623 9.22633 8.4104 9.20469C8.36482 9.18127 8.34193 9.16951 8.32102 9.15491C8.29991 9.14019 8.28083 9.12257 8.24248 9.08719C8.07979 8.92667 7.96842 8.7365 7.95816 8.50759Z" fill="#007AFF")
        path(fill-rule="evenodd" clip-rule="evenodd" d="M16.9053 0H4.93136C2.36942 0 0.292551 1.87013 0.292551 4.17705V5.05372C0.292551 6.67221 1.31482 8.07571 2.80967 8.76924L0 8.76923V18L13.374 18C15.9359 18 18.0128 16.1299 18.0128 13.823V12.9463C18.0128 11.3278 16.9905 9.92429 15.4957 9.23076H16.9053V0ZM9.40413 4.54906C9.37608 4.53953 9.34805 4.52997 9.32003 4.52037C8.98521 4.40166 8.74879 4.42396 8.418 4.54103C8.38095 4.55416 8.34385 4.56715 8.30669 4.58C8.21053 4.61306 8.11446 4.64639 8.01856 4.68018C7.95115 4.70395 7.88369 4.72759 7.81614 4.75097C7.37614 4.90308 6.93896 5.06276 6.50213 5.22343L6.50101 5.22384C6.39238 5.26382 6.28375 5.30381 6.17499 5.34344C6.11209 5.36635 6.0492 5.38932 5.98635 5.41237C5.95757 5.42294 5.92877 5.4335 5.89998 5.44405C5.71232 5.51206 5.52626 5.58157 5.35245 5.67998C5.1834 5.81248 5.14576 5.95695 5.10647 6.15969L5.09966 6.19524C5.04618 6.47161 5.00384 6.74881 4.97556 7.02878L4.97157 7.06885C4.92687 7.51429 4.91231 7.95858 4.91259 8.40593L4.91262 8.44325C4.91263 8.46626 4.91262 8.48927 4.91261 8.51229C4.91255 8.71019 4.91249 8.90826 4.92276 9.10591C4.99071 10.2285 5.39896 11.0906 6.25933 11.8465C6.29759 11.8799 6.3353 11.9138 6.37269 11.9482C6.47732 12.0444 6.58311 12.1375 6.69498 12.2256C6.72356 12.2481 6.75211 12.2707 6.78038 12.2935C7.26482 12.6875 7.78492 13.0346 8.33002 13.3425L8.38481 13.3733C8.40084 13.3823 8.41702 13.3917 8.43336 13.4011C8.55785 13.4727 8.69147 13.5496 8.8357 13.5584L8.90287 13.5569C9.04079 13.5555 9.13953 13.5194 9.25864 13.4555L9.30302 13.4312C9.81499 13.1519 10.3098 12.8454 10.7733 12.4934C10.7979 12.4746 10.8226 12.4559 10.8474 12.4373C10.9954 12.3262 11.1375 12.2094 11.2775 12.0887C11.2976 12.0714 11.3177 12.054 11.3378 12.0367C11.8685 11.5948 12.3685 11.0324 12.6451 10.4016L12.6619 10.363C12.7278 10.2154 12.759 10.0715 12.7827 9.91286L12.7922 9.84547C12.853 9.4141 12.8676 8.97838 12.8662 8.54343C12.866 8.5074 12.8659 8.47138 12.8658 8.43535C12.865 8.06315 12.8611 7.692 12.8285 7.32097C12.8261 7.29414 12.8238 7.2673 12.8215 7.24046C12.7929 6.90672 12.7584 6.57373 12.7118 6.24191L12.7061 6.20081C12.7008 6.16189 12.6954 6.12298 12.6897 6.08411L12.6845 6.04862C12.6796 6.01499 12.6773 5.99913 12.6742 5.98342C12.6715 5.96942 12.6682 5.95553 12.6619 5.92927C12.5328 5.68956 12.287 5.59055 12.0422 5.49933C12.0104 5.48751 11.9787 5.47562 11.947 5.46368C11.8598 5.43079 11.7727 5.39807 11.6854 5.36556C11.6292 5.34463 11.5731 5.32366 11.5169 5.30258C10.963 5.09425 10.4071 4.89205 9.84656 4.7015C9.76027 4.67218 9.67405 4.64271 9.58802 4.61265C9.5268 4.59124 9.46552 4.57001 9.40413 4.54906Z" fill="#007AFF")
        path(d="M26.306 15.0193C25.3751 15.0193 24.566 14.8449 23.8784 14.496C23.2015 14.1472 22.6726 13.7086 22.2918 13.1801C21.911 12.641 21.6677 12.0808 21.5619 11.4994L23.5928 10.9604C23.7515 11.6051 24.0688 12.1072 24.5448 12.4666C25.0208 12.826 25.6184 13.0057 26.3377 13.0057C26.8877 13.0057 27.332 12.8683 27.6705 12.5934C28.0195 12.3186 28.194 11.9909 28.194 11.6104C28.194 11.2616 28.0671 10.9604 27.8133 10.7067C27.57 10.4424 27.2368 10.268 26.8137 10.1835L25.0367 9.83466C24.0953 9.65497 23.3548 9.24803 22.8154 8.61383C22.2759 7.97963 22.0062 7.20801 22.0062 6.29899C22.0062 5.66479 22.186 5.08344 22.5456 4.55494C22.9159 4.01587 23.4024 3.59307 24.0053 3.28654C24.6188 2.98001 25.2694 2.82674 25.9569 2.82674C26.8348 2.82674 27.5806 2.97472 28.194 3.27068C28.8075 3.56664 29.2835 3.94188 29.622 4.39639C29.9711 4.84033 30.2038 5.3107 30.3201 5.80749L28.3051 6.44169C28.083 5.87091 27.7815 5.46396 27.4007 5.22085C27.0199 4.96717 26.5387 4.84033 25.9569 4.84033C25.629 4.84033 25.3328 4.90904 25.0684 5.04645C24.8145 5.18386 24.6136 5.36355 24.4655 5.58552C24.328 5.79692 24.2592 6.0136 24.2592 6.23557C24.2592 6.58438 24.3756 6.89091 24.6083 7.15516C24.841 7.40885 25.1636 7.57268 25.5761 7.64667L27.2579 8.01134C28.284 8.23331 29.0773 8.65611 29.6379 9.27974C30.1985 9.8928 30.4788 10.6274 30.4788 11.4836C30.4788 12.0966 30.3096 12.6727 29.9711 13.2118C29.6326 13.7509 29.146 14.1895 28.5114 14.5278C27.8873 14.8554 27.1522 15.0193 26.306 15.0193Z" fill="#05255C")
        path(d="M35.008 14.9241C34.0349 14.9241 33.2786 14.6599 32.7391 14.1314C32.2102 13.5923 31.9458 12.8365 31.9458 11.8641V8.0589H30.4544V6.20386H30.613C31.0361 6.20386 31.364 6.09288 31.5967 5.87091C31.8295 5.64894 31.9458 5.32655 31.9458 4.90375V4.23784H34.0243V6.20386H36.0076V8.0589H34.0243V11.7531C34.0243 12.6516 34.5109 13.1008 35.484 13.1008C35.6532 13.1008 35.8383 13.0849 36.0393 13.0532V14.8449C35.7008 14.8977 35.3571 14.9241 35.008 14.9241Z" fill="#05255C")
        path(d="M39.0881 15.0193C38.1785 15.0193 37.4539 14.7973 36.9144 14.3533C36.3856 13.9094 36.1211 13.3069 36.1211 12.5459C36.1211 11.8165 36.3697 11.2141 36.8668 10.7384C37.364 10.2627 38.1097 9.94565 39.104 9.7871L41.6743 9.37487V9.08948C41.6743 8.70896 41.5262 8.39714 41.2301 8.15403C40.9445 7.91092 40.5637 7.78937 40.0877 7.78937C39.6434 7.78937 39.2468 7.91092 38.8977 8.15403C38.5592 8.38657 38.3107 8.69839 38.152 9.08948L36.4543 8.26502C36.7082 7.58854 37.1736 7.04418 37.8505 6.63195C38.5275 6.21972 39.2997 6.0136 40.167 6.0136C40.8651 6.0136 41.4839 6.14573 42.0234 6.40998C42.5734 6.66366 42.9965 7.02833 43.2927 7.50398C43.5994 7.96906 43.7528 8.49756 43.7528 9.08948V14.829H41.7854V13.9094C41.1084 14.6493 40.2093 15.0193 39.0881 15.0193ZM38.2789 12.4666C38.2789 12.7626 38.39 13.0004 38.6121 13.1801C38.8343 13.3492 39.1198 13.4338 39.4689 13.4338C40.1141 13.4338 40.643 13.2329 41.0555 12.8313C41.4681 12.419 41.6743 11.9117 41.6743 11.3092V10.9604L39.5006 11.325C39.0881 11.4096 38.7814 11.547 38.5804 11.7373C38.3794 11.917 38.2789 12.1601 38.2789 12.4666Z" fill="#05255C")
        path(d="M44.5632 6.20386H46.6417V14.829H44.5632V6.20386ZM44.4046 3.82561C44.4046 3.44509 44.5103 3.14913 44.7219 2.93773C44.9334 2.72633 45.2243 2.62063 45.5945 2.62063C45.9753 2.62063 46.2715 2.72633 46.483 2.93773C46.6946 3.14913 46.8004 3.44509 46.8004 3.82561C46.8004 4.19556 46.6946 4.48624 46.483 4.69764C46.2821 4.90904 45.9859 5.01474 45.5945 5.01474C45.2243 5.01474 44.9334 4.90904 44.7219 4.69764C44.5103 4.48624 44.4046 4.19556 44.4046 3.82561Z" fill="#05255C")
        path(d="M47.4501 6.20386H49.4017V7.21858C49.719 6.83806 50.1104 6.5421 50.5758 6.3307C51.0518 6.1193 51.586 6.0136 52.1783 6.0136C52.9822 6.0136 53.7173 6.21443 54.3837 6.61609C55.0501 7.00718 55.5737 7.54626 55.9545 8.23331C56.3353 8.92036 56.5257 9.6814 56.5257 10.5164C56.5257 11.3515 56.3353 12.1125 55.9545 12.7996C55.5737 13.4866 55.0501 14.031 54.3837 14.4326C53.7279 14.8237 52.9875 15.0193 52.1624 15.0193C51.6336 15.0193 51.1417 14.9347 50.6869 14.7656C50.232 14.5859 49.846 14.3322 49.5286 14.0045V18H47.4501V6.20386ZM49.5286 10.5164C49.5286 11.0132 49.6291 11.4624 49.8301 11.8641C50.0416 12.2552 50.3272 12.5617 50.6869 12.7837C51.0571 13.0057 51.4696 13.1167 51.9244 13.1167C52.6331 13.1167 53.2149 12.8735 53.6697 12.3873C54.1351 11.8905 54.3679 11.2669 54.3679 10.5164C54.3679 10.0302 54.2621 9.59155 54.0505 9.20046C53.839 8.7988 53.5481 8.48699 53.1779 8.26502C52.8077 8.03248 52.3899 7.91621 51.9244 7.91621C51.4696 7.91621 51.0571 8.02719 50.6869 8.24916C50.3272 8.47113 50.0416 8.78295 49.8301 9.18461C49.6291 9.5757 49.5286 10.0196 49.5286 10.5164Z" fill="#05255C")
        path(d="M59.4151 14.7022L56.0514 6.20386H58.2886L60.5257 12.1495L62.747 6.20386H65L60.3353 18H58.0982L59.4151 14.7022Z" fill="#05255C")
        
      div(style="color: #6b7280; font-size: 14px") Powered by Staipy

  //- Body
  div(style="padding: 24px")
    div(style="margin-bottom: 16px")
      p(style="margin-bottom: 8px; font-size: 14px; color: #6b7280") Hi, [ Sender's name ]
      p(style="font-size: 14px; line-height: 1.625; color: #111827")
        | Thank you for trusting Staipy, your invoice has been sent to customer with email [ Insert customer email ]

    //- Invoice Card
    div(style="margin-bottom: 24px; border-radius: 8px; border: 1px solid #E6E8EA; padding: 16px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); background: #FFFFFF")
      p(style="margin-bottom: 8px; font-weight: 500; font-size: 14px; color: #9ca3af") From
      div(style="display: flex; flex-direction: column; gap: 8px")
        div(style="display: flex; height: 40px; width: 40px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #f87171, #ec4899)")
          span(style="font-weight: 600; font-size: 14px; color: #ffffff") D
        div(style="display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px")
          p(style="font-weight: 500; font-size: 14px; color: #111827") DvndesignAgency

      div(style="border-top: 1px solid #E6E8EA; padding-top: 24px")
        div(style="display: flex; align-items: center; justify-content: space-between")
          div
            p(style="font-weight: 500; font-size: 14px; color: #6b7280") Transaction Successful
            p(style="font-weight: 700; font-size: 24px; color: #111827") [19,980.00] USDC
            p(style="font-size: 14px; color: #9ca3af") $[19,980]
          div(style="text-align: right")
            p(style="font-weight: 500; font-size: 14px; color: #ef4444") Due: [Aug 10]

    //- Details
    div(style="margin-bottom: 24px; display: flex; flex-direction: column; gap: 16px")
      div
        p(style="margin-bottom: 4px; font-weight: 500; font-size: 14px; color: #6b7280") Description
        p(style="font-size: 14px; color: #111827") Transaction Type: 
          span(style="font-weight: 700") [ Deposit ]
      div
        p(style="margin-bottom: 4px; font-weight: 500; font-size: 14px; color: #6b7280") Notes
        p(style="font-size: 14px; color: #111827") Your transaction has been processed successfully. You can always view your history and receipts in your Staipy dashboard.

    //- CTA Button
    div(style="margin-bottom: 24px")
      a(href="#" target="_blank")
        button(style="display: flex; height: 36px; width: 100%; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; padding: 12px 16px; font-weight: 500; color: #ffffff; transition: background-color 0.2s; background: #007AFF; border: none; cursor: pointer; text-decoration: none")
          | Preview invoice details

    //- Signature
    div(style="margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px")
      p(style="margin-bottom: 4px; font-weight: 500; font-size: 14px; color: #6b7280") Best
      p(style="font-size: 14px; color: #111827") The Staipy team

    //- Socials
    div(style="border-color: #f3f4f6")
      p(style="margin-bottom: 12px; font-weight: 500; font-size: 14px; color: #6b7280") Socials
      div(style="display: flex; align-items: center; gap: 16px")
        button(style="display: flex; height: 32px; width: 32px; align-items: center; justify-content: center; border-radius: 50%; background-color: #ffffff; transition: background-color 0.2s; border: none; cursor: pointer" type="button")
          svg(style="height: 16px; width: 16px; color: #4b5563; fill: currentColor" viewBox="0 0 24 24")
            title Twitter
            path(d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z")
        button(style="display: flex; height: 32px; width: 32px; align-items: center; justify-content: center; border-radius: 50%; background-color: #ffffff; transition: background-color 0.2s; border: none; cursor: pointer" type="button")
          svg(style="height: 16px; width: 16px; color: #4b5563; fill: currentColor" viewBox="0 0 24 24")
            title Website
            path(d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z")

  //- Footer
  div(style="border-top: 1px solid #e5e7eb; padding: 8px 24px; background: #FAFAFA")
    div(style="text-align: center")
      p(style="font-weight: 500; font-size: 14px; color: #6b7280")
        | Contact us 
        a(style="color: #3b82f6; text-decoration: none" href="mailto:[email protected]" onmouseover="this.style.color='#1d4ed8'" onmouseout="this.style.color='#3b82f6'") [email protected]