diff --git a/index.html b/index.html index dd36d26f..534d74ea 100644 --- a/index.html +++ b/index.html @@ -61,11 +61,6 @@ - - - - - Milan diff --git a/package-lock.json b/package-lock.json index 9012eaec..a4698ba3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,9 @@ "@mui/x-date-pickers": "^6.19.5", "@mui/x-date-pickers-pro": "^6.19.5", "@reduxjs/toolkit": "^2.1.0", + "@studio-freight/lenis": "^1.0.33", + "@studio-freight/react-lenis": "^0.0.38", + "@tanstack/react-query": "^5.28.9", "@testing-library/jest-dom": "^5.16.1", "@testing-library/user-event": "^14.4.3", "aos": "^2.3.4", @@ -4388,6 +4391,55 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@studio-freight/hamo": { + "version": "0.6.28", + "resolved": "https://registry.npmjs.org/@studio-freight/hamo/-/hamo-0.6.28.tgz", + "integrity": "sha512-LVXYJwPToVa4ZVIbFnicg8bmZF8xWebbdtx10/1HAQAjN8xGsTWAdc3BmUUOHtLWFvNJNLSuwdX24njrp7LF7g==", + "dependencies": { + "@studio-freight/tempus": "^0.0.38", + "just-debounce-it": "^3.2.0", + "nanoevents": "^9.0.0", + "zustand": "^4.4.7" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, + "node_modules/@studio-freight/lenis": { + "version": "1.0.42", + "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.42.tgz", + "integrity": "sha512-HJAGf2DeM+BTvKzHv752z6Z7zy6bA643nZM7W88Ft9tnw2GsJSp6iJ+3cekjyMIWH+cloL2U9X82dKXgdU8kPg==" + }, + "node_modules/@studio-freight/react-lenis": { + "version": "0.0.38", + "resolved": "https://registry.npmjs.org/@studio-freight/react-lenis/-/react-lenis-0.0.38.tgz", + "integrity": "sha512-Jyc4d/RfP9WFliQc01eT7V+L0hD+JoYvalyu2MAa0X/p47fYFiwKmT6N5szZArvrJIGOYj5G8rvDYeaD/vz6IA==", + "dependencies": { + "@studio-freight/hamo": "^0.6.22", + "@studio-freight/lenis": "^1.0.28", + "clsx": "^2.0.0", + "prop-types": "^15.8.1", + "zustand": "^4.4.6" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, + "node_modules/@studio-freight/react-lenis/node_modules/clsx": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@studio-freight/tempus": { + "version": "0.0.38", + "resolved": "https://registry.npmjs.org/@studio-freight/tempus/-/tempus-0.0.38.tgz", + "integrity": "sha512-AO1O2fEmfUqWGjEofmPNMQRlwgZ96eB5OFsVJjeH8/RKd1/Yf4zbPnXO+r2TD4aueA6X9JRCJU2GUprI9+m8uQ==" + }, "node_modules/@surma/rollup-plugin-off-main-thread": { "version": "2.2.3", "license": "Apache-2.0", @@ -4643,6 +4695,30 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@tanstack/query-core": { + "version": "5.28.9", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.28.9.tgz", + "integrity": "sha512-hNlfCiqZevr3GRVPXS3MhaGW5hjcxvCsIQ4q6ff7EPlvFwYZaS+0d9EIIgofnegDaU2BbCDlyURoYfRl5rmzow==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.28.9", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.28.9.tgz", + "integrity": "sha512-vwifBkGXsydsLxFOBMe3+f8kvtDoqDRDwUNjPHVDDt+FoBetCbOWAUHgZn4k+CVeZgLmy7bx6aKeDbe3e8koOQ==", + "dependencies": { + "@tanstack/query-core": "5.28.9" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/@testing-library/dom": { "version": "9.3.3", "license": "MIT", @@ -13044,6 +13120,11 @@ "node": ">=4.0" } }, + "node_modules/just-debounce-it": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/just-debounce-it/-/just-debounce-it-3.2.0.tgz", + "integrity": "sha512-WXzwLL0745uNuedrCsCs3rpmfD6DBaf7uuVwaq98/8dafURfgQaBsSpjiPp5+CW6Vjltwy9cOGI6qE71b3T8iQ==" + }, "node_modules/keyv": { "version": "4.5.3", "license": "MIT", @@ -13994,6 +14075,14 @@ "thenify-all": "^1.0.0" } }, + "node_modules/nanoevents": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/nanoevents/-/nanoevents-9.0.0.tgz", + "integrity": "sha512-X8pU7IOpgKXVLPxYUI55ymXc8XuBE+uypfEyEFBtHkD1EX9KavYTVc+vXZHFyHKzA1TaZoVDqklLdQBBrxIuAw==", + "engines": { + "node": "^18.0.0 || >=20.0.0" + } + }, "node_modules/nanoid": { "version": "3.3.6", "funding": [ @@ -20715,8 +20804,9 @@ } }, "node_modules/zustand": { - "version": "4.4.1", - "license": "MIT", + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz", + "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==", "dependencies": { "use-sync-external-store": "1.2.0" }, @@ -20725,7 +20815,7 @@ }, "peerDependencies": { "@types/react": ">=16.8", - "immer": ">=9.0", + "immer": ">=9.0.6", "react": ">=16.8" }, "peerDependenciesMeta": { diff --git a/package.json b/package.json index 32d8e86e..bfb6aecb 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,9 @@ "@mui/x-date-pickers": "^6.19.5", "@mui/x-date-pickers-pro": "^6.19.5", "@reduxjs/toolkit": "^2.1.0", + "@studio-freight/lenis": "^1.0.33", + "@studio-freight/react-lenis": "^0.0.38", + "@tanstack/react-query": "^5.28.9", "@testing-library/jest-dom": "^5.16.1", "@testing-library/user-event": "^14.4.3", "aos": "^2.3.4", diff --git a/src/App.jsx b/src/App.jsx index 1a6cfae2..bd89bbf5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,31 +1,38 @@ import { LocalizationProvider } from "@mui/x-date-pickers"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import React from "react"; import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; +import { ToastContainer } from "react-toastify"; import { BacktoTop } from "./components/shared"; import "./styles/App.css"; import "./styles/Globals.scss"; import routesConfig from "./utils/routesConfig.jsx"; const App = () => { + const queryClient = new QueryClient(); + return ( - -
- - - {routesConfig.map((route, index) => ( - - ))} - - - -
- + + +
+ + + + {routesConfig.map((route, index) => ( + + ))} + + + +
+ + ); }; diff --git a/src/assets/pictures/Navbar/MilanNavBrand.svg b/src/assets/pictures/Navbar/MilanNavBrand.svg index a3831af1..64906fbe 100644 --- a/src/assets/pictures/Navbar/MilanNavBrand.svg +++ b/src/assets/pictures/Navbar/MilanNavBrand.svg @@ -1 +1,14 @@ - \ No newline at end of file + + + + + + + + + + + + + + diff --git a/src/assets/pictures/Navbar/invoice.html b/src/assets/pictures/Navbar/invoice.html new file mode 100644 index 00000000..d84659cf --- /dev/null +++ b/src/assets/pictures/Navbar/invoice.html @@ -0,0 +1,174 @@ + + + + + + + Document + + + + + + +
+
+
+ +

Invoice Number: EDI123456

+
+
+
+
+ Details +
+ Invoice Number......EDI123456 +
+ Invoice Date...........21 Mar 2024 +
+ Billing ID...............4023-9583-9133 +
+ Domain Name........edilitics.com +
+ Subscription...........Mar-Apr 2024 (1 Month) +
+ Purchased Plan......Teams Full Suite (4 users) +
+
+ Payment Summary +
+ Total Amount: $269.00/- +
+ Paid Amount: $269.00/- +
+ Bal Amount: $0.0 +
+
+ Card Type: HDFC (***1234) +
+ Date Paid On: 21 March 2024 +
+
+
+
+
+ Bill To +
+ Raoul Pinto +
+ Decision Sciences & Analytics Private Limited +
+ G-3, B-wing, 3rd Floor +
+ Annapurna CHSL, 1st Road, Santacruz East +
+ Mumbai, Maharashtra 400055 +
+ India +
+ Place of Supply/State Code: 27 +
+
+
+
+ + + + + + + + + + + + + + + + + +
DescriptionUnit PriceQuantityAmount
Teams Full Suite
Modules - Replicate | Transform | Visualize		$1004$400
+
+
+ Total Amount: $400 +
+
+
+

+ Edilitics | Decision Sciences & Analytics Private Limited +
+ G-3, B-wing, 3rd Floor + Annapurna CHSL, 1st Road, Santacruz East + Mumbai, Maharashtra 400055 + India +
+ GSTIN: 06AACCG0527D1Z8 +
+ PAN: AACCG0527D +
+
+ + + \ No newline at end of file diff --git a/src/components/private/events/card/EventsCard.jsx b/src/components/private/events/card/EventsCard.jsx index 20a2733a..2239e5dc 100644 --- a/src/components/private/events/card/EventsCard.jsx +++ b/src/components/private/events/card/EventsCard.jsx @@ -1,11 +1,9 @@ /* eslint-disable no-unused-vars */ import { CiCalendar, CiLocationOn } from "react-icons/ci"; -import { PiBellRingingBold } from "react-icons/pi"; import { useSelector } from "react-redux"; import { Link, useNavigate } from "react-router-dom"; import { showErrorToast } from "../../../../utils/Toasts"; import getFormattedDate from "../../../../utils/getFormattedDate"; -import { Button } from "../../../shared"; import "./EventsCard.scss"; const EventsCard = ({ event }) => { @@ -101,31 +99,21 @@ const EventsCard = ({ event }) => {

200+ Going

- {window.innerWidth > 500 ? ( - - ) : ( - - - - - - )} + + + diff --git a/src/components/private/events/card/EventsCard.scss b/src/components/private/events/card/EventsCard.scss index a118defb..2d9b1482 100644 --- a/src/components/private/events/card/EventsCard.scss +++ b/src/components/private/events/card/EventsCard.scss @@ -63,7 +63,7 @@ h1 { align-self: start; - color: var(--Neutral-G900, #3f3836); + color: var(--secondary); text-align: center; font-family: var(--poppins); font-size: 20px; @@ -158,6 +158,7 @@ font-family: var(--outfit); font-size: 15px; font-weight: 500; + color: var(--secondary); } } diff --git a/src/components/private/events/hosted/HosedEvents.scss b/src/components/private/events/hosted/HosedEvents.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/components/private/events/hosted/HostedEvents.jsx b/src/components/private/events/hosted/HostedEvents.jsx new file mode 100644 index 00000000..e69de29b diff --git a/src/components/private/landing/Landing.jsx b/src/components/private/landing/Landing.jsx index 0d4364fb..6a2deca9 100644 --- a/src/components/private/landing/Landing.jsx +++ b/src/components/private/landing/Landing.jsx @@ -1,6 +1,5 @@ import Cookies from "js-cookie"; import React, { useEffect, useState } from "react"; -import Marquee from "react-fast-marquee"; import Vector from "../../../assets/pictures/Banner/Vector.png"; import { Button } from "../../shared"; import "./Landing.scss"; @@ -22,65 +21,78 @@ const Landing = () => { <>
-
- - - - - - - - + {windowWidth > 430 ? ( + <> +

We connect NGOs,

+

+ Charities and you. +

+ + ) : ( +

+ We connect NGOs, charities and you. +

+ )} + + {windowWidth > 430 ? ( +

+ Welcome to NGOWorld, a platform to connect and + support NGOs, charities and you to build a better tomorrow. +

+ ) : ( +

+ A platform for NGOs, charities, clubs and you to collaborate, grow + and build a better tomorrow. +

+ )} + +
+ {Cookies.get("isLoggedIn") ? ( + + ) : ( + + )} + +
+ +
+
+ + - - - - - {" "} - {windowWidth > 430 - ? "We are OpenSource, you can contribute too!" - : "We are OpenSource, contribute now !"}{" "} - + + +
+ Trusted by 300+ users. +
+
+
+ + ); +}; -

- 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. -

- )} +export default Landing; - +{ + /*
{ /> Sruti foundation
- - - {Cookies.get("isLoggedIn") ? ( - - ) : ( - - )} - - - ); -}; - -export default Landing; + */ +} diff --git a/src/components/private/landing/Landing.scss b/src/components/private/landing/Landing.scss index a4d729b3..80a48905 100644 --- a/src/components/private/landing/Landing.scss +++ b/src/components/private/landing/Landing.scss @@ -1,14 +1,17 @@ .landing_parent { - padding-top: 10rem; display: flex; flex-direction: column; - min-height: 90dvh; + min-height: 95dvh; + align-items: center; + justify-content: center; + justify-items: center; @media screen and (max-width: 500px) { - padding-top: 8rem; + padding-top: 0rem; height: auto; padding-left: 1rem; padding-right: 1rem; + min-height: 100dvh; } .Landing_bg { @@ -52,48 +55,57 @@ } } - h1 { - color: var(--Brand-brand-900, #6b2615); - text-align: center; - font-family: "Montserrat", sans-serif; - font-size: 3.5rem; - margin-top: 4rem; - font-style: normal; - font-weight: 800; - text-transform: capitalize; - z-index: 3; + .landing_body { + z-index: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + justify-items: center; - span { - color: var(--Brand-brand-500, #ff5b31); - } + h1 { + color: var(--Brand-brand-900, #6b2615); + text-align: center; + font-family: "Outfit", sans-serif; + font-size: 4.5rem; + line-height: 1; + font-weight: 900; + margin: 0; + z-index: 3; - @media screen and (max-width: 500px) { - font-size: 2.9rem; - margin-top: 4rem; + span { + color: var(--Brand-brand-500, #ff5b31); + } + + @media screen and (max-width: 500px) { + font-size: 2.7rem; + text-align: start; + } } - } - h2 { - color: var(--Brand-brand-900, #6b2615); - font-family: "Poppins", sans-serif; - font-size: 18px; - 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; + p { + color: var(--Brand-brand-900, #6b2615); + font-family: "Poppins", sans-serif; + font-size: 18px; + 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: 3rem; + z-index: 3; - span { - color: var(--Brand-brand-500, #ff5b31); - } + span { + font-weight: 600; + } - @media screen and (max-width: 500px) { - font-size: 17px; - width: 100%; + @media screen and (max-width: 500px) { + font-size: 17px; + width: 100%; + text-align: start; + } } } @@ -131,42 +143,110 @@ } } - .landing_signup { - border-radius: 50px; - padding: 0.7rem 1.5rem; - font-family: "Poppins", sans-serif; - font-size: 17px; - font-style: normal; - width: auto; - font-weight: 500; + .landing_ctadiv { display: flex; - justify-content: space-evenly; + gap: 0.8rem; align-items: center; - border: none; - gap: 10px; + justify-content: center; margin-top: 4rem; - margin: auto; - z-index: 3; - span { - font-size: 18px; - @media screen and (max-width: 500px) { + @media screen and (max-width: 500px) { + flex-direction: column; + + flex-direction: column-reverse; + align-items: start; + justify-content: start; + width: 100%; + } + + .landing_signup { + border-radius: 8px; + padding: 0.7rem 1.5rem; + font-family: "Poppins", sans-serif; + font-size: 17px; + font-style: normal; + width: auto; + font-weight: 500; + display: flex; + justify-content: space-evenly; + align-items: center; + border: none; + gap: 10px; + margin: auto; + z-index: 3; + + span { font-size: 18px; + @media screen and (max-width: 500px) { + font-size: 18px; + } + } + + &: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 screen and (max-width: 500px) { + width: auto; + margin: 0; } } - &: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; + .separator { + height: 46px; + border-left: 3px; + border-left-style: solid; + + @media screen and (max-width: 500px) { + display: none; + } } - @media screen and (max-width: 500px) { - margin-top: 4rem; - width: auto; + .landing_ctaimgdiv { + display: flex; + flex-direction: column; + + .landing_ctaimages { + display: flex; + align-items: center; + gap: 0px; + z-index: 3; + img { + width: 30px; + aspect-ratio: 1/1; + object-fit: cover; + border-radius: 50%; + z-index: 4; + + &:nth-of-type(2) { + margin-left: -10px; + z-index: 3; + } + + &:nth-of-type(3) { + margin-left: -10px; + z-index: 2; + } + + &:nth-of-type(4) { + margin-left: -10px; + z-index: 1; + } + } + } + + span { + font-size: 15px; + font-family: "Poppins", sans-serif; + font-weight: 500; + color: var(--Brand-brand-900, #6b2615); + z-index: 3; + } } } } diff --git a/src/components/shared/cards/club/ClubCard.jsx b/src/components/shared/cards/club/ClubCard.jsx index 205b636b..07b5f132 100644 --- a/src/components/shared/cards/club/ClubCard.jsx +++ b/src/components/shared/cards/club/ClubCard.jsx @@ -1,6 +1,5 @@ import { Link } from "react-router-dom"; import clubBanner from "../../../../assets/pictures/Banner/clubbanner.jpg"; -import Button from "../../buttons/globalbutton/Button"; import "./ClubCard.scss"; const ClubCard = ({ club }) => { @@ -33,31 +32,21 @@ const ClubCard = ({ club }) => {

200+ Members

- {window.innerWidth > 500 ? ( - - ) : ( - - - - - - )} + + + ); diff --git a/src/components/shared/cards/club/ClubCard.scss b/src/components/shared/cards/club/ClubCard.scss index 220bfa3e..d5158de4 100644 --- a/src/components/shared/cards/club/ClubCard.scss +++ b/src/components/shared/cards/club/ClubCard.scss @@ -11,6 +11,7 @@ box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1); width: 380px; transition: all 0.3s ease-in-out; + position: relative; @media screen and (max-width: 500px) { padding: 12px; @@ -63,10 +64,10 @@ h1 { align-self: stretch; - color: var(--Neutral-G900, #3f3836); + color: var(--secondary); text-align: center; font-family: var(--poppins); - font-size: 20px; + font-size: 20.5px; font-style: normal; font-weight: 600; line-height: normal; @@ -74,7 +75,7 @@ @media screen and (max-width: 500px) { text-align: left; - // truncate to 2 lines + display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; @@ -84,7 +85,7 @@ p { align-self: stretch; - color: var(--Neutral-G600, #625c5a); + color: var(--secondary); text-align: center; font-family: var(--outfit); font-size: 17px; @@ -92,6 +93,7 @@ font-weight: 400; line-height: normal; letter-spacing: 0.32px; + min-height: 45px; @media screen and (max-width: 500px) { text-align: left; @@ -100,6 +102,7 @@ -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; + min-height: auto; } } } @@ -118,10 +121,6 @@ align-items: center; gap: 10px; - // @media screen and (max-width: 500px) { - // display: none; - // } - img { width: 34px; height: 34px; @@ -149,9 +148,10 @@ justify-content: center; align-items: center; gap: 8px; - + color: var(--primary); border-radius: 6px; - + background-color: transparent; + border: 1px solid var(--primary); white-space: nowrap; font-family: var(--outfit) !important; font-weight: 400; diff --git a/src/components/shared/footer/Footer.css b/src/components/shared/footer/Footer.css deleted file mode 100644 index 09fe6c6b..00000000 --- a/src/components/shared/footer/Footer.css +++ /dev/null @@ -1,383 +0,0 @@ -.main-footer { - position: relative; - left: 0; - width: 100%; - overflow: visible; - clear: both; -} -.main-font { - font-family: poppins; -} - -.page-footer { - background-color: rgb(48, 47, 47); - padding: 30px 80px; - color: #fff; - margin-bottom: 0px; - position: relative; - width: 100%; - top: 45px; -} - -.ml-1 { - margin-left: 15px; -} - -.reportModalHeader > h1 { - font-family: "Inter",sans-serif; - color: #28183b; - font-size: 1.5rem; - font-weight: 600; -} - -.reportModal > h2 { - font-family: "Poppins"sans-serif; - color: #28183b; - font-size: 0.9rem; -} - -#reportForm { - font-family: "Poppins"sans-serif; - padding: 0; -} - -/* Overriding global (App.css) style of making placeholders transparent in desktop view */ - -#reportForm input::-webkit-input-placeholder, -#reportForm textarea::-webkit-input-placeholder { - /* Edge */ - color: #6b7280 !important; -} - -.btn-close:focus { - outline: 0; - box-shadow: none; - opacity: 1; -} - -.btn-hover { - margin: 20px; -} - -.links { - color: rgb(177, 177, 177); - text-decoration: none; -} -.links:hover { - color: rgb(231, 231, 231); -} - -.footer-text { - color: rgb(177, 177, 177); -} - -.footer-links { - line-height: 25px; -} - -.col2 { - position: relative; -} - -.button { - background-color: rgb(15, 127, 233); - color: #fff; -} - -.footer-copyright, -.copyright { - color: rgb(156, 156, 156); - text-decoration: none; -} - -.socials { - display: flex; - margin-top: 20px; - margin-bottom: 2px; -} -.headings { - font-family: Montserrat, sans-serif; -} -.social-btn { - margin: 0 5px; - border-radius: 100%; - width: 40px; - height: 40px; - display: flex; - justify-content: center; - align-items: center; - transition: all 0.3s ease-in; - cursor:pointer; -} -.social-btn:hover { - transform: scale(1.1); - border-radius: 100%; -} - -.social-btn i { - color: #ff725e; -} - -.twitter:hover { - background-color: #020202; -} -.github:hover { - background-color: black; -} -.fa-brands { - font-size: 20px; - border-radius: 100%; -} - -.cont-icon { - margin-top: 8px; -} - -.FaSquareXTwitter { - margin-top: 5px; - -} - -.github-icon{ - font-size: 1.55rem ; - color:#e26959; -} - -.twitter-icon{ - font-size: 1.55rem ; - color:#e26959; -} - -.FaGithub { - margin-top: 4px; -} - -.social-btn:hover i { - color: white; -} - -.join { - margin-top: 27px; - margin-left: -75px; - white-space: nowrap; -} - -.join-us ul li a { - transition: all 0.3s ease-in; -} - -.report { - width: 200px; - height: 50px; - border: none; - border-radius: 15px; - position: absolute; - bottom: 49px; - background-color: #27414d; - color: #fff; - font-family: Mulish; - font-style: normal; - font-weight: bold; -} - -.report:hover { - box-shadow: 0 2px 8px rgb(122, 122, 122); -} - -.rep { - margin: auto; - margin-top: 50px; - margin-bottom: 25px; -} - -.btn-report { - border-radius: 8px; - border: none; - background-color: #e26959; - padding: 10px 20px; - transition: all 0.3s ease-in; -} - -.btn-report:hover { - background-color: #fae0b4ff; - transform: scale(1.1); -} - -.btn-report span { - color: black; -} - -.btn-report i { - transition: all 0.3s ease-in; - color: black; -} - -.btn-report:hover i { - transform: rotate(90deg); -} - -.report img { - width: 20px; -} - -.top-img { - height: 25px; - position: relative; - left: 4%; -} - -.bottom-img { - position: relative; - right: 5%; -} -.col-md-3 { - width: 150px; -} -.ls { - margin-left: 200px; -} - -.btn-contact { - border-radius: 5px; - background-color: #9ac2fe; - border: none; - color: #424141; -} - -.btn-contact:hover { - transition-duration: 0.5s; - color: #000000; -} - -@media screen and (max-width: 1276px) { - .footer-links { - line-height: 40px !important; - } -} - -@media screen and (max-width: 896px) { - .footer-content { - flex-direction: column !important; - } - - .col1, - .col2 { - width: 100% !important; - } - - .footer-links { - display: none; - } - - .row2 { - margin: 0 !important; - } - - .report { - position: relative; - bottom: 0; - margin-top: 20px; - margin-bottom: 40px; - } - .join { - margin-left: 0px; - } -} - -@media screen and (max-width: 680px) { - .page-footer { - padding: 30px 28px !important; - } -} - -.form-control { - margin-bottom: 1rem; -} - -.footer_auth_text { - color: #d8d7d7; - margin-bottom: 2px; -} - -.footer_auth_text:hover { - color: #e26959; -} - -@media screen and (min-width: 526px) { - body { - overflow: unset; - } -} - -@media screen and (max-width: 525px) { - .reportModalHeader { - justify-content: center; - align-items: center; - } - - .reportModalHeader > h1 { - font-size: 1.2rem; - margin-left: 1.4rem; - /* margin-bottom: 0px; */ - flex: auto; - } -} - -@media only screen and (min-width: 767px) { - .social-icons-mobile { - display: none; - } -} - -@media only screen and (max-width: 767px) { - .footer-text { - text-align: justify; - font-size: 14px; - margin: 10px -20px; - } - - .social-icons { - text-align: center; - } - - .join-us { - text-align: center; - display: flex; - justify-content: center; - white-space: nowrap; - padding: 2px; - } - .join-us-list { - position: relative; - top: -10px; - } - .join { - margin: auto; - } -} -.underline-animation { - color: #e26959; - position: relative; - text-decoration: none; - transition: 0.3s ease-in-out; -} - -.underline-animation:hover { - color: #e26959; -} - -.underline-animation::after { - content: ""; - position: absolute; - left: 0; - bottom: -2px; - width: 100%; - height: 2px; - background-color: #e26959; - transform: scaleX(0); - transition: transform 0.3s ease-in-out; -} - -.underline-animation:hover::after { - transform: scaleX(1); -} diff --git a/src/components/shared/footer/Footer.jsx b/src/components/shared/footer/Footer.jsx index c19de145..d0362332 100644 --- a/src/components/shared/footer/Footer.jsx +++ b/src/components/shared/footer/Footer.jsx @@ -1,353 +1,55 @@ -import Cookies from "js-cookie"; -import React, { useEffect, useState } from "react"; -import { FaGithub, FaSquareXTwitter } from "react-icons/fa6"; +import React from "react"; +import { FaGithub, FaLinkedinIn, FaXTwitter } from "react-icons/fa6"; +import { SiGmail } from "react-icons/si"; import { Link } from "react-router-dom"; -import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; -import solidarity from "../../../assets/pictures/solidarity.png"; -import { ReportProblem } from "../../../service/MilanApi"; -import Modal from "../modal/Modal"; -import Button from "../buttons/globalbutton/Button"; -import "./Footer.css"; +import brand from "../../../assets/pictures/Navbar/MilanNavBrand.svg"; +import "./Footer.scss"; const Footer = () => { - const [reportModal, setReportModal] = useState(false); - const [reportEmail, setReportEmail] = useState(""); - const [reportFirstName, setReportFirstName] = useState(""); - const [reportLastName, setReportLastName] = useState(""); - const [reportIssue, setReportIssue] = useState(""); - const [isMobile, setIsMobile] = useState(false); - - const clickMilan = () => { - window.open("https://milaan.vercel.app/"); - }; - - const handleReportModalOpen = () => { - document.previousTitle = document.title; - document.title = "Milan | Report an issue"; - setReportModal(true); - }; - const handleReportModalClose = () => { - document.title = document.previousTitle; - document.previousTitle = undefined; - setReportEmail(""); - setReportFirstName(""); - setReportLastName(""); - setReportIssue(""); - setReportModal(false); - }; - - useEffect(() => { - if (reportModal) { - const closeEvent = (e) => { - if (e.key === "Escape") { - handleReportModalClose(); - } - }; - window.addEventListener("keydown", closeEvent); - return () => window.removeEventListener("keydown", closeEvent); - } - }, [reportModal]); - - const handleReportSubmit = async (e) => { - e.preventDefault(); - - if (!Cookies.get("isLoggedIn")) { - toast.error("You must be logged in to report an issue"); - return; - } - if ( - reportFirstName === "" || - reportLastName === "" || - reportEmail === "" || - reportIssue === "" - ) { - toast.error("Please fill out all fields"); - return; - } - const success = await ReportProblem({ - firstName: reportFirstName, - lastName: reportLastName, - email: reportEmail, - reportmessage: reportIssue, - }); - - if (success === true) { - toast.success("Report submitted successfully"); - } else if (success === "tryagain") { - toast.error("You can only submit once in 2 hours"); - } else { - toast.error("Some error occurred"); - } - setTimeout(() => { - handleReportModalClose(); - }, 2000); - }; - - useEffect(() => { - reportModal - ? (document.body.style.overflow = "hidden") - : (document.body.style.overflow = "unset"); - }, [reportModal]); - - useEffect(() => { - if (window.innerWidth > 767) { - setIsMobile(false); - } else { - setIsMobile(true); - } - - const updateMedia = () => { - if (window.innerWidth > 767) { - setIsMobile(false); - } else { - setIsMobile(true); - } - }; - window.addEventListener("resize", updateMedia); - return () => window.removeEventListener("resize", updateMedia); - }, []); - return ( <> - - {/* Report modal starts here */} - {reportModal && ( - -
-

REPORT A PROBLEM

+