diff --git a/index.html b/index.html index 3e28c51e..9ce60286 100644 --- a/index.html +++ b/index.html @@ -49,24 +49,24 @@ - - - + + + - - + + Milan diff --git a/package-lock.json b/package-lock.json index 10b6342a..b0e3b764 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@commitlint/cli": "^18.4.2", "@commitlint/config-conventional": "^17.6.1", + "@hookform/resolvers": "^3.3.4", "@testing-library/jest-dom": "^5.16.1", "@testing-library/user-event": "^14.4.3", "aos": "^2.3.4", @@ -20,7 +21,9 @@ "js-cookie": "^3.0.5", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-fast-marquee": "^1.6.3", "react-helmet-async": "^1.3.0", + "react-hook-form": "^7.49.3", "react-icons": "^4.10.1", "react-router-dom": "^6.11.2", "react-scripts": "^5.0.1", @@ -32,6 +35,7 @@ "url": "^0.11.0", "vite-plugin-svgr": "^2.2.2", "web-vitals": "^3.3.1", + "zod": "^3.22.4", "zustand": "^4.4.1" }, "devDependencies": { @@ -2852,6 +2856,14 @@ "version": "0.1.4", "license": "MIT" }, + "node_modules/@hookform/resolvers": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz", + "integrity": "sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==", + "peerDependencies": { + "react-hook-form": "^7.0.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.11", "license": "Apache-2.0", @@ -15389,6 +15401,15 @@ "version": "3.2.2", "license": "MIT" }, + "node_modules/react-fast-marquee": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.6.3.tgz", + "integrity": "sha512-oEISmNElv6lua/4i4uPYIteUKDxU0hAKKjH/tY2icje4GCns1rX6pIrkwVhjX0FMCIepUVqeyCchvqkiO/s2vw==", + "peerDependencies": { + "react": ">= 16.8.0 || 18.0.0", + "react-dom": ">= 16.8.0 || 18.0.0" + } + }, "node_modules/react-helmet-async": { "version": "1.3.0", "license": "Apache-2.0", @@ -15404,6 +15425,22 @@ "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-hook-form": { + "version": "7.49.3", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.49.3.tgz", + "integrity": "sha512-foD6r3juidAT1cOZzpmD/gOKt7fRsDhXXZ0y28+Al1CHgX+AY1qIN9VSIIItXRq1dN68QrRwl1ORFlwjBaAqeQ==", + "engines": { + "node": ">=18", + "pnpm": "8" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-icons": { "version": "4.11.0", "license": "MIT", @@ -19696,6 +19733,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/zod": { + "version": "3.22.4", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz", + "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, "node_modules/zustand": { "version": "4.4.1", "license": "MIT", diff --git a/package.json b/package.json index 65ca42c4..ca3ee699 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "dependencies": { "@commitlint/cli": "^18.4.2", "@commitlint/config-conventional": "^17.6.1", + "@hookform/resolvers": "^3.3.4", "@testing-library/jest-dom": "^5.16.1", "@testing-library/user-event": "^14.4.3", "aos": "^2.3.4", @@ -34,7 +35,9 @@ "js-cookie": "^3.0.5", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-fast-marquee": "^1.6.3", "react-helmet-async": "^1.3.0", + "react-hook-form": "^7.49.3", "react-icons": "^4.10.1", "react-router-dom": "^6.11.2", "react-scripts": "^5.0.1", @@ -46,6 +49,7 @@ "url": "^0.11.0", "vite-plugin-svgr": "^2.2.2", "web-vitals": "^3.3.1", + "zod": "^3.22.4", "zustand": "^4.4.1" }, "scripts": { diff --git a/src/App.jsx b/src/App.jsx index d2be2d9d..bad2e750 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,12 +1,12 @@ import React from "react"; -import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; -import "./styles/App.css"; +import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; import BacktoTop from "../src/components/Button/BacktoTop/BacktoTop.jsx"; -import routesConfig from "./assets/data/routesConfig"; +import "./styles/App.css"; +import routesConfig from "./utils/routesConfig.jsx"; const App = () => { return ( - <> +
{routesConfig.map((route, index) => ( @@ -20,7 +20,7 @@ const App = () => { - +
); }; diff --git a/src/assets/data/routesConfig.jsx b/src/assets/data/routesConfig.jsx deleted file mode 100644 index 48737ca1..00000000 --- a/src/assets/data/routesConfig.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; - -import { - Home, - UserProfile, - Clubs, - Events, - Shop, - Error404, - AuthSignup, - AuthLogin, - ClubProfile, -} from "../../pages/route"; - -const routesConfig = [ - { path: "/", element: }, - { path: "/auth/signup", element: }, - { path: "/auth/login", element: }, - { path: "/user/:slug", element: }, - { path: "/clubs", element: }, - { path: "/club/:slug", element: }, - { path: "/events", element: }, - { path: "/shop", element: }, - { path: "*", element: }, -]; - -export default routesConfig; diff --git a/src/assets/pictures/Banner/Vector.png b/src/assets/pictures/Banner/Vector.png new file mode 100644 index 00000000..82116b2f Binary files /dev/null and b/src/assets/pictures/Banner/Vector.png differ diff --git a/src/assets/pictures/Navbar/GitHubLogo.png b/src/assets/pictures/Navbar/GitHubLogo.png new file mode 100644 index 00000000..3281bcfe Binary files /dev/null and b/src/assets/pictures/Navbar/GitHubLogo.png differ diff --git a/src/assets/pictures/Navbar/GithubLogo.svg b/src/assets/pictures/Navbar/GithubLogo.svg new file mode 100644 index 00000000..2af16410 --- /dev/null +++ b/src/assets/pictures/Navbar/GithubLogo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/pictures/Navbar/NavbarImg.png b/src/assets/pictures/Navbar/NavbarImg.png new file mode 100644 index 00000000..40e09eae Binary files /dev/null and b/src/assets/pictures/Navbar/NavbarImg.png differ diff --git a/src/assets/pictures/authpages/authbanner.png b/src/assets/pictures/authpages/authbanner.png new file mode 100644 index 00000000..289bbd70 Binary files /dev/null and b/src/assets/pictures/authpages/authbanner.png differ diff --git a/src/components/Banners/Banner.css b/src/components/Banners/Banner.css deleted file mode 100644 index e997e0fd..00000000 --- a/src/components/Banners/Banner.css +++ /dev/null @@ -1,321 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap"); - -.banner_mainparent { - display: flex; - text-align: center; - flex-direction: column; - justify-content: center; - width: 100%; - height: 95vh; -} - -.banner_subparent { - display: flex; - justify-content: center; -} - -.banner_textdiv { - text-align: center; -} - -.banner_header1 { - font-size: 90px; - margin-bottom: 1.5rem !important; - margin-top: 6rem; - color: #28183b; - line-height: 98px; - font-weight: 900; - font-family: "Inter", sans-serif; -} - -.banner_header1 > br:nth-of-type(1) { - display: none; -} - -.banner_header2 { - font-family: Montserrat, sans-serif; - font-size: 65px; - line-height: 80px; - margin-bottom: 1.5rem !important; - color: #28183b; -} - -.banner_textdiv div { - width: 100%; - display: flex; - justify-content: center; -} - -.banner_header3 { - font-family: "Poppins", sans-serif; - color: black; - font-size: 24px; - margin-top: 40px; - letter-spacing: 1px; -} - -.banner_header3 > span { - color: #e26959; -} - -.banner_btn_div { - display: flex; - justify-content: center; - align-items: center; - gap: 1rem; - flex-wrap: wrap; -} - -.banner_signup_btn { - margin-top: 2rem; - width: 190px; - padding: 15px 5px !important; - height: 50px; -} - -.banner_contribute_logo { - width: 25px; - height: 25px; - margin-bottom: 0px; - color: #000; -} - -.banner_imgdiv img { - max-width: 400px; -} - -@media screen and (max-width: 1200px) { - .banner_header1 { - font-size: 90px; - margin-bottom: 1.5rem !important; - margin-top: 6rem; - color: #28183b; - line-height: 98px; - font-weight: 900; - font-family: "Inter", sans-serif; - } - - .banner_header3 { - font-size: 20px; - margin-top: 40px; - letter-spacing: 1px; - } -} - -@media screen and (max-width: 1000px) { - .banner_header1 { - margin-top: 3rem; - line-height: 88px; - } - - .banner_header1 > br:nth-of-type(1) { - display: block; - } -} - -@media screen and (max-width: 600px) { - .banner_mainparent { - height: 100vh; - } - - .banner_subparent { - flex-direction: column; - align-items: center; - padding-left: 2px; - padding-right: 2px; - } - - .banner_imgdiv img { - display: none; - } - - .banner_textdiv { - margin-top: 10vh; - } - - .banner_header1 { - font-size: 60px; - text-align: center; - line-height: 65px; - margin-bottom: 0px; - margin-top: 0px; - } - - .banner_header2 { - font-size: 3.5rem; - text-align: center; - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-word; - } - - .banner_header3 { - text-align: center; - font-size: 18px; - } - - .banner_header3 > br { - display: none; - } - - .banner_signup_btndiv { - display: flex; - } - - .banner_btn_div { - gap: 1rem; - margin-top: 3rem; - } - - .banner_signup_btn { - margin: auto; - width: 60%; - } -} - -@media screen and (max-width: 400px) { - .banner_header1 { - font-size: 50px; - line-height: 55px; - } - - .banner_header3 { - font-size: 16px; - } -} - -/* MilaninfoBanner stylings below */ - -.mib_mainparent { - margin-top: 7rem; - margin-bottom: 5rem; - padding: 0 20.5px; -} - -.mib_top_intro { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - gap: 1rem; -} - -.mib_top_intro > h1 { - font-size: 25px; - font-weight: 900; - - color: #e26959; - background-image: -webkit-linear-gradient(45deg, #e26959 20%, #28183b 60%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-family: "Inter", sans-serif; - letter-spacing: 1px; -} - -.mib_collab_bottom_middle { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - gap: 1rem; -} - -.mib_collab_bottom_middle > h1 { - font-size: 50px; - color: #28183b; - font-weight: 900; - font-family: "Inter", sans-serif; - text-align: center; -} - -.mib_collab_bottom_middle > p { - font-family: "Poppins", sans-serif; - color: black; - font-size: 18px; - margin-top: 0px; - letter-spacing: 1px; - width: 70%; - text-align: center; -} - -.mib_sidewise { - display: flex; - flex-direction: row; - gap: 8rem; - width: 85%; - margin-top: 4rem; - align-items: center; - margin-bottom: 12rem; -} - -.mib_collab_bottom_left > img { - width: 400px; -} - -.mib_collab_bottom_right h1 { - font-size: 28px; - color: #28183b; - font-weight: 800; - font-family: "Inter", sans-serif; -} - -.mib_collab_bottom_right p { - font-family: "Poppins", sans-serif; - color: black; - font-size: 16px; - margin-top: 0px; - letter-spacing: 1px; -} - -@media screen and (max-width: 500px) { - .mib_mainparent { - padding: 0 10.5px; - } - - .mib_top_intro > h1 { - font-size: 23px; - font-weight: 900; - } - - .mib_collab_bottom_middle > h1 { - font-size: 45px; - line-height: 50px; - margin-top: 1rem; - } - - .mib_collab_bottom_middle > p { - font-size: 17px; - width: 95%; - } - - .mib_sidewise { - display: flex; - flex-direction: column-reverse; - gap: 2rem; - width: 100%; - margin-bottom: 7rem; - } - - .mib_collab_bottom_right h1 { - text-align: center; - font-size: 25px; - } - - .mib_collab_bottom_right p { - font-family: "Poppins", sans-serif; - font-size: 16px; - text-align: center; - } - - .mib_collab_bottom_left > img { - width: 90%; - } - - .mib_collab_parent:nth-child(3) - > .mib_collab_bottom - > .mib_sidewise - > .mib_collab_bottom_left { - display: none; - } -} diff --git a/src/components/Banners/HomeBanner.jsx b/src/components/Banners/HomeBanner.jsx deleted file mode 100644 index 29d929cd..00000000 --- a/src/components/Banners/HomeBanner.jsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from "react"; -import "./Banner.css"; -import Cookies from "js-cookie"; -import { ImGithub } from "react-icons/im"; -import Button from "../Button/GlobalButton/Button"; - -const HomeBanner = () => { - return ( - <> -
-
-
-
-

- Collaborate.
Connect.
Build. -

-
-

- Welcome to Milan, a platform to connect NGOs, -
- Charities, and you to collaborate and
{" "} - build a better tomorrow. -

-
- -
-
- {Cookies.get("isLoggedIn") ? ( - Cookies.get("usertype") === "club" ? ( - - ) : ( - - ) - ) : ( - - )} - -
-
-
-
-
-
- - ); -}; - -export default HomeBanner; diff --git a/src/components/Banners/Landing.css b/src/components/Banners/Landing.css new file mode 100644 index 00000000..cf1a25fa --- /dev/null +++ b/src/components/Banners/Landing.css @@ -0,0 +1,306 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap"); + +.landing_parent { + padding-top: 10rem; + display: flex; + flex-direction: column; + min-height: 90dvh; +} + +.Landing_bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + max-width: 100vw; + object-fit: cover; + height: 100vh; + max-height: 100vh; +} + +.landing_promo { + display: inline-flex; + padding: 5px 24px; + align-items: center; + gap: 10px; + border-radius: 32px; + border: 1px solid var(--headsup-stroke, rgba(215, 86, 54, 0.766)); + background: var(--Neutral-G10, #fbfbfb); + font-family: "Outfit", sans-serif; + margin: auto; + cursor: pointer; + z-index: 3; + transition: all 0.2s ease-in-out; + color: black; + font-size: 16px; +} + +.landing_promo:hover { + -webkit-box-shadow: 0px 0px 29px 7px rgba(255, 124, 90, 0.44); + -moz-box-shadow: 0px 0px 29px 7px rgba(255, 124, 90, 0.44); + box-shadow: 0px 0px 29px 7px rgba(255, 124, 90, 0.44); + transition: all 0.2s ease-in-out; + border: 1px solid var(--headsup-stroke, rgb(215, 86, 54)); +} + +.landing_parent > h1 { + color: var(--Brand-brand-900, #6b2615); + text-align: center; + font-family: "Montserrat", sans-serif; + font-size: 4.2rem; + margin-top: 6rem; + font-style: normal; + font-weight: 800; + + text-transform: capitalize; + z-index: 3; +} + +.landing_parent > h1 > span { + color: var(--Brand-brand-500, #ff5b31); +} + +.landing_parent > h2 { + color: var(--Brand-brand-900, #6b2615); + font-family: "Poppins", sans-serif; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 24.18px; /* 100.75% */ + letter-spacing: 1.2px; + text-align: center; + width: 55%; + margin: auto; + margin-top: 1rem; + z-index: 3; +} + +.landing_parent > h2 > span { + color: var(--Brand-brand-500, #ff5b31); +} + +.landing_signup { + margin: auto; + z-index: 3; + margin-top: 4rem; + width: 170px !important; +} + +.landing_signup:hover { + background: var(--Brand-brand-500, #ff5b31); + box-shadow: + 0px 0px 1.17px 0px #ff5a30, + 0px 0px 8.191px 0px #ff5a30, + 0px 0px 28.084px 0px #ff5a30; + transition: all 0.3s ease-in-out; +} + +.landing_signup > span { + font-size: 20px; +} + +.landing_marque { + width: 50% !important; + margin: auto; + margin-top: 4rem; +} + +.landing_marque_pill { + background-color: white; + border-radius: 50px; + padding: 5px 10px; + display: inline-flex; + align-items: center; + gap: 10px; + width: fit-content; + font-family: "Outfit", sans-serif; + cursor: pointer; + z-index: 3; + border: 1px solid var(--headsup-stroke, rgba(215, 86, 54, 0.103)); + font-size: 15px; + color: black; + margin: 0 20px; +} + +.landing_marque_pill > img { + width: 35px; + aspect-ratio: 1/1; + object-fit: cover; + border-radius: 50%; +} + +@media screen and (max-width: 500px) { + .landing_parent { + padding-top: 8rem; + height: auto; + padding-left: 1rem; + padding-right: 1rem; + } + + .landing_parent > h1 { + font-size: 2.9rem; + margin-top: 4rem; + } + + .landing_parent > h2 { + font-size: 17px; + width: 100%; + } + + .landing_signup { + margin-top: 4rem; + width: 150px !important; + } + + .landing_signup > span { + font-size: 18px; + } + + .landing_marque { + display: none !important; + } +} + +/* MilaninfoBanner stylings below */ + +.mib_mainparent { + margin-top: 7rem; + margin-bottom: 5rem; + padding: 0 20.5px; +} + +.mib_top_intro { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.mib_top_intro > h1 { + font-size: 25px; + font-weight: 900; + + color: #e26959; + background-image: -webkit-linear-gradient(45deg, #e26959 20%, #28183b 60%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-family: "Inter", sans-serif; + letter-spacing: 1px; +} + +.mib_collab_bottom_middle { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.mib_collab_bottom_middle > h1 { + font-size: 50px; + color: #28183b; + font-weight: 900; + font-family: "Inter", sans-serif; + text-align: center; +} + +.mib_collab_bottom_middle > p { + font-family: "Poppins", sans-serif; + color: black; + font-size: 18px; + margin-top: 0px; + letter-spacing: 1px; + width: 70%; + text-align: center; +} + +.mib_sidewise { + display: flex; + flex-direction: row; + gap: 8rem; + width: 85%; + margin-top: 4rem; + align-items: center; + margin-bottom: 12rem; +} + +.mib_collab_bottom_left > img { + width: 400px; +} + +.mib_collab_bottom_right h1 { + font-size: 28px; + color: #28183b; + font-weight: 800; + font-family: "Inter", sans-serif; +} + +.mib_collab_bottom_right p { + font-family: "Poppins", sans-serif; + color: black; + font-size: 16px; + margin-top: 0px; + letter-spacing: 1px; +} + +@media screen and (max-width: 500px) { + .mib_mainparent { + padding: 0 10.5px; + } + + .mib_top_intro > h1 { + font-size: 23px; + font-weight: 900; + } + + .mib_collab_bottom_middle > h1 { + font-size: 45px; + line-height: 50px; + margin-top: 1rem; + } + + .mib_collab_bottom_middle > p { + font-size: 17px; + width: 95%; + } + + .mib_sidewise { + display: flex; + flex-direction: column-reverse; + gap: 2rem; + width: 100%; + margin-bottom: 7rem; + } + + .mib_collab_bottom_right h1 { + text-align: center; + font-size: 25px; + } + + .mib_collab_bottom_right p { + font-family: "Poppins", sans-serif; + font-size: 16px; + text-align: center; + } + + .mib_collab_bottom_left > img { + width: 90%; + } + + .mib_collab_parent:nth-child(3) + > .mib_collab_bottom + > .mib_sidewise + > .mib_collab_bottom_left { + display: none; + } +} + +.homebanner_parent { + position: relative; +} + +.homebanner_bg { + max-width: 100%; +} diff --git a/src/components/Banners/Landing.jsx b/src/components/Banners/Landing.jsx new file mode 100644 index 00000000..487b9edd --- /dev/null +++ b/src/components/Banners/Landing.jsx @@ -0,0 +1,164 @@ +import React, { useEffect, useState } from "react"; +import Marquee from "react-fast-marquee"; +import Vector from "../../assets/pictures/Banner/Vector.png"; +import Button from "../Button/GlobalButton/Button"; +import "./Landing.css"; + +const Landing = () => { + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + return ( + <> +
+ +
+ + + + + + + + + + + + + {" "} + {windowWidth > 430 + ? "We are OpenSource, you can contribute too!" + : "We are OpenSource"}{" "} + +
+ +

+ Collaborate. Connect. Build. +

+ + {windowWidth > 430 ? ( +

+ Milan is an OpenSource platform to connect NGOs, + Charities, and you to collaborate and{" "} + build a better tomorrow. +

+ ) : ( +

+ A platform to connect NGOs, charities and you to build a better + tomorrow. +

+ )} + + +
+ + Sruti foundation +
+
+ + Sruti foundation +
+
+ + Sruti foundation +
+
+ + Sruti foundation +
+
+ + Sruti foundation +
+
+ + Sruti foundation +
+
+ + Sruti foundation +
+
+ + Sruti foundation +
+ + + +
+ + ); +}; + +export default Landing; diff --git a/src/components/Banners/Milaninfobanner.jsx b/src/components/Banners/Milaninfobanner.jsx index 9b9fecbf..bb99abd7 100644 --- a/src/components/Banners/Milaninfobanner.jsx +++ b/src/components/Banners/Milaninfobanner.jsx @@ -1,10 +1,10 @@ -import React, { useEffect } from "react"; -import "./Banner.css"; import AOS from "aos"; import "aos/dist/aos.css"; +import React, { useEffect } from "react"; +import MilanBuild from "../../assets/pictures/Banner/MilanBuild.svg"; import MilanCollaborate from "../../assets/pictures/Banner/MilanCollaborate.svg"; import MilanConnect from "../../assets/pictures/Banner/MilanConnect.svg"; -import MilanBuild from "../../assets/pictures/Banner/MilanBuild.svg"; +import "./Landing.css"; const Milaninfobanner = () => { useEffect(() => { diff --git a/src/components/Button/GlobalButton/Button.module.css b/src/components/Button/GlobalButton/Button.module.css index 8c93d8da..5ff2f4c7 100644 --- a/src/components/Button/GlobalButton/Button.module.css +++ b/src/components/Button/GlobalButton/Button.module.css @@ -1,61 +1,43 @@ .btn { - padding: 8px 25px; - text-align: center; - cursor: pointer; - border-radius: 8px; - display: flex; - justify-content: center; - align-items: center; - gap: 10px; - width: auto; - letter-spacing: 1px; - font-weight: 500; - transition: all 0.2s ease-in-out; -} - -.rounded{ - background: #e26959; - border: 1px solid #e26959; - border-radius: 40px; - color: white; - transition: all 0.2s ease-in-out; -} -.btn > p { - font-family: "Poppins", sans-serif; - margin: 0; - font-size: 16px; -} -.btn > svg { + border-radius: 50px; + padding: 0.6rem; font-family: "Poppins", sans-serif; - margin: 0; font-size: 17px; + font-style: normal; + width: 140px; + + font-weight: 500; + display: flex; + justify-content: space-evenly; + align-items: center; + border: none; } -.btn:focus { +/* .btn:focus { outline: 2px dashed #e26959; outline-offset: 2px; -} +} */ .solid { - background: #e26959; - border: 1px solid #e26959; - color: white; + background: #ff5b31; + border: 1px solid #ff5b31; transition: all 0.2s ease-in-out; + color: white; } .outline { - border: 1px solid #e26959; - color: black; + border-radius: 12px; + background-color: white; + border: 1px solid #28183b; transition: all 0.2s ease-in-out; } .solid:hover, .solid:active, .solid:focus { - color: black; - border: #e26959 solid 1px; - background-color: white; + background-color: #ff5a31d1; transition: all 0.2s ease-in-out; + color: white; } .solid:disabled { @@ -68,8 +50,7 @@ .outline:focus, .outline:hover, .outline:active { - background-color: #e26959; - color: white; + border: 1px solid #ff5a31d1; transition: all 0.2s ease-in-out; } @@ -88,6 +69,7 @@ background-color: white; transition: all 0.2s ease-in-out; } + .btn.bold { font-weight: 600; -} \ No newline at end of file +} diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css index fd497dec..7a35541a 100644 --- a/src/components/Navbar/Navbar.css +++ b/src/components/Navbar/Navbar.css @@ -1,77 +1,35 @@ -.navbar_main { - background-color: rgba(255, 255, 255, 0.6); - padding-bottom: 10px; - padding-top: 10px; +.navbar_parent { + background-color: rgba(255, 255, 255, 0); + padding: 0.8rem 7rem; backdrop-filter: blur(10px); box-shadow: 0 20px 30px rgba(255, 255, 255, 0.15); z-index: 10; position: fixed; top: 0; width: 100%; -} - -.navbar_main > .navbar_betabtn { - position: absolute; - left: 15px; - top: 15px; - z-index: 1; - background-color: #000000; - color: white; - border-radius: 8px; - font-size: 16px !important; - font-family: "Poppins", sans-serif; - width: auto; - padding: 0 1rem; -} - -.nav_brand_parent { display: flex; align-items: center; + justify-content: space-between; } -.nav_brand_name { - color: #e26959; - text-decoration: none; - padding-left: 5px; - font-family: Montserrat, sans-serif; - font-size: 1.5rem; -} - -.navbar-nav { - margin: auto; - gap: 30px; +.navbar_brand > img { + width: 110px; } -.navbar-brand { - font-size: 1.8em; - color: #28183b; - font-family: "Indie Flower", cursive; - font-weight: 600; +.navbar_links { display: flex; + gap: 40px; align-items: center; - pointer-events: none; - margin-left: 30px; + margin-top: 10px; } -.nav-item a { +.navbar_link { + color: #8c321b; + font-weight: 600; + font-family: "Poppins", sans-serif; text-decoration: none; - cursor: pointer; - font-family: Poppins, sans-serif; - color: #e26959; - font-size: 1rem; -} - -.nav-item div:not(.active-link) { - border-bottom: 2px solid #28183b; - width: 0%; - margin: auto; - transition: all 0.2s ease-in; -} - -.nav-item:hover div { - border-bottom: 2px solid #28183b; - width: 50%; - animation: all 0.5 infinite; + font-size: 17px; + line-height: 1; } .active-link { @@ -80,121 +38,108 @@ margin: auto; } -.shop_tag { - font-weight: 600; - color: black; - text-decoration: none; - cursor: pointer; -} - -.home { - font-weight: 600; - margin: auto; -} - -.shop_icon { - width: 10px; - height: 10px; -} - -.nav-buttons { - display: flex; - gap: 5px; +.navbar_cta:hover { + background: var(--Brand-brand-500, #ff5b31); + box-shadow: + 0px 0px 1.17px 0px #ff5a30, + 0px 0px 8.191px 0px #ff5a30, + 0px 0px 28.084px 0px #ff5a30; + transition: all 0.3s ease-in-out; } -@media (max-width: 1024px) { - .navbar-brand { - font-size: 1.7rem; - } - - .home { - margin: auto; - padding: 8px; - } - - .navbar-nav { - padding-left: 0px; - } - - .nav-buttons { - flex-direction: column; - margin: auto; - gap: 0px; - } - - .navbar-nav { - gap: 5px; - } +.navbar_cta_arrow { + width: 15px; + height: 15px; + transition: all 0.3s ease-in-out; } -.nav_brand_img { - margin-left: 10px; - object-fit: cover; - cursor: pointer; +.navbar_cta:hover .navbar_cta_arrow, +.landing_signup:hover .navbar_cta_arrow { + transform: rotate(-90deg); + transition: all 0.3s ease-in-out; } -.nav_user_img { +.navbar_ham { width: 30px; height: 30px; - border-radius: 50%; - margin-left: 10px; - object-fit: cover; + color: #28183b; cursor: pointer; - align-self: center; + display: none; } -@media (min-width: 769px) { - .container-fluid { - padding: 1rem 3rem; - } +.navbar_mobile_linksparent { + position: fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.867); + z-index: 20; + display: flex; + justify-content: end; + align-items: center; + justify-content: center; + display: flex; + align-items: center; + transition: all 0.3s ease-in-out; } -.signUpModalHeader > h1 { - font-family: Poppins, sans-serif; - color: #000000; - font-size: 1.5rem; - font-weight: 800; - text-align: center; +.navbar_mobile_links { + background-color: rgb(255, 255, 255); + padding: 1rem; + box-shadow: 1px 3px 80px rgba(255, 255, 255, 0.346); + border-radius: 12px; + width: 80vw; + display: flex; + flex-wrap: wrap; + gap: 30px; + justify-content: center; + position: absolute; + top: 20%; + padding-top: 2rem; } -.button-wrapper { - display: flex; - flex-direction: column; - max-width: fit-content; - margin: 0 auto; +.navbar_mobile_link { + color: #000000; + font-weight: 500; + font-family: "Outfit", sans-serif; + text-decoration: none; + font-size: 17px; + line-height: 1; } -.modal-btn { - margin: 20px; +.navbar_mobile_cta { + font-family: "Outfit", sans-serif; + text-decoration: none; + font-size: 17px; + gap: 5px; + padding: 0.5rem 1rem; } -@media screen and (max-width: 525px) { - .navbar_main > .navbar_betabtn { - left: 145px; - top: 19px; - } +.navbar_mobile_cta > svg { + width: 15px; + height: 15px; +} - .signUpModalHeader { - justify-content: center; - align-items: center; - } +.navbar_mobile_close { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; +} - .signUpModalHeader > h1 { - font-size: 1.2rem; - margin-left: 1.4rem; - flex: auto; +@media screen and (max-width: 430px) { + .navbar_parent { + padding: 0.8rem 1.5rem; } - .nav-buttons { - row-gap: 1rem; - margin-bottom: 1rem; + .navbar_brand > img { + width: 100px; } - .nav-buttons > .btn { - width: 70%; - margin: auto; + .navbar_ham { + display: block; } - /* .nav-buttons > .btn:nth-of-type(1) { - display: none; - } */ } diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 3c3a0fe9..30ddfc8f 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -1,159 +1,320 @@ -import React, { useState } from "react"; -import "./Navbar.css"; -import navbarbrand from "../../assets/pictures/Navbar/MilanNavBrand.svg"; -import { Link, useNavigate, useLocation } from "react-router-dom"; -import Cookies from "js-cookie"; -import { FaBars } from "react-icons/fa"; -import { IoMdClose } from "react-icons/io"; -import { IoChevronForwardSharp } from "react-icons/io5"; +// import Cookies from "js-cookie"; +// import React, { useState } from "react"; +// import { FaBars } from "react-icons/fa"; +// import { IoMdClose } from "react-icons/io"; +// import { Link, useLocation, useNavigate } from "react-router-dom"; + +// import ClickAwayListener from "../../utils/ClickAwayListener"; +// import "./Navbar.css"; + +// const Navbar = () => { +// const navigate = useNavigate(); +// const location = useLocation(); + +// const [isNavbarOpen, setIsNavbarOpen] = useState(false); +// const toggleNavbar = () => { +// setIsNavbarOpen(!isNavbarOpen); +// }; + +// const navigateToProfile = () => { +// if (Cookies.get("isLoggedIn")) { +// navigate( +// `/${ +// Cookies.get("usertype") === "individual" ? "user" : "club" +// }/${Cookies.get("username")}`, +// ); +// } +// }; + +// return ( +// <> +// setIsNavbarOpen(false)}> +// +// +// +// ); +// }; + +// export default Navbar; + +import React, { useEffect, useState } from "react"; +import { FaChevronRight } from "react-icons/fa6"; +import { GiHamburgerMenu } from "react-icons/gi"; +import { RxCross2 } from "react-icons/rx"; +import { Link, useLocation } from "react-router-dom"; +import navbarbrand from "../../assets/pictures/Navbar/NavbarImg.png"; import Button from "../Button/GlobalButton/Button"; -import ClickAwayListener from "../../utils/ClickAwayListener"; +import "./Navbar.css"; + +const Links = [ + { + name: "Home", + link: "/", + }, + { + name: "Clubs", + link: "/clubs", + }, + { + name: "Events", + link: "/events", + }, + { + name: "Shop", + link: "/shop", + }, +]; const Navbar = () => { - const navigate = useNavigate(); const location = useLocation(); + const [windowWidth, setWindowWidth] = useState(window.innerWidth); const [isNavbarOpen, setIsNavbarOpen] = useState(false); + const toggleNavbar = () => { setIsNavbarOpen(!isNavbarOpen); }; - const navigateToProfile = () => { - if (Cookies.get("isLoggedIn")) { - navigate( - `/${ - Cookies.get("usertype") === "individual" ? "user" : "club" - }/${Cookies.get("username")}`, - ); - } - }; + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); return ( <> - setIsNavbarOpen(false)}> - - + )} + ); }; diff --git a/src/constants/Auth.js b/src/constants/Auth.js index b96f8508..86cb95b8 100644 --- a/src/constants/Auth.js +++ b/src/constants/Auth.js @@ -1,4 +1,4 @@ export const userTypeOptions = [ - { value: "individual", label: "Individual (You are a person)" }, - { value: "club", label: "Organization (You are a Charity/Club/NGO)" }, + { value: "individual", label: "Individual (Person)" }, + { value: "club", label: "Organization (Charity/Club/NGO)" }, ]; diff --git a/src/constants/AuthSchema.js b/src/constants/AuthSchema.js new file mode 100644 index 00000000..338eefe9 --- /dev/null +++ b/src/constants/AuthSchema.js @@ -0,0 +1,25 @@ +import { z } from "zod"; + +export const signupSchema = z.object({ + email: z.string().email({ + message: "Please enter a valid email address.", + }), + password: z.string().min(8, { + message: "Password must be at least 8 characters long.", + }), + firstName: z.string().min(2, { + message: "First name must be at least 2 characters long.", + }), + lastName: z.string().min(2, { + message: "Last name must be at least 2 characters long.", + }), +}); + +export const signInSchema = z.object({ + email: z.string().email({ + message: "Please enter a valid email address.", + }), + password: z.string().min(8, { + message: "Password must be at least 8 characters long.", + }), +}); diff --git a/src/pages/Auth/SignIn.jsx b/src/pages/Auth/SignIn.jsx new file mode 100644 index 00000000..41b5d79b --- /dev/null +++ b/src/pages/Auth/SignIn.jsx @@ -0,0 +1,139 @@ +import { zodResolver } from "@hookform/resolvers/zod"; +import React from "react"; +import { useForm } from "react-hook-form"; +import { FcGoogle } from "react-icons/fc"; +import { useNavigate } from "react-router-dom"; +import rightabstract from "../../assets/pictures/authpages/authbanner.png"; +import Button from "../../components/Button/GlobalButton/Button"; +import { signInSchema } from "../../constants/AuthSchema"; +import { GoogleAuth } from "../../service/MilanApi"; +import "./index.css"; + +const SignIn = () => { + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: zodResolver(signInSchema), + }); + + const navigate = useNavigate(); + + const handleGoogle = async () => { + const response = await GoogleAuth(); + window.location.href = response; + }; + + const handleNavigatePages = () => { + navigate( + window.location.pathname.includes("signup") + ? "/auth/login" + : "/auth/signup", + ); + }; + + return ( +
+
+
+

Login

+ +
console.log(data))} + className="auth_form" + > +
+ + + {errors.email?.message &&

{errors.email?.message}

} +
+ +
+ + + {errors.password?.message &&

{errors.password?.message}

} +
+ + + +
+
+ OR +
+
+ +
+ + + +
+
+
+ +
+
+ + + +
+ +
+
+
+ ); +}; + +export default SignIn; diff --git a/src/pages/Auth/SignUp.jsx b/src/pages/Auth/SignUp.jsx new file mode 100644 index 00000000..a0807236 --- /dev/null +++ b/src/pages/Auth/SignUp.jsx @@ -0,0 +1,194 @@ +import { zodResolver } from "@hookform/resolvers/zod"; +import React from "react"; +import { useForm } from "react-hook-form"; +import { FaChevronDown } from "react-icons/fa"; +import { FcGoogle } from "react-icons/fc"; +import { useNavigate } from "react-router-dom"; +import rightabstract from "../../assets/pictures/authpages/authbanner.png"; +import Button from "../../components/Button/GlobalButton/Button"; +import { userTypeOptions } from "../../constants/Auth"; +import { signupSchema } from "../../constants/AuthSchema"; +import { GoogleAuth } from "../../service/MilanApi"; +import "./index.css"; + +const SignUp = () => { + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: zodResolver(signupSchema), + }); + + const navigate = useNavigate(); + + const handleGoogle = async () => { + const response = await GoogleAuth(); + window.location.href = response; + }; + + const handleNavigatePages = () => { + navigate( + window.location.pathname.includes("signup") + ? "/auth/login" + : "/auth/signup", + ); + }; + + return ( +
+
+
+

Sign Up

+ +
+
+ + +
+
+ +
console.log(data))} + className="auth_form" + > +
+
+ + + {errors.firstName?.message && ( +

{errors.firstName?.message}

+ )} +
+ +
+ + + {errors.lastName?.message &&

{errors.lastName?.message}

} +
+
+ +
+ + + {errors.email?.message &&

{errors.email?.message}

} +
+ +
+ + + {errors.password?.message &&

{errors.password?.message}

} +
+ + + +
+
+ OR +
+
+ +
+ + + +
+
+
+ +
+
+ + + +
+ +
+
+
+ ); +}; + +export default SignUp; diff --git a/src/pages/Auth/AuthLogin.jsx b/src/pages/Auth/[TBD]AuthLogin.jsx similarity index 99% rename from src/pages/Auth/AuthLogin.jsx rename to src/pages/Auth/[TBD]AuthLogin.jsx index b167c4fc..7ba28364 100644 --- a/src/pages/Auth/AuthLogin.jsx +++ b/src/pages/Auth/[TBD]AuthLogin.jsx @@ -1,12 +1,12 @@ import { useState } from "react"; -import { LoginUser } from "../../service/MilanApi"; import { Helmet } from "react-helmet-async"; +import { FiEye, FiEyeOff } from "react-icons/fi"; import { ToastContainer } from "react-toastify"; +import AuthButton from "../../components/Button/AuthButton/AuthButton"; import TopButton from "../../components/Button/AuthButton/TopButton"; -import { FiEye, FiEyeOff } from "react-icons/fi"; -import "./AuthPage.css"; import { useFormLogic } from "../../hooks/useFormLogic"; -import AuthButton from "../../components/Button/AuthButton/AuthButton"; +import { LoginUser } from "../../service/MilanApi"; +import "./[TBD]AuthPage.css"; const AuthLogin = () => { const { formState, handleChange, handleSubmit } = useFormLogic( diff --git a/src/pages/Auth/AuthPage.css b/src/pages/Auth/[TBD]AuthPage.css similarity index 85% rename from src/pages/Auth/AuthPage.css rename to src/pages/Auth/[TBD]AuthPage.css index 917e7ffc..19c23173 100644 --- a/src/pages/Auth/AuthPage.css +++ b/src/pages/Auth/[TBD]AuthPage.css @@ -1,307 +1,308 @@ -.authpage_parent { - display: flex; - - flex-direction: row-reverse; - padding: 1rem 1rem; - max-width: 100vw; - max-height: 100vh; - min-height: 100vh; - gap: 2rem; - overflow: hidden; -} - -.authpage_leftdiv { - flex-grow: 1; - width: 50%; - padding-top: 15px; - padding-left: 15px; - position: relative; - border-radius: 15px; - background-image: url(../../assets/pictures/authpages/authbannerimg.webp); - background-position: center; - background-size: cover; - background-repeat: no-repeat; -} - -.authpage_leftdiv>img { - width: 100%; - border-radius: 15px; - height: 100%; - object-fit: contain; -} - -.authpage_rightdiv { - flex-grow: 1; - width: 50%; - font-family: "Poppins", sans-serif; - overflow-y: scroll; - padding-top: 2rem; - position: relative; - padding-left: 6rem; - padding-right: 6rem; -} - -.authpage_rightdiv::-webkit-scrollbar-thumb { - background-color: #e2695900; -} - -.authpage_floatingbtn_div { - display: flex; - gap: 1rem; - flex-wrap: wrap; -} - -.authpage_floatingbtn { - background-color: #000000; - color: white; - border-radius: 10px; - font-size: 15px !important; - font-family: "Poppins", sans-serif; - width: 250px; -} - -.authpage_googlebtn { - background-color: #000000; - color: white; - border-radius: 10px; - font-size: 15px !important; - font-family: "Poppins", sans-serif; - width: 250px; -} - -.authpage_googlebtnleft { - z-index: 1; - background-color: #000000; - color: white; - border-radius: 10px; - font-size: 15px !important; - font-family: "Poppins", sans-serif; - width: 250px; -} - -.authpage_floatingbtn:hover, -.authpage_googlebtn:hover { - background-color: #000000; - color: white; -} - -.authpage_goback { - left: 7rem; - width: auto; -} - -.authform { - margin-bottom: 20px; - padding-left: 20px; - width: 100%; -} - -.authform>h1 { - font-size: 35px; - font-weight: 600; - color: #000000; - margin-bottom: 1rem; - margin-top: 2rem; -} - -.authform_container { - margin-top: 30px; -} - -.auth_passworddiv>.authform_container, -.auth_namediv>.authform_container { - margin-top: 10px; -} - -.auth_label { - font-family: "Poppins", sans-serif; - margin-bottom: 5px; - font-size: 1rem; -} - -.authform_container>input { - font-size: 1.1rem; - color: #000000; -} - -.authform_container>input:focus, -.authform_container>textarea:focus { - box-shadow: none; - border: 1.2px solid #e26959 !important; -} - -.authform_container>input::placeholder, -textarea::placeholder { - font-family: "Poppins", sans-serif; - font-size: 10px !important; -} - -.auth_namediv>.authform_container>input[name="name"] { - width: 100%; -} - -.auth_passworddiv, -.auth_namediv { - display: flex; - justify-content: space-between; -} - -.auth_passworddiv>div, -.auth_namediv>div { - width: 48%; -} - -.authpage_mediumchangebtn { - display: none; -} - -.authpage_error-div { - font-size: 0.8rem; - color: red; -} - -.authpage_error-message { - margin-top: 5px; -} - -.separator_header { - font-size: 1.4rem; - font-weight: 600; - color: #000000; - margin-bottom: 1rem; - font-family: "Poppins", sans-serif; -} - -@media screen and (max-width: 1200px) { - .authpage_goback { - left: 4rem; - } - - .authpage_rightdiv { - padding-left: 3rem; - padding-right: 3rem; - } -} - -.toggle-button { - border: none; - background: none; - outline: none; - cursor: pointer; - float: right; - margin-top: -3.25rem; - margin-right: 0.9rem; -} - -@media screen and (max-width: 1000px) { - .authpage_goback { - left: 3rem; - } - - .authpage_rightdiv { - padding-left: 2rem; - padding-right: 2rem; - } -} - -@media screen and (max-width: 900px) { - .authpage_goback { - left: 2rem; - } - - .authpage_rightdiv { - padding-left: 1rem; - padding-right: 1rem; - } -} - -@media screen and (max-width: 800px) { - .authpage_leftdiv { - display: none; - } - - .authpage_goback { - left: 3rem; - } - - .authpage_rightdiv { - padding-left: 4rem; - padding-right: 4rem; - } - - .authpage_mediumchangebtn { - display: block; - font-family: "Poppins", sans-serif; - font-size: 17px; - } - - .authpage_mediumchangebtn>span { - font-weight: 600; - cursor: pointer; - } -} - -@media screen and (max-width: 600px) { - .authpage_goback { - left: 2rem; - } - - .authpage_rightdiv { - padding-left: 3rem; - padding-right: 3rem; - } - - .auth_passworddiv, - .auth_namediv { - display: block; - justify-content: space-between; - } - - .auth_passworddiv>div, - .auth_namediv>div { - width: 100%; - } -} - -@media screen and (max-width: 500px) { - .authform { - padding-left: 0px; - } - - .authform>h1 { - font-size: 30px; - font-weight: 600; - color: #000000; - text-align: left; - line-height: 1; - } - - .authpage_goback { - left: 1rem; - } - - .authpage_rightdiv { - padding-left: 2rem; - padding-right: 2rem; - } - - .authform_container>textarea { - height: 80px; - } -} - -.user-type-dropdown { - display: flex; - align-items: center; - position: relative; - width: 100%; - font-size: 16px; - font-family: "Poppins", sans-serif; -} - -.dropdown-icon { - position: absolute; - right: 10px; - top: 40%; - transform: translateY(-50%); -} \ No newline at end of file +.authpage_parent { + display: flex; + + flex-direction: row-reverse; + padding: 1rem 1rem; + max-width: 100vw; + max-height: 100vh; + min-height: 100vh; + gap: 2rem; + overflow: hidden; +} + +.authpage_leftdiv { + flex-grow: 1; + width: 50%; + padding-top: 15px; + padding-left: 15px; + position: relative; + border-radius: 15px; + background-image: url(../../assets/pictures/authpages/authbannerimg.webp); + background-position: center; + background-size: cover; + background-repeat: no-repeat; +} + +.authpage_leftdiv > img { + width: 100%; + border-radius: 15px; + height: 100%; + object-fit: contain; +} + +.authpage_rightdiv { + flex-grow: 1; + width: 50%; + font-family: "Poppins", sans-serif; + overflow-y: scroll; + padding-top: 2rem; + position: relative; + padding-left: 6rem; + padding-right: 6rem; +} + +.authpage_rightdiv::-webkit-scrollbar-thumb { + background-color: #e2695900; +} + +.authpage_floatingbtn_div { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +.authpage_floatingbtn { + background-color: #000000; + color: white; + border-radius: 10px; + font-size: 15px !important; + font-family: "Poppins", sans-serif; + width: 250px; +} + +.authpage_googlebtn { + background-color: #000000; + color: white; + border-radius: 10px; + font-size: 15px !important; + font-family: "Poppins", sans-serif; + width: 250px; +} + +.authpage_googlebtnleft { + z-index: 1; + background-color: #000000; + color: white; + border-radius: 10px; + font-size: 15px !important; + font-family: "Poppins", sans-serif; + width: 250px; +} + +.authpage_floatingbtn:hover, +.authpage_googlebtn:hover { + background-color: #000000; + color: white; +} + +.authpage_goback { + left: 7rem; + width: auto; +} + +.authform { + margin-bottom: 20px; + padding-left: 20px; + width: 100%; +} + +.authform > h1 { + font-size: 35px; + font-weight: 600; + color: #000000; + margin-bottom: 1rem; + margin-top: 2rem; +} + +.authform_container { + margin-top: 30px; +} + +.auth_passworddiv > .authform_container, +.auth_namediv > .authform_container { + margin-top: 10px; +} + +.auth_label { + font-family: "Poppins", sans-serif; + margin-bottom: 5px; + font-size: 1rem; +} + +.authform_container > input { + font-size: 1.1rem; + color: #000000; + background-color: rgba(251, 249, 246, 0.882); +} + +.authform_container > input:focus, +.authform_container > textarea:focus { + box-shadow: none; + border: 1.2px solid #e26959 !important; +} + +.authform_container > input::placeholder, +textarea::placeholder { + font-family: "Poppins", sans-serif; + font-size: 10px !important; +} + +.auth_namediv > .authform_container > input[name="name"] { + width: 100%; +} + +.auth_passworddiv, +.auth_namediv { + display: flex; + justify-content: space-between; +} + +.auth_passworddiv > div, +.auth_namediv > div { + width: 48%; +} + +.authpage_mediumchangebtn { + display: none; +} + +.authpage_error-div { + font-size: 0.8rem; + color: red; +} + +.authpage_error-message { + margin-top: 5px; +} + +.separator_header { + font-size: 1.4rem; + font-weight: 600; + color: #000000; + margin-bottom: 1rem; + font-family: "Poppins", sans-serif; +} + +@media screen and (max-width: 1200px) { + .authpage_goback { + left: 4rem; + } + + .authpage_rightdiv { + padding-left: 3rem; + padding-right: 3rem; + } +} + +.toggle-button { + border: none; + background: none; + outline: none; + cursor: pointer; + float: right; + margin-top: -3.25rem; + margin-right: 0.9rem; +} + +@media screen and (max-width: 1000px) { + .authpage_goback { + left: 3rem; + } + + .authpage_rightdiv { + padding-left: 2rem; + padding-right: 2rem; + } +} + +@media screen and (max-width: 900px) { + .authpage_goback { + left: 2rem; + } + + .authpage_rightdiv { + padding-left: 1rem; + padding-right: 1rem; + } +} + +@media screen and (max-width: 800px) { + .authpage_leftdiv { + display: none; + } + + .authpage_goback { + left: 3rem; + } + + .authpage_rightdiv { + padding-left: 4rem; + padding-right: 4rem; + } + + .authpage_mediumchangebtn { + display: block; + font-family: "Poppins", sans-serif; + font-size: 17px; + } + + .authpage_mediumchangebtn > span { + font-weight: 600; + cursor: pointer; + } +} + +@media screen and (max-width: 600px) { + .authpage_goback { + left: 2rem; + } + + .authpage_rightdiv { + padding-left: 3rem; + padding-right: 3rem; + } + + .auth_passworddiv, + .auth_namediv { + display: block; + justify-content: space-between; + } + + .auth_passworddiv > div, + .auth_namediv > div { + width: 100%; + } +} + +@media screen and (max-width: 500px) { + .authform { + padding-left: 0px; + } + + .authform > h1 { + font-size: 30px; + font-weight: 600; + color: #000000; + text-align: left; + line-height: 1; + } + + .authpage_goback { + left: 1rem; + } + + .authpage_rightdiv { + padding-left: 2rem; + padding-right: 2rem; + } + + .authform_container > textarea { + height: 80px; + } +} + +.user-type-dropdown { + display: flex; + align-items: center; + position: relative; + width: 100%; + font-size: 16px; + font-family: "Poppins", sans-serif; +} + +.dropdown-icon { + position: absolute; + right: 10px; + top: 40%; + transform: translateY(-50%); +} diff --git a/src/pages/Auth/AuthSignup.jsx b/src/pages/Auth/[TBD]AuthSignup.jsx similarity index 99% rename from src/pages/Auth/AuthSignup.jsx rename to src/pages/Auth/[TBD]AuthSignup.jsx index 8dcb25b5..dc580725 100644 --- a/src/pages/Auth/AuthSignup.jsx +++ b/src/pages/Auth/[TBD]AuthSignup.jsx @@ -1,25 +1,25 @@ -import { useState, useRef, useEffect } from "react"; -import { RegisterUser } from "../../service/MilanApi"; +import { useEffect, useRef, useState } from "react"; import { Helmet } from "react-helmet-async"; +import { FaChevronDown } from "react-icons/fa"; +import { FiEye, FiEyeOff } from "react-icons/fi"; +import Select from "react-select"; import { ToastContainer } from "react-toastify"; +import countries from "../../assets/data/CountryList"; +import AuthButton from "../../components/Button/AuthButton/AuthButton"; import TopButton from "../../components/Button/AuthButton/TopButton"; -import { FiEye, FiEyeOff } from "react-icons/fi"; -import { FaChevronDown } from "react-icons/fa"; -import "./AuthPage.css"; +import { userTypeOptions } from "../../constants/Auth"; import { clubInitialFormState, individualInitialFormState, useFormLogic, } from "../../hooks/useFormLogic"; -import Select from "react-select"; -import countries from "../../assets/data/CountryList"; -import AuthButton from "../../components/Button/AuthButton/AuthButton"; +import { RegisterUser } from "../../service/MilanApi"; import { confirmPasswordToggle, passwordToggle, } from "../../utils/Auth/PasswordToggle"; import { renderErrorMessage } from "../../utils/Auth/RenderErrorMessage"; -import { userTypeOptions } from "../../constants/Auth"; +import "./[TBD]AuthPage.css"; const AuthSignup = () => { const [userType, setUserType] = useState("individual"); diff --git a/src/pages/Auth/index.css b/src/pages/Auth/index.css new file mode 100644 index 00000000..f23447bd --- /dev/null +++ b/src/pages/Auth/index.css @@ -0,0 +1,215 @@ +.signup_parent { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; + padding: 0 20.5px; + overflow-y: hidden; + height: 100vh; +} + +.signup_container { + width: 100%; + max-width: 900px; + background-color: white; + padding: 2rem; + border-radius: 10px; + -webkit-box-shadow: 0px 0px 24px -2px rgba(255, 91, 49, 0.56); + -moz-box-shadow: 0px 0px 24px -2px rgba(255, 91, 49, 0.56); + box-shadow: 0px 0px 24px -2px rgba(255, 91, 49, 0.56); + display: flex; + + gap: 4rem; +} + +.signup_container_left { + display: flex; + flex-direction: column; + row-gap: 20px; +} + +.signup_container_left > h1 { + font-size: 35px; + font-weight: 700; + color: var(--Brand-brand-900, #6b2615); + margin-bottom: 1rem; + font-family: "Montserrat", sans-serif; +} + +.auth_dropdown { + display: flex; + align-items: center; + position: relative; + width: 100%; + font-size: 16px; + font-family: "Poppins", sans-serif; +} + +.auth_dropdown:focus { + outline: none; + box-shadow: none; +} + +.auth_dropdownicon { + position: absolute; + right: 10px; + top: 40%; + transform: translateY(-50%); +} + +.auth_form { + display: flex; + flex-direction: column; + gap: 1.2rem; + width: 100%; +} + +.auth_element { + display: flex; + flex-direction: column; + position: relative; + width: 100%; +} + +.auth_label { + font-family: "Outfit", sans-serif; + font-size: 17px; + font-weight: 400; + margin-bottom: 3px; + color: #6b2615; +} + +.auth_input { + display: block; + width: 100%; + padding: 0.375rem 0.75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #212529; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0.375rem; + transition: + border-color 0.15s ease-in-out, + box-shadow 0.15s; +} + +.auth_input:focus { + outline: none; + box-shadow: none; + border-color: #ff5b31; +} + +.auth_input::placeholder, +textarea::placeholder { + font-family: "Poppins", sans-serif; + font-size: 10px !important; +} + +.auth_submit { + border-radius: 0.375rem; + width: 100%; +} + +.signup_rightabstract { + width: 350px; + flex-grow: 1; + position: relative; +} + +.signup_rightabstract > img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 12px; +} + +.signup_topbtn { + position: absolute; + top: 12px; + left: 12px; + display: flex; + flex-direction: column; + row-gap: 7px; +} + +.authpage_topbtn { + background-color: #000000; + color: white; + border-radius: 6px; + font-size: 15px; + font-family: "Outfit", sans-serif; + display: flex; + align-items: center; + width: 100%; +} + +.authpage_topbtn:hover { + background-color: #000000; + color: white; +} + +.signup_or { + display: none; +} + +.auth_form > .signup_topbtn { + display: none; +} + +@media screen and (max-width: 450px) { + .signup_parent { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; + padding: 2rem 1.5rem; + overflow-y: scroll; + height: 100vh; + background-color: white; + } + + .signup_container { + width: 100%; + max-width: 900px; + box-shadow: none; + padding: 0; + } + + .signup_container_left { + width: 100%; + } + + .signup_rightabstract { + display: none; + } + + .signup_or { + display: flex; + gap: 10px; + align-items: center; + font-family: "Poppins", sans-serif; + } + .signup_or > hr { + width: 100%; + } + + .signup_topbtn { + position: relative; + top: 0; + left: 0; + display: flex !important; + } + + .authpage_topbtn { + justify-content: center; + font-size: 17px; + } +} diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 3f8c86d8..b2d44f84 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,13 +1,13 @@ +import Cookies from "js-cookie"; import React, { useEffect } from "react"; import { Helmet } from "react-helmet-async"; +import { ToastContainer } from "react-toastify"; +import Landing from "../components/Banners/Landing.jsx"; +import Milaninfobanner from "../components/Banners/Milaninfobanner.jsx"; +import Footer from "../components/Footer/Footer.jsx"; import Navbar from "../components/Navbar/Navbar.jsx"; import { successCallback } from "../service/MilanApi.js"; import { showErrorToast, showSuccessToast } from "../utils/Toasts.js"; -import Cookies from "js-cookie"; -import { ToastContainer } from "react-toastify"; -import HomeBanner from "../components/Banners/HomeBanner"; -import Milaninfobanner from "../components/Banners/Milaninfobanner"; -import Footer from "../components/Footer/Footer"; const Home = () => { const handleToken = async () => { @@ -41,7 +41,7 @@ const Home = () => { - +