tutor-page-screen

src/app/account/onboarding/tutor/layout.tsx

@@ -1,7 +1,9 @@
-export default function Layout({ children }: { children: React.ReactNode }) {
-    return (
-      <div className="relative w-full bg-[#0E0F0E] bg-cover bg-center bg-no-repeat">
-        {children}
-      </div>
-    );
-  }
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <main className="grow">{children}</main>
+    </>
+  );
+};
+
+export default Layout;

src/app/account/onboarding/tutor/page.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
+import Tutor from './tutor'
 
 function Page() {
   return (
     <div>
-
+      <Tutor />
     </div>
   )
 }

src/app/account/onboarding/tutor/tutor.tsx

@@ -1,11 +1,87 @@
-import React from 'react'
+"use client";
+import Input from "@/components/Forms/Input";
+import React from "react";
+import TextArea from "@/components/Forms/TextArea";
+import Selector from "@/components/Forms/Selector";
+import Checkbox from "@/components/Forms/Checkbox";
+import Button from "@/components/Forms/Button";
+
+const skills = [
+  "UI/UX",
+  "Solidity",
+  "TypeScript",
+  "Cairo",
+  "Rust",
+  "React.js",
+  "Tailwind CSS",
+  "Node JS",
+];
 
 function Tutor() {
+  const handleSkillSelection = (selectedSkills: string[]) => {};
+  const handleContinue = () => {};
+
   return (
-    <div>
-
+    <div className="grid grid-cols-1 md:grid-cols-5 h-screen">
+      <div className="hidden md:block hexagon-img border-r-2 border-[#1D1E2B] md:col-span-2 h-screen"></div>
+      <div className="col-span-1 md:col-span-3 h-screen overflow-y-auto py-10 md:py-20 px-5 md:px-8">
+        <div className="flex flex-col justify-center items-center px-3 md:px-0">
+          <div className="header-details text-center">
+            <h2 className="text-white font-UbuntuBold text-[1.5rem] mb-2">
+              Build your profile as tutor
+            </h2>
+            <p className="text-grayText text-[0.875rem]">
+              Enter your professional details
+            </p>
+          </div>
+          <div className="flex flex-col gap-6 w-full max-w-md">
+            <div className="mt-5 md:mt-10 w-full">
+              <Input
+                type="text"
+                name="title"
+                placeholder="eg. Web3 Developer"
+                label="Title"
+                onChange={null}
+                value=""
+              />
+            </div>
+            <div className="w-full">
+              <TextArea
+                name="bio"
+                placeholder="Tell us about yourself"
+                label="Brief Bio"
+                onChange={null}
+                value=""
+              />
+            </div>
+            <div className="w-full">
+              <Input
+                type="email"
+                name="email"
+                placeholder="Enter your email"
+                label="Email"
+                onChange={null}
+                value=""
+              />
+            </div>
+            <div className="w-full">
+              <Selector
+                dataArray={skills}
+                onSelectionChange={handleSkillSelection}
+                label="Select skills (At least 5)"
+              />
+            </div>
+            <div className="my-2">
+              <Checkbox isAgreement={true} privacyUrl="" termsUrl="" />
+            </div>
+            <div className="my-2 w-full">
+              <Button label="CONTINUE" onButtonClick={handleContinue} />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-  )
+  );
 }
 
-export default Tutor
+export default Tutor;

src/app/globals.css

@@ -23,6 +23,38 @@
 *{
   font-family: "Ubuntu", sans-serif;
 }
+.hexagon-img {
+  background-image: url("../public/img/hexagon.svg");
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: 50%;
+}
+
+.agreement-checkbox input[type='checkbox'] {
+  width: 30px;
+  height: 20px;
+  margin-right: 10px;
+  border: 2px solid #555;
+  border-radius: 4px;
+  cursor: pointer;
+  appearance: none;
+  position: relative;
+  background-color: transparent;
+}
+
+.agreement-checkbox input[type='checkbox']:checked {
+  background-color: #fff;
+  border-color: #fff;
+}
+
+.agreement-checkbox input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  font-size: 14px;
+  color: #fff;
+}
+
 
 @media (prefers-color-scheme: dark) {
   :root {

src/app/layout.tsx

@@ -2,8 +2,6 @@ import type { Metadata } from "next";
 // import { Inter } from "next/font/google";
 import "./globals.css";
 import { Providers } from "../components/providers";
-import Navbar from "../components/Navbar";
-import Footer from "../components/Footer";
 
 // const inter = Inter({ subsets: ["latin"] });
 
@@ -22,9 +20,7 @@ export default function RootLayout({
     <html lang="en">
       <Providers>
         <body className="relative w-full bg-[#0E0F0E] bg-cover bg-center bg-no-repeat">
-          <Navbar />
           {children}
-          <Footer />
         </body>
       </Providers>
     </html>

src/app/page.tsx

@@ -3,10 +3,13 @@ import bg_2 from "../public/img/bg_2.jpeg";
 import Arrow from "../public/img/arrow_back_ios_new.svg";
 import Arrow_4 from "../public/img/arrow_forward.svg";
 import Image from "next/image";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
 
 export default function Home() {
   return (
     <main>
+      <Navbar />
       <section className="h-screen pt-10 flex justify-center items-center -mt-20">
         <div className="w-[1240px] mx-auto h-[400px] flex flex-col justify-between items-center">
           <h1 className="text-[60px] text-center font-bold leading-tight">
@@ -331,6 +334,7 @@ export default function Home() {
           </div>
         </div>
       </section>
+      <Footer />
     </main>
   );
 }

src/components/Forms/Button.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+function Button({
+  label,
+  onButtonClick,
+}: {
+  label: string;
+  onButtonClick: any;
+}) {
+  return (
+    <div className="flex flex-col">
+      <button
+        onClick={onButtonClick}
+        className="bg-white border-[1px] outline-none border-[#252625] text-black text-[1.125rem] px-4 py-[0.75rem] rounded-[0.5rem] font-UbuntuBold w-full md:w-[26rem]"
+      >
+        {label}
+      </button>
+    </div>
+  );
+}
+
+export default Button;

src/components/Forms/Checkbox.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+
+interface CheckboxProps {
+  termsUrl?: string;
+  privacyUrl?: string;
+  isAgreement?: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  termsUrl,
+  privacyUrl,
+  onChange,
+  isAgreement,
+}) => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleCheckboxChange = () => {
+    const newCheckedState = !isChecked;
+    setIsChecked(newCheckedState);
+    if (onChange) {
+      onChange(newCheckedState);
+    }
+  };
+
+  return (
+    <div className="agreement-checkbox w-full md:w-[26rem] flex items-start">
+      <input
+        type="checkbox"
+        id="agreement"
+        checked={isChecked}
+        onChange={handleCheckboxChange}
+      />
+      {isAgreement && (
+        <label
+          htmlFor="agreement"
+          className="text-[0.875rem] text-grayText cursor-pointer"
+        >
+          By clicking on this, you agree to the{" "}
+          <a
+            href={termsUrl}
+            target="_blank"
+            className="text-primary font-UbuntuBold"
+            rel="noopener noreferrer"
+          >
+            <span className="highlight">Terms & Conditions</span>
+          </a>{" "}
+          and{" "}
+          <a
+            href={privacyUrl}
+            target="_blank"
+            className="text-primary font-UbuntuBold"
+            rel="noopener noreferrer"
+          >
+            <span className="highlight">Privacy Policy</span>
+          </a>{" "}
+          governing StarkHero.
+        </label>
+      )}
+    </div>
+  );
+};
+
+export default Checkbox;

src/components/Forms/Input.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+function Input({
+  type,
+  name,
+  label,
+  placeholder,
+  value,
+  onChange,
+}: {
+  type: string;
+  name: string;
+  label: string;
+  placeholder: string;
+  value: string;
+  onChange: any;
+}) {
+  return (
+    <div className="flex flex-col">
+      <label htmlFor={name} className="text-[#9596A0] text-[0.875rem] mb-1">
+        {label}
+      </label>
+      <input
+        type={type}
+        name={name}
+        id={name}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        className="bg-transparent border-[1px] outline-none border-[#252625] text-white text-[0.875rem] w-full md:w-[26rem] px-4 py-[0.75rem] rounded-[0.5rem]"
+      />
+    </div>
+  );
+}
+
+export default Input;

src/components/Forms/Selector.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+
+interface SelectorProps {
+  dataArray: string[];
+  minSelection?: number;
+  label?: string;
+  onSelectionChange?: (selectedSkills: string[]) => void;
+}
+
+const Selector: React.FC<SelectorProps> = ({
+  dataArray,
+  minSelection = 5,
+  onSelectionChange,
+  label,
+}) => {
+  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
+
+  const handleSkillClick = (skill: string) => {
+    let updatedSelection;
+    if (selectedSkills.includes(skill)) {
+      updatedSelection = selectedSkills.filter((s) => s !== skill);
+    } else {
+      updatedSelection = [...selectedSkills, skill];
+    }
+
+    setSelectedSkills(updatedSelection);
+    if (onSelectionChange) {
+      onSelectionChange(updatedSelection);
+    }
+  };
+
+  return (
+    <div className="skills-selector text-[0.875rem] w-full md:w-[26rem]">
+      <label className="text-[#9596A0] text-[0.875rem]">{label}</label>
+      <div className="skills-container grid grid-cols-3 mt-1 gap-3">
+        {dataArray.map((item) => (
+          <button
+            key={item}
+            className={`skill-button border-[1px] border-[#252625] p-2 text-[0.875rem] rounded-[0.5rem] ${
+              selectedSkills.includes(item) ? "bg-[#333]" : ""
+            }`}
+            onClick={() => handleSkillClick(item)}
+          >
+            {item}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Selector;