Merge pull request #49 from nunowar/new-landing-page

New landing page

Author: nunomaduro

public/www/assets/bg-pest-4.jpg

@@ -1,29 +1,60 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-[hidden] { display: none !important; }
+@import url('https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap');
+@import 'tailwindcss';
+@plugin 'tailwindcss-motion';
 
 @layer base {
-  body {
-    background: url('/assets/bg-head.webp');
-    background-position: center top;
-    @apply sm:bg-center bg-no-repeat bg-cover;
-  }
-
-  main {
-    background: url('/assets/pattern.svg');
-    background-repeat: repeat;
-    background-position: 10px 10px;
-    background-size: 30px 30px;
-  }
-
-  @screen md {
-    main {
-      background: url('/assets/pattern.svg'), url('/assets/bg-foot.webp');
-      background-repeat: repeat, no-repeat;
-      background-position: 10px 10px, center bottom;
-      background-size: 40px 40px, contain;
+    html{height:100%;-webkit-tap-highlight-color:transparent}
+    body{min-height:100%}
+    [x-cloak]{display:none}
+    @font-face{font-family:"Exo", sans-serif;font-optical-sizing: auto;font-weight: 700;font-style: normal;}
+}
+
+@theme {
+    --font-title: 'Exo', sans-serif;
+}
+
+button {
+  @apply cursor-pointer;
+}
+
+.bg-pest {
+    background-image: url('/assets/bg-pest-4.jpg');
+}
+
+.beam-background {
+    animation: animate-beams 100s linear infinite;
+    background-image: linear-gradient(120deg, rgba(34,102,200,0.5), rgba(255,255,255,0.1));
+    background-image: repeating-linear-gradient(120deg, #1f2937 0%, #1f2937 8%, rgba(131, 141, 155, 0.1) 4%, transparent 1%, rgba(2, 72, 172, 0.6) 5%, #1f2937 12%), repeating-linear-gradient(-60deg, #d1d5db 0%, #d1d5db 80%, rgba(209, 213, 219, 0.7) 2%, #9ca3af 3%, #9ca3af 4.5%, rgba(209, 213, 219, 0.5) 5%);
+    background-size: 300%, 200%;
+    background-position: 50% 80%, 5% 50%;
+}
+
+@keyframes animate-beams {
+    0% {
+        background-position: 0% 0%, 100% 100%;
+    }
+    100% {
+        background-position: 150% 100%, -100% -50%;
     }
-  }
 }
+
+@keyframes marquee{
+    0%{transform:translate3d(0,0,0)}
+    100%{transform:translate3d(-50%,0,0)}
+}
+
+[data-tippy-root]{max-width:calc(100vw - 10px)}
+.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}
+.tippy-box{ @apply bg-blue-950; text-align:center;position:relative;color:#fff;border-radius:8px;font-size:13px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}
+.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}
+.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-6px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}
+.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}
+.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-6px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}
+.tippy-box[data-placement^=left]>.tippy-arrow{right:0}
+.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-6px;transform-origin:center left}
+.tippy-box[data-placement^=right]>.tippy-arrow{left:0}
+.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-6px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}
+.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}
+.tippy-arrow{width:16px;height:16px; @apply text-blue-950;}
+.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}
+.tippy-content{position:relative;padding:5px 9px;z-index:1}

resources/www/index.html

@@ -1,5 +1,13 @@
 import './main.css'
 
 import Alpine from 'alpinejs'
+import tippy from 'tippy.js'
+
+document.addEventListener('alpine:init', () => {
+    Alpine.directive('tooltip', (el, { expression }) => {
+        tippy(el, { content: expression });
+    });
+});
+
 window.Alpine = Alpine
 Alpine.start()