Untitled

import React from "react";

const Registration: React.FC<{}> = () => {
  return (
    <div className="w-full h-screen pt-8">
      <div className="text-center">
        <p className="font-bold text-3xl">Almost there!</p>
        <p className="text-gray-600 text-md">
          Please share the following details to help us serve you better
        </p>
      </div>

      <div className="mt-8">
        <div className="w-11/12 h-fit flex mx-auto bg-[#f5f5f5] rounded-xl px-4">
          <div>
            <p className="w-8 h-8 my-4 mx-5 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-lg">
              1
            </p>
          </div>
          <div className="w-full">
            <p className="font-semibold text-2xl mt-4">User Details</p>
            <div className="grid grid-cols-4 gap-4 mt-5 ">
              <div className="flex flex-col ">
                <label htmlFor="field1">Full Name</label>
                <input
                  type="text"
                  placeholder="Enter Full Name"
                  className="mt-2 p-2 border rounded-lg border-[#bebebf] mb-7"
                />
              </div>
              <div className="flex flex-col">
                <label htmlFor="field2">Phone Number</label>
                <input
                  type="number"
                  placeholder="+91 "
                  className="mt-2 p-2 border rounded-lg border-[#bebebf] mb-7"
                />
              </div>
              <div className="flex flex-col ">
                <label htmlFor="field3">Designation</label>
                <input
                  type="text"
                  placeholder="Your Designation"
                  className="mt-2 p-2 border rounded-lg border-[#bebebf] mb-7"
                />
              </div>
              <div className="flex flex-col ">
                <label htmlFor="field4">Location</label>
                <input
                  type="text"
                  placeholder="Your Location"
                  className="mt-2 p-2 border rounded-lg border-[#bebebf] mb-7"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="mt-1">
        <div className="w-11/12 h-fit flex mx-auto bg-[#f5f5f5] rounded-xl px-4">
          <div>
            <p className="w-8 h-8 my-4 mx-5 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-lg">
              2
            </p>
          </div>
          <div className="w-full">
            <p className="font-semibold text-2xl mt-4">Organisation Details</p>
            <div className="grid grid-cols-4 gap-4 mt-5 ">
              <div className="flex flex-col ">
                <label htmlFor="field1">Organisation Name</label>
                <input
                  type="text"
                  placeholder="Organisation Name"
                  className="mt-2 p-2 border rounded-lg border-[#bebebf] mb-7"
                />
              </div>
              <div className="flex flex-col">
                <label htmlFor="field2">Industry</label>
                <select
                  id="field2"
                  className="mt-2 p-2 border rounded-lg bg-white border-[#bebebf] mb-7"
                  
                >
                  <option value="login">Select</option>
                  <option value="home">option 1</option>
                  <option value="landing">option 2</option>
                </select>
              </div>
              <div className="flex flex-col">
                <label htmlFor="field2">Organization Size</label>
                <select
                  id="field2"
                  className="mt-2 p-2 border rounded-lg bg-white border-[#bebebf] mb-7"
                >
                  <option value="login">Select</option>
                  <option value="home">option 1</option>
                  <option value="landing">option 2</option>
                </select>
              </div>
              <div className="flex flex-col">
                <label htmlFor="field2">Developement Stage</label>
                <select
                  id="field2"
                  className="mt-2 p-2 border rounded-lg bg-white border-[#bebebf] mb-7"
                >
                  <option value="login">Select</option>
                  <option value="home">option 1</option>
                  <option value="landing">option 2</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="mt-1">
        <div className="w-11/12 h-fit flex mx-auto bg-[#f5f5f5] rounded-xl px-4">
          <div>
            <p className="w-8 h-8 my-4 mx-5 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-lg">
              3
            </p>
          </div>
          <div className="w-full">
            <p className="font-semibold text-2xl mt-4">
              Choose Services you are interested in
            </p>
            <div className="grid grid-cols-4 gap-4 mt-5 mb-5 ">
              <button className="border py-7 rounded-lg border-[#bebebf] bg-white ">Component Procurement</button>
              <button className="border py-7 rounded-lg border-[#bebebf] bg-white ">PCB Fabrication</button>
              <button className="border py-7 rounded-lg border-[#bebebf] bg-white ">PCB Assembly</button>
              <button className="border py-7 rounded-lg border-[#bebebf] bg-white ">R&D</button>
            </div>
          </div>
        </div>
      </div>
      <div className="w-full flex justify-center mt-8 text-xl text-white ">
        <button className="mx-auto bg-blue-600 px-14 py-2 rounded-lg">
          Dive in!
        </button>
      </div>
    </div>
  );
};

export default Registration;