From 91dadaedaac6767a663f39f8107a4c73ff1cf0c7 Mon Sep 17 00:00:00 2001
From: Felix Schulze <admin@schulze.network>
Date: Sat, 6 Dec 2025 01:29:08 +0100
Subject: [PATCH] visual improvements

---
 src/app/components/BackgroundPattern.tsx |  5 +++--
 src/app/components/Navbar.tsx            | 12 ++----------
 src/app/learn/what-is-fire/page.tsx      |  5 ++---
 src/app/page.tsx                         |  4 +---
 4 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/app/components/BackgroundPattern.tsx b/src/app/components/BackgroundPattern.tsx
index 69a8246..489acb5 100644
--- a/src/app/components/BackgroundPattern.tsx
+++ b/src/app/components/BackgroundPattern.tsx
@@ -129,7 +129,7 @@ export default function MultiIconPattern({ opacity = 0.2, spacing = 160 }) {
         const IconComponent = iconComponents[randomIndex];
 
         // Slightly randomize size and position for more organic feel
-        const size = 28 + Math.floor(Math.random() * 8);
+        const size = 30 + Math.floor(Math.random() * 8);
         const xOffset = Math.floor(Math.random() * (spacing / 1.618));
         const yOffset = Math.floor(Math.random() * (spacing / 1.618));
         const rotation = Math.round((Math.random() - 0.5) * 30);
@@ -138,7 +138,8 @@ export default function MultiIconPattern({ opacity = 0.2, spacing = 160 }) {
           <IconComponent
             key={`icon-${String(x)}-${String(y)}`}
             size={size}
-            className="text-primary fixed"
+            className="text-primary/30 fixed"
+            strokeWidth={2.5}
             style={{
               left: `${String(x * spacing + xOffset)}px`,
               top: `${String(y * spacing + yOffset)}px`,
diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
index d5b905b..9fbcf84 100644
--- a/src/app/components/Navbar.tsx
+++ b/src/app/components/Navbar.tsx
@@ -17,12 +17,12 @@ import { Button } from '@/components/ui/button';
 
 export function Navbar() {
   return (
-    <header className="bg-background/90 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-50 w-full border-b backdrop-blur">
+    <header className="md:bg-background/90 md:supports-[backdrop-filter]:bg-background/70 sticky top-0 z-50 w-full md:border-b md:backdrop-blur">
       <div className="container flex h-16 items-center justify-between px-4 md:px-6">
         <div className="mr-4 hidden items-center gap-6 md:flex">
           <Link
             href="/"
-            className="hover:bg-primary/10 flex items-center gap-2 rounded-full px-2 py-1 transition-colors"
+            className="hover:bg-primary/10 flex items-center gap-2 rounded-md px-2 py-1 transition-colors"
           >
             <Image
               src="/investingfire_logo_no-bg.svg"
@@ -137,14 +137,6 @@ export function Navbar() {
           </SheetContent>
         </Sheet>
 
-        {/* Mobile brand in center */}
-        <div className="flex flex-1 items-center justify-center md:hidden">
-          <Link href="/" className="flex items-center gap-2">
-            <Image src="/investingfire_logo_no-bg.svg" alt="InvestingFIRE" width={24} height={24} />
-            <span className="text-sm font-bold">InvestingFIRE</span>
-          </Link>
-        </div>
-
         <div className="flex flex-1 items-center justify-end space-x-2 md:flex-none">
           {/* Future: Theme Toggle, GitHub Link etc */}
         </div>
diff --git a/src/app/learn/what-is-fire/page.tsx b/src/app/learn/what-is-fire/page.tsx
index 31de5d4..de9d70b 100644
--- a/src/app/learn/what-is-fire/page.tsx
+++ b/src/app/learn/what-is-fire/page.tsx
@@ -94,7 +94,8 @@ export default function WhatIsFirePage() {
 
         <h2>The 3 Pillars of FIRE</h2>
         <p>To achieve financial independence, you need to optimize three levers:</p>
-        <ol>
+
+        <ol className="mb-8 list-inside list-decimal space-y-2">
           <li>
             <strong>Spend Less (Frugality):</strong> Cutting unnecessary costs is the most powerful lever
             because it has a double effect: it increases your savings <em>and</em> lowers the amount you
@@ -157,8 +158,6 @@ export default function WhatIsFirePage() {
           </li>
         </ul>
 
-        <Separator className="my-8" />
-
         <h2>Why {new Date().getFullYear().toString()} Changes Things</h2>
         <p>
           In {new Date().getFullYear().toString()}, we face unique challenges: higher inflation than the
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5b57e6b..624bfaa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -81,9 +81,7 @@ export default function HomePage() {
         <span className="bg-primary/15 text-primary rounded-full px-4 py-2 text-xs font-semibold tracking-wide uppercase shadow-sm">
           100% free • built for educational use
         </span>
-        <p className="text-primary-foreground/90 text-xl font-semibold md:text-2xl">
-          The #1 FIRE Calculator
-        </p>
+        <p className="text-foreground/90 text-xl font-semibold md:text-2xl">The #1 FIRE Calculator</p>
         <p className="text-foreground/80 max-w-2xl text-base text-balance md:text-lg">
           Plan your path to financial independence with transparent math—ad-free and built to teach you
           how FIRE works.