From 1eabaf7e739dc65452046eccfc322bb35aede7a9 Mon Sep 17 00:00:00 2001
From: Sentientsoap <n.eliaerts@gmail.com>
Date: Tue, 12 Dec 2023 17:59:15 +0100
Subject: [PATCH] EoD

---
 app/contact/page.tsx  | 24 ++++++++++++++++--------
 app/services/page.tsx |  2 +-
 styles/tailwind.css   |  2 +-
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 30cad14..fbd2795 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { BuildingOffice2Icon, EnvelopeIcon, PhoneIcon } from "@heroicons/react/24/outline"
-import { FormEvent, use, useState } from "react"
+import { FormEvent, use, useEffect, useState } from "react"
 
 export default function Contact() {
   const [isSent, setIsSent] = useState(false)
@@ -44,18 +44,26 @@ export default function Contact() {
         setIsLoading(false)
       })
   }
+  useEffect(() => {
+    if(isSent) {
+      const timeout = setTimeout(() => {
+        setIsSent(false)
+      }, 3000000)
+      return () => clearTimeout(timeout)
+    }
+  })
   return (
     <div className="relative isolate bg-primary-50">
       {isSent && (
-        <div
-          onClick={() => setIsSent(false)}
-          className="cursor-pointer bg-primary-700 py-4 text-center text-primary-800 lg:px-4"
+        <div 
+        onClick={() => setIsSent(false)} 
+        className="cursor-pointer absolute inset-0 flex items-center justify-center"
         >
-          <div className="flex items-center bg-primary-50 p-2 leading-none lg:inline-flex lg:rounded-full" role="alert">
-            <span className="mr-3 flex rounded-full bg-primary-50 px-2 py-1 text-xs font-bold uppercase">Sent</span>
-            <span className="mr-2 flex-auto text-left font-semibold">Your message has been sent.</span>
-          </div>
+        <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>
+      </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">
diff --git a/app/services/page.tsx b/app/services/page.tsx
index 2996b07..41c7341 100644
--- a/app/services/page.tsx
+++ b/app/services/page.tsx
@@ -37,7 +37,7 @@ export default async function Projects() {
                   Everything to build your online presence
                 </p>
               </div>
-              <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
+              <div className="mx-auto mt-8 max-w-2xl sm:mt-20 lg:mt-14 lg:max-w-5xl">
                 <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
                   {features.map((feature) => (
                     <div key={feature.name} className="relative flex flex-col">
diff --git a/styles/tailwind.css b/styles/tailwind.css
index b5c61c9..bd6213e 100644
--- a/styles/tailwind.css
+++ b/styles/tailwind.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
\ No newline at end of file