🚧 All the contact related stuff are stored here...

src/components/ContactPage/ContactDetails.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import * as Icon1 from "react-icons/bi"
+import * as Icon3 from "react-icons/hi2"
+import * as Icon2 from "react-icons/io5"
+
+const contactDetails = [
+    {
+      icon: "HiChatBubbleLeftRight",
+      heading: "Chat on us",
+      description: "Our friendly team is here to help.",
+      details: "info@studynotion.com",
+    },
+    {
+      icon: "BiWorld",
+      heading: "Visit us",
+      description: "Come and say hello at our office HQ.",
+      details:
+        "Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016",
+    },
+    {
+      icon: "IoCall",
+      heading: "Call us",
+      description: "Mon - Fri From 8am to 5pm",
+      details: "+123 456 7869",
+    },
+]
+
+
+const ContactDetails = () => {
+  return (
+    <div className="flex flex-col gap-6 rounded-xl bg-richblack-800 p-4 lg:p-6">
+      {contactDetails.map((ele, i) => {
+        let Icon = Icon1[ele.icon] || Icon2[ele.icon] || Icon3[ele.icon]
+        return (
+          <div
+            className="flex flex-col gap-[2px] p-3 text-sm text-richblack-200"
+            key={i}
+          >
+            <div className="flex flex-row items-center gap-3">
+              <Icon size={25} />
+              <h1 className="text-lg font-semibold text-richblack-5">
+                {ele?.heading}
+              </h1>
+            </div>
+            <p className="font-medium">{ele?.description}</p>
+            <p className="font-semibold">{ele?.details}</p>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default ContactDetails

src/components/ContactPage/ContactForm.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import ContactUsForm from "./ContactUsForm"
+
+const ContactForm = () => {
+  return (
+    <div className="border border-richblack-600 text-richblack-300 rounded-xl p-7 lg:p-14 flex gap-3 flex-col">
+      <h1 className="text-4xl leading-10 font-semibold text-richblack-5">
+        Got a Idea? We&apos;ve got the skills. Let&apos;s team up
+      </h1>
+      <p className="">
+        Tell us more about yourself and what you&apos;re got in mind.
+      </p>
+
+      <div className="mt-7">
+        <ContactUsForm />
+      </div>
+    </div>
+  )
+}
+
+export default ContactForm

src/components/ContactPage/ContactUsForm.jsx

@@ -0,0 +1,192 @@
+import React, { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+
+import {contactusEndpoint} from "../../services/apis"
+import CountryCode from "../../data/countrycode.json"
+import {apiConnector} from "../../services/apiconnector"
+
+const ContactUsForm = () => {
+
+    const [loading, setLoading] = useState(false)
+
+    const {
+        register,
+        handleSubmit,
+        reset,
+        formState: { errors, isSubmitSuccessful },
+    } = useForm()
+
+    const submitContactForm = async (data) => {
+        // console.log("Form Data - ", data)
+        try {
+            setLoading(true)
+            const res = await apiConnector(
+                "POST",
+                contactusEndpoint.CONTACT_US_API,
+                data
+            )
+
+            console.log("Email Res - ", res)
+            setLoading(false)
+        }
+        catch (error) {
+            console.log("ERROR MESSAGE - ", error.message)
+            setLoading(false)
+        }
+    }
+
+    useEffect(() => {
+        if (isSubmitSuccessful) {
+        reset({
+            email: "",
+            firstname: "",
+            lastname: "",
+            message: "",
+            phoneNo: "",
+        })
+        }
+    }, [reset, isSubmitSuccessful])
+
+  return (
+    <form
+      className="flex flex-col gap-7"
+      onSubmit={handleSubmit(submitContactForm)}
+    >
+      <div className="flex flex-col gap-5 lg:flex-row">
+        <div className="flex flex-col gap-2 lg:w-[48%]">
+          <label htmlFor="firstname" className="lable-style">
+            First Name
+          </label>
+          <input
+            type="text"
+            name="firstname"
+            id="firstname"
+            placeholder="Enter first name"
+            className="form-style"
+            {...register("firstname", { required: true })}
+          />
+          {errors.firstname && (
+            <span className="-mt-1 text-[12px] text-yellow-100">
+              Please enter your name.
+            </span>
+          )}
+        </div>
+        <div className="flex flex-col gap-2 lg:w-[48%]">
+          <label htmlFor="lastname" className="lable-style">
+            Last Name
+          </label>
+          <input
+            type="text"
+            name="lastname"
+            id="lastname"
+            placeholder="Enter last name"
+            className="form-style"
+            {...register("lastname")}
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label htmlFor="email" className="lable-style">
+          Email Address
+        </label>
+        <input
+          type="email"
+          name="email"
+          id="email"
+          placeholder="Enter email address"
+          className="form-style"
+          {...register("email", { required: true })}
+        />
+        {errors.email && (
+          <span className="-mt-1 text-[12px] text-yellow-100">
+            Please enter your Email address.
+          </span>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label htmlFor="phonenumber" className="lable-style">
+          Phone Number
+        </label>
+
+        <div className="flex gap-5">
+          <div className="flex w-[81px] flex-col gap-2">
+            <select
+              type="text"
+              name="firstname"
+              id="firstname"
+              placeholder="Enter first name"
+              className="form-style"
+              {...register("countrycode", { required: true })}
+            >
+              {CountryCode.map((ele, i) => {
+                return (
+                  <option key={i} value={ele.code}>
+                    {ele.code} -{ele.country}
+                  </option>
+                )
+              })}
+            </select>
+          </div>
+          <div className="flex w-[calc(100%-90px)] flex-col gap-2">
+            <input
+              type="number"
+              name="phonenumber"
+              id="phonenumber"
+              placeholder="12345 67890"
+              className="form-style"
+              {...register("phoneNo", {
+                required: {
+                  value: true,
+                  message: "Please enter your Phone Number.",
+                },
+                maxLength: { value: 12, message: "Invalid Phone Number" },
+                minLength: { value: 10, message: "Invalid Phone Number" },
+              })}
+            />
+          </div>
+        </div>
+        {errors.phoneNo && (
+          <span className="-mt-1 text-[12px] text-yellow-100">
+            {errors.phoneNo.message}
+          </span>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label htmlFor="message" className="lable-style">
+          Message
+        </label>
+        <textarea
+          name="message"
+          id="message"
+          cols="30"
+          rows="7"
+          placeholder="Enter your message here"
+          className="form-style"
+          {...register("message", { required: true })}
+        />
+        {errors.message && (
+          <span className="-mt-1 text-[12px] text-yellow-100">
+            Please enter your Message.
+          </span>
+        )}
+      </div>
+
+      <button
+        disabled={loading}
+        type="submit"
+        className={`rounded-md bg-yellow-50 px-6 py-3 text-center text-[13px] font-bold text-black shadow-[2px_2px_0px_0px_rgba(255,255,255,0.18)] 
+         ${
+           !loading &&
+           "transition-all duration-200 hover:scale-95 hover:shadow-none"
+         }  disabled:bg-richblack-500 sm:text-[16px] `}
+      >
+        Send Message
+      </button>
+    </form>
+  )
+}
+
+export default ContactUsForm