From 422c95728bc0740b893841a160d3740cf159a8e4 Mon Sep 17 00:00:00 2001
From: anulax1225 <anulax1225@icloud.com>
Date: Thu, 19 Dec 2024 20:38:24 +0100
Subject: [PATCH] Started mobile version

---
 public/img/contact.svg           |   2 +
 public/img/home.svg              |   4 +
 public/img/menu.svg              |   4 +
 public/img/test.svg              |   4 +
 resources/css/app.css            |  23 ++++-
 resources/views/home.blade.php   |  12 +--
 resources/views/layout.blade.php | 171 +++++++++++++++++++------------
 7 files changed, 145 insertions(+), 75 deletions(-)
 create mode 100644 public/img/contact.svg
 create mode 100644 public/img/home.svg
 create mode 100644 public/img/menu.svg
 create mode 100644 public/img/test.svg

diff --git a/public/img/contact.svg b/public/img/contact.svg
new file mode 100644
index 0000000..82a0861
--- /dev/null
+++ b/public/img/contact.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;stroke:#020202;stroke-miterlimit:10;stroke-width:1.91px;}</style></defs><rect class="cls-1" x="5.32" y="1.5" width="13.36" height="21" rx="1.91"/><line class="cls-1" x1="5.32" y1="18.68" x2="18.68" y2="18.68"/><circle class="cls-1" cx="12" cy="8.18" r="1.91"/><path class="cls-1" d="M12,10.09h0A2.86,2.86,0,0,1,14.86,13v1a0,0,0,0,1,0,0H9.14a0,0,0,0,1,0,0V13A2.86,2.86,0,0,1,12,10.09Z"/></svg>
\ No newline at end of file
diff --git a/public/img/home.svg b/public/img/home.svg
new file mode 100644
index 0000000..c3482cd
--- /dev/null
+++ b/public/img/home.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3103 1.77586C11.6966 1.40805 12.3034 1.40805 12.6897 1.77586L20.6897 9.39491L23.1897 11.7759C23.5896 12.1567 23.605 12.7897 23.2241 13.1897C22.8433 13.5896 22.2103 13.605 21.8103 13.2241L21 12.4524V20C21 21.1046 20.1046 22 19 22H14H10H5C3.89543 22 3 21.1046 3 20V12.4524L2.18966 13.2241C1.78972 13.605 1.15675 13.5896 0.775862 13.1897C0.394976 12.7897 0.410414 12.1567 0.810345 11.7759L3.31034 9.39491L11.3103 1.77586ZM5 10.5476V20H9V15C9 13.3431 10.3431 12 12 12C13.6569 12 15 13.3431 15 15V20H19V10.5476L12 3.88095L5 10.5476ZM13 20V15C13 14.4477 12.5523 14 12 14C11.4477 14 11 14.4477 11 15V20H13Z" fill="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/public/img/menu.svg b/public/img/menu.svg
new file mode 100644
index 0000000..335cb31
--- /dev/null
+++ b/public/img/menu.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6H20M4 12H20M4 18H20" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/public/img/test.svg b/public/img/test.svg
new file mode 100644
index 0000000..61b2cd4
--- /dev/null
+++ b/public/img/test.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.94977 13.6067L17.1422 11.4854M7.94977 13.6067L13.6066 19.2635C15.1687 20.8256 17.7014 20.8256 19.2635 19.2635C20.8256 17.7014 20.8256 15.1687 19.2635 13.6066L17.1422 11.4854M7.94977 13.6067L4.06066 9.71751L3 10.7782M17.1422 11.4854L9.71751 4.06066L10.7782 3" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/resources/css/app.css b/resources/css/app.css
index 4090c21..f10cef3 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -79,19 +79,26 @@ @layer utilities {
 
     .focus-camera {
         animation-name: blur-anim;
-        animation-duration: 12s;
+        animation-duration: 8s;
         animation-iteration-count: infinite;
         animation-timing-function: ease-in-out;
         animation-direction: alternate;
     }
 
+    @media (width <= 1024px)  {
+        .slider {
+            left: -150%;
+            animation-name: slide-mobile;
+        }
+    }
+
     @keyframes blur-anim {
         from {
             filter: blur(0px);
         }
 
         to {
-            filter: blur(5px);
+            filter: blur(3px);
         }
     }
 
@@ -101,14 +108,14 @@ @layer utilities {
             transform: scale(1);
         }
         to {
-            background-color: rgb(234 88 12 / 0.8);
+            background-color: rgb(234 88 12);
             transform: scale(0.9);
         }
     }
 
     @keyframes social-icon-out-anim {
         from {
-            background-color: rgb(234 88 12 / 0.8);
+            background-color: rgb(234 88 12);
             transform: scale(0.9);
         }
         to {
@@ -126,6 +133,14 @@ @layer utilities {
         }
     }
 
+    @keyframes slide-mobile {
+        from {
+            left: -150%;
+        }
+        to {
+            left: 150%;
+        }
+    }
 }
 
 
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
index 8583d8e..3e4e03b 100644
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@@ -2,15 +2,15 @@
 
 @section("content")
     <div class="relative flex flex-col items-center justify-center overflow-hidden">
-        <img class="w-full absolute right-0 left-0 -z-10 focus-camera" src="/img/immo.jpg">
+        <img class="absolute right-0 left-0 -z-10 focus-camera" src="/img/immo.jpg">
         <div class="desktop:w-3/4 laptop:w-[90%] bg-gradient-to-tr from-orange-600/80 to-orange-400/80 rounded-lg 
-        shadow-lg shadow-gray-800 flex flex-col items-center p-14 my-7">
-            <h5 class="text-[6rem] font-bold mx-auto leading-none">Ma Visite 360</h5>
-            <h5 class="text-[1.2rem] italic text-center mx-auto">Ma visite, mon choix à 360°</h5>
+        shadow-lg shadow-gray-800 flex flex-col items-center laptop:p-14 p-5 my-7">
+            <h5 class="laptop:text-[6rem] text-[2rem] font-bold mx-auto leading-none">Ma Visite 360</h5>
+            <h5 class="laptop:text-xl text-sm italic text-center mx-auto">Ma visite, mon choix à 360°</h5>
         </div>
     </div>
-    <div class="flex flex-col desktop:w-3/4 laptop:w-[90%] h-fit mx-auto mb-10">
-        <h1 class="mt-10 px-3 text-[3rem] font-bold border-b border-gray-750 dark:border-gray-200">Histoire</h1>
+    <div class="flex flex-col desktop:w-3/4 laptop:w-[90%] px-3 h-fit mx-auto mb-10">
+        <h1 class="mt-10 px-3 laptop:text-[3rem] text-3xl font-bold border-b border-gray-750 dark:border-gray-200">Histoire</h1>
         <div class="w-full flex items-start mt-2">
             <h2 class="pl-3 mr-16 w-1/2 text-[1.5rem] font-semibold">
             Fondée en 2024 et basée à Neuchâtel.<br> 
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
index f65e23c..af5aae4 100644
--- a/resources/views/layout.blade.php
+++ b/resources/views/layout.blade.php
@@ -13,83 +13,124 @@
         @vite("resources/js/app.js")
         @vite("resources/css/app.css")
     </head>
-    <body class="w-screen h-screen antialiased font-robo bg-gray-850 dark:bg-gray-50 -z-10">
+    <body class="relative w-screen h-screen antialiased font-robo bg-gray-850 dark:bg-gray-50 -z-10 mt-16">
         <!--<img src="/img/lightsource.png" class="w-full absolute top-0 right-0 left-0 -z-10">-->
-        <nav class="sticky right-0 left-0 top-0 h-16 z-50">
-            <div class="w-full h-full flex items-center justify-center bg-gradient-to-r from-gray-850 dark:from-gray-0 via-gray-600 dark:via-gray-300 to-gray-850 dark:to-gray-0 pb-[2px]">
-                <div class="w-full h-full desktop:px-[12.5%] laptop:px-[5%] flex justify-between bg-gray-850 dark:bg-gray-0">
-                    <div class="flex items-center h-full">
-                        <a href="/" class="h-full"><img src="/img/logo-mavisite360.png" class="h-full hover:scale-105 mr-2 p-3"></a>
-                        <h5 class="text-lg text-white bg-gradient-to-tr from-orange-400 to-orange-600 rounded-lg px-4 font-semibold">{{ $title }}</h5>
+        <nav class="fixed right-0 left-0 top-0 h-16 z-50 w-screen">
+            <div class="relative w-full h-full flex items-center justify-center bg-gradient-to-r from-gray-750 dark:from-gray-0 via-gray-600 dark:via-gray-300 to-gray-750 dark:to-gray-0 pb-[2px]">
+                <div class="w-full h-full desktop:px-[12.5%] laptop:px-[5%] bg-gray-750 dark:bg-white">
+                    <div class="w-full h-full flex justify-between">    
+                        <div class="flex items-center h-full">
+                            <a href="/" class="h-full"><img src="/img/logo-mavisite360.png" class="h-full hover:scale-105 laptop:mr-2 p-3"></a>
+                            <h5 class="laptop:text-lg text-sm text-white cursor-pointer bg-gradient-to-tr from-orange-400 to-orange-600 rounded-lg laptop:px-4 px-3 laptop:py-0 py-1 font-semibold">{{ $title }}</h5>
+                        </div>
+                        <div class="items-center h-full laptop:flex hidden">
+                            <a href="/" class="flex items-center">
+                                <h1 class="mr-4 text-xl dark:text-gray-400 font-bold
+                                hover:text-white dark:hover:text-gray-600 hover:scale-110">home</h1>
+                            </a>
+                            <a href="/demo" class="flex items-center">
+                                <h1 class="font-bold mr-4 text-xl dark:text-gray-400
+                                hover:text-white dark:hover:text-gray-600 hover:scale-110">demo</h1>
+                            </a>
+                            <a href="#contact" class="flex items-center">  
+                                <h1 class="font-bold mr-7 text-xl dark:text-gray-400
+                                hover:text-white dark:hover:text-gray-600 hover:scale-110">contact</h1>
+                            </a>
+                            <div class="flex items-center h-fit py-[8px] pl-5 border-l border-gray-700">
+                                <button id="btn-theme" class="relative group flex items-center justify-center mr-6" 
+                                onclick="window.themeToggle()">
+                                    <img src="/img/light-2.svg" class="dark:w-[1.4rem] w-[1.6rem] hover:scale-105 invert dark:invert-0">
+                                </button>
+                                <img src="/img/instagram.svg" class="w-[1.6rem] hover:scale-105 invert dark:invert-0 mr-3">
+                                <img src="/img/twitter.svg" class="w-[1.6rem] hover:scale-105 invert dark:invert-0">
+                            </div>
+                        </div>
+                        <div class="laptop:hidden flex h-full py-3 px-2 cursor-pointer" onclick="document.querySelector('#panel-mobile').classList.toggle('hidden')">
+                            <img src="/img/menu.svg" class="h-full hover:scale-105 invert dark:invert-0">
+                        </div>
                     </div>
-                    <div class="flex items-center h-full">
-                        <a href="/"><h1 class="mr-4 text-xl font-bold hover:scale-110">home</h1></a>
-                        <a href="/demo"><h1 class="font-bold mr-4 text-xl hover:scale-110">demo</h1></a>
-                        <a href="#contact"><h1 class="font-bold mr-9 text-xl hover:scale-110">contact</h1></a>
-                        <div class="flex items-center h-fit py-[8px] pl-5 border-l border-gray-700">
-                            <button id="btn-theme" class="relative group flex items-center justify-center mr-6" 
-                            onclick="window.themeToggle()">
-                                <img src="/img/light-2.svg" class="w-[1.4rem] hover:scale-105 invert dark:invert-0">
-                            </button>
-                            <img src="/img/instagram.svg" class="w-[1.6rem] hover:scale-105 invert dark:invert-0 mr-3">
-                            <img src="/img/twitter.svg" class="w-[1.6rem] hover:scale-105 invert dark:invert-0">
+                    <div id="panel-mobile" class="laptop:hidden hidden absolute top-full right-0 left-0 bg-gray-750 dark:bg-white 
+                        border-b border-gray-650 dark:border-gray-500">
+                        <div class="laptop:items-center h-full flex flex-col pt-2">
+                            <a href="/" class="flex items-center px-2 focus:scale-105 focus:text-white dark:focus:text-gray-600">
+                                <img src="/img/home.svg" class="w-[1.6rem] invert dark:invert-0 mr-3">
+                                <h1 class="text-xl dark:text-gray-900 font-bold">home</h1>
+                            </a>
+                            <a href="/demo" class="flex items-center px-2 mt-2 focus:scale-105 focus:text-white dark:focus:text-gray-600">
+                                <img src="/img/test.svg" class="w-[1.6rem] invert dark:invert-0 mr-3">
+                                <h1 class="font-bold text-xl dark:text-gray-900">demo</h1>
+                            </a>
+                            <a href="#contact" class="flex items-center px-2 mt-2 focus:scale-105 focus:text-white dark:focus:text-gray-600">
+                                <img src="/img/contact.svg" class="w-[1.6rem] invert dark:invert-0 mr-3">
+                                <h1 class="font-bold text-xl dark:text-gray-900">contact</h1>
+                            </a>
+                            <div class="flex items-center h-fit mt-5 px-5 py-2 border-t border-gray-700 dark:border-gray-300 justify-end">
+                                <button id="btn-theme" class="relative group flex items-center justify-center mr-6" 
+                                onclick="window.themeToggle()">
+                                    <img src="/img/light-2.svg" class="dark:w-[1.4rem] w-[1.6rem] hover:scale-105 invert dark:invert-0">
+                                </button>
+                                <img src="/img/instagram.svg" class="w-[1.6rem] hover:scale-105 invert dark:invert-0 mr-2">
+                                <img src="/img/twitter.svg" class="w-[1.6rem] hover:scale-105 invert dark:invert-0">
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </nav>
-        @yield("content")
-        <footer class="w-full bg-gray-800 dark:bg-gray-0">
-            <div class="desktop:w-3/4 laptop:w-[90%] px-3 mx-auto flex flex-col items-center justify-between">
-                <div class="w-full mt-5 flex items-center">
-                    <div id="contact" class="w-1/3 mb-10">
-                        <h2 class="font-semibold text-[1.7rem] border-b-2 border-gray-750 w-3/4 pr-20 mb-2">Nous contacter</h2>
-                        <div class="w-full flex">
-                            <div class="px-3">
-                                <h4 class="font-semibold mb-1">+41 78 694 09 79</h4>
-                                <h4 class="font-semibold mb-1">contact@mv360.ch</h4>
-                                <h4 class="font-semibold">Rue de la Maladière 80</h4>
+        <div class="relative w-full z-10">
+            @yield("content")
+            <footer class="w-full bg-gray-800 dark:bg-white">
+                <div class="desktop:w-3/4 laptop:w-[90%] w-full px-3 mx-auto flex flex-col items-center justify-between">
+                    <div class="w-full mt-5 flex laptop:flex-row flex-col laptop:items-center">
+                        <div id="contact" class="laptop:w-1/3 w-full mb-10">
+                            <h2 class="font-semibold text-[1.7rem] border-b-2 border-gray-750 laptop:w-3/4 pr-20 mb-2">Nous contacter</h2>
+                            <div class="w-full flex">
+                                <div class="laptop:px-3">
+                                    <h4 class="font-semibold mb-1">+41 78 694 09 79</h4>
+                                    <h4 class="font-semibold mb-1">contact@mv360.ch</h4>
+                                    <h4 class="font-semibold">Rue de la Maladière 80</h4>
+                                </div>
+                                <a target="_blank" href="mailto:contact@mv360.ch?subject=Mail de contact de &#34;Ma Visite 360&#34;" 
+                                class="h-fit rounded-lg laptop:text-sm text-[0.75rem] hover:scale-105 bg-orange-600 px-4 py-2 text-white font-bold mb-2">
+                                    Envoyer un mail
+                                </a>
                             </div>
-                            <a target="_blank" href="mailto:contact@mv360.ch?subject=Mail de contact de &#34;Ma Visite 360&#34;" 
-                            class="h-fit rounded-lg text-sm hover:scale-105 bg-orange-600 px-4 py-2 text-white font-bold mb-2">
-                                Envoyer un mail
-                            </a>
                         </div>
-                    </div>
-                    <div class="flex items-start justify-evenly w-1/3 mb-10">
-                        <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
-                            <img src="/img/linkedin.svg" class="w-[2rem] brightness-0 invert dark:invert-0">
-                        </div>
-                        <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
-                            <img src="/img/discord.svg" class="w-[2rem] invert dark:invert-0">
-                        </div>
-                        <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
-                            <img src="/img/facebook.svg" class="w-[2rem] invert dark:invert-0">
-                        </div>
-                        <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
-                            <img src="/img/instagram.svg" class="w-[2rem] invert dark:invert-0">
-                        </div>
-                        <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
-                            <img src="/img/twitter.svg" class="w-[2rem] invert dark:invert-0">
+                        <div class="flex items-start justify-evenly laptop:w-1/3 w-full mb-10">
+                            <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
+                                <img src="/img/linkedin.svg" class="w-[2rem] brightness-0 invert dark:invert-0">
+                            </div>
+                            <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
+                                <img src="/img/discord.svg" class="w-[2rem] invert dark:invert-0">
+                            </div>
+                            <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
+                                <img src="/img/facebook.svg" class="w-[2rem] invert dark:invert-0">
+                            </div>
+                            <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
+                                <img src="/img/instagram.svg" class="w-[2rem] invert dark:invert-0">
+                            </div>
+                            <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
+                                <img src="/img/twitter.svg" class="w-[2rem] invert dark:invert-0">
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="w-full mt-10 flex flex-col items-center">
-                    <h2 class="font-semibold text-[1.7rem] mb-1">Nos partenaires</h2>
-                    <div class="relative w-full flex items-center h-20 mb-5 overflow-hidden">
-                        <img src="/img/panoee.png" class="w-32 slider" style="--delay: 0s;">
-                        <img src="/img/infomaniak.png" class="w-32 slider" style="--delay: 2s;">
-                        <img src="/img/cpne.jpg" class="w-32 slider" style="--delay: 4s;">
-                        <img src="/img/entreprise_immo_1.png" class="w-32 slider" style="--delay: 6s;">
-                        <img src="/img/entreprise_immo_2.jpeg" class="w-32 slider" style="--delay: 8s;">
-                        <img src="/img/entreprise_immo_3.png" class="w-32 slider" style="--delay: 10s;">
-                        <img src="/img/entreprise_immo_4.png" class="w-32 slider" style="--delay: 12s;">
-                        <img src="/img/entreprise_immo_5.webp" class="w-32 slider" style="--delay: 14s;">
-                        <img src="/img/entreprise_immo_6.png" class="w-32 slider" style="--delay: 16s;">
+                    <div class="w-full mt-10 flex flex-col items-center">
+                        <h2 class="font-semibold text-[1.7rem] mb-1">Nos partenaires</h2>
+                        <div class="relative w-full flex items-center h-20 mb-5 overflow-hidden">
+                            <img src="/img/panoee.png" class="laptop:w-32 w-16 slider" style="--delay: 0s;">
+                            <img src="/img/infomaniak.png" class="laptop:w-32 w-16 slider" style="--delay: 2s;">
+                            <img src="/img/cpne.jpg" class="laptop:w-32 w-16 slider" style="--delay: 4s;">
+                            <img src="/img/entreprise_immo_1.png" class="laptop:w-32 w-16 slider" style="--delay: 6s;">
+                            <img src="/img/entreprise_immo_2.jpeg" class="laptop:w-32 w-16 slider" style="--delay: 8s;">
+                            <img src="/img/entreprise_immo_3.png" class="laptop:w-32 w-16 slider" style="--delay: 10s;">
+                            <img src="/img/entreprise_immo_4.png" class="laptop:w-32 w-16 slider" style="--delay: 12s;">
+                            <img src="/img/entreprise_immo_5.webp" class="laptop:w-32 w-16 slider" style="--delay: 14s;">
+                            <img src="/img/entreprise_immo_6.png" class="laptop:w-32 w-16 slider" style="--delay: 16s;">
+                        </div>
                     </div>
+                    <p class="laptop:text-lg text-sm italic laptop:w-1/3 w-full laptop:text-right text-center self-end pb-2">&copy; 2024 Créer par l'équipe Ma Visite 360</p>
                 </div>
-                <p class="italic w-1/3 text-right self-end pb-2">&copy; 2024 Créer par l'équipe Ma Visite 360</p>
-            </div>
-        </footer>
+            </footer>
+        </div>
     </body>
 </html>
\ No newline at end of file