anulax
/
visite360.anulax.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

last modif

Browse Source
main
anulax1225 ago%!(EXTRA string=3 months)
parent 422c95728b
commit d236cf555d
8 changed files with 114 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/favicon.ico
  2. 10
      public/img/couleur.svg
  3. 2
      resources/css/app.css
  4. 4
      resources/js/app.js
  5. 14
      resources/views/color.blade.php
  6. 7
      resources/views/demo.blade.php
  7. 112
      resources/views/home.blade.php
  8. 49
      resources/views/layout.blade.php

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 0 B

After

Width:  |  Height:  |  Size: 116 KiB

10
public/img/couleur.svg
Unescape View File

@ -0,0 +1,10 @@
<?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="M14 12.5001C14 13.3285 13.3284 14.0001 12.5 14.0001C11.6716 14.0001 11 13.3285 11 12.5001C11 11.6717 11.6716 11.0001 12.5 11.0001C13.3284 11.0001 14 11.6717 14 12.5001Z" fill="#0F0F0F"/>
<path d="M16.5 10.0001C17.3284 10.0001 18 9.32854 18 8.50011C18 7.67169 17.3284 7.00011 16.5 7.00011C15.6716 7.00011 15 7.67169 15 8.50011C15 9.32854 15.6716 10.0001 16.5 10.0001Z" fill="#0F0F0F"/>
<path d="M13 6.50011C13 7.32854 12.3284 8.00011 11.5 8.00011C10.6716 8.00011 10 7.32854 10 6.50011C10 5.67169 10.6716 5.00011 11.5 5.00011C12.3284 5.00011 13 5.67169 13 6.50011Z" fill="#0F0F0F"/>
<path d="M7.50001 12.0001C8.32844 12.0001 9.00001 11.3285 9.00001 10.5001C9.00001 9.67169 8.32844 9.00011 7.50001 9.00011C6.67158 9.00011 6.00001 9.67169 6.00001 10.5001C6.00001 11.3285 6.67158 12.0001 7.50001 12.0001Z" fill="#0F0F0F"/>
<path d="M14 17.5001C14 18.3285 13.3284 19.0001 12.5 19.0001C11.6716 19.0001 11 18.3285 11 17.5001C11 16.6717 11.6716 16.0001 12.5 16.0001C13.3284 16.0001 14 16.6717 14 17.5001Z" fill="#0F0F0F"/>
<path d="M7.50001 17.0001C8.32844 17.0001 9.00001 16.3285 9.00001 15.5001C9.00001 14.6717 8.32844 14.0001 7.50001 14.0001C6.67158 14.0001 6.00001 14.6717 6.00001 15.5001C6.00001 16.3285 6.67158 17.0001 7.50001 17.0001Z" fill="#0F0F0F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5017 1.02215C15.4049 0.791746 19.5636 2.32444 21.8087 5.41131C22.5084 6.37324 22.8228 7.63628 22.6489 8.83154C22.471 10.054 21.7734 11.2315 20.4472 11.8945C19.6389 12.2987 18.7731 12.9466 18.2401 13.668C17.7158 14.3778 17.6139 14.9917 17.8944 15.5529C18.4231 16.6102 18.8894 17.9257 18.8106 19.1875C18.7699 19.8375 18.5828 20.4946 18.1664 21.0799C17.7488 21.6667 17.1448 22.1192 16.3714 22.4286C14.6095 23.1333 12.6279 23.1643 10.8081 22.8207C8.98579 22.4765 7.24486 21.7421 5.92656 20.8194C4.00568 19.4748 2.47455 17.6889 1.71371 15.4464C0.9504 13.1965 0.995912 10.5851 2.06024 7.65803C3.64355 3.30372 7.56248 1.25469 11.5017 1.02215ZM11.6196 3.01868C8.26589 3.21665 5.18483 4.9176 3.93984 8.34149C3.00414 10.9148 3.01388 13.0536 3.60768 14.8038C4.20395 16.5613 5.42282 18.0255 7.07347 19.1809C8.14405 19.9303 9.6169 20.5604 11.1792 20.8554C12.7442 21.151 14.3181 21.0959 15.6286 20.5716C16.308 20.2999 16.7678 19.8099 16.8145 19.0627C16.8606 18.3245 16.5769 17.3901 16.1056 16.4473C15.3639 14.9639 15.8542 13.5318 16.6315 12.4796C17.4002 11.4391 18.5455 10.6093 19.5528 10.1057C20.2266 9.76878 20.5747 9.19623 20.6697 8.54355C20.7686 7.86365 20.5831 7.12638 20.1913 6.58769C18.4364 4.17486 15.0093 2.81858 11.6196 3.01868Z" fill="#0F0F0F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

2
resources/css/app.css
Unescape View File

@ -98,7 +98,7 @@ @layer utilities {
} }
to { to {
filter: blur(3px); filter: blur(2px);
} }
} }

4
resources/js/app.js
Unescape View File

@ -9,10 +9,10 @@ window.addEventListener("scroll", () => {
function themeToggle() { function themeToggle() {
document.querySelector("html").classList.toggle("dark"); document.querySelector("html").classList.toggle("dark");
document.querySelector("#btn-theme").querySelector("img").setAttribute("src", document.querySelectorAll(".btn-theme").forEach(btn => btn.querySelector("img").setAttribute("src",
document.querySelector("html").classList.contains("dark") ? document.querySelector("html").classList.contains("dark") ?
"/img/dark.svg" : "/img/light-2.svg" "/img/dark.svg" : "/img/light-2.svg"
) ));
} }
window.themeToggle = themeToggle; window.themeToggle = themeToggle;

14
resources/views/color.blade.php
Unescape View File

@ -9,8 +9,8 @@
@vite("resources/js/app.js") @vite("resources/js/app.js")
@vite("resources/css/app.css") @vite("resources/css/app.css")
</head> </head>
<body class="relative w-screen h-screen flex flex-col bg-gray-700"> <body class="relative w-screen min-w-[1200px] h-screen flex flex-col bg-gray-700">
<img src="/img/logo-mavisite360.png" class="absolute w-[5rem] m-2"> <a href="/"><img src="/img/logo-mavisite360.png" class="absolute w-[5rem] m-2"></a>
<div class="w-5/6 flex justify-center items-center mt-10 mx-auto p-3 h-fit rounded-xl bg-black"> <div class="w-5/6 flex justify-center items-center mt-10 mx-auto p-3 h-fit rounded-xl bg-black">
<div class="w-[5rem] h-[5rem] rounded-full bg-orange-50 mx-1"></div> <div class="w-[5rem] h-[5rem] rounded-full bg-orange-50 mx-1"></div>
<div class="w-[5rem] h-[5rem] rounded-full bg-orange-100 mx-1"></div> <div class="w-[5rem] h-[5rem] rounded-full bg-orange-100 mx-1"></div>
@ -47,11 +47,11 @@
</div> </div>
<div class="w-full flex"> <div class="w-full flex">
<div class="m-10"> <div class="m-10">
<h1 class="text-gray-50 text-[5rem]">Titre 1</h1> <h1 class="text-gray-50 text-[5rem] font-bold">Titre 1</h1>
<h2 class="text-gray-100 text-[4rem]">Titre 2</h2> <h2 class="text-gray-100 text-[4rem] font-semibold">Titre 2</h2>
<h3 class="text-gray-150 text-[3rem]">Titre 3</h3> <h3 class="text-gray-150 text-[3rem] font-semibold">Titre 3</h3>
<h4 class="text-gray-200 text-[2rem]">Text</h4> <h4 class="text-gray-200 text-[2rem] font-semibold">Text</h4>
<p class="text-gray-250 text-[1rem]">Sous text</p> <p class="text-gray-250 text-[1rem] font-semibold">Sous text</p>
</div> </div>
<div class="bg-gray-800 rounded-xl px-10 py-5 shadow-xl shadow-gray-800 w-[30rem] m-10"> <div class="bg-gray-800 rounded-xl px-10 py-5 shadow-xl shadow-gray-800 w-[30rem] m-10">
<div class="flex items-center w-full border-b border-gray-150 mb-4 pb-2"> <div class="flex items-center w-full border-b border-gray-150 mb-4 pb-2">

7
resources/views/demo.blade.php
Unescape View File

@ -1,10 +1,11 @@
@extends("layout") @extends("layout")
@section("content") @section("content")
<div class="flex flex-col desktop:w-3/4 laptop:w-[90%] mx-auto mt-2 pt-5 h-full"> <div class="flex flex-col desktop:w-3/4 laptop:w-[90%] mx-auto mt-2 pt-5 px-3 h-full">
<h1 class="px-3 text-[3rem] font-semibold border-b border-gray-750 mb-5">Demo</h1> <h1 class="px-3 text-[3rem] font-semibold border-b border-gray-750 mb-5">Demo</h1>
<div class="w-full h-3/4 bg-gradient-to-r from-orange-400 to-orange-600 p-[3px] rounded-2xl mt-2 shadow-sm shadow-gray-950 overflow-hidden"> <div class="w-full h-[40rem] bg-gradient-to-r from-orange-400 to-orange-600
<div class="rounded-2xl bg-gray-900 p-[30px] overflow-hidden w-full h-full"> laptop:p-[3px] p-[2px] rounded-2xl mt-2 shadow-sm shadow-gray-950 overflow-hidden mb-6">
<div class="rounded-2xl bg-gray-900 laptop:p-[30px] overflow-hidden w-full h-full">
<div class="rounded-xl overflow-hidden w-full h-full shadow-xl shadow-gray-950"> <div class="rounded-xl overflow-hidden w-full h-full shadow-xl shadow-gray-950">
<iframe src="https://tour.panoee.net/natadesa-endek/62621a50118202256c6ab134" class="w-full h-full"></iframe> <iframe src="https://tour.panoee.net/natadesa-endek/62621a50118202256c6ab134" class="w-full h-full"></iframe>
</div> </div>

112
resources/views/home.blade.php
Unescape View File

@ -2,50 +2,53 @@
@section("content") @section("content")
<div class="relative flex flex-col items-center justify-center overflow-hidden"> <div class="relative flex flex-col items-center justify-center overflow-hidden">
<img class="absolute right-0 left-0 -z-10 focus-camera" src="/img/immo.jpg"> <img class="absolute w-full 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 <div class="desktop:w-3/4 laptop:w-[90%] w-[95%] bg-gradient-to-tr from-orange-600/95 to-orange-400/95 rounded-lg
shadow-lg shadow-gray-800 flex flex-col items-center laptop:p-14 p-5 my-7"> shadow-lg shadow-gray-800 flex flex-col items-center laptop:p-14 p-5 laptop:my-7 my-4">
<h5 class="laptop:text-[6rem] text-[2rem] font-bold mx-auto leading-none">Ma Visite 360</h5> <h5 class="laptop:text-[6rem] text-5xl 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> <h5 class="laptop:text-xl text-sm italic text-center mx-auto">Ma visite, mon choix à 360°</h5>
</div> </div>
</div> </div>
<div class="flex flex-col desktop:w-3/4 laptop:w-[90%] px-3 h-fit mx-auto mb-10"> <div class="flex flex-col desktop:w-3/4 laptop:w-[90%] px-5 h-fit mx-auto laptop:my-10 my-2">
<h1 class="mt-10 px-3 laptop:text-[3rem] text-3xl font-bold border-b border-gray-750 dark:border-gray-200">Histoire</h1> <h1 class="laptop:pb-5 px-3 laptop:text-[3rem] text-2xl font-bold border-b border-gray-750 dark:border-gray-200">Histoire</h1>
<div class="w-full flex items-start mt-2"> <div class="w-full flex laptop:flex-row flex-col items-start mt-2 pb-2 border-b border-gray-750 dark:border-gray-200">
<h2 class="pl-3 mr-16 w-1/2 text-[1.5rem] font-semibold"> <h2 class="laptop:pl-3 laptop:mr-16 laptop:mt-0 mb-4 laptop:w-1/2 laptop:text-2xl text-md font-semibold">
Fondée en 2024 et basée à Neuchâtel.<br> Fondée en 2024 et basée à Neuchâtel.<br>
"Ma Visite 360" est une entreprise fictive spécialisée dans les technologies immersives de visite virtuelle. "Ma Visite 360" est une entreprise fictive spécialisée dans les technologies immersives de visite virtuelle.
</h2> </h2>
<div class="mt-1"> <div class="mt-1">
<h2 class="text-[1.3rem]"> <h2 class="laptop:text-xl text-sm">
"Ma Visite 360" propose un service novateur de visites virtuelles immersives 360°, "Ma Visite 360" propose un service novateur de visites virtuelles immersives 360°,
destiné principalement aux agences immobilières.<br> destiné principalement aux agences immobilières.<br>
Notre solution clé en main englobe toutes les étapes : Notre solution clé en main englobe toutes les étapes :
</h2> </h2>
<ul class="text-gray-50 text-[1.3rem] list-disc px-7"> <ul class="text-gray-50 dark:text-gray-900 laptop:text-xl text-sm text-[0.8rem] list-disc px-7">
<li><h3 class="font-semibold">Prise de contact.</h3></li> <li><h3 class="font-semibold">Prise de contact.</h3></li>
<li><h3 class="font-semibold">Capture de photos professionnelles.</h3></li> <li><h3 class="font-semibold">Capture de photos professionnelles.</h3></li>
<li><h3 class="font-semibold">Création de visites virtuelles interactives et hébergement en ligne.</h3></li> <li><h3 class="font-semibold">Création de visites virtuelles interactives et hébergement en ligne.</h3></li>
</ul> </ul>
<h2 class="text-[1.3rem]"> <h2 class="laptop:text-xl text-sm">
Cette approche permet une intégration simple et rapide sur les sites web des clients. Cette approche permet une intégration simple et rapide sur les sites web des clients.
</h2> </h2>
</div> </div>
</div> </div>
<div class="w-full h-fit flex items-center justify-center flex-col border-b border-gray-750 dark:border-gray-200 pb-1"> <div class="w-full h-fit flex items-center justify-center flex-col border-b border-gray-750 dark:border-gray-200 pb-1">
<div class="mt-5 flex w-full items-center"> <div class="w-full mt-5 flex laptop:flex-row flex-col items-center">
<div class="w-[40%] p-3 hover:scale-105 m-3 bg-gradient-to-tr from-orange-600 to-orange-500 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg"> <div class="laptop:w-[40%] w-full p-4 hover:scale-105 m-3 bg-gradient-to-tr from-orange-600 to-orange-500 shadow-md
<h5 class="text-[2rem] font-semibold w-full text-center">Vision</h5> shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="px-2 text-[1.2rem] font-semibold">Transformer la présentation immobilière en une expérience immersive, accessible et sans contraintes.</h5> <h5 class="laptop:text-3xl text-2xl font-semibold w-full text-center">Vision</h5>
</div> <h5 class="laptop:px-2 laptop:text-lg text-md font-semibold">Transformer la présentation immobilière en une expérience immersive, accessible et sans contraintes.</h5>
<div class="w-[40%] p-6 hover:scale-105 m-3 bg-gradient-to-tl from-orange-500 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg"> </div>
<h5 class="text-[2rem] font-semibold text-center">Mission</h5> <div class="laptop:w-[40%] w-full laptop:p-6 p-4 hover:scale-105 m-3 bg-gradient-to-tl from-orange-500 to-orange-600
<h5 class="px-2 text-[1.2rem] pb-2 font-semibold">Offrir une solution clé en main de visites virtuelles 360°, permettant aux agences immobilières et autres secteurs de valoriser leurs espaces et de gagner en efficacité.</h5> shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
</div> <h5 class="laptop:text-3xl text-2xl font-semibold text-center">Mission</h5>
<div class="w-[20%] p-3 hover:scale-105 m-3 bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg"> <h5 class="laptop:px-2 laptop:text-lg text-md pb-2 font-semibold">Offrir une solution clé en main de visites virtuelles 360°, permettant aux agences immobilières et autres secteurs de valoriser leurs espaces et de gagner en efficacité.</h5>
<h5 class="text-[2rem] font-semibold text-center">Valeurs</h5> </div>
<ul class="text-gray-50 text-[1.2rem] list-disc px-5"> <div class="laptop:w-[20%] p-4 hover:scale-105 m-3 bg-gradient-to-r from-orange-500 to-orange-600
shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="laptop:text-3xl text-2xl font-semibold text-center">Valeurs</h5>
<ul class="text-gray-50 laptop:text-lg text-md list-disc laptop:px-5 px-3">
<li><h5 class="font-semibold">Innovation</h5></li> <li><h5 class="font-semibold">Innovation</h5></li>
<li><h5 class="font-semibold">Simplicité</h5></li> <li><h5 class="font-semibold">Simplicité</h5></li>
<li><h5 class="font-semibold">Professionnalisme</h5></li> <li><h5 class="font-semibold">Professionnalisme</h5></li>
@ -54,56 +57,59 @@
</div> </div>
</div> </div>
<h1 class="px-3 text-[3rem] font-semibold mt-8 border-b border-gray-750 dark:border-gray-200 mb-5">Services et offres</h1> <h1 class="px-3 laptop:pb-5 laptop:text-[3rem] text-2xl font-semibold mt-8 border-b border-gray-750 dark:border-gray-200 mb-5">Services et offres</h1>
<div class="w-full px-3 flex justify-between items-center"> <div class="w-full laptop:px-3 flex laptop:flex-row flex-col laptop:justify-between items-center laptop:mb-0 mb-6">
<div class="w-[40%] p-8 mr-2 hover:scale-[1.01] bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg"> <div class="laptop:w-[60%] w-full laptop:p-5 p-4 laptop:mr-2 laptop:mb-0 mb-6 hover:scale-[1.01] bg-gradient-to-r from-orange-500 to-orange-600
<h5 class="text-[2rem] font-semibold text-center">Visite</h5> shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<ul class="text-gray-50 text-[1rem] list-disc px-5"> <h5 class="laptop:text-3xl text-2xl font-semibold text-center mb-1">Valeur ajoutée</h5>
<li><h5 class="font-semibold mb-2">Capture des photos 360° haute définition.</h5></li> <ul class="text-gray-50 laptop:text-lg text-md list-disc laptop:px-5 px-3">
<li><h5 class="font-semibold mb-2">Création de visites virtuelles interactives.</h5></li>
<li><h5 class="font-semibold">Hébergement en ligne sur notre plateforme.</h5></li>
</ul>
</div>
<div class="w-[60%] p-5 ml-1 hover:scale-[1.01] bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="text-[2rem] font-semibold text-center">Valeur ajoutée</h5>
<ul class="text-gray-50 text-[1rem] list-disc px-5">
<li><h5 class="font-semibold mb-2">Simplifie les visites pour les acheteurs potentiels.</h5></li> <li><h5 class="font-semibold mb-2">Simplifie les visites pour les acheteurs potentiels.</h5></li>
<li><h5 class="font-semibold mb-2">Réduit les visites inutiles en présentiel, augmentant l’efficacité des agences.</h5></li> <li><h5 class="font-semibold mb-2">Réduit les visites inutiles en présentiel, augmentant l’efficacité des agences.</h5></li>
<li><h5 class="font-semibold">Accessible 24h/24, permettant une flexibilité maximale.</h5></li> <li><h5 class="font-semibold">Accessible 24h/24, permettant une flexibilité maximale.</h5></li>
</ul> </ul>
</div> </div>
<div class="laptop:w-[40%] laptop:p-8 p-4 laptop:ml-1 hover:scale-[1.01] bg-gradient-to-r from-orange-500 to-orange-600
shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="laptop:text-3xl text-2xl font-semibold text-center mb-1">Visite</h5>
<ul class="text-gray-50 laptop:text-lg text-md list-disc laptop:px-5 px-3">
<li><h5 class="font-semibold mb-2">Capture des photos 360° haute définition.</h5></li>
<li><h5 class="font-semibold mb-2">Création de visites virtuelles interactives.</h5></li>
<li><h5 class="font-semibold">Hébergement en ligne sur notre plateforme.</h5></li>
</ul>
</div> </div>
<div class="w-full flex justify-between mt-5"> </div>
<div class="w-1/2 p-[2px] m-2 bg-gradient-to-r from-orange-400 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg"> <div class="w-full flex laptop:flex-row flex-col laptop:justify-between items-center mt-5 laptop:mb-0 mb-6">
<div class="w-full h-full bg-gray-900 dark:bg-white rounded-md p-5 flex flex-col justify-between"> <div class="laptop:w-1/2 w-full laptop:h-full p-[2px] mb-6 laptop:m-2 bg-gradient-to-r from-orange-400 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<div class="w-full bg-gray-900 dark:bg-white rounded-md p-5 flex flex-col justify-between">
<div> <div>
<div class="w-full flex justify-between items-center"> <div class="w-full flex justify-between items-center">
<h1 class="text-[2rem] font-bold ">Visite unique</h1> <h1 class="laptop:text-3xl text-2xl font-bold ">Visite unique</h1>
<h3 class="text-[1.6rem]">200.-</h3> <h3 class="laptop:text-2xl">200.-</h3>
</div> </div>
<ul class="text-gray-150 dark:text-gray-1000 text-[1.3rem] list-disc px-5 mt-2"> <ul class="text-gray-150 dark:text-gray-1000 laptop:text-lg text-md list-disc px-5 mt-2">
<li><h5 class="text-[1rem] dark:text-gray-1000">Prise des photo de votre visite</h5></li> <li><h5 class="dark:text-gray-1000">Prise des photo de votre visite</h5></li>
<li><h5 class="text-[1rem] dark:text-gray-1000">Création de la visite virtuelle</h5></li> <li><h5 class="dark:text-gray-1000">Création de la visite virtuelle</h5></li>
<li><h5 class="text-[1rem] dark:text-gray-1000">Hébergement (inclue des frais supplémentaire)</h5></li> <li><h5 class="dark:text-gray-1000">Hébergement (inclue des frais supplémentaire)</h5></li>
</ul> </ul>
</div> </div>
<button class="mt-5 self-end w-1/3 rounded-lg hover:scale-105 <button class="mt-5 laptop:self-end laptop:w-1/3 rounded-lg hover:scale-105
bg-orange-600 px-4 py-2 text-white font-bold mb-2">Consulter l'offre</button> bg-orange-600 px-4 py-2 text-white font-bold mb-2">Consulter l'offre</button>
</div> </div>
</div> </div>
<div class="w-1/2 p-[2px] m-2 bg-gradient-to-r from-orange-400 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg"> <div class="laptop:w-1/2 w-full p-[2px] laptop:m-2 bg-gradient-to-r from-orange-400 to-orange-600 shadow-md
shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<div class="w-full h-full bg-gray-900 dark:bg-white rounded-md p-5 flex flex-col justify-between"> <div class="w-full h-full bg-gray-900 dark:bg-white rounded-md p-5 flex flex-col justify-between">
<div> <div>
<div class="w-full flex justify-between items-center"> <div class="w-full flex justify-between items-center">
<h1 class="text-[2rem] font-bold ">Abonnement premium</h1> <h1 class="laptop:text-3xl text-2xl font-bold ">Abonnement premium</h1>
<h3 class="text-[1.6rem]">60.-/mois</h3> <h3 class="laptop:text-2xl">60.-/mois</h3>
</div> </div>
<ul class="text-gray-150 dark:text-gray-1000 text-[1.3rem] list-disc px-5 mt-2"> <ul class="text-gray-150 dark:text-gray-1000 laptop:text-lg text-md list-disc px-5 mt-2">
<li><h5 class="text-[1rem] dark:text-gray-1000">Réduction de 10% sur les la création de visite virtuelle</h5></li> <li><h5 class="dark:text-gray-1000">Réduction de 10% sur les la création de visite virtuelle</h5></li>
<li><h5 class="text-[1rem] dark:text-gray-1000">Hébergement offert</h5></li> <li><h5 class="dark:text-gray-1000">Hébergement offert</h5></li>
</ul> </ul>
</div> </div>
<button class="mt-5 self-end w-1/3 rounded-lg hover:scale-105 <button class="mt-5 laptop:self-end laptop:w-1/3 rounded-lg hover:scale-105
bg-orange-600 px-4 py-2 text-white font-bold mb-2">Consulter l'offre</button> bg-orange-600 px-4 py-2 text-white font-bold mb-2">Consulter l'offre</button>
</div> </div>
</div> </div>

49
resources/views/layout.blade.php
Unescape View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" sizes="16x16" href="/img/logo.svg"> <link rel="icon" sizes="16x16" href="/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
@ -13,31 +13,36 @@
@vite("resources/js/app.js") @vite("resources/js/app.js")
@vite("resources/css/app.css") @vite("resources/css/app.css")
</head> </head>
<body class="relative w-screen h-screen antialiased font-robo bg-gray-850 dark:bg-gray-50 -z-10 mt-16"> <body class="relative w-screen h-screen antialiased font-robo bg-gray-850 dark:bg-gray-0 -z-10 laptop:mt-16 mt-12">
<!--<img src="/img/lightsource.png" class="w-full absolute top-0 right-0 left-0 -z-10">--> <!--<img src="/img/lightsource.png" class="w-full absolute top-0 right-0 left-0 -z-10">-->
<nav class="fixed right-0 left-0 top-0 h-16 z-50 w-screen"> <nav class="fixed right-0 left-0 top-0 laptop:h-16 h-14 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="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 desktop:px-[12.5%] laptop:px-[5%] bg-gray-750 dark:bg-white">
<div class="w-full h-full flex justify-between"> <div class="w-full h-full flex justify-between">
<div class="flex items-center h-full"> <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> <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> <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-2 laptop:py-0 py-[0.1rem] font-semibold">{{ $title }}</h5>
</div> </div>
<div class="items-center h-full laptop:flex hidden"> <div class="items-center h-full laptop:flex hidden">
<a href="/" class="flex items-center"> <a href="/" class="flex items-center">
<h1 class="mr-4 text-xl dark:text-gray-400 font-bold <h2 class="mr-4 text-xl dark:text-gray-400 font-bold
hover:text-white dark:hover:text-gray-600 hover:scale-110">home</h1> hover:text-white dark:hover:text-gray-900 hover:scale-110">home</h2>
</a> </a>
<a href="/demo" class="flex items-center"> <a href="/demo" class="flex items-center">
<h1 class="font-bold mr-4 text-xl dark:text-gray-400 <h2 class="font-bold mr-4 text-xl dark:text-gray-400
hover:text-white dark:hover:text-gray-600 hover:scale-110">demo</h1> hover:text-white dark:hover:text-gray-900 hover:scale-110">demo</h2>
</a> </a>
<a href="#contact" class="flex items-center"> <a href="#contact" class="flex items-center">
<h1 class="font-bold mr-7 text-xl dark:text-gray-400 <h2 class="font-bold mr-4 text-xl dark:text-gray-400
hover:text-white dark:hover:text-gray-600 hover:scale-110">contact</h1> hover:text-white dark:hover:text-gray-900 hover:scale-110">contact</h2>
</a> </a>
<div class="flex items-center h-fit py-[8px] pl-5 border-l border-gray-700"> <a href="/colors" class="flex items-center">
<button id="btn-theme" class="relative group flex items-center justify-center mr-6" <h2 class="font-bold mr-7 text-xl dark:text-gray-400
hover:text-white dark:hover:text-gray-900 hover:scale-110">couleur</h2>
</a>
<div class="flex items-center h-fit py-[8px] pl-5 border-l border-gray-700 dark:border-gray-300">
<button class="btn-theme relative group flex items-center justify-center mr-6"
onclick="window.themeToggle()"> onclick="window.themeToggle()">
<img src="/img/light-2.svg" class="dark:w-[1.4rem] w-[1.6rem] hover:scale-105 invert dark:invert-0"> <img src="/img/light-2.svg" class="dark:w-[1.4rem] w-[1.6rem] hover:scale-105 invert dark:invert-0">
</button> </button>
@ -61,14 +66,19 @@
<h1 class="font-bold text-xl dark:text-gray-900">demo</h1> <h1 class="font-bold text-xl dark:text-gray-900">demo</h1>
</a> </a>
<a href="#contact" class="flex items-center px-2 mt-2 focus:scale-105 focus:text-white dark:focus:text-gray-600"> <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"> <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">contact</h1> <h1 class="font-bold text-xl dark:text-gray-900">contact</h1>
</a> </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"> <a href="/colors" class="flex items-center px-2 mt-2 focus:scale-105 focus:text-white dark:focus:text-gray-600">
<button id="btn-theme" class="relative group flex items-center justify-center mr-6" <img src="/img/couleur.svg" class="w-[1.6rem] invert dark:invert-0 mr-3">
<h1 class="font-bold text-xl dark:text-gray-900">couleur</h1>
</a>
<div class="flex items-center justify-between h-fit mt-5 px-2 py-2 border-t border-gray-700 dark:border-gray-300">
<button class="btn-theme relative group flex items-center justify-center mr-6"
onclick="window.themeToggle()"> onclick="window.themeToggle()">
<img src="/img/light-2.svg" class="dark:w-[1.4rem] w-[1.6rem] hover:scale-105 invert dark:invert-0"> <img src="/img/light-2.svg" class="dark:w-[1.4rem] w-[1.6rem] hover:scale-105 invert dark:invert-0">
</button> </button>
<div class="flex items-center">
<img src="/img/instagram.svg" class="w-[1.6rem] hover:scale-105 invert dark:invert-0 mr-2"> <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"> <img src="/img/twitter.svg" class="w-[1.6rem] hover:scale-105 invert dark:invert-0">
</div> </div>
@ -76,6 +86,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</nav> </nav>
<div class="relative w-full z-10"> <div class="relative w-full z-10">
@yield("content") @yield("content")
@ -83,9 +94,9 @@
<div class="desktop:w-3/4 laptop:w-[90%] w-full px-3 mx-auto flex flex-col items-center justify-between"> <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 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"> <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> <h2 class="font-semibold laptop:text-3xl text-xl border-b-2 border-gray-750 laptop:w-3/4 pr-20 mb-2">Nous contacter</h2>
<div class="w-full flex"> <div class="w-full flex">
<div class="laptop:px-3"> <div class="laptop:px-3 laptop:text-lg text-sm">
<h4 class="font-semibold mb-1">+41 78 694 09 79</h4> <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 mb-1">contact@mv360.ch</h4>
<h4 class="font-semibold">Rue de la Maladière 80</h4> <h4 class="font-semibold">Rue de la Maladière 80</h4>
@ -115,7 +126,7 @@ class="h-fit rounded-lg laptop:text-sm text-[0.75rem] hover:scale-105 bg-orange-
</div> </div>
</div> </div>
<div class="w-full mt-10 flex flex-col items-center"> <div class="w-full mt-10 flex flex-col items-center">
<h2 class="font-semibold text-[1.7rem] mb-1">Nos partenaires</h2> <h2 class="font-semibold laptop:text-3xl text-xl mb-1">Nos partenaires</h2>
<div class="relative w-full flex items-center h-20 mb-5 overflow-hidden"> <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/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/infomaniak.png" class="laptop:w-32 w-16 slider" style="--delay: 2s;">
@ -128,7 +139,7 @@ class="h-fit rounded-lg laptop:text-sm text-[0.75rem] hover:scale-105 bg-orange-
<img src="/img/entreprise_immo_6.png" class="laptop:w-32 w-16 slider" style="--delay: 16s;"> <img src="/img/entreprise_immo_6.png" class="laptop:w-32 w-16 slider" style="--delay: 16s;">
</div> </div>
</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> <p class="laptop:text-lg text-[0.75rem] 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> </div>
</footer> </footer>
</div> </div>

Write Preview
Loading…
Cancel
Save