feat: improve design

ungdev · Aug 2, 2023 · 239129c · 239129c
1 parent 91dbba7
commit 239129c
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 18 deletions.
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 import React from 'react';
 import { Title } from '@/components/UI';
+import BoxContainer from '@/components/landing/BoxContainer';
 
 interface TeamMember {
   name: string;
@@ -75,7 +76,52 @@ const team: OurTeam = {
 const About = () => {
   return (
     <div className="about-container">
-      {/* other content */}
+      <div className="about-ua">
+        <div className="information-container">
+          <div className="left">
+            <Title level={1}>UTT Arena 2023</Title>
+            <p className="information-text">
+              LE rendez-vous gaming annuel de la région Auboise aura lieu les 3 et 4 décembre 2022 dans un lieu que vous
+              connaissez bien : le Cube ! Plus de 2250m2 t'attendent pour passer 2 jours de folie ! <br />
+              Au programme : 7 tournois sur tes jeux favoris, 2 jours pour montrer tes skills parmis les 630 joueurs qui
+              composeront l’évènement, et tenter de remporter les cashprizes, lots et de nombreuses autres surprises !
+              Et pour animer cette édition, des guests d’exception viendront caster cette édition qui s’annonce
+              enflammée ! Alors prépare tout ton stuff et impose toi dans l’arène !
+            </p>
+          </div>
+          <div className="right">
+            <BoxContainer title="image.jpg" padding={false}>
+              <img src="https://picsum.photos/seed/add/1920/1080/" alt="Information Image" className="" />
+            </BoxContainer>
+            <BoxContainer title="image.jpg" padding={false}>
+              <img src="https://picsum.photos/1920/1080" alt="Information Image" className="" />
+            </BoxContainer>
+          </div>
+        </div>
+      </div>
+      <div className="about-ung">
+        <div className="information-container">
+          <div className="right">
+            <BoxContainer title="image.jpg" padding={false}>
+              <img src="https://picsum.photos/seed/add/1920/1080/" alt="Information Image" className="" />
+            </BoxContainer>
+            <BoxContainer title="image.jpg" padding={false}>
+              <img src="https://picsum.photos/1920/1080" alt="Information Image" className="" />
+            </BoxContainer>
+          </div>
+          <div className="left">
+            <Title level={1}>UTT Net Group</Title>
+            <p className="information-text">
+              LE rendez-vous gaming annuel de la région Auboise aura lieu les 3 et 4 décembre 2022 dans un lieu que vous
+              connaissez bien : le Cube ! Plus de 2250m2 t'attendent pour passer 2 jours de folie ! <br />
+              Au programme : 7 tournois sur tes jeux favoris, 2 jours pour montrer tes skills parmis les 630 joueurs qui
+              composeront l’évènement, et tenter de remporter les cashprizes, lots et de nombreuses autres surprises !
+              Et pour animer cette édition, des guests d’exception viendront caster cette édition qui s’annonce
+              enflammée ! Alors prépare tout ton stuff et impose toi dans l’arène !
+            </p>
+          </div>
+        </div>
+      </div>
 
       <div className="about-team">
         <Title level={1} align="center">

diff --git a/src/app/about/style.scss b/src/app/about/style.scss
@@ -1,20 +1,60 @@
 .about-container {
   padding: 5rem 0;
-  .about-team {
-    width: clamp(300px, 80%, 1200px);
-    margin: auto;
+
+  .about-ua, .about-ung {
+    width: clamp(300px, 80%, 1920px);
+    margin: 10px auto 100px auto;
   }
+    .information-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 2rem;
+
+      .information-text {
+        color: #fff;
+        font-family: $montserrat;
+        font-size: 1.25rem;
+        font-weight: 500;
+        line-height: 1.5;
+        text-align: justify;
+      }
+
+      .left {
+        width: 60%;
+      }
+
+      .right {
+        width: 40%;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        > * {
+          position: absolute;
+
+          &:nth-child(1) {
+            transform: translate(-25px, 25px);
+          }
+        }
+      }
+    }
 
   .about-team {
-    margin-bottom: 3rem;
+    width: clamp(300px, 80%, 1920px);
+    margin: auto;
+
+    .title {
+      margin-bottom: 3rem;
+    }
 
     .content {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
-      row-gap: 2rem;
-      column-gap: 2rem;
+      gap: 4rem;
       .member {
         display: flex;
         flex-direction: column;

diff --git a/src/app/event/page.tsx b/src/app/event/page.tsx
@@ -3,7 +3,7 @@ import BoxContainer from '@/components/landing/BoxContainer';
 import foo from '@/../public/images/foo.png';
 import bar from '@/../public/images/bar.png';
 import AppearFromSide from '@/components/UI/AppearFromSide';
-import Partners from "../../components/Partners";
+import Partners from '../../components/Partners';
 
 export default function Page() {
   return (
@@ -37,12 +37,18 @@ export default function Page() {
         </div>
       </AppearFromSide>
       <Title level={2}>Salon jeux</Title>
-      Contenu à venir
+      <center>Contenu à venir</center>
       <Title level={2}>Programme</Title>
       <div className="program">
-        <BoxContainer title="Jour 1 : Vendredi"></BoxContainer>
-        <BoxContainer title="Jour 2 : Samedi"></BoxContainer>
-        <BoxContainer title="Jour 3 : Dimanche"></BoxContainer>
+        <BoxContainer title="Jour 1 : Vendredi">
+          <p className="">Contenu...</p>
+        </BoxContainer>
+        <BoxContainer title="Jour 2 : Samedi">
+          <p className="">Contenu...</p>
+        </BoxContainer>
+        <BoxContainer title="Jour 3 : Dimanche">
+          <p className="">Contenu...</p>
+        </BoxContainer>
       </div>
       <Title level={2}>Lieu</Title>
       <div className="place">
@@ -58,7 +64,10 @@ export default function Page() {
       </div>
       <Title level={2}>Inscriptions</Title>
       <ol className="steps">
-        <li>Il faut d'abord cliquer sur le bouton "Connexion" dans la barre de navigation lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
+        <li>
+          Il faut d'abord cliquer sur le bouton "Connexion" dans la barre de navigation lorem ipsum dolor sit amet,
+          consectetur adipiscing elit
+        </li>
         <li>Il faut d'abord cliquer sur le bouton "Connexion" dans la barre de navigation</li>
         <li>Il faut d'abord cliquer sur le bouton "Connexion" dans la barre de navigation</li>
       </ol>

diff --git a/src/app/event/style.scss b/src/app/event/style.scss
@@ -6,7 +6,8 @@
   }
 
   .title-2 {
-    margin-top: 170px;
+    width: 90%;
+    margin: 100px auto 70px auto;
   }
 
   .text-and-image {

diff --git a/src/app/tournaments/layout.tsx b/src/app/tournaments/layout.tsx
@@ -3,7 +3,7 @@ import constellation1 from '@/../public/images/clouds/constellation-1.png';
 import constellation2 from '@/../public/images/clouds/constellation-2.png';
 import constellation3 from '@/../public/images/clouds/constellation-3.png';
 import cloud3 from '@/../public/images/clouds/cloud-3.png';
-import Partners from "../../components/Partners";
+import Partners from '../../components/Partners';
 
 const TournamentsLayout = ({ children }: { children: React.ReactNode }) => {
   return (

diff --git a/src/app/tournaments/page.tsx b/src/app/tournaments/page.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { Title } from '@/components/UI';
 import Link from 'next/link';
 import { tournaments } from '@/lib/tournaments';
-import Divider from "@/components/UI/Divider";
+import Divider from '@/components/UI/Divider';
 
 const TournamentHome = () => {
   //const dispatch = useAppDispatch();

diff --git a/src/components/UI/AppearFromSide.tsx b/src/components/UI/AppearFromSide.tsx
@@ -50,7 +50,7 @@ export default function AppearFromSide({
         threshold: 0,
       } as IntersectionObserverInit,
     ).observe(ref.current!);
-    const rect = ref.current.getBoundingClientRect();
+    const rect = ref.current!.getBoundingClientRect();
     setTranslateXData({
       offset: fromRight ? window.innerWidth - rect.left : -rect.right,
       position: fromRight ? rect.left : rect.right,

diff --git a/src/components/UI/Modal.scss b/src/components/UI/Modal.scss
@@ -35,11 +35,13 @@
 
   .modal-content {
     padding: 0 20px 20px 20px;
+    color: #000;
   }
 
   .modal-title {
     text-align: center;
     font-family: $montserrat;
+    color: #000;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 24px;

diff --git a/src/components/UI/Title.scss b/src/components/UI/Title.scss
@@ -56,7 +56,6 @@ $radius: 8px;
     font-size: 2.125rem;
     display: flex;
     align-items: center;
-    font-family: "Montserrat";
     font-weight: 800;
 
     .title-content {