update SEO texts

.cursorrules

@@ -1,33 +0,0 @@
-# Cursor Rules for InvestingFIRE 🔥
-
-## General Principles
-- **Quality First:** All new features must include appropriate tests.
-- **User-Centric:** Prioritize user experience and accessibility in all changes.
-- **Dry Code:** Avoid duplication; use utility functions and components.
-
-## Testing Requirements 🧪
-- **Unit Tests:** Required for all new utility functions, hooks, and complex logic.
-  - Use `vitest` and `react-testing-library`.
-  - Place tests in `__tests__` directories or alongside files with `.test.ts(x)` extension.
-- **E2E Tests:** Required for new user flows and critical paths.
-  - Use `playwright`.
-  - Ensure tests cover happy paths and error states.
-- **Visual Regression:** Consider for major UI changes.
-
-## Coding Standards
-- **Type Safety:** No `any`. Use proper Zod schemas for validation.
-- **Components:** Use functional components with strict prop typing.
-- **Styling:** Use Tailwind CSS. Avoid inline styles.
-- **State Management:** Prefer local state or React Context. Avoid global state libraries unless necessary.
-
-## Workflow
-1. **Plan:** Break down tasks.
-2. **Implement:** Write clean, commented code.
-3. **Test:** specific unit and/or E2E tests.
-4. **Verify:** Run linter and type checker (`pnpm check`).
-
-## Specific Patterns
-- **Forms:** Use `react-hook-form` with `zod` resolvers.
-- **Charts:** Use `recharts` and ensure tooltips are accessible.
-- **Calculations:** Keep financial logic separate from UI components where possible (e.g., in `lib/` or custom hooks) to facilitate testing.
-

.gitea/workflows/lint.yml

@@ -1,31 +0,0 @@
-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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
-        with:
-          node-version: 24
-          cache: "pnpm"
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Run lint
-        run: pnpm run lint

.gitignore

@@ -44,6 +44,3 @@ yarn-error.log*
 
 # idea files
 .idea
-playwright-report/
-
-test-results/

.prettierrc

@@ -1,6 +0,0 @@
-{
-  "tabWidth": 2,
-  "singleQuote": true,
-  "printWidth": 105,
-  "plugins": ["prettier-plugin-tailwindcss"]
-}

README.md

@@ -1,163 +1,3 @@
-![InvestingFIRE logo](/src/app/apple-icon.png)
+# fire
 
-# 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.
-
-Deployed version: [https://investingfire.com](https://investingfire.com)
-
----
-
-## 🎯 Goal & Vision
-
-### **Goal**
-To build the most comprehensive, user-friendly, and transparent open-source financial independence calculator on the web.
-
-### **Vision**
-Democratize financial planning by providing professional-grade simulation tools in an accessible, privacy-focused, and beautiful interface. We believe everyone should have the ability to model their financial future without needing a finance degree or expensive software.
-
-### **Business Model**
-InvestingFIRE operates on a transparent open-source model:
-1.  **Free Forever Core:** The essential calculation tools will always be free and open-source.
-2.  **Community Supported:** We rely on community contributions (code & feedback) to improve the tool.
-3.  **Educational Affiliates:** We may curate high-quality resources (books, courses, tools) to help users on their journey, keeping the tool free of intrusive ads.
-
----
-
-## 🗺️ Roadmap
-
-We are actively expanding the capabilities of InvestingFIRE. Below is our plan broken down into phases.
-
-### **Phase 1: Enhanced Simulation (The Engine)**
-Focus on making the math more robust and flexible.
-- [ ] **Coast FIRE Mode:** Option to stop contributions at a certain age but retire later.
-- [ ] **Barista FIRE Mode:** Include part-time income during "retirement" years.
-- [ ] **Monte Carlo Simulations:** Add probabilistic outcomes (e.g., "95% chance of success") instead of just deterministic linear growth.
-- [ ] **Variable Withdrawal Strategies:** Implement dynamic withdrawal rules (e.g., Guyton-Klinger) beyond just fixed inflation-adjusted withdrawals.
-
-### **Phase 2: User Experience & Persistence**
-Make the tool easier to use and return to.
-- [ ] **URL State Sharing:** Encode form values into the URL so scenarios can be bookmarked and shared.
-- [ ] **Local Persistence:** Automatically save user inputs to `localStorage` so they don't vanish on refresh.
-- [ ] **Currency & Locale Support:** Allow users to select currency symbols and number formatting (USD, EUR, GBP, etc.).
-
-### **Phase 3: Advanced Features & Analytics**
-For the power users who need more detail.
-- [ ] **Tax Considerations:** Simple toggles for Pre-tax vs. Post-tax estimations.
-- [ ] **Scenario Comparison:** Compare two different plans side-by-side (e.g., "Retire at 45 vs 55").
-- [ ] **Data Export:** Download projection data as CSV or PDF reports.
-
-### **Phase 4: Content & Community**
-- [ ] **Blog/Guides:** Integrate a CMS (like Markdown/MDX) for in-depth financial guides.
-- [ ] **Community Presets:** "One-click" setups for common strategies (e.g., "Lean FIRE", "Fat FIRE").
-
----
-
-## 🚀 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.
-
-### Running Tests 🧪
-
-We use **Vitest** for unit testing and **Playwright** for end-to-end (E2E) testing.
-
-**Unit Tests:**
-```bash
-pnpm test
-```
-
-**E2E Tests:**
-```bash
-# First install browsers (only needed once)
-pnpm exec playwright install
-
-# Run tests
-pnpm test:e2e
-```
-
----
-
-## ✏️ 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.**
+FIRE calculator

e2e/home.spec.ts

@@ -1,15 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("homepage has title and calculator", async ({ page }) => {
-  await page.goto("/");
-
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/InvestingFIRE/);
-
-  // Check for main heading
-  await expect(page.getByRole("heading", { name: "InvestingFIRE" })).toBeVisible();
-
-  // Check for Calculator
-  await expect(page.getByText("FIRE Calculator")).toBeVisible();
-});
-

eslint.config.js

@@ -0,0 +1,48 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import tseslint from "typescript-eslint";
+
+const compat = new FlatCompat({
+  baseDirectory: import.meta.dirname,
+});
+
+export default tseslint.config(
+  {
+    ignores: [".next"],
+  },
+  ...compat.extends("next/core-web-vitals"),
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    extends: [
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+    ],
+    rules: {
+      "@typescript-eslint/array-type": "off",
+      "@typescript-eslint/consistent-type-definitions": "off",
+      "@typescript-eslint/consistent-type-imports": [
+        "warn",
+        { prefer: "type-imports", fixStyle: "inline-type-imports" },
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_" },
+      ],
+      "@typescript-eslint/require-await": "off",
+      "@typescript-eslint/no-misused-promises": [
+        "error",
+        { checksVoidReturn: { attributes: false } },
+      ],
+    },
+  },
+  {
+    linterOptions: {
+      reportUnusedDisableDirectives: true,
+    },
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+      },
+    },
+  },
+);

eslint.config.mjs

@@ -1,37 +0,0 @@
-// @ts-check
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
-import tseslint from "typescript-eslint";
-
-const eslintConfig = defineConfig([
-  // Next.js core-web-vitals and TypeScript configs
-  ...nextVitals,
-  ...nextTs,
-  // Add strict TypeScript rules on top
-  ...tseslint.configs.strictTypeChecked,
-  ...tseslint.configs.stylisticTypeChecked,
-  // Configure TypeScript parser options
-  {
-    files: ["**/*.{ts,tsx}"],
-    languageOptions: {
-      parserOptions: {
-        projectService: true,
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-  },
-  // Override default ignores of eslint-config-next
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-    // Additional ignores:
-    "*.mjs",
-    "tailwind.config.ts",
-  ]),
-]);
-
-export default eslintConfig;

next.config.js

@@ -2,7 +2,7 @@
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
  * for Docker builds.
  */
-import './src/env.ts';
+import "./src/env.js";
 
 /** @type {import("next").NextConfig} */
 const config = {};

package.json

@@ -6,14 +6,14 @@
   "scripts": {
     "build": "next build",
     "check": "next lint && tsc --noEmit",
-    "dev": "next dev --turbopack",
+    "dev": "next dev --turbo",
     "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
     "format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
-    "lint": "next typegen && eslint . && npx tsc --noEmit",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "preview": "next build && next start",
     "start": "next start",
-    "test": "vitest",
-    "test:e2e": "playwright test"
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.0.1",
@@ -22,51 +22,37 @@
     "@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.13.0",
+    "@t3-oss/env-nextjs": "^0.12.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.554.0",
-    "next": "16.0.3",
+    "lucide-react": "^0.503.0",
+    "next": "^15.2.3",
     "next-plausible": "^3.12.4",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "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": "^4.0.0"
+    "zod": "^3.24.3"
   },
   "devDependencies": {
-    "@playwright/test": "^1.56.1",
-    "@tailwindcss/postcss": "4.1.17",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "24.10.1",
-    "@types/react": "19.2.6",
-    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "9.39.1",
-    "eslint-config-next": "16.0.3",
-    "eslint-config-prettier": "^10.1.8",
-    "jsdom": "^27.2.0",
-    "postcss": "8.5.6",
-    "prettier": "3.6.2",
-    "prettier-plugin-tailwindcss": "0.7.1",
-    "tailwindcss": "4.1.17",
-    "tw-animate-css": "1.4.0",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.47.0",
-    "vitest": "^4.0.13"
+    "@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"
   },
   "ct3aMetadata": {
     "initVersion": "7.39.3"
   },
-  "packageManager": "pnpm@10.23.0",
-  "pnpm": {
-    "overrides": {
-      "@types/react": "19.2.6",
-      "@types/react-dom": "19.2.3"
-    }
-  }
+  "packageManager": "npm@11.2.0"
 }

playwright.config.ts

@@ -1,34 +0,0 @@
-import { defineConfig, devices } from "@playwright/test";
-
-export default defineConfig({
-  testDir: "./e2e",
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: "list",
-  use: {
-    baseURL: "http://localhost:3000",
-    trace: "on-first-retry",
-  },
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
-  ],
-  webServer: {
-    command: "pnpm run dev",
-    url: "http://localhost:3000",
-    reuseExistingServer: !process.env.CI,
-  },
-});
-

pnpm-workspace.yaml

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

prettier.config.js

@@ -0,0 +1,4 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+export default {
+  plugins: ["prettier-plugin-tailwindcss"],
+};

public/wgu5fuk8d5j5wp3pjtta9vrw8d9by9qk.txt

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

renovate.json

@@ -1,11 +0,0 @@
-{
-  "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

@@ -1,161 +0,0 @@
-"use client";
-import { useState, useEffect } from "react";
-import type React 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 [icons, setIcons] = useState<React.ReactElement[]>([]);
-
-  useEffect(() => {
-    if (rows === 0 || columns === 0) {
-      setIcons([]);
-      return;
-    }
-
-    const iconElements: React.ReactElement[] = [];
-    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));
-        const rotation = Math.round((Math.random() - 0.5) * 30);
-
-        iconElements.push(
-          <IconComponent
-            key={`icon-${String(x)}-${String(y)}`}
-            size={size}
-            className="text-primary fixed"
-            style={{
-              left: `${String(x * spacing + xOffset)}px`,
-              top: `${String(y * spacing + yOffset)}px`,
-              opacity: opacity,
-              transform: `rotate(${String(rotation)}deg)`,
-            }}
-          />,
-        );
-      }
-    }
-    setIcons(iconElements);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rows, columns, spacing, opacity]);
-
-  return (
-    <div className="absolute h-full w-full">
-      {width > 0 && icons}
-    </div>
-  );
-}

src/app/components/FireCalculatorForm.tsx

@@ -31,17 +31,9 @@ import {
   YAxis,
   ReferenceLine,
   type TooltipProps,
-  Line,
 } from "recharts";
 import { Slider } from "@/components/ui/slider";
 import assert from "assert";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import type {
   NameType,
   ValueType,
@@ -72,19 +64,6 @@ const formSchema = z.object({
     .number()
     .min(18, "Retirement age must be at least 18")
     .max(100, "Retirement age must be at most 100"),
-  coastFireAge: z.coerce
-    .number()
-    .min(18, "Coast FIRE age must be at least 18")
-    .max(100, "Coast FIRE age must be at most 100")
-    .optional(),
-  baristaIncome: z.coerce
-    .number()
-    .min(0, "Barista income must be a non-negative number")
-    .optional(),
-  simulationMode: z.enum(["deterministic", "monte-carlo"]).default("deterministic"),
-  volatility: z.coerce.number().min(0).default(15),
-  withdrawalStrategy: z.enum(["fixed", "percentage"]).default("fixed"),
-  withdrawalPercentage: z.coerce.number().min(0).max(100).default(4),
 });
 
 // Type for form values
@@ -94,31 +73,14 @@ interface YearlyData {
   age: number;
   year: number;
   balance: number;
-  untouchedBalance: number;
   phase: "accumulation" | "retirement";
   monthlyAllowance: number;
-  untouchedMonthlyAllowance: number;
-  // Monte Carlo percentiles
-  balanceP10?: number;
-  balanceP50?: number;
-  balanceP90?: number;
 }
 
 interface CalculationResult {
   fireNumber: number | null;
-  fireNumber4percent: number | null;
-  retirementAge4percent: number | null;
   yearlyData: YearlyData[];
   error?: string;
-  successRate?: number; // For Monte Carlo
-}
-
-// Box-Muller transform for normal distribution
-function randomNormal(mean: number, stdDev: number): number {
-  const u = 1 - Math.random(); // Converting [0,1) to (0,1]
-  const v = Math.random();
-  const z = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
-  return z * stdDev + mean;
 }
 
 // Helper function to format currency without specific symbols
@@ -139,16 +101,8 @@ const tooltipRenderer = ({
     return (
       <div className="bg-background border p-2 shadow-sm">
         <p className="font-medium">{`Year: ${data.year.toString()} (Age: ${data.age.toString()})`}</p>
-        {data.balanceP50 !== undefined ? (
-          <>
-            <p className="text-orange-500">{`Median Balance: ${formatNumber(data.balanceP50)}`}</p>
-            <p className="text-orange-300 text-xs">{`10th %: ${formatNumber(data.balanceP10 ?? 0)}`}</p>
-            <p className="text-orange-300 text-xs">{`90th %: ${formatNumber(data.balanceP90 ?? 0)}`}</p>
-          </>
-        ) : (
-          <p className="text-orange-500">{`Balance: ${formatNumber(data.balance)}`}</p>
-        )}
-        <p className="text-red-600">{`Monthly allowance: ${formatNumber(data.monthlyAllowance)}`}</p>
+        <p className="text-chart-1">{`Balance: ${formatNumber(data.balance)}`}</p>
+        <p className="text-chart-2">{`Monthly allowance: ${formatNumber(data.monthlyAllowance)}`}</p>
         <p>{`Phase: ${data.phase === "accumulation" ? "Accumulation" : "Retirement"}`}</p>
       </div>
     );
@@ -159,10 +113,9 @@ const tooltipRenderer = ({
 export default function FireCalculatorForm() {
   const [result, setResult] = useState<CalculationResult | null>(null);
   const irlYear = new Date().getFullYear();
-  const [showing4percent, setShowing4percent] = useState(false);
 
   // Initialize form with default values
-  const form = useForm<z.input<typeof formSchema>, undefined, FormValues>({
+  const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       startingCapital: 50000,
@@ -170,13 +123,9 @@ export default function FireCalculatorForm() {
       currentAge: 25,
       cagr: 7,
       desiredMonthlyAllowance: 3000,
-      inflationRate: 2.3,
+      inflationRate: 2,
       lifeExpectancy: 84,
       retirementAge: 55,
-      coastFireAge: undefined,
-      baristaIncome: 0,
-      simulationMode: "deterministic",
-      volatility: 15,
     },
   });
 
@@ -186,182 +135,66 @@ export default function FireCalculatorForm() {
     const startingCapital = values.startingCapital;
     const monthlySavings = values.monthlySavings;
     const age = values.currentAge;
-    const cagr = values.cagr;
+    const annualGrowthRate = 1 + values.cagr / 100;
     const initialMonthlyAllowance = values.desiredMonthlyAllowance;
     const annualInflation = 1 + values.inflationRate / 100;
     const ageOfDeath = values.lifeExpectancy;
     const retirementAge = values.retirementAge;
-    const coastFireAge = values.coastFireAge ?? retirementAge;
-    const initialBaristaIncome = values.baristaIncome ?? 0;
-    const simulationMode = values.simulationMode;
-    const volatility = values.volatility;
 
-    const numSimulations = simulationMode === "monte-carlo" ? 500 : 1;
-    const simulationResults: number[][] = []; // [yearIndex][simulationIndex] -> balance
-
-    // Prepare simulation runs
-    for (let sim = 0; sim < numSimulations; sim++) {
-      let currentBalance = startingCapital;
-      const runBalances: number[] = [];
-
-      for (
-        let year = irlYear + 1;
-        year <= irlYear + (ageOfDeath - age);
-        year++
-      ) {
-        const currentAge = age + (year - irlYear);
-        const yearIndex = year - (irlYear + 1);
-
-        // Determine growth rate for this year
-        let annualGrowthRate: number;
-        if (simulationMode === "monte-carlo") {
-          // Random walk
-          const randomReturn = randomNormal(cagr, volatility) / 100;
-          annualGrowthRate = 1 + randomReturn;
-        } else {
-          // Deterministic
-          annualGrowthRate = 1 + cagr / 100;
-        }
-
-        const inflatedAllowance =
-          initialMonthlyAllowance * Math.pow(annualInflation, year - irlYear);
-        const inflatedBaristaIncome =
-          initialBaristaIncome * Math.pow(annualInflation, year - irlYear);
-
-        const isRetirementYear = currentAge >= retirementAge;
-        const phase = isRetirementYear ? "retirement" : "accumulation";
-        const isContributing = currentAge < coastFireAge;
-
-        let newBalance;
-        if (phase === "accumulation") {
-          newBalance =
-            currentBalance * annualGrowthRate +
-            (isContributing ? monthlySavings * 12 : 0);
-        } else {
-          const netAnnualWithdrawal =
-            (inflatedAllowance - inflatedBaristaIncome) * 12;
-          newBalance = currentBalance * annualGrowthRate - netAnnualWithdrawal;
-        }
-        // Prevent negative balance from recovering (once you're broke, you're broke)
-        // Although debt is possible, for FIRE calc usually 0 is the floor.
-        // But strictly speaking, if you have income, you might recover?
-        // Let's allow negative for calculation but maybe clamp for success rate?
-        // Standard practice: if balance < 0, it stays < 0 or goes deeper.
-        // Let's just let the math run.
-
-        runBalances.push(newBalance);
-        currentBalance = newBalance;
-      }
-      simulationResults.push(runBalances);
-    }
-
-    // Aggregate results
+    // Array to store yearly data for the chart
     const yearlyData: YearlyData[] = [];
-    let successCount = 0;
 
-    // Initial year
+    // Initial year data
     yearlyData.push({
       age: age,
       year: irlYear,
       balance: startingCapital,
-      untouchedBalance: startingCapital,
       phase: "accumulation",
-        monthlyAllowance: 0,
-      untouchedMonthlyAllowance: initialMonthlyAllowance,
-      balanceP10: startingCapital,
-      balanceP50: startingCapital,
-      balanceP90: startingCapital,
+      monthlyAllowance: initialMonthlyAllowance,
     });
 
-    const numYears = ageOfDeath - age;
-    for (let i = 0; i < numYears; i++) {
-      const year = irlYear + 1 + i;
-      const currentAge = age + 1 + i;
-      
-      // Collect all balances for this year across simulations
-      const balancesForYear = simulationResults.map((run) => run[i]);
-      
-      // Sort to find percentiles
-      balancesForYear.sort((a, b) => a - b);
-      
-      const p10 = balancesForYear[Math.floor(numSimulations * 0.1)];
-      const p50 = balancesForYear[Math.floor(numSimulations * 0.5)];
-      const p90 = balancesForYear[Math.floor(numSimulations * 0.9)];
-
-      // Calculate other metrics (using deterministic logic for "untouched" etc for simplicity, or p50)
-      // We need to reconstruct the "standard" fields for compatibility with the chart
-      // Let's use p50 (Median) as the "main" line
+    // Calculate accumulation phase (before retirement)
+    for (let year = irlYear + 1; year <= irlYear + (ageOfDeath - age); year++) {
+      const currentAge = age + (year - irlYear);
+      const previousYearData = yearlyData[yearlyData.length - 1];
       const inflatedAllowance =
         initialMonthlyAllowance * Math.pow(annualInflation, year - irlYear);
+
       const isRetirementYear = currentAge >= retirementAge;
       const phase = isRetirementYear ? "retirement" : "accumulation";
 
-      // Reconstruct untouched balance for deterministic mode (for 4% rule)
-      let untouchedBalance = 0;
-      if (simulationMode === "deterministic") {
-          // We can just use the single run we have
-          // In deterministic mode, there's only 1 simulation, so balancesForYear[0] is it.
-          // But wait, `simulationResults` stores the *actual* balance (with withdrawals).
-          // We need a separate tracker for "untouched" (never withdrawing) if we want accurate 4% rule.
-          // Let's just re-calculate it simply here since it's deterministic.
-          const prevUntouched = yearlyData[yearlyData.length - 1].untouchedBalance;
-          const growth = 1 + cagr / 100;
-           untouchedBalance = prevUntouched * growth + monthlySavings * 12;
+      assert(!!previousYearData);
+      // Calculate balance based on phase
+      let newBalance;
+      if (phase === "accumulation") {
+        // During accumulation: grow previous balance + add savings
+        newBalance =
+          previousYearData.balance * annualGrowthRate + monthlySavings * 12;
+      } else {
+        // During retirement: grow previous balance - withdraw allowance
+        newBalance =
+          previousYearData.balance * annualGrowthRate - inflatedAllowance * 12;
       }
 
       yearlyData.push({
         age: currentAge,
         year: year,
-        balance: p50, // Use Median for the main line
-        untouchedBalance: untouchedBalance, 
+        balance: newBalance,
         phase: phase,
-        monthlyAllowance: phase === "retirement" ? inflatedAllowance : 0,
-        untouchedMonthlyAllowance: inflatedAllowance,
-        balanceP10: p10,
-        balanceP50: p50,
-        balanceP90: p90,
+        monthlyAllowance: inflatedAllowance,
       });
     }
 
-    // Calculate Success Rate (only for Monte Carlo)
-    if (simulationMode === "monte-carlo") {
-      const finalBalances = simulationResults.map(run => run[run.length - 1]);
-      successCount = finalBalances.filter(b => b > 0).length;
-    }
-
-    // Calculate FIRE number (using Median/Deterministic run)
+    // Calculate FIRE number at retirement
     const retirementYear = irlYear + (retirementAge - age);
     const retirementIndex = yearlyData.findIndex(
       (data) => data.year === retirementYear,
     );
     const retirementData = yearlyData[retirementIndex];
 
-    const [fireNumber4percent, retirementAge4percent] = (() => {
-        // Re-enable 4% rule for deterministic mode or use p50 for MC
-        // For MC, "untouchedBalance" isn't tracked per run in aggregate, but we can use balanceP50 roughly
-        // or just disable it as it's a different philosophy.
-        // For now, let's calculate it based on the main "balance" field (which is p50 in MC)
-        for (const yearData of yearlyData) {
-          // Estimate untouched roughly if not tracking exact
-          const balanceToCheck = yearData.balance; 
-          // Note: This is imperfect for MC because 'balance' includes withdrawals in retirement
-          // whereas 4% rule check usually looks at "if I retired now with this balance".
-          // The original code had `untouchedBalance` which grew without withdrawals.
-          // Since we removed `untouchedBalance` calculation in the aggregate loop, let's skip 4% for MC for now.
-          
-          if (simulationMode === "deterministic" && yearData.untouchedBalance && 
-              yearData.untouchedBalance > (yearData.untouchedMonthlyAllowance * 12) / 0.04) {
-             return [yearData.untouchedBalance, yearData.age];
-          }
-        }
-        return [null, null];
-    })();
-
-    if (retirementIndex === -1) {
+    if (retirementIndex === -1 || !retirementData) {
       setResult({
         fireNumber: null,
-        fireNumber4percent: null,
-        retirementAge4percent: null,
         error: "Could not calculate retirement data",
         yearlyData: yearlyData,
       });
@@ -369,10 +202,7 @@ export default function FireCalculatorForm() {
       // Set the result
       setResult({
         fireNumber: retirementData.balance,
-        fireNumber4percent: null,
-        retirementAge4percent: null,
         yearlyData: yearlyData,
-        successRate: simulationMode === "monte-carlo" ? (successCount / numSimulations) * 100 : undefined,
       });
     }
   }
@@ -388,13 +218,7 @@ export default function FireCalculatorForm() {
         </CardHeader>
         <CardContent>
           <Form {...form}>
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                void form.handleSubmit(onSubmit)(e);
-              }}
-              className="space-y-8"
-            >
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
               <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                 <FormField
                   control={form.control}
@@ -406,19 +230,11 @@ export default function FireCalculatorForm() {
                         <Input
                           placeholder="e.g., 10000"
                           type="number"
-                          value={field.value as number | string | undefined}
-                          onChange={(e) => {
-                            field.onChange(
-                              e.target.value === ""
-                                ? undefined
-                                : Number(e.target.value),
-                            );
-                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                            form.handleSubmit(onSubmit)();
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
+                            void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -435,19 +251,11 @@ export default function FireCalculatorForm() {
                         <Input
                           placeholder="e.g., 500"
                           type="number"
-                          value={field.value as number | string | undefined}
-                          onChange={(e) => {
-                            field.onChange(
-                              e.target.value === ""
-                                ? undefined
-                                : Number(e.target.value),
-                            );
-                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                            form.handleSubmit(onSubmit)();
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
+                            void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -464,19 +272,11 @@ export default function FireCalculatorForm() {
                         <Input
                           placeholder="e.g., 30"
                           type="number"
-                          value={field.value as number | string | undefined}
-                          onChange={(e) => {
-                            field.onChange(
-                              e.target.value === ""
-                                ? undefined
-                                : Number(e.target.value),
-                            );
-                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                            form.handleSubmit(onSubmit)();
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
+                            void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -493,19 +293,11 @@ export default function FireCalculatorForm() {
                         <Input
                           placeholder="e.g., 90"
                           type="number"
-                          value={field.value as number | string | undefined}
-                          onChange={(e) => {
-                            field.onChange(
-                              e.target.value === ""
-                                ? undefined
-                                : Number(e.target.value),
-                            );
-                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                            form.handleSubmit(onSubmit)();
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
+                            void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -523,19 +315,11 @@ export default function FireCalculatorForm() {
                           placeholder="e.g., 7"
                           type="number"
                           step="0.1"
-                          value={field.value as number | string | undefined}
-                          onChange={(e) => {
-                            field.onChange(
-                              e.target.value === ""
-                                ? undefined
-                                : Number(e.target.value),
-                            );
-                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                            form.handleSubmit(onSubmit)();
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
+                            void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -553,19 +337,11 @@ export default function FireCalculatorForm() {
                           placeholder="e.g., 2"
                           type="number"
                           step="0.1"
-                          value={field.value as number | string | undefined}
-                          onChange={(e) => {
-                            field.onChange(
-                              e.target.value === ""
-                                ? undefined
-                                : Number(e.target.value),
-                            );
-                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                            form.handleSubmit(onSubmit)();
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
+                            void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -584,19 +360,11 @@ export default function FireCalculatorForm() {
                         <Input
                           placeholder="e.g., 2000"
                           type="number"
-                          value={field.value as number | string | undefined}
-                          onChange={(e) => {
-                            field.onChange(
-                              e.target.value === ""
-                                ? undefined
-                                : Number(e.target.value),
-                            );
-                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                            form.handleSubmit(onSubmit)();
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
+                            void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -610,20 +378,17 @@ export default function FireCalculatorForm() {
                   name="retirementAge"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>
-                        Retirement Age: {field.value as number}
-                      </FormLabel>
+                      <FormLabel>Retirement Age: {field.value}</FormLabel>
                       <FormControl>
                         <Slider
                           name="retirementAge"
-                          value={[field.value as number]}
+                          value={[field.value]}
                           min={25}
                           max={75}
                           step={1}
-                          onValueChange={(value: number[]) => {
-                            field.onChange(value[0]);
-                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                            form.handleSubmit(onSubmit)();
+                          onValueChange={(value) => {
+                            field.onChange(...value);
+                            void form.handleSubmit(onSubmit)();
                           }}
                           className="py-4"
                         />
@@ -632,187 +397,6 @@ export default function FireCalculatorForm() {
                     </FormItem>
                   )}
                 />
-                <FormField
-                  control={form.control}
-                  name="coastFireAge"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>
-                        Coast FIRE Age (Optional) - Stop contributing at age:
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder="e.g., 45 (defaults to Retirement Age)"
-                          type="number"
-                          value={field.value as number | string | undefined}
-                          onChange={(e) => {
-                            field.onChange(
-                              e.target.value === ""
-                                ? undefined
-                                : Number(e.target.value),
-                            );
-                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                            form.handleSubmit(onSubmit)();
-                          }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="baristaIncome"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>
-                        Barista FIRE Income (Monthly during Retirement)
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder="e.g., 1000"
-                          type="number"
-                          value={field.value as number | string | undefined}
-                          onChange={(e) => {
-                            field.onChange(
-                              e.target.value === ""
-                                ? undefined
-                                : Number(e.target.value),
-                            );
-                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                            form.handleSubmit(onSubmit)();
-                          }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="simulationMode"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Simulation Mode</FormLabel>
-                      <Select
-                        onValueChange={(val) => {
-                          field.onChange(val);
-                          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                          form.handleSubmit(onSubmit)();
-                        }}
-                        defaultValue={field.value}
-                      >
-                        <FormControl>
-                          <SelectTrigger>
-                            <SelectValue placeholder="Select simulation mode" />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          <SelectItem value="deterministic">Deterministic (Linear)</SelectItem>
-                          <SelectItem value="monte-carlo">Monte Carlo (Probabilistic)</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                {form.watch("simulationMode") === "monte-carlo" && (
-                  <FormField
-                    control={form.control}
-                    name="volatility"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Market Volatility (Std Dev %)</FormLabel>
-                        <FormControl>
-                          <Input
-                            placeholder="e.g., 15"
-                            type="number"
-                            value={field.value as number | string | undefined}
-                            onChange={(e) => {
-                              field.onChange(
-                                e.target.value === ""
-                                  ? undefined
-                                  : Number(e.target.value),
-                              );
-                              // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                              form.handleSubmit(onSubmit)();
-                            }}
-                            onBlur={field.onBlur}
-                            name={field.name}
-                            ref={field.ref}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                )}
-                <FormField
-                  control={form.control}
-                  name="withdrawalStrategy"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Withdrawal Strategy</FormLabel>
-                      <Select
-                        onValueChange={(val) => {
-                          field.onChange(val);
-                          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                          form.handleSubmit(onSubmit)();
-                        }}
-                        defaultValue={field.value}
-                      >
-                        <FormControl>
-                          <SelectTrigger>
-                            <SelectValue placeholder="Select withdrawal strategy" />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          <SelectItem value="fixed">Fixed Inflation-Adjusted</SelectItem>
-                          <SelectItem value="percentage">Percentage of Portfolio</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                {form.watch("withdrawalStrategy") === "percentage" && (
-                  <FormField
-                    control={form.control}
-                    name="withdrawalPercentage"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Withdrawal Percentage (%)</FormLabel>
-                        <FormControl>
-                          <Input
-                            placeholder="e.g., 4.0"
-                            type="number"
-                            step="0.1"
-                            value={field.value as number | string | undefined}
-                            onChange={(e) => {
-                              field.onChange(
-                                e.target.value === ""
-                                  ? undefined
-                                  : Number(e.target.value),
-                              );
-                              // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                              form.handleSubmit(onSubmit)();
-                            }}
-                            onBlur={field.onBlur}
-                            name={field.name}
-                            ref={field.ref}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                )}
               </div>
 
               {!result && (
@@ -846,10 +430,10 @@ export default function FireCalculatorForm() {
                             offset: -10,
                           }}
                         />
-                        {/* Right Y axis */}
+                        {/* Left Y axis */}
                         <YAxis
-                          yAxisId={"right"}
-                          orientation="right"
+                          yAxisId={"left"}
+                          orientation="left"
                           tickFormatter={(value: number) => {
                             if (value >= 1000000) {
                               return `${(value / 1000000).toPrecision(3)}M`;
@@ -863,13 +447,11 @@ export default function FireCalculatorForm() {
                             return value.toString();
                           }}
                           width={30}
-                          stroke="var(--color-orange-500)"
-                          tick={{}}
                         />
-                        {/* Left Y axis */}
+                        {/* Right Y axis */}
                         <YAxis
-                          yAxisId="left"
-                          orientation="left"
+                          yAxisId="right"
+                          orientation="right"
                           tickFormatter={(value: number) => {
                             if (value >= 1000000) {
                               return `${(value / 1000000).toPrecision(3)}M`;
@@ -879,7 +461,6 @@ export default function FireCalculatorForm() {
                             return value.toString();
                           }}
                           width={30}
-                          stroke="var(--color-red-600)"
                         />
                         <ChartTooltip content={tooltipRenderer} />
                         <defs>
@@ -892,12 +473,12 @@ export default function FireCalculatorForm() {
                           >
                             <stop
                               offset="5%"
-                              stopColor="var(--color-orange-500)"
+                              stopColor="var(--chart-1)"
                               stopOpacity={0.8}
                             />
                             <stop
                               offset="95%"
-                              stopColor="var(--color-orange-500)"
+                              stopColor="var(--chart-1)"
                               stopOpacity={0.1}
                             />
                           </linearGradient>
@@ -906,77 +487,43 @@ export default function FireCalculatorForm() {
                           type="monotone"
                           dataKey="balance"
                           name="balance"
-                          stroke="var(--color-orange-500)"
+                          stroke="var(--chart-1)"
                           fill="url(#fillBalance)"
                           fillOpacity={0.9}
                           activeDot={{ r: 6 }}
-                          yAxisId={"right"}
+                          yAxisId={"left"}
                           stackId={"a"}
                         />
-                        {form.getValues("simulationMode") === "monte-carlo" && (
-                          <>
-                            <Area
-                              type="monotone"
-                              dataKey="balanceP10"
-                              stroke="none"
-                              fill="var(--color-orange-500)"
-                              fillOpacity={0.1}
-                              yAxisId={"right"}
-                              connectNulls
-                            />
-                            <Area
-                              type="monotone"
-                              dataKey="balanceP90"
-                              stroke="none"
-                              fill="var(--color-orange-500)"
-                              fillOpacity={0.1}
-                              yAxisId={"right"}
-                              connectNulls
-                            />
-                          </>
-                        )}
                         <Area
-                          type="step"
+                          type="monotone"
                           dataKey="monthlyAllowance"
                           name="allowance"
-                          stroke="var(--color-red-600)"
+                          stroke="var(--chart-2)"
                           fill="none"
                           activeDot={{ r: 6 }}
-                          yAxisId="left"
+                          yAxisId="right"
+                          stackId={"a"}
                         />
                         {result.fireNumber && (
                           <ReferenceLine
                             y={result.fireNumber}
-                            stroke="var(--primary)"
-                            strokeWidth={2}
-                            strokeDasharray="2 1"
+                            stroke="var(--chart-3)"
+                            strokeWidth={1}
+                            strokeDasharray="2 2"
                             label={{
                               value: "FIRE Number",
                               position: "insideBottomRight",
                             }}
-                            yAxisId={"right"}
-                          />
-                        )}
-                        {result.fireNumber4percent && showing4percent && (
-                          <ReferenceLine
-                            y={result.fireNumber4percent}
-                            stroke="var(--secondary)"
-                            strokeWidth={1}
-                            strokeDasharray="1 1"
-                            label={{
-                              value: "4%-Rule FIRE Number",
-                              position: "insideBottomLeft",
-                            }}
-                            yAxisId={"right"}
+                            yAxisId={"left"}
                           />
                         )}
                         <ReferenceLine
                           x={
                             irlYear +
-                            (Number(form.getValues("retirementAge")) -
-                              Number(form.getValues("currentAge")))
+                            (form.getValues("retirementAge") -
+                              form.getValues("currentAge"))
                           }
-                          stroke="var(--primary)"
+                          stroke="var(--chart-2)"
                           strokeWidth={2}
                           label={{
                             value: "Retirement",
@@ -984,36 +531,11 @@ export default function FireCalculatorForm() {
                           }}
                           yAxisId={"left"}
                         />
-                        {result.retirementAge4percent && showing4percent && (
-                          <ReferenceLine
-                            x={
-                              irlYear +
-                              (result.retirementAge4percent -
-                                Number(form.getValues("currentAge")))
-                            }
-                            stroke="var(--secondary)"
-                            strokeWidth={1}
-                            label={{
-                              value: "4%-Rule Retirement",
-                              position: "insideBottomLeft",
-                            }}
-                            yAxisId={"left"}
-                          />
-                        )}
                       </AreaChart>
                     </ChartContainer>
                   </CardContent>
                 </Card>
               )}
-              {result && (
-                <Button
-                  onClick={() => { setShowing4percent(!showing4percent); }}
-                  variant={showing4percent ? "secondary" : "default"}
-                  size={"sm"}
-                >
-                  {showing4percent ? "Hide" : "Show"} 4%-Rule
-                </Button>
-              )}
             </form>
           </Form>
         </CardContent>
@@ -1052,45 +574,11 @@ export default function FireCalculatorForm() {
                 </CardHeader>
                 <CardContent>
                   <p className="text-3xl font-bold">
-                    {Number(form.getValues("lifeExpectancy")) -
-                      Number(form.getValues("retirementAge"))}
+                    {form.getValues("lifeExpectancy") -
+                      form.getValues("retirementAge")}
                   </p>
                 </CardContent>
               </Card>
-              {showing4percent && (
-                <>
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>4%-Rule FIRE Number</CardTitle>
-                      <CardDescription className="text-xs">
-                        Capital needed for 4% of it to be greater than your
-                        yearly allowance
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <p className="text-3xl font-bold">
-                        {formatNumber(result.fireNumber4percent)}
-                      </p>
-                    </CardContent>
-                  </Card>
-
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>4%-Rule Retirement Duration</CardTitle>
-                      <CardDescription className="text-xs">
-                        Years to enjoy your financial independence if you follow
-                        the 4% rule
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <p className="text-3xl font-bold">
-                        {Number(form.getValues("lifeExpectancy")) -
-                          (result.retirementAge4percent ?? 0)}
-                      </p>
-                    </CardContent>
-                  </Card>
-                </>
-              )}
             </>
           )}
         </div>

src/app/components/__tests__/FireCalculatorForm.test.tsx

@@ -1,27 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import FireCalculatorForm from "../FireCalculatorForm";
-import { describe, it, expect, vi } from "vitest";
-
-// Mocking ResizeObserver because it's not available in jsdom and Recharts uses it
-class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-global.ResizeObserver = ResizeObserver;
-
-describe("FireCalculatorForm", () => {
-  it("renders the form with default values", () => {
-    render(<FireCalculatorForm />);
-    
-    expect(screen.getByText("FIRE Calculator")).toBeInTheDocument();
-    expect(screen.getByLabelText(/Starting Capital/i)).toHaveValue(50000);
-    expect(screen.getByLabelText(/Monthly Savings/i)).toHaveValue(1500);
-  });
-
-  it("renders the Calculate button", () => {
-    render(<FireCalculatorForm />);
-    expect(screen.getByRole("button", { name: /Calculate/i })).toBeInTheDocument();
-  });
-});
-

src/app/layout.tsx

@@ -1,17 +1,15 @@
 import "@/styles/globals.css";
 import PlausibleProvider from "next-plausible";
-import { type Metadata, type Viewport } from "next";
+import { type Metadata } 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 | Finance and Retirement Calculator",
+  title:
+    "InvestingFIRE Calculator | Plan Your Financial Independence & Early Retirement",
   description:
-    "Achieve Financial Independence & Early Retirement! Plan your FIRE journey with the InvestingFIRE calculator and get personalized projections in buttersmooth graphs.",
+    "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" }],
 };
 
 const geist = Geist({
@@ -26,16 +24,17 @@ 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>
-      <WebVitals />
-      <body>{children}</body>
+      <PlausibleProvider
+        domain="investingfire.com"
+        customDomain="https://analytics.schulze.network"
+        selfHosted={true}
+        enabled={true}
+        trackOutboundLinks={true}
+      >
+        <WebVitals />
+        <body>{children}</body>
+      </PlausibleProvider>
     </html>
   );
 }

src/app/page.tsx

@@ -7,78 +7,19 @@ import {
   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-linear-to-b p-2">
-      <BackgroundPattern />
-      <div className="z-10 mx-auto flex flex-col items-center justify-center gap-4 text-center">
+    <main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-2">
+      <div className="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}
             height={100}
           />
-          <h1 className="from-primary via-primary-foreground to-primary bg-linear-to-r bg-clip-text text-5xl font-extrabold tracking-tight text-transparent drop-shadow-md sm:text-[5rem]">
+          <h1 className="from-primary via-primary-foreground to-primary bg-gradient-to-r bg-clip-text text-5xl font-extrabold tracking-tight text-transparent drop-shadow-md sm:text-[5rem]">
             InvestingFIRE
           </h1>
         </div>
@@ -91,7 +32,7 @@ export default function HomePage() {
       </div>
 
       {/* Added SEO Content Sections */}
-      <div className="z-10 mx-auto max-w-2xl py-12 text-left">
+      <div className="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
@@ -184,14 +125,9 @@ export default function HomePage() {
         </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">
@@ -311,7 +247,7 @@ export default function HomePage() {
             financial independence and smart investing.
           </p>
 
-          <div className="bg-foreground my-8 rounded-md p-4 text-lg">
+          <div className="bg-secondary/20 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>

src/app/robots.ts

@@ -1,11 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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/chart.tsx

@@ -20,9 +20,9 @@ export type ChartConfig = Record<
   )
 >;
 
-interface ChartContextProps {
+type ChartContextProps = {
   config: ChartConfig;
-}
+};
 
 const ChartContext = React.createContext<ChartContextProps | null>(null);
 
@@ -135,12 +135,12 @@ function ChartTooltipContent({
       return null;
     }
 
-    const item = payload[0];
-    const key = labelKey ?? String(item.dataKey ?? item.name ?? "value");
+    const [item] = payload;
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value =
       !labelKey && typeof label === "string"
-        ? (label in config && config[label].label ? config[label].label : undefined) ?? label
+        ? (config[label]?.label ?? label)
         : itemConfig?.label;
 
     if (labelFormatter) {
@@ -175,14 +175,14 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
         className,
       )}
     >
       {!nestLabel ? tooltipLabel : null}
       <div className="grid gap-1.5">
         {payload.map((item, index) => {
-          const key = nameKey ?? String(item.name ?? item.dataKey ?? "value");
+          const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
           const indicatorColor: string | undefined =
             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
@@ -196,7 +196,7 @@ function ChartTooltipContent({
                 indicator === "dot" && "items-center",
               )}
             >
-              {formatter && item.value !== undefined && item.name ? (
+              {formatter && item?.value !== undefined && item.name ? (
                 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                 formatter(item.value, item.name, item, index, item.payload)
               ) : (
@@ -207,7 +207,7 @@ function ChartTooltipContent({
                     !hideIndicator && (
                       <div
                         className={cn(
-                          "shrink-0 rounded-[2px] border-border bg-(--color-bg)",
+                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                           {
                             "h-2.5 w-2.5": indicator === "dot",
                             "w-1": indicator === "line",

src/components/ui/form.tsx

@@ -18,12 +18,12 @@ import { Label } from "@/components/ui/label";
 
 const Form = FormProvider;
 
-interface FormFieldContextValue<
+type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> {
+> = {
   name: TName;
-}
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
   {} as FormFieldContextValue,
@@ -61,9 +61,9 @@ const useFormField = () => {
   };
 };
 
-interface FormItemContextValue {
+type FormItemContextValue = {
   id: string;
-}
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue,
@@ -110,7 +110,7 @@ function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
       id={formItemId}
       aria-describedby={
         !error
-          ? formDescriptionId
+          ? `${formDescriptionId}`
           : `${formDescriptionId} ${formMessageId}`
       }
       aria-invalid={!!error}
@@ -134,7 +134,7 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
 
 function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
   const { error, formMessageId } = useFormField();
-  const body = error ? (error.message ?? "") : props.children;
+  const body = error ? String(error?.message ?? "") : props.children;
 
   if (!body) {
     return null;

src/components/ui/select.tsx

@@ -37,7 +37,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -61,7 +61,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className,
@@ -74,7 +74,7 @@ function SelectContent({
           className={cn(
             "p-1",
             position === "popper" &&
-              "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
           )}
         >
           {children}
@@ -107,7 +107,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
       )}
       {...props}

src/components/ui/slider.tsx

@@ -31,7 +31,7 @@ function Slider({
       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",
+        "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}

src/lib/constants.ts

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

tsconfig.json

@@ -1,35 +1,42 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
+    /* Base Options: */
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
     "resolveJsonModule": true,
+    "moduleDetection": "force",
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "checkJs": true,
+
+    /* Bundled projects */
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "noEmit": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "preserve",
+    "plugins": [{ "name": "next" }],
     "incremental": true,
+
+    /* Path Aliases */
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    },
-    "target": "ES2022",
-    "forceConsistentCasingInFileNames": true,
-    "verbatimModuleSyntax": true,
-    "noUncheckedIndexedAccess": false,
-    "exactOptionalPropertyTypes": false,
-    "noImplicitReturns": false,
-    "plugins": [{ "name": "next" }]
+    }
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
+    "**/*.cjs",
+    "**/*.js",
+    ".next/types/**/*.ts"
   ],
   "exclude": ["node_modules"]
 }

vitest.config.ts

@@ -1,17 +0,0 @@
-import { defineConfig } from "vitest/config";
-import react from "@vitejs/plugin-react";
-import path from "path";
-
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    environment: "jsdom",
-    globals: true,
-    setupFiles: ["./vitest.setup.ts"],
-    exclude: ["node_modules", "e2e/**"],
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-});
-

vitest.setup.ts

@@ -1,2 +0,0 @@
-import "@testing-library/jest-dom";
-