diff --git a/public/logos/logo-btg-dark.svg b/public/logos/logo-btg-dark.svg new file mode 100644 index 0000000..0f8de65 --- /dev/null +++ b/public/logos/logo-btg-dark.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/logos/logo-btg-light.svg b/public/logos/logo-btg-light.svg new file mode 100644 index 0000000..4d40eec --- /dev/null +++ b/public/logos/logo-btg-light.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/config/companies.ts b/src/config/companies.ts index 4342c36..81f3c37 100644 --- a/src/config/companies.ts +++ b/src/config/companies.ts @@ -23,6 +23,10 @@ export const COMPANIES: Record = { color: "#22B5AB", address: "str. Unirii, nr. 3, ap. 26", city: "Cluj-Napoca", + logo: { + light: "/logos/logo-btg-light.svg", + dark: "/logos/logo-btg-dark.svg", + }, }, "urban-switch": { id: "urban-switch", diff --git a/src/shared/components/layout/sidebar.tsx b/src/shared/components/layout/sidebar.tsx index b5df533..a441b1a 100644 --- a/src/shared/components/layout/sidebar.tsx +++ b/src/shared/components/layout/sidebar.tsx @@ -64,60 +64,124 @@ function NavItem({ ); } -const LOGO_COMPANIES = ["studii-de-teren", "urban-switch"] as const; +const LOGO_COMPANIES = ["beletage", "urban-switch", "studii-de-teren"] as const; + +const ANIMATIONS = [ + "animate-[spin_0.5s_ease-in-out]", + "animate-[bounce_0.5s_ease-in-out]", + "animate-[ping_0.4s_ease-in-out]", +] as const; + +const COMPANY_GLOW: Record = { + beletage: "hover:drop-shadow-[0_0_6px_#22B5AB]", + "urban-switch": "hover:drop-shadow-[0_0_6px_#6366f1]", + "studii-de-teren": "hover:drop-shadow-[0_0_6px_#f59e0b]", +}; + +// Secret combo: click logos in order BTG โ†’ US โ†’ SDT to trigger confetti +const SECRET_COMBO = ["beletage", "urban-switch", "studii-de-teren"]; function SidebarLogos() { - const [clickCount, setClickCount] = useState(0); - const [shuffled, setShuffled] = useState(false); + const [animatingId, setAnimatingId] = useState(null); + const [comboProgress, setComboProgress] = useState(0); + const [showConfetti, setShowConfetti] = useState(false); - const handleLogoClick = useCallback(() => { - setClickCount((prev) => { - const next = prev + 1; - if (next >= 3) { - setShuffled((s) => !s); - return 0; - } - return next; - }); - }, []); - - // Reset click count after 2 seconds of inactivity + // Reset combo after 3 seconds of inactivity useEffect(() => { - if (clickCount === 0) return; - const timer = setTimeout(() => setClickCount(0), 2000); + if (comboProgress === 0) return; + const timer = setTimeout(() => setComboProgress(0), 3000); return () => clearTimeout(timer); - }, [clickCount]); + }, [comboProgress]); - const logos = shuffled ? [...LOGO_COMPANIES].reverse() : [...LOGO_COMPANIES]; + // Hide confetti after 2 seconds + useEffect(() => { + if (!showConfetti) return; + const timer = setTimeout(() => setShowConfetti(false), 2000); + return () => clearTimeout(timer); + }, [showConfetti]); + + const handleLogoClick = useCallback( + (companyId: string, e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + + // Trigger individual animation + setAnimatingId(companyId); + setTimeout(() => setAnimatingId(null), 500); + + // Check secret combo + if (SECRET_COMBO[comboProgress] === companyId) { + const next = comboProgress + 1; + if (next >= SECRET_COMBO.length) { + setShowConfetti(true); + setComboProgress(0); + } else { + setComboProgress(next); + } + } else if (SECRET_COMBO[0] === companyId) { + setComboProgress(1); + } else { + setComboProgress(0); + } + }, + [comboProgress], + ); return ( -
- {logos.map((companyId) => { +
+ {LOGO_COMPANIES.map((companyId, index) => { const company = COMPANIES[companyId]; const logoSrc = company?.logo?.light; if (!logoSrc) return null; + const isAnimating = animatingId === companyId; + const animation = isAnimating + ? ANIMATIONS[index % ANIMATIONS.length] + : ""; + const glow = COMPANY_GLOW[companyId] ?? ""; + return ( ); })} + + {/* Confetti burst on secret combo */} + {showConfetti && ( +
+
+ {["๐ŸŽ‰", "โœจ", "๐Ÿ—๏ธ", "โœจ", "๐ŸŽ‰"].map((emoji, i) => ( + + {emoji} + + ))} +
+

+ Echipa completฤƒ! +

+
+ )}
); }