Optimized profile

components/PROFILE/Badge.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+function Badge() {
+  const Badge = 2;
+  return (
+    <div className=" flex justify-start mr-[2vw] mt-2 ml-1 md:ml-0 w-6/6 h-1/4 rounded-lg bg-nav_color shadow-lg  overflow-y-scroll ">
+      <div className="max-w-sm rounded   ">
+        <div className="px-3 py-6">
+          <div className="font-bold text-xl text-black mb-1">Badges</div>
+          <div className="font-bold text-xl text-black mb-1">Badges</div>
+          <div className="font-bold text-xl text-black mb-1">Badges</div>
+          <div className="font-bold text-xl text-black mb-1">Badges</div>
+          <div className="font-bold text-xl text-black mb-1">Badges</div>
+          <div className="font-bold text-xl text-black mb-1">Badges</div>
+
+          <div className="font-bold text-xl text-black mb-1">{`${Badge}`}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Badge;

components/PROFILE/Form.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import {value} from "@/constant/PROFILE/form"
+const Style1 = "flex flex-wrap -mx-3 mb-1";
+  const Style2 = "w-full px-3";
+  const Style3 =
+    "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-1";
+
+    const Style4 =
+    "appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500";
+function Form() {
+  return (
+    <div className="flex flex-col justify-center items-start mt-28 ml-1 mr-1 md:ml-[21.5vw]">
+      <form className="w-full max-w-4xl bg-nav_color p-4 rounded-lg shadow-lg">
+        <div className="flex flex-wrap -mx-3 mb-1">
+          <div className="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+            <label
+              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-1"
+              htmlFor="grid-first-name"
+            >
+              First Name
+            </label>
+            <input
+              className="appearance-none block w-full bg-white text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white "
+              id="grid-first-name"
+              type="text"
+              placeholder="Jane"
+              readOnly
+            />
+          </div>
+          <div className="w-full md:w-1/2 px-3">
+            <label
+              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-1"
+              htmlFor="grid-last-name"
+            >
+              Last Name
+            </label>
+            <input
+              className="appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+              id="grid-last-name"
+              type="text"
+              placeholder="Doe"
+              readOnly
+            />
+          </div>
+        </div>
+        {value?.map((item, index) => (
+          <div className ={Style1} key={index}>
+              <div className={Style2}>
+                <label className={Style3} htmlFor="grid-password">
+                  {item.placeholder}
+                </label>
+                <input
+                  className={Style4}
+                  id="grid-password"
+                  type="text"
+                  placeholder={item.placeholder}
+                  readOnly
+                />
+              </div>
+            </div>
+        ))}
+      </form>
+    </div>
+  );
+}
+
+export default Form;

components/PROFILE/Member.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Image from "next/image";
+import { team } from "@/constant/PROFILE/Member";
+
+const Style =
+    "appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-2 px-6 mb-1 leading-tight focus:outline-none focus:bg-white focus:border-gray-500";
+  const type = "text";
+  const Disable = true;
+function Member() {
+  return (
+    <div className="flex justify-end mr-[2vw] mt-2 md:mt-28 ml-1 md:ml-0  ">
+      <div className=" w-full rounded overflow-hidden shadow-lg bg-nav_color rounded-lg">
+        <div className="flex justify-center">
+          <Image
+            className="h-auto   mt-4 ml-3 mr-3"
+            src="/community.png"
+            alt="me"
+            width={250}
+            height={30}
+          />{" "}
+        </div>
+
+        <div className="px-3 py-1 ">
+          <div className="font-bold text-xl text-black mb-1">Team Members</div>
+          {team?.map((item, index) => (
+            <div key={index}>
+              <input
+                className={Style}
+                type={type}
+                placeholder={item.placeholder}
+                readOnly={Disable}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Member;

components/PROFILE/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import Member from "./Member";
+import Form from "./Form";
+import Badge from "./Badge";
+
+function Profile() {
+  return (
+    <div className="flex flex-col md:flex-row ">
+      <div className="w-full md:w-3/4">
+        <Form />
+      </div>
+      <div className="w-full md:w-1/4 flex flex-col md:ml-4">
+        <Member />
+        <Badge />
+      </div>
+    </div>
+  );
+}
+
+export default Profile;

constant/PROFILE/Member.ts

@@ -0,0 +1,11 @@
+export const team = [
+    {
+      placeholder: "Member 1",
+    },
+    {
+      placeholder: "Member 2",
+    },
+    {
+      placeholder: "Member 3",
+    },
+  ];

constant/PROFILE/form.ts

@@ -0,0 +1,20 @@
+export const value = [
+    {
+      placeholder: "Email",
+    },
+    {
+      placeholder: "USN",
+    },
+    {
+      placeholder: "Phone Number",
+    },
+    {
+      placeholder: "Program",
+    },
+    {
+      placeholder: "Your TechStack",
+    },
+    {
+      placeholder: "Your Proficiency",
+    },
+  ];

pages/index.tsx

@@ -1,15 +1,16 @@
 // import { Inter } from 'next/font/google'
 import DSA from "@/components/DSA/index"
 import Layout from "@/components/LAYOUT"
+import Profile from "@/components/PROFILE"
 // const inter = Inter({ subsets: ['latin'] })
 
 export default function Home() {
 
   return (
    <div>
     <DSA/>
-
     <Layout/>
-   </div>
+    <Profile/>
+    </div>
   )
 }

tailwind.config.js

@@ -17,6 +17,7 @@ module.exports = {
         reddish:"#FB3800",
         greyy:"#F4EEE9",
         orange2:"#FE995C",
+        nav_color:"#fef9f4",
 
       },
       backgroundImage: {