chore(deps): update actions/setup-node action to v5

This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [eslint-plugin-react-hooks](https://react.dev/) ([source](https://github.com/facebook/react/tree/HEAD/packages/eslint-plugin-react-hooks)) | devDependencies | pin | [`^5.2.0` -> `5.2.0`](https://renovatebot.com/diffs/npm/eslint-plugin-react-hooks/5.2.0/5.2.0) |
| [pnpm/action-setup](https://github.com/pnpm/action-setup) | action | pinDigest |  -> `a7487c7` |

Add the preset `:preserveSemverRanges` to your config if you don't want to pin your dependencies.

---

### Configuration

📅 **Schedule**: Branch creation - "every weekend" (UTC), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://github.com/renovatebot/renovate/discussions) if that's undesired.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS4zMS4xIiwidXBkYXRlZEluVmVyIjoiNDEuMzEuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->

Reviewed-on: #7
Co-authored-by: Renovate Bot <renovatebot@schulze.network>
Co-committed-by: Renovate Bot <renovatebot@schulze.network>

.gitea/workflows/check.yml

@@ -0,0 +1,31 @@
+name: Lint
+
+on:
+  pull_request:
+  push:
+    branches:
+      - "**" # matches every branch
+
+jobs:
+  lint_and_typecheck:
+    name: Lint and Typecheck
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+        with:
+          node-version: 22
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run check
+        run: pnpm run check

README.md

@@ -1,3 +1,108 @@
-# fire
+![InvestingFIRE logo](/src/app/apple-icon.png)
 
-FIRE calculator
+# InvestingFIRE 🔥 — The #1 Interactive FIRE Calculator
+
+**InvestingFIRE** is a responsive web application for calculating your path to Financial Independence and Early Retirement (FIRE). It features a year-by-year projection engine that simulates both accumulation (savings and investment growth) and retirement (withdrawals) phases, allowing users to:
+
+- Input starting capital, monthly savings, expected annual growth rate, inflation rate, current age, desired retirement age, life expectancy, and desired monthly retirement allowance.
+- View a dynamic chart displaying projected portfolio balance and monthly allowance over time.
+- Instantly see their estimated “FIRE number” (required capital at retirement), how long their capital will last, and compare results to the “4% rule.”
+- Adjust assumptions live, with all calculations and visualizations updating automatically.
+- Access explanatory content about FIRE methodology, key variables, and additional community resources, all on a single, consolidated page.
+
+The project’s code is structured using React/Next.js with TypeScript, focusing on user experience, modern UI components, and clarity of financial assumptions.
+
+---
+
+## 🚀 Features at a Glance
+
+- **⚡️ Real-Time Projections:** Every field updates the chart _as you type_. Experiment with savings, growth rates, inflation, or retirement age and see your future instantly.
+- **📈 Interactive Chart:** Dual-area plots for portfolio value and future monthly spending, plus reference lines for FIRE milestones and “4% rule” legends.
+- **🧠 Education Baked In:** Contextual tooltips, deep-dive sections on how FIRE works, FAQs, and must-read resources included.
+- **🔎 Detailed Methodology:** Not just a 25x rule — runs a full, year-by-year simulation with inflation-adjusted withdrawals and optional 4%-rule overlays.
+- **👌 Modern UX:** Typing, sliding, or clicking feels _good_. Responsive on all devices.
+
+---
+
+## 🧰 How It Works
+
+The calculator models your FIRE journey in two phases:
+
+1. **Accumulation:**
+   - Your starting capital is grown by your expected CAGR (~7% by default).
+   - Monthly savings are added for each year until retirement.
+   - Every variable can be adjusted live (capital, savings, age, growth, inflation, spending, target retirement).
+
+2. **Retirement:**
+   - Your balance continues to grow by CAGR.
+   - Each year, an inflation-adjusted monthly allowance is withdrawn.
+   - The simulation runs until your selected life expectancy, showing the possibility of portfolio depletion.
+
+**Key Outputs:**
+
+- 🔥 “FIRE Number”: Portfolio value at your defined retirement age
+- 📊 Interactive projection chart: See how your nest egg and withdrawals evolve over time
+- 4️⃣ “4% Rule” overlays: Compare dynamic results to classic rule-of-thumb
+
+---
+
+## 🌟 Try It For Yourself
+
+To run locally:
+
+1. **Clone the repo**
+   ```bash
+   git clone https://git.schulze.network/schulze/fire.git
+   cd fire
+   ```
+2. **Install dependencies**
+   ```bash
+   pnpm install
+   ```
+3. **Run the app**
+   ```bash
+   pnpm run dev
+   ```
+4. Visit [http://localhost:3000](http://localhost:3000) and unleash the fire.
+
+Deployed version: [https://investingfire.com](https://investingfire.com)
+
+---
+
+## ✏️ Inputs & Variables
+
+- **Starting Capital** — How much you’ve already invested
+- **Monthly Savings** — What you’ll add each month
+- **Current Age & Retirement Age** — Your FI timeline
+- **Life Expectancy** — How long do you want income to last?
+- **Expected Growth Rate (CAGR)** — Portfolio annual % return, before inflation
+- **Inflation Rate** — Cost of living increases
+- **Desired Monthly Allowance** — Your lifestyle, today’s dollars
+
+As you adjust these, all projections update instantly _without needing to hit “Calculate.”_
+
+Try many “what ifs” fast.
+
+---
+
+## 👩‍💻 Contributing
+
+Pull requests are welcome! Open issues for bugs, new features, or debate about safe withdrawal rates and tax assumptions.
+
+---
+
+## 📄 License
+
+[GPL-3.0](./LICENSE)
+
+---
+
+## 🥇 Why Use InvestingFIRE?
+
+- You want the truth — not just a 4% fantasy.
+- You want to learn, not just punch in numbers.
+- You want clarity, speed, and modern UI.
+- You want to show your friends the best FIRE tool on the web.
+
+Enjoy the _rocket ride_ to financial independence.  
+**InvestingFIRE — Know your number. Change your future.**

package.json

@@ -6,52 +6,52 @@
   "scripts": {
     "build": "next build",
     "check": "next lint && tsc --noEmit",
-    "dev": "next dev --turbo",
+    "dev": "next dev --turbopack",
     "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
     "format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
-    "lint": "next lint",
     "lint:fix": "next lint --fix",
     "preview": "next build && next start",
-    "start": "next start",
-    "typecheck": "tsc --noEmit"
+    "start": "next start"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.0.1",
     "@radix-ui/react-accordion": "^1.2.8",
     "@radix-ui/react-label": "^2.1.4",
     "@radix-ui/react-select": "^2.2.2",
+    "@radix-ui/react-slider": "^1.3.2",
     "@radix-ui/react-slot": "^1.2.0",
-    "@t3-oss/env-nextjs": "^0.12.0",
+    "@t3-oss/env-nextjs": "^0.13.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.503.0",
-    "next": "^15.2.3",
+    "lucide-react": "^0.542.0",
+    "next": "^15.4.1",
     "next-plausible": "^3.12.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.56.1",
     "recharts": "^2.15.3",
     "tailwind-merge": "^3.2.0",
-    "zod": "^3.24.3"
+    "zod": "^4.0.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.3.1",
-    "@tailwindcss/postcss": "^4.0.15",
-    "@types/node": "^20.14.10",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "eslint": "^9.23.0",
-    "eslint-config-next": "^15.2.3",
-    "postcss": "^8.5.3",
-    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4.0.15",
-    "tw-animate-css": "^1.2.8",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.27.0"
+    "@eslint/eslintrc": "3.3.1",
+    "@tailwindcss/postcss": "4.1.12",
+    "@types/node": "22.18.0",
+    "@types/react": "19.1.12",
+    "@types/react-dom": "19.1.9",
+    "eslint": "9.34.0",
+    "eslint-config-next": "15.5.2",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "postcss": "8.5.6",
+    "prettier": "3.6.2",
+    "prettier-plugin-tailwindcss": "0.6.14",
+    "tailwindcss": "4.1.12",
+    "tw-animate-css": "1.3.7",
+    "typescript": "5.9.2",
+    "typescript-eslint": "8.41.0"
   },
   "ct3aMetadata": {
     "initVersion": "7.39.3"
   },
-  "packageManager": "npm@11.2.0"
+  "packageManager": "pnpm@10.15.0"
 }

pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+ignoredBuiltDependencies:
+  - unrs-resolver
+
+onlyBuiltDependencies:
+  - '@tailwindcss/oxide'
+  - sharp

public/wgu5fuk8d5j5wp3pjtta9vrw8d9by9qk.txt

@@ -0,0 +1 @@
+wgu5fuk8d5j5wp3pjtta9vrw8d9by9qk

renovate.json

@@ -0,0 +1,11 @@
+{
+  "extends": ["config:best-practices", ":semanticCommits"],
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "packageRules": [
+    {
+      "matchUpdateTypes": ["minor", "patch", "pin", "digest"],
+      "automerge": true,
+      "automergeType": "branch"
+    }
+  ]
+}

src/app/components/BackgroundPattern.tsx

@@ -0,0 +1,157 @@
+"use client";
+import { useState, useEffect } from "react";
+import {
+  type LucideIcon,
+  HandCoins,
+  Bitcoin,
+  Coins,
+  DollarSign,
+  Euro,
+  IndianRupee,
+  JapaneseYen,
+  PiggyBank,
+  PoundSterling,
+  Wallet,
+  Banknote,
+  ChartCandlestick,
+  CirclePercent,
+  CreditCard,
+  Gem,
+  Receipt,
+  ShoppingBasket,
+  Rocket,
+  RockingChair,
+  Sparkles,
+  ChartPie,
+  ChartBar,
+  BarChart3,
+  ChartLine,
+  TrendingDown,
+  TrendingUp,
+  Vault,
+  Landmark,
+  Briefcase,
+  Handshake,
+  Shield,
+  Lock,
+  CalendarRange,
+  Hourglass,
+  Sprout,
+  Target,
+} from "lucide-react";
+
+export default function MultiIconPattern({ opacity = 0.2, spacing = 160 }) {
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const [rows, setRows] = useState(0);
+  const [columns, setColumns] = useState(0);
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (window.innerWidth > width + spacing * 2) {
+        setWidth(window.innerWidth);
+      }
+      if (window.innerHeight > height + spacing * 2) {
+        setHeight(window.innerHeight);
+      }
+    };
+
+    updateDimensions();
+    window.addEventListener("resize", updateDimensions);
+
+    return () => {
+      window.removeEventListener("resize", updateDimensions);
+    };
+  }, [height, width, spacing]);
+
+  useEffect(() => {
+    setColumns(Math.ceil(width / spacing) + 3);
+  }, [width, spacing]);
+
+  useEffect(() => {
+    setRows(Math.ceil(height / spacing) + 3);
+  }, [height, spacing]);
+
+  // Explicitly type the array as LucideIcon[]
+  const iconComponents: LucideIcon[] = [
+    HandCoins,
+    Bitcoin,
+    Coins,
+    DollarSign,
+    Euro,
+    IndianRupee,
+    JapaneseYen,
+    PiggyBank,
+    PoundSterling,
+    Wallet,
+    Banknote,
+    ChartCandlestick,
+    CirclePercent,
+    CreditCard,
+    Gem,
+    Receipt,
+    ShoppingBasket,
+    Rocket,
+    RockingChair,
+    Sparkles,
+    ChartPie,
+    ChartBar,
+    BarChart3,
+    ChartLine,
+    TrendingDown,
+    TrendingUp,
+    Vault,
+    Landmark,
+    Briefcase,
+    Handshake,
+    Shield,
+    Lock,
+    CalendarRange,
+    Hourglass,
+    Sprout,
+    Target,
+  ];
+
+  const renderIcons = ({
+    rows,
+    columns,
+  }: {
+    rows: number;
+    columns: number;
+  }) => {
+    const icons = [];
+    for (let y = 0; y < rows; y++) {
+      for (let x = 0; x < columns; x++) {
+        // Pick a random icon component from the array
+        const randomIndex = Math.floor(Math.random() * iconComponents.length);
+        const IconComponent = iconComponents[randomIndex]!;
+
+        // Slightly randomize size and position for more organic feel
+        const size = 28 + Math.floor(Math.random() * 8);
+        const xOffset = Math.floor(Math.random() * (spacing / 1.618));
+        const yOffset = Math.floor(Math.random() * (spacing / 1.618));
+
+        icons.push(
+          <IconComponent
+            key={`icon-${x}-${y}`}
+            size={size}
+            className="text-primary fixed"
+            style={{
+              left: `${x * spacing + xOffset}px`,
+              top: `${y * spacing + yOffset}px`,
+              opacity: opacity,
+              transform: `rotate(${Math.round((Math.random() - 0.5) * 30)}deg)`,
+            }}
+          />,
+        );
+      }
+    }
+    return icons;
+  };
+
+  return (
+    <div className="absolute h-full w-full">
+      {width > 0 && renderIcons({ rows, columns })}
+    </div>
+  );
+}

src/app/components/footer.tsx

@@ -0,0 +1,16 @@
+export default function Footer() {
+  return (
+    <footer className="w-full py-8 text-center text-xs">
+      <p className="text-xs">
+        © {new Date().getFullYear()} InvestingFIRE. All rights reserved.{" "}
+        <a
+          href="https://schulze.network"
+          target="_blank"
+          className="text-primary hover:underline"
+        >
+          Hosting by Schulze.network
+        </a>
+      </p>
+    </footer>
+  );
+}

src/app/layout.tsx

@@ -1,15 +1,17 @@
 import "@/styles/globals.css";
 import PlausibleProvider from "next-plausible";
-import { type Metadata } from "next";
+import { type Metadata, type Viewport } from "next";
 import { Geist } from "next/font/google";
 import { WebVitals } from "./components/web-vitals";
 
+export const viewport: Viewport = {
+  themeColor: [{ color: "oklch(0.97 0.0228 95.96)" }],
+};
+
 export const metadata: Metadata = {
-  title:
-    "InvestingFIRE Calculator | Plan Your Financial Independence & Early Retirement",
+  title: "InvestingFIRE | Finance and Retirement Calculator",
   description:
-    "Achieve Financial Independence, Retire Early (FIRE) with the InvestingFIRE calculator. Get personalized projections and investing advice to plan your journey.",
-  icons: [{ rel: "icon", url: "/favicon.ico" }],
+    "Achieve Financial Independence & Early Retirement! Plan your FIRE journey with the InvestingFIRE calculator and get personalized projections in buttersmooth graphs.",
 };
 
 const geist = Geist({
@@ -24,17 +26,16 @@ export default function RootLayout({
     <html lang="en" className={geist.variable}>
       <head>
         <meta name="apple-mobile-web-app-title" content="FIRE" />
+        <PlausibleProvider
+          domain="investingfire.com"
+          customDomain="https://analytics.schulze.network"
+          selfHosted={true}
+          enabled={true}
+          trackOutboundLinks={true}
+        />
       </head>
-      <PlausibleProvider
-        domain="investingfire.com"
-        customDomain="https://analytics.schulze.network"
-        selfHosted={true}
-        enabled={true}
-        trackOutboundLinks={true}
-      >
-        <WebVitals />
-        <body>{children}</body>
-      </PlausibleProvider>
+      <WebVitals />
+      <body>{children}</body>
     </html>
   );
 }

src/app/page.tsx

@@ -6,13 +6,73 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import Footer from "./components/footer";
+import BackgroundPattern from "./components/BackgroundPattern";
 
 export default function HomePage() {
+  const faqData = {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: [
+      {
+        "@type": "Question",
+        name: "What methodology does this calculator use?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "We run a multi-year projection in two phases: 1. Accumulation: Your balance grows by CAGR and you add monthly savings. 2. Retirement: The balance continues compounding, but you withdraw an inflation-adjusted monthly allowance. The result: a precise estimate of the capital you'll have at retirement (your “FIRE Number”) and how long it will last until your chosen life expectancy.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "Why isn't this just the 4% rule?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "The 4% rule is a useful starting point (25× annual spending), but it assumes a fixed withdrawal rate with inflation adjustments and doesn't model ongoing savings or dynamic market returns. Our calculator simulates each year's growth, contributions, and inflation-indexed withdrawals to give you a tailored picture.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "How do I choose a realistic growth rate?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "Historically, a diversified portfolio of equities and bonds has returned around 7-10% per year before inflation. We recommend starting around 6-8% (net of fees), then running “what-if” scenarios—5% on the conservative side, 10% on the aggressive side—to see how they affect your timeline.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "How does inflation factor into my FIRE Number?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "Cost of living rises. To maintain today's lifestyle, your monthly allowance must grow each year by your inflation rate. This calculator automatically inflates your desired monthly spending and subtracts it from your portfolio during retirement, ensuring your FIRE Number keeps pace with rising expenses.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "Can I really retire early with FIRE?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "Early retirement is achievable with disciplined saving, smart investing, and realistic assumptions. This tool helps you set targets, visualize outcomes, and adjust inputs—so you can build confidence in your plan and make informed trade-offs between lifestyle, risk, and timeline.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "How should I use this calculator effectively?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "Start with your actual numbers (capital, savings, age). Set conservative - mid - aggressive growth rates to bound possibilities. Slide your retirement age to explore “early” vs. “traditional” scenarios. Review the chart—especially the reference lines—to see when you hit FI and how withdrawals impact your balance. Experiment with higher savings rates or lower target spending to accelerate your path.",
+        },
+      },
+    ],
+  };
+
   return (
-    <main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-4">
-      <div className="mx-auto flex flex-col items-center justify-center gap-4 text-center">
-        <div className="flex flex-row flex-wrap items-center justify-center gap-4 align-middle">
+    <main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-2">
+      <BackgroundPattern />
+      <div className="z-10 mx-auto flex flex-col items-center justify-center gap-4 text-center">
+        <div className="mt-8 flex flex-row flex-wrap items-center justify-center gap-4 align-middle">
           <Image
+            priority
+            unoptimized
             src="/investingfire_logo_no-bg.svg"
             alt="InvestingFIRE Logo"
             width={100}
@@ -31,29 +91,35 @@ export default function HomePage() {
       </div>
 
       {/* Added SEO Content Sections */}
-      <div className="mx-auto max-w-2xl py-12 text-left">
+      <div className="z-10 mx-auto max-w-2xl py-12 text-left">
         <section className="mb-12">
           <h2 className="mb-4 text-3xl font-bold">
-            What is FIRE? Understanding Financial Independence and Early
+            What Is FIRE? Understanding Financial Independence and Early
             Retirement
           </h2>
           <p className="mb-4 text-lg leading-relaxed">
-            FIRE stands for &quot;Financial Independence, Retire Early.&quot;
-            It&apos;s a movement focused on aggressive saving and strategic
-            investing to build a substantial portfolio. The goal is for
-            investment returns to cover living expenses indefinitely, freeing
-            you from traditional employment. Achieving FIRE means gaining the
-            freedom to pursue passions, travel, or simply enjoy life without
-            needing a regular paycheck. Sound investing advice is crucial for
-            building the wealth needed.
+            FIRE stands for{" "}
+            <strong>Financial Independence, Retire Early</strong>. It&apos;s a
+            lifestyle movement built around two core ideas:
           </p>
+          <ul className="mb-4 ml-6 list-disc space-y-2 text-lg">
+            <li>
+              <strong>Aggressive saving & investing</strong>—often 50%+ of
+              income—so your capital grows rapidly.
+            </li>
+            <li>
+              <strong>Passive-income coverage</strong>—when your investment
+              returns exceed your living expenses, you gain freedom from a
+              traditional 9-5.
+            </li>
+          </ul>
           <p className="text-lg leading-relaxed">
-            The core principle involves maximizing your savings rate (often
-            50%+) and investing wisely, typically in low-cost, diversified
-            assets like index funds. Your &quot;FIRE number&quot; – the capital
-            needed – is often estimated as 25 times your desired annual
-            spending, derived from the 4% safe withdrawal rate guideline. This
-            FIRE calculator helps you personalize this estimate.
+            By reaching your personal <em>FIRE Number</em>—the nest egg needed
+            to cover your inflation-adjusted spending—you unlock the option to
+            step away from a daily paycheck and pursue passion projects, travel,
+            family, or anything else. This calculator helps you simulate your
+            journey, estimate how much you need, and visualize both your
+            accumulation phase and your retirement withdrawals over time.
           </p>
         </section>
 
@@ -62,141 +128,173 @@ export default function HomePage() {
             How This FIRE Calculator Provides Investing Insights
           </h2>
           <p className="mb-4 text-lg leading-relaxed">
-            This calculator helps visualize your path to FIRE by projecting
-            investment growth based on your inputs. Understanding these
-            projections is a key piece of investing advice for long-term
-            planning. Here&apos;s a breakdown of the inputs:
+            Our interactive tool goes beyond a simple “25x annual spending”
+            rule. It runs a <strong>year-by-year simulation</strong> of your
+            portfolio, combining:
           </p>
           <ul className="mb-4 ml-6 list-disc space-y-2 text-lg">
             <li>
-              <strong>Starting Capital:</strong> The total amount you currently
-              have invested.
+              <strong>Starting Capital</strong>—your current invested balance
             </li>
             <li>
-              <strong>Monthly Savings:</strong> The amount you consistently save
-              and invest each month.
+              <strong>Monthly Savings</strong>—ongoing contributions to your
+              portfolio
             </li>
             <li>
-              <strong>Current Age:</strong> Your current age in years.
+              <strong>Expected Annual Growth Rate (CAGR)</strong>—compounding
+              returns before inflation
             </li>
             <li>
-              <strong>Expected Annual Growth Rate (%):</strong> The average
-              annual return you expect from your investments (after fees, before
-              inflation).
+              <strong>Annual Inflation Rate</strong>—to inflate your target
+              withdrawal each year
             </li>
             <li>
-              <strong>Desired Monthly Allowance (Today&apos;s Value):</strong>{" "}
-              How much you want to be able to spend each month in retirement, in
-              today&apos;s money value.
+              <strong>Desired Monthly Allowance</strong>—today&apos;s-value
+              spending goal
             </li>
             <li>
-              <strong>Annual Inflation Rate (%):</strong> The expected average
-              rate at which the cost of living will increase.
+              <strong>Retirement Age & Life Expectancy</strong>—defines your
+              accumulation horizon and payout period
+            </li>
+          </ul>
+          <p className="text-lg leading-relaxed">Key features:</p>
+          <ul className="mb-4 ml-6 list-disc space-y-2 text-lg">
+            <li>
+              <strong>Real-time calculation</strong>—as you tweak any input,
+              your FIRE Number and chart update instantly.
             </li>
             <li>
-              <strong>Life Expectancy (Age):</strong> The age until which you
-              want your funds to last.
+              <strong>Interactive chart</strong> with area plots for both{" "}
+              <em>portfolio balance</em> and{" "}
+              <em>inflation-adjusted allowance</em>, plus reference lines
+              showing your retirement date and required FIRE Number.
+            </li>
+            <li>
+              <strong>Custom simulation</strong>—switches from accumulation
+              (adding savings) to retirement (withdrawing allowance),
+              compounding each year based on your growth rate.
             </li>
           </ul>
           <p className="text-lg leading-relaxed">
-            The calculator simulates your investment growth year by year,
-            incorporating monthly contributions, the power of compound growth (a
-            core investing principle), and inflation&apos;s impact on your
-            target allowance. It estimates the age at which your capital could
-            sustain your desired, inflation-adjusted monthly spending throughout
-            your expected retirement until your specified life expectancy. It
-            calculates your potential &quot;FIRE Number&quot; and the age you
-            might reach financial independence.
+            With this level of granularity, you can confidently experiment with
+            savings rate, target retirement age, and investment assumptions to
+            discover how small tweaks speed up or delay your path to financial
+            independence.
           </p>
         </section>
 
         <section className="mb-12">
+          <script
+            type="application/ld+json"
+            dangerouslySetInnerHTML={{ __html: JSON.stringify(faqData) }}
+          />
           <h2 className="mb-4 text-3xl font-bold">
             FIRE & Investing Frequently Asked Questions (FAQ)
           </h2>
+
           <Accordion type="single" collapsible className="w-full">
             <AccordionItem value="item-1">
               <AccordionTrigger className="text-xl font-semibold">
-                What is the 4% rule?
+                What methodology does this calculator use?
               </AccordionTrigger>
               <AccordionContent className="text-lg leading-relaxed">
-                The 4% rule is a guideline suggesting that you can safely
-                withdraw 4% of your investment portfolio&apos;s value in your
-                first year of retirement, and then adjust that amount for
-                inflation each subsequent year, with a high probability of your
-                money lasting for at least 30 years. This calculator uses a more
-                dynamic simulation based on your life expectancy but is related
-                to this concept.
+                We run a multi-year projection in two phases:
+                <ol className="ml-6 list-decimal space-y-1">
+                  <li>
+                    <strong>Accumulation:</strong> Your balance grows by CAGR
+                    and you add monthly savings.
+                  </li>
+                  <li>
+                    <strong>Retirement:</strong> The balance continues
+                    compounding, but you withdraw an inflation-adjusted monthly
+                    allowance.
+                  </li>
+                </ol>
+                The result: a precise estimate of the capital you&apos;ll have
+                at retirement (your “FIRE Number”) and how long it will last
+                until your chosen life expectancy.
               </AccordionContent>
             </AccordionItem>
 
             <AccordionItem value="item-2">
               <AccordionTrigger className="text-xl font-semibold">
-                Is the Expected Growth Rate realistic? Finding the right
-                investing advice often starts here.
+                Why isn&apos;t this just the 4% rule?
               </AccordionTrigger>
               <AccordionContent className="text-lg leading-relaxed">
-                Historically, diversified stock market investments have returned
-                around 7-10% annually long-term (before inflation). A rate of 7%
-                (after fees) is common, but remember past performance
-                doesn&apos;t guarantee future results, a fundamental piece of
-                investing advice. Choose a rate reflecting your risk tolerance
-                and investment strategy.
+                The 4% rule is a useful starting point (25× annual spending),
+                but it assumes a fixed withdrawal rate with inflation
+                adjustments and doesn&apos;t model ongoing savings or dynamic
+                market returns. Our calculator simulates each year&apos;s
+                growth, contributions, and inflation-indexed withdrawals to give
+                you a tailored picture.
               </AccordionContent>
             </AccordionItem>
 
             <AccordionItem value="item-3">
               <AccordionTrigger className="text-xl font-semibold">
-                How does inflation impact my FIRE number?
+                How do I choose a realistic growth rate?
               </AccordionTrigger>
               <AccordionContent className="text-lg leading-relaxed">
-                Inflation erodes the purchasing power of money over time. Your
-                desired monthly allowance needs to increase each year just to
-                maintain the same standard of living. This calculator accounts
-                for this by adjusting your target allowance upwards based on the
-                inflation rate you provide, ensuring the calculated FIRE number
-                supports your desired lifestyle in future dollars.
+                Historically, a diversified portfolio of equities and bonds has
+                returned around 7-10% per year before inflation. We recommend
+                starting around 6-8% (net of fees), then running “what-if”
+                scenarios—5% on the conservative side, 10% on the aggressive
+                side—to see how they affect your timeline.
               </AccordionContent>
             </AccordionItem>
 
             <AccordionItem value="item-4">
               <AccordionTrigger className="text-xl font-semibold">
-                Can I really retire early with FIRE?
+                How does inflation factor into my FIRE Number?
               </AccordionTrigger>
               <AccordionContent className="text-lg leading-relaxed">
-                Retiring significantly early is achievable but demands
-                discipline, a high savings rate, and smart investing. Success
-                depends on income, expenses, savings habits, and investment
-                returns. Use this FIRE calculator as a planning tool,
-                understanding it provides estimates based on your assumptions
-                and chosen investing approach.
+                Cost of living rises. To maintain today&apos;s lifestyle, your
+                monthly allowance must grow each year by your inflation rate.
+                This calculator automatically inflates your desired monthly
+                spending and subtracts it from your portfolio during retirement,
+                ensuring your FIRE Number keeps pace with rising expenses.
               </AccordionContent>
             </AccordionItem>
 
             <AccordionItem value="item-5">
               <AccordionTrigger className="text-xl font-semibold">
-                What does FIRE stand for?
+                Can I really retire early with FIRE?
               </AccordionTrigger>
               <AccordionContent className="text-lg leading-relaxed">
-                FIRE stands for Financial Independence, Retire Early. It
-                represents a lifestyle movement aimed at maximizing your savings
-                rate through increased income and/or decreased expenses to
-                achieve financial independence and retire much earlier than
-                traditional retirement age.
+                Early retirement is achievable with disciplined saving, smart
+                investing, and realistic assumptions. This tool helps you set
+                targets, visualize outcomes, and adjust inputs—so you can build
+                confidence in your plan and make informed trade-offs between
+                lifestyle, risk, and timeline.
               </AccordionContent>
             </AccordionItem>
 
             <AccordionItem value="item-6">
               <AccordionTrigger className="text-xl font-semibold">
-                How much should I save each month?
+                How should I use this calculator effectively?
               </AccordionTrigger>
               <AccordionContent className="text-lg leading-relaxed">
-                FIRE enthusiasts typically aim to save 50-70% of their income.
-                The more you can save, the faster you&apos;ll reach your FIRE
-                goal. However, the right amount depends on your income,
-                lifestyle, and target retirement age. Use the calculator to
-                experiment with different monthly savings amounts to see their
-                impact on your retirement timeline.
+                <ul className="ml-6 list-disc space-y-1">
+                  <li>
+                    Start with your actual numbers (capital, savings, age).
+                  </li>
+                  <li>
+                    Set conservative - mid - aggressive growth rates to bound
+                    possibilities.
+                  </li>
+                  <li>
+                    Slide your retirement age to explore “early” vs.
+                    “traditional” scenarios.
+                  </li>
+                  <li>
+                    Review the chart—especially the reference lines—to see when
+                    you hit FI and how withdrawals impact your balance.
+                  </li>
+                  <li>
+                    Experiment with higher savings rates or lower target
+                    spending to accelerate your path.
+                  </li>
+                </ul>
               </AccordionContent>
             </AccordionItem>
           </Accordion>
@@ -208,77 +306,48 @@ export default function HomePage() {
             FIRE Journey & Investing Resources
           </h2>
           <p className="mb-6 text-lg leading-relaxed">
-            Ready to dive deeper into FIRE and solidify your investing strategy?
-            Explore these valuable resources for financial independence planning
-            and investing advice:
+            Ready to deepen your knowledge and build a bullet-proof plan? Below
+            are some of our favorite blogs, books, tools, and communities for
+            financial independence and smart investing.
           </p>
 
-          <div className="bg-secondary/20 my-8 rounded-md p-4 text-lg">
+          <div className="bg-foreground my-8 rounded-md p-4 text-lg">
             <p className="font-semibold">Getting Started with FIRE:</p>
             <ol className="ml-6 list-decimal space-y-1">
               <li>
-                Calculate your personal numbers using this FIRE calculator and
-                other tools.
+                Run your first projection above to find your target FIRE Number.
+              </li>
+              <li>Identify areas to boost savings or reduce expenses.</li>
+              <li>
+                Study index-fund strategies and low-cost investing advice.
               </li>
               <li>
-                Seek sound investing advice and consider joining communities
-                like r/Fire for support.
+                Join{" "}
+                <a
+                  href="https://www.reddit.com/r/Fire/"
+                  target="_blank"
+                  className="text-primary hover:underline"
+                >
+                  supportive communities like r/Fire
+                </a>{" "}
+                to learn from real journeys.
               </li>
-              <li>Explore books and podcasts to deepen your understanding</li>
             </ol>
           </div>
 
           <div className="grid gap-8 md:grid-cols-2">
             <div>
-              <h3 className="mb-3 text-xl font-semibold">
-                Blogs & Investing Websites
-              </h3>
+              <h3 className="mb-3 text-xl font-semibold">Blogs & Websites</h3>
               <ul className="ml-6 list-disc space-y-2 text-lg">
                 <li>
                   <a
-                    href="https://www.mrmoneymustache.com/2012/01/13/the-shockingly-simple-math-behind-early-retirement/"
+                    href="https://www.mrmoneymustache.com/"
                     target="_blank"
                     className="text-primary hover:underline"
                   >
-                    Mr. Money Mustache - Simple Math Behind Early Retirement &
-                    Investing
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="https://www.playingwithfire.co/resources"
-                    target="_blank"
-                    className="text-primary hover:underline"
-                  >
-                    Playing With FIRE - Comprehensive Resources
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="https://www.reddit.com/r/Fire/"
-                    target="_blank"
-                    className="text-primary hover:underline"
-                  >
-                    r/Fire Reddit Community
-                  </a>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <h3 className="mb-3 text-xl font-semibold">
-                Books & Investment Learning
-              </h3>
-              <ul className="ml-6 list-disc space-y-2 text-lg">
-                <li>
-                  <a
-                    href="https://www.amazon.com/Your-Money-Life-Transforming-Relationship/dp/0143115766"
-                    target="_blank"
-                    className="text-primary hover:underline"
-                  >
-                    Your Money or Your Life - Foundational FIRE & Investing
-                    Principles
-                  </a>
+                    Mr. Money Mustache
+                  </a>{" "}
+                  - Hardcore frugality & early retirement success stories.
                 </li>
                 <li>
                   <a
@@ -286,8 +355,45 @@ export default function HomePage() {
                     target="_blank"
                     className="text-primary hover:underline"
                   >
-                    Playing With FIRE Documentary
-                  </a>
+                    Playing With FIRE
+                  </a>{" "}
+                  - Community resources & real-life case studies.
+                </li>
+                <li>
+                  <a
+                    href="https://www.reddit.com/r/Fire/"
+                    target="_blank"
+                    className="text-primary hover:underline"
+                  >
+                    r/Fire
+                  </a>{" "}
+                  - Active forum for questions, tips, and support.
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="mb-3 text-xl font-semibold">Books & Podcasts</h3>
+              <ul className="ml-6 list-disc space-y-2 text-lg">
+                <li>
+                  <a
+                    href="https://www.amazon.com/Your-Money-Life-Transforming-Relationship/dp/0143115766"
+                    target="_blank"
+                    className="text-primary hover:underline"
+                  >
+                    Your Money or Your Life
+                  </a>{" "}
+                  - The classic guide to aligning money with values.
+                </li>
+                <li>
+                  <a
+                    href="https://podcasts.apple.com/us/podcast/biggerpockets-money-podcast/id1330225136"
+                    target="_blank"
+                    className="text-primary hover:underline"
+                  >
+                    BiggerPockets Money Podcast
+                  </a>{" "}
+                  - Interviews on FIRE strategies and wealth building.
                 </li>
                 <li>
                   <a
@@ -295,37 +401,39 @@ export default function HomePage() {
                     target="_blank"
                     className="text-primary hover:underline"
                   >
-                    BiggerPockets Money Podcast - FIRE Calculators & Investing
-                    Strategies
-                  </a>
+                    InvestingFIRE Calculator Demo
+                  </a>{" "}
+                  - Deep dive on how interactive projections can guide your
+                  plan.
                 </li>
               </ul>
             </div>
 
             <div>
               <h3 className="mb-3 text-xl font-semibold">
-                Additional FIRE & Investing Calculators
+                Additional Calculators & Tools
               </h3>
               <ul className="ml-6 list-disc space-y-2 text-lg">
+                <li>
+                  <a
+                    href="https://ghostfol.io"
+                    target="_blank"
+                    className="text-primary hover:underline"
+                  >
+                    Ghostfolio
+                  </a>{" "}
+                  - Wealth management application for individuals.
+                </li>
                 <li>
                   <a
                     href="https://walletburst.com/tools/coast-fire-calculator/"
                     target="_blank"
                     className="text-primary hover:underline"
                   >
-                    Coast FIRE Calculator - For those considering a partial
-                    early retirement
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="https://www.empower.com/retirement-calculator"
-                    target="_blank"
-                    className="text-primary hover:underline"
-                  >
-                    Empower Retirement Planner - Free portfolio analysis and net
-                    worth tracking
-                  </a>
+                    Coast FIRE Calculator
+                  </a>{" "}
+                  - When you “max out” early contributions but let compounding
+                  do the rest.
                 </li>
                 <li>
                   <a
@@ -333,43 +441,16 @@ export default function HomePage() {
                     target="_blank"
                     className="text-primary hover:underline"
                   >
-                    CAGR Compound Interest Calculator - Understand Investment
-                    Growth
-                  </a>
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <h3 className="mb-3 text-xl font-semibold">
-                Recent Investing & FIRE Articles
-              </h3>
-              <ul className="ml-6 list-disc space-y-2 text-lg">
-                <li>
-                  <a
-                    href="https://www.businessinsider.com/retiring-tech-early-coast-fire-make-me-millionaire-2025-4"
-                    target="_blank"
-                    className="text-primary hover:underline"
-                  >
-                    Coast FIRE: Retiring in your 30s while becoming a
-                    millionaire by 60
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="https://www.businessinsider.com/financial-independence-retire-early-saving-loneliness-retreat-bali-making-friends-2025-2"
-                    target="_blank"
-                    className="text-primary hover:underline"
-                  >
-                    The Social Side of FIRE: Finding Community in Financial
-                    Independence
-                  </a>
+                    Compound Interest Calculator
+                  </a>{" "}
+                  - Explore the power of growth rates in isolation.
                 </li>
               </ul>
             </div>
           </div>
         </section>
       </div>
+      <Footer />
     </main>
   );
 }

src/app/robots.ts

@@ -0,0 +1,11 @@
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: "https://investingfire.com/sitemap.xml",
+  };
+}

src/app/sitemap.ts

@@ -0,0 +1,13 @@
+import { BASE_URL } from "@/lib/constants";
+import { type MetadataRoute } from "next";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: BASE_URL,
+      lastModified: new Date(),
+      changeFrequency: "yearly",
+      priority: 1,
+    },
+  ];
+}

src/components/ui/slider.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max],
+  );
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider };

src/lib/constants.ts

@@ -0,0 +1 @@
+export const BASE_URL = "https://investingfire.com/";