← back to StudentLoanTracker

src/app/page.tsx

134 lines

import Link from 'next/link';
import {
  Calculator,
  FileText,
  ShieldCheck,
  Building2,
  Sun,
} from 'lucide-react';

const features = [
  {
    href: '/calculator',
    icon: Calculator,
    title: 'Repayment Calculators',
    description:
      'Compare SAVE, IBR, PAYE, ICR, and Standard plans side-by-side. See monthly payments, total cost, and forgiveness timelines.',
    color: 'bg-teal-500/10 text-teal-600',
  },
  {
    href: '/loans',
    icon: FileText,
    title: 'Loan Intake',
    description:
      'Enter your loans manually or upload your StudentAid.gov data file. We parse it in your browser -- nothing leaves your device.',
    color: 'bg-blue-500/10 text-blue-600',
  },
  {
    href: '/pslf',
    icon: ShieldCheck,
    title: 'PSLF Tracker',
    description:
      'Track qualifying payments toward Public Service Loan Forgiveness. Upload your ECF or enter counts manually.',
    color: 'bg-emerald-500/10 text-emerald-600',
  },
  {
    href: '/servicers',
    icon: Building2,
    title: 'Servicer Directory',
    description:
      'Find your loan servicer, get their contact info, and see which repayment plans they support.',
    color: 'bg-purple-500/10 text-purple-600',
  },
  {
    href: '/summer-aid',
    icon: Sun,
    title: 'Summer Aid Planner',
    description:
      'Plan for summer enrollment gaps. See how dropping below half-time affects your grace period and repayment timeline.',
    color: 'bg-amber-500/10 text-amber-600',
  },
];

export default function HomePage() {
  return (
    <div>
      {/* Hero Section */}
      <section className="bg-[#0f1b2d] text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
          <div className="max-w-3xl">
            <h1 className="text-4xl md:text-5xl font-bold leading-tight tracking-tight">
              Free Student Loan Tools
            </h1>
            <p className="mt-6 text-lg md:text-xl text-gray-300 leading-relaxed">
              Calculate repayment plans, track PSLF progress, and find your
              servicer &mdash; no account needed.
            </p>
            <div className="mt-8 flex flex-wrap gap-4">
              <Link
                href="/calculator"
                className="inline-flex items-center gap-2 px-6 py-3 bg-teal-500 hover:bg-teal-600 text-white font-semibold rounded-lg transition-colors"
              >
                <Calculator className="w-5 h-5" />
                Start with a Calculator
              </Link>
              <Link
                href="/loans"
                className="inline-flex items-center gap-2 px-6 py-3 border border-gray-500 hover:border-gray-300 text-gray-300 hover:text-white font-semibold rounded-lg transition-colors"
              >
                <FileText className="w-5 h-5" />
                Import Your Loans
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Feature Cards */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20">
        <h2 className="text-2xl md:text-3xl font-bold text-center mb-12">
          Everything You Need in One Place
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature) => {
            const Icon = feature.icon;
            return (
              <Link
                key={feature.href}
                href={feature.href}
                className="group block p-6 bg-white rounded-xl border border-gray-200 hover:border-teal-300 hover:shadow-lg transition-all"
              >
                <div
                  className={`inline-flex items-center justify-center w-12 h-12 rounded-lg ${feature.color} mb-4`}
                >
                  <Icon className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-semibold group-hover:text-teal-600 transition-colors">
                  {feature.title}
                </h3>
                <p className="mt-2 text-gray-600 text-sm leading-relaxed">
                  {feature.description}
                </p>
              </Link>
            );
          })}
        </div>
      </section>

      {/* Privacy Banner */}
      <section className="bg-[#0f1b2d] text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
          <h2 className="text-xl md:text-2xl font-bold mb-3">
            Your Privacy Comes First
          </h2>
          <p className="text-gray-400 max-w-2xl mx-auto leading-relaxed">
            Guest mode requires no login and stores nothing. Files are processed
            entirely in your browser and discarded immediately. Create an optional
            account only if you want to save your progress.
          </p>
        </div>
      </section>
    </div>
  );
}