Finished styling the Contact component

2025-06-05 17:00:07 +03:30
parent d44aa203e0
commit 7065279807
11 changed files with 296 additions and 118 deletions
@@ -0,0 +1,22 @@
+import Button from '@/components/uikit/button';
+import FormField from '@/components/uikit/inputs';
+
+const ContactForm = () => {
+  return (
+    <div className="w-full rounded-4xl bg-white p-4 md:w-1/2">
+      <h2 className="mb-6 text-5xl text-gray-800">
+        Contact <span className="text-5xl max-md:font-bold"> me</span>
+      </h2>
+      <div className="space-y-4">
+        <FormField type="text" placeholder="Enter your name" />
+        <FormField type="email" placeholder="Enter your email" />
+        <FormField type="tel" placeholder="Enter your phone" />
+        <FormField type="textarea" placeholder="Write your message" />
+
+        <Button className="w-full">Submit Message</Button>
+      </div>
+    </div>
+  );
+};
+
+export default ContactForm;
@@ -0,0 +1,54 @@
+import { Icon } from '@/components/uikit/icons';
+
+const TouchUs = () => {
+  return (
+    <div className="w-full p-8 md:w-1/2">
+      <h1 className="mb-4 text-3xl font-light text-gray-800 md:text-5xl">
+        Get in touch{' '}
+        <span className="text-3xl font-light md:text-5xl md:font-bold">
+          with us
+        </span>
+      </h1>
+      <p className="mb-6 text-base font-normal 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">
+            <Icon name="phone" className="text-white" />
+          </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">
+            <Icon name="email" className="text-white" />
+          </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">
+            <Icon name="location" className="text-white" />
+          </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>
+  );
+};
+
+export default TouchUs;