this repo has no description

feat: Refactor Header and HomepageGrid components for improved layout and responsiveness

+34 -25
+32 -23
apps/web/src/components/organisms/Header.svelte
··· 1 <script> 2 import Icon from '@iconify/svelte'; 3 import Link from '../atoms/Link.svelte'; 4 </script> 5 6 - <header class="sticky top-0 z-50 bg-white/50 backdrop-blur-sm mx-auto max-w-[1920px]"> 7 - <div class="flex items-center px-4 py-3 text-hyski-blue gap-4"> 8 <a href="/" class="flex items-center gap-1"> 9 <img src="/logo.png" alt="Hyski Logo" class="h-8 mr-2" /> 10 <h1 class="font-black text-xl">Hyski</h1> 11 </a> 12 13 - <nav class="hidden md:block"> 14 - <ul class="flex gap-4 justify-center items-center"> 15 - <li> 16 - <Link href="/features" role="button" class="hover:bg-white/50 rounded">Features</Link> 17 - </li> 18 - <li> 19 - <Link href="/pricing" role="button" class="hover:bg-white/50 rounded">Pricing</Link> 20 - </li> 21 - <li> 22 - <Link href="/docs" role="button" class="hover:bg-white/50 rounded">Documentation</Link> 23 - </li> 24 25 - <li> 26 - <Link href="https://blog.hyski.eu" role="button" class="hover:bg-white/50 rounded" 27 - >Blog</Link 28 - > 29 - </li> 30 - <li> 31 - <Link href="/help" role="button" class="hover:bg-white/50 rounded">Support</Link> 32 - </li> 33 - </ul> 34 - </nav> 35 </div> 36 </header>
··· 1 <script> 2 import Icon from '@iconify/svelte'; 3 import Link from '../atoms/Link.svelte'; 4 + 5 + const menuItems = [ 6 + { title: 'Features', href: '/features' }, 7 + { title: 'Pricing', href: '/pricing' }, 8 + { title: 'Documentation', href: '/docs' }, 9 + { title: 'Blog', href: 'https://blog.hyski.eu' }, 10 + { title: 'Support', href: '/help' } 11 + ]; 12 </script> 13 14 + {#snippet NavMenu()} 15 + <nav class="hidden md:block"> 16 + <ul class="flex gap-4 justify-center items-center"> 17 + {#each menuItems as item} 18 + <li> 19 + <Link href={item.href} role="button" class="hover:bg-white/50 rounded">{item.title}</Link> 20 + </li> 21 + {/each} 22 + </ul> 23 + </nav> 24 + {/snippet} 25 + 26 + <header class="sticky top-0 z-50 bg-white/50 backdrop-blur-sm"> 27 + <div 28 + class="flex items-center px-4 py-3 text-hyski-blue gap-4 justify-between md:justify-start mx-auto max-w-[1920px]" 29 + > 30 <a href="/" class="flex items-center gap-1"> 31 <img src="/logo.png" alt="Hyski Logo" class="h-8 mr-2" /> 32 <h1 class="font-black text-xl">Hyski</h1> 33 </a> 34 35 + {@render NavMenu()} 36 + 37 + <div> 38 + <Icon icon="tabler:menu-2" class="w-8 h-8 md:hidden" /> 39 + </div> 40 + </div> 41 42 + <div class="md:hidden px-4 pb-4"> 43 + {@render NavMenu()} 44 </div> 45 </header>
+2 -2
apps/web/src/components/organisms/HomepageGrid.svelte
··· 68 {/snippet} 69 70 <div 71 - class="grid auto-rows-auto grid-cols-8 gap-4 md:gap-10 p-4 md:p-10 w-full min-h-dvh md:min-h-lvh md:max-h-[calc(100vh-3.5rem)] lg:max-w-[1920px] mx-auto mb-10" 72 > 73 {#each cards as card} 74 {@render Card(card.id, card.title, card.icon, card.description, card.classes)} ··· 79 class={`bg-blue-200 p-4 rounded-lg bg-[url(/assets/family.jpg)] bg-cover bg-center`} 80 ></div> 81 82 - <div id="banner" class="flex items-center"> 83 <h2 class="text-hyski-blue text-5xl md:text-7xl font-semibold"> 84 Finding Kotoisa <br /> in Everyday 85 </h2>
··· 68 {/snippet} 69 70 <div 71 + class="grid auto-rows-auto grid-cols-8 gap-4 md:gap-10 p-4 md:p-10 w-full min-h-dvh lg:max-w-[1920px] mx-auto mb-10" 72 > 73 {#each cards as card} 74 {@render Card(card.id, card.title, card.icon, card.description, card.classes)} ··· 79 class={`bg-blue-200 p-4 rounded-lg bg-[url(/assets/family.jpg)] bg-cover bg-center`} 80 ></div> 81 82 + <div id="banner" class="flex items-center mt-4 lg:mt-0"> 83 <h2 class="text-hyski-blue text-5xl md:text-7xl font-semibold"> 84 Finding Kotoisa <br /> in Everyday 85 </h2>