feat(web): login screen

3 files changed, 203 insertions, 16 deletions

diff --git a/website/src/lib/components/header/navigation-bar.svelte b/website/src/lib/components/header/navigation-bar.svelte
new file mode 100644
index 0000000..3c3da94
--- /dev/null
+++ b/website/src/lib/components/header/navigation-bar.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { Menu, X, Search, ShoppingBag } from 'lucide-svelte';
+    import { fade, slide } from 'svelte/transition';
+    import { quintOut } from 'svelte/easing';
+    import Logo from '../logo.svelte';
+
+    let mobileOpen = $state(false);
+    let searchOpen = $state(false);
+    let scrolled = $state(false);
+    let query = $state('');
+    let user = $state(null);
+
+    const navLinks = [
+        { label: 'Discover', href: '/discover' },
+        { label: 'Federations', href: '/federations' },
+        { label: 'Stores', href: '/stores' },
+        { label: 'Developers', href: '/developers' },
+    ];
+
+    const handleScroll = () => {
+        scrolled = window.scrollY > 10;
+    };
+
+    onMount(() => {
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    });
+
+    function openSearch() {
+        searchOpen = true;
+        mobileOpen = false; // Close mobile menu if search opens
+    }
+
+    function closeSearch() {
+        searchOpen = false;
+        query = '';
+    }
+</script>
+
+<nav
+    class="fixed top-0 left-0 z-50 w-full text-white transition-all duration-300
+    {scrolled ? 'bg-black/80 shadow-sm backdrop-blur-xl' : 'bg-black backdrop-blur-lg'}"
+>
+    <div class="mx-auto max-w-7xl px-4">
+        <div class="relative flex h-14 items-center justify-between">
+            <a
+                href="/"
+                class="z-10 flex items-center text-[17px] font-semibold tracking-tight transition-opacity duration-200 {searchOpen
+                    ? 'max-md:hidden'
+                    : ''}"
+                class:opacity-0={searchOpen}
+            >
+                <Logo class="h-8 w-8" /><span>sellers</span><span class="text-rose-600">hut</span>
+            </a>
+
+            <div class="relative flex flex-1 justify-center px-2">
+                {#if !searchOpen}
+                    <div
+                        class="hidden items-center gap-8 text-[13px] font-medium md:flex"
+                        transition:fade={{ duration: 200 }}
+                    >
+                        {#each navLinks as link}
+                            <a
+                                href={link.href}
+                                class="text-neutral-200 transition-colors hover:text-white"
+                            >
+                                {link.label}
+                            </a>
+                        {/each}
+                    </div>
+                {:else}
+                    <div
+                        class="absolute inset-0 z-20 flex items-center"
+                        in:slide={{ duration: 250, easing: quintOut }}
+                        out:fade={{ duration: 150 }}
+                    >
+                        <div class="relative mx-auto flex w-full max-w-2xl items-center gap-2">
+                            <div class="relative flex-1">
+                                <Search
+                                    size={16}
+                                    class="absolute top-1/2 left-4 -translate-y-1/2 text-neutral-500"
+                                />
+                                <input
+                                    bind:value={query}
+                                    placeholder="search sellershut.com"
+                                    class="h-10 w-full rounded-lg bg-neutral-100 pr-4 pl-10 text-sm text-black outline-none focus:border-transparent focus:ring-2 focus:ring-rose-500 focus:outline-none"
+                                />
+                            </div>
+                            <button
+                                onclick={closeSearch}
+                                class="p-2 text-neutral-100 hover:text-white"
+                            >
+                                <X size={20} />
+                            </button>
+                        </div>
+                    </div>
+                {/if}
+            </div>
+
+            <div class="z-10 flex items-center gap-3 md:gap-6">
+                {#if !searchOpen}
+                    <button
+                        onclick={openSearch}
+                        class="p-2 text-neutral-200 transition-colors hover:text-white"
+                        aria-label="Search"
+                    >
+                        <Search size={18} />
+                    </button>
+
+                    <button class="p-2 text-neutral-200 hover:text-white" aria-label="Cart">
+                        <ShoppingBag size={18} />
+                    </button>
+
+                    <div class="hidden sm:block">
+                        {#if user}
+                            <img
+                                src="/avatar.jpg"
+                                alt="User"
+                                class="h-7 w-7 rounded-full ring-1 ring-black/10"
+                            />
+                        {:else}
+                            <a
+                                href="/login"
+                                class="inline-flex h-9 items-center justify-center rounded-md bg-rose-600 px-4 py-1 text-sm font-medium tracking-tight text-white shadow-sm transition-all duration-200 hover:bg-rose-700 active:scale-[0.98]"
+                            >
+                                Sign in
+                            </a>
+                        {/if}
+                    </div>
+
+                    <button
+                        class="p-2 text-neutral-200 md:hidden"
+                        onclick={() => (mobileOpen = !mobileOpen)}
+                    >
+                        {#if mobileOpen}
+                            <X size={22} />
+                        {:else}
+                            <Menu size={22} />
+                        {/if}
+                    </button>
+                {/if}
+            </div>
+        </div>
+    </div>
+
+    {#if mobileOpen}
+        <div
+            class="fixed inset-x-0 top-14 z-40 bg-black text-white md:hidden"
+            transition:slide={{ duration: 250, easing: quintOut }}
+        >
+            <div class="h-screen space-y-8 border-t border-white/10 px-6 py-8">
+                <div class="flex flex-col gap-6">
+                    {#each navLinks as link}
+                        <a
+                            href={link.href}
+                            class="text-2xl font-semibold tracking-tight text-white/90 transition-colors hover:text-rose-500"
+                            onclick={() => (mobileOpen = false)}
+                        >
+                            {link.label}
+                        </a>
+                    {/each}
+                </div>
+
+                <div class="h-px bg-white/10"></div>
+
+                <a
+                    href="/login"
+                    class="block text-lg font-medium text-rose-500"
+                    onclick={() => (mobileOpen = false)}
+                >
+                    {user ? 'My Profile' : 'Sign in / Register'}
+                </a>
+            </div>
+        </div>
+    {/if}
+</nav>
+
+<div class="h-14"></div>
diff --git a/website/src/lib/components/logo.svelte b/website/src/lib/components/logo.svelte
index 33c3ac8..a5a6677 100644
--- a/website/src/lib/components/logo.svelte
+++ b/website/src/lib/components/logo.svelte
@@ -1,46 +1,36 @@
 <svg
     version="1.1"
-    id="svg1"
-    width="611.7915"
-    height="619.03174"
     viewBox="0 0 611.79148 619.03172"
     xmlns="http://www.w3.org/2000/svg"
+    class={$$props.class}
 >
     <defs id="defs1" />
-    <ellipse
-        style="fill:#ffffff"
-        id="path16"
-        cx="305.89572"
-        cy="309.51587"
-        rx="305.89578"
-        ry="309.51587"
-    />
     <g id="layer-MC0" transform="translate(-1063.8485,261.00178)">
         <g id="g16" transform="matrix(1.4320441,0,0,1.3132799,284.97573,-996.21358)">
             <path
                 id="path1"
                 d="m 781.15181,635.78989 c -1.352,5.432 -2.13067,10.99999 -4.184,16.26666 -3.44134,8.82133 -7.68667,17.45467 -11.616,26.16 -0.636,1.40933 -1.70267,2.74933 -1.99733,4.18933 -0.28267,1.38667 -0.412,3.14 0.40533,4.248 4.42933,6.00134 9.05866,11.91467 13.844,17.73867 4.50933,5.48933 9.18933,10.892 13.98533,16.22267 7.76267,8.62933 15.46667,17.16933 23.35067,25.46133 6.74133,7.09067 13.672,14.08 20.86533,20.87867 12.776,12.07733 25.812,23.97866 38.748,35.94799 1.32,1.22134 2.68267,2.41334 4.05333,3.59867 4.50934,3.89867 1.51467,11.79467 -5.02933,13.15067 -1.5,0.31066 -3.04933,0.528 -4.58933,0.63733 -3.06,0.21867 -5.47334,-0.39067 -7.676,-2.44133 -7.99734,-7.44534 -16.484,-14.55334 -24.45467,-22.016 -9.644,-9.02934 -19.10133,-18.19333 -28.36267,-27.47733 -8.76,-8.78 -17.456,-17.61867 -25.64533,-26.74134 -9.67733,-10.78 -18.89733,-22.00533 -28.45733,-33.20933 -0.54533,-0.64 -0.99867,-1.34267 -1.62533,-1.92533 -0.584,-0.54134 -1.46934,-1.428 -1.996,-1.33067 -0.87734,0.16267 -1.81467,0.88133 -2.304,1.55733 -2.584,3.564 -4.97467,7.216 -7.54667,10.78534 -4.78267,6.63333 -9.48,13.31066 -14.508,19.82666 -8.26,10.70534 -16.556,21.39867 -25.2,31.91067 -11.884,14.45466 -24.076,28.752 -36.20133,43.08133 -3.90534,4.616 -7.99734,9.13333 -12.052,13.668 -0.5,0.56 -1.208,1.152 -1.97734,1.388 -4.42666,1.356 -10.796,1.392 -14.09733,-2.09467 -3.08267,-3.256 -3.36,-7.69866 -0.40267,-11.09066 10.268,-11.776 20.744,-23.44267 30.684,-35.39067 11.30134,-13.584 22.23734,-27.36266 33.09334,-41.17466 7.45466,-9.484 14.58666,-19.13067 21.69466,-28.78134 3.572,-4.85066 6.76267,-9.876 10.14267,-14.81333 1.65067,-2.41067 3.46,-4.75867 4.95067,-7.228 0.55066,-0.91333 0.87866,-2.23867 0.47333,-3.12533 -2.15733,-4.73067 -4.80133,-9.31734 -6.852,-14.076 -2.18133,-5.06534 -4.11733,-10.21867 -5.728,-15.42534 -1.3,-4.2 -2.07467,-8.51866 -2.84267,-12.81599 -0.34,-1.9 -0.20666,-3.88134 -0.036,-5.816 0.056,-0.62667 0.91334,-1.21867 1.40534,-1.828 0.69466,0.36666 1.66,0.604 2.04266,1.12 2.91467,3.93866 5.74934,7.91733 8.54534,11.91199 4.764,6.80534 9.44933,13.64534 14.24,20.43734 1.236,1.75333 2.168,1.744 3.468,0 4.27733,-5.74 8.468,-11.52 12.70266,-17.27867 3.73467,-5.07866 7.48133,-10.15066 11.23067,-15.22266 0.24933,-0.33734 0.49333,-0.72934 0.87333,-0.94267 0.81867,-0.46 1.72533,-0.82 2.596,-1.22 0.49867,0.744 1.04,1.47333 1.47333,2.24267 0.15467,0.272 0.0467,0.64133 0.0587,0.96666 0.15067,0.0227 0.30267,0.0467 0.45467,0.0693"
-                style="fill:#f43f5e;fill-opacity:1;fill-rule:nonzero;stroke:#f43f5e;stroke-width:1.33333;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+                style="fill:#da294f;fill-opacity:1;fill-rule:nonzero;stroke:#f43f5e;stroke-width:1.33333;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
             />
             <path
                 id="path2"
                 d="m 644.30154,887.51349 c 2.46,7.18933 12.7,32.94133 49.85466,48.66933 44.004,18.62933 108.21867,15.76933 145.132,-8.588 24.32133,-16.05067 28.82267,-36.176 29.912,-44.376"
-                style="fill:none;stroke:#f43f5e;stroke-width:21.3333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+                style="fill:none;stroke:#da294f;stroke-width:21.3333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
             />
             <path
                 id="path3"
                 d="m 679.61701,853.59002 c 0,17.04133 -13.81467,30.85733 -30.85733,30.85733 -17.04134,0 -30.856,-13.816 -30.856,-30.85733 0,-17.04134 13.81466,-30.85734 30.856,-30.85734 17.04266,0 30.85733,13.816 30.85733,30.85734 z"
-                style="fill:none;stroke:#f43f5e;stroke-width:21.3333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+                style="fill:none;stroke:#da294f;stroke-width:21.3333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
             />
             <path
                 id="path4"
                 d="m 787.60781,853.59002 c 0,17.04133 -13.81467,30.85733 -30.85733,30.85733 -17.04134,0 -30.856,-13.816 -30.856,-30.85733 0,-17.04134 13.81466,-30.85734 30.856,-30.85734 17.04266,0 30.85733,13.816 30.85733,30.85734 z"
-                style="fill:none;stroke:#f43f5e;stroke-width:21.3333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+                style="fill:none;stroke:#da294f;stroke-width:21.3333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
             />
             <path
                 id="path5"
                 d="m 897.08941,842.79296 c 0,17.04133 -13.81467,30.85733 -30.85733,30.85733 -17.04134,0 -30.856,-13.816 -30.856,-30.85733 0,-17.04134 13.81466,-30.85734 30.856,-30.85734 17.04266,0 30.85733,13.816 30.85733,30.85734 z"
-                style="fill:none;stroke:#f43f5e;stroke-width:21.3333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+                style="fill:none;stroke:#da294f;stroke-width:21.3333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
             />
         </g>
     </g>
diff --git a/website/src/lib/components/user-profile.svelte b/website/src/lib/components/user-profile.svelte
new file mode 100644
index 0000000..7ad7ba2
--- /dev/null
+++ b/website/src/lib/components/user-profile.svelte
@@ -0,0 +1,18 @@
+<svg

+    class={$$props.class}

+    viewBox="0 0 512 512"

+    version="1.1"

+    xmlns="http://www.w3.org/2000/svg"

+    xmlns:xlink="http://www.w3.org/1999/xlink"

+>

+    <title>user-profile-filled</title>

+    <g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">

+        <g id="drop" fill="currentColor" transform="translate(42.666667, 42.666667)">

+            <path

+                d="M213.333333,3.55271368e-14 C269.912851,3.55271368e-14 324.175019,22.4761259 364.18278,62.4838867 C404.190541,102.491647 426.666667,156.753816 426.666667,213.333333 C426.666667,331.15408 331.15408,426.666667 213.333333,426.666667 C95.5125867,426.666667 2.84217094e-14,331.15408 2.84217094e-14,213.333333 C2.84217094e-14,95.5125867 95.5125867,3.55271368e-14 213.333333,3.55271368e-14 Z M234.666667,234.666667 L192,234.666667 C139.18529,234.666667 93.8415802,266.653822 74.285337,312.314895 C105.229171,355.70638 155.977088,384 213.333333,384 C270.689579,384 321.437496,355.70638 352.381644,312.31198 C332.825087,266.653822 287.481377,234.666667 234.666667,234.666667 L234.666667,234.666667 Z M213.333333,64 C177.987109,64 149.333333,92.653776 149.333333,128 C149.333333,163.346224 177.987109,192 213.333333,192 C248.679557,192 277.333333,163.346224 277.333333,128 C277.333333,92.653776 248.679557,64 213.333333,64 Z"

+                id="Combined-Shape"

+            >

+            </path>

+        </g>

+    </g>

+</svg>