Feature/a UI 004 030

src/components/Body.tsx

@@ -27,10 +27,10 @@ export default function Body({ children }: Props) {
         width="5px"
         sx={{
           height: document.body.scrollHeight,
-          background: `linear-gradient(to bottom, #0D2D45 ${position - 25}%, #2AB8CD ${position - 15}%, #2AB8CD ${position + 15}%, #0D2D45 ${position + 25}%)`,
+          background: `linear-gradient(to bottom, #0D2D45 ${position - 5}%, #2AB8CD ${position}%, #2AB8CD ${position + 5}%, #0D2D45 ${position + 5}%)`,
           position: 'absolute',
-          top: '410px',
-          left: '83px'
+          top: 'Z00px',
+          left: '105px'
         }}
       />
       { children }

src/components/Footer.tsx

@@ -22,6 +22,7 @@ export default function Footer() {
           display: "flex",
           alignItems: "center",
           gap: "10px",
+          zIndex: '1000'
         }}
       >
         <span>Nos partenaires</span>

src/components/NavBar/Navbar.tsx

@@ -2,7 +2,7 @@ import { Box } from '@mui/material';
 import NavItem, { NavItemLink } from '../NavItem/NavItem';
 import BurgerMenu from '../BurgerMenu/BurgerMenu';
 import { Colors } from '../../core/colors';
-import './navbar.css';
+
 
 export default function Navbar() {
 
@@ -27,9 +27,27 @@ export default function Navbar() {
 
 
   return (
-    <nav>
+    <nav
+      style={{
+        position: 'relative',
+        width: '573px',
+        height: '100%',
+        marginRight: '47px'
+      }}
+    >
       <BurgerMenu />
-      <ul>
+      <ul
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          listStyle: 'none',
+          height: '100%',
+          width: '100%',
+          position: 'absolute',
+          right: '90px',
+        }}
+      >
         <Box
           width="100%"
           height=".65mm"

src/components/NavItem/NavItem.tsx

@@ -11,24 +11,38 @@ export default function NavItem(
 
   return (
     <li
-      style= {{
+      style={{
         position: 'relative',
         transform: 'translateY(calc(-50%))'
       }}
     >
+      <Box
+        width='14px'
+        height='14px'
+        top={link.target === '/connexion' ? 'calc(50%)' : ''}
+        left={link.target === '/connexion' ? '0' : '50%'}
+        sx={{
+          position: 'absolute',
+          borderRadius: '50%',
+          background: clicked ? Colors.TURQUOISE : hover ? Colors.ORANGE : Colors.BLEU_NUIT,
+          border: clicked ? `1mm solid ${Colors.TURQUOISE}` : `1mm solid ${Colors.ORANGE}`,
+          transform: link.target === '/connexion' ? 'translate(-100%, -50%)' : 'translate(-50%, -50%)',
+          transition: 'all .25s'
+        }}
+      />
       <Link
         underline="none"
         href={link.target}
-        // id={link.target === '/connexion' ? 'connect' : ''}
         width={link.target === '/connexion' ? 'auto' : 'max-content'}
         sx={{
           position: 'absolute',
-          margin: '5px',
+          margin: link.target === '/connexion' ? '5px' : '14px',
           top: link.target === '/connexion' ? '-50%' : '100%',
           left: link.target === '/connexion' ? '-50%' : '50%',
           marginLeft: link.target === '/connexion' ? '14px' : '0',
-          transform: link.target === '/connexion' ? 'translate(12px, -50%)' : 'translate(-50%, 0)',
+          transform: link.target === '/connexion' ? 'translate(-25%, -33%)' : 'translate(-50%, 0)',
           color: clicked ? Colors.TURQUOISE : Colors.ORANGE,
+          textAlign: link.target === '/connexion' ? 'center' : 'left',
           transition: 'all .25s',
           fontSize: clicked ? '24px' : '22px',
         }}
@@ -38,20 +52,7 @@ export default function NavItem(
         onMouseLeave={() => setHover(false)}
       >
         {link.name}
-        <Box
-          width='14px'
-          height='14px'
-          top={link.target === '/connexion' ? 'calc(50% - 5px)' : '-5px'}
-          left={link.target === '/connexion' ? '-14px' : '50%'}
-          sx={{
-            position: 'absolute',
-            borderRadius: '50%',
-            background: clicked ? Colors.TURQUOISE : hover ? Colors.ORANGE : Colors.BLEU_NUIT,
-            border: clicked ? `1mm solid ${Colors.TURQUOISE}` : `1mm solid ${Colors.ORANGE}`,
-            transform: link.target === '/connexion' ? 'translate(-100%, -50%)' : 'translate(-50%, -50%)',
-            transition: 'all .25s'
-          }}
-        />
+
       </Link>
     </li >
   )
@@ -61,7 +62,8 @@ export interface NavItemLink {
   name: string,
   target: string,
 }
-interface NavItemProps  {
+
+interface NavItemProps {
   link: NavItemLink,
   index?: number,
 }

src/components/Section.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@mui/material'
 import { Colors } from '../core/colors'
 
 /**
@@ -29,23 +30,26 @@ export default function Section(
         position: 'relative',
         width: 'calc(100% - 166px)',
         margin: 'auto',
-        marginLeft: '83px',
-        marginRight: '83px',
+        marginLeft: '105px',
+        marginRight: '105px',
         padding: `${paddingTop} ${scrollBarDist} ${paddingBottom}`,
       }}
     >
-      <h2
-        style={{
+
+      <Typography variant="h2"
+        sx={{
           fontSize: '60px',
-          color: Colors.WHITE,
           fontWeight: '600',
-          fontFamily: 'Cabin',
-          letterSpacing: '6px',
-          textAlign: titleCenter ? 'center' : 'left',
+          lineHeight: '62px',
+          letterSpacing: '0.055em',
+          color: Colors.WHITE,
+          zIndex: '10',
+          position: 'relative',
+
         }}
       >
         {title}
-      </h2>
+      </Typography>
       {children}
     </section >
   )

src/components/ProjectCard/ProjectCard.tsx → src/components/Sections/Projects/ProjectCard/ProjectCard.tsx

@@ -1,32 +1,36 @@
 import { Box, Link } from "@mui/material"
-import { Colors } from "../../core/colors"
+import { Colors } from "../../../../core/colors"
+
 
 export default function ProjectCard({ project, key }: Props,) {
   return (
     <Box
       display="flex"
       flexDirection="column"
-      justifyContent="flex-start"
-      alignItems='flex'
-      // padding="100px 0"
-      maxWidth='372px'
-      margin='0 32px'
+      justifyContent="space-between"
+      alignItems='flex-start'
+      maxWidth='383px'
+      minWidth='287px'
+      height='450px'
       gap='68px'
       key={key}
     >
-      <img
-        src={`/public/uploads/images/${project.imageUrl}`}
-        alt={`logo du projet ${project.title}`}
-        style={{
-          maxWidth: '160px',
-          margin: 'auto',
-        }}
-        className='logo'
-      />
+      <Box
+        width="270px"
+      >
+        <img
+          src={`/public/uploads/images/${project.imageUrl}`}
+          alt={`logo du projet ${project.title}`}
+          style={{
+            margin: 'auto',
+          }}
+          className='logo'
+        />
+      </Box>
       <Box
         gap='12px'
         width='100%'
-        paddingLeft='22px'
+        paddingLeft='30px'
       >
         <Link
           href={project.githubUrl}
@@ -42,7 +46,7 @@ export default function ProjectCard({ project, key }: Props,) {
               content: '""',
               position: 'absolute',
               display: 'block',
-              right: 'calc(100% + 10px)',
+              right: 'calc(100% + 12px)',
               top: '50%',
               width: '14px',
               height: '14px',
@@ -70,7 +74,7 @@ export default function ProjectCard({ project, key }: Props,) {
             <li
               key={index}
               style={{
-                fontSize: '21px',
+                fontSize: '18px',
                 listStyle: 'none',
                 lineHeight: '25.52px',
                 letterSpacing: '0',

src/components/ProjectCarousel.tsx → src/components/Sections/Projects/ProjectCarousel.tsx

@@ -1,10 +1,12 @@
-import { Box } from '@mui/system';
-import Slider from 'react-slick';
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
-import { settings } from '../core/ui/config/slider';
+
+// components
+import { Box } from '@mui/system';
 import ProjectCard from './ProjectCard/ProjectCard';
-import { projects } from '../views/layoutDatas';
+import { settings } from '../../../core/ui/config/slider';
+import Slider from 'react-slick';
+import { projects } from '../../../views/layoutDatas';
 
 export default function ProjectCarousel() {
 
@@ -15,6 +17,8 @@ export default function ProjectCarousel() {
       sx={{
         paddingX: '17px',
         marginTop: '56px',
+        position: 'relative',
+        zIndex: '10',
       }}
     >
       <Slider {...settings}>

src/views/Projects.tsx → src/components/Sections/Projects/Projects.tsx

@@ -1,7 +1,7 @@
-import Section from "../components/Section"
+import Section from "../../Section"
 import { Box } from '@mui/material';
-import ProjectCarousel from "../components/ProjectCarousel"
-import CTAButton from "../core/ui/CTAButton"
+import ProjectCarousel from "./ProjectCarousel"
+import CTAButton from "../../../core/ui/CTAButton"
 
 export default function Projects() {
   return (
@@ -13,6 +13,23 @@ export default function Projects() {
       paddingBottom='25px'
     >
       <ProjectCarousel />
+
+      <img
+        src='src/assets/backgrounds/Body_MeshGradient_3.webp'
+        alt="image de fond"
+        style={{
+          opacity: '0.5',
+          position: 'absolute',
+          top: '4px',
+          padding: '0',
+          left: 'calc(-105px - 7px)',
+          zIndex: '0',
+          maxWidth: '1344px',
+          maxHeight: '473px',
+          paddingBottom: '64px'
+        }}
+      />
+
       <Box
         textAlign='center'
         width='100%'
@@ -21,6 +38,7 @@ export default function Projects() {
         }}
       >
         <CTAButton
+          id="projectsBtn"
           href="/inscription"
           style={{
             width: '492px',

src/components/Sections/TopSection/TopSection.spec.tsx

@@ -3,7 +3,7 @@ import TopSection from "./TopSection";
 import { SHAKE } from "../../../core/animations";
 
 describe("TopSection", () => {
-    const BUTTON_ID = "ctaButton";
+    const BUTTON_ID = "comeOnDiscordBtn";
     let button: HTMLElement;
     beforeEach(() => {
         render(<TopSection />);