piotr.zaborowski.dev
this repo has no description
feat: Refactor Header and HomepageGrid components for improved layout and responsiveness
+32
-23
apps/web/src/components/organisms/Header.svelte
+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
+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>