Anson/secure-act-2.0
1
0
Fork 0
mirror of https://gitlab.com/MisterBiggs/secure-act-2.0.git synced 2025-09-19 12:12:36 +00:00
Code Releases Activity

Compare commits

base: Anson:11bd17060c168b4cc7614f8303b2aef7436b42c7
Branches Tags
Anson:main
..
compare: Anson:8880b729d7714a4f8f9fbf2ab3f0c15d17dc1710
Branches Tags
Anson:main

6 Commits
11bd17060c ... 8880b729d7

Author SHA1 Message Date
Anson Biggs
8880b729d7 Fix calculation inconsistencies and chart data cutoff 
- Fix chart data showing age 70 values instead of age 65 retirement values
- Update all hardcoded examples to match actual calculator output
- Recent Graduate: 75K → 94K (corrected retirement value)
- MBA Graduate: 25K → 29K (corrected retirement value)
- Medical Professional: 85K → ,065K (corrected)
- Teacher: 8K → 88K (corrected)
- Software Engineer: 12K → ,132K (corrected)
- Attorney: 5K → 54K (corrected)
- All examples now mathematically consistent with calculator logic
- Charts no longer appear to 'slow down' at retirement age
 2025-08-13 12:13:04 -06:00
Anson Biggs
bc62f616ab Replace browser tooltips with custom CSS hover tooltips 
- Add info icons (ℹ️) to hero statistics as visual indicators
- Create custom CSS tooltips with smooth animations and proper styling
- Remove ugly browser default tooltips in favor of professional design
- Tooltips show source attribution on hover with dark styling and arrows
- Improves UX with clear visual cues and better tooltip appearance
 2025-08-13 12:09:21 -06:00
Anson Biggs
bfc85ee14b Add 2019 student debt growth context to hero section 
- Add prominent context in hero that student debt grew 4.5% annually through 2019
- Shows debt was growing nearly twice as fast as wage growth pre-pandemic
- Uses 2019 baseline to avoid COVID-era data distortions
- Positioned prominently in hero section for maximum visibility
- Provides important historical context for the current debt crisis
 2025-08-13 11:53:03 -06:00
Anson Biggs
6f5e360b0a Add year context to footer for data currency 
- Add copyright year and data currency notice to footer
- Helps users understand that financial statistics change frequently
- Provides important temporal context for student loan debt figures
 2025-08-13 11:47:47 -06:00
Anson Biggs
bb0fdbf835 Add citations and update statistics with current data 
- Update student loan statistics to current .81T total debt and 42.5M borrowers
- Add proper citations for all key statistics from authoritative sources
- Include Education Data Initiative, Investopedia, and Federal Reserve sources
- Update investment return assumptions with proper context
- Add comprehensive data sources section to footer and disclaimer
- Improves accuracy and credibility of financial calculations
 2025-08-13 11:45:08 -06:00
Anson Biggs
0625710d46 Remove unverified company list section 
- Eliminates company list that contained unverified claims about SECURE Act 2.0 adoption
- Improves accuracy by focusing on calculator functionality rather than promotional content
 2025-08-13 11:42:10 -06:00
2 changed files with 118 additions and 166 deletions
Expand all files Collapse all files

11
calculations.js
View File

@@ -159,15 +159,20 @@ function calculateNetWorthComparison(params) {
} }
} }
// Find age 65 index for retirement values
const age65Index = allAges.findIndex(age => age === RETIREMENT_AGE);
const retirementWith = age65Index >= 0 ? allWithProgram[age65Index] : allWithProgram[allWithProgram.length - 1];
const retirementWithout = age65Index >= 0 ? allWithoutProgram[age65Index] : allWithoutProgram[allWithoutProgram.length - 1];
return { return {
ages, ages,
withProgram, withProgram,
withoutProgram, withoutProgram,
payoffYears, payoffYears,
annualMatch, annualMatch,
totalRetirementWith: allWithProgram[allWithProgram.length - 1], totalRetirementWith: retirementWith,
totalRetirementWithout: allWithoutProgram[allWithoutProgram.length - 1], totalRetirementWithout: retirementWithout,
retirementDifference: allWithProgram[allWithProgram.length - 1] - allWithoutProgram[allWithoutProgram.length - 1], retirementDifference: retirementWith - retirementWithout,
// Include full yearly data if needed // Include full yearly data if needed
allAges, allAges,
allWithProgram, allWithProgram,

273
index.html
View File

@@ -35,6 +35,55 @@
.print-only { display: block !important; } .print-only { display: block !important; }
} }
.print-only { display: none; } .print-only { display: none; }
/* Custom tooltip styles */
.tooltip {
position: relative;
}
.tooltip::after {
content: "ℹ️";
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 0.75rem;
opacity: 0.7;
}
.tooltip .tooltip-text {
visibility: hidden;
width: 280px;
background-color: rgba(0, 0, 0, 0.9);
color: white;
text-align: center;
border-radius: 6px;
padding: 8px 12px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -140px;
opacity: 0;
transition: opacity 0.3s;
font-size: 0.75rem;
line-height: 1.3;
}
.tooltip .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
</style> </style>
</head> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">
@@ -48,22 +97,30 @@
<h2 class="text-2xl md:text-3xl font-light mb-8"> <h2 class="text-2xl md:text-3xl font-light mb-8">
Student Loan Matching Program Student Loan Matching Program
</h2> </h2>
<p class="text-xl md:text-2xl max-w-4xl mx-auto leading-relaxed mb-8"> <p class="text-xl md:text-2xl max-w-4xl mx-auto leading-relaxed mb-6">
A game-changing benefit that helps employees build retirement savings A game-changing benefit that helps employees build retirement savings
while paying off student loans while paying off student loans
</p> </p>
<div class="text-center mb-8">
<p class="text-sm text-white/90 bg-white/10 backdrop-blur-sm inline-block px-6 py-3 rounded-full border border-white/20">
Student debt grew 4.5% annually through 2019 — nearly twice as fast as wage growth
</p>
</div>
<div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto text-center"> <div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto text-center">
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 tooltip">
<div class="text-3xl font-bold">$1.75T</div> <div class="text-3xl font-bold">$1.81 Trillion</div>
<div class="text-sm opacity-90">Total U.S. Student Debt</div> <div class="text-sm opacity-90">Total U.S. Student Debt</div>
<span class="tooltip-text">Source: Education Data Initiative, Q2 2025 student loan debt statistics</span>
</div> </div>
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 tooltip">
<div class="text-3xl font-bold">45M</div> <div class="text-3xl font-bold">42,500,000</div>
<div class="text-sm opacity-90">Americans with Student Loans</div> <div class="text-sm opacity-90">Americans with Student Loans</div>
<span class="tooltip-text">Source: Education Data Initiative, 2025 federal student loan borrower data</span>
</div> </div>
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 tooltip">
<div class="text-3xl font-bold">$37K</div> <div class="text-3xl font-bold">$39,000</div>
<div class="text-sm opacity-90">Average Debt per Borrower</div> <div class="text-sm opacity-90">Average Federal Debt per Borrower</div>
<span class="tooltip-text">Source: Education Data Initiative, 2025 average federal student loan debt per borrower</span>
</div> </div>
</div> </div>
</div> </div>
@@ -123,9 +180,9 @@
<p><strong>Employer Match:</strong> 4%</p> <p><strong>Employer Match:</strong> 4%</p>
</div> </div>
<div class="mt-4 p-3 bg-white rounded"> <div class="mt-4 p-3 bg-white rounded">
<p class="text-lg font-bold text-blue-600">$275,117</p> <p class="text-lg font-bold text-blue-600">$493,553</p>
<p class="text-xs text-gray-600">Retirement value at age 65</p> <p class="text-xs text-gray-600">Retirement value at age 65</p>
<p class="text-xs text-blue-600 mt-1">$22,000 in matching over 11 years</p> <p class="text-xs text-blue-600 mt-1">$20,000 in matching over 10 years</p>
</div> </div>
</div> </div>
@@ -145,9 +202,9 @@
<p><strong>Employer Match:</strong> 5%</p> <p><strong>Employer Match:</strong> 5%</p>
</div> </div>
<div class="mt-4 p-3 bg-white rounded"> <div class="mt-4 p-3 bg-white rounded">
<p class="text-lg font-bold text-green-600">$424,608</p> <p class="text-lg font-bold text-green-600">$729,134</p>
<p class="text-xs text-gray-600">Retirement value at age 65</p> <p class="text-xs text-gray-600">Retirement value at age 65</p>
<p class="text-xs text-green-600 mt-1">$59,500 in matching over 14 years</p> <p class="text-xs text-green-600 mt-1">$46,750 in matching over 11 years</p>
</div> </div>
</div> </div>
@@ -167,9 +224,9 @@
<p><strong>Employer Match:</strong> 6%</p> <p><strong>Employer Match:</strong> 6%</p>
</div> </div>
<div class="mt-4 p-3 bg-white rounded"> <div class="mt-4 p-3 bg-white rounded">
<p class="text-lg font-bold text-purple-600">$285,000</p> <p class="text-lg font-bold text-purple-600">$1,064,977</p>
<p class="text-xs text-gray-600">Retirement value at age 65</p> <p class="text-xs text-gray-600">Retirement value at age 65</p>
<p class="text-xs text-purple-600 mt-1">$122,400 in matching over 17 years</p> <p class="text-xs text-purple-600 mt-1">$93,600 in matching over 13 years</p>
</div> </div>
</div> </div>
</div> </div>
@@ -192,9 +249,9 @@
<p><strong>Employer Match:</strong> 3%</p> <p><strong>Employer Match:</strong> 3%</p>
</div> </div>
<div class="mt-4 p-3 bg-white rounded"> <div class="mt-4 p-3 bg-white rounded">
<p class="text-lg font-bold text-amber-600">$58,000</p> <p class="text-lg font-bold text-amber-600">$288,373</p>
<p class="text-xs text-gray-600">Retirement value at age 65</p> <p class="text-xs text-gray-600">Retirement value at age 65</p>
<p class="text-xs text-amber-600 mt-1">$28,350 in matching over 21 years</p> <p class="text-xs text-amber-600 mt-1">$18,900 in matching over 14 years</p>
</div> </div>
</div> </div>
@@ -214,7 +271,7 @@
<p><strong>Employer Match:</strong> 6%</p> <p><strong>Employer Match:</strong> 6%</p>
</div> </div>
<div class="mt-4 p-3 bg-white rounded"> <div class="mt-4 p-3 bg-white rounded">
<p class="text-lg font-bold text-indigo-600">$112,000</p> <p class="text-lg font-bold text-indigo-600">$1,132,220</p>
<p class="text-xs text-gray-600">Retirement value at age 65</p> <p class="text-xs text-gray-600">Retirement value at age 65</p>
<p class="text-xs text-indigo-600 mt-1">$34,200 in matching over 6 years</p> <p class="text-xs text-indigo-600 mt-1">$34,200 in matching over 6 years</p>
</div> </div>
@@ -236,9 +293,9 @@
<p><strong>Employer Match:</strong> 4%</p> <p><strong>Employer Match:</strong> 4%</p>
</div> </div>
<div class="mt-4 p-3 bg-white rounded"> <div class="mt-4 p-3 bg-white rounded">
<p class="text-lg font-bold text-red-600">$95,000</p> <p class="text-lg font-bold text-red-600">$553,921</p>
<p class="text-xs text-gray-600">Retirement value at age 65</p> <p class="text-xs text-gray-600">Retirement value at age 65</p>
<p class="text-xs text-red-600 mt-1">$69,000 in matching over 23 years</p> <p class="text-xs text-red-600 mt-1">$45,000 in matching over 15 years</p>
</div> </div>
</div> </div>
</div> </div>
@@ -446,11 +503,11 @@
<ul class="space-y-2 text-sm text-gray-600"> <ul class="space-y-2 text-sm text-gray-600">
<li class="flex items-start"> <li class="flex items-start">
<span class="text-green-500 mr-2">•</span> <span class="text-green-500 mr-2">•</span>
<span><strong>Investment Returns:</strong> 7% average annual return (historical S&P 500 average)</span> <span><strong>Investment Returns:</strong> 7% average annual return <em>(S&P 500 long-term average: 9.96% nominal, ~7% real after inflation - Investopedia, 2025)</em></span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<span class="text-green-500 mr-2">•</span> <span class="text-green-500 mr-2">•</span>
<span><strong>Loan Interest Rate:</strong> 5% annual rate (federal student loan average)</span> <span><strong>Loan Interest Rate:</strong> 5% annual rate <em>(representative federal student loan rate)</em></span>
</li> </li>
<li class="flex items-start"> <li class="flex items-start">
<span class="text-green-500 mr-2">•</span> <span class="text-green-500 mr-2">•</span>
@@ -464,11 +521,16 @@
</div> </div>
</div> </div>
<div class="mt-4 p-4 bg-amber-50 rounded-lg"> <div class="mt-4 p-4 bg-amber-50 rounded-lg">
<p class="text-sm text-amber-800"> <p class="text-sm text-amber-800">
<strong>Note:</strong> This calculator provides estimates for educational purposes. Actual results will vary based on your specific loan terms, employer plan details, investment performance, and contribution consistency. Consult with a financial advisor for personalized advice. <strong>Note:</strong> This calculator provides estimates for educational purposes. Actual results will vary based on your specific loan terms, employer plan details, investment performance, and contribution consistency. Consult with a financial advisor for personalized advice.
</p> </p>
</div> <div class="mt-3 pt-3 border-t border-amber-200">
<p class="text-xs text-amber-700">
<strong>Data Sources:</strong> Student loan statistics from Education Data Initiative (2025). Investment return assumptions based on S&P 500 historical performance data from Investopedia (2025). Federal Reserve household debt data from NY Fed Center for Microeconomic Data. Growth rate comparisons use 2019 pre-pandemic baseline data.
</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -512,141 +574,7 @@
</div> </div>
</section> </section>
<!-- Employers Supporting This Benefit -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
Employers Supporting Student Loan Matching
</h2>
<p class="text-center text-gray-600 max-w-3xl mx-auto mb-12">
These forward-thinking companies have implemented or announced SECURE Act 2.0 student loan matching programs.
This list is growing as more employers adopt this valuable benefit.
</p>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Group 1: Financial Services -->
<div class="bg-blue-50 p-6 rounded-lg">
<h3 class="text-lg font-semibold text-blue-800 mb-4 border-b pb-2">Financial Services</h3>
<ul class="space-y-3">
<li class="flex items-center">
<svg class="w-5 h-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Fidelity Investments</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Vanguard</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Abbott</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Prudential</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Alight Solutions</span>
</li>
</ul>
</div>
<!-- Group 2: Tech Companies -->
<div class="bg-purple-50 p-6 rounded-lg">
<h3 class="text-lg font-semibold text-purple-800 mb-4 border-b pb-2">Technology</h3>
<ul class="space-y-3">
<li class="flex items-center">
<svg class="w-5 h-5 text-purple-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Google</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-purple-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Microsoft</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-purple-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Salesforce</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-purple-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Adobe</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-purple-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Intuit</span>
</li>
</ul>
</div>
<!-- Group 3: Healthcare & Other -->
<div class="bg-green-50 p-6 rounded-lg">
<h3 class="text-lg font-semibold text-green-800 mb-4 border-b pb-2">Healthcare & Others</h3>
<ul class="space-y-3">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Pfizer</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Cigna</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Starbucks</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>PwC</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Estée Lauder</span>
</li>
</ul>
</div>
</div>
<div class="mt-12 p-4 bg-blue-50 rounded-lg max-w-3xl mx-auto text-center">
<p class="text-blue-800">
<span class="font-bold">Know a company that should be on this list?</span>
<a href="mailto:secure@ansonbiggs.com" class="text-blue-600 underline">
Let us know
</a>
and we'll update our directory.
</p>
</div>
</div>
</section>
<!-- Call to Action --> <!-- Call to Action -->
<section class="py-16 bg-gradient-to-r from-blue-600 to-purple-700 text-white" x-data="{ showModal: false, showEmailModal: false, copied: false }"> <section class="py-16 bg-gradient-to-r from-blue-600 to-purple-700 text-white" x-data="{ showModal: false, showEmailModal: false, copied: false }">
@@ -936,11 +864,27 @@ Best regards,
</a> </a>
</li> </li>
<li> <li>
<a href="https://www.fidelityworkplace.com/s/studentdebt-retirement" <a href="https://educationdata.org/student-loan-debt-statistics"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="hover:text-white transition-colors"> class="hover:text-white transition-colors">
Fidelity Student Debt Solutions Education Data Initiative - Student Loan Statistics
</a>
</li>
<li>
<a href="https://www.investopedia.com/ask/answers/042415/what-average-annual-return-sp-500.asp"
target="_blank"
rel="noopener noreferrer"
class="hover:text-white transition-colors">
Investopedia - S&P 500 Historical Returns
</a>
</li>
<li>
<a href="https://www.newyorkfed.org/microeconomics/hhdc/background.html"
target="_blank"
rel="noopener noreferrer"
class="hover:text-white transition-colors">
Federal Reserve Bank of NY - Household Debt Data
</a> </a>
</li> </li>
</ul> </ul>
@@ -984,6 +928,9 @@ Best regards,
<p class="mt-2 text-gray-500"> <p class="mt-2 text-gray-500">
This calculator is for informational purposes only. Consult your HR department and financial advisor for specific guidance. This calculator is for informational purposes only. Consult your HR department and financial advisor for specific guidance.
</p> </p>
<p class="mt-2 text-gray-600 text-xs">
© 2025 | Data current as of 2025 - Student loan and financial statistics change frequently
</p>
</div> </div>
</div> </div>
</footer> </footer>