margins and copy
This commit is contained in:
parent
031cd6e2bb
commit
91de639896
6 changed files with 41 additions and 31 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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=""
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue