Felix Schulze
1936fdff56
All checks were successful
Lint / Lint and Typecheck (push) Successful in 54s
457 lines
20 KiB
TypeScript
457 lines
20 KiB
TypeScript
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() {
|
||
const faqData = {
|
||
"@context": "https://schema.org",
|
||
"@type": "FAQPage",
|
||
mainEntity: [
|
||
{
|
||
"@type": "Question",
|
||
name: "What methodology does this calculator use?",
|
||
acceptedAnswer: {
|
||
"@type": "Answer",
|
||
text: "We run a multi-year projection in two phases: 1. Accumulation: Your balance grows by CAGR and you add monthly savings. 2. Retirement: The balance continues compounding, but you withdraw an inflation-adjusted monthly allowance. The result: a precise estimate of the capital you'll have at retirement (your “FIRE Number”) and how long it will last until your chosen life expectancy.",
|
||
},
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
name: "Why isn't this just the 4% rule?",
|
||
acceptedAnswer: {
|
||
"@type": "Answer",
|
||
text: "The 4% rule is a useful starting point (25× annual spending), but it assumes a fixed withdrawal rate with inflation adjustments and doesn't model ongoing savings or dynamic market returns. Our calculator simulates each year's growth, contributions, and inflation-indexed withdrawals to give you a tailored picture.",
|
||
},
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
name: "How do I choose a realistic growth rate?",
|
||
acceptedAnswer: {
|
||
"@type": "Answer",
|
||
text: "Historically, a diversified portfolio of equities and bonds has returned around 7-10% per year before inflation. We recommend starting around 6-8% (net of fees), then running “what-if” scenarios—5% on the conservative side, 10% on the aggressive side—to see how they affect your timeline.",
|
||
},
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
name: "How does inflation factor into my FIRE Number?",
|
||
acceptedAnswer: {
|
||
"@type": "Answer",
|
||
text: "Cost of living rises. To maintain today's lifestyle, your monthly allowance must grow each year by your inflation rate. This calculator automatically inflates your desired monthly spending and subtracts it from your portfolio during retirement, ensuring your FIRE Number keeps pace with rising expenses.",
|
||
},
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
name: "Can I really retire early with FIRE?",
|
||
acceptedAnswer: {
|
||
"@type": "Answer",
|
||
text: "Early retirement is achievable with disciplined saving, smart investing, and realistic assumptions. This tool helps you set targets, visualize outcomes, and adjust inputs—so you can build confidence in your plan and make informed trade-offs between lifestyle, risk, and timeline.",
|
||
},
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
name: "How should I use this calculator effectively?",
|
||
acceptedAnswer: {
|
||
"@type": "Answer",
|
||
text: "Start with your actual numbers (capital, savings, age). Set conservative - mid - aggressive growth rates to bound possibilities. Slide your retirement age to explore “early” vs. “traditional” scenarios. Review the chart—especially the reference lines—to see when you hit FI and how withdrawals impact your balance. Experiment with higher savings rates or lower target spending to accelerate your path.",
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
return (
|
||
<main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-2">
|
||
<BackgroundPattern />
|
||
<div className="z-10 mx-auto flex flex-col items-center justify-center gap-4 text-center">
|
||
<div className="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'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'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">
|
||
<script
|
||
type="application/ld+json"
|
||
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqData) }}
|
||
/>
|
||
<h2 className="mb-4 text-3xl font-bold">
|
||
FIRE & Investing Frequently Asked Questions (FAQ)
|
||
</h2>
|
||
|
||
<Accordion type="single" collapsible className="w-full">
|
||
<AccordionItem value="item-1">
|
||
<AccordionTrigger className="text-xl font-semibold">
|
||
What 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'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'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't model ongoing savings or dynamic
|
||
market returns. Our calculator simulates each year's
|
||
growth, contributions, and inflation-indexed withdrawals to give
|
||
you a tailored picture.
|
||
</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'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>
|
||
);
|
||
}
|