feat: Add a botched homepage

apps/www/src/routes/home/index.tsx

@@ -13,8 +13,18 @@ export default component$(() => {
         <>
             <HomeNavBar />
             {/* <div class="bg-red-500 h-[66px] w-screen"></div> */}
-            {/* <section class="w-full" >
-                <img src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/359550/library_hero.jpg" height={200} width={300} class="w-full aspect-[1536/496]"/>
+            <section class="absolute flex mx-auto my-0 inset-[0_0_20%] overflow-hidden -z-[1] before:inset-0 before:absolute before:z-[1] after:absolute after:inset-0 after:[background:linear-gradient(180deg,transparent_60%,#000)] before:[background:linear-gradient(90deg,transparent_85%,#000),linear-gradient(-90deg,transparent_85%,#000)]" >
+                <img src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/1172470/library_hero_2x.jpg" height={200} width={300} class="max-w-full min-w-full max-h-full min-h-full object-cover absolute top-0 bottom-0 left-0 right-0 w-0 h-0"/>
+            </section>
+
+            {/* <section class="w-full before:inset-0 before:absolute before:z-[1] relative after:bg-gradient-to-b after:from-transparent after:from-60% after:to-black before:[background:linear-gradient(90deg,transparent_70%,#000),linear-gradient(-90deg,transparent_70%,#000)]" >
+                <img src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/359550/library_hero_2x.jpg" height={200} width={300} class="w-full aspect-[96/31]"/>
+            </section><section class="w-full before:inset-0 before:absolute before:z-[1] relative after:bg-gradient-to-b after:from-transparent after:from-60% after:to-black before:[background:linear-gradient(90deg,transparent_70%,#000),linear-gradient(-90deg,transparent_70%,#000)]" >
+                <img src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/359550/library_hero_2x.jpg" height={200} width={300} class="w-full aspect-[96/31]"/>
+            </section><section class="w-full before:inset-0 before:absolute before:z-[1] relative after:bg-gradient-to-b after:from-transparent after:from-60% after:to-black before:[background:linear-gradient(90deg,transparent_70%,#000),linear-gradient(-90deg,transparent_70%,#000)]" >
+                <img src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/359550/library_hero_2x.jpg" height={200} width={300} class="w-full aspect-[96/31]"/>
+            </section><section class="w-full before:inset-0 before:absolute before:z-[1] relative after:bg-gradient-to-b after:from-transparent after:from-60% after:to-black before:[background:linear-gradient(90deg,transparent_70%,#000),linear-gradient(-90deg,transparent_70%,#000)]" >
+                <img src="https://shared.cloudflare.steamstatic.com/store_item_assets/steam/apps/359550/library_hero_2x.jpg" height={200} width={300} class="w-full aspect-[96/31]"/>
             </section> */}
             {/* <section class="flex flex-col gap-4 justify-center pt-20 items-center w-full text-left pb-4">
                 <div class="flex flex-col gap-4 mx-auto max-w-2xl w-full">
@@ -92,20 +102,6 @@ export default component$(() => {
                     </li>
                 </ul>
             </section> */}
-            <nav class="w-full flex justify-center h-[100px] z-50 items-center gap-4 bg-transparent fixed -bottom-[1px] left-0 right-0">
-                {/* <nav class="flex gap-4 w-max px-4 py-2 rounded-full shadow-2xl shadow-gray-950 bg-neutral-200 text-gray-900 dark:text-gray-100 dark:bg-neutral-800 ring-gray-300 dark:ring-gray-700 ring-1">
-                    <button class="text-xl font-title">
-                        <span class="material-symbols-outlined">
-                            home
-                        </span>
-                    </button>
-                    <button class="text-xl font-title">
-                        <span class="material-symbols-outlined">
-                            home
-                        </span>
-                    </button>
-                </nav> */}
-            </nav>
         </>
     )
 })

packages/ui/src/home-nav-bar.tsx

@@ -10,10 +10,10 @@ export const HomeNavBar = component$(() => {
             hasScrolled.value = window.scrollY > 0;
         })
     );
-
+//before:backdrop-blur-[5px] before:absolute before:-z-[1] before:top-0 before:left-0 before:w-full before:h-full flex items-center", hasScrolled.value && "shadow-[0_2px_20px_1px] shadow-gray-700
     return (
-        <nav class={cn("sticky w-full justify-between top-0 z-50 px-2 sm:px-6 text-xs sm:text-sm leading-[1] text-gray-950/70 dark:text-gray-50/70 h-[66px] dark:bg-gray-900/70 bg-gray-100/70 before:backdrop-blur-[15px] before:absolute before:-z-[1] before:top-0 before:left-0 before:w-full before:h-full flex items-center", hasScrolled.value && "shadow-[0_2px_20px_1px] shadow-gray-300 dark:shadow-gray-700")} >
-            <div class="flex flex-row justify-center items-center absolute sm:left-6 top-0 bottom-0">
+        <nav class={cn("fixed w-full justify-between top-0 z-50 px-2 sm:px-6 text-xs sm:text-sm leading-[1] text-gray-950/70 dark:text-gray-50/70 h-[66px] flex items-center")} >
+            <div class="flex flex-row justify-center items-center top-0 bottom-0">
                 <div class="flex-shrink-0 gap-2 flex justify-center items-center">
                     <svg
                         class="size-8 "
@@ -27,7 +27,7 @@ export const HomeNavBar = component$(() => {
                             d="m 2.093439,1.7855532 h 8.690922 V 2.2639978 H 2.093439 Z m 0,2.8440874 h 8.690922 V 5.1080848 H 2.093439 Z m 0,2.8440866 h 8.690922 V 7.952172 H 2.093439 Z"
                             style="font-size:12px;fill:#ff4f01;fill-opacity:1;fill-rule:evenodd;stroke:#ff4f01;stroke-width:1.66201;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1" />
                     </svg>
-                    <svg viewBox="0 0 498.05 70.508" xmlns="http://www.w3.org/2000/svg"  class="aspect-[498/71] text-gray-700 w-[100px] h-auto" >
+                    <svg viewBox="0 0 498.05 70.508" xmlns="http://www.w3.org/2000/svg"  class="aspect-[498/71] text-gray-400 w-[100px] h-auto" >
                         <g stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="currentColor" stroke-width="0.25mm" fill="currentColor">
                             <path
                                 fill="currentColor"
@@ -38,7 +38,7 @@ export const HomeNavBar = component$(() => {
                     </svg>
                 </div>
             </div>
-            <div class="h-10 rounded-md gap-[1px] px-1 flex flex-row justify-center mx-auto items-center ">
+            {/* <div class="h-10 rounded-md gap-[1px] px-1 flex flex-row justify-center mx-auto items-center ">
                 <button class="focus:ring-primary-500 focus:ring-2 p-2 flex flex-row gap-1 justify-center items-center outline-none rounded-md transition-all duration-200 select-none cursor-pointer bg-gray-300/70 dark:hover:bg-gray-700/70">
                     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M2 21.25a.75.75 0 0 0 0 1.5h20a.75.75 0 0 0 0-1.5h-5V16c0-1.886 0-2.828-.586-3.414S14.886 12 13 12h-2c-1.886 0-2.828 0-3.414.586S7 14.114 7 16v5.25zM9.25 15a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75m0 3a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75" clip-rule="evenodd" /><path fill="currentColor" d="M8 4.5c.943 0 1.414 0 1.707.293S10 5.557 10 6.5v1.792q.234.114.414.294c.404.404.53.978.569 1.914V12c-1.874 0-2.813.002-3.397.586C7 13.172 7 14.114 7 16v5.25H3V12c0-1.886 0-2.828.586-3.414A1.5 1.5 0 0 1 4 8.292V6.5c0-.943 0-1.414.293-1.707S5.057 4.5 6 4.5h.25V3a.75.75 0 0 1 1.5 0v1.5zm12.644.747c-.356-.514-.984-.75-2.24-1.22c-2.455-.921-3.682-1.381-4.543-.785C13 3.84 13 5.15 13 7.772V12c1.886 0 2.828 0 3.414.586S17 14.114 17 16v5.25h4V7.772c0-1.34 0-2.011-.356-2.525" opacity=".5" /></svg>
                     Home
@@ -47,13 +47,8 @@ export const HomeNavBar = component$(() => {
                     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4.035 11.573c.462-2.309.693-3.463 1.522-4.143s2.007-.68 4.362-.68h4.162c2.355 0 3.532 0 4.361.68c.83.68 1.06 1.834 1.523 4.143l.6 3c.664 3.32.996 4.98.096 6.079s-2.594 1.098-5.98 1.098H9.32c-3.386 0-5.08 0-5.98-1.098s-.568-2.758.096-6.079z" opacity=".5" /><circle cx="15" cy="9.75" r="1" fill="currentColor" /><circle cx="9" cy="9.75" r="1" fill="currentColor" /><path fill="currentColor" d="M9.75 5.75a2.25 2.25 0 0 1 4.5 0v1h.431q.565 0 1.069.002V5.75a3.75 3.75 0 1 0-7.5 0v1.002q.504-.003 1.069-.002h.431z" /></svg>
                     Store
                 </button>
-            </div>
+            </div> */}
             <div class="gap-4 flex flex-row justify-center h-full items-center">
-                {/* <button class="focus:ring-primary-500 focus:ring-2 p-1 mt-1 outline-none rounded-full transition-all duration-200 select-none cursor-pointer hover:bg-gray-300/70 dark:hover:bg-gray-700/70">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 48 48"><defs><mask id="ipTGamepad0"><g fill="none"><rect width="40" height="28" x="4" y="13" fill="#555" stroke="#fff" stroke-linejoin="round" stroke-width="4" rx="14" /><circle cx="31" cy="22" r="2" fill="#fff" /><circle cx="35" cy="27" r="2" fill="#fff" /><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M12 27h10m-10 0h10m2-20v6m0-6v6m-7 9v10" /></g></mask></defs><path fill="currentColor" d="M0 0h48v48H0z" mask="url(#ipTGamepad0)" /></svg>                </button>
-                <button class="focus:ring-primary-500 focus:ring-2 p-1 mt-1 outline-none rounded-full transition-all duration-200 select-none cursor-pointer hover:bg-gray-300/70 dark:hover:bg-gray-700/70">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><circle cx="9.001" cy="6" r="4" fill="currentColor" /><ellipse cx="9.001" cy="17.001" fill="currentColor" rx="7" ry="4" /><path fill="currentColor" d="M21 17c0 1.657-2.036 3-4.521 3c.732-.8 1.236-1.805 1.236-2.998c0-1.195-.505-2.2-1.239-3.001C18.962 14 21 15.344 21 17M18 6a3 3 0 0 1-4.029 2.82A5.7 5.7 0 0 0 14.714 6c0-1.025-.27-1.987-.742-2.819A3 3 0 0 1 18 6.001" /></svg>
-                </button> */}
                 <button class="focus:ring-primary-500 focus:ring-2 outline-none rounded-full transition-all flex items-center duration-200 select-none cursor-pointer hover:bg-gray-300/70 dark:hover:bg-gray-700/70" >
                     <img src="https://avatars.githubusercontent.com/u/71614375?v=4" height={24} width={24} class="size-[28px] rounded-full" alt="Avatar" />
                 </button>