Finished event page

ungdev · Jul 31, 2023 · 920bf0a · 920bf0a
1 parent f2c407b
commit 920bf0a
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 0 deletions.
diff --git a/src/app/event/page.tsx b/src/app/event/page.tsx
@@ -3,6 +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";
 
 export default function Page() {
   return (
@@ -44,7 +45,24 @@ export default function Page() {
         <BoxContainer title="Jour 3 : Dimanche"></BoxContainer>
       </div>
       <Title level={2}>Lieu</Title>
+      <div className="place">
+        <iframe
+          title="Google Maps"
+          src="https://maps.google.com/maps?q=UTT+Arena&t=&z=15&ie=UTF8&iwloc=&output=embed"
+        />
+        <div className="text">
+          Le Cube - Parc des Expositions de Troyes <br /> <br />
+          20 Rue des Gayettes <br /> <br />
+          10000 Troyes
+        </div>
+      </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</li>
+        <li>Il faut d'abord cliquer sur le bouton "Connexion" dans la barre de navigation</li>
+      </ol>
+      <Partners />
     </div>
   );
 }
diff --git a/src/app/event/style.scss b/src/app/event/style.scss
@@ -44,6 +44,60 @@
       width: fit-content;
     }
   }
+
+  .place {
+    display: flex;
+    align-items: center;
+    margin-left: 48px;
+    margin-right: 91px;
+    gap: 71px;
+
+    iframe {
+      height: auto;
+      width: 60%;
+      border-radius: 30px;
+      aspect-ratio: 3 / 2;
+    }
+
+    .text {
+      width: max-content;
+      font-size: 1.5rem;
+      font-weight: 500;
+      line-height: 139%;
+    }
+  }
+
+  .steps {
+    list-style-type: none;
+    counter-reset: step-counter;
+    margin: 83px 20% 25% 7%;
+
+    li {
+      display: flex;
+      align-items: center;
+      font-size: 1.5rem;
+      font-weight: 500;
+      margin-bottom: 49px;
+    }
+
+    li:before {
+      content: counter(step-counter);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      counter-increment: step-counter;
+      width: 90px;
+      height: 90px;
+      flex-shrink: 0;  // Prevents it from shrinking do to the <li> being flex
+      margin-right: 47px;
+      font-size: 3.75rem;
+      font-weight: 800;
+      text-align: center;
+      background-color: $light-blue;
+      border-radius: 100%;
+      @include stroke(6, #000);
+    }
+  }
 }
 
 @media screen and (max-width: 1024px) {