aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--website/package.json7
-rw-r--r--website/pnpm-lock.yaml54
-rw-r--r--website/src/app.css2
-rw-r--r--website/src/lib/components/header/navigation-bar.svelte179
-rw-r--r--website/src/lib/components/logo.svelte22
-rw-r--r--website/src/lib/components/user-profile.svelte18
-rw-r--r--website/src/routes/+layout.svelte6
-rw-r--r--website/src/routes/login/+page.svelte51
8 files changed, 321 insertions, 18 deletions
diff --git a/website/package.json b/website/package.json
index 4d68f29..ed45685 100644
--- a/website/package.json
+++ b/website/package.json
@@ -18,10 +18,12 @@
"devDependencies": {
"@eslint/compat": "^2.0.2",
"@eslint/js": "^10.0.1",
- "@tailwindcss/vite": "^4.1.18",
"@sveltejs/adapter-auto": "^7.0.0",
"@sveltejs/kit": "^2.50.2",
"@sveltejs/vite-plugin-svelte": "^6.2.4",
+ "@tailwindcss/forms": "^0.5.11",
+ "@tailwindcss/typography": "^0.5.19",
+ "@tailwindcss/vite": "^4.1.18",
"eslint": "^10.0.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-svelte": "^3.15.0",
@@ -36,5 +38,8 @@
"typescript-eslint": "^8.55.0",
"vite": "^7.3.1",
"vitest": "^4.0.18"
+ },
+ "dependencies": {
+ "lucide-svelte": "^0.564.0"
}
}
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
index b22ca2c..1e9ef82 100644
--- a/website/pnpm-lock.yaml
+++ b/website/pnpm-lock.yaml
@@ -7,6 +7,10 @@ settings:
importers:
.:
+ dependencies:
+ lucide-svelte:
+ specifier: ^0.564.0
+ version: 0.564.0(svelte@5.51.0)
devDependencies:
'@eslint/compat':
specifier: ^2.0.2
@@ -23,6 +27,12 @@ importers:
'@sveltejs/vite-plugin-svelte':
specifier: ^6.2.4
version: 6.2.4(svelte@5.51.0)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(yaml@2.8.2))
+ '@tailwindcss/forms':
+ specifier: ^0.5.11
+ version: 0.5.11(tailwindcss@4.1.18)
+ '@tailwindcss/typography':
+ specifier: ^0.5.19
+ version: 0.5.19(tailwindcss@4.1.18)
'@tailwindcss/vite':
specifier: ^4.1.18
version: 4.1.18(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(yaml@2.8.2))
@@ -584,6 +594,11 @@ packages:
svelte: ^5.0.0
vite: ^6.3.0 || ^7.0.0
+ '@tailwindcss/forms@0.5.11':
+ resolution: {integrity: sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==}
+ peerDependencies:
+ tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1'
+
'@tailwindcss/node@4.1.18':
resolution: {integrity: sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==}
@@ -673,6 +688,11 @@ packages:
resolution: {integrity: sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==}
engines: {node: '>= 10'}
+ '@tailwindcss/typography@0.5.19':
+ resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
+ peerDependencies:
+ tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
'@tailwindcss/vite@4.1.18':
resolution: {integrity: sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==}
peerDependencies:
@@ -1171,9 +1191,18 @@ packages:
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
engines: {node: '>=10'}
+ lucide-svelte@0.564.0:
+ resolution: {integrity: sha512-jeubFecyzbeze/Zwu5pFHHrv/u8OtiZ7VesXXus4cAnfRQlmb8TDtiC5gb485z8e4aAqe8FF7I0OVB/TDFAggg==}
+ peerDependencies:
+ svelte: ^3 || ^4 || ^5.0.0-next.42
+
magic-string@0.30.21:
resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+ mini-svg-data-uri@1.4.4:
+ resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+ hasBin: true
+
minimatch@10.2.0:
resolution: {integrity: sha512-ugkC31VaVg9cF0DFVoADH12k6061zNZkZON+aX8AWsR9GhPcErkcMBceb6znR8wLERM2AkkOxy2nWRLpT9Jq5w==}
engines: {node: 20 || >=22}
@@ -1261,6 +1290,10 @@ packages:
peerDependencies:
postcss: ^8.4.29
+ postcss-selector-parser@6.0.10:
+ resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+ engines: {node: '>=4'}
+
postcss-selector-parser@7.1.1:
resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
engines: {node: '>=4'}
@@ -1919,6 +1952,11 @@ snapshots:
vite: 7.3.1(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(yaml@2.8.2)
vitefu: 1.1.1(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(yaml@2.8.2))
+ '@tailwindcss/forms@0.5.11(tailwindcss@4.1.18)':
+ dependencies:
+ mini-svg-data-uri: 1.4.4
+ tailwindcss: 4.1.18
+
'@tailwindcss/node@4.1.18':
dependencies:
'@jridgewell/remapping': 2.3.5
@@ -1980,6 +2018,11 @@ snapshots:
'@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
'@tailwindcss/oxide-win32-x64-msvc': 4.1.18
+ '@tailwindcss/typography@0.5.19(tailwindcss@4.1.18)':
+ dependencies:
+ postcss-selector-parser: 6.0.10
+ tailwindcss: 4.1.18
+
'@tailwindcss/vite@4.1.18(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(yaml@2.8.2))':
dependencies:
'@tailwindcss/node': 4.1.18
@@ -2490,10 +2533,16 @@ snapshots:
dependencies:
p-locate: 5.0.0
+ lucide-svelte@0.564.0(svelte@5.51.0):
+ dependencies:
+ svelte: 5.51.0
+
magic-string@0.30.21:
dependencies:
'@jridgewell/sourcemap-codec': 1.5.5
+ mini-svg-data-uri@1.4.4: {}
+
minimatch@10.2.0:
dependencies:
brace-expansion: 5.0.2
@@ -2559,6 +2608,11 @@ snapshots:
dependencies:
postcss: 8.5.6
+ postcss-selector-parser@6.0.10:
+ dependencies:
+ cssesc: 3.0.0
+ util-deprecate: 1.0.2
+
postcss-selector-parser@7.1.1:
dependencies:
cssesc: 3.0.0
diff --git a/website/src/app.css b/website/src/app.css
index d4b5078..798629d 100644
--- a/website/src/app.css
+++ b/website/src/app.css
@@ -1 +1,3 @@
@import 'tailwindcss';
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
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>
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
index cd7e546..e68c098 100644
--- a/website/src/routes/+layout.svelte
+++ b/website/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
<script lang="ts">
import favicon from '$lib/assets/favicon.svg';
+ import NavigationBar from '$lib/components/header/navigation-bar.svelte';
import '../app.css';
let { children } = $props();
@@ -9,4 +10,7 @@
<link rel="icon" href={favicon} />
</svelte:head>
-{@render children()}
+<div class="flex min-h-screen w-screen">
+ <NavigationBar />
+ {@render children()}
+</div>
diff --git a/website/src/routes/login/+page.svelte b/website/src/routes/login/+page.svelte
new file mode 100644
index 0000000..29be51e
--- /dev/null
+++ b/website/src/routes/login/+page.svelte
@@ -0,0 +1,51 @@
+<script>
+ import Logo from "$lib/components/logo.svelte";
+
+</script>
+<div class="flex w-full items-center justify-center">
+ <div
+ class="w-full max-w-md transform-gpu space-y-8 rounded-2xl border border-gray-100 bg-white p-10 shadow-xl transition-all"
+ >
+ <div class="text-center">
+ <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+ <Logo class="h-full w-full" />
+ </div>
+ <h2 class="mt-6 text-3xl font-extrabold text-gray-900">sellershut</h2>
+ <p class="mt-2 text-sm text-gray-600">Please sign in to access the platform</p>
+ </div>
+
+ <div class="mt-8 space-y-4">
+ <button
+ class="group relative flex w-full transform-gpu items-center justify-center rounded-xl border border-gray-900 bg-white px-4 py-3 text-sm font-medium text-gray-900 transition-all duration-200 hover:bg-gray-50 focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:outline-none active:scale-[0.98]"
+ >
+ <span class="absolute inset-y-0 left-0 flex items-center pl-4">
+ <svg
+ class="h-5 w-5 text-gray-400 transition-colors duration-200 group-hover:text-[#5865F2]"
+ fill="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.419 0 1.334-.956 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.419 0 1.334-.946 2.419-2.157 2.419z"
+ />
+ </svg>
+ </span>
+ <span class="text-gray-700">Continue with Discord</span>
+ </button>
+ </div>
+
+ <div class="mt-6 flex items-center justify-between text-xs">
+ <span class="w-1/5 border-b border-gray-200"></span>
+ <span class="text-gray-400 lowercase">sellershut.com</span>
+ <span class="w-1/5 border-b border-gray-200"></span>
+ </div>
+
+ <p class="text-center text-xs text-gray-500">
+ By signing in, you agree to our
+ <a
+ href="/"
+ class="font-medium text-rose-600 underline underline-offset-4 hover:text-rose-500"
+ >Terms of Service</a
+ >
+ </p>
+ </div>
+</div>
generated by cgit v1.2.3 (git 2.39.1) at 2026-03-22 23:52:34 +0000