navbar and footer
This commit is contained in:
154
src/app/components/Navbar.tsx
Normal file
154
src/app/components/Navbar.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { Menu, Calculator, BookOpen, Flame, Percent, Anchor, Sparkles } from 'lucide-react';
|
||||
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from '@/components/ui/sheet';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export function Navbar() {
|
||||
return (
|
||||
<header className="bg-background/90 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-50 w-full border-b backdrop-blur">
|
||||
<div className="container flex h-16 items-center justify-between px-4 md:px-6">
|
||||
<div className="mr-4 hidden items-center gap-6 md:flex">
|
||||
<Link
|
||||
href="/"
|
||||
className="hover:bg-primary/10 flex items-center gap-2 rounded-full px-2 py-1 transition-colors"
|
||||
>
|
||||
<Image
|
||||
src="/investingfire_logo_no-bg.svg"
|
||||
alt="InvestingFIRE"
|
||||
width={28}
|
||||
height={28}
|
||||
className="h-7 w-7"
|
||||
/>
|
||||
<span className="hidden font-bold sm:inline-block">InvestingFIRE</span>
|
||||
</Link>
|
||||
<nav className="flex items-center space-x-4 text-sm font-medium">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-foreground/70 hover:bg-primary/10 hover:text-foreground flex items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors"
|
||||
>
|
||||
<Calculator className="h-4 w-4" />
|
||||
Calculator
|
||||
</Link>
|
||||
<Link
|
||||
href="/learn"
|
||||
className="text-foreground/70 hover:bg-primary/10 hover:text-foreground flex items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors"
|
||||
>
|
||||
<BookOpen className="h-4 w-4" />
|
||||
Learn
|
||||
</Link>
|
||||
<Link
|
||||
href="/learn/what-is-fire"
|
||||
className="text-foreground/70 hover:bg-primary/10 hover:text-foreground flex items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors"
|
||||
>
|
||||
<Flame className="h-4 w-4" />
|
||||
What is FIRE?
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Mobile */}
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="border-primary/20 bg-primary/10 text-primary hover:bg-primary/20 focus-visible:bg-primary/20 mr-2 rounded-full border px-2 text-base focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
<span className="sr-only">Toggle Menu</span>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent
|
||||
side="left"
|
||||
className="from-background via-primary/25 to-secondary/25 w-[86vw] max-w-sm border-r bg-gradient-to-b px-0 pb-10 shadow-xl"
|
||||
>
|
||||
<SheetHeader className="px-8 py-4">
|
||||
<SheetTitle>
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<Image
|
||||
src="/investingfire_logo_no-bg.svg"
|
||||
alt="InvestingFIRE"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<span className="font-bold">InvestingFIRE</span>
|
||||
</Link>
|
||||
</div>
|
||||
</SheetTitle>
|
||||
<SheetDescription className="text-muted-foreground text-xs">
|
||||
Built to make FIRE math simple and transparent for everyone.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
<nav className="flex flex-col gap-2 px-8">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-foreground/80 hover:bg-primary/10 hover:text-foreground flex items-center gap-2 rounded-lg px-3 py-2 transition-colors"
|
||||
>
|
||||
<Calculator className="h-4 w-4" />
|
||||
Calculator
|
||||
</Link>
|
||||
<Link
|
||||
href="/learn"
|
||||
className="text-foreground/80 hover:bg-primary/10 hover:text-foreground flex items-center gap-2 rounded-lg px-3 py-2 transition-colors"
|
||||
>
|
||||
<BookOpen className="h-4 w-4" />
|
||||
Learn
|
||||
</Link>
|
||||
<Link
|
||||
href="/learn/what-is-fire"
|
||||
className="text-foreground/80 hover:bg-primary/10 hover:text-foreground flex items-center gap-2 rounded-lg px-3 py-2 transition-colors"
|
||||
>
|
||||
<Flame className="h-4 w-4" />
|
||||
What is FIRE?
|
||||
</Link>
|
||||
<Link
|
||||
href="/learn/safe-withdrawal-rate-4-percent-rule"
|
||||
className="text-foreground/80 hover:bg-primary/10 hover:text-foreground flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors"
|
||||
>
|
||||
<Percent className="h-4 w-4" />
|
||||
The 4% Rule
|
||||
</Link>
|
||||
<Link
|
||||
href="/learn/coast-fire-vs-lean-fire"
|
||||
className="text-foreground/80 hover:bg-primary/10 hover:text-foreground flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors"
|
||||
>
|
||||
<Anchor className="h-4 w-4" />
|
||||
Coast vs. Lean FIRE
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="px-8 pt-6">
|
||||
<Button className="w-full justify-center gap-2" variant="secondary">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
Launch the calculator
|
||||
</Button>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
{/* Mobile brand in center */}
|
||||
<div className="flex flex-1 items-center justify-center md:hidden">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<Image src="/investingfire_logo_no-bg.svg" alt="InvestingFIRE" width={24} height={24} />
|
||||
<span className="text-sm font-bold">InvestingFIRE</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 items-center justify-end space-x-2 md:flex-none">
|
||||
{/* Future: Theme Toggle, GitHub Link etc */}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +1,121 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
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 className="from-primary/10 via-secondary/10 to-background w-full border-t bg-gradient-to-b py-12">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="bg-background/80 shadow-primary/10 mb-6 flex flex-wrap items-center justify-between gap-3 rounded-lg px-4 py-3 shadow-sm backdrop-blur">
|
||||
<div className="text-primary text-sm font-semibold">
|
||||
InvestingFIRE is ad-free and built as an educational tool.
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-8 md:grid-cols-4">
|
||||
{/* Brand */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="font-bold">InvestingFIRE</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
The most accurate FIRE calculator on the web. Plan your path to financial independence with
|
||||
clarity and confidence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tools */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="font-semibold">Tools</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<Link href="/" className="text-muted-foreground hover:text-primary transition-colors">
|
||||
FIRE Calculator
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Learn */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="font-semibold">Learn</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<Link
|
||||
href="/learn"
|
||||
className="text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
Knowledge Base
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/learn/what-is-fire"
|
||||
className="text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
What is FIRE?
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/learn/safe-withdrawal-rate-4-percent-rule"
|
||||
className="text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
The 4% Rule
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/learn/coast-fire-vs-lean-fire"
|
||||
className="text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
Coast vs. Lean FIRE
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Legal / About */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="font-semibold">About</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<a
|
||||
href="https://schulze.network"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
Schulze.network
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/SchulzeGit"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-muted-foreground mt-8 border-t pt-8 text-center text-xs">
|
||||
<p>
|
||||
© {new Date().getFullYear().toString()} InvestingFIRE. All rights reserved. |{' '}
|
||||
<a
|
||||
href="https://schulze.network"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-primary"
|
||||
>
|
||||
Hosting by Schulze.network
|
||||
</a>
|
||||
</p>
|
||||
<p className="mt-2">
|
||||
Disclaimer: This calculator is for educational purposes only. Consult a financial advisor
|
||||
before making investment decisions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,8 @@ import PlausibleProvider from "next-plausible";
|
||||
import { type Metadata, type Viewport } from "next";
|
||||
import { Geist } from "next/font/google";
|
||||
import { WebVitals } from "./components/web-vitals";
|
||||
import { Navbar } from "./components/Navbar";
|
||||
import Footer from "./components/footer";
|
||||
|
||||
export const viewport: Viewport = {
|
||||
themeColor: [{ color: "oklch(0.97 0.0228 95.96)" }],
|
||||
@@ -35,7 +37,11 @@ export default function RootLayout({
|
||||
/>
|
||||
</head>
|
||||
<WebVitals />
|
||||
<body>{children}</body>
|
||||
<body className="flex min-h-screen flex-col">
|
||||
<Navbar />
|
||||
<main className="flex-1">{children}</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user