redesign

ridewithwagon · Oct 28, 2024 · 1d7846b · 1d7846b
1 parent a744023
commit 1d7846b
Show file tree

Hide file tree

Showing 7 changed files with 218 additions and 38 deletions.
diff --git a/1.svg b/1.svg
diff --git a/2.svg b/2.svg
diff --git a/3.svg b/3.svg
diff --git a/googleplaybadge.png b/googleplaybadge.png
diff --git a/index.html b/index.html
@@ -12,45 +12,82 @@
 <body>
     <nav>
         <div>
-            <img src="waw.png" alt="">
-            <span>Wagon.</span>
+            <img src="logo.svg" alt="">
+        </div>
+        <div>
+            <a class="secondary" href="https://testflight.apple.com/join/M2xoL0bC">
+                <span>Faire de la publicité sur Wagon</span>
+            </a>
+            <a href="https://testflight.apple.com/join/M2xoL0bC">
+                <span>Obtenir</span>
+            </a>
         </div>
-        <a href="https://testflight.apple.com/join/M2xoL0bC">
-            <span>Obtenir</span>
-        </a>
     </nav>
 
     <main>
         <section>
             <h1>Prenez les transports simplement avec Wagon.</h1>
-            <ul>
-                <li>Départs autour de vous en temps réel</li>
-                <li>Suivi automatique du trajet en cours</li>
-                <li>Signalements d'incidents en direct</li>
+            <ul class="features">
+                <li>
+                    <img src="1.svg" alt="">
+                    <span>Départs autour de vous en temps réel</span>
+                </li>
+                <li>
+                    <img src="2.svg" alt="">
+                    <span>
+                        Suivi automatique du trajet en cours
+                    </span>
+                </li>
+                <li>
+                    <img src="3.svg" alt="">
+                    <span>
+                        Signalements d'incidents en direct
+                    </span>
+                    <span class="outside">
+                        Et bien plus
+                    </span>
+                </li>
             </ul>
-            <p>Wagon est l'application la plus simple et intuitive pour voir les informations de transports autour de
-                vous
-                et
-                planifier des trajets porte à porte*.</p>
-            <a href="https://testflight.apple.com/join/M2xoL0bC" title="Obtenir sur TestFlight">
+            <ul class="questions">
+                <li>
+                    <a href="">
+                        Où est disponible Wagon ?
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        Pourquoi Wagon plutôt qu'une autre app ?
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        Suivez l'avancée du proket sur Twitter @ridewithwagon
+                    </a>
+                </li>
+
+            </ul>
+            <a class="testflightbutton" href="https://testflight.apple.com/join/M2xoL0bC"
+                title="Obtenir sur TestFlight">
                 <img src="get.png" alt="">
             </a>
+            <a class="googleplaybutton"
+                href="https://docs.google.com/forms/d/e/1FAIpQLSdm40s7DejjgXvDYha5o11vyxZZypr-F7fa-BvnpsvGPtOxyg/viewform"
+                title="Obtenir sur GooglePlay">
+                <img src="googleplaybadge.png" alt="">
+            </a>
+            <footer class="footer">
+                <span>Développé par <strong>Arno Cellarier</strong> et <strong>Matthieu Cloët</strong>. Interface conçue
+                    par
+                    <strong>Rémy Cellarier</strong>.
+                    Tests et aide région
+                    Île-de-France: <strong>Léon Edmee</strong>. *La fonctionnalité de planification de trajets est
+                    encore en
+                    développement et sera disponible bientôt via une mise à jour logicielle.</span>
+            </footer>
         </section>
-        <img src="screens/10.png" height=" 2556" width="1179 " alt="">
+        <img src="screens/10.png" height="2556" width="1179" alt="">
     </main>
 
-    <section class="map">
-        <h2>Wagon est disponible dans les villes suivantes</h2>
-        <img src="wagonmap.png" alt="Carte des villes compatibles, avec l'Ile de France, Toulouse, Nice et Chypre UE">
-    </section>
-
-    <footer>
-        <span>Développé par <strong>Arno Cellarier</strong> et <strong>Matthieu Cloët</strong>. Interface conçue par
-            <strong>Rémy Cellarier</strong>.
-            Tests et aide région
-            Île-de-France: <strong>Léon Edmee</strong>. *La fonctionnalité de planification de trajets est encore en
-            développement et sera disponible bientôt via une mise à jour logicielle.</span>
-    </footer>
 
     <script>
         const imagesFolder = 'screens/';

diff --git a/logo.svg b/logo.svg
diff --git a/style.css b/style.css
@@ -10,6 +10,11 @@
     src: url("arialroundedmtbold.ttf");
 }
 
+a.secondary {
+    background-color: rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
 html,
 body {
     margin: 0;
@@ -27,32 +32,92 @@ body {
 }
 
 main {
-    padding: 5vw 0;
+    padding: 7vh 0;
     display: flex;
-    flex-flow: row wrap;
     gap: 4vw;
 }
 
 main>img {
-    height: min(100vh, calc(100vw / 0.7));
+    height: 70vh;
     width: auto;
     border: 3vh solid #fff4;
-    border-radius: 9vh;
+    border-radius: 8vh;
+    margin-left: 50px;
+}
+
+@media (max-width:1100px) {
+    main {
+        flex-direction: column-reverse;
+    }
+
+    main>img {
+        height: auto;
+        width: 70vw;
+    }
 }
 
 h1 {
-    font-size: max(22px, 4vw);
+    font-size: max(22px, 3.5vw);
+    letter-spacing: -0.1vw;
+    margin-top: 0;
+}
+
+.features {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    font-size: max(18px, 1.5vw);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.features li {
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 20px;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 100px;
+    width: fit-content;
+}
+
+.features .outside {
+    position: absolute;
+    right: 0;
+    transform: translateX(100%);
+    padding-left: 10px;
 }
 
-ul {
-    font-size: max(18px, 2vw);
+.features img {
+    height: 20px;
+    width: auto;
+}
+
+.questions {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    list-style: none;
+    margin: 4vh 0;
+    padding: 0;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.questions a {
+    color: white;
 }
 
 p {
     opacity: 0.7;
     font-size: max(16px, 1.5vw);
 }
 
+.footer {
+    margin-top: 5vh;
+}
+
 nav {
     display: flex;
     justify-content: space-between;
@@ -75,7 +140,7 @@ nav div span {
 nav a {
     display: grid;
     place-items: center;
-    padding: 1vh 2vw;
+    padding: 1vh 1vw;
     background-color: var(--on-background-color);
     color: var(--background-color);
     text-decoration: none;
@@ -94,9 +159,19 @@ main section {
     max-width: 44vw;
 }
 
-main section img {
-    user-select: none;
-    height: 10vh;
+.testflightbutton,
+.googleplaybutton {
+    text-decoration: none;
+}
+
+.testflightbutton img,
+.googleplaybutton img {
+    height: 4vw;
+    width: auto;
+}
+
+.googleplaybutton {
+    margin-left: 12px;
 }
 
 footer {