103 lines
3.9 KiB
TypeScript
103 lines
3.9 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { SocialLinks } from "./SocialLinks";
|
|
|
|
export function Footer() {
|
|
return (
|
|
<footer className="border-t border-border mt-24">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-10 py-12 grid grid-cols-1 md:grid-cols-4 gap-10">
|
|
<div className="md:col-span-2">
|
|
<Link href="/" className="group inline-flex items-center gap-3">
|
|
<Image
|
|
src="/image/Studio/Logo Flat.png"
|
|
alt="Highland Games Studio"
|
|
width={32}
|
|
height={32}
|
|
className="transition-transform duration-300 group-hover:scale-110 group-hover:-translate-y-0.5"
|
|
/>
|
|
<span className="font-display text-lg tracking-wider transition-colors duration-300 group-hover:text-accent">
|
|
Highland Games Studio
|
|
</span>
|
|
</Link>
|
|
<p className="mt-4 text-sm text-foreground-muted max-w-sm">
|
|
Where summits become worlds. An indie studio crafting survival
|
|
adventures.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-display text-sm tracking-widest text-foreground-muted mb-4">
|
|
Explore
|
|
</h4>
|
|
<ul className="space-y-2 text-sm">
|
|
<li>
|
|
<Link
|
|
href="/studio"
|
|
className="group relative inline-block text-foreground-muted hover:text-foreground transition-colors"
|
|
>
|
|
Studio
|
|
<span className="absolute left-0 -bottom-0.5 h-px w-0 bg-accent transition-all duration-300 group-hover:w-full" />
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/games"
|
|
className="group relative inline-block text-foreground-muted hover:text-foreground transition-colors"
|
|
>
|
|
Games
|
|
<span className="absolute left-0 -bottom-0.5 h-px w-0 bg-accent transition-all duration-300 group-hover:w-full" />
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/devblog"
|
|
className="group relative inline-block text-foreground-muted hover:text-foreground transition-colors"
|
|
>
|
|
Devblog
|
|
<span className="absolute left-0 -bottom-0.5 h-px w-0 bg-accent transition-all duration-300 group-hover:w-full" />
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/contact"
|
|
className="group relative inline-block text-foreground-muted hover:text-foreground transition-colors"
|
|
>
|
|
Contact
|
|
<span className="absolute left-0 -bottom-0.5 h-px w-0 bg-accent transition-all duration-300 group-hover:w-full" />
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-display text-sm tracking-widest text-foreground-muted mb-4">
|
|
Follow
|
|
</h4>
|
|
<SocialLinks />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-border">
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-10 py-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-foreground-muted">
|
|
<p>© {new Date().getFullYear()} Highland Games Studio. All rights reserved.</p>
|
|
<div className="flex items-center gap-5">
|
|
<Link
|
|
href="/legal/notice"
|
|
className="hover:text-accent transition-colors"
|
|
>
|
|
Legal Notice
|
|
</Link>
|
|
<Link
|
|
href="/legal/privacy"
|
|
className="hover:text-accent transition-colors"
|
|
>
|
|
Privacy
|
|
</Link>
|
|
</div>
|
|
<p className="font-display tracking-widest hidden lg:block">WHERE SUMMITS BECOME WORLDS</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|