margins and copy

This commit is contained in:
Sentientsoap 2023-12-12 16:32:43 +01:00
parent 031cd6e2bb
commit 91de639896
6 changed files with 41 additions and 31 deletions

View file

@ -1,10 +1,11 @@
"use client"
import { BuildingOffice2Icon, EnvelopeIcon, PhoneIcon } from "@heroicons/react/24/outline"
import { FormEvent, useState } from "react"
import { FormEvent, use, useState } from "react"
export default function Contact() {
const [isSent, setIsSent] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault()
@ -16,8 +17,7 @@ export default function Contact() {
}
setIsLoading(true)
await fetch("/api/send", {
fetch("/api/send", {
method: "POST",
headers: {
"Content-Type": "application/json",
@ -30,12 +30,20 @@ export default function Contact() {
phoneNumber: form.phoneNumber.value,
}),
})
form.reset()
setIsSent(true)
setIsLoading(false)
.then((response) => {
if (!response.ok) {
throw new Error("Failed to send message")
}
form.reset()
setIsSent(true)
})
.catch((error) => {
setError(error.message)
})
.finally(() => {
setIsLoading(false)
})
}
return (
<div className="relative isolate bg-primary-50">
{isSent && (
@ -50,11 +58,11 @@ export default function Contact() {
</div>
)}
<div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
<div className="relative px-6 pb-20 pt-24 sm:pt-32 lg:static lg:px-8 lg:py-48">
<div className="relative px-6 pb-1 pt-12 sm:pt-32 lg:static lg:px-8 lg:py-20">
<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">
Feel free to contact me for any questions or inquiries. we will get back to you as soon as possible.
Feel free to contact us for any questions or inquiries. we will get back to you as soon as possible.
</p>
<dl className="mt-10 space-y-4 text-base leading-7 text-primary-800">
<div className="flex gap-x-4">
@ -93,7 +101,7 @@ export default function Contact() {
</dl>
</div>
</div>
<form onSubmit={handleSubmit} className="px-6 pb-24 pt-20 sm:pb-32 lg:px-8 lg:py-48">
<form onSubmit={handleSubmit} className="px-6 pb-10 pt-20 sm:pb-24 lg:px-10 lg:py-20">
<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>
@ -107,7 +115,7 @@ export default function Contact() {
name="firstName"
id="firstName"
autoComplete="given-name"
className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
className="block w-full rounded-md border-0 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
/>
</div>
</div>
@ -122,7 +130,7 @@ export default function Contact() {
name="lastName"
id="lastName"
autoComplete="family-name"
className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
className="block w-full rounded-md border-0 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
/>
</div>
</div>
@ -137,7 +145,7 @@ export default function Contact() {
name="email"
id="email"
autoComplete="email"
className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
className="block w-full rounded-md border-0 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
/>
</div>
</div>
@ -152,7 +160,7 @@ export default function Contact() {
name="phoneNumber"
id="phoneNumber"
autoComplete="tel"
className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
className="block w-full rounded-md border-0 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
/>
</div>
</div>
@ -166,7 +174,7 @@ export default function Contact() {
name="message"
id="message"
rows={4}
className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
className="block w-full rounded-md border-0 px-3.5 py-2 text-primary-800 shadow-md ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
defaultValue={""}
/>
</div>

View file

@ -3,11 +3,11 @@ import Link from "next/link"
export default async function Web() {
return (
<section>
<div className="mx-auto grid max-w-screen-xl p-2 pt-8 text-center">
<div className="mx-auto grid max-w-screen-xl pb-2 text-center">
<div className="mx-auto place-self-center">
<div className="relative">
<div className="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
<div className="px-6 pb-24 pt-10 sm:pb-32 lg:col-span-7 lg:px-0 lg:pb-56 lg:pt-48 xl:col-span-6">
<div className="px-6 pb-24 pt-4 sm:pb-24 lg:col-span-7 lg:px-0 lg:pb-48 lg:pt-16 xl:col-span-6">
<div className="mx-auto max-w-2xl lg:mx-0">
<h1 className="mt-4 text-4xl font-bold tracking-tight text-primary-800 sm:mt-10 sm:text-6xl lg:mt-24">
Your personal <span className="block xl:inline">web development team</span>
@ -25,7 +25,7 @@ export default async function Web() {
</div>
<div className="relative lg:col-span-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 lg:absolute lg:inset-0 lg:aspect-auto lg:h-full"
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"
alt=""
/>

View file

@ -4,23 +4,23 @@ const features = [
{
name: "Web & E-commerce",
description:
"Elevating businesses online with tailored solutions from basic websites to full custom E-commerce stores and expert Shopify development.",
"Elevating businesses online with tailored solutions ranging from basic websites to fully customized E-commerce stores and expert Shopify development.",
icon: BuildingStorefrontIcon,
},
{
name: "Branding & design",
description: "Crafting captivating identities through design, our services breathe life into brands.",
description: "With a focus on thoughtful design, our services bring vitality to our clients' brands. We specialize in creating distinctive identities that leave a lasting impression, reflecting the essence of each story.",
icon: PaintBrushIcon,
},
{
name: "Cloud based setup",
description: "Taking software to new heights by placing it all on the cloud's limitless expanse.",
description: "Empower your software with our cloud-based services, bringing it to new heights within the boundless expanse of the cloud. We seamlessly integrate cutting-edge technologies, ensuring scalability, security, and unrivaled performance for your digital solutions.",
icon: CloudArrowUpIcon,
},
{
name: "Your idea here",
name: "Your vision quantified",
description:
"Experience a warm welcome at our place, savor a cup of coffee, and share your vision – together, we'll uncover the perfect solution for you",
"Experience a warm welcome at our office, savor a cup of coffee, and share your views on your online presence. Together, we'll uncover the perfect solution for you or your enterprise",
icon: LightBulbIcon,
},
]
@ -30,7 +30,7 @@ export default async function Projects() {
<section>
<div className="mx-auto grid max-w-screen-xl p-4 text-center">
<div className="mx-auto place-self-center">
<div className="pb-4 pt-24">
<div className="pb-4 pt-9">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:text-center">
<p className="mt-2 text-3xl font-bold tracking-tight text-primary-800 sm:text-4xl">

View file

@ -30,17 +30,19 @@ export default async function About() {
<section>
<div className="p-2 mx-auto grid max-w-screen-xl text-center">
<div className="mx-auto place-self-center">
<div className="pb-4 pt-24">
<div className="pb-4 pt-8">
<div className="mx-auto max-w-7xl px-6 text-center lg:px-8">
<div className="mx-auto max-w-2xl">
<h2 className="text-3xl font-bold tracking-tight text-primary-800 sm:text-4xl">Meet our team</h2>
<p className="mt-4 text-lg leading-8 text-primary-800">
We’re a dynamic group of individuals who are passionate about what we do.
We are a dynamic group of individuals , passionate about our respective fields of expertise.
{/*We’re a dynamic group of individuals who are passionate about what we do.*/}
</p>
</div>
<ul
role="list"
className="l mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-4 lg:gap-8"
className="l mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-4 lg:gap-8"
>
{people.map(({ name, imageUrl, role, linkedinUrl }) => (
<li key={name} className="rounded-2xl bg-primary-800 px-8 py-10">