update SEO texts

.gitea/workflows/check.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@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,108 +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, 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.**
+FIRE calculator

package.json

@@ -6,12 +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 lint",
     "lint:fix": "next lint --fix",
     "preview": "next build && next start",
-    "start": "next start"
+    "start": "next start",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.0.1",
@@ -20,38 +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.542.0",
-    "next": "^15.4.1",
+    "lucide-react": "^0.503.0",
+    "next": "^15.2.3",
     "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": "^4.0.0"
+    "zod": "^3.24.3"
   },
   "devDependencies": {
-    "@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"
+    "@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.15.0"
+  "packageManager": "npm@11.2.0"
 }

pnpm-workspace.yaml

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

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,157 +0,0 @@
-"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/FireCalculatorForm.tsx

@@ -73,16 +73,12 @@ interface YearlyData {
   age: number;
   year: number;
   balance: number;
-  untouchedBalance: number;
   phase: "accumulation" | "retirement";
   monthlyAllowance: number;
-  untouchedMonthlyAllowance: number;
 }
 
 interface CalculationResult {
   fireNumber: number | null;
-  fireNumber4percent: number | null;
-  retirementAge4percent: number | null;
   yearlyData: YearlyData[];
   error?: string;
 }
@@ -105,8 +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>
-        <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>
     );
@@ -117,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,
@@ -128,7 +123,7 @@ export default function FireCalculatorForm() {
       currentAge: 25,
       cagr: 7,
       desiredMonthlyAllowance: 3000,
-      inflationRate: 2.3,
+      inflationRate: 2,
       lifeExpectancy: 84,
       retirementAge: 55,
     },
@@ -154,10 +149,8 @@ export default function FireCalculatorForm() {
       age: age,
       year: irlYear,
       balance: startingCapital,
-      untouchedBalance: startingCapital,
       phase: "accumulation",
-      monthlyAllowance: 0,
-      untouchedMonthlyAllowance: initialMonthlyAllowance,
+      monthlyAllowance: initialMonthlyAllowance,
     });
 
     // Calculate accumulation phase (before retirement)
@@ -182,18 +175,13 @@ export default function FireCalculatorForm() {
         newBalance =
           previousYearData.balance * annualGrowthRate - inflatedAllowance * 12;
       }
-      const untouchedBalance =
-        previousYearData.untouchedBalance * annualGrowthRate +
-        monthlySavings * 12;
-      const allowance = phase === "retirement" ? inflatedAllowance : 0;
+
       yearlyData.push({
         age: currentAge,
         year: year,
         balance: newBalance,
-        untouchedBalance: untouchedBalance,
         phase: phase,
-        monthlyAllowance: allowance,
-        untouchedMonthlyAllowance: inflatedAllowance,
+        monthlyAllowance: inflatedAllowance,
       });
     }
 
@@ -204,23 +192,9 @@ export default function FireCalculatorForm() {
     );
     const retirementData = yearlyData[retirementIndex];
 
-    const [fireNumber4percent, retirementAge4percent] = (() => {
-      for (const yearData of yearlyData) {
-        if (
-          yearData.untouchedBalance >
-          (yearData.untouchedMonthlyAllowance * 12) / 0.04
-        ) {
-          return [yearData.untouchedBalance, yearData.age];
-        }
-      }
-      return [0, 0];
-    })();
-
     if (retirementIndex === -1 || !retirementData) {
       setResult({
         fireNumber: null,
-        fireNumber4percent: null,
-        retirementAge4percent: null,
         error: "Could not calculate retirement data",
         yearlyData: yearlyData,
       });
@@ -228,8 +202,6 @@ export default function FireCalculatorForm() {
       // Set the result
       setResult({
         fireNumber: retirementData.balance,
-        fireNumber4percent: fireNumber4percent,
-        retirementAge4percent: retirementAge4percent,
         yearlyData: yearlyData,
       });
     }
@@ -258,18 +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),
-                            );
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
                             void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -286,18 +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),
-                            );
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
                             void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -314,18 +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),
-                            );
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
                             void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -342,18 +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),
-                            );
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
                             void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -371,18 +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),
-                            );
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
                             void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -400,18 +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),
-                            );
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
                             void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -430,18 +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),
-                            );
+                          {...field}
+                          onChange={(value) => {
+                            field.onChange(value);
                             void form.handleSubmit(onSubmit)();
                           }}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -455,18 +378,16 @@ 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]);
+                          onValueChange={(value) => {
+                            field.onChange(...value);
                             void form.handleSubmit(onSubmit)();
                           }}
                           className="py-4"
@@ -509,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`;
@@ -526,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`;
@@ -542,7 +461,6 @@ export default function FireCalculatorForm() {
                             return value.toString();
                           }}
                           width={30}
-                          stroke="var(--color-red-600)"
                         />
                         <ChartTooltip content={tooltipRenderer} />
                         <defs>
@@ -555,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>
@@ -569,55 +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"}
                         />
                         <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",
@@ -625,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>
@@ -693,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/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,72 +7,13 @@ 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-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="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}
@@ -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/lib/constants.ts

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