75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { useRef } from 'react';
|
|
import { useScrollProgress } from '@/hooks/useScrollProgress';
|
|
|
|
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)'
|
|
}}
|
|
>
|
|
<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="https://discord.gg/gridpilot"
|
|
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>
|
|
</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>
|
|
);
|
|
} |