Antoine/lhoist-stay-safe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactoring home component

Browse Source
This commit is contained in:
Antoine M 2024-02-01 18:24:07 +01:00
parent dccc7c17b4
commit a678d0b3e8
2 changed files with 6 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/css/pages/Home.scss
View File

@ -1,12 +1,10 @@
.page-container--home { .page-container--home {
.screen { .screen {
@apply flex flex-col justify-center items-center relative overflow-hidden;
.screen_worker_1, .screen_worker_1,
.screen_worker_2 { .screen_worker_2 {
@apply absolute; @apply hidden lg:block absolute;
max-height: 60%; max-height: 60%;
bottom: -2rem; bottom: -3rem;
} }
.screen_worker_1 { .screen_worker_1 {
@apply left-0; @apply left-0;
@ -15,14 +13,6 @@
@apply -right-16; @apply -right-16;
} }
&__content { &__content {
@apply text-center pt-12 px-16 w-fit mx-auto h-auto overflow-visible relative;
padding-bottom: -100px;
background-image: url("../../img/mask.svg");
background-position: center;
background-size: cover;
.cover_worker { .cover_worker {
@apply mx-auto; @apply mx-auto;
transform: translate(0%, -50%); transform: translate(0%, -50%);
@ -42,7 +32,7 @@
} }
.application_description { .application_description {
@apply max-w-2xl text-xl px-20; @apply max-w-2xl text-xl px-20 font-bold;
margin-bottom: -40px; margin-bottom: -40px;
} }
.cta--play { .cta--play {

6
src/pages/Home.jsx
View File

@ -1,5 +1,5 @@
import Menu from "../components/Menu"; import Menu from "../components/Menu";
import { useWordpressCustomData, useUmamiDatas, useUmamiUpdateDatas } from "../hooks/WordpressFetchData"; import { useWordpressCustomData } from "../hooks/WordpressFetchData";
import coverWorker from "../assets/img/cover_worker.svg"; import coverWorker from "../assets/img/cover_worker.svg";
import screenWorker1 from "../assets/img/screen_worker_1.svg"; import screenWorker1 from "../assets/img/screen_worker_1.svg";
import screenWorker2 from "../assets/img/screen_worker_2.svg"; import screenWorker2 from "../assets/img/screen_worker_2.svg";
@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
export default function Home() { export default function Home() {
const welcomeScreenDatas = useWordpressCustomData("/interface-content/welcome"); const welcomeScreenDatas = useWordpressCustomData("/screen/welcome");
if (!welcomeScreenDatas) { if (!welcomeScreenDatas) {
return <div>Chargement...</div>; return <div>Chargement...</div>;
@ -27,7 +27,7 @@ export default function Home() {
</p> </p>
<Link <Link
to='/select-profile' to='/select-profile'
className='cta cta--construction cta--round cta--play ' className='cta cta--construction cta--round cta--button-icon cta--play '
/> />
</section> </section>
<img className='screen_worker_1' src={screenWorker1} alt='' /> <img className='screen_worker_1' src={screenWorker1} alt='' />