fix(deps): update react monorepo

This PR contains the following updates:

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

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

---

### Configuration

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

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

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

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

---

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

---

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

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

.gitea/workflows/check.yml

@@ -4,7 +4,7 @@ on:
   pull_request:
   push:
     branches:
-      - '**' # matches every branch
+      - "**" # matches every branch
 
 jobs:
   lint_and_typecheck:
@@ -15,14 +15,17 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4
+
       - name: Setup Node.js
         uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
           node-version: 22
-          cache: 'npm'
+          cache: "pnpm"
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install
 
       - name: Run check
-        run: npm run check
+        run: pnpm run check

README.md

@@ -29,7 +29,6 @@ The project’s code is structured using React/Next.js with TypeScript, focusing
 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).
@@ -58,11 +57,11 @@ To run locally:
    ```
 2. **Install dependencies**
    ```bash
-   npm install
+   pnpm install
    ```
 3. **Run the app**
    ```bash
-   npm run dev
+   pnpm run dev
    ```
 4. Visit [http://localhost:3000](http://localhost:3000) and unleash the fire.
 

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "next build",
     "check": "next lint && tsc --noEmit",
-    "dev": "next dev --turbo",
+    "dev": "next dev --turbopack",
     "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
     "format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
     "lint:fix": "next lint --fix",
@@ -23,34 +23,35 @@
     "@t3-oss/env-nextjs": "^0.13.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.522.0",
-    "next": "^15.2.3",
+    "lucide-react": "^0.539.0",
+    "next": "^15.4.1",
     "next-plausible": "^3.12.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.56.1",
-    "recharts": "^3.0.0",
+    "recharts": "^2.15.3",
     "tailwind-merge": "^3.2.0",
-    "zod": "^3.24.3"
+    "zod": "^4.0.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.3.1",
-    "@tailwindcss/postcss": "4.1.10",
-    "@types/node": "22.15.32",
-    "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6",
-    "eslint": "9.29.0",
-    "eslint-config-next": "15.3.4",
+    "@tailwindcss/postcss": "4.1.11",
+    "@types/node": "22.17.1",
+    "@types/react": "19.1.10",
+    "@types/react-dom": "19.1.7",
+    "eslint": "9.33.0",
+    "eslint-config-next": "15.4.4",
+    "eslint-plugin-react-hooks": "5.2.0",
     "postcss": "8.5.6",
-    "prettier": "3.5.3",
-    "prettier-plugin-tailwindcss": "0.6.13",
-    "tailwindcss": "4.1.10",
-    "tw-animate-css": "1.3.4",
-    "typescript": "5.8.3",
-    "typescript-eslint": "8.34.1"
+    "prettier": "3.6.2",
+    "prettier-plugin-tailwindcss": "0.6.14",
+    "tailwindcss": "4.1.11",
+    "tw-animate-css": "1.3.6",
+    "typescript": "5.9.2",
+    "typescript-eslint": "8.39.0"
   },
   "ct3aMetadata": {
     "initVersion": "7.39.3"
   },
-  "packageManager": "npm@11.4.2"
+  "packageManager": "pnpm@10.14.0"
 }

pnpm-workspace.yaml

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

src/app/components/FireCalculatorForm.tsx

@@ -120,7 +120,7 @@ export default function FireCalculatorForm() {
   const [showing4percent, setShowing4percent] = useState(false);
 
   // Initialize form with default values
-  const form = useForm<FormValues>({
+  const form = useForm<z.input<typeof formSchema>, undefined, FormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       startingCapital: 50000,
@@ -258,11 +258,18 @@ export default function FireCalculatorForm() {
                         <Input
                           placeholder="e.g., 10000"
                           type="number"
-                          {...field}
-                          onChange={(value) => {
-                            field.onChange(value);
+                          value={field.value as number | string | undefined}
+                          onChange={(e) => {
+                            field.onChange(
+                              e.target.value === ""
+                                ? undefined
+                                : Number(e.target.value),
+                            );
                             void form.handleSubmit(onSubmit)();
                           }}
+                          onBlur={field.onBlur}
+                          name={field.name}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -279,11 +286,18 @@ export default function FireCalculatorForm() {
                         <Input
                           placeholder="e.g., 500"
                           type="number"
-                          {...field}
-                          onChange={(value) => {
-                            field.onChange(value);
+                          value={field.value as number | string | undefined}
+                          onChange={(e) => {
+                            field.onChange(
+                              e.target.value === ""
+                                ? undefined
+                                : Number(e.target.value),
+                            );
                             void form.handleSubmit(onSubmit)();
                           }}
+                          onBlur={field.onBlur}
+                          name={field.name}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -300,11 +314,18 @@ export default function FireCalculatorForm() {
                         <Input
                           placeholder="e.g., 30"
                           type="number"
-                          {...field}
-                          onChange={(value) => {
-                            field.onChange(value);
+                          value={field.value as number | string | undefined}
+                          onChange={(e) => {
+                            field.onChange(
+                              e.target.value === ""
+                                ? undefined
+                                : Number(e.target.value),
+                            );
                             void form.handleSubmit(onSubmit)();
                           }}
+                          onBlur={field.onBlur}
+                          name={field.name}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -321,11 +342,18 @@ export default function FireCalculatorForm() {
                         <Input
                           placeholder="e.g., 90"
                           type="number"
-                          {...field}
-                          onChange={(value) => {
-                            field.onChange(value);
+                          value={field.value as number | string | undefined}
+                          onChange={(e) => {
+                            field.onChange(
+                              e.target.value === ""
+                                ? undefined
+                                : Number(e.target.value),
+                            );
                             void form.handleSubmit(onSubmit)();
                           }}
+                          onBlur={field.onBlur}
+                          name={field.name}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -343,11 +371,18 @@ export default function FireCalculatorForm() {
                           placeholder="e.g., 7"
                           type="number"
                           step="0.1"
-                          {...field}
-                          onChange={(value) => {
-                            field.onChange(value);
+                          value={field.value as number | string | undefined}
+                          onChange={(e) => {
+                            field.onChange(
+                              e.target.value === ""
+                                ? undefined
+                                : Number(e.target.value),
+                            );
                             void form.handleSubmit(onSubmit)();
                           }}
+                          onBlur={field.onBlur}
+                          name={field.name}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -365,11 +400,18 @@ export default function FireCalculatorForm() {
                           placeholder="e.g., 2"
                           type="number"
                           step="0.1"
-                          {...field}
-                          onChange={(value) => {
-                            field.onChange(value);
+                          value={field.value as number | string | undefined}
+                          onChange={(e) => {
+                            field.onChange(
+                              e.target.value === ""
+                                ? undefined
+                                : Number(e.target.value),
+                            );
                             void form.handleSubmit(onSubmit)();
                           }}
+                          onBlur={field.onBlur}
+                          name={field.name}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -388,11 +430,18 @@ export default function FireCalculatorForm() {
                         <Input
                           placeholder="e.g., 2000"
                           type="number"
-                          {...field}
-                          onChange={(value) => {
-                            field.onChange(value);
+                          value={field.value as number | string | undefined}
+                          onChange={(e) => {
+                            field.onChange(
+                              e.target.value === ""
+                                ? undefined
+                                : Number(e.target.value),
+                            );
                             void form.handleSubmit(onSubmit)();
                           }}
+                          onBlur={field.onBlur}
+                          name={field.name}
+                          ref={field.ref}
                         />
                       </FormControl>
                       <FormMessage />
@@ -406,11 +455,13 @@ export default function FireCalculatorForm() {
                   name="retirementAge"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Retirement Age: {field.value}</FormLabel>
+                      <FormLabel>
+                        Retirement Age: {field.value as number}
+                      </FormLabel>
                       <FormControl>
                         <Slider
                           name="retirementAge"
-                          value={[field.value]}
+                          value={[field.value as number]}
                           min={25}
                           max={75}
                           step={1}
@@ -563,8 +614,8 @@ export default function FireCalculatorForm() {
                         <ReferenceLine
                           x={
                             irlYear +
-                            (form.getValues("retirementAge") -
-                              form.getValues("currentAge"))
+                            (Number(form.getValues("retirementAge")) -
+                              Number(form.getValues("currentAge")))
                           }
                           stroke="var(--primary)"
                           strokeWidth={2}
@@ -579,7 +630,7 @@ export default function FireCalculatorForm() {
                             x={
                               irlYear +
                               (result.retirementAge4percent -
-                                form.getValues("currentAge"))
+                                Number(form.getValues("currentAge")))
                             }
                             stroke="var(--secondary)"
                             strokeWidth={1}
@@ -642,8 +693,8 @@ export default function FireCalculatorForm() {
                 </CardHeader>
                 <CardContent>
                   <p className="text-3xl font-bold">
-                    {form.getValues("lifeExpectancy") -
-                      form.getValues("retirementAge")}
+                    {Number(form.getValues("lifeExpectancy")) -
+                      Number(form.getValues("retirementAge"))}
                   </p>
                 </CardContent>
               </Card>
@@ -674,7 +725,7 @@ export default function FireCalculatorForm() {
                     </CardHeader>
                     <CardContent>
                       <p className="text-3xl font-bold">
-                        {form.getValues("lifeExpectancy") -
+                        {Number(form.getValues("lifeExpectancy")) -
                           (result.retirementAge4percent ?? 0)}
                       </p>
                     </CardContent>

src/app/page.tsx

@@ -10,6 +10,61 @@ 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 />
@@ -129,9 +184,14 @@ 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">