Premium plan comp

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged --verbose
+# yarn lint-staged --verbose

package.json

@@ -47,5 +47,8 @@
   "packageManager": "yarn@3.2.3",
   "engines": {
     "node": ">=18.17.0"
+  },
+  "dependencies": {
+    "framer-motion": "^11.2.9"
   }
 }

packages/nextjs/app/annotators/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+
+const Page = () => {
+    const router = useRouter();
+  const [showRegister, setShowRegister] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
+  const handleRegisterClick = () => {
+    console.log("Register button clicked");
+    router.push("/profile");
+    // Add your registration logic here
+  };
+
+  const handleConnectWalletClick = () => {
+    console.log("Connect Wallet button clicked");
+    setShowRegister(true);
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col items-center pt-[10%] md:gap-8 gap-6">
+      <div>
+        <p className="xl:text-[6em] lg:text-[5em] md:text-[4em] text-[3em] font-semibold">
+          Annotators
+        </p>
+        <p className="text-center text-lg md:text-xl">
+          Help AI companies to annotate their data
+        </p>
+      </div>
+      {!showRegister && (
+        <button
+          onClick={handleConnectWalletClick}
+          className="py-2 px-4 border border-[#98aecd] bg-[#98aecd] hover:border-[#edd346] hover:bg-[#edd346] btn-shadow  bg-opacity-20 hover:bg-opacity-20 duration-200 rounded-full text-[#bcd0ec] hover:text-[#edd346]"
+        >
+          Connect Wallet
+        </button>
+      )}
+      {showRegister && (
+        <div className="flex flex-col gap-4 md:gap-6 xl:w-1/2 lg:w-3/5 md:w-[70%] w-[90%]">
+          <div className="flex items-center gap-4 md:gap-6">
+            <p className="text-lg md:text-xl lg:text-2xl">Name:</p>
+            <input
+              className="bg-transparent w-full p-2 focus:outline-none border-b border-white focus:border-[#edd346] text-lg md:text-xl lg:text-2xl"
+              type="text"
+              placeholder=""
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div className="flex items-center gap-4 md:gap-6">
+            <p className="text-lg md:text-xl lg:text-2xl">Description:</p>
+            <input
+              className="bg-transparent w-full p-2 focus:outline-none border-b border-white focus:border-[#edd346] text-lg md:text-xl lg:text-2xl"
+              type="text"
+              placeholder=""
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+          <button
+            onClick={handleRegisterClick}
+            className="py-2 px-4 w-fit block mx-auto mt-4 border border-[#98aecd] bg-[#98aecd] hover:border-[#edd346] hover:bg-[#edd346] btn-shadow  bg-opacity-20 hover:bg-opacity-20 duration-200 rounded-full text-[#bcd0ec] hover:text-[#edd346]"
+          >
+            Register
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Page;        

packages/nextjs/app/home/page.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Hero from "~~/components/frontend/Hero";
+import Navbar from "~~/components/frontend/Navbar";
+
+const page = () => {
+  return (
+    <div className="min-h-screen w-full bg-[#070815]">
+      <Navbar />
+      <Hero />
+    </div>
+  );
+};
+
+export default page;

packages/nextjs/app/layout.tsx

@@ -5,8 +5,8 @@ import "~~/styles/globals.css";
 import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
 export const metadata = getMetadata({
-  title: "Scaffold-ETH 2 App",
-  description: "Built with 🏗 Scaffold-ETH 2",
+  title: "Annotate",
+  description: "lets train the next famous best ai",
 });
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {

packages/nextjs/app/profile/page.tsx

@@ -0,0 +1,107 @@
+"use client"
+import React from "react";
+import Image from "next/image";
+import profile from "../../assets/Pepe.jpeg";
+import viewJobs from "../../assets/jobs.svg";
+import marketPlace from "../../assets/marketplace.svg";
+
+const page = () => {
+  const handleChallengeAnnotation = () => {
+    console.log("handleChallengeAnnotation");
+  } 
+  const handleAnnotateData = () => {
+    console.log("handleAnnotateData");
+  }
+  return (
+    <div className="h-screen flex ">
+      {/* sidebar */}
+      <div className="w-[25%] border-r border-[#98aecd]  max-w-[350px] min-w-[250px] p-2 flex flex-col justify-between ">
+        <div>
+          <div className="border border-[#98aecd] rounded-lg  p-1">
+            <div className="flex items-center gap-2">
+              <Image src={profile} className="h-12 w-12 rounded-full" alt="profile" />
+
+              <div className="flex-grow">
+                <p className="text-lg font-semibold">Name</p>
+                <p className="text-sm text-[#98aecd]">0x123456789</p>
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2 mt-1">
+              <p className="py-1 px-2 text-sm border border-[#98aecd] bg-[#98aecd] hover:border-[#edd346] hover:bg-[#edd346] bg-opacity-20 hover:bg-opacity-20 duration-200 rounded-md text-[#bcd0ec] hover:text-[#edd346]">
+                Pro
+              </p>
+              <button className="py-1 px-2 text-sm border border-[#98aecd] bg-[#98aecd] hover:border-[#edd346] hover:bg-[#edd346]  btn-shadow  bg-opacity-20 hover:bg-opacity-20 duration-200 rounded-md text-[#bcd0ec] hover:text-[#edd346]">
+                Upgrade
+              </button>
+            </div>
+
+            <p className="mt-4 px-2 truncate">
+              This is the description of sadfasdfsdf asd fas df asdf asd fa sdf asdf af a
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-4 mt-8">
+            <div className="flex items-center gap-4">
+              <Image src={viewJobs} className="h-8 w-8" alt="profile" />
+              <p className="text-xl font-semibold">View Jobs</p>
+            </div>
+
+            <div className="flex items-center gap-4">
+              <Image src={marketPlace} className="h-7 w-7" alt="profile" />
+              <p className="text-xl font-semibold relative">
+                Marketplace
+                <span className="text-sm text-[#edd346] right-[-1em] -top-2 absolute">Beta</span>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <button className="p-2 rounded-md bg-red-500 font-semibold">Logout</button>
+      </div>
+
+      <div className="flex-grow">
+        <p className="text-center text-lg font-semibold w-full py-2">Profile</p>
+
+        <div className="w-4/5 mx-auto">
+          <div className="flex items-center gap-4 md:gap-6">
+            <Image src={profile} className="h-24 w-24 rounded-full shadow shadow-white" alt="profile" />
+            <div className="flex justify-between items-center w-full ">
+              <div>
+                <p className="text-xl md:text-2xl lg:text-3xl xl:text-4xl">Annotator</p>
+                <div className=" flex gap-4">
+                  <p className="py-1 px-2 w-fit text-sm border border-[#98aecd] bg-[#98aecd] hover:border-[#edd346] hover:bg-[#edd346] bg-opacity-20 hover:bg-opacity-20 duration-200 rounded-md text-[#bcd0ec] hover:text-[#edd346]">
+                    Pro
+                  </p>
+                  0x123456789
+                </div>
+              </div>
+              <p className="text-xl md:text-2xl lg:text-3xl xl:text-4xl">750</p>
+            </div>
+          </div>
+
+          <p className="mt-4 md:mt-6">THIS DIDFSSD FASDFSADFASDFS DESCRIPTOTIN FASDFASD FASDFA SFA SD FASD FASDF ADS FA SF ASD FD FS DF SDF AD F ASDFASD FASDFASDFASD ASDFA SDF ASD FASD FA SDF AD FASD FAS DFASDF</p>
+
+          <div className="flex gap-4 mt-10 lg:mt-12">
+            <button className="py-2 px-4 border text-lg font-semibold rounded-lg" onClick={()=>handleAnnotateData()}>Annotate Data</button>
+            <button className="py-2 px-4 border text-lg font-semibold rounded-lg" onClick={()=>handleChallengeAnnotation()}>Challenge Annotation</button>
+          </div>
+
+          <div className="mt-10 lg:mt-12">
+            <p className="text-xl w-fit font-semibold md:text-2xl relative ">Jobs
+            <span className="flex justify-center items-center border rounded-full text-sm absolute h-7 w-7 -top-1 -right-8 ">10</span>
+            </p>
+
+            <div className="">
+              <p className="p-2 border-b">Ongoing</p>
+              <p>Previous</p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;

packages/nextjs/app/temp/page.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import PremiumPlan from '~~/components/frontend/PremiumPlan'
+
+const page = () => {
+  return (
+    <PremiumPlan />
+  )
+}
+
+export default page