This commit is contained in:
Sentientsoap 2023-12-12 17:59:15 +01:00
parent 91de639896
commit 1eabaf7e73
3 changed files with 18 additions and 10 deletions

View file

@ -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">

View file

@ -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">

View file

@ -1,3 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;