Toju Website V2

2026-03-12 13:21:33 +01:00
parent 106212ef3d
commit 45e0b09af8
51 changed files with 2333 additions and 1513 deletions
--- a/website/src/app/components/header/header.component.html
+++ b/website/src/app/components/header/header.component.html
@@ -0,0 +1,184 @@
+<header
+  class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
+  [class]="scrolled() ? 'glass shadow-lg shadow-black/20' : 'bg-transparent'"
+>
+  <nav class="container mx-auto px-6 py-4 flex items-center justify-between">
+    <!-- Logo -->
+    <a
+      routerLink="/"
+      aria-label="Toju home"
+      class="flex items-center group"
+    >
+      <span class="flex items-center gap-1.5">
+        <img
+          src="/images/toju-logo-transparent.png"
+          alt="Toju"
+          class="h-9 w-auto object-contain drop-shadow-lg group-hover:opacity-90 transition-opacity"
+        />
+        <span class="text-xl font-bold text-foreground">Toju</span>
+      </span>
+      <span
+        class="ml-2 text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-purple-500/20 text-purple-400 border border-purple-500/30 uppercase tracking-wider"
+      >
+        Beta
+      </span>
+    </a>
+
+    <!-- Desktop nav -->
+    <div class="hidden md:flex items-center gap-8">
+      <a
+        routerLink="/"
+        routerLinkActive="text-primary"
+        [routerLinkActiveOptions]="{ exact: true }"
+        class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+      >
+        Home
+      </a>
+      <a
+        routerLink="/what-is-toju"
+        routerLinkActive="text-primary"
+        class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+      >
+        What is Toju?
+      </a>
+      <a
+        routerLink="/downloads"
+        routerLinkActive="text-primary"
+        class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+      >
+        Downloads
+      </a>
+      <a
+        routerLink="/philosophy"
+        routerLinkActive="text-primary"
+        class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+      >
+        Our Philosophy
+      </a>
+    </div>
+
+    <!-- Right side -->
+    <div class="hidden md:flex items-center gap-4">
+      <a
+        href="https://buymeacoffee.com/myxelium"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-sm text-muted-foreground hover:text-yellow-400 transition-colors flex items-center gap-1.5"
+      >
+        <img
+          src="/images/buymeacoffee.png"
+          alt=""
+          width="16"
+          height="16"
+          class="w-4 h-4 object-contain"
+        />
+        Support Us
+      </a>
+      <a
+        href="https://web.toju.app/"
+        target="_blank"
+        rel="noopener"
+        class="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-violet-600 text-white text-sm font-medium hover:from-purple-500 hover:to-violet-500 transition-all shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40"
+      >
+        Use Web Version
+        <svg
+          class="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+          />
+        </svg>
+      </a>
+    </div>
+
+    <!-- Mobile hamburger -->
+    <button
+      type="button"
+      class="md:hidden text-foreground p-2"
+      (click)="mobileOpen.set(!mobileOpen())"
+      aria-label="Toggle menu"
+    >
+      <svg
+        class="w-6 h-6"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        @if (mobileOpen()) {
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        } @else {
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h16M4 18h16"
+          />
+        }
+      </svg>
+    </button>
+  </nav>
+
+  <!-- Mobile nav -->
+  @if (mobileOpen()) {
+    <div
+      class="md:hidden glass border-t border-border/30 px-6 py-4 space-y-4"
+      (click)="mobileOpen.set(false)"
+    >
+      <a
+        routerLink="/"
+        class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >Home</a
+      >
+      <a
+        routerLink="/what-is-toju"
+        class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >What is Toju?</a
+      >
+      <a
+        routerLink="/downloads"
+        class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >Downloads</a
+      >
+      <a
+        routerLink="/philosophy"
+        class="block text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >Our Philosophy</a
+      >
+      <hr class="border-border/30" />
+      <a
+        href="https://buymeacoffee.com/myxelium"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-yellow-400 transition-colors"
+      >
+        <img
+          src="/images/buymeacoffee.png"
+          alt=""
+          width="16"
+          height="16"
+          class="w-4 h-4 object-contain"
+        />
+        Support Us
+      </a>
+      <a
+        href="https://web.toju.app/"
+        target="_blank"
+        rel="noopener"
+        class="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-violet-600 text-white text-sm font-medium"
+      >
+        Use Web Version
+      </a>
+    </div>
+  }
+</header>