very nice footer, accordion fixes, homepage style
This commit is contained in:
@@ -2,118 +2,130 @@ import Link from 'next/link';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<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.
|
||||
<footer className="bg-background z-10 w-full border-t">
|
||||
<div className="from-primary/15 to-secondary/10 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>
|
||||
<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.
|
||||
<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">
|
||||
#1 FIRE Calculator
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="https://ghostfolio.schulze.network"
|
||||
className="text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
Free hosted Ghostfolio
|
||||
</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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
@@ -286,7 +286,7 @@ export default function HomePage() {
|
||||
blogs, books, tools, and communities for financial independence and smart investing.
|
||||
</p>
|
||||
|
||||
<div className="bg-foreground my-8 rounded-md p-4 text-lg">
|
||||
<div className="text-background 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>
|
||||
|
||||
@@ -1,28 +1,20 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import * as React from "react";
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
||||
import { ChevronDownIcon } from "lucide-react";
|
||||
import * as React from 'react';
|
||||
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
||||
import { ChevronDownIcon } from 'lucide-react';
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function Accordion({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
||||
function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
||||
return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
|
||||
}
|
||||
|
||||
function AccordionItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
||||
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,
|
||||
)}
|
||||
className={cn('border-primary-foreground/20 border-b last:border-b-0', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
@@ -38,13 +30,13 @@ function AccordionTrigger({
|
||||
<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",
|
||||
'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" />
|
||||
<ChevronDownIcon className="text-secondary pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
);
|
||||
@@ -61,7 +53,7 @@ function AccordionContent({
|
||||
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>
|
||||
<div className={cn('pt-0 pb-4', className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user