feat: add Beletage logo + interactive 3-logo mini-game with secret combo confetti
This commit is contained in:
AI Assistant
@@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW 2021.5 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="210.689mm" height="31.3079mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 96.1459 14.287"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.str0 {stroke:#FEFEFE;stroke-width:0.0348;stroke-miterlimit:2.61313}
|
||||
.str1 {stroke:#0BA49A;stroke-width:0.0348;stroke-miterlimit:22.9256}
|
||||
.fil0 {fill:none}
|
||||
.fil1 {fill:#FEFEFE}
|
||||
.fil2 {fill:#0BA49A}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<polygon class="fil0 str0" points="12.4802,9.5738 14.2631,8.9876 14.2631,13.6769 12.4802,14.263 "/>
|
||||
<polygon class="fil1" points="12.4802,14.263 7.1315,12.5046 9.5087,11.723 12.4802,12.6999 "/>
|
||||
<polygon class="fil1" points="1.7829,3.3215 7.1315,1.5631 11.8859,3.1262 14.2631,2.3446 7.1315,0 -0,2.3446 -0,13.6769 1.7829,14.263 "/>
|
||||
<polygon class="fil0 str0" points="1.7829,12.7 7.1315,10.9415 9.5087,11.723 1.7829,14.263 "/>
|
||||
<polygon class="fil0 str0" points="7.1315,4.6892 14.2631,2.3446 14.2631,3.9077 7.1315,6.2523 "/>
|
||||
<polygon class="fil2" points="7.1315,6.2523 14.2631,3.9077 14.2631,5.8615 7.1315,8.2061 "/>
|
||||
<polygon class="fil0 str0" points="7.1315,8.2061 14.2631,5.8615 14.2631,7.4246 7.1315,9.7692 "/>
|
||||
<polygon class="fil1" points="7.1315,6.2523 3.5657,5.08 3.5657,3.5169 7.1315,4.6892 "/>
|
||||
<polygon class="fil1" points="7.1315,9.7692 3.5657,8.5969 3.5657,7.0338 7.1315,8.2061 "/>
|
||||
<polygon class="fil1" points="28.4181,3.2962 28.4181,12.7179 36.4138,12.7179 36.4138,11.0764 30.0308,11.0764 30.0308,8.7589 35.9937,8.7589 35.9937,7.1173 30.0308,7.1173 30.0308,4.9378 36.4138,4.9378 36.4138,3.2962 "/>
|
||||
<polygon class="fil1" points="39.3953,11.0764 39.3953,11.0764 45.7648,11.0764 45.7648,12.7179 37.7826,12.7179 37.7826,3.2962 39.3953,3.2962 "/>
|
||||
<polygon class="fil1" points="59.8589,8.3739 59.8589,8.3739 59.8589,12.7179 61.4581,12.7179 61.4581,4.9378 65.1036,4.9378 65.1036,3.2962 56.1999,3.2962 56.1999,4.9378 59.8589,4.9378 59.8589,4.9378 59.8589,4.9378 59.8589,8.3739 "/>
|
||||
<path class="fil1" d="M83.8853 9.021l0 0 -2.5655 0 0 -0.6872 0 0 0 -0.8164 5.353 0 0 5.2006 -5.2311 0c-1.3461,0 -2.4598,-0.4553 -3.3406,-1.3657 -0.8809,-0.9104 -1.3214,-2.06 -1.3214,-3.4486 0,-1.3795 0.436,-2.4923 1.3078,-3.3383 0.8718,-0.846 1.99,-1.2691 3.3542,-1.2691l4.5806 0 0 1.6415 -4.5806 0c-0.8853,0 -1.615,0.2898 -2.1887,0.8691 -0.5736,0.5793 -0.8605,1.3243 -0.8605,2.2347 0,0.9012 0.2869,1.6324 0.8605,2.1933 0.5737,0.561 1.3033,0.8414 2.1887,0.8414l3.2774 0.0001c0.1618,0 0.3411,-0.1842 0.3411,-0.3466l0 -1.7088 -1.175 -0.0001z"/>
|
||||
<path class="fil1" d="M71.3909 8.4278l0 0c0.3629,0 0.1856,-0.7803 0,-1.0935l-0.9556 -1.6125 -4.174 6.9962 -2.0712 0 5.0279 -8.5251c0.1292,-0.219 0.3007,-0.4257 0.5285,-0.607 0.269,-0.2141 0.5149,-0.3172 0.7318,-0.3172 0.2349,0 0.4792,0.1008 0.7318,0.3035 0.2171,0.1743 0.3915,0.3826 0.5285,0.6208l4.9059 8.5251 -2.0803 -0.0138 -1.3766 -2.3408c-0.1003,-0.1706 -0.3171,-0.294 -0.5143,-0.294l-4.0517 0 0.9735 -1.6415 1.7958 0z"/>
|
||||
<path class="fil1" d="M26.7241 9.9728c0,0.4047 -0.0994,0.7863 -0.2981,1.145 -0.5963,1.0576 -1.7256,1.5864 -3.388,1.5864l-5.9222 0 0 -9.4217 5.9222 0c1.5811,0 2.6878,0.5012 3.3203,1.5036 0.2439,0.4047 0.3659,0.8369 0.3659,1.2967 0,0.7816 -0.3253,1.4392 -0.9757,1.9726 0.6505,0.515 0.9757,1.1542 0.9757,1.9174zm-7.0471 -2.0441l0 0 0 0 0 -0.6872 3.0443 0 0 0 0.5605 0c0.4518,0 0.8539,-0.0828 1.2062,-0.2482 0.4518,-0.2116 0.6776,-0.5196 0.6776,-0.9242 0,-0.3955 -0.2258,-0.699 -0.6776,-0.9105 -0.3523,-0.1563 -0.7544,-0.2345 -1.2062,-0.2345l-4.5534 0 0 6.1385 4.5534 0c0.4427,0 0.8357,-0.069 1.1791,-0.2069 0.4698,-0.2023 0.7047,-0.492 0.7047,-0.8691 0,-0.3862 -0.2349,-0.6805 -0.7047,-0.8828 -0.3524,-0.1472 -0.7454,-0.2207 -1.1791,-0.2207l-3.6048 0 0 -0.9544z"/>
|
||||
<polygon class="fil1" points="46.9845,3.2962 46.9845,12.7179 54.9802,12.7179 54.9802,11.0764 48.5972,11.0764 48.5972,8.7589 54.5601,8.7589 54.5601,7.1173 48.5972,7.1173 48.5972,4.9378 54.9802,4.9378 54.9802,3.2962 "/>
|
||||
<polygon class="fil1" points="88.1501,3.2962 88.1501,12.7179 96.1459,12.7179 96.1459,11.0764 89.7628,11.0764 89.7628,8.7589 95.7258,8.7589 95.7258,7.1173 89.7628,7.1173 89.7628,4.9378 96.1459,4.9378 96.1459,3.2962 "/>
|
||||
<line class="fil0 str1" x1="7.1315" y1="6.2523" x2="14.2631" y2= "3.9077" />
|
||||
<line class="fil0" x1="7.1315" y1="8.2061" x2="14.2631" y2= "5.8615" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
@@ -0,0 +1,42 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW 2021.5 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="210.689mm" height="31.2553mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 109.6701 16.2693"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.str0 {stroke:#0BA49A;stroke-width:0.0397;stroke-miterlimit:22.9256}
|
||||
.fil4 {fill:none}
|
||||
.fil3 {fill:#625E5D}
|
||||
.fil2 {fill:#0BA49A}
|
||||
.fil1 {fill:#54504F}
|
||||
.fil0 {fill:#A7A9AA}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<polygon class="fil0" points="14.2357,10.9205 16.2694,10.2519 16.2694,15.6007 14.2357,16.2693 "/>
|
||||
<polygon class="fil1" points="14.2357,16.2693 8.1347,14.2635 10.8462,13.3721 14.2357,14.4863 "/>
|
||||
<polygon class="fil1" points="2.0337,3.7887 8.1347,1.7829 13.5578,3.5659 16.2694,2.6744 8.1347,0 -0,2.6744 -0,15.6007 2.0337,16.2693 "/>
|
||||
<polygon class="fil0" points="2.0337,14.4864 8.1347,12.4806 10.8462,13.3721 2.0337,16.2693 "/>
|
||||
<polygon class="fil0" points="8.1347,5.3488 16.2694,2.6744 16.2694,4.4574 8.1347,7.1317 "/>
|
||||
<polygon class="fil2" points="8.1347,7.1318 16.2694,4.4574 16.2694,6.686 8.1347,9.3604 "/>
|
||||
<polygon class="fil0" points="8.1347,9.3604 16.2694,6.686 16.2694,8.469 8.1347,11.1433 "/>
|
||||
<polygon class="fil1" points="8.1347,7.1318 4.0673,5.7945 4.0673,4.0116 8.1347,5.3488 "/>
|
||||
<polygon class="fil1" points="8.1347,11.1433 4.0673,9.8062 4.0673,8.0232 8.1347,9.3604 "/>
|
||||
<polygon class="fil1" points="32.4155,3.7599 32.4155,14.5069 41.5359,14.5069 41.5359,12.6344 34.255,12.6344 34.255,9.9909 41.0567,9.9909 41.0567,8.1185 34.255,8.1185 34.255,5.6323 41.5359,5.6323 41.5359,3.7599 "/>
|
||||
<polygon class="fil1" points="44.9368,12.6344 44.9368,12.6344 52.2022,12.6344 52.2022,14.5069 43.0973,14.5069 43.0973,3.7599 44.9368,3.7599 "/>
|
||||
<polygon class="fil3" points="68.279,9.5518 68.279,9.5518 68.279,14.5069 70.1031,14.5069 70.1031,5.6323 74.2614,5.6323 74.2614,3.7599 64.1052,3.7599 64.1052,5.6323 68.279,5.6323 68.279,5.6324 68.279,5.6324 68.279,9.5518 "/>
|
||||
<path class="fil3" d="M95.685 10.2899l0 0 -2.9264 0 0 -0.7839 0.0001 0 0 -0.9312 6.106 0 0 5.9321 -5.9669 0c-1.5354,0 -2.8058,-0.5193 -3.8105,-1.5578 -1.0048,-1.0384 -1.5072,-2.3497 -1.5072,-3.9337 0,-1.5736 0.4973,-2.8429 1.4917,-3.8079 0.9945,-0.965 2.2699,-1.4476 3.826,-1.4476l5.225 0 0 1.8725 -5.225 0c-1.0098,0 -1.8422,0.3305 -2.4966,0.9913 -0.6543,0.6608 -0.9816,1.5106 -0.9816,2.549 0,1.028 0.3273,1.862 0.9816,2.5019 0.6544,0.6399 1.4866,0.9598 2.4966,0.9598l3.7384 0.0002c0.1845,0 0.389,-0.2101 0.389,-0.3954l0 -1.9491 -1.3403 -0.0002z"/>
|
||||
<path class="fil3" d="M81.433 9.6133l0 0c0.4139,0 0.2118,-0.8901 0,-1.2473l-1.09 -1.8393 -4.7612 7.9803 -2.3626 0 5.7351 -9.7242c0.1474,-0.2499 0.343,-0.4856 0.6029,-0.6924 0.3069,-0.2442 0.5874,-0.3619 0.8348,-0.3619 0.2679,0 0.5466,0.1149 0.8347,0.3462 0.2477,0.1988 0.4466,0.4364 0.6029,0.7081l5.596 9.7242 -2.3729 -0.0158 -1.5702 -2.6701c-0.1144,-0.1946 -0.3617,-0.3353 -0.5866,-0.3353l-4.6216 0 1.1104 -1.8725 2.0484 0z"/>
|
||||
<path class="fil1" d="M30.4832 11.3756c0,0.4616 -0.1134,0.8969 -0.3401,1.306 -0.6802,1.2064 -1.9684,1.8095 -3.8646,1.8095l-6.7553 0 0 -10.747 6.7553 0c1.8035,0 3.0659,0.5717 3.7873,1.7151 0.2782,0.4616 0.4174,0.9546 0.4174,1.4791 0,0.8916 -0.371,1.6416 -1.113,2.25 0.742,0.5875 1.113,1.3165 1.113,2.1872zm-8.0383 -2.3317l0 0 0 0 0 -0.7839 3.4726 0 0 0 0.6393 0c0.5153,0 0.974,-0.0944 1.3758,-0.2832 0.5153,-0.2413 0.7729,-0.5927 0.7729,-1.0542 0,-0.4511 -0.2576,-0.7973 -0.7729,-1.0386 -0.4018,-0.1783 -0.8605,-0.2674 -1.3758,-0.2674l-5.194 0 0 7.002 5.194 0c0.505,0 0.9533,-0.0787 1.3449,-0.236 0.5358,-0.2308 0.8038,-0.5612 0.8038,-0.9913 0,-0.4406 -0.268,-0.7763 -0.8038,-1.007 -0.402,-0.1679 -0.8503,-0.2518 -1.3449,-0.2518l-4.1119 0 0 -1.0886z"/>
|
||||
<polygon class="fil1" points="53.5935,3.7599 53.5935,14.5069 62.714,14.5069 62.714,12.6344 55.4331,12.6344 55.4331,9.9909 62.2348,9.9909 62.2348,8.1185 55.4331,8.1185 55.4331,5.6323 62.714,5.6323 62.714,3.7599 "/>
|
||||
<polygon class="fil3" points="100.5497,3.7599 100.5497,14.5069 109.6701,14.5069 109.6701,12.6344 102.3892,12.6344 102.3892,9.9909 109.1909,9.9909 109.1909,8.1185 102.3892,8.1185 102.3892,5.6323 109.6701,5.6323 109.6701,3.7599 "/>
|
||||
<line class="fil4 str0" x1="8.1347" y1="7.1317" x2="16.2694" y2= "4.4574" />
|
||||
<line class="fil4" x1="8.1347" y1="9.3604" x2="16.2694" y2= "6.686" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
@@ -23,6 +23,10 @@ export const COMPANIES: Record<CompanyId, Company> = {
|
||||
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",
|
||||
|
||||
@@ -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<string, string> = {
|
||||
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<string | null>(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 (
|
||||
<div className="flex items-center gap-1.5">
|
||||
{logos.map((companyId) => {
|
||||
<div className="relative flex items-center gap-1">
|
||||
{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 (
|
||||
<button
|
||||
key={companyId}
|
||||
type="button"
|
||||
onClick={handleLogoClick}
|
||||
onClick={(e) => handleLogoClick(companyId, e)}
|
||||
className={cn(
|
||||
"relative shrink-0 rounded-md p-0.5 transition-all duration-300 hover:scale-110 focus:outline-none",
|
||||
shuffled && "animate-pulse",
|
||||
"relative shrink-0 rounded-md p-0.5 transition-all duration-200 hover:scale-110 focus:outline-none",
|
||||
glow,
|
||||
isAnimating && animation,
|
||||
)}
|
||||
title={company.shortName}
|
||||
>
|
||||
<Image
|
||||
src={logoSrc}
|
||||
alt={company.shortName}
|
||||
width={36}
|
||||
height={36}
|
||||
className="h-9 w-9 object-contain"
|
||||
width={32}
|
||||
height={32}
|
||||
className="h-8 w-8 object-contain"
|
||||
suppressHydrationWarning
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Confetti burst on secret combo */}
|
||||
{showConfetti && (
|
||||
<div className="pointer-events-none absolute -top-2 left-1/2 -translate-x-1/2 z-50">
|
||||
<div className="flex gap-0.5 animate-[fadeIn_0.2s_ease-in]">
|
||||
{["🎉", "✨", "🏗️", "✨", "🎉"].map((emoji, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="text-sm animate-[bounce_0.6s_ease-in-out]"
|
||||
style={{ animationDelay: `${i * 80}ms` }}
|
||||
>
|
||||
{emoji}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-0.5 whitespace-nowrap text-center text-[9px] font-bold text-primary animate-[pulse_0.5s_ease-in-out_infinite]">
|
||||
Echipa completă!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user