diff --git a/src/App.jsx b/src/App.jsx
index abcaacb..9ecf179 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -71,7 +71,7 @@ function consoleLogEDPLogo() {
consoleLogEDPLogo();
const currentEDPVersion = "0.4.0";
-const apiVersion = "4.60.5";
+const apiVersion = "4.64.0";
// secret webhooks
const carpeConviviale = "CARPE_CONVIVIALE_WEBHOOK_URL";
@@ -273,6 +273,7 @@ export default function App({ edpFetch }) {
const [isTabletLayout, setIsTabletLayout] = useState(() => window.matchMedia(`(max-width: ${WINDOW_WIDTH_BREAKPOINT_TABLET_LAYOUT}px)`).matches);
const [isFullScreen, setIsFullScreen] = useState(false);
const [isEDPUnblockInstalled, setIsEDPUnblockInstalled] = useState(true);
+ const [isEDPUnblockActuallyInstalled, setIsEDPUnblockActuallyInstalled] = useState(false);
const [isStandaloneApp, setIsStandaloneApp] = useState(((window.navigator.standalone ?? false) || window.matchMedia('(display-mode: standalone)').matches)); // détermine si l'utilisateur a installé le site comme application, permet également de modifier le layout en conséquence
const [appKey, setAppKey] = useState(() => crypto.randomUUID());
const [proxyError, setProxyError] = useState(false); // en cas d'erreur sur le serveur proxy d'EDP (toutes les requêtes passent par lui pour contourner les restrictions d'EcoleDirecte)
@@ -517,6 +518,20 @@ export default function App({ edpFetch }) {
localStorage.setItem("oldActiveAccount", activeAccount)
}, [activeAccount]);
+ useEffect(() => {
+ const handleMessage = (event) => {
+ if (event.data.type === "EDP_UNBLOCK") {
+ console.log("EDP Unblock v" + event.data.payload.version + " installed");
+ setIsEDPUnblockActuallyInstalled(true);
+ }
+ };
+
+ window.addEventListener("message", handleMessage, false);
+ return () => {
+ window.removeEventListener("message", handleMessage, false);
+ }
+ }, [])
+
// fonctions de type utils pour modifier le userData
function changeUserData(data, value) {
setUserData((oldData) => {
@@ -1442,7 +1457,12 @@ export default function App({ edpFetch }) {
}
let token = response.token // collecte du token
let accountsList = [];
- let accounts = response.data.accounts[0];
+ let accounts = response.data.accounts.find((account) => account.typeCompte !== "P") ?? response.data.accounts[0];
+ if (response.data.accounts.some((account) => account.typeCompte === "P")) {
+ messages.submitButtonText = "Échec de la connexion";
+ messages.submitErrorMessage = "Les comptes enseignants ne sont pas supportés par Ecole Directe Plus";
+ return;
+ }
const accountType = accounts.typeCompte; // collecte du type de compte
if (accountType === "E") {
// compte élève
@@ -2549,6 +2569,8 @@ export default function App({ edpFetch }) {
handleEdBan={handleEdBan}
isEDPUnblockInstalled={isEDPUnblockInstalled}
setIsEDPUnblockInstalled={setIsEDPUnblockInstalled}
+ isEDPUnblockActuallyInstalled={isEDPUnblockActuallyInstalled}
+ setIsEDPUnblockActuallyInstalled={setIsEDPUnblockActuallyInstalled}
requireA2F={requireA2F}
setRequireA2F={setRequireA2F}
fetchA2F={fetchA2F}
@@ -2568,7 +2590,7 @@ export default function App({ edpFetch }) {
path: "feedback",
},
{
- element: ,
+ element: ,
path: "edp-unblock",
},
{
@@ -2588,7 +2610,7 @@ export default function App({ edpFetch }) {
path: "unsubscribe-emails",
},
{
- element: ,
+ element: ,
path: "login",
},
{
diff --git a/src/components/EdpUnblock/EdpUnblock.jsx b/src/components/EdpUnblock/EdpUnblock.jsx
index acb4452..c290ea3 100644
--- a/src/components/EdpUnblock/EdpUnblock.jsx
+++ b/src/components/EdpUnblock/EdpUnblock.jsx
@@ -14,6 +14,7 @@ import AboutArrow from "../graphics/AboutArrow";
import "./EdpUnblock.css";
import { getZoomedBoudingClientRect } from "../../utils/zoom";
+import BadgeCheck from "../graphics/BadgeCheck";
const browserLogosInfos = {
@@ -59,7 +60,7 @@ console.log("userOS:", userOS, "userBrowser:", userBrowser);
const compatibilityCondition = ((userOS === "iOS" && nonCompatibleIOSBrowsers.includes(userBrowser)) || (userOS === "Android" && nonCompatibleAndroidBrowsers.includes(userBrowser)) || (userOS === "MacOS" && userBrowser === "Safari"));
-export default function EdpUnblock() {
+export default function EdpUnblock({ isEDPUnblockActuallyInstalled }) {
const location = useLocation();
const aboutRef = useRef(null);
@@ -124,8 +125,14 @@ export default function EdpUnblock() {
{compatibilityCondition && (userOS !== "iOS" ? <>
Malheureusement, l'extension Ecole Directe Plus Unblock n'est pas disponible sur votre navigateur. 😥
S'il vous plaît considérez l'usage d'un navigateur compatible comme le {userOS === "iOS" ? "navigateur Orion" : "navigateur Firefox"} .
> : Malheureusement, l'extension Ecole Directe Plus Unblock n'est pas compatible avec les navigateurs sur iOS et iPadOS. S'il vous plaît, considérez l'usage d'un autre appareil avec un système d'exploitation compatible comme un ordinateur sous Windows ou Linux, ou un appareil mobile sous Android.
) }
{browserLogosInfos[userBrowser] && browserLogosInfos[userBrowser].logo}
- {compatibilityCondition ? Navigateur incompatible : Ajouter l’extension }
- {compatibilityCondition ? ✕
: }
+ {isEDPUnblockActuallyInstalled
+ ? Extension installée
+ : (compatibilityCondition ? Navigateur incompatible : Ajouter l’extension )
+ }
+ {isEDPUnblockActuallyInstalled
+ ?
+ : (compatibilityCondition ? ✕
: )
+ }
{ location.hash === "#about" && scrollToAbout() }}>
diff --git a/src/components/LandingPage/LandingPage.css b/src/components/LandingPage/LandingPage.css
index 6e62bd4..13d23ee 100644
--- a/src/components/LandingPage/LandingPage.css
+++ b/src/components/LandingPage/LandingPage.css
@@ -33,11 +33,11 @@
/* Style the EDP Unblock logo */
height: 20px;
transform: scale(1.3);
- transition: .2s ease;
+ transition: 0.2s ease;
}
#nav-bar .edpu-logo > path {
- fill: rgba(var(--text-color-alt), .7);
+ fill: rgba(var(--text-color-alt), 0.7);
}
a[href="/edp-unblock"]:hover .edpu-logo > path {
@@ -50,36 +50,32 @@ a[href="/edp-unblock"]:hover .edpu-logo > path {
padding: 1rem 1.6rem;
border-radius: 99px;
font-weight: 500;
- transition: .2s ease;
+ transition: 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
-.landing-page :is(
- .nav-links a.selected,
- .nav-links a:hover,
- .nav-login:hover,
- .change-theme:hover
-) {
- background-color: rgba(var(--text-color-alt), .8);
+.landing-page
+ :is(
+ .nav-links a.selected,
+ .nav-links a:hover,
+ .nav-login:hover,
+ .change-theme:hover
+ ) {
+ background-color: rgba(var(--text-color-alt), 0.8);
color: rgba(var(--text-color-main-reverse), 0.8);
}
-.landing-page :is(
- .nav-logo,
- .nav-login,
- .change-theme,
- .nav-links,
- .go-to-top
-) {
- background-color: rgb(var(--background-color-2), .7);
+.landing-page
+ :is(.nav-logo, .nav-login, .change-theme, .nav-links, .go-to-top) {
+ background-color: rgb(var(--background-color-2), 0.7);
backdrop-filter: blur(4px);
}
.landing-page .nav-links a:hover svg path {
fill: rgb(var(--text-color-main-reverse));
- transition: .1s;
+ transition: 0.1s;
}
.landing-logo {
@@ -95,14 +91,14 @@ a[href="/edp-unblock"]:hover .edpu-logo > path {
display: flex;
padding: 14px;
/* background-color: rgb(var(--background-color-3)); */
- background-color: rgb(var(--background-color-2), .7);
+ background-color: rgb(var(--background-color-2), 0.7);
cursor: pointer;
border-radius: 99px;
bottom: 26px;
right: 26px;
border: solid 1px transparent;
outline: none;
- transition: .25s;
+ transition: 0.25s;
}
.go-to-top.active {
@@ -124,8 +120,8 @@ a[href="/edp-unblock"]:hover .edpu-logo > path {
}
.go-to-top:active {
- transform: scale(.9);
- opacity: .8;
+ transform: scale(0.9);
+ opacity: 0.8;
}
/* Up Arrow */
@@ -137,7 +133,7 @@ a[href="/edp-unblock"]:hover .edpu-logo > path {
align-items: center;
height: 18px;
fill: rgb(var(--text-color-alt));
- transition: all .4s ease;
+ transition: all 0.4s ease;
transform: rotate(270deg);
}
@@ -154,7 +150,7 @@ a[href="/edp-unblock"]:hover .edpu-logo > path {
.landing-page .nav-buttons a {
height: 100%;
- transition: .2s;
+ transition: 0.2s;
display: flex;
padding-inline: 2.6rem;
border-radius: 1rem;
@@ -164,7 +160,7 @@ a[href="/edp-unblock"]:hover .edpu-logo > path {
}
.landing-page .change-theme {
- transition: .2s;
+ transition: 0.2s;
display: flex;
position: relative;
padding: 2.65rem;
@@ -189,8 +185,11 @@ a[href="/edp-unblock"]:hover .edpu-logo > path {
.dark .landing-page .change-theme::after {
/* Style the theme button's before pseudo-element */
background-color: #bebec880;
- background-image:
- radial-gradient(circle at 10% 20%, #c8c8d2b3, transparent 30%),
+ background-image: radial-gradient(
+ circle at 10% 20%,
+ #c8c8d2b3,
+ transparent 30%
+ ),
radial-gradient(circle at 30% 70%, #b4b4beb3, transparent 30%),
radial-gradient(circle at 70% 40%, #d2d2dcb3, transparent 30%),
radial-gradient(circle at 20% 60%, #bebec8b3, transparent 30%),
@@ -201,13 +200,18 @@ a[href="/edp-unblock"]:hover .edpu-logo > path {
.light .landing-page .change-theme::after {
/* Style the theme button's after pseudo-element */
background-color: #ffc85080;
- background-image:
- radial-gradient(circle at 10% 20%, #ffc850b3, transparent 30%),
+ background-image: radial-gradient(
+ circle at 10% 20%,
+ #ffc850b3,
+ transparent 30%
+ ),
radial-gradient(circle at 30% 70%, #ffb43c50, transparent 30%),
radial-gradient(circle at 70% 40%, #ffdc64b3, transparent 30%),
radial-gradient(circle at 20% 60%, #ffbe5ab3, transparent 30%),
radial-gradient(circle at 50% 80%, #ffd246b3, transparent 30%);
- box-shadow: 0 0 0 1px #ffc850, 0 0 5px 0px #ffc850;
+ box-shadow:
+ 0 0 0 1px #ffc850,
+ 0 0 5px 0px #ffc850;
}
/* Login */
@@ -215,5 +219,647 @@ a[href="/edp-unblock"]:hover .edpu-logo > path {
/* Style the login link */
padding: 1.7rem;
font-weight: 500;
- transition: all .3s ease;
-}
\ No newline at end of file
+ transition: all 0.3s ease;
+}
+html:has(.landing-page) {
+ overflow-x: hidden;
+ scroll-behavior: smooth;
+}
+
+/* -------------------------------------------------------------------------- */
+/* HEADER MENU */
+/* -------------------------------------------------------------------------- */
+
+.landing-page .nav-logo {
+ height: 100%;
+ padding: 1.7rem 1.4rem;
+ border-radius: 1rem;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ background-color: rgb(var(--background-color-2));
+ text-decoration: none;
+ user-select: none;
+ cursor: default;
+}
+
+.landing-page .nav-logo svg {
+ height: 100%;
+}
+
+/* -------------------------------------------------------------------------- */
+/* HERO BANNER */
+/* -------------------------------------------------------------------------- */
+
+#home {
+ width: 100%;
+ padding-top: 250px;
+}
+
+#home::before {
+ /* that could be done with the hero-banner background, but it's necessary
+ to keep the height of hero-banner flexible in order to keep a coherent
+ stacking of elements, that's why we use ::before here */
+ content: "";
+ z-index: -1;
+ width: 100%;
+
+ height: calc(min(100vh, 1100px) + 2px);
+ position: absolute;
+ top: 0;
+
+ border-bottom: 2px solid rgba(var(--text-color-alt), 0.5);
+ background: radial-gradient(
+ circle at bottom left,
+ rgba(var(--text-color-alt), 0.3) 0,
+ rgba(var(--text-color-alt), 0.1) 50%,
+ transparent 100%
+ );
+}
+
+/* AFFILIATION DISCLAIMER */
+
+.landing-page .affiliation-disclaimer {
+ font-size: var(--font-size-13);
+ background: rgb(var(--text-color-alt), 0.1);
+ color: rgb(var(--text-color-alt));
+ border: 1px solid rgb(var(--text-color-alt), 0.2);
+ border-radius: 15px;
+ width: max-content;
+ padding: 5px 10px;
+ margin: 0 auto;
+ margin-bottom: 30px;
+ display: flex;
+ align-items: center;
+ flex-flow: row nowrap;
+ gap: 8px;
+}
+.landing-page .affiliation-disclaimer svg {
+ height: 12px;
+ transform: scale(1.6);
+}
+.landing-page .affiliation-disclaimer svg path {
+ stroke: rgb(var(--text-color-alt));
+}
+
+/* HERO CONTENT */
+
+.landing-page .text-center {
+ /* position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%); */
+ width: min(654px, 100%);
+ margin: 0 auto;
+ padding-inline: 10px;
+ /* margin-top: 300px; */
+ text-align: center;
+}
+
+.landing-page h1 {
+ font-size: var(--font-size-36);
+}
+.landing-page .heading-emphasis {
+ color: rgb(var(--text-color-alt));
+}
+#home p {
+ color: rgb(var(--text-color-alt));
+ margin: 0 auto;
+ margin-top: 20px;
+}
+
+.landing-page .login-call-to-action {
+ display: inline-block;
+ margin-top: 45px;
+ text-decoration: none;
+ border: 2px solid rgb(var(--text-color-main));
+ border-radius: 10px;
+ font-weight: var(--font-weight-semi-bold);
+ padding: 10px 15px;
+ transition: 0.2s;
+ outline: none;
+ overflow: hidden;
+}
+.landing-page .login-call-to-action::after {
+ content: "-->";
+ display: inline-block;
+ white-space: nowrap;
+ padding: 0;
+ opacity: 0;
+ width: 0;
+ transition: 0.2s;
+}
+
+.landing-page .login-call-to-action:is(:hover, :focus-visible) {
+ background-color: rgb(var(--text-color-main));
+ color: rgb(var(--text-color-main-reverse));
+ box-shadow: 0 0 20px rgb(var(--text-color-main), 0.3);
+}
+.landing-page .login-call-to-action:is(:hover, :focus-visible)::after {
+ content: "-->";
+ opacity: 1;
+ padding-left: 10px;
+ width: 35px;
+ color: rgb(var(--text-color-main-reverse));
+}
+
+.landing-page .login-call-to-action:active {
+ opacity: 0.6;
+}
+
+.landing-page .fade-out-image {
+ margin: 0 auto;
+ margin-top: 100px;
+ width: min(1200px, calc(100% - 40px));
+ overflow: hidden;
+ position: relative;
+ transition: transform 0.3s ease;
+}
+.landing-page .fade-out-image:has(.mobile) {
+ width: min(350px, calc(100% - 40px));
+}
+.landing-page .fade-out-image:has(.tablet) {
+ width: min(450px, calc(100% - 40px));
+}
+.landing-page .fade-out-image img {
+ width: 100%;
+ display: block;
+ border: 1px solid rgba(var(--text-color-alt), 0.2);
+ border-radius: 10px;
+}
+.landing-page .fade-out-image::after {
+ content: "";
+ background: linear-gradient(
+ 180deg,
+ transparent,
+ rgb(var(--background-color-0)) 90%,
+ rgb(var(--background-color-0))
+ );
+ height: 90%;
+ bottom: -1px;
+ left: -1px;
+ width: calc(100% + 2px);
+ position: absolute;
+}
+
+.landing-page .section-title {
+ font-size: var(--font-size-32);
+}
+
+/* -------------------------------------------------------------------------- */
+/* FEATURES OVERVIEW */
+/* -------------------------------------------------------------------------- */
+
+#bento {
+ margin-top: 200px;
+ display: flex;
+ flex-flow: column nowrap;
+ width: min(740px, 100%);
+ gap: 100px;
+}
+
+#bento .bento-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ grid-template-rows: repeat(5, minmax(0, 1fr));
+ gap: 20px;
+ /* height: 700px; */
+}
+
+#bento .bento-card {
+ border: 2px solid rgba(var(--text-color-alt), 0.2);
+ border-radius: 10px;
+ box-shadow:
+ rgb(var(--background-color-0)) 0px 0px 0px 0px,
+ rgb(var(--background-color-0), 0.1) 0px 0px 0px 1px,
+ rgb(var(--text-color-alt), 0.1) 0px 1px 3px 0px,
+ rgb(var(--text-color-alt), 0.1) 0px 1px 2px -1px;
+}
+
+#bento .bento-outline-effect {
+ height: 100%;
+ background-color: rgb(var(--background-color-0));
+ padding: 20px;
+ border-radius: 8px;
+ transition: background 0.2s;
+}
+
+#bento .bento-card:hover {
+ /* scale: 1.03; */
+ box-shadow:
+ rgb(var(--background-color-0)) 0px 0px 0px 0px,
+ rgb(var(--background-color-0), 0.1) 0px 0px 0px 1px,
+ rgb(var(--text-color-alt), 0.1) 0px 1px 3px 0px,
+ rgb(var(--text-color-alt), 0.1) 0px 1px 2px -1px,
+ 0px 5px 8px -2px rgb(var(--text-color-alt), 0.2);
+ /* transform: translateY(-4px); */
+}
+
+#bento .bento-card h4 {
+ margin-bottom: 10px;
+}
+#bento .bento-card p {
+ color: rgb(var(--text-color-alt));
+}
+#bento .bento-card:hover p {
+ color: rgba(var(--text-color-main), 0.9);
+}
+
+#bento .bento-outline-effect:hover {
+ background-color: rgba(var(--background-color-0), 0.95);
+}
+
+.div1 {
+ grid-area: 1 / 1 / 2 / 2;
+}
+.div2 {
+ grid-area: 1 / 2 / 3 / 3;
+}
+.div3 {
+ grid-area: 2 / 1 / 4 / 2;
+}
+.div4 {
+ grid-area: 3 / 2 / 4 / 3;
+}
+.div5 {
+ grid-area: 4 / 1 / 5 / 2;
+}
+.div6 {
+ grid-area: 5 / 1 / 6 / 2;
+}
+.div7 {
+ grid-area: 4 / 2 / 6 / 3;
+}
+
+#bento .div3 .inner-container {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+}
+
+#bento .div3 .theme-buttons {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 30px;
+ padding-bottom: 40px;
+ flex-grow: 1;
+}
+
+#bento .div3 .theme-buttons button {
+ border: solid 2px transparent;
+ display: flex;
+ flex-grow: 1;
+ transition: 0.2s !important;
+}
+
+#bento .div3 .theme-buttons button:first-child {
+ margin-right: -1px;
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+ background-color: #d2d2ff;
+}
+
+#bento .div3 .theme-buttons button:last-child {
+ margin-left: -1px;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+ background-color: #323257;
+}
+
+#bento
+ .div3
+ .theme-buttons
+ button:first-child:not(.activated):is(:hover, :focus-visible) {
+ outline: none;
+ background-color: #bebef3;
+ border-color: transparent;
+}
+
+#bento
+ .div3
+ .theme-buttons
+ button:first-child:is(.activated, :hover, :focus-visible) {
+ outline: none;
+ background-color: #bebef3;
+ border-color: #323257;
+}
+
+#bento
+ .div3
+ .theme-buttons
+ button:last-child:not(.activated):is(:hover, :focus-visible) {
+ outline: none;
+ background-color: #434369;
+ border-color: transparent;
+}
+
+#bento
+ .div3
+ .theme-buttons
+ button:last-child:is(.activated, :hover, :focus-visible) {
+ outline: none;
+ background-color: #434369;
+ border-color: #d2d2ff;
+}
+
+#bento .div3 .theme-buttons button svg {
+ padding: 25%;
+ transition: 0.5s !important;
+}
+
+#bento .div3 .theme-buttons button.activated:first-child svg {
+ rotate: 180deg;
+}
+
+#bento .div3 .theme-buttons button.activated:last-child svg {
+ scale: -1 1;
+}
+
+#bento .div3 .theme-buttons button:first-child svg path {
+ stroke: black;
+}
+
+#bento .div3 .theme-buttons button:last-child svg path {
+ stroke: white;
+}
+
+/* ------------------------------------------------------------------------ */
+/* PARALAX ITEMS (in mobile first) */
+/* ------------------------------------------------------------------------ */
+
+.parallax-item {
+ position: absolute;
+}
+.parallax-item.blob1 {
+ left: -80px;
+ top: min(130vh, 1500px);
+ width: 200px;
+}
+.parallax-item.blob2 {
+ right: -70px;
+ top: min(130vh, 1500px);
+ width: 250px;
+}
+
+.blob {
+ width: 100%;
+ opacity: .5;
+ filter: blur(50px);
+ animation: blob-rotate linear 10s infinite;
+}
+.blob path {
+ fill: rgb(var(--text-color-alt))
+}
+
+@keyframes blob-rotate {
+ from {
+ rotate: 0deg;
+ }
+ to {
+ rotate: 359deg;
+ }
+}
+
+@media only screen and (max-width: 869px) {
+ .parallax-item {
+ display: none;
+ }
+}
+
+/* -------------------------------------------------------------------------- */
+/* FLOATING SECTIONS (community & open-source sections) */
+/* -------------------------------------------------------------------------- */
+
+.floating-section {
+ margin-top: 400px;
+ box-sizing: border-box;
+ transition: opacity 2s;
+ width: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: center;
+ /* justify-content: center; */
+ gap: 75px;
+}
+
+.floating-section a {
+ color: rgba(var(--text-color-main), 0.9);
+ text-decoration-color: rgba(var(--text-color-main), 0);
+ transition: text-decoration-color 0.1s;
+}
+
+.floating-section a:hover {
+ text-decoration-color: rgba(var(--text-color-main), 1);
+}
+
+.floating-section > h2 {
+ padding-inline: 10%;
+ text-align: center;
+ opacity: 0;
+ transform: translateY(-50px);
+ transition:
+ opacity 2s,
+ transform 1s;
+}
+
+.floating-section > div {
+ width: 50%;
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: center;
+ align-items: center;
+ gap: 50px;
+}
+
+.floating-section > div > :is(p, a) {
+ opacity: 0;
+ transform: translateY(-50px);
+ transition:
+ opacity 2s,
+ transform 1s;
+}
+
+.floating-section p {
+ min-width: 250px;
+ flex: 1;
+ font-size: var(--font-size-20);
+ color: rgb(var(--text-color-alt));
+}
+
+.floating-section > div > a {
+ width: 250px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition:
+ opacity 2s,
+ transform 2s,
+ filter 0.2s;
+}
+.floating-section > div > a:is(:hover, :focus-visible) {
+ filter: drop-shadow(0 0 15px rgba(var(--text-color-main), 0.3));
+}
+.floating-section .github-logo {
+ width: 180px;
+}
+
+.floating-section .visible {
+ opacity: 1;
+ transform: translate(0, 0);
+}
+
+#open-source p {
+ text-align: right;
+}
+
+/* LAST CALL TO ACTION */
+
+.last-call-to-action {
+ width: 50%;
+ margin: 0 auto;
+ margin-top: 300px;
+ text-align: center;
+ border: 2px solid rgba(var(--text-color-alt), 0.2);
+ border-radius: 10px;
+
+ display: flex;
+ flex-flow: column nowrap;
+}
+.last-call-to-action h3 {
+ font-size: var(--font-size-24);
+}
+.last-call-to-action p {
+ color: rgb(var(--text-color-alt));
+}
+.last-call-to-action a {
+ width: max-content;
+ margin: 0 auto;
+}
+
+.last-call-to-action .outline-effect-div {
+ height: 100%;
+ background-color: rgb(var(--background-color-0));
+ transition: 0.25s ease-in-out;
+ padding: 60px;
+ border-radius: 8px;
+ transition: background 0.2s;
+}
+
+/* -------------------------------------------------------------------------- */
+/* FOOTER */
+/* -------------------------------------------------------------------------- */
+
+.landing-page footer {
+ margin-top: 100px;
+ padding: 80px 50px;
+ background: radial-gradient(
+ circle at 90% 400%,
+ rgba(var(--text-color-alt), 0.2) 0,
+ transparent 100%
+ );
+ border-top: 2px solid rgba(var(--text-color-alt), 0.5);
+
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ gap: 100px;
+}
+
+.landing-page .footer-logo {
+ height: 50px;
+ width: auto;
+ flex: 1;
+}
+
+.landing-page ul.sitemap {
+ list-style: none;
+ flex: 2;
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-between;
+ gap: 30px 50px;
+}
+
+.landing-page ul.sitemap li {
+ flex-basis: 200px;
+}
+
+.landing-page ul.sitemap a {
+ text-decoration: none;
+ color: rgb(var(--text-color-alt));
+ transition: 0.1s;
+}
+.landing-page ul.sitemap a:is(:hover, :focus-visible) {
+ color: rgb(var(--text-color-main));
+}
+.landing-page ul.sitemap a:active {
+ opacity: 0.8;
+}
+.landing-page ul.sitemap a.disabled {
+ pointer-events: none;
+ opacity: 0.5;
+}
+
+@media only screen and (max-width: 869px) {
+ .landing-page footer {
+ flex-flow: column nowrap;
+ }
+ .landing-page .footer-logo {
+ flex: auto;
+ }
+
+ .landing-page .floating-section p {
+ text-align: center !important;
+ }
+
+ .landing-page .last-call-to-action {
+ width: 90%;
+ }
+
+ .landing-page ul.sitemap {
+ text-align: center;
+ justify-content: center;
+ }
+}
+
+@media only screen and (max-width: 470px) {
+ .landing-page .change-theme {
+ display: none;
+ }
+}
+
+@media only screen and (max-width: 415px) {
+ .landing-page .nav-logo svg {
+ display: none;
+ }
+}
+
+@media only screen and (max-width: 365px) {
+ .landing-page .nav-logo {
+ display: none;
+ }
+
+ .nav-buttons {
+ width: 100%;
+ }
+ .nav-login {
+ width: 100%;
+ }
+}
+
+
+@media only screen and (max-width: 737px) {
+ #bento .bento-grid {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ #bento .bento-grid > div {
+ max-width: 400px;
+ }
+}
diff --git a/src/components/LandingPage/LandingPage.jsx b/src/components/LandingPage/LandingPage.jsx
index 45e76b6..afc7b8b 100644
--- a/src/components/LandingPage/LandingPage.jsx
+++ b/src/components/LandingPage/LandingPage.jsx
@@ -1,23 +1,20 @@
-import { useRef, useEffect, useContext, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
+import { AppContext } from "../../App";
import OutlineEffectDiv from "../generic/CustomDivs/OutlineEffectDiv";
-import { AppContext } from "../../App"
// graphics
-import EdpuLogo from "../graphics/EdpuLogo";
-import InfoTypoIcon from "../graphics/InfoTypoIcon";
-import UpArrow from "../graphics/UpArrow";
+import HoverFollowDiv from "../generic/CustomDivs/HoverFollowDiv";
+import DiscordFullLogo from "../graphics/DiscordFullLogo";
import EDPLogo from "../graphics/EDPLogo";
import EDPLogoFullWidth from "../graphics/EDPLogoFullWidth";
-import DiscordFullLogo from "../graphics/DiscordFullLogo";
+import EdpuLogo from "../graphics/EdpuLogo";
import GitHubFullLogo from "../graphics/GitHubFullLogo";
-import SunIcon from "../graphics/SunIcon";
-import MoonIcon from "../graphics/MoonIcon";
-import HoverFollowDiv from "../generic/CustomDivs/HoverFollowDiv";
+import InfoTypoIcon from "../graphics/InfoTypoIcon";
+import UpArrow from "../graphics/UpArrow";
import "./LandingPage.css";
-import "./LandingPage2.css";
export default function LandingPage({ token, accountsList }) {
const { isMobileLayout, isTabletLayout, actualDisplayTheme, useUserSettings } = useContext(AppContext);
@@ -25,15 +22,14 @@ export default function LandingPage({ token, accountsList }) {
const [isLoggedIn, setIsLoggedIn] = useState(token && accountsList.length > 0); // this one is different from the one in App.jsx
const [isTop, setIsTop] = useState(true);
- const [isScrollNAvigation, setIsScrollNavigation] = useState(false);
- const homeSectionRef = useRef(null)
- const communitySectionRef = useRef(null)
- const openSourceSectionRef = useRef(null)
+ const homeSectionRef = useRef(null);
+ const communitySectionRef = useRef(null);
+ const openSourceSectionRef = useRef(null);
- const location = useLocation()
- const navigate = useNavigate()
+ const location = useLocation();
+ const navigate = useNavigate();
- const theme = useUserSettings("displayTheme")
+ const theme = useUserSettings("displayTheme");
const displayMode = useUserSettings("displayMode").get();
const changeTheme = () => {
@@ -42,7 +38,7 @@ export default function LandingPage({ token, accountsList }) {
useEffect(() => {
setIsLoggedIn(token && accountsList.length > 0);
- }, [token, accountsList])
+ }, [token, accountsList]);
useEffect(() => {
const observer = new IntersectionObserver((intersections) => {
@@ -66,8 +62,8 @@ export default function LandingPage({ token, accountsList }) {
})
if (communitySectionRef.current && openSourceSectionRef.current) {
- observer.observe(communitySectionRef.current)
- observer.observe(openSourceSectionRef.current)
+ observer.observe(communitySectionRef.current);
+ observer.observe(openSourceSectionRef.current);
return () => {
if (communitySectionRef.current) observer.unobserve(communitySectionRef.current)
if (openSourceSectionRef.current) observer.unobserve(openSourceSectionRef.current)
@@ -90,24 +86,23 @@ export default function LandingPage({ token, accountsList }) {
if (!location.hash) {
navigate("#home", { replace: true });
}
- const section = document.getElementById(location.hash.slice(1))
+ const section = document.getElementById(location.hash.slice(1));
if (section) {
section.scrollIntoView({ block: (location.hash === "#home" ? "start" : "center") })
}
}, [location.hash]);
-
useEffect(() => {
const handleScroll = () => {
const parallaxItems = document.querySelectorAll(".parallax-item");
let scrollPosition = window.scrollY;
- parallaxItems.forEach(item => {
+ parallaxItems.forEach((item) => {
let speed = item.getAttribute("data-speed");
let yPos = -(scrollPosition * speed);
item.style.transform = `translateY(${yPos}px)`;
});
- }
+ };
document.addEventListener("scroll", handleScroll);
@@ -118,7 +113,7 @@ export default function LandingPage({ token, accountsList }) {
}, [])
return (
- {!isMobileLayout &&
+ {
Ecole Directe Plus
@@ -227,7 +222,7 @@ export default function LandingPage({ token, accountsList }) {