From 8fe8a5c5b2ccaa01e9b9528dd67c5d2bdd89ec67 Mon Sep 17 00:00:00 2001
From: Adamu Jethro <jethroadamzy@gmail.com>
Date: Fri, 24 Jan 2025 16:05:14 +0100
Subject: [PATCH] tutor-page-screen

---
 src/app/account/onboarding/tutor/layout.tsx | 16 ++--
 src/app/account/onboarding/tutor/page.tsx   |  3 +-
 src/app/account/onboarding/tutor/tutor.tsx  | 86 +++++++++++++++++++--
 src/app/globals.css                         | 32 ++++++++
 src/app/layout.tsx                          |  4 -
 src/app/page.tsx                            |  4 +
 src/components/Forms/Button.tsx             | 22 ++++++
 src/components/Forms/Checkbox.tsx           | 64 +++++++++++++++
 src/components/Forms/Input.tsx              | 36 +++++++++
 src/components/Forms/Selector.tsx           | 52 +++++++++++++
 src/components/Forms/TextArea.tsx           | 33 ++++++++
 src/public/img/hexagon.svg                  |  8 ++
 tailwind.config.ts                          |  2 +
 13 files changed, 345 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Forms/Button.tsx
 create mode 100644 src/components/Forms/Checkbox.tsx
 create mode 100644 src/components/Forms/Input.tsx
 create mode 100644 src/components/Forms/Selector.tsx
 create mode 100644 src/components/Forms/TextArea.tsx
 create mode 100644 src/public/img/hexagon.svg

diff --git a/src/app/account/onboarding/tutor/layout.tsx b/src/app/account/onboarding/tutor/layout.tsx
index ebefd6b..1fd018a 100644
--- a/src/app/account/onboarding/tutor/layout.tsx
+++ b/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>
-    );
-  }
\ No newline at end of file
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <main className="grow">{children}</main>
+    </>
+  );
+};
+
+export default Layout;
diff --git a/src/app/account/onboarding/tutor/page.tsx b/src/app/account/onboarding/tutor/page.tsx
index 232788d..b980007 100644
--- a/src/app/account/onboarding/tutor/page.tsx
+++ b/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>
   )
 }
diff --git a/src/app/account/onboarding/tutor/tutor.tsx b/src/app/account/onboarding/tutor/tutor.tsx
index 32bae09..8e36d90 100644
--- a/src/app/account/onboarding/tutor/tutor.tsx
+++ b/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;
diff --git a/src/app/globals.css b/src/app/globals.css
index 51b66f2..1009ab5 100644
--- a/src/app/globals.css
+++ b/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 {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b4cd578..58b9fc2 100644
--- a/src/app/layout.tsx
+++ b/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>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6cb8cfc..69fe191 100644
--- a/src/app/page.tsx
+++ b/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>
   );
 }
diff --git a/src/components/Forms/Button.tsx b/src/components/Forms/Button.tsx
new file mode 100644
index 0000000..8eab57d
--- /dev/null
+++ b/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;
diff --git a/src/components/Forms/Checkbox.tsx b/src/components/Forms/Checkbox.tsx
new file mode 100644
index 0000000..7f75078
--- /dev/null
+++ b/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;
diff --git a/src/components/Forms/Input.tsx b/src/components/Forms/Input.tsx
new file mode 100644
index 0000000..1ba4b0e
--- /dev/null
+++ b/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;
diff --git a/src/components/Forms/Selector.tsx b/src/components/Forms/Selector.tsx
new file mode 100644
index 0000000..efaa412
--- /dev/null
+++ b/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;
diff --git a/src/components/Forms/TextArea.tsx b/src/components/Forms/TextArea.tsx
new file mode 100644
index 0000000..143d0de
--- /dev/null
+++ b/src/components/Forms/TextArea.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+function TextArea({
+  name,
+  label,
+  placeholder,
+  value,
+  onChange,
+}: {
+  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>
+      <textarea
+        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] resize-none"
+      />
+    </div>
+  );
+}
+
+export default TextArea;
diff --git a/src/public/img/hexagon.svg b/src/public/img/hexagon.svg
new file mode 100644
index 0000000..44f5874
--- /dev/null
+++ b/src/public/img/hexagon.svg
@@ -0,0 +1,8 @@
+<svg width="560" height="593" viewBox="0 0 560 593" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M217 357.154V298.846C217 298.176 217.336 297.55 217.895 297.179L275.895 258.732C276.565 258.289 277.435 258.289 278.105 258.732L336.105 297.179C336.664 297.55 337 298.176 337 298.846V357.154C337 357.824 336.664 358.45 336.105 358.821L278.105 397.267C277.435 397.711 276.565 397.711 275.895 397.267L217.895 358.821C217.336 358.45 217 357.824 217 357.154Z" stroke="#D0EFB1" stroke-opacity="0.08" style="mix-blend-mode:color-dodge"/>
+<path d="M187 371.193V284.807C187 283.465 187.672 282.214 188.79 281.473L274.79 224.465C276.13 223.577 277.87 223.577 279.21 224.465L365.21 281.473C366.328 282.214 367 283.465 367 284.807V371.193C367 372.535 366.328 373.786 365.21 374.527L279.21 431.535C277.87 432.423 276.13 432.423 274.79 431.535L188.79 374.527C187.672 373.786 187 372.535 187 371.193Z" stroke="#40403E" stroke-width="1.5" style="mix-blend-mode:color-dodge"/>
+<path d="M157 384.16V271.84C157 269.158 158.344 266.654 160.58 265.172L272.58 190.93C275.259 189.154 278.741 189.154 281.42 190.93L393.42 265.172C395.656 266.654 397 269.158 397 271.84V384.16C397 386.842 395.656 389.346 393.42 390.828L281.42 465.07C278.741 466.846 275.259 466.846 272.58 465.07L160.58 390.828C158.344 389.346 157 386.842 157 384.16Z" stroke="#D0EFB1" stroke-opacity="0.08" stroke-width="2" style="mix-blend-mode:color-dodge"/>
+<path d="M121 400.885V254.94C121 251.455 122.747 248.202 125.652 246.276L271.182 149.807C274.663 147.5 279.187 147.5 282.668 149.807L428.198 246.276C431.103 248.202 432.85 251.455 432.85 254.94V400.885C432.85 404.37 431.103 407.623 428.198 409.549L282.668 506.018C279.187 508.326 274.663 508.326 271.182 506.018L125.652 409.549C122.747 407.623 121 404.37 121 400.885Z" stroke="#40403E" stroke-width="2.59875" style="mix-blend-mode:color-dodge"/>
+<path d="M70 424.149V231.101C70 226.491 72.3104 222.187 76.153 219.64L268.653 92.0359C273.258 88.9835 279.242 88.9835 283.847 92.0359L476.347 219.64C480.19 222.187 482.5 226.491 482.5 231.101V424.149C482.5 428.759 480.19 433.063 476.347 435.61L283.847 563.214C279.242 566.266 273.258 566.266 268.653 563.214L76.153 435.61C72.3104 433.063 70 428.759 70 424.149Z" stroke="#D0EFB1" stroke-opacity="0.08" stroke-width="3.4375" style="mix-blend-mode:color-dodge"/>
+<path d="M-5 459.749V196.501C-5 190.214 -1.8495 184.346 3.39039 180.873L265.89 6.86717C272.17 2.70478 280.33 2.70478 286.61 6.86717L549.11 180.873C554.349 184.346 557.5 190.214 557.5 196.501V459.749C557.5 466.036 554.349 471.904 549.11 475.377L286.61 649.383C280.33 653.545 272.17 653.545 265.89 649.383L3.39039 475.377C-1.8495 471.904 -5 466.036 -5 459.749Z" stroke="#40403E" stroke-width="4.6875" style="mix-blend-mode:color-dodge"/>
+</svg>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 21b75ae..b39d75d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,6 +14,8 @@ export default {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+        primary: "#D0EFB1",
+        grayText: "#ABABAB"
       },
       fontFamily: {
         customFont: [