chore(deps): update dependency typescript-eslint to v8.33.0

chore(deps): update dependency eslint to v9.28.0
fix(deps): update nextjs monorepo to v15.3.3
2025-05-31 09:44:14 +00:00 · 2025-05-31 09:02:47 +00:00 · 2025-05-31 08:02:53 +00:00 · 2025-05-31 07:03:51 +00:00 · 2025-05-31 06:04:06 +00:00 · 2025-05-31 05:04:09 +00:00
44 changed files with 10700 additions and 30 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,14 @@
 # Since the ".env" file is gitignored, you can use the ".env.example" file to
 # build a new ".env" file when you clone the repo. Keep this file up-to-date
 # when you add new variables to `.env`.
 # This file will be committed to version control, so make sure not to have any
 # secrets in it. If you are cloning this repo, create a copy of this file named
 # ".env" and populate it with your secrets.
 # When adding additional environment variables, the schema in "/src/env.js"
 # should be updated accordingly.
 # Example:
 # SERVERVAR="foo"
 # NEXT_PUBLIC_CLIENTVAR="bar"
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1,2 @@
 *.png filter=lfs diff=lfs merge=lfs -text
 *.ico filter=lfs diff=lfs merge=lfs -text
--- a/.gitea/workflows/check.yml
+++ b/.gitea/workflows/check.yml
@ -0,0 +1,28 @@
 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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
      - name: Setup Node.js
        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
          node-version: 22
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Run check
        run: npm run check
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,46 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 # dependencies
 /node_modules
 /.pnp
 .pnp.js
 # testing
 /coverage
 # database
 /prisma/db.sqlite
 /prisma/db.sqlite-journal
 db.sqlite
 # next.js
 /.next/
 /out/
 next-env.d.ts
 # production
 /build
 # misc
 .DS_Store
 *.pem
 # debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 # local env files
 # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
 .env
 .env*.local
 # vercel
 .vercel
 # typescript
 *.tsbuildinfo
 # idea files
 .idea
--- a/56
+++ b/56
@ -48,7 +48,7 @@ To “convey” a work means any kind of propagation that enables other parties
 An interactive user interface displays “Appropriate Legal Notices” to the extent that it includes a convenient and prominently visible feature that (1) displays an appropriate copyright notice, and (2) tells the user that there is no warranty for the work (except to the extent that warranties are provided), that licensees may convey the work under this License, and how to view a copy of this License. If the interface presents a list of user commands or options, such as a menu, a prominent item in the list meets this criterion.
 1. Source Code.
-The “source code” for a work means the preferred form of the work for making modifications to it. “Object code” means any non-source form of a work.
+   The “source code” for a work means the preferred form of the work for making modifications to it. “Object code” means any non-source form of a work.
 A “Standard Interface” means an interface that either is an official standard defined by a recognized standards body, or, in the case of interfaces specified for a particular programming language, one that is widely used among developers working in that language.
@ -61,47 +61,47 @@ The Corresponding Source need not include anything that users can regenerate aut
 The Corresponding Source for a work in source code form is that same work.
 2. Basic Permissions.
-All rights granted under this License are granted for the term of copyright on the Program, and are irrevocable provided the stated conditions are met. This License explicitly affirms your unlimited permission to run the unmodified Program. The output from running a covered work is covered by this License only if the output, given its content, constitutes a covered work. This License acknowledges your rights of fair use or other equivalent, as provided by copyright law.
+   All rights granted under this License are granted for the term of copyright on the Program, and are irrevocable provided the stated conditions are met. This License explicitly affirms your unlimited permission to run the unmodified Program. The output from running a covered work is covered by this License only if the output, given its content, constitutes a covered work. This License acknowledges your rights of fair use or other equivalent, as provided by copyright law.
 You may make, run and propagate covered works that you do not convey, without conditions so long as your license otherwise remains in force. You may convey covered works to others for the sole purpose of having them make modifications exclusively for you, or provide you with facilities for running those works, provided that you comply with the terms of this License in conveying all material for which you do not control copyright. Those thus making or running the covered works for you must do so exclusively on your behalf, under your direction and control, on terms that prohibit them from making any copies of your copyrighted material outside their relationship with you.
 Conveying under any other circumstances is permitted solely under the conditions stated below. Sublicensing is not allowed; section 10 makes it unnecessary.
 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-No covered work shall be deemed part of an effective technological measure under any applicable law fulfilling obligations under article 11 of the WIPO copyright treaty adopted on 20 December 1996, or similar laws prohibiting or restricting circumvention of such measures.
+   No covered work shall be deemed part of an effective technological measure under any applicable law fulfilling obligations under article 11 of the WIPO copyright treaty adopted on 20 December 1996, or similar laws prohibiting or restricting circumvention of such measures.
 When you convey a covered work, you waive any legal power to forbid circumvention of technological measures to the extent such circumvention is effected by exercising rights under this License with respect to the covered work, and you disclaim any intention to limit operation or modification of the work as a means of enforcing, against the work's users, your or third parties' legal rights to forbid circumvention of technological measures.
 4. Conveying Verbatim Copies.
-You may convey verbatim copies of the Program's source code as you receive it, in any medium, provided that you conspicuously and appropriately publish on each copy an appropriate copyright notice; keep intact all notices stating that this License and any non-permissive terms added in accord with section 7 apply to the code; keep intact all notices of the absence of any warranty; and give all recipients a copy of this License along with the Program.
+   You may convey verbatim copies of the Program's source code as you receive it, in any medium, provided that you conspicuously and appropriately publish on each copy an appropriate copyright notice; keep intact all notices stating that this License and any non-permissive terms added in accord with section 7 apply to the code; keep intact all notices of the absence of any warranty; and give all recipients a copy of this License along with the Program.
 You may charge any price or no price for each copy that you convey, and you may offer support or warranty protection for a fee.
-5. Conveying Modified Source Versions.
+5.  Conveying Modified Source Versions.
-You may convey a work based on the Program, or the modifications to produce it from the Program, in the form of source code under the terms of section 4, provided that you also meet all of these conditions:
+    You may convey a work based on the Program, or the modifications to produce it from the Program, in the form of source code under the terms of section 4, provided that you also meet all of these conditions:
-     a) The work must carry prominent notices stating that you modified it, and giving a relevant date.
+         a) The work must carry prominent notices stating that you modified it, and giving a relevant date.
-     b) The work must carry prominent notices stating that it is released under this License and any conditions added under section 7. This requirement modifies the requirement in section 4 to “keep intact all notices”.
+         b) The work must carry prominent notices stating that it is released under this License and any conditions added under section 7. This requirement modifies the requirement in section 4 to “keep intact all notices”.
-     c) You must license the entire work, as a whole, under this License to anyone who comes into possession of a copy. This License will therefore apply, along with any applicable section 7 additional terms, to the whole of the work, and all its parts, regardless of how they are packaged. This License gives no permission to license the work in any other way, but it does not invalidate such permission if you have separately received it.
+         c) You must license the entire work, as a whole, under this License to anyone who comes into possession of a copy. This License will therefore apply, along with any applicable section 7 additional terms, to the whole of the work, and all its parts, regardless of how they are packaged. This License gives no permission to license the work in any other way, but it does not invalidate such permission if you have separately received it.
-     d) If the work has interactive user interfaces, each must display Appropriate Legal Notices; however, if the Program has interactive interfaces that do not display Appropriate Legal Notices, your work need not make them do so.
+         d) If the work has interactive user interfaces, each must display Appropriate Legal Notices; however, if the Program has interactive interfaces that do not display Appropriate Legal Notices, your work need not make them do so.
 A compilation of a covered work with other separate and independent works, which are not by their nature extensions of the covered work, and which are not combined with it such as to form a larger program, in or on a volume of a storage or distribution medium, is called an “aggregate” if the compilation and its resulting copyright are not used to limit the access or legal rights of the compilation's users beyond what the individual works permit. Inclusion of a covered work in an aggregate does not cause this License to apply to the other parts of the aggregate.
-6. Conveying Non-Source Forms.
+6.  Conveying Non-Source Forms.
-You may convey a covered work in object code form under the terms of sections 4 and 5, provided that you also convey the machine-readable Corresponding Source under the terms of this License, in one of these ways:
+    You may convey a covered work in object code form under the terms of sections 4 and 5, provided that you also convey the machine-readable Corresponding Source under the terms of this License, in one of these ways:
-     a) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by the Corresponding Source fixed on a durable physical medium customarily used for software interchange.
+         a) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by the Corresponding Source fixed on a durable physical medium customarily used for software interchange.
-     b) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by a written offer, valid for at least three years and valid for as long as you offer spare parts or customer support for that product model, to give anyone who possesses the object code either (1) a copy of the Corresponding Source for all the software in the product that is covered by this License, on a durable physical medium customarily used for software interchange, for a price no more than your reasonable cost of physically performing this conveying of source, or (2) access to copy the Corresponding Source from a network server at no charge.
+         b) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by a written offer, valid for at least three years and valid for as long as you offer spare parts or customer support for that product model, to give anyone who possesses the object code either (1) a copy of the Corresponding Source for all the software in the product that is covered by this License, on a durable physical medium customarily used for software interchange, for a price no more than your reasonable cost of physically performing this conveying of source, or (2) access to copy the Corresponding Source from a network server at no charge.
-     c) Convey individual copies of the object code with a copy of the written offer to provide the Corresponding Source. This alternative is allowed only occasionally and noncommercially, and only if you received the object code with such an offer, in accord with subsection 6b.
+         c) Convey individual copies of the object code with a copy of the written offer to provide the Corresponding Source. This alternative is allowed only occasionally and noncommercially, and only if you received the object code with such an offer, in accord with subsection 6b.
-     d) Convey the object code by offering access from a designated place (gratis or for a charge), and offer equivalent access to the Corresponding Source in the same way through the same place at no further charge. You need not require recipients to copy the Corresponding Source along with the object code. If the place to copy the object code is a network server, the Corresponding Source may be on a different server (operated by you or a third party) that supports equivalent copying facilities, provided you maintain clear directions next to the object code saying where to find the Corresponding Source. Regardless of what server hosts the Corresponding Source, you remain obligated to ensure that it is available for as long as needed to satisfy these requirements.
+         d) Convey the object code by offering access from a designated place (gratis or for a charge), and offer equivalent access to the Corresponding Source in the same way through the same place at no further charge. You need not require recipients to copy the Corresponding Source along with the object code. If the place to copy the object code is a network server, the Corresponding Source may be on a different server (operated by you or a third party) that supports equivalent copying facilities, provided you maintain clear directions next to the object code saying where to find the Corresponding Source. Regardless of what server hosts the Corresponding Source, you remain obligated to ensure that it is available for as long as needed to satisfy these requirements.
-     e) Convey the object code using peer-to-peer transmission, provided you inform other peers where the object code and Corresponding Source of the work are being offered to the general public at no charge under subsection 6d.
+         e) Convey the object code using peer-to-peer transmission, provided you inform other peers where the object code and Corresponding Source of the work are being offered to the general public at no charge under subsection 6d.
 A separable portion of the object code, whose source code is excluded from the Corresponding Source as a System Library, need not be included in conveying the object code work.
@ -116,7 +116,7 @@ The requirement to provide Installation Information does not include a requireme
 Corresponding Source conveyed, and Installation Information provided, in accord with this section must be in a format that is publicly documented (and with an implementation available to the public in source code form), and must require no special password or key for unpacking, reading or copying.
 7. Additional Terms.
-“Additional permissions” are terms that supplement the terms of this License by making exceptions from one or more of its conditions. Additional permissions that are applicable to the entire Program shall be treated as though they were included in this License, to the extent that they are valid under applicable law. If additional permissions apply only to part of the Program, that part may be used separately under those permissions, but the entire Program remains governed by this License without regard to the additional permissions.
+   “Additional permissions” are terms that supplement the terms of this License by making exceptions from one or more of its conditions. Additional permissions that are applicable to the entire Program shall be treated as though they were included in this License, to the extent that they are valid under applicable law. If additional permissions apply only to part of the Program, that part may be used separately under those permissions, but the entire Program remains governed by this License without regard to the additional permissions.
 When you convey a copy of a covered work, you may at your option remove any additional permissions from that copy, or from any part of it. (Additional permissions may be written to require their own removal in certain cases when you modify the work.) You may place additional permissions on material, added by you to a covered work, for which you have or can give appropriate copyright permission.
@ -141,7 +141,7 @@ If you add terms to a covered work in accord with this section, you must place,
 Additional terms, permissive or non-permissive, may be stated in the form of a separately written license, or stated as exceptions; the above requirements apply either way.
 8. Termination.
-You may not propagate or modify a covered work except as expressly provided under this License. Any attempt otherwise to propagate or modify it is void, and will automatically terminate your rights under this License (including any patent licenses granted under the third paragraph of section 11).
+   You may not propagate or modify a covered work except as expressly provided under this License. Any attempt otherwise to propagate or modify it is void, and will automatically terminate your rights under this License (including any patent licenses granted under the third paragraph of section 11).
 However, if you cease all violation of this License, then your license from a particular copyright holder is reinstated (a) provisionally, unless and until the copyright holder explicitly and finally terminates your license, and (b) permanently, if the copyright holder fails to notify you of the violation by some reasonable means prior to 60 days after the cessation.
@ -150,17 +150,17 @@ Moreover, your license from a particular copyright holder is reinstated permanen
 Termination of your rights under this section does not terminate the licenses of parties who have received copies or rights from you under this License. If your rights have been terminated and not permanently reinstated, you do not qualify to receive new licenses for the same material under section 10.
 9. Acceptance Not Required for Having Copies.
-You are not required to accept this License in order to receive or run a copy of the Program. Ancillary propagation of a covered work occurring solely as a consequence of using peer-to-peer transmission to receive a copy likewise does not require acceptance. However, nothing other than this License grants you permission to propagate or modify any covered work. These actions infringe copyright if you do not accept this License. Therefore, by modifying or propagating a covered work, you indicate your acceptance of this License to do so.
+   You are not required to accept this License in order to receive or run a copy of the Program. Ancillary propagation of a covered work occurring solely as a consequence of using peer-to-peer transmission to receive a copy likewise does not require acceptance. However, nothing other than this License grants you permission to propagate or modify any covered work. These actions infringe copyright if you do not accept this License. Therefore, by modifying or propagating a covered work, you indicate your acceptance of this License to do so.
 10. Automatic Licensing of Downstream Recipients.
-Each time you convey a covered work, the recipient automatically receives a license from the original licensors, to run, modify and propagate that work, subject to this License. You are not responsible for enforcing compliance by third parties with this License.
+    Each time you convey a covered work, the recipient automatically receives a license from the original licensors, to run, modify and propagate that work, subject to this License. You are not responsible for enforcing compliance by third parties with this License.
 An “entity transaction” is a transaction transferring control of an organization, or substantially all assets of one, or subdividing an organization, or merging organizations. If propagation of a covered work results from an entity transaction, each party to that transaction who receives a copy of the work also receives whatever licenses to the work the party's predecessor in interest had or could give under the previous paragraph, plus a right to possession of the Corresponding Source of the work from the predecessor in interest, if the predecessor has it or can get it with reasonable efforts.
 You may not impose any further restrictions on the exercise of the rights granted or affirmed under this License. For example, you may not impose a license fee, royalty, or other charge for exercise of rights granted under this License, and you may not initiate litigation (including a cross-claim or counterclaim in a lawsuit) alleging that any patent claim is infringed by making, using, selling, offering for sale, or importing the Program or any portion of it.
 11. Patents.
-A “contributor” is a copyright holder who authorizes use under this License of the Program or a work on which the Program is based. The work thus licensed is called the contributor's “contributor version”.
+    A “contributor” is a copyright holder who authorizes use under this License of the Program or a work on which the Program is based. The work thus licensed is called the contributor's “contributor version”.
 A contributor's “essential patent claims” are all patent claims owned or controlled by the contributor, whether already acquired or hereafter acquired, that would be infringed by some manner, permitted by this License, of making, using, or selling its contributor version, but do not include claims that would be infringed only as a consequence of further modification of the contributor version. For purposes of this definition, “control” includes the right to grant patent sublicenses in a manner consistent with the requirements of this License.
@ -177,13 +177,13 @@ A patent license is “discriminatory” if it does not include within the scope
 Nothing in this License shall be construed as excluding or limiting any implied license or other defenses to infringement that may otherwise be available to you under applicable patent law.
 12. No Surrender of Others' Freedom.
-If conditions are imposed on you (whether by court order, agreement or otherwise) that contradict the conditions of this License, they do not excuse you from the conditions of this License. If you cannot convey a covered work so as to satisfy simultaneously your obligations under this License and any other pertinent obligations, then as a consequence you may not convey it at all. For example, if you agree to terms that obligate you to collect a royalty for further conveying from those to whom you convey the Program, the only way you could satisfy both those terms and this License would be to refrain entirely from conveying the Program.
+    If conditions are imposed on you (whether by court order, agreement or otherwise) that contradict the conditions of this License, they do not excuse you from the conditions of this License. If you cannot convey a covered work so as to satisfy simultaneously your obligations under this License and any other pertinent obligations, then as a consequence you may not convey it at all. For example, if you agree to terms that obligate you to collect a royalty for further conveying from those to whom you convey the Program, the only way you could satisfy both those terms and this License would be to refrain entirely from conveying the Program.
 13. Use with the GNU Affero General Public License.
-Notwithstanding any other provision of this License, you have permission to link or combine any covered work with a work licensed under version 3 of the GNU Affero General Public License into a single combined work, and to convey the resulting work. The terms of this License will continue to apply to the part which is the covered work, but the special requirements of the GNU Affero General Public License, section 13, concerning interaction through a network will apply to the combination as such.
+    Notwithstanding any other provision of this License, you have permission to link or combine any covered work with a work licensed under version 3 of the GNU Affero General Public License into a single combined work, and to convey the resulting work. The terms of this License will continue to apply to the part which is the covered work, but the special requirements of the GNU Affero General Public License, section 13, concerning interaction through a network will apply to the combination as such.
 14. Revised Versions of this License.
-The Free Software Foundation may publish revised and/or new versions of the GNU General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns.
+    The Free Software Foundation may publish revised and/or new versions of the GNU General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns.
 Each version is given a distinguishing version number. If the Program specifies that a certain numbered version of the GNU General Public License “or any later version” applies to it, you have the option of following the terms and conditions either of that numbered version or of any later version published by the Free Software Foundation. If the Program does not specify a version number of the GNU General Public License, you may choose any version ever published by the Free Software Foundation.
@ -192,13 +192,13 @@ If the Program specifies that a proxy can decide which future versions of the GN
 Later license versions may give you additional or different permissions. However, no additional obligations are imposed on any author or copyright holder as a result of your choosing to follow a later version.
 15. Disclaimer of Warranty.
-THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM “AS IS” WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+    THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM “AS IS” WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
 16. Limitation of Liability.
-IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+    IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
 17. Interpretation of Sections 15 and 16.
-If the disclaimer of warranty and limitation of liability provided above cannot be given local legal effect according to their terms, reviewing courts shall apply local law that most closely approximates an absolute waiver of all civil liability in connection with the Program, unless a warranty or assumption of liability accompanies a copy of the Program in return for a fee.
+    If the disclaimer of warranty and limitation of liability provided above cannot be given local legal effect according to their terms, reviewing courts shall apply local law that most closely approximates an absolute waiver of all civil liability in connection with the Program, unless a warranty or assumption of liability accompanies a copy of the Program in return for a fee.
 END OF TERMS AND CONDITIONS
--- a/README.md
+++ b/README.md
@ -1,3 +1,109 @@
-# fire
+![InvestingFIRE logo](/src/app/apple-icon.png)
-FIRE calculator
+# InvestingFIRE 🔥 — The #1 Interactive FIRE Calculator
 **InvestingFIRE** is a responsive web application for calculating your path to Financial Independence and Early Retirement (FIRE). It features a year-by-year projection engine that simulates both accumulation (savings and investment growth) and retirement (withdrawals) phases, allowing users to:
 - Input starting capital, monthly savings, expected annual growth rate, inflation rate, current age, desired retirement age, life expectancy, and desired monthly retirement allowance.
 - View a dynamic chart displaying projected portfolio balance and monthly allowance over time.
 - Instantly see their estimated “FIRE number” (required capital at retirement), how long their capital will last, and compare results to the “4% rule.”
 - Adjust assumptions live, with all calculations and visualizations updating automatically.
 - Access explanatory content about FIRE methodology, key variables, and additional community resources, all on a single, consolidated page.
 The project’s code is structured using React/Next.js with TypeScript, focusing on user experience, modern UI components, and clarity of financial assumptions.
 ---
 ## 🚀 Features at a Glance
 - **⚡️ Real-Time Projections:** Every field updates the chart _as you type_. Experiment with savings, growth rates, inflation, or retirement age and see your future instantly.
 - **📈 Interactive Chart:** Dual-area plots for portfolio value and future monthly spending, plus reference lines for FIRE milestones and “4% rule” legends.
 - **🧠 Education Baked In:** Contextual tooltips, deep-dive sections on how FIRE works, FAQs, and must-read resources included.
 - **🔎 Detailed Methodology:** Not just a 25x rule — runs a full, year-by-year simulation with inflation-adjusted withdrawals and optional 4%-rule overlays.
 - **👌 Modern UX:** Typing, sliding, or clicking feels _good_. Responsive on all devices.
 ---
 ## 🧰 How It Works
 The calculator models your FIRE journey in two phases:
 1. **Accumulation:**
   - Your starting capital is grown by your expected CAGR (~7% by default).
   - Monthly savings are added for each year until retirement.
   - Every variable can be adjusted live (capital, savings, age, growth, inflation, spending, target retirement).
 2. **Retirement:**
   - Your balance continues to grow by CAGR.
   - Each year, an inflation-adjusted monthly allowance is withdrawn.
   - The simulation runs until your selected life expectancy, showing the possibility of portfolio depletion.
 **Key Outputs:**
 - 🔥 “FIRE Number”: Portfolio value at your defined retirement age
 - 📊 Interactive projection chart: See how your nest egg and withdrawals evolve over time
 - 4️⃣ “4% Rule” overlays: Compare dynamic results to classic rule-of-thumb
 ---
 ## 🌟 Try It For Yourself
 To run locally:
 1. **Clone the repo**
   ```bash
   git clone https://git.schulze.network/schulze/fire.git
   cd fire
   ```
 2. **Install dependencies**
   ```bash
   npm install
   ```
 3. **Run the app**
   ```bash
   npm 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.**
--- a/components.json
+++ b/components.json
@ -0,0 +1,21 @@
 {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
 }
--- a/eslint.config.js
+++ b/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,
      },
    },
  },
 );
--- a/next.config.js
+++ b/next.config.js
@ -0,0 +1,10 @@
 /**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
 import "./src/env.js";
 /** @type {import("next").NextConfig} */
 const config = {};
 export default config;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,56 @@
 {
  "name": "fire",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "next build",
    "check": "next lint && tsc --noEmit",
    "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:fix": "next lint --fix",
    "preview": "next build && next start",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^5.0.1",
    "@radix-ui/react-accordion": "^1.2.8",
    "@radix-ui/react-label": "^2.1.4",
    "@radix-ui/react-select": "^2.2.2",
    "@radix-ui/react-slider": "^1.3.2",
    "@radix-ui/react-slot": "^1.2.0",
    "@t3-oss/env-nextjs": "^0.13.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.511.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": "^3.24.3"
  },
  "devDependencies": {
    "@eslint/eslintrc": "3.3.1",
    "@tailwindcss/postcss": "4.1.8",
    "@types/node": "22.15.29",
    "@types/react": "19.1.6",
    "@types/react-dom": "19.1.5",
    "eslint": "9.28.0",
    "eslint-config-next": "15.3.3",
    "postcss": "8.5.4",
    "prettier": "3.5.3",
    "prettier-plugin-tailwindcss": "0.6.12",
    "tailwindcss": "4.1.8",
    "tw-animate-css": "1.3.2",
    "typescript": "5.8.3",
    "typescript-eslint": "8.33.0"
  },
  "ct3aMetadata": {
    "initVersion": "7.39.3"
  },
  "packageManager": "npm@11.4.1"
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,5 @@
 export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
 };
--- a/prettier.config.js
+++ b/prettier.config.js
@ -0,0 +1,4 @@
 /** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
 export default {
  plugins: ["prettier-plugin-tailwindcss"],
 };
--- a/public/investingfire_logo_no-bg.svg
+++ b/public/investingfire_logo_no-bg.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1000" height="1000" viewBox="0 0 264.58 264.58"><defs><linearGradient id="b"><stop offset="0" stop-color="#fd8315"/><stop offset="1" stop-color="#fa6b14"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#f24b1b"/><stop offset="1" stop-color="#dc2f12"/></linearGradient><linearGradient xlink:href="#a" id="d" x1="172.49" x2="179.1" y1="64.48" y2="197.19" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#b" id="c" x1="118.9" x2="117.99" y1="14.21" y2="194.34" gradientUnits="userSpaceOnUse"/></defs><g stroke-linecap="round" stroke-linejoin="round" stroke-width=".13"><path fill="url(#c)" stroke="#f14a1b" d="m115.13 9.96-.26.01c-.97.11-1.29 1.02-.75 2.38a45.6 45.6 0 0 1 3.02 15.68c-.09 8.46.04 12.87-7.31 23.68s-23.16 21.9-33.96 34.66c-10.8 12.76-12.28 16.6-16.1 26.2A90.42 90.42 0 0 0 53.05 146c0 41.29 27.68 76.09 65.49 86.91 35.3-25.9 55.47-125.62 55.47-125.62s-14.45-10.54-18.57-18.89c-1.26-2.56-1.97-6.15-1.97-9.58.01-2.54 1.3-8.72 1.47-9.41a42.4 42.4 0 0 0 .94-12.14c-.07-.95-.17-1.9-.3-2.84v-.01a59.45 59.45 0 0 0-7.6-19h0a60.34 60.34 0 0 0-10.24-12.13 66.97 66.97 0 0 0-21.7-13.15 2.94 2.94 0 0 0-.92-.18z"/><path fill="url(#d)" stroke="#510a0c" d="M170.01 58.08a66.66 66.66 0 0 0-10.24 15.94 66.66 66.66 0 0 0-6.3 27.82 66.8 66.8 0 0 0 3.66 20.86h-.08l7.08 105.8s37.38-25.1 45.9-61a74.13 74.13 0 0 0 2.04-25.93c-1.34-14.35-4.35-21.67-9.85-30.3-5.5-8.62-10.36-14-17.63-22.78-6.17-7.43-9.44-18.25-10.39-28.87-.28-3.13-2.13-3.91-4.19-1.54z"/></g><path fill="#510a0c" d="M93.45 115.81h77.91c9.81 0 17.71 7.9 17.71 17.7v104.53c0 9.81-7.9 17.71-17.7 17.71H93.44c-9.81 0-17.71-7.9-17.71-17.7V133.51c0-9.81 7.9-17.71 17.7-17.71z"/><path fill="#e83c1b" d="M91.95 163.12h29.23c3.7 0 6.68 2.98 6.68 6.68v24.8c0 3.7-2.98 6.68-6.68 6.68H91.95a6.67 6.67 0 0 1-6.68-6.68v-24.8c0-3.7 2.98-6.68 6.68-6.68zm0 45.92h29.23c3.7 0 6.68 2.98 6.68 6.68v24.8c0 3.7-2.98 6.68-6.68 6.68H91.95a6.67 6.67 0 0 1-6.68-6.69v-24.8c0-3.7 2.98-6.67 6.68-6.67zm51.25-45.92h29.23c3.7 0 6.68 2.98 6.68 6.68v24.8c0 3.7-2.98 6.68-6.68 6.68H143.2a6.67 6.67 0 0 1-6.68-6.68v-24.8c0-3.7 2.98-6.68 6.68-6.68zm0 45.92h29.23c3.7 0 6.68 2.98 6.68 6.68v24.8c0 3.7-2.98 6.68-6.68 6.68H143.2a6.67 6.67 0 0 1-6.68-6.69v-24.8c0-3.7 2.98-6.67 6.68-6.67z"/><g fill="#520a0c"><path d="M148.74 179.98h18.29a2.41 2.41 0 1 1 0 4.84h-18.29a2.41 2.41 0 1 1 0-4.84zm-51.54.04h18.29a2.41 2.41 0 1 1 0 4.83h-18.3a2.41 2.41 0 1 1 0-4.83z"/><path d="M108.76 173.3v18.28a2.41 2.41 0 1 1-4.84 0V173.3a2.41 2.41 0 1 1 4.84 0zm-10.59 59.18 12.93-12.93a2.41 2.41 0 1 1 3.42 3.42l-12.93 12.93a2.41 2.41 0 1 1-3.42-3.42z"/><path d="m101.59 219.55 12.93 12.93a2.41 2.41 0 1 1-3.42 3.42l-12.93-12.93a2.41 2.41 0 1 1 3.42-3.42zm47.15 1.49h18.29a2.41 2.41 0 1 1 0 4.84h-18.29a2.41 2.41 0 1 1 0-4.84zm0 10.73h18.29a2.41 2.41 0 1 1 0 4.84h-18.29a2.41 2.41 0 1 1 0-4.84z"/></g><path fill="#fcf2e4" d="M92.35 125.2h79.67a7.07 7.07 0 0 1 7.09 7.1v14.36a7.07 7.07 0 0 1-7.09 7.1H92.35a7.07 7.07 0 0 1-7.08-7.1V132.3a7.07 7.07 0 0 1 7.08-7.09z"/></svg>
--- a/public/web-app-manifest-192x192.png
+++ b/public/web-app-manifest-192x192.png
--- a/public/web-app-manifest-512x512.png
+++ b/public/web-app-manifest-512x512.png
--- a/renovate.json
+++ b/renovate.json
@ -0,0 +1,11 @@
 {
  "extends": ["config:best-practices", ":semanticCommits"],
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "packageRules": [
    {
      "matchUpdateTypes": ["minor", "patch", "pin", "digest"],
      "automerge": true,
      "automergeType": "branch"
    }
  ]
 }
--- a/src/app/apple-icon.png
+++ b/src/app/apple-icon.png
--- a/src/app/components/BackgroundPattern.tsx
+++ b/src/app/components/BackgroundPattern.tsx
@ -0,0 +1,157 @@
 "use client";
 import { useState, useEffect } from "react";
 import {
  type LucideIcon,
  HandCoins,
  Bitcoin,
  Coins,
  DollarSign,
  Euro,
  IndianRupee,
  JapaneseYen,
  PiggyBank,
  PoundSterling,
  Wallet,
  Banknote,
  ChartCandlestick,
  CirclePercent,
  CreditCard,
  Gem,
  Receipt,
  ShoppingBasket,
  Rocket,
  RockingChair,
  Sparkles,
  ChartPie,
  ChartBar,
  BarChart3,
  ChartLine,
  TrendingDown,
  TrendingUp,
  Vault,
  Landmark,
  Briefcase,
  Handshake,
  Shield,
  Lock,
  CalendarRange,
  Hourglass,
  Sprout,
  Target,
 } from "lucide-react";
 export default function MultiIconPattern({ opacity = 0.2, spacing = 160 }) {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  const [rows, setRows] = useState(0);
  const [columns, setColumns] = useState(0);
  useEffect(() => {
    const updateDimensions = () => {
      if (window.innerWidth > width + spacing * 2) {
        setWidth(window.innerWidth);
      }
      if (window.innerHeight > height + spacing * 2) {
        setHeight(window.innerHeight);
      }
    };
    updateDimensions();
    window.addEventListener("resize", updateDimensions);
    return () => {
      window.removeEventListener("resize", updateDimensions);
    };
  }, [height, width, spacing]);
  useEffect(() => {
    setColumns(Math.ceil(width / spacing) + 3);
  }, [width, spacing]);
  useEffect(() => {
    setRows(Math.ceil(height / spacing) + 3);
  }, [height, spacing]);
  // Explicitly type the array as LucideIcon[]
  const iconComponents: LucideIcon[] = [
    HandCoins,
    Bitcoin,
    Coins,
    DollarSign,
    Euro,
    IndianRupee,
    JapaneseYen,
    PiggyBank,
    PoundSterling,
    Wallet,
    Banknote,
    ChartCandlestick,
    CirclePercent,
    CreditCard,
    Gem,
    Receipt,
    ShoppingBasket,
    Rocket,
    RockingChair,
    Sparkles,
    ChartPie,
    ChartBar,
    BarChart3,
    ChartLine,
    TrendingDown,
    TrendingUp,
    Vault,
    Landmark,
    Briefcase,
    Handshake,
    Shield,
    Lock,
    CalendarRange,
    Hourglass,
    Sprout,
    Target,
  ];
  const renderIcons = ({
    rows,
    columns,
  }: {
    rows: number;
    columns: number;
  }) => {
    const icons = [];
    for (let y = 0; y < rows; y++) {
      for (let x = 0; x < columns; x++) {
        // Pick a random icon component from the array
        const randomIndex = Math.floor(Math.random() * iconComponents.length);
        const IconComponent = iconComponents[randomIndex]!;
        // Slightly randomize size and position for more organic feel
        const size = 28 + Math.floor(Math.random() * 8);
        const xOffset = Math.floor(Math.random() * (spacing / 1.618));
        const yOffset = Math.floor(Math.random() * (spacing / 1.618));
        icons.push(
          <IconComponent
            key={`icon-${x}-${y}`}
            size={size}
            className="text-primary fixed"
            style={{
              left: `${x * spacing + xOffset}px`,
              top: `${y * spacing + yOffset}px`,
              opacity: opacity,
              transform: `rotate(${Math.round((Math.random() - 0.5) * 30)}deg)`,
            }}
          />,
        );
      }
    }
    return icons;
  };
  return (
    <div className="absolute h-full w-full">
      {width > 0 && renderIcons({ rows, columns })}
    </div>
  );
 }
--- a/src/app/components/FireCalculatorForm.tsx
+++ b/src/app/components/FireCalculatorForm.tsx
@ -0,0 +1,690 @@
 "use client";
 import { useState } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
 } from "@/components/ui/form";
 import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
 } from "@/components/ui/card";
 import { ChartContainer, ChartTooltip } from "@/components/ui/chart";
 import {
  Area,
  AreaChart,
  CartesianGrid,
  XAxis,
  YAxis,
  ReferenceLine,
  type TooltipProps,
 } from "recharts";
 import { Slider } from "@/components/ui/slider";
 import assert from "assert";
 import type {
  NameType,
  ValueType,
 } from "recharts/types/component/DefaultTooltipContent";
 // Schema for form validation
 const formSchema = z.object({
  startingCapital: z.coerce.number(),
  monthlySavings: z.coerce
    .number()
    .min(0, "Monthly savings must be a non-negative number"),
  currentAge: z.coerce
    .number()
    .min(1, "Age must be at least 1")
    .max(100, "No point in starting this late"),
  cagr: z.coerce.number().min(0, "Growth rate must be a non-negative number"),
  desiredMonthlyAllowance: z.coerce
    .number()
    .min(0, "Monthly allowance must be a non-negative number"),
  inflationRate: z.coerce
    .number()
    .min(0, "Inflation rate must be a non-negative number"),
  lifeExpectancy: z.coerce
    .number()
    .min(40, "Be a bit more optimistic buddy :(")
    .max(100, "You should be more realistic..."),
  retirementAge: z.coerce
    .number()
    .min(18, "Retirement age must be at least 18")
    .max(100, "Retirement age must be at most 100"),
 });
 // Type for form values
 type FormValues = z.infer<typeof formSchema>;
 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;
 }
 // Helper function to format currency without specific symbols
 const formatNumber = (value: number | null) => {
  if (!value) return "N/A";
  return new Intl.NumberFormat("en", {
    maximumFractionDigits: 0,
  }).format(value);
 };
 // Helper function to render tooltip for chart
 const tooltipRenderer = ({
  active,
  payload,
 }: TooltipProps<ValueType, NameType>) => {
  if (active && payload?.[0]?.payload) {
    const data = payload[0].payload as YearlyData;
    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>{`Phase: ${data.phase === "accumulation" ? "Accumulation" : "Retirement"}`}</p>
      </div>
    );
  }
  return null;
 };
 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<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      startingCapital: 50000,
      monthlySavings: 1500,
      currentAge: 25,
      cagr: 7,
      desiredMonthlyAllowance: 3000,
      inflationRate: 2.3,
      lifeExpectancy: 84,
      retirementAge: 55,
    },
  });
  function onSubmit(values: FormValues) {
    setResult(null); // Reset previous results
    const startingCapital = values.startingCapital;
    const monthlySavings = values.monthlySavings;
    const age = values.currentAge;
    const annualGrowthRate = 1 + values.cagr / 100;
    const initialMonthlyAllowance = values.desiredMonthlyAllowance;
    const annualInflation = 1 + values.inflationRate / 100;
    const ageOfDeath = values.lifeExpectancy;
    const retirementAge = values.retirementAge;
    // Array to store yearly data for the chart
    const yearlyData: YearlyData[] = [];
    // Initial year data
    yearlyData.push({
      age: age,
      year: irlYear,
      balance: startingCapital,
      untouchedBalance: startingCapital,
      phase: "accumulation",
      monthlyAllowance: 0,
      untouchedMonthlyAllowance: initialMonthlyAllowance,
    });
    // 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";
      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;
      }
      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,
      });
    }
    // 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] = (() => {
      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,
      });
    } else {
      // Set the result
      setResult({
        fireNumber: retirementData.balance,
        fireNumber4percent: fireNumber4percent,
        retirementAge4percent: retirementAge4percent,
        yearlyData: yearlyData,
      });
    }
  }
  return (
    <>
      <Card className="mb-4">
        <CardHeader>
          <CardTitle className="text-2xl">FIRE Calculator</CardTitle>
          <CardDescription>
            Calculate your path to financial independence and retirement
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Form {...form}>
            <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}
                  name="startingCapital"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Starting Capital</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="e.g., 10000"
                          type="number"
                          {...field}
                          onChange={(value) => {
                            field.onChange(value);
                            void form.handleSubmit(onSubmit)();
                          }}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="monthlySavings"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Monthly Savings</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="e.g., 500"
                          type="number"
                          {...field}
                          onChange={(value) => {
                            field.onChange(value);
                            void form.handleSubmit(onSubmit)();
                          }}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="currentAge"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Current Age</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="e.g., 30"
                          type="number"
                          {...field}
                          onChange={(value) => {
                            field.onChange(value);
                            void form.handleSubmit(onSubmit)();
                          }}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="lifeExpectancy"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Life Expectancy (Age)</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="e.g., 90"
                          type="number"
                          {...field}
                          onChange={(value) => {
                            field.onChange(value);
                            void form.handleSubmit(onSubmit)();
                          }}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="cagr"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Expected Annual Growth Rate (%)</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="e.g., 7"
                          type="number"
                          step="0.1"
                          {...field}
                          onChange={(value) => {
                            field.onChange(value);
                            void form.handleSubmit(onSubmit)();
                          }}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="inflationRate"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Annual Inflation Rate (%)</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="e.g., 2"
                          type="number"
                          step="0.1"
                          {...field}
                          onChange={(value) => {
                            field.onChange(value);
                            void form.handleSubmit(onSubmit)();
                          }}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="desiredMonthlyAllowance"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>
                        Desired Monthly Allowance (Today&apos;s Value)
                      </FormLabel>
                      <FormControl>
                        <Input
                          placeholder="e.g., 2000"
                          type="number"
                          {...field}
                          onChange={(value) => {
                            field.onChange(value);
                            void form.handleSubmit(onSubmit)();
                          }}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                {/* Retirement Age Slider */}
                <FormField
                  control={form.control}
                  name="retirementAge"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Retirement Age: {field.value}</FormLabel>
                      <FormControl>
                        <Slider
                          name="retirementAge"
                          value={[field.value]}
                          min={25}
                          max={75}
                          step={1}
                          onValueChange={(value: number[]) => {
                            field.onChange(value[0]);
                            void form.handleSubmit(onSubmit)();
                          }}
                          className="py-4"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              {!result && (
                <Button type="submit" className="w-full">
                  Calculate
                </Button>
              )}
              {result?.yearlyData && (
                <Card className="rounded-md shadow-none">
                  <CardHeader>
                    <CardTitle>Financial Projection</CardTitle>
                    <CardDescription>
                      Projected balance growth with your selected retirement age
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="px-2">
                    <ChartContainer
                      className="aspect-auto h-80 w-full"
                      config={{}}
                    >
                      <AreaChart
                        data={result.yearlyData}
                        margin={{ top: 10, right: 20, left: 20, bottom: 10 }}
                      >
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis
                          dataKey="year"
                          label={{
                            value: "Year",
                            position: "insideBottom",
                            offset: -10,
                          }}
                        />
                        {/* Right Y axis */}
                        <YAxis
                          yAxisId={"right"}
                          orientation="right"
                          tickFormatter={(value: number) => {
                            if (value >= 1000000) {
                              return `${(value / 1000000).toPrecision(3)}M`;
                            } else if (value >= 1000) {
                              return `${(value / 1000).toPrecision(3)}K`;
                            } else if (value <= -1000000) {
                              return `${(value / 1000000).toPrecision(3)}M`;
                            } else if (value <= -1000) {
                              return `${(value / 1000).toPrecision(3)}K`;
                            }
                            return value.toString();
                          }}
                          width={30}
                          stroke="var(--color-orange-500)"
                          tick={{}}
                        />
                        {/* Left Y axis */}
                        <YAxis
                          yAxisId="left"
                          orientation="left"
                          tickFormatter={(value: number) => {
                            if (value >= 1000000) {
                              return `${(value / 1000000).toPrecision(3)}M`;
                            } else if (value >= 1000) {
                              return `${(value / 1000).toPrecision(3)}K`;
                            }
                            return value.toString();
                          }}
                          width={30}
                          stroke="var(--color-red-600)"
                        />
                        <ChartTooltip content={tooltipRenderer} />
                        <defs>
                          <linearGradient
                            id="fillBalance"
                            x1="0"
                            y1="0"
                            x2="0"
                            y2="1"
                          >
                            <stop
                              offset="5%"
                              stopColor="var(--color-orange-500)"
                              stopOpacity={0.8}
                            />
                            <stop
                              offset="95%"
                              stopColor="var(--color-orange-500)"
                              stopOpacity={0.1}
                            />
                          </linearGradient>
                        </defs>
                        <Area
                          type="monotone"
                          dataKey="balance"
                          name="balance"
                          stroke="var(--color-orange-500)"
                          fill="url(#fillBalance)"
                          fillOpacity={0.9}
                          activeDot={{ r: 6 }}
                          yAxisId={"right"}
                          stackId={"a"}
                        />
                        <Area
                          type="step"
                          dataKey="monthlyAllowance"
                          name="allowance"
                          stroke="var(--color-red-600)"
                          fill="none"
                          activeDot={{ r: 6 }}
                          yAxisId="left"
                        />
                        {result.fireNumber && (
                          <ReferenceLine
                            y={result.fireNumber}
                            stroke="var(--primary)"
                            strokeWidth={2}
                            strokeDasharray="2 1"
                            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"}
                          />
                        )}
                        <ReferenceLine
                          x={
                            irlYear +
                            (form.getValues("retirementAge") -
                              form.getValues("currentAge"))
                          }
                          stroke="var(--primary)"
                          strokeWidth={2}
                          label={{
                            value: "Retirement",
                            position: "insideTopRight",
                          }}
                          yAxisId={"left"}
                        />
                        {result.retirementAge4percent && showing4percent && (
                          <ReferenceLine
                            x={
                              irlYear +
                              (result.retirementAge4percent -
                                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>
      </Card>
      {result && (
        <div className="mb-4 grid grid-cols-1 gap-2 md:grid-cols-2">
          {result.error ? (
            <Card className="col-span-full">
              <CardContent className="pt-6">
                <p className="text-destructive">{result.error}</p>
              </CardContent>
            </Card>
          ) : (
            <>
              <Card>
                <CardHeader>
                  <CardTitle>FIRE Number</CardTitle>
                  <CardDescription className="text-xs">
                    Capital at retirement
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-3xl font-bold">
                    {formatNumber(result.fireNumber)}
                  </p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle>Retirement Duration</CardTitle>
                  <CardDescription className="text-xs">
                    Years to enjoy your financial independence
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-3xl font-bold">
                    {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">
                        {form.getValues("lifeExpectancy") -
                          (result.retirementAge4percent ?? 0)}
                      </p>
                    </CardContent>
                  </Card>
                </>
              )}
            </>
          )}
        </div>
      )}
    </>
  );
 }
--- a/src/app/components/footer.tsx
+++ b/src/app/components/footer.tsx
@ -0,0 +1,16 @@
 export default function Footer() {
  return (
    <footer className="w-full py-8 text-center text-xs">
      <p className="text-xs">
        © {new Date().getFullYear()} InvestingFIRE. All rights reserved.{" "}
        <a
          href="https://schulze.network"
          target="_blank"
          className="text-primary hover:underline"
        >
          Hosting by Schulze.network
        </a>
      </p>
    </footer>
  );
 }
--- a/src/app/components/web-vitals.tsx
+++ b/src/app/components/web-vitals.tsx
@ -0,0 +1,77 @@
 "use client";
 import { usePlausible } from "next-plausible";
 import { useReportWebVitals } from "next/web-vitals";
 interface Metric {
  /**
   * The name of the metric (in acronym form).
   */
  name: "CLS" | "FCP" | "FID" | "INP" | "LCP" | "TTFB";
  /**
   * The current value of the metric.
   */
  value: number;
  /**
   * The rating as to whether the metric value is within the "good",
   * "needs improvement", or "poor" thresholds of the metric.
   */
  rating: "good" | "needs-improvement" | "poor";
  /**
   * The delta between the current value and the last-reported value.
   * On the first report, `delta` and `value` will always be the same.
   */
  delta: number;
  /**
   * A unique ID representing this particular metric instance. This ID can
   * be used by an analytics tool to dedupe multiple values sent for the same
   * metric instance, or to group multiple deltas together and calculate a
   * total. It can also be used to differentiate multiple different metric
   * instances sent from the same page, which can happen if the page is
   * restored from the back/forward cache (in that case new metrics object
   * get created).
   */
  id: string;
  /**
   * Any performance entries relevant to the metric value calculation.
   * The array may also be empty if the metric value was not based on any
   * entries (e.g. a CLS value of 0 given no layout shifts).
   */
  entries: PerformanceEntry[];
  /**
   * The type of navigation.
   *
   * This will be the value returned by the Navigation Timing API (or
   * `undefined` if the browser doesn't support that API), with the following
   * exceptions:
   * - 'back-forward-cache': for pages that are restored from the bfcache.
   * - 'back_forward' is renamed to 'back-forward' for consistency.
   * - 'prerender': for pages that were prerendered.
   * - 'restore': for pages that were discarded by the browser and then
   * restored by the user.
   */
  navigationType:
    | "navigate"
    | "reload"
    | "back-forward"
    | "back-forward-cache"
    | "prerender"
    | "restore";
 }
 export function WebVitals() {
  const plausible = usePlausible();
  useReportWebVitals((metric: Metric) => {
    plausible("web-vitals", {
      props: {
        [metric.name]: metric.rating,
      },
    });
  });
  return <></>;
 }
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/icon0.svg
+++ b/src/app/icon0.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1000" height="1000" viewBox="0 0 264.58 264.58"><defs><linearGradient id="b"><stop offset="0" stop-color="#fd8315"/><stop offset="1" stop-color="#fa6b14"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#f24b1b"/><stop offset="1" stop-color="#dc2f12"/></linearGradient><linearGradient xlink:href="#a" id="d" x1="172.49" x2="179.1" y1="64.48" y2="197.19" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#b" id="c" x1="118.9" x2="117.99" y1="14.21" y2="194.34" gradientUnits="userSpaceOnUse"/></defs><rect width="264.58" height="264.58" fill="#fdf2e4" ry="42.08" style="-inkscape-stroke:none"/><g stroke-linecap="round" stroke-linejoin="round" stroke-width=".13"><path fill="url(#c)" stroke="#f14a1b" d="m115.13 9.96-.26.01c-.97.11-1.29 1.02-.75 2.38a45.6 45.6 0 0 1 3.02 15.68c-.09 8.46.04 12.87-7.31 23.68s-23.16 21.9-33.96 34.66c-10.8 12.76-12.28 16.6-16.1 26.2A90.42 90.42 0 0 0 53.05 146c0 41.29 27.68 76.09 65.49 86.91 35.3-25.9 55.47-125.62 55.47-125.62s-14.45-10.54-18.57-18.89c-1.26-2.56-1.97-6.15-1.97-9.58.01-2.54 1.3-8.72 1.47-9.41a42.4 42.4 0 0 0 .94-12.14c-.07-.95-.17-1.9-.3-2.84v-.01a59.45 59.45 0 0 0-7.6-19h0a60.34 60.34 0 0 0-10.24-12.13 66.97 66.97 0 0 0-21.7-13.15 2.94 2.94 0 0 0-.92-.18z"/><path fill="url(#d)" stroke="#510a0c" d="M170.01 58.08a66.66 66.66 0 0 0-10.24 15.94 66.66 66.66 0 0 0-6.3 27.82 66.8 66.8 0 0 0 3.66 20.86h-.08l7.08 105.8s37.38-25.1 45.9-61a74.13 74.13 0 0 0 2.04-25.93c-1.34-14.35-4.35-21.67-9.85-30.3-5.5-8.62-10.36-14-17.63-22.78-6.17-7.43-9.44-18.25-10.39-28.87-.28-3.13-2.13-3.91-4.19-1.54z"/></g><path fill="#510a0c" d="M93.45 115.81h77.91c9.81 0 17.71 7.9 17.71 17.7v104.53c0 9.81-7.9 17.71-17.7 17.71H93.44c-9.81 0-17.71-7.9-17.71-17.7V133.51c0-9.81 7.9-17.71 17.7-17.71z"/><path fill="#e83c1b" d="M91.95 163.12h29.23c3.7 0 6.68 2.98 6.68 6.68v24.8c0 3.7-2.98 6.68-6.68 6.68H91.95a6.67 6.67 0 0 1-6.68-6.68v-24.8c0-3.7 2.98-6.68 6.68-6.68zm0 45.92h29.23c3.7 0 6.68 2.98 6.68 6.68v24.8c0 3.7-2.98 6.68-6.68 6.68H91.95a6.67 6.67 0 0 1-6.68-6.69v-24.8c0-3.7 2.98-6.67 6.68-6.67zm51.25-45.92h29.23c3.7 0 6.68 2.98 6.68 6.68v24.8c0 3.7-2.98 6.68-6.68 6.68H143.2a6.67 6.67 0 0 1-6.68-6.68v-24.8c0-3.7 2.98-6.68 6.68-6.68zm0 45.92h29.23c3.7 0 6.68 2.98 6.68 6.68v24.8c0 3.7-2.98 6.68-6.68 6.68H143.2a6.67 6.67 0 0 1-6.68-6.69v-24.8c0-3.7 2.98-6.67 6.68-6.67z"/><g fill="#520a0c"><path d="M148.74 179.98h18.29a2.41 2.41 0 1 1 0 4.84h-18.29a2.41 2.41 0 1 1 0-4.84zm-51.54.04h18.29a2.41 2.41 0 1 1 0 4.83h-18.3a2.41 2.41 0 1 1 0-4.83z"/><path d="M108.76 173.3v18.28a2.41 2.41 0 1 1-4.84 0V173.3a2.41 2.41 0 1 1 4.84 0zm-10.59 59.18 12.93-12.93a2.41 2.41 0 1 1 3.42 3.42l-12.93 12.93a2.41 2.41 0 1 1-3.42-3.42z"/><path d="m101.59 219.55 12.93 12.93a2.41 2.41 0 1 1-3.42 3.42l-12.93-12.93a2.41 2.41 0 1 1 3.42-3.42zm47.15 1.49h18.29a2.41 2.41 0 1 1 0 4.84h-18.29a2.41 2.41 0 1 1 0-4.84zm0 10.73h18.29a2.41 2.41 0 1 1 0 4.84h-18.29a2.41 2.41 0 1 1 0-4.84z"/></g><path fill="#fcf2e4" d="M92.35 125.2h79.67a7.07 7.07 0 0 1 7.09 7.1v14.36a7.07 7.07 0 0 1-7.09 7.1H92.35a7.07 7.07 0 0 1-7.08-7.1V132.3a7.07 7.07 0 0 1 7.08-7.09z"/></svg>
--- a/src/app/icon1.png
+++ b/src/app/icon1.png
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -0,0 +1,41 @@
 import "@/styles/globals.css";
 import PlausibleProvider from "next-plausible";
 import { type Metadata, type Viewport } from "next";
 import { Geist } from "next/font/google";
 import { WebVitals } from "./components/web-vitals";
 export const viewport: Viewport = {
  themeColor: [{ color: "oklch(0.97 0.0228 95.96)" }],
 };
 export const metadata: Metadata = {
  title: "InvestingFIRE | Finance and Retirement Calculator",
  description:
    "Achieve Financial Independence & Early Retirement! Plan your FIRE journey with the InvestingFIRE calculator and get personalized projections in buttersmooth graphs.",
 };
 const geist = Geist({
  subsets: ["latin"],
  variable: "--font-geist-sans",
 });
 export default function RootLayout({
  children,
 }: Readonly<{ children: React.ReactNode }>) {
  return (
    <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>
    </html>
  );
 }
--- a/src/app/manifest.json
+++ b/src/app/manifest.json
@ -0,0 +1,21 @@
 {
  "name": "InvestingFIRE",
  "short_name": "FIRE",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#fdf2e4",
  "background_color": "#fdf2e4",
  "display": "standalone"
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -0,0 +1,396 @@
 import Image from "next/image";
 import FireCalculatorForm from "./components/FireCalculatorForm";
 import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
 } from "@/components/ui/accordion";
 import Footer from "./components/footer";
 import BackgroundPattern from "./components/BackgroundPattern";
 export default function HomePage() {
  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="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-gradient-to-r bg-clip-text text-5xl font-extrabold tracking-tight text-transparent drop-shadow-md sm:text-[5rem]">
            InvestingFIRE
          </h1>
        </div>
        <p className="text-primary-foreground/90 text-xl font-semibold md:text-2xl">
          The #1 FIRE Calculator
        </p>
        <div className="mt-8 w-full max-w-2xl">
          <FireCalculatorForm />
        </div>
      </div>
      {/* Added SEO Content Sections */}
      <div className="z-10 mx-auto max-w-2xl py-12 text-left">
        <section className="mb-12">
          <h2 className="mb-4 text-3xl font-bold">
            What Is FIRE? Understanding Financial Independence and Early
            Retirement
          </h2>
          <p className="mb-4 text-lg leading-relaxed">
            FIRE stands for{" "}
            <strong>Financial Independence, Retire Early</strong>. It&apos;s a
            lifestyle movement built around two core ideas:
          </p>
          <ul className="mb-4 ml-6 list-disc space-y-2 text-lg">
            <li>
              <strong>Aggressive saving & investing</strong>—often 50%+ of
              income—so your capital grows rapidly.
            </li>
            <li>
              <strong>Passive-income coverage</strong>—when your investment
              returns exceed your living expenses, you gain freedom from a
              traditional 9-5.
            </li>
          </ul>
          <p className="text-lg leading-relaxed">
            By reaching your personal <em>FIRE Number</em>—the nest egg needed
            to cover your inflation-adjusted spending—you unlock the option to
            step away from a daily paycheck and pursue passion projects, travel,
            family, or anything else. This calculator helps you simulate your
            journey, estimate how much you need, and visualize both your
            accumulation phase and your retirement withdrawals over time.
          </p>
        </section>
        <section className="mb-12">
          <h2 className="mb-4 text-3xl font-bold">
            How This FIRE Calculator Provides Investing Insights
          </h2>
          <p className="mb-4 text-lg leading-relaxed">
            Our interactive tool goes beyond a simple “25x annual spending”
            rule. It runs a <strong>year-by-year simulation</strong> of your
            portfolio, combining:
          </p>
          <ul className="mb-4 ml-6 list-disc space-y-2 text-lg">
            <li>
              <strong>Starting Capital</strong>—your current invested balance
            </li>
            <li>
              <strong>Monthly Savings</strong>—ongoing contributions to your
              portfolio
            </li>
            <li>
              <strong>Expected Annual Growth Rate (CAGR)</strong>—compounding
              returns before inflation
            </li>
            <li>
              <strong>Annual Inflation Rate</strong>—to inflate your target
              withdrawal each year
            </li>
            <li>
              <strong>Desired Monthly Allowance</strong>—today&apos;s-value
              spending goal
            </li>
            <li>
              <strong>Retirement Age & Life Expectancy</strong>—defines your
              accumulation horizon and payout period
            </li>
          </ul>
          <p className="text-lg leading-relaxed">Key features:</p>
          <ul className="mb-4 ml-6 list-disc space-y-2 text-lg">
            <li>
              <strong>Real-time calculation</strong>—as you tweak any input,
              your FIRE Number and chart update instantly.
            </li>
            <li>
              <strong>Interactive chart</strong> with area plots for both{" "}
              <em>portfolio balance</em> and{" "}
              <em>inflation-adjusted allowance</em>, plus reference lines
              showing your retirement date and required FIRE Number.
            </li>
            <li>
              <strong>Custom simulation</strong>—switches from accumulation
              (adding savings) to retirement (withdrawing allowance),
              compounding each year based on your growth rate.
            </li>
          </ul>
          <p className="text-lg leading-relaxed">
            With this level of granularity, you can confidently experiment with
            savings rate, target retirement age, and investment assumptions to
            discover how small tweaks speed up or delay your path to financial
            independence.
          </p>
        </section>
        <section className="mb-12">
          <h2 className="mb-4 text-3xl font-bold">
            FIRE & Investing Frequently Asked Questions (FAQ)
          </h2>
          <Accordion type="single" collapsible className="w-full">
            <AccordionItem value="item-1">
              <AccordionTrigger className="text-xl font-semibold">
                What methodology does this calculator use?
              </AccordionTrigger>
              <AccordionContent className="text-lg leading-relaxed">
                We run a multi-year projection in two phases:
                <ol className="ml-6 list-decimal space-y-1">
                  <li>
                    <strong>Accumulation:</strong> Your balance grows by CAGR
                    and you add monthly savings.
                  </li>
                  <li>
                    <strong>Retirement:</strong> The balance continues
                    compounding, but you withdraw an inflation-adjusted monthly
                    allowance.
                  </li>
                </ol>
                The result: a precise estimate of the capital you&apos;ll have
                at retirement (your “FIRE Number”) and how long it will last
                until your chosen life expectancy.
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-2">
              <AccordionTrigger className="text-xl font-semibold">
                Why isn&apos;t this just the 4% rule?
              </AccordionTrigger>
              <AccordionContent className="text-lg leading-relaxed">
                The 4% rule is a useful starting point (25× annual spending),
                but it assumes a fixed withdrawal rate with inflation
                adjustments and doesn&apos;t model ongoing savings or dynamic
                market returns. Our calculator simulates each year&apos;s
                growth, contributions, and inflation-indexed withdrawals to give
                you a tailored picture.
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-3">
              <AccordionTrigger className="text-xl font-semibold">
                How do I choose a realistic growth rate?
              </AccordionTrigger>
              <AccordionContent className="text-lg leading-relaxed">
                Historically, a diversified portfolio of equities and bonds has
                returned around 7-10% per year before inflation. We recommend
                starting around 6-8% (net of fees), then running “what-if”
                scenarios—5% on the conservative side, 10% on the aggressive
                side—to see how they affect your timeline.
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-4">
              <AccordionTrigger className="text-xl font-semibold">
                How does inflation factor into my FIRE Number?
              </AccordionTrigger>
              <AccordionContent className="text-lg leading-relaxed">
                Cost of living rises. To maintain today&apos;s lifestyle, your
                monthly allowance must grow each year by your inflation rate.
                This calculator automatically inflates your desired monthly
                spending and subtracts it from your portfolio during retirement,
                ensuring your FIRE Number keeps pace with rising expenses.
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-5">
              <AccordionTrigger className="text-xl font-semibold">
                Can I really retire early with FIRE?
              </AccordionTrigger>
              <AccordionContent className="text-lg leading-relaxed">
                Early retirement is achievable with disciplined saving, smart
                investing, and realistic assumptions. This tool helps you set
                targets, visualize outcomes, and adjust inputs—so you can build
                confidence in your plan and make informed trade-offs between
                lifestyle, risk, and timeline.
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-6">
              <AccordionTrigger className="text-xl font-semibold">
                How should I use this calculator effectively?
              </AccordionTrigger>
              <AccordionContent className="text-lg leading-relaxed">
                <ul className="ml-6 list-disc space-y-1">
                  <li>
                    Start with your actual numbers (capital, savings, age).
                  </li>
                  <li>
                    Set conservative - mid - aggressive growth rates to bound
                    possibilities.
                  </li>
                  <li>
                    Slide your retirement age to explore “early” vs.
                    “traditional” scenarios.
                  </li>
                  <li>
                    Review the chart—especially the reference lines—to see when
                    you hit FI and how withdrawals impact your balance.
                  </li>
                  <li>
                    Experiment with higher savings rates or lower target
                    spending to accelerate your path.
                  </li>
                </ul>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </section>
        {/* Optional: Add a section for relevant resources/links here */}
        <section className="mb-12">
          <h2 className="mb-4 text-3xl font-bold">
            FIRE Journey & Investing Resources
          </h2>
          <p className="mb-6 text-lg leading-relaxed">
            Ready to deepen your knowledge and build a bullet-proof plan? Below
            are some of our favorite blogs, books, tools, and communities for
            financial independence and smart investing.
          </p>
          <div className="bg-foreground my-8 rounded-md p-4 text-lg">
            <p className="font-semibold">Getting Started with FIRE:</p>
            <ol className="ml-6 list-decimal space-y-1">
              <li>
                Run your first projection above to find your target FIRE Number.
              </li>
              <li>Identify areas to boost savings or reduce expenses.</li>
              <li>
                Study index-fund strategies and low-cost investing advice.
              </li>
              <li>
                Join{" "}
                <a
                  href="https://www.reddit.com/r/Fire/"
                  target="_blank"
                  className="text-primary hover:underline"
                >
                  supportive communities like r/Fire
                </a>{" "}
                to learn from real journeys.
              </li>
            </ol>
          </div>
          <div className="grid gap-8 md:grid-cols-2">
            <div>
              <h3 className="mb-3 text-xl font-semibold">Blogs & Websites</h3>
              <ul className="ml-6 list-disc space-y-2 text-lg">
                <li>
                  <a
                    href="https://www.mrmoneymustache.com/"
                    target="_blank"
                    className="text-primary hover:underline"
                  >
                    Mr. Money Mustache
                  </a>{" "}
                  - Hardcore frugality & early retirement success stories.
                </li>
                <li>
                  <a
                    href="https://www.playingwithfire.co/"
                    target="_blank"
                    className="text-primary hover:underline"
                  >
                    Playing With FIRE
                  </a>{" "}
                  - Community resources & real-life case studies.
                </li>
                <li>
                  <a
                    href="https://www.reddit.com/r/Fire/"
                    target="_blank"
                    className="text-primary hover:underline"
                  >
                    r/Fire
                  </a>{" "}
                  - Active forum for questions, tips, and support.
                </li>
              </ul>
            </div>
            <div>
              <h3 className="mb-3 text-xl font-semibold">Books & Podcasts</h3>
              <ul className="ml-6 list-disc space-y-2 text-lg">
                <li>
                  <a
                    href="https://www.amazon.com/Your-Money-Life-Transforming-Relationship/dp/0143115766"
                    target="_blank"
                    className="text-primary hover:underline"
                  >
                    Your Money or Your Life
                  </a>{" "}
                  - The classic guide to aligning money with values.
                </li>
                <li>
                  <a
                    href="https://podcasts.apple.com/us/podcast/biggerpockets-money-podcast/id1330225136"
                    target="_blank"
                    className="text-primary hover:underline"
                  >
                    BiggerPockets Money Podcast
                  </a>{" "}
                  - Interviews on FIRE strategies and wealth building.
                </li>
                <li>
                  <a
                    href="https://podcasts.apple.com/us/podcast/can-you-retire-now-this-fire-calculator-will-tell-you/id1330225136?i=1000683436292"
                    target="_blank"
                    className="text-primary hover:underline"
                  >
                    InvestingFIRE Calculator Demo
                  </a>{" "}
                  - Deep dive on how interactive projections can guide your
                  plan.
                </li>
              </ul>
            </div>
            <div>
              <h3 className="mb-3 text-xl font-semibold">
                Additional Calculators & Tools
              </h3>
              <ul className="ml-6 list-disc space-y-2 text-lg">
                <li>
                  <a
                    href="https://ghostfol.io"
                    target="_blank"
                    className="text-primary hover:underline"
                  >
                    Ghostfolio
                  </a>{" "}
                  - Wealth management application for individuals.
                </li>
                <li>
                  <a
                    href="https://walletburst.com/tools/coast-fire-calculator/"
                    target="_blank"
                    className="text-primary hover:underline"
                  >
                    Coast FIRE Calculator
                  </a>{" "}
                  - When you “max out” early contributions but let compounding
                  do the rest.
                </li>
                <li>
                  <a
                    href="https://www.investor.gov/financial-tools-calculators/calculators/compound-interest-calculator"
                    target="_blank"
                    className="text-primary hover:underline"
                  >
                    Compound Interest Calculator
                  </a>{" "}
                  - Explore the power of growth rates in isolation.
                </li>
              </ul>
            </div>
          </div>
        </section>
      </div>
      <Footer />
    </main>
  );
 }
--- a/src/app/robots.ts
+++ b/src/app/robots.ts
@ -0,0 +1,11 @@
 import type { MetadataRoute } from "next";
 export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
    },
    sitemap: "https://investingfire.com/sitemap.xml",
  };
 }
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@ -0,0 +1,13 @@
 import { BASE_URL } from "@/lib/constants";
 import { type MetadataRoute } from "next";
 export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: BASE_URL,
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
  ];
 }
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@ -0,0 +1,69 @@
 "use client";
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 function Accordion({
  ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }
 function AccordionItem({
  className,
  ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn(
        "border-primary-foreground/20 border-b last:border-b-0",
        className,
      )}
      {...props}
    />
  );
 }
 function AccordionTrigger({
  className,
  children,
  ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
          className,
        )}
        {...props}
      >
        {children}
        <ChevronDownIcon className="text-primary-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  );
 }
 function AccordionContent({
  className,
  children,
  ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
  return (
    <AccordionPrimitive.Content
      data-slot="accordion-content"
      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
      {...props}
    >
      <div className={cn("pt-0 pb-4", className)}>{children}</div>
    </AccordionPrimitive.Content>
  );
 }
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -0,0 +1,59 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
        destructive:
          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
        secondary:
          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
        ghost:
          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
        icon: "size-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
 );
 function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
 }: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
  }) {
  const Comp = asChild ? Slot : "button";
  return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  );
 }
 export { Button, buttonVariants };
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@ -0,0 +1,92 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
 function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card"
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className,
      )}
      {...props}
    />
  );
 }
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        className,
      )}
      {...props}
    />
  );
 }
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-title"
      className={cn("leading-none font-semibold", className)}
      {...props}
    />
  );
 }
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  );
 }
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className,
      )}
      {...props}
    />
  );
 }
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn("px-6", className)}
      {...props}
    />
  );
 }
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
      {...props}
    />
  );
 }
 export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
 };
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@ -0,0 +1,357 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 "use client";
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import { cn } from "@/lib/utils";
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const;
 export type ChartConfig = Record<
  string,
  {
    label?: React.ReactNode;
    icon?: React.ComponentType;
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
 >;
 type ChartContextProps = {
  config: ChartConfig;
 };
 const ChartContext = React.createContext<ChartContextProps | null>(null);
 function useChart() {
  const context = React.useContext(ChartContext);
  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />");
  }
  return context;
 }
 function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
 }: React.ComponentProps<"div"> & {
  config: ChartConfig;
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"];
 }) {
  const uniqueId = React.useId();
  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className,
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  );
 }
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme ?? config.color,
  );
  if (!colorConfig.length) {
    return null;
  }
  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
      itemConfig.color;
    return color ? `  --color-${key}: ${color};` : null;
  })
  .join("\n")}
 }
 `,
          )
          .join("\n"),
      }}
    />
  );
 };
 const ChartTooltip = RechartsPrimitive.Tooltip;
 function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
 }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean;
    hideIndicator?: boolean;
    indicator?: "line" | "dot" | "dashed";
    nameKey?: string;
    labelKey?: string;
  }) {
  const { config } = useChart();
  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null;
    }
    const [item] = payload;
    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
    const itemConfig = getPayloadConfigFromPayload(config, item, key);
    const value =
      !labelKey && typeof label === "string"
        ? (config[label]?.label ?? label)
        : itemConfig?.label;
    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      );
    }
    if (!value) {
      return null;
    }
    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ]);
  if (!active || !payload?.length) {
    return null;
  }
  const nestLabel = payload.length === 1 && indicator !== "dot";
  return (
    <div
      className={cn(
        "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 ?? 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
            color ?? item.payload.fill ?? item.color;
          return (
            <div
              key={item.dataKey}
              className={cn(
                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                indicator === "dot" && "items-center",
              )}
            >
              {formatter && item?.value !== undefined && item.name ? (
                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                formatter(item.value, item.name, item, index, item.payload)
              ) : (
                <>
                  {itemConfig?.icon ? (
                    <itemConfig.icon />
                  ) : (
                    !hideIndicator && (
                      <div
                        className={cn(
                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                          {
                            "h-2.5 w-2.5": indicator === "dot",
                            "w-1": indicator === "line",
                            "w-0 border-[1.5px] border-dashed bg-transparent":
                              indicator === "dashed",
                            "my-0.5": nestLabel && indicator === "dashed",
                          },
                        )}
                        style={
                          {
                            "--color-bg": indicatorColor,
                            "--color-border": indicatorColor,
                          } as React.CSSProperties
                        }
                      />
                    )
                  )}
                  <div
                    className={cn(
                      "flex flex-1 justify-between leading-none",
                      nestLabel ? "items-end" : "items-center",
                    )}
                  >
                    <div className="grid gap-1.5">
                      {nestLabel ? tooltipLabel : null}
                      <span className="text-muted-foreground">
                        {itemConfig?.label ?? item.name}
                      </span>
                    </div>
                    {item.value && (
                      <span className="text-foreground font-mono font-medium tabular-nums">
                        {item.value.toLocaleString()}
                      </span>
                    )}
                  </div>
                </>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
 }
 const ChartLegend = RechartsPrimitive.Legend;
 function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
 }: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean;
    nameKey?: string;
  }) {
  const { config } = useChart();
  if (!payload?.length) {
    return null;
  }
  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className,
      )}
    >
      {payload.map((item) => {
        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
        const key = `${nameKey ?? item.dataKey ?? "value"}`;
        const itemConfig = getPayloadConfigFromPayload(config, item, key);
        return (
          <div
            key={item.value}
            className={cn(
              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
            )}
          >
            {itemConfig?.icon && !hideIcon ? (
              <itemConfig.icon />
            ) : (
              <div
                className="h-2 w-2 shrink-0 rounded-[2px]"
                style={{
                  backgroundColor: item.color,
                }}
              />
            )}
            {itemConfig?.label}
          </div>
        );
      })}
    </div>
  );
 }
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string,
 ) {
  if (typeof payload !== "object" || payload === null) {
    return undefined;
  }
  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined;
  let configLabelKey: string = key;
  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string;
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string;
  }
  return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
 };
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@ -0,0 +1,164 @@
 "use client";
 import * as React from "react";
 import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import {
  Controller,
  FormProvider,
  useFormContext,
  useFormState,
  type ControllerProps,
  type FieldPath,
  type FieldValues,
 } from "react-hook-form";
 import { cn } from "@/lib/utils";
 import { Label } from "@/components/ui/label";
 const Form = FormProvider;
 type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
  name: TName;
 };
 const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue,
 );
 const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
  ...props
 }: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  );
 };
 const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext);
  const itemContext = React.useContext(FormItemContext);
  const { getFieldState } = useFormContext();
  const formState = useFormState({ name: fieldContext.name });
  const fieldState = getFieldState(fieldContext.name, formState);
  const { id } = itemContext;
  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  };
 };
 type FormItemContextValue = {
  id: string;
 };
 const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue,
 );
 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
  const id = React.useId();
  return (
    <FormItemContext.Provider value={{ id }}>
      <div
        data-slot="form-item"
        className={cn("grid gap-2", className)}
        {...props}
      />
    </FormItemContext.Provider>
  );
 }
 function FormLabel({
  className,
  ...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
  const { error, formItemId } = useFormField();
  return (
    <Label
      data-slot="form-label"
      data-error={!!error}
      className={cn("data-[error=true]:text-destructive", className)}
      htmlFor={formItemId}
      {...props}
    />
  );
 }
 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
  const { error, formItemId, formDescriptionId, formMessageId } =
    useFormField();
  return (
    <Slot
      data-slot="form-control"
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  );
 }
 function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
  const { formDescriptionId } = useFormField();
  return (
    <p
      data-slot="form-description"
      id={formDescriptionId}
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  );
 }
 function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
  const { error, formMessageId } = useFormField();
  const body = error ? String(error?.message ?? "") : props.children;
  if (!body) {
    return null;
  }
  return (
    <p
      data-slot="form-message"
      id={formMessageId}
      className={cn("text-destructive text-sm", className)}
      {...props}
    >
      {body}
    </p>
  );
 }
 export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
 };
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@ -0,0 +1,21 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
        className,
      )}
      {...props}
    />
  );
 }
 export { Input };
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@ -0,0 +1,24 @@
 "use client";
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cn } from "@/lib/utils";
 function Label({
  className,
  ...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className,
      )}
      {...props}
    />
  );
 }
 export { Label };
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@ -0,0 +1,185 @@
 "use client";
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 function Select({
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 function SelectGroup({
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 function SelectValue({
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 function SelectTrigger({
  className,
  size = "default",
  children,
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: "sm" | "default";
 }) {
  return (
    <SelectPrimitive.Trigger
      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",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  );
 }
 function SelectContent({
  className,
  children,
  position = "popper",
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <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-[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,
        )}
        position={position}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            "p-1",
            position === "popper" &&
              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  );
 }
 function SelectLabel({
  className,
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
      {...props}
    />
  );
 }
 function SelectItem({
  className,
  children,
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <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",
        className,
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  );
 }
 function SelectSeparator({
  className,
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
      {...props}
    />
  );
 }
 function SelectScrollUpButton({
  className,
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1",
        className,
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  );
 }
 function SelectScrollDownButton({
  className,
  ...props
 }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1",
        className,
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  );
 }
 export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
 };
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@ -0,0 +1,63 @@
 "use client";
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "@/lib/utils";
 function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  ...props
 }: React.ComponentProps<typeof SliderPrimitive.Root>) {
  const _values = React.useMemo(
    () =>
      Array.isArray(value)
        ? value
        : Array.isArray(defaultValue)
          ? defaultValue
          : [min, max],
    [value, defaultValue, min, max],
  );
  return (
    <SliderPrimitive.Root
      data-slot="slider"
      defaultValue={defaultValue}
      value={value}
      min={min}
      max={max}
      className={cn(
        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
        className,
      )}
      {...props}
    >
      <SliderPrimitive.Track
        data-slot="slider-track"
        className={cn(
          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
        )}
      >
        <SliderPrimitive.Range
          data-slot="slider-range"
          className={cn(
            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
          )}
        />
      </SliderPrimitive.Track>
      {Array.from({ length: _values.length }, (_, index) => (
        <SliderPrimitive.Thumb
          data-slot="slider-thumb"
          key={index}
          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
        />
      ))}
    </SliderPrimitive.Root>
  );
 }
 export { Slider };
--- a/src/env.js
+++ b/src/env.js
@ -0,0 +1,40 @@
 import { createEnv } from "@t3-oss/env-nextjs";
 import { z } from "zod";
 export const env = createEnv({
  /**
   * Specify your server-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars.
   */
  server: {
    NODE_ENV: z.enum(["development", "test", "production"]),
  },
  /**
   * Specify your client-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars. To expose them to the client, prefix them with
   * `NEXT_PUBLIC_`.
   */
  client: {
    // NEXT_PUBLIC_CLIENTVAR: z.string(),
  },
  /**
   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
   * middlewares) or client-side so we need to destruct manually.
   */
  runtimeEnv: {
    NODE_ENV: process.env.NODE_ENV,
    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
  },
  /**
   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
   * useful for Docker builds.
   */
  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
  /**
   * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
   * `SOME_VAR=''` will throw an error.
   */
  emptyStringAsUndefined: true,
 });
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@ -0,0 +1 @@
 export const BASE_URL = "https://investingfire.com/";
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -0,0 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
 }
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -0,0 +1,132 @@
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme {
  --font-sans:
    var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
 }
 :root {
  --radius: 0.625rem;
  --background: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --foreground: oklch(0.39 0.0215 96.47); /* black olive */
  --card: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --card-foreground: oklch(0.39 0.0215 96.47); /* black olive */
  --popover: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --popover-foreground: oklch(0.39 0.0215 96.47); /* black olive */
  --primary: oklch(0.67 0.0763 198.81); /* verdigris */
  --primary-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --secondary: oklch(0.49 0.1326 259.29); /* denim */
  --secondary-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --muted: oklch(0.67 0.0763 198.81 / 20%); /* verdigris with opacity */
  --muted-foreground: oklch(
    0.39 0.0215 96.47 / 80%
  ); /* black olive with opacity */
  --accent: oklch(0.49 0.1326 259.29); /* denim */
  --accent-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --destructive: oklch(0.33 0.1316 336.24); /* palatinate */
  --border: oklch(0.67 0.0763 198.81 / 30%); /* verdigris with opacity */
  --input: oklch(0.67 0.0763 198.81 / 30%); /* verdigris with opacity */
  --ring: oklch(0.67 0.0763 198.81); /* verdigris */
  --chart-1: oklch(0.67 0.0763 198.81); /* verdigris */
  --chart-2: oklch(0.49 0.1326 259.29); /* denim */
  --chart-3: oklch(0.33 0.1316 336.24); /* palatinate */
  --chart-4: oklch(0.39 0.0215 96.47); /* black olive */
  --chart-5: oklch(0.67 0.0763 198.81 / 70%); /* verdigris with opacity */
  --sidebar: oklch(0.49 0.1326 259.29 / 10%); /* denim with opacity */
  --sidebar-foreground: oklch(0.39 0.0215 96.47); /* black olive */
  --sidebar-primary: oklch(0.67 0.0763 198.81); /* verdigris */
  --sidebar-primary-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --sidebar-accent: oklch(0.49 0.1326 259.29); /* denim */
  --sidebar-accent-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --sidebar-border: oklch(
    0.67 0.0763 198.81 / 20%
  ); /* verdigris with opacity */
  --sidebar-ring: oklch(0.67 0.0763 198.81); /* verdigris */
 }
 .dark {
  --background: oklch(0.39 0.0215 96.47); /* black olive */
  --foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --card: oklch(0.39 0.0215 96.47 / 80%); /* black olive with opacity */
  --card-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --popover: oklch(0.39 0.0215 96.47); /* black olive */
  --popover-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --primary: oklch(0.67 0.0763 198.81); /* verdigris */
  --primary-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --secondary: oklch(0.49 0.1326 259.29); /* denim */
  --secondary-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --muted: oklch(0.39 0.0215 96.47 / 70%); /* black olive with opacity */
  --muted-foreground: oklch(0.67 0.0763 198.81); /* verdigris */
  --accent: oklch(0.49 0.1326 259.29); /* denim */
  --accent-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --destructive: oklch(0.33 0.1316 336.24); /* palatinate */
  --border: oklch(0.97 0.0228 95.96 / 20%); /* cosmic latte with opacity */
  --input: oklch(0.97 0.0228 95.96 / 20%); /* cosmic latte with opacity */
  --ring: oklch(0.67 0.0763 198.81); /* verdigris */
  --chart-1: oklch(0.67 0.0763 198.81); /* verdigris */
  --chart-2: oklch(0.49 0.1326 259.29); /* denim */
  --chart-3: oklch(0.33 0.1316 336.24); /* palatinate */
  --chart-4: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --chart-5: oklch(0.67 0.0763 198.81 / 70%); /* verdigris with opacity */
  --sidebar: oklch(0.39 0.0215 96.47 / 90%); /* black olive with opacity */
  --sidebar-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --sidebar-primary: oklch(0.67 0.0763 198.81); /* verdigris */
  --sidebar-primary-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --sidebar-accent: oklch(0.49 0.1326 259.29); /* denim */
  --sidebar-accent-foreground: oklch(0.97 0.0228 95.96); /* cosmic latte */
  --sidebar-border: oklch(
    0.97 0.0228 95.96 / 10%
  ); /* cosmic latte with opacity */
  --sidebar-ring: oklch(0.67 0.0763 198.81); /* verdigris */
 }
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,42 @@
 {
  "compilerOptions": {
    /* Base Options: */
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "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/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.cjs",
    "**/*.js",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
 }
Author	SHA1	Message	Date
Renovate Bot	863d4f3268	chore(deps): update dependency typescript-eslint to v8.33.0 All checks were successful Lint / Lint and Typecheck (push) Successful in 45s Details	2025-05-31 09:44:14 +00:00
Renovate Bot	9719383056	chore(deps): update dependency eslint to v9.28.0	2025-05-31 09:02:47 +00:00
Renovate Bot	6c77a71a79	fix(deps): update nextjs monorepo to v15.3.3	2025-05-31 08:02:53 +00:00
Renovate Bot	b54c8e3d2b	fix(deps): update dependency zod to v3.25.42	2025-05-31 07:03:51 +00:00
Renovate Bot	1cffa649d6	fix(deps): update dependency @t3-oss/env-nextjs to v0.13.6	2025-05-31 06:04:06 +00:00
Renovate Bot	7c38ed2a60	chore(deps): update tailwindcss monorepo to v4.1.8	2025-05-31 05:04:09 +00:00
Renovate Bot	7a69e9ff45	chore(deps): update dependency tw-animate-css to v1.3.2	2025-05-31 04:03:47 +00:00
Renovate Bot	e71f28d8c2	chore(deps): update dependency prettier-plugin-tailwindcss to v0.6.12	2025-05-31 03:03:56 +00:00
Renovate Bot	d26a3252cc	chore(deps): update dependency postcss to v8.5.4	2025-05-31 02:04:10 +00:00
Renovate Bot	2a7182625b	chore(deps): update dependency @types/react to v19.1.6	2025-05-31 01:04:46 +00:00
Renovate Bot	d7cbcf3707	chore(deps): update dependency @types/node to v22.15.29	2025-05-31 00:03:33 +00:00
Renovate Bot	374cb17eeb	fix(deps): update dependency zod to v3.25.28	2025-05-24 04:02:38 +00:00
Renovate Bot	d5f8c84f13	fix(deps): update radix-ui-primitives monorepo	2025-05-24 03:02:37 +00:00
Renovate Bot	d116e01f8d	chore(deps): update npm to v11.4.1	2025-05-24 02:02:50 +00:00
Renovate Bot	a297b8a4aa	chore(deps): update dependency @types/react to v19.1.5	2025-05-24 01:03:08 +00:00
Renovate Bot	acb4e5bc51	chore(deps): update dependency @types/node to v22.15.21	2025-05-24 00:02:25 +00:00
Felix Schulze	606512fad8	logo priority and unoptimised	2025-05-22 16:23:24 +02:00
Renovate Bot	a5d07b8b3e	fix(deps): update dependency lucide-react to ^0.511.0	2025-05-17 08:01:55 +00:00
Renovate Bot	0a7a51ef64	chore(deps): update npm to v11.4.0	2025-05-17 07:02:05 +00:00
Renovate Bot	2d5f9b051d	chore(deps): update dependency tw-animate-css to v1.3.0	2025-05-17 06:02:26 +00:00
Renovate Bot	d83ef08f7c	chore(deps): update dependency eslint to v9.27.0	2025-05-17 05:02:40 +00:00
Renovate Bot	7362a6545b	fix(deps): update dependency react-hook-form to v7.56.4	2025-05-17 04:02:47 +00:00
Renovate Bot	553f5155c7	chore(deps): update tailwindcss monorepo to v4.1.7	2025-05-17 03:03:01 +00:00
Renovate Bot	44a98fe001	chore(deps): update react monorepo	2025-05-17 02:03:11 +00:00
Renovate Bot	0736907b84	chore(deps): update dependency typescript-eslint to v8.32.1	2025-05-17 01:03:20 +00:00
Renovate Bot	4f4a74dc72	chore(deps): update dependency @types/node to v22.15.18	2025-05-17 00:02:29 +00:00
Renovate Bot	6387e96bf7	fix(deps): update dependency tailwind-merge to v3.3.0	2025-05-11 21:01:27 +00:00
Felix Schulze	96f95e7b08	color y axis and fix type error closes #3	2025-05-10 22:13:30 +02:00
Renovate Bot	87ea9e1ecc	fix(deps): update dependency lucide-react to ^0.509.0	2025-05-10 02:02:24 +00:00
Renovate Bot	51add59741	chore(deps): update tailwindcss monorepo to v4.1.6	2025-05-10 01:03:13 +00:00
Renovate Bot	29d42c0f22	chore(deps): update dependency @types/node to v22.15.17	2025-05-10 00:02:10 +00:00
Renovate Bot	e36c062b9c	fix(deps): update dependency lucide-react to ^0.508.0	2025-05-08 14:13:41 +02:00
Renovate Bot	8273fce712	chore(deps): update dependency typescript-eslint to v8.32.0	2025-05-08 14:13:36 +02:00
Renovate Bot	820d7f4883	fix(deps): update radix-ui-primitives monorepo	2025-05-08 14:13:25 +02:00
Renovate Bot	6d487f8792	fix(deps): update nextjs monorepo to v15.3.2	2025-05-08 14:13:19 +02:00
Renovate Bot	f4ab9d3745	fix(deps): update dependency react-hook-form to v7.56.3	2025-05-08 14:13:14 +02:00
Renovate Bot	e1da910a25	chore(deps): update dependency @types/react to v19.1.3	2025-05-08 14:13:03 +02:00
Renovate Bot	225f9ef1ab	chore(deps): update dependency @types/node to v22.15.16	2025-05-08 11:11:52 +00:00
Felix Schulze	c071b9c052	improve SEO, add robots	2025-05-07 14:37:34 +02:00
Felix Schulze	11e1e31ac5	update default inflation rate to average inflation	2025-05-07 14:10:33 +02:00
Felix Schulze	8ac784f49b	update favicon.ico	2025-05-05 13:51:55 +02:00
Renovate Bot	0b0e6c1c9a	fix(deps): update dependency lucide-react to ^0.507.0	2025-05-05 10:33:47 +00:00
Renovate Bot	c3168220fe	chore(deps): update dependency tw-animate-css to v1.2.9	2025-05-05 10:11:30 +00:00
Renovate Bot	229f2d7b56	chore(deps): update dependency @types/react-dom to v19.1.3	2025-05-05 10:01:35 +00:00
Renovate Bot	a86eddda31	chore(deps): pin dependencies	2025-05-05 09:55:30 +00:00
Felix Schulze	0a96a94cf3	move workflow check.yml	2025-05-05 11:51:58 +02:00
Renovate Bot	0e6086a597	chore(deps): pin dependencies	2025-05-05 11:49:10 +02:00
Felix Schulze	dafdd0d154	chore(deps): update tailwindcss monorepo to ^4.1.4	2025-05-05 11:37:00 +02:00
Renovate Bot	b9b52377e0	fix(deps): update dependency zod to v3.24.4	2025-05-05 11:35:25 +02:00
Renovate Bot	63fe8e5999	fix(deps): update dependency @t3-oss/env-nextjs to ^0.13.0	2025-05-05 11:35:19 +02:00
Renovate Bot	fc18e414cb	fix(deps): update dependency react-hook-form to v7.56.2	2025-05-05 11:34:43 +02:00
Renovate Bot	a3eda1f0db	chore(deps): update npm to v11.3.0	2025-05-05 11:33:47 +02:00
Renovate Bot	2b2b5784d1	chore(deps): update dependency eslint to ^9.26.0	2025-05-05 11:31:59 +02:00
Renovate Bot	32ef797bf6	chore(deps): update dependency @types/node to v22 (#2 ) This PR contains the following updates: \| Package \| Type \| Update \| Change \| \|---\|---\|---\|---\| \| [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/node) ([source](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node)) \| devDependencies \| major \| [`^20.14.10` -> `^22.0.0`](https://renovatebot.com/diffs/npm/@types%2fnode/20.17.32/22.15.3) \| --- ### 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 becomes conflicted, or you tick the rebase/retry checkbox. 🔕 Ignore: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- 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:eyJjcmVhdGVkSW5WZXIiOiI0MC4xLjIiLCJ1cGRhdGVkSW5WZXIiOiI0MC4xLjIiLCJ0YXJnZXRCcmFuY2giOiJtYWluIiwibGFiZWxzIjpbXX0=--> Reviewed-on: #2 Co-authored-by: Renovate Bot <renovatebot@schulze.network> Co-committed-by: Renovate Bot <renovatebot@schulze.network>	2025-05-05 11:31:04 +02:00
Felix Schulze	02761928a5	add check action	2025-05-05 11:07:25 +02:00
Felix Schulze	763c8b590d	Add Renovate bot	2025-05-05 11:02:51 +02:00
Felix Schulze	e616e8f261	Epic README	2025-05-04 20:35:39 +02:00
Felix Schulze	a0c5665941	add optional "show 4%-rule" button with extra cards and reference lines	2025-05-04 19:44:18 +02:00
Felix Schulze	d24c8b910a	funky background pattern	2025-05-04 17:25:04 +02:00
Felix Schulze	8f7ebf7b5a	sitemap	2025-05-03 18:04:34 +02:00
Felix Schulze	7c05542d5e	add theme color	2025-05-02 19:06:27 +02:00
Felix Schulze	32a0b7a0ac	rename icons again	2025-05-02 18:59:39 +02:00
Felix Schulze	c1e57577cd	fix plausible provider and favicon declaration	2025-05-02 18:55:05 +02:00
Felix Schulze	d2735a7020	change favicon names	2025-05-02 18:37:28 +02:00
Felix Schulze	4348e4bdf3	remove scripts from package	2025-05-01 20:16:26 +02:00
Felix Schulze	4026924e06	update SEO texts	2025-05-01 20:14:21 +02:00
Felix Schulze	bf9098e3e5	add footer	2025-05-01 20:13:08 +02:00
Felix Schulze	1082dc3b69	fix allowance y-axis and chart styling	2025-05-01 20:12:55 +02:00
Felix Schulze	670ed01ede	auto update on value change	2025-05-01 17:24:45 +02:00
Felix Schulze	2bc1d42cf7	break out functions from export	2025-05-01 15:56:01 +02:00
Felix Schulze	23e03c9a32	redesigned algorith, use user specified retirement age	2025-05-01 15:25:22 +02:00
Felix Schulze	fdd923cfbc	shadcn slider	2025-05-01 13:57:54 +02:00
Felix Schulze	6a6557c3bf	new strategy human algo	2025-04-30 23:17:48 +02:00
Felix Schulze	5544c2f69f	styling, graph sizing and number precision	2025-04-30 20:05:38 +02:00
Felix Schulze	24547c3087	result style	2025-04-30 19:40:53 +02:00
Felix Schulze	6a6f0ee9a5	prettier	2025-04-30 19:20:25 +02:00
Felix Schulze	439b7c395c	fix faq chevron	2025-04-30 18:12:23 +02:00
Felix Schulze	d761ac0348	add logo	2025-04-30 18:06:14 +02:00
Felix Schulze	bc08871f86	fix lint errors	2025-04-29 22:49:23 +02:00
Felix Schulze	a032a132e4	attempt new formula	2025-04-29 20:29:56 +02:00
Felix Schulze	54ed15ff25	lets not be so strict	2025-04-29 20:25:49 +02:00
Felix Schulze	cdb67cae95	Select	2025-04-29 20:15:54 +02:00
Felix Schulze	5888b46b25	tracking + web vitals	2025-04-29 20:09:37 +02:00
Felix Schulze	26ceef1740	env	2025-04-29 20:09:07 +02:00
Felix Schulze	857f1a242b	SEO	2025-04-29 19:55:15 +02:00
Felix Schulze	9531fcea99	SEO	2025-04-29 19:32:09 +02:00
Felix Schulze	2be1a6b947	fixes	2025-04-29 19:22:01 +02:00
Felix Schulze	dd40e92179	FIRE chart	2025-04-29 19:11:09 +02:00
Felix Schulze	23c2c0ea21	new algorithm	2025-04-29 18:45:58 +02:00
Felix Schulze	3660cc0310	fix and add charts	2025-04-29 18:45:41 +02:00
Felix Schulze	6018239c43	SEO	2025-04-29 18:33:19 +02:00
Felix Schulze	97fa489d6c	FIRE calculator	2025-04-29 18:32:26 +02:00
Felix Schulze	a1e9b667f3	shadcn	2025-04-29 17:46:38 +02:00
Felix Schulze	ab5eb23238	initial files	2025-04-29 17:09:04 +02:00
		`@ -0,0 +1,2 @@`
							`*.png filter=lfs diff=lfs merge=lfs -text`
							`*.ico filter=lfs diff=lfs merge=lfs -text`
		`@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1000" height="1000" viewBox="0 0 264.58 264.58"><defs><linearGradient id="b"><stop offset="0" stop-color="#fd8315"/><stop offset="1" stop-color="#fa6b14"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#f24b1b"/><stop offset="1" stop-color="#dc2f12"/></linearGradient><linearGradient xlink:href="#a" id="d" x1="172.49" x2="179.1" y1="64.48" y2="197.19" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#b" id="c" x1="118.9" x2="117.99" y1="14.21" y2="194.34" gradientUnits="userSpaceOnUse"/></defs><g stroke-linecap="round" stroke-linejoin="round" stroke-width=".13"><path fill="url(#c)" stroke="#f14a1b" d="m115.13 9.96-.26.01c-.97.11-1.29 1.02-.75 2.38a45.6 45.6 0 0 1 3.02 15.68c-.09 8.46.04 12.87-7.31 23.68s-23.16 21.9-33.96 34.66c-10.8 12.76-12.28 16.6-16.1 26.2A90.42 90.42 0 0 0 53.05 146c0 41.29 27.68 76.09 65.49 86.91 35.3-25.9 55.47-125.62 55.47-125.62s-14.45-10.54-18.57-18.89c-1.26-2.56-1.97-6.15-1.97-9.58.01-2.54 1.3-8.72 1.47-9.41a42.4 42.4 0 0 0 .94-12.14c-.07-.95-.17-1.9-.3-2.84v-.01a59.45 59.45 0 0 0-7.6-19h0a60.34 60.34 0 0 0-10.24-12.13 66.97 66.97 0 0 0-21.7-13.15 2.94 2.94 0 0 0-.92-.18z"/><path fill="url(#d)" stroke="#510a0c" d="M170.01 58.08a66.66 66.66 0 0 0-10.24 15.94 66.66 66.66 0 0 0-6.3 27.82 66.8 66.8 0 0 0 3.66 20.86h-.08l7.08 105.8s37.38-25.1 45.9-61a74.13 74.13 0 0 0 2.04-25.93c-1.34-14.35-4.35-21.67-9.85-30.3-5.5-8.62-10.36-14-17.63-22.78-6.17-7.43-9.44-18.25-10.39-28.87-.28-3.13-2.13-3.91-4.19-1.54z"/></g><path fill="#510a0c" d="M93.45 115.81h77.91c9.81 0 17.71 7.9 17.71 17.7v104.53c0 9.81-7.9 17.71-17.7 17.71H93.44c-9.81 0-17.71-7.9-17.71-17.7V133.51c0-9.81 7.9-17.71 17.7-17.71z"/><path fill="#e83c1b" d="M91.95 163.12h29.23c3.7 0 6.68 2.98 6.68 6.68v24.8c0 3.7-2.98 6.68-6.68 6.68H91.95a6.67 6.67 0 0 1-6.68-6.68v-24.8c0-3.7 2.98-6.68 6.68-6.68zm0 45.92h29.23c3.7 0 6.68 2.98 6.68 6.68v24.8c0 3.7-2.98 6.68-6.68 6.68H91.95a6.67 6.67 0 0 1-6.68-6.69v-24.8c0-3.7 2.98-6.67 6.68-6.67zm51.25-45.92h29.23c3.7 0 6.68 2.98 6.68 6.68v24.8c0 3.7-2.98 6.68-6.68 6.68H143.2a6.67 6.67 0 0 1-6.68-6.68v-24.8c0-3.7 2.98-6.68 6.68-6.68zm0 45.92h29.23c3.7 0 6.68 2.98 6.68 6.68v24.8c0 3.7-2.98 6.68-6.68 6.68H143.2a6.67 6.67 0 0 1-6.68-6.69v-24.8c0-3.7 2.98-6.67 6.68-6.67z"/><g fill="#520a0c"><path d="M148.74 179.98h18.29a2.41 2.41 0 1 1 0 4.84h-18.29a2.41 2.41 0 1 1 0-4.84zm-51.54.04h18.29a2.41 2.41 0 1 1 0 4.83h-18.3a2.41 2.41 0 1 1 0-4.83z"/><path d="M108.76 173.3v18.28a2.41 2.41 0 1 1-4.84 0V173.3a2.41 2.41 0 1 1 4.84 0zm-10.59 59.18 12.93-12.93a2.41 2.41 0 1 1 3.42 3.42l-12.93 12.93a2.41 2.41 0 1 1-3.42-3.42z"/><path d="m101.59 219.55 12.93 12.93a2.41 2.41 0 1 1-3.42 3.42l-12.93-12.93a2.41 2.41 0 1 1 3.42-3.42zm47.15 1.49h18.29a2.41 2.41 0 1 1 0 4.84h-18.29a2.41 2.41 0 1 1 0-4.84zm0 10.73h18.29a2.41 2.41 0 1 1 0 4.84h-18.29a2.41 2.41 0 1 1 0-4.84z"/></g><path fill="#fcf2e4" d="M92.35 125.2h79.67a7.07 7.07 0 0 1 7.09 7.1v14.36a7.07 7.07 0 0 1-7.09 7.1H92.35a7.07 7.07 0 0 1-7.08-7.1V132.3a7.07 7.07 0 0 1 7.08-7.09z"/></svg>
		`@ -0,0 +1 @@`
							`export const BASE_URL = "https://investingfire.com/";`