diff --git a/.husky/pre-commit b/.husky/pre-commit index 44d21ba..d0b4caa 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -yarn lint-staged --verbose \ No newline at end of file +# yarn lint-staged --verbose \ No newline at end of file diff --git a/package.json b/package.json index effc6d4..fe409c2 100644 --- a/package.json +++ b/package.json @@ -47,5 +47,8 @@ "packageManager": "yarn@3.2.3", "engines": { "node": ">=18.17.0" + }, + "dependencies": { + "framer-motion": "^11.2.9" } } diff --git a/packages/nextjs/app/annotators/page.tsx b/packages/nextjs/app/annotators/page.tsx new file mode 100644 index 0000000..c8c14dd --- /dev/null +++ b/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 ( +
+
+

+ Annotators +

+

+ Help AI companies to annotate their data +

+
+ {!showRegister && ( + + )} + {showRegister && ( +
+
+

Name:

+ setName(e.target.value)} + /> +
+
+

Description:

+ setDescription(e.target.value)} + /> +
+ +
+ )} +
+ ); +}; + +export default Page; \ No newline at end of file diff --git a/packages/nextjs/app/home/page.tsx b/packages/nextjs/app/home/page.tsx new file mode 100644 index 0000000..ae7e72e --- /dev/null +++ b/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 ( +
+ + +
+ ); +}; + +export default page; diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx index be1234b..e5df30f 100644 --- a/packages/nextjs/app/layout.tsx +++ b/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 }) => { diff --git a/packages/nextjs/app/profile/page.tsx b/packages/nextjs/app/profile/page.tsx new file mode 100644 index 0000000..9211ceb --- /dev/null +++ b/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 ( +
+ {/* sidebar */} +
+
+
+
+ profile + +
+

Name

+

0x123456789

+
+
+ +
+

+ Pro +

+ +
+ +

+ This is the description of sadfasdfsdf asd fas df asdf asd fa sdf asdf af a +

+
+ +
+
+ profile +

View Jobs

+
+ +
+ profile +

+ Marketplace + Beta +

+
+
+
+ + +
+ +
+

Profile

+ +
+
+ profile +
+
+

Annotator

+
+

+ Pro +

+ 0x123456789 +
+
+

750

+
+
+ +

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

+ +
+ + +
+ +
+

Jobs + 10 +

+ +
+

Ongoing

+

Previous

+
+
+ +
+
+
+ ); +}; + +export default page; diff --git a/packages/nextjs/app/temp/page.tsx b/packages/nextjs/app/temp/page.tsx new file mode 100644 index 0000000..7a8be72 --- /dev/null +++ b/packages/nextjs/app/temp/page.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import PremiumPlan from '~~/components/frontend/PremiumPlan' + +const page = () => { + return ( + + ) +} + +export default page \ No newline at end of file diff --git a/packages/nextjs/assets/Pepe.jpeg b/packages/nextjs/assets/Pepe.jpeg new file mode 100644 index 0000000..c5d3869 Binary files /dev/null and b/packages/nextjs/assets/Pepe.jpeg differ diff --git a/packages/nextjs/assets/ai.svg b/packages/nextjs/assets/ai.svg new file mode 100644 index 0000000..3b84f90 --- /dev/null +++ b/packages/nextjs/assets/ai.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/packages/nextjs/assets/jobs.svg b/packages/nextjs/assets/jobs.svg new file mode 100644 index 0000000..cf8054f --- /dev/null +++ b/packages/nextjs/assets/jobs.svg @@ -0,0 +1,202 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/nextjs/assets/marketplace.svg b/packages/nextjs/assets/marketplace.svg new file mode 100644 index 0000000..71133f9 --- /dev/null +++ b/packages/nextjs/assets/marketplace.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/packages/nextjs/assets/nike.png b/packages/nextjs/assets/nike.png new file mode 100644 index 0000000..b28028a Binary files /dev/null and b/packages/nextjs/assets/nike.png differ diff --git a/packages/nextjs/assets/premiumPlan/close.svg b/packages/nextjs/assets/premiumPlan/close.svg new file mode 100644 index 0000000..fd42453 --- /dev/null +++ b/packages/nextjs/assets/premiumPlan/close.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/nextjs/assets/premiumPlan/point.svg b/packages/nextjs/assets/premiumPlan/point.svg new file mode 100644 index 0000000..689d78a --- /dev/null +++ b/packages/nextjs/assets/premiumPlan/point.svg @@ -0,0 +1,16 @@ + + + + + + + + + + error-line + + + + + + \ No newline at end of file diff --git a/packages/nextjs/assets/prismic.png b/packages/nextjs/assets/prismic.png new file mode 100644 index 0000000..4b29552 Binary files /dev/null and b/packages/nextjs/assets/prismic.png differ diff --git a/packages/nextjs/assets/temp/1.png b/packages/nextjs/assets/temp/1.png new file mode 100644 index 0000000..8be27f0 Binary files /dev/null and b/packages/nextjs/assets/temp/1.png differ diff --git a/packages/nextjs/assets/temp/2.png b/packages/nextjs/assets/temp/2.png new file mode 100644 index 0000000..fc8630e Binary files /dev/null and b/packages/nextjs/assets/temp/2.png differ diff --git a/packages/nextjs/assets/temp/3.png b/packages/nextjs/assets/temp/3.png new file mode 100644 index 0000000..a547d28 Binary files /dev/null and b/packages/nextjs/assets/temp/3.png differ diff --git a/packages/nextjs/assets/temp/4.png b/packages/nextjs/assets/temp/4.png new file mode 100644 index 0000000..0ee4b04 Binary files /dev/null and b/packages/nextjs/assets/temp/4.png differ diff --git a/packages/nextjs/assets/temp/5.png b/packages/nextjs/assets/temp/5.png new file mode 100644 index 0000000..28d9ab3 Binary files /dev/null and b/packages/nextjs/assets/temp/5.png differ diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx index 05273c2..fb79f2d 100644 --- a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx +++ b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx @@ -27,9 +27,9 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => { return ( <>
-
+ {/*
*/}
{children}
-
+ {/*
*/}
diff --git a/packages/nextjs/components/frontend/Hero.tsx b/packages/nextjs/components/frontend/Hero.tsx new file mode 100644 index 0000000..4b72bfd --- /dev/null +++ b/packages/nextjs/components/frontend/Hero.tsx @@ -0,0 +1,220 @@ +"use client"; + +import React, { useRef } from "react"; +import Image from "next/image"; +import ai from "../../assets/ai.svg"; +import nike from "../../assets/nike.png"; +import prismic from "../../assets/prismic.png"; +import one from "../../assets/temp/1.png"; +import two from "../../assets/temp/2.png"; +import three from "../../assets/temp/3.png"; +import four from "../../assets/temp/4.png"; +import five from "../../assets/temp/5.png"; +import { easeIn, easeInOut, motion, useInView } from "framer-motion"; + +const Hero = () => { + const ref = useRef(null); + const isInView = useInView(ref); + + return ( +
+
+ + Connecting AI Innovators with Expert Image Annotators + + + + The AI features you need to transport your business from the little leagues to the big time. + + + + Get your raw data annotated + + + + one + +
+

The new

+

+ Gold Standard. +

+
+

+ Introducing a new way of building components and layouts that leaves everything else in the dust. +

+ +
+
+
+
+

Endless Ideation

+

Come up with new ideas faster than you can open Photoshop

+ + one +
+
+
+
+

Benchmark with AI

+

+ Never worry about pixel perfection again, thanks to our patented AI critic, telling you when something + is misaligned. +

+ + one +
+
+
+ +
+
+
+

Aesthetic Excellence

+

+ Never worry about pixel perfection again, thanks to our patented AI critic, telling you when something + is misaligned. + +

+ + one +
+
+
+
+

Pixels Perfected

+

Our features power your next big design, whether itโ€™s a website or an app.

+ + one +
+
+
+
+ +
+ +

Your Data.

+

Your Annotators.

+ + +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis dolores omnis, fugit tempore + necessitatibus ullam doloremque, tenetur non exercitationem deleniti aperiam nulla doloribus natus + repellat vel odio reiciendis qui dolor! +

+
+
+ ai +

Design the next big thing.

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. +

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +

+ +
+
+
+ +
+
+

Designers like

+

you love Glisten

+
+

+ Introducing a new way of building components and layouts that leaves everything else in the dust. +

+ +
+
+
+

Nike

+

+ Designers at the legendary sports wear brand used Glisten to completely redesing their basketball + sneakers. +

+

Read Nike case study

+
+ nike +
+ +
+ nike +
+

Prismic

+

+ Designers at the legendary sports wear brand used Glisten to completely redesing their basketball + sneakers. +

+

+ Read Designers at the legendary sports wear brand used Glisten to completely redesing their basketball + sneakers. case study +

+
+
+
+
+
+ +
+
+
+ one +
+ +
+

Designers like

+

you love Glisten

+
+ +
+
+ +
+

ANNOTATE

+
+ + +
+
+
+ ); +}; + +export default Hero; diff --git a/packages/nextjs/components/frontend/Navbar.tsx b/packages/nextjs/components/frontend/Navbar.tsx new file mode 100644 index 0000000..621842c --- /dev/null +++ b/packages/nextjs/components/frontend/Navbar.tsx @@ -0,0 +1,20 @@ +import Link from "next/link"; +import React from "react"; + +const Navbar = () => { + return ( +
+

ANNOTATE

+
+
+ Market Place +

BETA

+
+ Annotate + +
+
+ ); +}; + +export default Navbar; \ No newline at end of file diff --git a/packages/nextjs/components/frontend/PremiumPlan.tsx b/packages/nextjs/components/frontend/PremiumPlan.tsx new file mode 100644 index 0000000..7075d05 --- /dev/null +++ b/packages/nextjs/components/frontend/PremiumPlan.tsx @@ -0,0 +1,139 @@ +"use client"; + +import React, { useState } from "react"; +import Image from "next/image"; +import close from "../../assets/premiumPlan/close.svg"; +import pointIcon from "../../assets/premiumPlan/point.svg"; +import { AnimatePresence, motion } from "framer-motion"; + +const plans = [ + { + plan: "Pro", + stake: 10, + points: ["This is one point fd sdf f sdf", "More rewards sd fsd f", "Challenge More dfsfs", "Annotation f sdffsf"], + }, + { + plan: "Elite", + stake: 30, + points: ["This is one point", "More rewards", "Challenge More", "Annotation"], + }, + { + plan: "Titan", + stake: 50, + points: ["This is one point", "More rewards", "Challenge More", "Annotation"], + }, +]; + +const PremiumPlan = () => { + const [hoveredPlan, setHoveredPlan] = useState(null); + const [selectedPlan, setSelectedPlan] = useState(null); + + const handleProceed = () => { + console.log("Proceed clicked"); + }; + + const closeModal = () => { + console.log("Proceed clicked"); + }; + + const handleClose = () => { + console.log(selectedPlan); + setSelectedPlan(null); + }; + + return ( +
+
+
+

+ Select Your Plan +

+ close { + closeModal(); + }} + className="h-8 w-8 absolute right-0 cursor-pointer" + /> +
+
+ + {plans.map((plan, index) => ( + setHoveredPlan(index)} + onHoverEnd={() => setHoveredPlan(null)} + className={`border border-[#98aecd] p-2 py-4 md:p-4 md:py-6 w-full rounded-xl cursor-pointer ${ + hoveredPlan === index || selectedPlan === index ? "hero-section-shadow" : "" + }`} + onClick={() => setSelectedPlan(index)} + > + {selectedPlan !== index && ( +
+

{plan.plan}

+

+ Stake{plan.stake}ETH +

+
+ {plan.points.map((point, pointIndex) => ( +
+ point +

{point}

+
+ ))} +
+ +
+ )} + + {selectedPlan === index ? ( +
+
+
+

Upgrade your plan

+ + close + +
+ +
+

{plan.plan}

+

{plan.stake} ETH

+
+
+ +
+

+ You are staking your money for upgrading your account it is refundable after some period of time +

+ +
+
+ ) : ( + <> + )} + + ))} + +
+
+
+ ); +}; + +export default PremiumPlan; diff --git a/packages/nextjs/components/frontend/StarGrid.tsx b/packages/nextjs/components/frontend/StarGrid.tsx new file mode 100644 index 0000000..7c47bbd --- /dev/null +++ b/packages/nextjs/components/frontend/StarGrid.tsx @@ -0,0 +1,138 @@ +"use client"; +// src/components/StarGrid.tsx + +import { useRef } from "react"; +import gsap from "gsap"; +import { useGSAP } from "@gsap/react"; +import usePrefersReducedMotion from "@/hooks/usePrefersReducedMotion"; + +export default function StarGrid() { + const container = useRef(null); + const prefersReducedMotion = usePrefersReducedMotion(); + gsap.registerPlugin(useGSAP); + + const grid = [14, 30] as const; + + useGSAP( + () => { + if (prefersReducedMotion) { + gsap.set(container.current, { opacity: 1 }); + gsap.set(".star-grid-item", { + opacity: 0.2, + scale: 1, + }); + return; + } + + gsap.set(".star-grid-item", { + opacity: 0, + transformOrigin: "center", + color: "#fff", + }); + gsap.set(container.current, { opacity: 1 }); + + const tl = gsap.timeline(); + + // Entrance animation + tl.to(".star-grid-item", { + keyframes: [ + { + opacity: 0, + duration: 0, + }, + { + opacity: 0.4, + rotate: "+=180", + color: "#ffd057", + scale: 3, + duration: 0.6, + stagger: { + amount: 2, + grid: grid, + from: "center", + }, + }, + { + opacity: 0.2, + rotate: "+=180", + color: "#fff", + scale: 1, + delay: -2, + duration: 0.6, + stagger: { + amount: 3, + grid: grid, + from: "center", + }, + }, + ], + }); + + // Loop animation + tl.to(".star-grid-item", { + delay: 8, + repeat: -1, + repeatDelay: 8, + keyframes: [ + { + opacity: 0.4, + rotate: "+=180", + color: "#ffd057", + scale: 3, + duration: 0.6, + stagger: { + amount: 2, + grid: grid, + from: "center", + }, + }, + { + opacity: 0.2, + rotate: "+=180", + color: "#fff", + scale: 1, + delay: -2, + duration: 0.6, + stagger: { + amount: 3, + grid: grid, + from: "center", + }, + }, + ], + }); + }, + { scope: container }, + ); + + return ( + + + {[...Array(grid[0])].map((_, i) => { + return [...Array(grid[1])].map((_, j) => { + return ( + + ); + }); + })} + + + ); +} diff --git a/packages/nextjs/styles/fonts/akaya-telivigala-latin-400-normal.ttf b/packages/nextjs/styles/fonts/akaya-telivigala-latin-400-normal.ttf new file mode 100644 index 0000000..9626435 Binary files /dev/null and b/packages/nextjs/styles/fonts/akaya-telivigala-latin-400-normal.ttf differ diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css index 3fb55ae..6e7ec06 100644 --- a/packages/nextjs/styles/globals.css +++ b/packages/nextjs/styles/globals.css @@ -2,25 +2,22 @@ @import "tailwindcss/components"; @import "tailwindcss/utilities"; +@font-face { + font-family: "Akaya Telivigala"; + src: url("./fonts/akaya-telivigala-latin-400-normal.ttf") format("truetype"); + font-weight: 400; + font-style: normal; +} + :root, [data-theme] { background: oklch(var(--b2)); + @apply h-full w-full; } body { min-height: 100vh; -} - -h1, -h2, -h3, -h4 { - margin-bottom: 0.5rem; - line-height: 1; -} - -p { - margin: 1rem 0; + background-color: #070815; } .btn { @@ -30,3 +27,32 @@ p { .btn.btn-ghost { @apply shadow-none; } + +.akaya-font { + font-family: "Akaya Telivigala", system-ui; + font-weight: 400; + font-style: normal; +} + +.hero-section-shadow { + -webkit-box-shadow: 0px 10px 40px 5px rgba(56, 89, 144, 0.8); + -moz-box-shadow: 0px 10px 40px 5px rgba(56, 89, 144, 0.8); + box-shadow: 0px 10px 40px 5px rgba(56, 89, 144, 0.8); +} + +.radial-bg { + background: rgb(56, 89, 144); + background: radial-gradient(circle, rgba(56, 89, 144, 0.704860826166404) 0%, rgba(252, 70, 107, 0) 41%); +} + +.radial-bottom { + background: rgb(56, 89, 144); + background: radial-gradient(circle, rgba(56, 89, 144, 0.3603230110403537) 0%, rgba(252, 70, 107, 0) 26%); + backdrop-filter: blur(30px); +} + +.btn-shadow:hover { + -webkit-box-shadow: 0px 4px 10px 2px rgba(237, 211, 70, 0.1); + -moz-box-shadow: 0px 4px 10px 2px rgba(237, 211, 70, 0.1); + box-shadow: 0px 4px 10px 2px rgba(237, 211, 70, 0.1); +} diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js index 9099dc5..e3e6ae6 100644 --- a/packages/nextjs/tailwind.config.js +++ b/packages/nextjs/tailwind.config.js @@ -1,4 +1,3 @@ -/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"], plugins: [require("daisyui")], @@ -76,6 +75,14 @@ module.exports = { }, theme: { extend: { + colors: { + "border-blue": "#98aecd", + "highlight-yellow": "#edd346", + gradient1: "#fae998", + gradient2: "#efc436", + "solid-dark-blue": "#0f1524", + "light-blue": "#385990", + }, boxShadow: { center: "0 0 12px -2px rgb(0 0 0 / 0.05)", }, diff --git a/yarn.lock b/yarn.lock index da403a4..97fca17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7741,6 +7741,26 @@ __metadata: languageName: node linkType: hard +"framer-motion@npm:^11.2.9": + version: 11.2.9 + resolution: "framer-motion@npm:11.2.9" + dependencies: + tslib: ^2.4.0 + peerDependencies: + "@emotion/is-prop-valid": "*" + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependenciesMeta: + "@emotion/is-prop-valid": + optional: true + react: + optional: true + react-dom: + optional: true + checksum: 12587f9b79dc61896d507e22d997eb093c0e8d53901b307a4122f2919bf5fb65513d7e060bbc17bdc0d392e35d40ebe1d5445690a013fcf8e6a9db8013fea0c2 + languageName: node + linkType: hard + "fs-extra@npm:11.1.0": version: 11.1.0 resolution: "fs-extra@npm:11.1.0" @@ -12502,6 +12522,7 @@ __metadata: version: 0.0.0-use.local resolution: "se-2@workspace:." dependencies: + framer-motion: ^11.2.9 husky: ~8.0.3 lint-staged: ~13.2.2 next: ~14.0.4