92 lines
3.4 KiB
TypeScript
92 lines
3.4 KiB
TypeScript
'use client';
|
||
|
||
import Image from 'next/image';
|
||
|
||
const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || 'https://discord.gg/gridpilot';
|
||
const xUrl = process.env.NEXT_PUBLIC_X_URL || '#';
|
||
|
||
export default function Footer() {
|
||
return (
|
||
<footer className="relative bg-deep-graphite">
|
||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary-blue to-transparent" />
|
||
|
||
<div className="max-w-4xl mx-auto px-[calc(1.5rem+var(--sal))] pr-[calc(1.5rem+var(--sar))] py-2 md:py-8 lg:py-12 pb-[calc(0.5rem+var(--sab))] md:pb-[calc(1.5rem+var(--sab))]">
|
||
{/* Racing stripe accent */}
|
||
<div
|
||
className="flex gap-1 mb-2 md:mb-4 lg:mb-6 justify-center"
|
||
style={{
|
||
opacity: 1,
|
||
transform: 'scaleX(1)'
|
||
}}
|
||
>
|
||
<div className="w-12 md:w-20 lg:w-28 h-[2px] md:h-0.5 lg:h-1 bg-white rounded-full" />
|
||
<div className="w-12 md:w-20 lg:w-28 h-[2px] md:h-0.5 lg:h-1 bg-primary-blue rounded-full" />
|
||
<div className="w-12 md:w-20 lg:w-28 h-[2px] md:h-0.5 lg:h-1 bg-white rounded-full" />
|
||
</div>
|
||
|
||
{/* Personal message */}
|
||
<div
|
||
className="text-center mb-3 md:mb-6 lg:mb-8"
|
||
style={{
|
||
opacity: 1,
|
||
transform: 'translateY(0)'
|
||
}}
|
||
>
|
||
<div className="mb-2 flex justify-center">
|
||
<Image
|
||
src="/images/logos/icon-square-dark.svg"
|
||
alt="GridPilot"
|
||
width={40}
|
||
height={40}
|
||
className="h-8 w-auto md:h-10"
|
||
/>
|
||
</div>
|
||
<p className="text-[9px] md:text-xs lg:text-sm text-gray-300 mb-1 md:mb-2">
|
||
🏁 Built by a sim racer, for sim racers
|
||
</p>
|
||
<p className="text-[9px] md:text-xs text-gray-400 font-light max-w-2xl mx-auto">
|
||
Just a fellow racer tired of spreadsheets and chaos. GridPilot is my passion project to make league racing actually fun again.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Community links */}
|
||
<div
|
||
className="flex justify-center gap-4 md:gap-6 lg:gap-8 mb-3 md:mb-6 lg:mb-8"
|
||
style={{
|
||
opacity: 1,
|
||
transform: 'scale(1)'
|
||
}}
|
||
>
|
||
<a
|
||
href={discordUrl}
|
||
className="text-[9px] md:text-xs text-primary-blue hover:text-neon-aqua transition-colors font-medium inline-flex items-center justify-center min-h-[44px] min-w-[44px] px-3 py-2 active:scale-95 transition-transform"
|
||
>
|
||
💬 Join Discord
|
||
</a>
|
||
<a
|
||
href={xUrl}
|
||
className="text-[9px] md:text-xs text-gray-300 hover:text-neon-aqua transition-colors font-medium inline-flex items-center justify-center min-h-[44px] min-w-[44px] px-3 py-2 active:scale-95 transition-transform"
|
||
>
|
||
𝕏 Follow on X
|
||
</a>
|
||
</div>
|
||
|
||
{/* Development status */}
|
||
<div
|
||
className="text-center pt-2 md:pt-4 lg:pt-6 border-t border-charcoal-outline"
|
||
style={{
|
||
opacity: 1,
|
||
transform: 'translateY(0)'
|
||
}}
|
||
>
|
||
<p className="text-[9px] md:text-xs lg:text-sm text-gray-500 mb-1 md:mb-2">
|
||
⚡ Early development • Feedback welcome
|
||
</p>
|
||
<p className="text-[9px] md:text-xs text-gray-600">
|
||
Questions? Find me on Discord
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
} |