⚙️ Feature Cards + Navbar changes

resources/views/components/features.blade.php

@@ -0,0 +1,90 @@
+<section class="text-white bg-stone-900">
+    <div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-12 sm:px-6 lg:py-16 lg:px-8">
+        <div class="max-w-lg mx-auto text-center">
+            <h2
+                class="text-3xl font-bold text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
+                Welcome to Heimerdinger.LoL</h2>
+
+            <p class="mt-4 text-stone-300">
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur
+                aliquam doloribus nesciunt eos fugiat. Vitae aperiam fugit consequuntur
+                saepe laborum.
+            </p>
+        </div>
+
+        <div class="grid grid-cols-1 gap-8 mt-8 md:grid-cols-2 lg:grid-cols-3">
+            <a class="block p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
+                href="/services/digital-campaigns">
+
+                <i class="text-3xl text-orange-400 fa-duotone fa-gamepad-modern"></i>
+                <h2 class="mt-4 text-xl font-bold text-white">All Champions</h2>
+
+                <p class="mt-1 text-sm text-stone-300">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo
+                    possimus adipisci distinctio alias voluptatum blanditiis laudantium.
+                </p>
+            </a>
+
+            <a class="block p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
+                href="/services/digital-campaigns">
+                <i class="text-3xl text-orange-400 fa-duotone fa-palette"></i>
+
+                <h2 class="mt-4 text-xl font-bold text-white ">Skin Information</h2>
+
+                <p class="mt-1 text-sm text-stone-300">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo
+                    possimus adipisci distinctio alias voluptatum blanditiis laudantium.
+                </p>
+            </a>
+
+            <a class="block p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
+                href="/services/digital-campaigns">
+                <i class="text-3xl text-orange-400 fa-duotone fa-cube"></i>
+
+                <h2 class="mt-4 text-xl font-bold text-white">Game Assets</h2>
+
+                <p class="mt-1 text-sm text-stone-300">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo
+                    possimus adipisci distinctio alias voluptatum blanditiis laudantium.
+                </p>
+            </a>
+
+            <a class="block p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
+                href="/services/digital-campaigns">
+                <i class="text-3xl text-orange-400 fa-duotone fa-messages-dollar"></i>
+
+                <h2 class="mt-4 text-xl font-bold text-white">Sale Rotation</h2>
+
+                <p class="mt-1 text-sm text-stone-300">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo
+                    possimus adipisci distinctio alias voluptatum blanditiis laudantium.
+                </p>
+            </a>
+
+            <a class="block p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
+                href="/services/digital-campaigns">
+                <i class="text-3xl text-orange-400 fa-duotone fa-newspaper"></i>
+
+                <h2 class="mt-4 text-xl font-bold text-white">Blog Posts</h2>
+
+                <p class="mt-1 text-sm text-stone-300">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo
+                    possimus adipisci distinctio alias voluptatum blanditiis laudantium.
+                </p>
+            </a>
+
+            <a class="block p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
+                href="/services/digital-campaigns">
+                <i class="text-3xl text-orange-400 fa-duotone fa-block-question"></i>
+
+                <h2 class="mt-4 text-xl font-bold text-white">About The Game</h2>
+
+                <p class="mt-1 text-sm text-stone-300">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo
+                    possimus adipisci distinctio alias voluptatum blanditiis laudantium.
+                </p>
+            </a>
+        </div>
+
+    </div>
+</section>

resources/views/components/navbar.blade.php

@@ -1,12 +1,12 @@
-<nav class="bg-white border-gray-200 dark:bg-gray-900">
+<nav class="bg-white drop-shadow-md border-stone-200 dark:bg-stone-800">
     <div class="flex flex-wrap items-center justify-between max-w-screen-xl p-4 mx-auto">
-        <a href="/" class="flex items-center">
+        <a href="/" class="flex items-center transition-transform hover:scale-105">
             <x-logo class="w-auto mr-2 transition-transform h-9 hover:scale-125" alt="Heimerdinger Logo" />
-            <span class="self-center text-2xl font-medium whitespace-nowrap dark:text-white">Heimerdinger.LoL</span>
+            <span class="self-center text-2xl font-semibold text-orange-400 whitespace-nowrap">Heimerdinger.LoL</span>
             <span class="sr-only">Home</span>
         </a>
         <button data-collapse-toggle="navbar-default" type="button"
-            class="inline-flex items-center justify-center w-10 h-10 p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+            class="inline-flex items-center justify-center w-10 h-10 p-2 text-sm rounded-lg text-stone-500 md:hidden hover:bg-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-200 dark:text-stone-400 dark:hover:bg-stone-700 dark:focus:ring-stone-600"
             aria-controls="navbar-default" aria-expanded="false">
             <span class="sr-only">Open main menu</span>
             <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
@@ -17,10 +17,36 @@
         </button>
         <div id="navbar-default" class="hidden w-full md:block md:w-auto">
             <ul
-                class="flex flex-col p-4 mt-4 font-medium border border-gray-100 rounded-lg md:p-0 bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+                class="flex flex-col p-4 mt-4 font-medium border rounded-lg border-stone-100 md:p-0 bg-stone-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-stone-800 md:dark:bg-stone-800 dark:border-stone-700">
                 <li>
                     <a href="#"
-                        class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
+                        class="block py-2 pl-3 pr-4 rounded text-stone-800 hover:bg-stone-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent">
+                        <i class="fa-duotone fa-users"></i></i> Champions</a>
+                </li>
+                <li>
+                    <a href="#"
+                        class="block py-2 pl-3 pr-4 rounded text-stone-800 hover:bg-stone-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent">
+                        <i class="fa-duotone fa-palette"></i></i> Skins</a>
+                </li>
+                <li>
+                    <a href="#"
+                        class="block py-2 pl-3 pr-4 rounded text-stone-800 hover:bg-stone-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent">
+                        <i class="fa-duotone fa-cubes"></i> Assets</a>
+                </li>
+                <li>
+                    <a href="#"
+                        class="block py-2 pl-3 pr-4 rounded text-stone-800 hover:bg-stone-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent">
+                        <i class="fa-duotone fa-credit-card"></i> Sale Rotation</a>
+                </li>
+                <li>
+                    <a href="#"
+                        class="block py-2 pl-3 pr-4 rounded text-stone-800 hover:bg-stone-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent">
+                        <i class="fa-duotone fa-newspaper"></i> Posts</a>
+                </li>
+                <li>
+                    <a href="#"
+                        class="block py-2 pl-3 pr-4 rounded text-stone-800 hover:bg-stone-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent">
+                        <i class="fa-duotone fa-circle-info"></i></i> About</a>
                 </li>
 
             </ul>

resources/views/welcome.blade.php

@@ -17,12 +17,19 @@
 
     <title>Heimerdinger.LoL</title>
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/fontawesome.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/light.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/brands.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/solid.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/regular.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/gh/RaiseYour/fa@main/css/duotone.min.css" rel="stylesheet">
     @vite('resources/css/app.css')
     @vite('resources/js/app.js')
 </head>
 
-<body class="antialiased bg-gray-800 dark">
+<body class="antialiased bg-stone-800 dark">
     <x-navbar />
+    <x-features />
 </body>
 
 </html>