Created Login Page

components/LOGIN/index.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import Image from "next/image";
+
+function Login() {
+  return (
+    <div className="flex flex-col min-h-screen">
+      {/* Fixed Navbar */}
+      <nav className="sticky top-1 left-0 right-1 bg-white bg opacity-95 p-4  z-10">
+        <div className="container mx-auto flex justify-start items-center">
+          <div className="text-white font-bold text-lg"></div>
+          <div className="space-x-4 ">
+            <Image
+              className="h-auto max-h-12 "
+              src="/logo1.png"
+              alt="me"
+              width={150}
+              height={50}
+            />
+          </div>
+        </div>
+      </nav>
+        {/* image section */}
+      <div className="relative mt-0">
+        <div className="absolute top-0 left-0 w-full h-full bg-gray-500 opacity-40 z-0" />
+        <Image
+          src="/2.jpg"
+          alt="me"
+          className="w-full"
+          width={800}
+          height={100}
+        />
+
+        <div className="absolute top-0 left-0 w-full h-full flex flex-col md:flex-col z-10">
+            <div className="md:h-3/5 h-1/3  "></div>
+            <div className="flex flex-row ">
+                <div className="md:w-12 w-3"></div>
+            <div className="flex flex-col">
+          <div className="w-full md:w-3/4 font-bold md:text-4xl  text-lg">Login</div>
+          <div className="w-full md:w-3/4 flex flex-row">
+            <a
+              href="#"
+              className="text-sm  md:text-xl text-white hover:text-orangee "
+            >
+              Home
+            </a>{" "}
+            /{" "}
+            <a
+              href="#"
+              className="text-sm  md:text-xl text-white hover:text-orangee"
+            >
+              Login
+            </a>
+            </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      {/* Content Section */}
+      <section className="flex flex-col items-center justify-center bg-nav_color bg-cover h-80">
+        <div className="w-full h-4 flex items-center justify-center ">
+          <div className="max-w-sm w-full md:max-w-2xl overflow-hidden">
+            <div className="px-6 py-0">
+
+              <div className="text-gray-700 text-base">
+
+                <form className="bg-white rounded-lg p-4 mt-6">
+                  <div className="mb-4">
+                    <label htmlFor="email" className="block mb-2 font-medium">
+                      Email
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:border-orangee"
+                      placeholder="Enter your email"
+                      required
+                    />
+                  </div>
+                  <div className="mb-4">
+                    <label
+                      htmlFor="password"
+                      className="block mb-1 font-medium"
+                    >
+                      Password
+                    </label>
+                    <input
+                      type="password"
+                      id="password"
+                      className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:border-orangee"
+                      placeholder="Enter your password"
+                      required
+                    />
+                  </div>
+                  <div className="mb-2">
+                    <a
+                      href="#"
+                      className="text-sm text-orangee hover:underline"
+                    >
+                      Forgot password?
+                    </a>
+                  </div>
+                  <div>
+                    <button
+                      type="submit"
+                      className="w-full py-2 px-4 bg-orange2 text-white font-semibold rounded hover:bg-orangee"
+                    >
+                      Login
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default Login;

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,125 @@
+import React from "react";
+
+function 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 Value = [
+    {
+      placeholder: "Email",
+    },
+    {
+      placeholder: "USN",
+    },
+    {
+      placeholder: "Phone Number",
+    },
+    {
+      placeholder: "Program",
+    },
+    {
+      placeholder: "Your TechStack",
+    },
+  ];
+  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";
+
+  const proficiencyOptions = [
+    { label: "Beginner", id: "inline-radio" },
+    { label: "Average", id: "inline-2-radio" },
+    { label: "Good", id: "inline-checked-radio1" },
+    { label: "Expert", id: "inline-checked-radio2" },
+  ];
+
+  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 key={index}>
+            <div className={Style1}>
+              <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>
+          </div>
+        ))}
+        <div className="flex flex-wrap -mx-3 mb-1">
+          <div className="w-full px-3">
+            <label
+              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-1"
+              htmlFor="grid-password"
+            >
+              Proficiency
+            </label>
+            <div className="flex xs:flex-col items-center ">
+              {proficiencyOptions.map((option) => (
+                <div
+                  className="flex items-center xs:flex-col mr-4"
+                  key={option.id}
+                >
+                  <input
+                    id={option.id}
+                    type="radio"
+                    value=""
+                    name="inline-radio-group"
+                    className="w-4 h-4 text-orangee accent-orangee xs:flex-col bg-gray-100 border-gray-300  "
+                  />
+                  <label
+                    htmlFor={option.id}
+                    className="ml-2 text-sm font-medium xs:flex-col text-gray-900 dark:text-gray-300"
+                  >
+                    {option.label}
+                  </label>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default Form;

components/PROFILE/Member.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import Image from "next/image";
+function 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;
+  const Team = [
+    {
+      placeholder: "Member 1",
+    },
+    {
+      placeholder: "Member 2",
+    },
+    {
+      placeholder: "Member 3",
+    },
+  ];
+  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;

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