-
-
-
-
-
-
+
+
+
Firstly, who are you?
+
Select the option that best describes you.
+
+
+
+
)
}
diff --git a/cubeseed_login/src/component/forms/UserDetailsForm.tsx b/cubeseed_login/src/component/forms/UserDetailsForm.tsx
index fdf4a6c..6433a0c 100644
--- a/cubeseed_login/src/component/forms/UserDetailsForm.tsx
+++ b/cubeseed_login/src/component/forms/UserDetailsForm.tsx
@@ -1,79 +1,120 @@
-"use client";
+"use client"
-import { useState, useEffect } from "react";
import { useSignUpContext } from "@/context/signup"
-import { SignUpErrors } from "@cs/types/index"
+import { useEffect } from "react"
+import { SignUpErrors } from "@cs/types"
export default function UserDetailsForm() {
- const { fullName, setFullName, email, setEmail, password, setPassword, confirmPassword, setConfirmPassword, address, setAddress, errors, setErrors } = useSignUpContext();
- // create a errors object state
- // const [errors, setErrors] = useState
({});
+ const {
+ fullName,
+ setFullName,
+ password,
+ setPassword,
+ confirmPassword,
+ setConfirmPassword,
+ address,
+ setAddress,
+ errors,
+ setErrors,
+ } = useSignUpContext()
- // create a useEffect that will check for errors in the form
- useEffect(() => {
- const emailValidation = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
- const errObj: SignUpErrors = {}
+ const handleInputChange = (e: { target: { name: any; value: any } }) => {
+ const { name, value } = e.target
+ switch (name) {
+ case "fullName":
+ setFullName(value)
+ break
+ case "password":
+ setPassword(value)
+ break
+ case "confirmPassword":
+ setConfirmPassword(value)
+ break
+ case "address":
+ setAddress(value)
+ break
+ default:
+ break
+ }
+ }
- if (fullName.length < 1) {
- errObj['fullName'] = 'Please enter your full name'
- } else {
- errObj['fullName'] = ''
- }
+ useEffect(() => {
+ const errObj: SignUpErrors = {}
- if (!emailValidation.test(email)) {
- errObj['email'] = 'Please enter a valid email'
- } else {
- errObj['email'] = ''
- }
+ if (fullName.trim() === "") {
+ errObj["fullName"] = "Please enter your full name"
+ } else {
+ errObj["fullName"] = ""
+ }
- if(!address) {
- errObj['address'] = 'Please enter your address'
- } else {
- errObj['address'] = ''
- }
+ if (!address.trim()) {
+ errObj["address"] = "Please enter your address"
+ } else {
+ errObj["address"] = ""
+ }
- if (password.length < 8) {
- errObj['password'] = 'Password must be at least 8 characters long'
- } else {
- errObj['password'] = ''
- }
+ if (password.trim().length < 8) {
+ errObj["password"] = "Password must be at least 8 characters long"
+ } else {
+ errObj["password"] = ""
+ }
- if (password && confirmPassword && password !== confirmPassword) {
- errObj['confirmPassword'] = 'Passwords do not match'
- } else {
- errObj['confirmPassword'] = ''
- }
+ if (password !== confirmPassword) {
+ errObj["confirmPassword"] = "Passwords do not match"
+ } else {
+ errObj["confirmPassword"] = ""
+ }
- setErrors(errObj)
- }, [fullName, email, password, confirmPassword, address])
+ setErrors(errObj)
+ }, [fullName, password, confirmPassword, address, setErrors])
- return (
-
- {errors.fullName &&
{errors.fullName}
}
-
- Full Name
-
- {errors.email &&
{errors.email}
}
-
- Email
-
- {errors.address &&
{errors.address}
}
-
- Address
-
- {errors.password &&
{errors.password}
}
-
- Password
-
- {errors.confirmPassword &&
{errors.confirmPassword}
}
-
- Confirm password
-
-
+
+ {errors.fullName &&
{errors.fullName}
}
+
+
+
+
+ {errors.address &&
{errors.address}
}
+
+
+
+
+ {errors.password &&
{errors.password}
}
+
+
+
+
+ {errors.confirmPassword && (
+
{errors.confirmPassword}
+ )}
+
+
+
+
Sign up to Cubeseed
+
+
+ {errors.email &&
{errors.email}
}
+
+
+ OR
+
+
+ Sign up with Google
+
+
+ Sign up with Meta
+
+
+ By signing up with Cubeseed you agree to the
+ Terms and Conditions, and
+ Privacy Policy .
+
+
- CubeSeed
-
-
+
+
+
+
+
@@ -16,22 +33,70 @@ export default function Navbar() {
-
+
+
-
-
-
Login
-
-
-
Signup
-
+
+ {/* Hamburger */}
+
+
+
+
+
+
+ {/* Menu */}
+ {isMenuOpen && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
)
}
+
+export default Navbar
diff --git a/cubeseed_login/src/component/service-instance/Service.tsx b/cubeseed_login/src/component/service-instance/Service.tsx
index 3530546..deeabfd 100644
--- a/cubeseed_login/src/component/service-instance/Service.tsx
+++ b/cubeseed_login/src/component/service-instance/Service.tsx
@@ -1,15 +1,9 @@
"use client" //use client side rendering when using state
+import { useSignUpContext } from "@/context/signup"
+import serviceStyles from "@/styles/service.module.scss"
import Image from "next/image"
+import { useRef } from "react"
import icon from "../../../public/assets/agriculture.svg"
-import serviceStyles from "@/styles/service.module.scss"
-import {
- FormEvent,
- InputHTMLAttributes,
- useEffect,
- useRef,
- useState,
-} from "react"
-import { useSignUpContext } from "@/context/signup"
type value = {
value: string
@@ -20,7 +14,6 @@ export default function Service({ value, setService }: value) {
// const [isChecked, setIsChecked] = useState(false); // unused state
const { choice, setChoice } = useSignUpContext()
- //const radioRef = useRef>(null)
const radioRef = useRef(null)
const selectOption = () => {
diff --git a/cubeseed_login/src/context/signup.tsx b/cubeseed_login/src/context/signup.tsx
index fdc64a8..7f76e4a 100644
--- a/cubeseed_login/src/context/signup.tsx
+++ b/cubeseed_login/src/context/signup.tsx
@@ -1,24 +1,24 @@
-import React, { useState, createContext, useContext } from "react";
-import { SignUpErrors } from "@cs/types/index";
+import React, { useContext, useState } from "react"
+import { SignUpErrors } from "../../types/index"
type props = {
- choice: string;
- fullName: string;
- email: string;
- address: string;
- password: string;
- confirmPassword: string;
- errors: SignUpErrors;
- setChoice: (value: string) => void;
- setErrors: (value: SignUpErrors) => void;
- setFullName: (value: string) => void;
- setEmail: (value: string) => void;
- setAddress: (value: string) => void;
- setPassword: (value: string) => void;
- setConfirmPassword: (value: string) => void;
+ choice: string
+ fullName: string
+ email: string
+ address: string
+ password: string
+ confirmPassword: string
+ errors: SignUpErrors
+ setChoice: (value: string) => void
+ setErrors: (value: SignUpErrors) => void
+ setFullName: (value: string) => void
+ setEmail: (value: string) => void
+ setAddress: (value: string) => void
+ setPassword: (value: string) => void
+ setConfirmPassword: (value: string) => void
}
-export const useSignUpContext = () => useContext(Context);
+export const useSignUpContext = () => useContext(Context)
export const Context = React.createContext({
choice: "",
@@ -36,20 +36,20 @@ export const Context = React.createContext({
setPassword: (value: string) => {},
setConfirmPassword: (value: string) => {},
setErrors: (value: SignUpErrors) => {},
-});
+})
type contextProps = {
- children: React.ReactElement;
-};
+ children: React.ReactElement
+}
export const SignUpContextProvider = ({ children }: contextProps) => {
- const [choice, setChoice] = useState("");
- const [fullName, setFullName] = useState("");
- const [email, setEmail] = useState("");
- const [address, setAddress] = useState("");
- const [password, setPassword] = useState("");
- const [confirmPassword, setConfirmPassword] = useState("");
- const [errors, setErrors] = useState({});
+ const [choice, setChoice] = useState("")
+ const [fullName, setFullName] = useState("")
+ const [email, setEmail] = useState("")
+ const [address, setAddress] = useState("")
+ const [password, setPassword] = useState("")
+ const [confirmPassword, setConfirmPassword] = useState("")
+ const [errors, setErrors] = useState({})
const contextProvider: props = {
choice,
@@ -68,9 +68,5 @@ export const SignUpContextProvider = ({ children }: contextProps) => {
setErrors,
}
- return (
-
- {children}
-
- );
+ return {children}
}
diff --git a/cubeseed_login/src/hooks/useMultiSteps.ts b/cubeseed_login/src/hooks/useMultiSteps.ts
index 6b82853..81de668 100644
--- a/cubeseed_login/src/hooks/useMultiSteps.ts
+++ b/cubeseed_login/src/hooks/useMultiSteps.ts
@@ -1,38 +1,31 @@
-import { ReactElement, useState } from "react";
-
-
-export function useMultiSteps (steps:ReactElement[]) {
-
- const [currentIndex, setCurrentIndex ] = useState(0)
-
-
- const next = () =>{
- setCurrentIndex(i =>{
-
- if (i >= steps.length - 1) return i
-
- return i + 1
-
- })
- }
-
- const back = () =>{
- setCurrentIndex(i =>{
-
- if (i <= 0 ) return i
-
- return i - 1
-
- })
- }
-
- return {
- currentIndex,
- steps,
- step:steps[currentIndex],
- next,
- back,
- isFirstStep:currentIndex === 0,
- isLastStep:currentIndex === steps.length - 1
- }
-}
\ No newline at end of file
+import { ReactElement, useState } from "react"
+
+export function useMultiSteps(steps: ReactElement[]) {
+ const [currentIndex, setCurrentIndex] = useState(0)
+
+ const next = () => {
+ setCurrentIndex((i) => {
+ if (i >= steps.length) return i
+
+ return i + 1
+ })
+ }
+
+ const back = () => {
+ setCurrentIndex((i) => {
+ if (i <= 0) return i
+
+ return i - 1
+ })
+ }
+
+ return {
+ currentIndex,
+ steps,
+ step: steps[currentIndex],
+ next,
+ back,
+ isFirstStep: currentIndex === 0,
+ isLastStep: currentIndex === steps.length - 1,
+ }
+}
diff --git a/cubeseed_login/src/pages/_app.tsx b/cubeseed_login/src/pages/_app.tsx
index 88d6d9f..f84e220 100644
--- a/cubeseed_login/src/pages/_app.tsx
+++ b/cubeseed_login/src/pages/_app.tsx
@@ -1,8 +1,7 @@
-import type { AppProps } from "next/app"
-import "@/styles/globals.scss"
-// import "@/styles/global.css" // tailwind
import { FarmContextProvider } from "@/context/context"
import { SignUpContextProvider } from "@/context/signup"
+import "@/styles/globals.scss"
+import type { AppProps } from "next/app"
export default function App({ Component, pageProps }: AppProps) {
return (
diff --git a/cubeseed_login/src/pages/dashboard/marketplace_dashboard/marketplace_sidebar.tsx b/cubeseed_login/src/pages/dashboard/marketplace_dashboard/marketplace_sidebar.tsx
index 7bd8f40..19e4836 100644
--- a/cubeseed_login/src/pages/dashboard/marketplace_dashboard/marketplace_sidebar.tsx
+++ b/cubeseed_login/src/pages/dashboard/marketplace_dashboard/marketplace_sidebar.tsx
@@ -1,8 +1,8 @@
-import { useState } from "react"
import MarketPlaceSideBarStyle from "@/styles/MarketPlaceSideBar.module.css"
-import logo from "@assets/icons/TransparentCubeseed.png"
+import logo from "@assets/cubeseedlogo.svg"
import smallLogo from "@assets/icons/TransparentSmallCubeseed.png"
import Image from "next/image"
+import { useState } from "react"
const MarketPlaceSideBar = () => {
const [selected, setSelected] = useState(false)
diff --git a/cubeseed_login/src/pages/index.tsx b/cubeseed_login/src/pages/index.tsx
index 47278d7..58d30d4 100644
--- a/cubeseed_login/src/pages/index.tsx
+++ b/cubeseed_login/src/pages/index.tsx
@@ -1,161 +1,76 @@
-// import Navbar from '@/comps/Navbar'
-// import ProgressBar from '@/comps/ProgressBar'
-// import ServiceForm from '@/comps/forms/ServiceForm'
-// import { useMultiSteps } from '@/hooks/useMultiSteps'
-// import Head from 'next/head'
-// import { FormEvent } from 'react'
-// import homeStyles from "@/styles/home.module.scss"
-// import Carousel from '@/comps/Carousel'
-// import UserDetailsForm from '@/comps/forms/UserDetailsForm'
-
-// export default function Home() {
-
-// const stepDivs = [
-// three
,
-// four
,
-// ]
-
-// const { steps, step, next, back, currentIndex, isLastStep, isFirstStep } = useMultiSteps(stepDivs)
-
-// console.log(`first ${isFirstStep}`, `last ${isLastStep}`)
-
-// function handleSubmit(event: FormEvent) {
-// event.preventDefault()
-// if (!isLastStep) return next()
-// console.log('finished')
-// // alert('submitted')
-// }
-
-// return (
-// <>
-// {/*
-// Create Next App
-// three
,
- //four
,
+ Create Next App
-
-
-
- }/>
-
- */}
-
+
+
+
+
-
-
- Already a member?{" "}
-
-
-
+
)
}
diff --git a/cubeseed_login/src/pages/login_page/login-page.tsx b/cubeseed_login/src/pages/login_page/login-page.tsx
index 8db4053..e860cf2 100644
--- a/cubeseed_login/src/pages/login_page/login-page.tsx
+++ b/cubeseed_login/src/pages/login_page/login-page.tsx
@@ -1,10 +1,9 @@
-import React, { useState } from "react"
-import { useRouter } from "next/router"
-import Link from "next/link"
-import Image from "next/image"
-import loginoptions from "@assets/loginoptions.png"
-import logo from "@assets/cubeseed.png"
import styles from "@/styles/loginpage.module.scss"
+import logo from "@assets/cubeseedlogo.svg"
+import Image from "next/image"
+import Link from "next/link"
+import { useRouter } from "next/router"
+import React, { useState } from "react"
interface LoginFormProps {
onSubmit: (email: string, password: string, rememberMe: boolean) => void
@@ -166,18 +165,6 @@ const LoginPage: React.FC = ({
OR
-
-
-
New to CubeSeed? Get Started
diff --git a/cubeseed_login/src/pages/redirect_page/redirect-page.tsx b/cubeseed_login/src/pages/redirect_page/redirect-page.tsx
index be62518..76525ed 100644
--- a/cubeseed_login/src/pages/redirect_page/redirect-page.tsx
+++ b/cubeseed_login/src/pages/redirect_page/redirect-page.tsx
@@ -1,5 +1,5 @@
import styles from "@/styles/redirectpage.module.scss"
-import logo from "@assets/cubeseed.png"
+import logo from "@assets/cubeseedlogo.svg"
import Image from "next/image"
const RedirectPage = () => {
diff --git a/cubeseed_login/src/styles/carousel.module.scss b/cubeseed_login/src/styles/carousel.module.scss
index 67fb376..7c97b29 100644
--- a/cubeseed_login/src/styles/carousel.module.scss
+++ b/cubeseed_login/src/styles/carousel.module.scss
@@ -2,21 +2,23 @@
display: flex;
justify-content: center;
align-items: center;
- background-image: url("../../public/assets/mock.jpeg");
+ background-image: url("../../public/assets/mock.svg");
background-repeat: no-repeat;
background-position: center;
- background-size: contain;
+ background-size: cover;
+ height: 100vh;
+ width: 100%;
+ overflow-x: hidden;
.card {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
- padding: 20px;
- width: 431px;
- height: 332px;
+ padding: 20px 32px 20px 32px;
+ width: 400px;
+ height: 330px;
background: rgba(0, 38, 41, 0.7);
- //background: #05656B;
color: white;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(1px);
diff --git a/cubeseed_login/src/styles/global.css b/cubeseed_login/src/styles/global.css
deleted file mode 100644
index 6344f2a..0000000
--- a/cubeseed_login/src/styles/global.css
+++ /dev/null
@@ -1,20 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
- :root {
- --clr-primary: #002629;
- --clr-primary-10: #03656b;
- --clr-primary-20: #27797e;
- --clr-primary-40: #51a1a6;
- --clr-primary-70: #bee8e5;
- --clr-primary-90: #f1fcfd;
- --clr-secondary: #ffb84c;
- --clr-accent: #886634;
- --clr-neutral-30: #46524e;
- --clr-neutral-60: #99a19f;
- --clr-neutral-70: #b4babe;
- --clr-neutral-90: #ebf3f1;
- }
-}
diff --git a/cubeseed_login/src/styles/globals.css b/cubeseed_login/src/styles/globals.css
index 0b8eeec..d9b35df 100644
--- a/cubeseed_login/src/styles/globals.css
+++ b/cubeseed_login/src/styles/globals.css
@@ -1,7 +1,10 @@
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url("https://fonts.googleapis.com/css2?family=Inter+Tight&display=swap");
body {
- font-family: "Ubuntu";
- position: relative;
+ font-family: "Inter Tight", sans-serif;
}
li {
@@ -16,19 +19,87 @@ a {
v2.0 | 20110126
License: none (public domain)
*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
margin: 0;
padding: 0;
border: 0;
@@ -44,8 +115,17 @@ time, mark, audio, video {
}
/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
display: block;
}
@@ -53,16 +133,20 @@ body {
line-height: 1;
}
-ol, ul {
+ol,
+ul {
list-style: none;
}
-blockquote, q {
+blockquote,
+q {
quotes: none;
}
-blockquote:before, blockquote:after,
-q:before, q:after {
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
content: "";
content: none;
}
@@ -79,19 +163,15 @@ a {
.input-wrapper {
position: relative;
width: 100%;
- margin: 10px;
}
input {
- border: 1px solid #45DFA9;
- border-radius: 6px;
- position: relative;
width: 100%;
- margin: 10px;
- width: 100%;
- margin: 10px;
- line-height: 6ex;
- outline: #45DFA9;
+ height: 56px;
+ border: 1px solid #6f9e8e;
+ border-radius: 4px;
+ outline: #6f9e8e;
+ padding: 5px 0px 5px 16px;
}
label {
@@ -101,4 +181,8 @@ label {
left: 2em;
background-color: white;
padding: 0 5px;
-}/*# sourceMappingURL=globals.css.map */
\ No newline at end of file
+} /*# sourceMappingURL=globals.css.map */
+
+form {
+ height: 100vh;
+}
diff --git a/cubeseed_login/src/styles/globals.scss b/cubeseed_login/src/styles/globals.scss
index 3aa6c6a..68dc98f 100644
--- a/cubeseed_login/src/styles/globals.scss
+++ b/cubeseed_login/src/styles/globals.scss
@@ -1,101 +1,205 @@
-@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
-body{
- font-family:'Ubuntu';
- position: relative;
+@import url("https://fonts.googleapis.com/css2?family=Inter+Tight&display=swap");
+
+@import "../styles/variables.module.scss";
+
+body {
+ font-family: $primary-font;
}
-li{
+li {
list-style: none;
}
-a{
+a {
text-decoration: none;
}
-
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: 'Ubuntu';
- vertical-align: baseline;
-
-}
-
-*{
- box-sizing: border-box;
- margin: 0;
- padding: 0;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: "Ubuntu";
+ vertical-align: baseline;
}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
}
-body {
- line-height: 1;
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
}
-ol, ul {
- list-style: none;
+
+ol,
+ul {
+ list-style: none;
}
-blockquote, q {
- quotes: none;
+blockquote,
+q {
+ quotes: none;
}
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: "";
+ content: none;
}
table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-a{
- all:unset
-}
-
-
-.input-wrapper {
- position: relative;
- width: 100%;
- margin: 10px;
- }
-
- input {
- border: 1px solid #45DFA9;
- border-radius: 6px;
- position: relative;
- width: 100%;
- margin: 10px;width: 100%;
- margin: 10px;
- line-height: 6ex;
- outline: #45DFA9;
- }
-
- label {
- position: absolute;
- top: 0.2ex;
- z-index: 1;
- left: 2em;
- background-color: white;
- padding: 0 5px;
- }
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+a {
+ all: unset;
+}
+
+input {
+ border: 1px solid $primary-color;
+ border-radius: 3px;
+ position: relative;
+ width: 100%;
+ padding: 0 5px;
+ line-height: 4ex;
+ outline: $primary-color;
+}
+
+label {
+ position: absolute;
+ top: 0.2ex;
+ z-index: 1;
+ left: 2em;
+ background-color: white;
+ padding: 0 5px;
+}
+
+form {
+ height: 100vh;
+}
+
+.signup-text {
+ color: $secondary-color;
+ font-weight: 600;
+}
+
+.social-signin {
+ border-color: $tertiary-color;
+ color: $tertiary-color;
+ cursor: pointer;
+}
+
+.line {
+ color: $tertiary-color-80 0.5px solid;
+ width: 100%;
+}
+
+.terms {
+ font-size: 14px;
+ word-spacing: 0.5px;
+}
+
+.login,
+.policy {
+ color: $secondary-color-60;
+}
diff --git a/cubeseed_login/src/styles/home.module.css b/cubeseed_login/src/styles/home.module.css
index c0f5de7..26ad9d4 100644
--- a/cubeseed_login/src/styles/home.module.css
+++ b/cubeseed_login/src/styles/home.module.css
@@ -17,7 +17,7 @@
display: inline-block;
justify-content: center;
padding: 12px 26px;
- gap: 10px;
+ gap: 2rem;
color: #ffffff;
position: relative;
width: 161px;
@@ -48,4 +48,4 @@
}
.member .memberlink {
text-decoration: underline;
-}/*# sourceMappingURL=home.module.css.map */
\ No newline at end of file
+} /*# sourceMappingURL=home.module.css.map */
diff --git a/cubeseed_login/src/styles/home.module.scss b/cubeseed_login/src/styles/home.module.scss
index 7eec1af..ceb8b07 100644
--- a/cubeseed_login/src/styles/home.module.scss
+++ b/cubeseed_login/src/styles/home.module.scss
@@ -1,69 +1,43 @@
+@import "../styles/variables.module.scss";
-// .home{
-// height: 100vh;
-// width: 100%;
-// display: grid;
-// grid-template-columns: 60% 40%;
-// gap: 20px;
-// }
-
-// .getStarted {
-// display: flex;
-// padding: 40px;
-// flex-direction: column;
-// line-height: 30px;
-// }
+.getStarted {
+ line-height: 30px;
+ margin-left: 10px;
+}
+.actionbutton {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ margin-top: 3em;
+}
-.home{
- height: 100vh;
- width: 100%;
- display: grid;
- grid-template-columns: 60% 40%;
- gap: 20px;
+.stepbutton {
+ padding: 6px 28px;
+ color: #ffffff;
+ background: $tertiary-color;
+ border-radius: 25px;
+ margin-right: 15px;
}
-.getStarted {
- display: flex;
- padding: 40px;
- flex-direction: column;
- line-height: 30px;
+.action:hover {
+ background-color: #0062cc;
}
-.actionbutton {
- display: inline-block;
- justify-content: center;
- padding: 12px 26px;
- gap: 10px;
- color: #ffffff;
- position: relative;
- width: 161px;
- height: 44px;
- left: 630px;
- top: 80px;
- background: #03656b;
- border-radius: 100px;
- }
-
- .action:hover {
- background-color: #0062cc;
- }
+.member {
+ display: flex;
+ position: absolute;
+ left: 100px;
+ top: 900px;
+ font-size: 20px;
- .steps{
- display:block;
- position: relative;
- left: 770px;
- top:50px;
+ .memberlink {
+ text-decoration: underline;
}
+}
- .member{
- display: flex;
- position: absolute;
- left: 100px;
- top: 900px;
- font-size: 20px;
-
- .memberlink{
- text-decoration: underline;
- }
- }
\ No newline at end of file
+@media (max-width: 768px) {
+ .carousel {
+ display: none;
+ }
+}
diff --git a/cubeseed_login/src/styles/navbar.module.css b/cubeseed_login/src/styles/navbar.module.css
index 8b83a7f..a6fd7d3 100644
--- a/cubeseed_login/src/styles/navbar.module.css
+++ b/cubeseed_login/src/styles/navbar.module.css
@@ -2,33 +2,12 @@
display: flex;
justify-content: space-between;
align-items: center;
- padding: 0.2rem;
+ padding: 0px, 32px, 0px, 32px;
width: 100%;
- background-color: white;
- box-shadow: 3px 8px 5px -2px rgba(0, 0, 0, 0.21);
- -webkit-box-shadow: 3px 8px 5px -2px rgba(0, 0, 0, 0.21);
- -moz-box-shadow: 3px 8px 5px -2px rgba(0, 0, 0, 0.21);
- /*
- ul {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-left: 0rem;
-
- li {
- padding: 22px 40px;
- margin: 0.5rem 0rem;
- }
- }
-
- .links{
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-left: 0;
- }
- */
+ background: linear-gradient(0deg, #bed6cd, #bed6cd),
+ linear-gradient(0deg, #f0f7f7, #f0f7f7);
}
+
.nav .navlinkgroup {
display: flex;
flex-direction: row;
@@ -57,15 +36,11 @@
background-color: green;
color: #333;
}
-.nav .button {
- width: 161px;
+.nav.button {
background-color: #fff;
color: #333;
- border: 2px solid #ffb84c;
display: flex;
justify-content: center;
- flex-direction: row;
- align-items: flex-start;
padding: 12px 26px;
gap: 10px;
border-radius: 100px;
@@ -73,30 +48,15 @@
.nav .button:hover {
background-color: #333;
color: #fff;
+
+ /* linear-gradient(0deg, #F0F7F7, #F0F7F7); */
}
-.nav .navbuttongroup {
- display: flex;
- flex-direction: row;
- position: relative;
- margin-right: 7rem;
-}
-.nav .navbuttongroup .loginbutton {
+
+/* .nav .navbuttongroup .loginbutton {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 12px 26px;
gap: 10px;
margin-right: 20px;
-}
-.nav .navbuttongroup .signupbutton {
- display: flex;
- background-color: #ffb84c;
- flex-direction: row;
- align-items: flex-start;
- padding: 12px 26px;
- gap: 10px;
-}
-
-:export {
- myClass: string;
-}/*# sourceMappingURL=navbar.module.css.map */
\ No newline at end of file
+} */
diff --git a/cubeseed_login/src/styles/navbar.module.scss b/cubeseed_login/src/styles/navbar.module.scss
index 79779df..3d79689 100644
--- a/cubeseed_login/src/styles/navbar.module.scss
+++ b/cubeseed_login/src/styles/navbar.module.scss
@@ -1,154 +1,39 @@
-// .nav {
-// display: flex;
-// justify-content: space-between;
-// align-items: center;
-// padding: 0.2rem;
-// // position: sticky;
-// // top: 0px;
-// // z-index: 1;
-// width: 100%;
-// background-color: white;
-// box-shadow: 3px 8px 5px -2px rgba(0, 0, 0, 0.21);
-// -webkit-box-shadow: 3px 8px 5px -2px rgba(0, 0, 0, 0.21);
-// -moz-box-shadow: 3px 8px 5px -2px rgba(0, 0, 0, 0.21);
-
-// ul {
-// display: flex;
-// justify-content: space-between;
-// align-items: center;
-// margin-left: 0rem;
-
-// li {
-// padding: 22px 40px;
-// margin: 0.5rem 0rem;
-// }
-// }
-
-// .links{
-// display: flex;
-// justify-content: space-between;
-// align-items: center;
-// margin-left: 0;
-// }
-// }
-
-// :export {
-// myClass: string;
-// }
+@import "../styles/variables.module.scss";
.nav {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0.2rem;
- // position: sticky;
- // top: 0px;
- // z-index: 1;
- width: 100%;
- background-color: white;
- box-shadow: 3px 8px 5px -2px rgba(0, 0, 0, 0.21);
- -webkit-box-shadow: 3px 8px 5px -2px rgba(0, 0, 0, 0.21);
- -moz-box-shadow: 3px 8px 5px -2px rgba(0, 0, 0, 0.21);
-
- .navlinkgroup{
- display: flex;
- flex-direction: row;
- margin-left: 30rem;
+ background: linear-gradient(0deg, #f0f7f7, #f0f7f7);
+ border-bottom: 1px solid $tertiary-color-80;
- .navlinks{
- display:flex;
- gap:40px;
- }
-
- .navlink {
- color: #002629;
- text-decoration: none;
- padding: 10px;
- border-radius: 5px;
- font-family: "Inter";
- font-style: normal;
- font-weight: 500;
- font-size: 20px;
- line-height: 40px;
- display: flex;
- flex-direction: row;
- align-items: center;
- text-align: center;
- }
-
- .navlink:hover {
- background-color: green;
- color: #333;
- }
- }
-
- .button{
- width: 161px;
- background-color: #fff;
- color: #333;
- border: 2px solid #ffb84c;
- display: flex;
- justify-content: center;
- flex-direction: row;
- align-items: flex-start;
- padding: 12px 26px;
- gap: 10px;
- border-radius: 100px;
+ .navlinks {
+ align-items: center;
}
- .button:hover {
- background-color: #333;
- color: #fff;
- }
- .navbuttongroup{
+ .navlink {
+ color: $tertiary-color;
+ text-decoration: none;
+ border-radius: 5px;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 18px;
display: flex;
flex-direction: row;
- position: relative;
- margin-right: 7rem;
-
- .loginbutton{
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- padding: 12px 26px;
- gap: 10px;
- margin-right: 20px;
- }
- .signupbutton{
- display: flex;
- background-color: #ffb84c;
- flex-direction: row;
- align-items: flex-start;
- padding: 12px 26px;
- gap: 10px;
- }
-
- }
-
-/*
- ul {
- display: flex;
- justify-content: space-between;
align-items: center;
- margin-left: 0rem;
+ text-align: center;
+ }
- li {
- padding: 22px 40px;
- margin: 0.5rem 0rem;
- }
+ .navlink:hover {
+ background-color: #bed6cd;
+ border-radius: 25px;
+ padding: 3px 12px 3px 12px;
}
- .links{
+ .loginbutton {
display: flex;
- justify-content: space-between;
align-items: center;
- margin-left: 0;
+ justify-content: center;
}
-*/
-
}
-
:export {
myClass: string;
-}
\ No newline at end of file
+}
diff --git a/cubeseed_login/src/styles/progress.module.scss b/cubeseed_login/src/styles/progress.module.scss
index efc7364..fb1cd5d 100644
--- a/cubeseed_login/src/styles/progress.module.scss
+++ b/cubeseed_login/src/styles/progress.module.scss
@@ -1,11 +1,13 @@
+@import "../styles/variables.module.scss";
+
.progressContainer {
width: 50%;
- padding: 30px 0px;
- margin: auto;
+ padding: 30px 0px;
+ margin: auto;
.progress {
width: 100%;
- height: 10px;
+ height: 5px;
appearance: none;
border-radius: 10px;
background-color: #eee;
@@ -17,7 +19,13 @@
&::-webkit-progress-value {
border-radius: 10px;
- background-color: #FFB84C;
+ background-color: $progress-color;
+ }
+
+ /* Firefox */
+ &::-moz-progress-bar {
+ border-radius: 10px;
+ background-color: $progress-color;
}
}
}
diff --git a/cubeseed_login/src/styles/service.module.scss b/cubeseed_login/src/styles/service.module.scss
index 5cb4430..c0ee149 100644
--- a/cubeseed_login/src/styles/service.module.scss
+++ b/cubeseed_login/src/styles/service.module.scss
@@ -1,57 +1,60 @@
.service {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 360px;
+ height: 104px;
+ // margin: 40px;
+ position: relative;
+ background: #ffffff;
+ box-shadow: 0px 1px 7px rgba(100, 111, 112, 0.17);
+ border-radius: 10px;
+ transition: transform 0.2s ease-in-out;
+
+ &:hover {
+ border: 1px solid #45dfa9;
+ transform: translateY(-3px);
+ cursor: pointer;
+ }
+
+ .description {
display: flex;
- flex-direction: column;
- justify-content: center;
+ flex-direction: row;
align-items: center;
- width: 360px;
- height: 88px;
- margin: 40px;
- position: relative;
- background: #FFFFFF;
- box-shadow: 0px 1px 7px rgba(100, 111, 112, 0.17);
- border-radius: 10px;
- transition: transform 0.2s ease-in-out;
-
- &:hover {
- border: 1px solid #45DFA9;
- transform: translateY(-3px);
- cursor: pointer;
- }
-
- .description {
- display: flex;
- flex-direction: row;
- align-items: center;
- padding: 12px 24px 12px 16px;
- gap: 16px;
- }
-
- input[type="radio"] {
- position: absolute;
- right: 10px;
- top: 10px;
- width: 20px;
- height: 20px;
- accent-color: #03656B;
- mix-blend-mode: multiply;
- }
-
-
-
-
- .icon {
- background: linear-gradient(180deg, rgba(69, 223, 169, 0.23) 20.14%, rgba(255, 255, 255, 0) 100%);
- border: 1px solid linear-gradient(180deg, rgba(69, 223, 169, 0.23) 20.14%, rgba(255, 255, 255, 0) 100%);
- border-radius: 50%;
- width: 30px;
- height: 30px;
- padding: 7px;
- }
-
+ padding: 12px 16px 12px 16px;
+ gap: 16px;
+ }
+
+ input[type="radio"] {
+ position: absolute;
+ right: 10px;
+ top: 50px;
+ width: 20px;
+ height: 20px;
+ accent-color: #03656b;
+ mix-blend-mode: multiply;
+ }
+
+ .icon {
+ background: linear-gradient(
+ 180deg,
+ rgba(69, 223, 169, 0.23) 20.14%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ border: 1px solid
+ linear-gradient(
+ 180deg,
+ rgba(69, 223, 169, 0.23) 20.14%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ border-radius: 50%;
+ width: 30px;
+ height: 30px;
+ padding: 7px;
+ }
}
-
-
:export {
- myClass: string;
-}
\ No newline at end of file
+ myClass: string;
+}
diff --git a/cubeseed_login/src/styles/serviceform.module.scss b/cubeseed_login/src/styles/serviceform.module.scss
index f7f9b31..423e80b 100644
--- a/cubeseed_login/src/styles/serviceform.module.scss
+++ b/cubeseed_login/src/styles/serviceform.module.scss
@@ -1,10 +1,23 @@
+.container {
+ width: 100%;
+ max-width: 600px; /* Adjust as needed */
+ margin: auto;
+}
-
-.form{
- display: grid;
- grid-template-columns: 1fr 1fr;
- place-items: center;
- gap: 10px;
- justify-content: center;
+.form {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ // place-items: center;
+ gap: 25px;
+ justify-content: center;
align-items: center;
-}
\ No newline at end of file
+}
+
+.heading {
+ margin-bottom: 20px;
+ padding: 20px;
+}
+
+.heading > h1 {
+ font-size: 24px;
+}
diff --git a/cubeseed_login/src/styles/variables.module.scss b/cubeseed_login/src/styles/variables.module.scss
new file mode 100644
index 0000000..58599d3
--- /dev/null
+++ b/cubeseed_login/src/styles/variables.module.scss
@@ -0,0 +1,9 @@
+$primary-color: #45dfa9;
+$secondary-color: #02575d;
+$secondary-color-60: #3a868a;
+$tertiary-color: #03656b;
+$tertiary-color-60: #98c0c3;
+$tertiary-color-80: #bed6cd;
+$progress-color: #ffb84c;
+$neutral-color: #edf0f0;
+$primary-font: "Inter Tight", sans-serif;
diff --git a/cubeseed_login/tailwind.config.js b/cubeseed_login/tailwind.config.js
index 898a97e..e4033eb 100644
--- a/cubeseed_login/tailwind.config.js
+++ b/cubeseed_login/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
theme: {
extend: {
colors: {
+ "dark-green": "#03656b",
primary: {
DEFAULT: "var(--clr-primary)",
100: "var(--clr-primary-10)",
diff --git a/cubeseed_login/tsconfig.json b/cubeseed_login/tsconfig.json
index bc71357..ac420d0 100644
--- a/cubeseed_login/tsconfig.json
+++ b/cubeseed_login/tsconfig.json
@@ -27,5 +27,6 @@
]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
- "exclude": ["node_modules"]
+ "exclude": ["node_modules"],
+ "types": ["node"]
}
diff --git a/cubeseed_login/types/fixtserror/index.d.ts b/cubeseed_login/types/fixtserror/index.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/cubeseed_login/types/index.d.ts b/cubeseed_login/types/index.d.ts
index ac07c76..3d377a4 100644
--- a/cubeseed_login/types/index.d.ts
+++ b/cubeseed_login/types/index.d.ts
@@ -1,49 +1,48 @@
export type BillType = {
-
- name: string;
- value: string;
- };
+ name: string
+ value: string
+}
export type OrderType = {
- service: string;
- details?: string;
- quantity: string;
- unit: string;
- price: string;
- total: string;
- };
+ service: string
+ details?: string
+ quantity: string
+ unit: string
+ price: string
+ total: string
+}
export type SummaryType = {
- name: string;
- value: string;
- };
+ name: string
+ value: string
+}
export type SignUpErrors = {
- fullName?: string;
- email?: string;
- address?: string;
- password?: string;
- confirmPassword?: string;
- [key: string]: boolean;
-};
+ fullName?: string
+ email?: string
+ address?: string
+ password?: string
+ confirmPassword?: string
+ [key: string]: boolean
+}
export type UserProfileType = {
- url: string,
- full_name: string,
- phone_number: string,
- address: string,
- city: string,
- state: string,
- country: string,
- zip_code: string,
- about_me: string,
- created_at: Date,
+ url: string
+ full_name: string
+ phone_number: string
+ address: string
+ city: string
+ state: string
+ country: string
+ zip_code: string
+ about_me: string
+ created_at: Date
updated_at: Date
}
export type ApiResponse = {
results: {
- name: string;
- url: string;
- }[];
+ name: string
+ url: string
+ }[]
}