feat: added a futuristic fancy button. Layout mods

Author: syntaxlexx

app/Http/Middleware/HandleInertiaRequests.php

@@ -47,7 +47,7 @@ public function share(Request $request): array
                     'error' => $request->session()->get('error'),
                 ];
             },
-            'siteLogo' => '/img/laravelte-logo.png',
+            'siteLogo' => config('app.logo'),
             'siteName' => config('app.name'),
             'locale' => Session::get('locale') ?? App::getLocale(),
         ]);

resources/css/app.css

@@ -36,9 +36,7 @@ body, p, h1, h2, h3 {
 .checkbox {
     @apply ml-2 text-sm font-medium text-gray-900 dark:text-gray-300
 }
-.scrollbar-hidden::-webkit-scrollbar {
-    display: none;
-}
+
 
 figcaption {
     @apply text-sm italic mt-1;
@@ -145,3 +143,24 @@ table .actions {
 .modal-footer {
 	@apply mt-3 p-6 space-y-6 border-t border-gray-600 flex justify-end items-baseline gap-3;
 }
+
+
+/* =========== scrollbar ================= */
+::-webkit-scrollbar {
+    width: 5px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb {
+    background: #e3c7fc;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #b874f8;
+    border-radius: 10px;
+}
+.scrollbar-hidden::-webkit-scrollbar {
+    /* display: none; */
+    width: 0px;
+}

resources/ts/Components/FancyButton.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+
+    export let text = 'Hello'
+    type ButtonSize = 'n' | 'sm' | 'lg'
+    export let size: ButtonSize = 'n'
+
+    let btnElement: HTMLButtonElement
+
+    onMount(() => {
+        btnElement.addEventListener('mousemove', e => {
+            let rect = e.target?.getBoundingClientRect()
+            let x = e.clientX * 3 - rect.left
+            btnElement.style.setProperty('--x', `${x}deg`)
+        })
+
+        btnElement.addEventListener('mouseleave', e => {
+            btnElement.style.setProperty('--x', `45deg`)
+        })
+    })
+</script>
+
+<button {...$$restProps} bind:this={btnElement} class="fancy-btn-{size}">
+    <i />
+    <i />
+    <span class="overlay">&nbsp</span>
+    <span class="relative text-white">
+        <slot>
+            {text}
+        </slot>
+    </span>
+</button>
+
+<style lang="css">
+    :root {
+        --x: 45deg;
+    }
+    button.fancy-btn-n {
+        @apply px-5 py-2.5;
+    }
+    button.fancy-btn-sm {
+        @apply px-4 py-2;
+    }
+    button.fancy-btn-lg {
+        @apply px-6 py-3;
+    }
+    button {
+        @apply relative -inset-[2px] inline-block rounded;
+    }
+    button i {
+        @apply absolute -inset-[2px] block  rounded;
+    }
+    button i,
+    button i:nth-child(2) {
+        background: linear-gradient(var(--x), #00ccff, #0e1538, #0e1538, #d400d4);
+    }
+    button i:nth-child(2) {
+        filter: blur(10px);
+    }
+    button span.overlay {
+        @apply absolute top-0 left-0 w-full h-full flex justify-center items-center bg-gray-900/70 uppercase text-white rounded border-primary-900 overflow-hidden;
+        letter-spacing: 2px;
+    }
+    button span.overlay:before {
+        content: '';
+        @apply absolute top-0 left-[-50%] w-full h-full bg-white/[0.075];
+        transform: skew(25deg);
+    }
+</style>

resources/ts/Components/Footer.svelte

@@ -7,11 +7,7 @@
     <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
         <div class="xl:grid xl:grid-cols-3 xl:gap-8">
             <div class="space-y-8 xl:col-span-1">
-                <img
-                    class="h-10"
-                    src="https://tailwindui.com/img/logos/workflow-mark.svg?color=warmGray&shade=400"
-                    alt="Company name"
-                />
+                <img class="h-10" src={$page.props.siteLogo} alt={$page.props.siteName} />
                 <p class="text-warm-gray-400 text-base">
                     Making the world a better place through constructing elegant hierarchies.
                 </p>

resources/ts/Components/Hero.svelte

@@ -1,5 +1,6 @@
 <script>
     import { page } from '@inertiajs/svelte'
+    import { FancyButton, Icon } from '.'
 </script>
 
 <div class="pt-8 overflow-hidden sm:pt-12 lg:relative lg:py-48">
@@ -131,6 +132,15 @@
                         </div>
                     </div>
                 </div>
+                <br />
+                <div class="lg:float-right lg:pr-10">
+                    <a href="https://github.com/SyntaxLexx/laravelte" class="no-underline" target="_blank">
+                        <FancyButton size="lg">
+                            View on Github
+                            <Icon name="link-external" />
+                        </FancyButton>
+                    </a>
+                </div>
             </div>
         </div>
     </div>
@@ -167,7 +177,7 @@
                 <img
                     class="w-full rounded-md shadow-xl ring-1 ring-black ring-opacity-5 lg:h-full lg:w-auto lg:max-w-none"
                     src="https://tailwindui.com/img/component-images/task-app-rose.jpg"
-                    alt=""
+                    alt="img"
                 />
             </div>
         </div>

resources/ts/Components/index.ts

@@ -2,6 +2,7 @@ import Button from './Button.svelte';
 import Circle from './Circle.svelte';
 import Divider from './Divider.svelte';
 import DisplayErrors from './DisplayErrors.svelte'
+import FancyButton from './FancyButton.svelte'
 import Icon from './Icon.svelte';
 import Input from './Input.svelte';
 import Loading from './Loading.svelte';
@@ -18,6 +19,7 @@ export {
     Circle,
     DisplayErrors,
     Divider,
+    FancyButton,
     Icon,
     Input,
     Loading,

resources/ts/Layouts/AppLayout.svelte

@@ -126,6 +126,7 @@
                             <li>
                                 <a
                                     href={item.route}
+                                    use:inertia
                                     class="nav-item"
                                     aria-current="page"
                                     on:click={() => (isNavCollapsed = true)}>{item.title}</a

resources/views/app.blade.php

@@ -28,7 +28,7 @@
 
         @inertiaHead
     </head>
-    <body class="font-sans antialiased" data-theme="sahara">
+    <body class="font-sans antialiased h-full">
         @inertia
     </body>
 </html>