'use client'; import { useEffect, useMemo, useRef } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { SplitText } from 'gsap/SplitText'; gsap.registerPlugin(ScrollTrigger, SplitText); type FooterColorProps = { text?: string; gradient?: string[]; }; type FooterThemePreset = { text: string; gradient: string[]; }; export const FOOTER_THEME_PRESETS = { 'dia-browser': { text: '#3F3F46', gradient: [ '#1D4ED8', '#60A5FA', '#E5E7EB', '#fbbb0c', '#f93b3b', '#FB7185', '#EC4899', '#fb3af2', ], }, ocean: { text: '#0F172A', gradient: [ '#1E3A8A', '#1D4ED8', '#2563EB', '#3B82F6', '#60A5FA', '#93C5FD', '#BFDBFE', '#E0F2FE', ], }, amber: { text: '#451A03', gradient: [ '#FEF3C7', '#FCD34D', '#F59E0B', '#D97706', '#B45309', '#92400E', '#78350F', '#451A03', ], }, emerald: { text: '#022C22', gradient: [ '#D1FAE5', '#6EE7B7', '#34D399', '#10B981', '#059669', '#047857', '#065F46', '#022C22', ], }, violet: { text: '#2E1065', gradient: [ '#F5F3FF', '#DDD6FE', '#C4B5FD', '#A78BFA', '#8B5CF6', '#7C3AED', '#6D28D9', '#4C1D95', ], }, rose: { text: '#4A044E', gradient: [ '#FFE4E6', '#FDA4AF', '#FB7185', '#F43F5E', '#E11D48', '#BE123C', '#9F1239', '#4A044E', ], }, } satisfies Record; export type FooterTheme = keyof typeof FOOTER_THEME_PRESETS; type FooterProps = { colors?: FooterColorProps; theme?: FooterTheme; copyrightText?: string; }; const DEFAULT_FOOTER_THEME: FooterTheme = 'dia-browser'; const currentYear = new Date().getFullYear(); export default function Footer({ colors, theme = DEFAULT_FOOTER_THEME, copyrightText, }: FooterProps) { const rootRef = useRef(null); const activeTheme = useMemo( () => FOOTER_THEME_PRESETS[theme] ?? FOOTER_THEME_PRESETS[DEFAULT_FOOTER_THEME], [theme], ); const resolvedColors = useMemo(() => { const gradient = Array.from({ length: 8 }, (_, index) => { return ( colors?.gradient?.[index] ?? activeTheme.gradient[index] ?? '#9A3412' ); }); return { text: colors?.text ?? activeTheme.text, gradient, }; }, [activeTheme, colors]); useEffect(() => { const root = rootRef.current; if (!root) { return; } if (typeof gsap === 'undefined') { console.error('GSAP is not loaded. Cannot proceed with animations.'); const elements = root.querySelectorAll( '.svg-container, .main-title', ); elements.forEach((el: Element) => { (el as HTMLElement).style.opacity = '1'; }); return; } const ctx = gsap.context(() => { const svg = root.querySelector('svg'); if (svg) { for (let i = 0; i < 9; i++) { const gradient = svg.getElementById?.( `grad${i}`, ) as SVGLinearGradientElement | null; if (gradient) { gradient .querySelectorAll('stop') .forEach((stop: SVGStopElement, idx: number) => { if (idx < resolvedColors.gradient.length) { stop.setAttribute('stop-color', resolvedColors.gradient[idx]); } else if ( resolvedColors.gradient[resolvedColors.gradient.length - 1] ) { stop.setAttribute( 'stop-color', resolvedColors.gradient[resolvedColors.gradient.length - 1], ); } }); } } } const animationSection = root.querySelector('.animation-section') ?? root; const mainTitle = root.querySelector('.main-title'); const allSplitLines: gsap.TweenTarget[] = []; if (mainTitle) { const mainTitleSplit = new SplitText(mainTitle, { type: 'lines' }); gsap.set(mainTitleSplit.lines, { opacity: 0, y: 30, filter: 'blur(8px)', }); allSplitLines.push(...mainTitleSplit.lines); } gsap .timeline({ scrollTrigger: { trigger: animationSection, start: 'top bottom', end: 'bottom bottom', scrub: 1, }, }) .to('.svg-container', { autoAlpha: 1, duration: 0.01 }, 0) .to('.main-title', { autoAlpha: 1, duration: 0.01 }, 0) .to( '.svg-container', { transform: 'scaleY(0.05) translateY(-30px)', duration: 0.3, ease: 'power2.out', }, 0, ) .to( '.svg-container', { transform: 'scaleY(1) translateY(0px)', duration: 1.2, ease: 'power2.out', }, 0.3, ) .to( allSplitLines, { duration: 0.8, y: 0, opacity: 1, filter: 'blur(0px)', stagger: 0.08, ease: 'power2.out', }, 0.9, ); }, root); const handleResize = () => { ScrollTrigger.refresh(); }; window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); ctx.revert(); }; }, [resolvedColors]); const footerCopy = copyrightText ?? `copyright © ${currentYear} — Sahil Rana`; return (

{footerCopy}

); }