pasargad/src/app/contact-us/page.tsx

import Button from '@/components/uikit/button';
import Head from 'next/head';

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>

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

        <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>
        </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>
  );
}