Layout updates (#34)

* chore: layout updates

* Logo upgrade

* Logo improvements

* Logo iteration

Author: gallayl

eslint.config.js

@@ -1,8 +1,9 @@
+import { defineConfig } from 'eslint/config';
 import js from '@eslint/js';
 import tseslint from 'typescript-eslint';
 import astroPlugin from 'eslint-plugin-astro';
 
-export default tseslint.config(
+export default defineConfig(
   js.configs.recommended,
   ...tseslint.configs.strict,
   ...astroPlugin.configs.recommended,

src/components/icons/FuryStackLogo.astro

@@ -0,0 +1,153 @@
+---
+interface Props {
+  size?: number;
+}
+
+const { size = 96 } = Astro.props;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+  width={size}
+  height={size}
+  aria-hidden="true"
+  class="furystack-logo"
+>
+  <title>FuryStack</title>
+  <defs>
+    <linearGradient id="fs-silver" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FFFFFF"></stop>
+      <stop offset="100%" stop-color="#94A3B8"></stop>
+    </linearGradient>
+
+    <linearGradient id="fs-blue" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#60A5FA"></stop>
+      <stop offset="100%" stop-color="#1D4ED8"></stop>
+    </linearGradient>
+
+    <linearGradient id="fs-dark" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#475569"></stop>
+      <stop offset="100%" stop-color="#0F172A"></stop>
+    </linearGradient>
+
+    <filter id="fs-glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur"></feGaussianBlur>
+      <feOffset dx="0" dy="4" result="offsetBlur"></feOffset>
+      <feFlood flood-color="#3B82F6" flood-opacity="0.2" result="glowColor"></feFlood>
+      <feComposite in="glowColor" in2="offsetBlur" operator="in" result="shadow"></feComposite>
+      <feMerge>
+        <feMergeNode in="shadow"></feMergeNode>
+        <feMergeNode in="SourceGraphic"></feMergeNode>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <g filter="url(#fs-glow)">
+    <!-- Left Pillar (Base) -->
+    <path d="M40 80 L120 160 V440 A8 8 0 0 1 112 448 H48 A8 8 0 0 1 40 440 Z" fill="url(#fs-silver)"
+    ></path>
+
+    <!-- Connection Bridge -->
+    <path d="M140 180 L220 260 L140 340 Z" fill="url(#fs-blue)"></path>
+
+    <!-- Stack Step 1 -->
+    <path
+      d="M230 320 L310 240 V440 A8 8 0 0 1 302 448 H238 A8 8 0 0 1 230 440 Z"
+      fill="url(#fs-blue)"></path>
+
+    <!-- Stack Step 2 -->
+    <path
+      d="M330 220 L410 140 V440 A8 8 0 0 1 402 448 H338 A8 8 0 0 1 330 440 Z"
+      fill="url(#fs-blue)"></path>
+
+    <!-- Stack Step 3 (Anchor) -->
+    <path
+      d="M430 120 L510 40 V440 A8 8 0 0 1 502 448 H438 A8 8 0 0 1 430 440 Z"
+      fill="url(#fs-dark)"></path>
+
+    <!-- Top Accent (Floating Element) -->
+    <path d="M180 120 H340 L260 200 Z" fill="url(#fs-silver)" opacity="0.9"></path>
+
+    <!-- Lower Detail (Alignment Piece) -->
+    <path d="M140 448 H210 L140 378 Z" fill="url(#fs-silver)"></path>
+  </g>
+</svg>
+<style>
+  /* Base transitions for hover effects if needed later */
+  .furystack-logo {
+    overflow: visible; /* Allow glow to spill out */
+  }
+
+  /* Animations */
+  @media (prefers-reduced-motion: no-preference) {
+    .fs-shape {
+      transform-box: fill-box;
+      transform-origin: bottom center;
+      opacity: 0;
+      animation-duration: 0.8s;
+      animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+      animation-fill-mode: forwards;
+    }
+
+    .fs-slide-right {
+      animation-name: fs-slide-right;
+      transform-origin: center center;
+    }
+
+    .fs-fade-down {
+      animation-name: fs-fade-down;
+      transform-origin: top center;
+    }
+
+    .fs-grow-up {
+      animation-name: fs-grow-up;
+    }
+
+    .fs-delay-1 {
+      animation-delay: 0.1s;
+    }
+    .fs-delay-2 {
+      animation-delay: 0.2s;
+    }
+    .fs-delay-3 {
+      animation-delay: 0.3s;
+    }
+    .fs-delay-4 {
+      animation-delay: 0.4s;
+    }
+
+    @keyframes fs-slide-right {
+      from {
+        opacity: 0;
+        transform: translateX(-20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+
+    @keyframes fs-fade-down {
+      from {
+        opacity: 0;
+        transform: translateY(-20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes fs-grow-up {
+      from {
+        opacity: 0;
+        transform: scaleY(0.4);
+      }
+      to {
+        opacity: 1;
+        transform: scaleY(1);
+      }
+    }
+  }
+</style>