From d3e6b76fe427fbf82a8639d5e6a1337d94550a77 Mon Sep 17 00:00:00 2001
From: Sentientsoap <n.eliaerts@gmail.com>
Date: Mon, 18 Dec 2023 14:32:24 +0100
Subject: [PATCH] redid css, reworked "sent"

---
 app/contact/page.tsx |  32 +++++++++++++++++++++-----------
 app/layout.tsx       |   2 +-
 app/page.tsx         |   3 ++-
 public/loading.png   | Bin 0 -> 1419 bytes
 4 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 public/loading.png

diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index fbd2795..410ca05 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -1,6 +1,7 @@
 "use client"
 import { BuildingOffice2Icon, EnvelopeIcon, PhoneIcon } from "@heroicons/react/24/outline"
-import { FormEvent, use, useEffect, useState } from "react"
+import Image from "next/image"
+import { FormEvent, useEffect, useState } from "react"
 
 export default function Contact() {
   const [isSent, setIsSent] = useState(false)
@@ -48,25 +49,24 @@ export default function Contact() {
     if(isSent) {
       const timeout = setTimeout(() => {
         setIsSent(false)
-      }, 3000000)
+      }, 3000)
       return () => clearTimeout(timeout)
     }
   })
   return (
     <div className="relative isolate bg-primary-50">
-      {isSent && (
+        {isSent && (
         <div 
         onClick={() => setIsSent(false)} 
-        className="cursor-pointer absolute inset-0 flex items-center justify-center"
+        className="cursor-pointer fixed inset-0 flex items-center justify-center transition-opacity duration-300 ease-in-out"
         >
-        <div className="bg-emerald-900 border-2 rounded-lg h-full w-full p-2" role="alert">
-          <span className="mr-2 flex-auto text-left font-semibold">Your message has been sent.</span>
+          <div className="bg-primary-50/90 border rounded-lg h-auto w-auto p-4" role="alert">
+            <span className="font-semibold">Thank you! Your message was sent successfully</span>
+          </div>
         </div>
-      </div>
-      
       )}
       <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
-        <div className="relative px-6 pb-1 pt-12 sm:pt-32 lg:static lg:px-8 lg:py-20">
+        <div className="relative px-5 pb-1 pt-12 sm:pt-32 lg:static lg:px-8">
           <div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
             <h2 className="text-3xl font-bold tracking-tight text-primary-800">Get in touch</h2>
             <p className="mt-6 text-lg leading-8 text-primary-800">
@@ -109,7 +109,7 @@ export default function Contact() {
             </dl>
           </div>
         </div>
-        <form onSubmit={handleSubmit} className="px-6 pb-10 pt-20 sm:pb-24 lg:px-10 lg:py-20">
+        <form onSubmit={handleSubmit} className="px-6 pb-10 pt-20 sm:pb-24 lg:p-10">
           <div className="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
             <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
               <div>
@@ -194,7 +194,17 @@ export default function Contact() {
                 type="submit"
                 className="rounded-md bg-primary-800 px-3.5 py-2.5 text-center text-sm font-semibold text-primary-50 shadow-sm hover:bg-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
               >
-                Send message
+                {isLoading ? (
+                  <Image
+                  src="/loading.png"
+                  alt="loading"
+                  width={18}
+                  height={18}
+                  className="animate-spin grayscale"
+                  />
+                ) : (
+                  "Send message"
+                )}
               </button>
             </div>
           </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index 2cf2731..cad7c54 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -35,7 +35,7 @@ export default function RootLayout({
         <NextUiProvider>
           <div className="flex min-h-screen flex-col justify-between bg-primary-50">
             <Navbar />
-            <main className="mb-auto h-[calc(100%-160px)]">{children}</main>
+            <main className="h-[calc(100%-160px)]">{children}</main>
             <Footer />
           </div>
         </NextUiProvider>
diff --git a/app/page.tsx b/app/page.tsx
index f0168e6..18337ef 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link"
 
+
 export default async function Web() {
   return (
     <section>
@@ -23,7 +24,7 @@ export default async function Web() {
                   </div>
                 </div>
               </div>
-              <div className="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0">
+              <div className="relative lg:col-span-5 mb-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0">
                 <img
                   className="aspect-[3/2] w-full object-cover sm:mb-10 lg:absolute lg:inset-0 lg:aspect-auto lg:h-full"
                   src="/presentation.svg"
diff --git a/public/loading.png b/public/loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba62031a655bef0eebdecd5bd8fe4b00ad937e26
GIT binary patch
literal 1419
zcmV;61$6p}P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800004b3#c}2nYxW
zd<bNS00009a7bBm0002&0002&0eL8Ky#N3J8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H11qew*K~z|Ut(SRhR8<(of8Tv?hL%Fv+Oj8t7D!42Dnvqp0i&Y)
z0Z~j7C?HfV0yadDB?fiWU_wn<L<}udDN7+>SOf`(TGVKWRt+YgDU>xWOM#Xu$aLnt
z&p&KoI(<`H=$A|~_q=n@Id8e|eowf^nlSanhfrq~Dr10<Ap49JdVTli%~x8ZBll*W
zH4s-zfewuhC>55^8M1rRrfV(LGWQZdT-G)*2M~IP9cx)@wCq?1rq7)}K#cVOuBj+m
zyZm?qo}HcTyYzQxOw4eqPu*95%$%G=+l~7eArl3}Wk$}zy}_XS(zb%Ut7T=qG_lvY
zW+X);M;9(=yg#8j)i}<X<mBYPqS;Mufvs_C5i%n&RVMoUrU>B3kw93`uVdPa9BlZ1
zrMh~UzkO{vY8`Wp|H9>KHBUAhVCJ0peSxW-!Z1E7XYmjK2VMngJ!t2{dVA@e;I7F9
zde#p+fvjmZfLeC%SZDU1vC{`&fAPkX#?>JxyMY@(70M@;?WBKETwEOyJ0(h@d$eYw
zXTY*UW#N!r2lzewU9s#t596Ng8_xpIH5V9RE6T$SLlw3(r9{;WISZGfyw`*%vSQ<!
z+y%`VMwP0{<?7nWMs=(Tr72xHZ4ePBlG9`r^y`-J{^@JCYDD!-AO*OtD!J#9+UK>#
zygsx7#r40|*Ob{yx^RzgORp-wcy&a1<<%XhDyzOJue>r(RV@K{V`Y9%I}~1k$Y4><
ziJJ9+#jljMl`+7X%BzDM^fw^xE-K3;koVC5*EL6hE)o1N%9M8(&Dq&j0Zvv_y(7X~
zQSc?>xUw?J9Kc3cmz|&QYpVbvTIT@=jUc09%<0<wX5FB+3g9?qBWUAYQZ>&8E(4vt
zCRvVsxvc^W?3+|kUU@xT#hI%}60Yt^?VYmE1`2^(k2(7S3um{gx%j_&uvgdfz~V^E
zHaD;2xd|!Bz<j_0P+`A?mDQH!06!l)H8?ENBhE3U!-n;%frvF8Sh1n26Ru0MT<ct5
z$*l8jX<SlLV#g=-*^bJjdZ=1lo&4y~)I**xndOCr9pgfAJ$iQaozBR}aJ)FJsiVhE
z&Ou~tBqmVR!3y?iv>WE<?`yxhpt!J|8(*WAlvUmcUs_#IoN>PaL};?o6q0X++YM+G
z;I^sFRUwPJ+jNo&TUQlq8F4=W6glkyhn)6${!V~EAYc@k?m@J{^1@qO;tQ<?&Nc@1
z?UAXewRd*Ig#P{G36kKcU^J<vW~wTOe<*!MT{F<Yi6=&<e<>o@N=wU!hJDNsaeJzf
zLn8;LmO#`_w`%>?pFo;iZc&*%FMIMjfTCSrbt4>l%os5t*ZnRlV|-NuucV~J4%&(P
z1;*VC#OFsxr#~AIaXrtikrB)Wu19eWS6BAf0I+Gtp~uAu|0yE7RQb#nQ&zO|&@&Ch
zpp`f?(i}j938TLMbxN!&)+oTdmotA+*BJ~f0#+$Zsi`P?IuIBe{_wzoc8G2TB5y}$
zK{prf-P;jBj12QKQFtU)fF>Q$YqO?Z1U`tyyZmF)6nc1Qbn^v$>A<(R{NdHUD4d8D
zpv9kN1}EnCo`EU=zjI?f5Z%c9SlcbGDAwFowOgBZ9^3;=jDinOdw$%w`u>j{$B+9H
zuiwrzNSX`3C&jzlh7TVeilrIz+t8~*{@^rUoqw4klLU+)d&9PWNrO2+Mp{}O@M%jm
Z{{_RT(F1YZ5`h2!002ovPDHLkV1nu>ln?*_

literal 0
HcmV?d00001