finished page tournament

* added partners * centered the title text
ungdev · Aug 1, 2023 · 3088fcc · 3088fcc
1 parent 4ea5e41
commit 3088fcc
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 16 deletions.
diff --git a/src/app/tournaments/layout.tsx b/src/app/tournaments/layout.tsx
@@ -3,6 +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";
 
 const TournamentsLayout = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -40,6 +41,7 @@ const TournamentsLayout = ({ children }: { children: React.ReactNode }) => {
         </div>
         {children}
       </div>
+      <Partners />
     </div>
   );
 };

diff --git a/src/app/tournaments/page.tsx b/src/app/tournaments/page.tsx
@@ -4,6 +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";
 
 const TournamentHome = () => {
   //const dispatch = useAppDispatch();
@@ -27,7 +28,11 @@ const TournamentHome = () => {
 
   return (
     <>
-      <Title>Tournois</Title>
+      <div className="page-title">
+        <Divider is_white />
+        <Title align="center">Tournois</Title>
+        <Divider is_white />
+      </div>
       <div className="content">
         <div className="tournaments-list">
           {!tournaments

diff --git a/src/app/tournaments/style.scss b/src/app/tournaments/style.scss
@@ -38,64 +38,64 @@
     background-position: 50% 50%;
     transition: background 0.25s ease-in-out;
     position: relative;
-    background: linear-gradient(180deg, rgba($primary-background, 1) 0%, rgba(#94DCF2, 0) 100%), var(--background-image);
+    background: linear-gradient(180deg, rgba($primary-background, 1) 0%, rgba(#94DCF2, 0.1) 100%), var(--background-image);
     background-repeat: no-repeat;
     z-index: 0;
 
     .background {
       // This is only a container to hold the background images, but it is not actually useful
       height: 0;
-  
+
       img {
         position: absolute;
         z-index: -1;
         opacity: 20%;
-  
+
         &.constellation-1-1 {
           left: 40%;
           top: 27px;
           width: 113px;
           transform: rotate(-90deg);
         }
-  
+
         &.cloud-3 {
           left: 70%;
           width: 776px;
         }
-  
+
         &.constellation-2-1 {
           left: 24px;
           top: 25%;
           width: 188px;
           transform: rotate(-45deg);
         }
-  
+
         &.constellation-2-2 {
           left: 45%;
           top: 28%;
           width: 284px;
         }
-  
+
         &.constellation-3-1 {
           left: 3%;
           top: 55%;
           width: 218px;
           transform: rotate(-80deg);
         }
-  
+
         &.constellation-1-2 {
           left: 78%;
           top: 45%;
           width: 385px;
           transform: rotate(-30deg);
         }
-  
+
         &.constellation-1-3 {
           width: 707px;
           top: 25%;
           transform: rotate(-30deg);
         }
-  
+
         &.constellation-3-2 {
           left: 85%;
           top: 30%;
@@ -104,6 +104,23 @@
       }
     }
 
+    .page-title {
+      display: flex;
+      align-items: center;
+      justify-items: center;
+      margin-bottom: 124px;
+      margin-left: 0;
+      margin-right: 0;
+
+      .divider:nth-of-type(1) {
+        margin-left: 68px;
+      }
+
+      .divider:nth-of-type(2) {
+        margin-right: 68px;
+      }
+    }
+
     .content {
       display: flex;
       justify-content: space-between;
@@ -112,7 +129,7 @@
       .tournaments-list {
         width: 20%;
         margin-left: 5%;
-        aspect-ratio: 1/3;
+        //aspect-ratio: 1/3;
 
         .tournament {
           margin: 20px 0 20px 0;
@@ -157,13 +174,12 @@
           margin-top: 30px;
           width: 30rem;
         }
-
       }
     }
+  }
 
-    .partners {
-      padding-top: 100px;
-    }
+  .partners {
+    padding-top: 113px;
   }
 }