Finished styling the Contact component
This commit is contained in:
zahravaziri
+35
-115
@@ -1,124 +1,44 @@
|
||||
import Button from '@/components/uikit/button';
|
||||
import Head from 'next/head';
|
||||
import images from '@/assets/images/images';
|
||||
import InnerPageBanner from '@/components/layout/innerPages/banner';
|
||||
import ContactMap from '@/components/layout/map';
|
||||
import ContactForm from '@/components/pages/contact/ContactMeForm';
|
||||
import TouchUs from '@/components/pages/contact/TouchUs';
|
||||
import { t } from '@/locales/translates';
|
||||
import Image from 'next/image';
|
||||
|
||||
async function getData() {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
return { message: 'This data was fetched on the server!' };
|
||||
}
|
||||
|
||||
export default async function Contact() {
|
||||
const data = await getData();
|
||||
|
||||
export default function Contact() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center bg-gray-100 px-4 pt-8">
|
||||
<div className="e flex w-full max-w-5xl flex-col overflow-hidden rounded-lg md:flex-row">
|
||||
<div className="w-full p-8 md:w-1/2">
|
||||
<h1 className="mb-4 text-3xl font-bold text-gray-800">
|
||||
Get in touch with us
|
||||
</h1>
|
||||
<p className="mb-6 text-gray-600">
|
||||
Reach out for any inquiries, support, or feedback—we’d love to hear
|
||||
from you!
|
||||
</p>
|
||||
<main className="flex flex-col items-center justify-between">
|
||||
<InnerPageBanner
|
||||
title={t('pages_contact_title') as string}
|
||||
imageSrc={images.blogBanner.src}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col justify-between space-y-4">
|
||||
<div className="flex items-center">
|
||||
<div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-red-500">
|
||||
<svg
|
||||
className="h-6 w-6 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-800">Contact</h3>
|
||||
<p className="text-gray-600">+44 (0) 20 1234 5678</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-red-500">
|
||||
<svg
|
||||
className="h-6 w-6 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M16 12h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v4a2 2 0 002 2h2m8 0H8m8 0a4 4 0 01-4 4H8m0-8v8m0-8H6a2 2 0 00-2 2v4a2 2 0 002 2h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-800">Email</h3>
|
||||
<p className="text-gray-600">support@mybusiness.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-red-500">
|
||||
<svg
|
||||
className="h-6 w-6 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M17.657 16.657L12 21.314l-5.657-5.657a8 8 0 1111.314 0zM12 14a2 2 0 100-4 2 2 0 000 4z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-800">Our Address</h3>
|
||||
<p className="text-gray-600">
|
||||
123 Business Street, London EC1A 1BB, UK
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full flex-col bg-gray-200 pt-4 md:pt-28">
|
||||
<div className="relative container mx-auto flex w-full flex-col items-stretch overflow-hidden rounded-lg md:flex-row">
|
||||
<TouchUs />
|
||||
<ContactForm />
|
||||
</div>
|
||||
|
||||
<div className="w-full rounded-4xl bg-white p-4 md:w-1/2">
|
||||
<h2 className="mb-6 text-2xl font-bold text-gray-800">Contact me</h2>
|
||||
<div className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your name"
|
||||
className="w-full rounded-lg border border-gray-300 p-3 focus:ring-2 focus:ring-red-500 focus:outline-none"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="w-full rounded-lg border border-gray-300 p-3 focus:ring-2 focus:ring-red-500 focus:outline-none"
|
||||
/>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Enter your phone"
|
||||
className="w-full rounded-lg border border-gray-300 p-3 focus:ring-2 focus:ring-red-500 focus:outline-none"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Write your message"
|
||||
className="h-32 w-full resize-none rounded-lg border border-gray-300 p-3 focus:ring-2 focus:ring-red-500 focus:outline-none"
|
||||
></textarea>
|
||||
|
||||
<Button className="w-full">Submit Message</Button>
|
||||
<div className="absolute -bottom-[17.32rem] w-1/2 max-md:hidden md:w-2/5">
|
||||
<Image
|
||||
alt="footer-bg"
|
||||
src={images.factoryVector}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4 w-full md:mt-28">
|
||||
<div className="h-64 w-full overflow-hidden rounded-lg bg-gray-200">
|
||||
<ContactMap />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 w-full max-w-5xl">
|
||||
<div className="h-64 w-full overflow-hidden rounded-lg bg-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user