From 73d61c5737c354f514f3d51d5553d7aefd11e81d Mon Sep 17 00:00:00 2001 From: Dipanshu Rawat Date: Fri, 3 Oct 2025 10:20:53 +0530 Subject: [PATCH 1/4] fix: footer copyright alignment --- src/theme/Footer/Layout/enhanced-footer.css | 530 +++++++++++++------- src/theme/Footer/Layout/index.tsx | 15 +- 2 files changed, 351 insertions(+), 194 deletions(-) diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css index 86a1f034..afb3439f 100644 --- a/src/theme/Footer/Layout/enhanced-footer.css +++ b/src/theme/Footer/Layout/enhanced-footer.css @@ -2,7 +2,8 @@ /* Keyframe Animations */ @keyframes linkPulse { - 0%, 100% { + 0%, + 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); } 50% { @@ -11,7 +12,8 @@ } @keyframes iconBounce { - 0%, 100% { + 0%, + 100% { transform: scale(1) rotate(0deg); } 50% { @@ -29,7 +31,8 @@ } @keyframes statGlow { - 0%, 100% { + 0%, + 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); } 50% { @@ -38,7 +41,8 @@ } @keyframes numberPulse { - 0%, 100% { + 0%, + 100% { transform: scale(1); } 50% { @@ -46,8 +50,16 @@ } } .enhanced-footer { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; - background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + sans-serif !important; + background: linear-gradient( + 135deg, + #0f0f23 0%, + #1a1a2e 25%, + #16213e 50%, + #0f3460 75%, + #533483 100% + ) !important; color: #e2e8f0 !important; position: relative; overflow: hidden; @@ -70,164 +82,208 @@ .enhanced-footer ul, .enhanced-footer button, .enhanced-footer input, -[data-theme='dark'] .enhanced-footer, -[data-theme='light'] .enhanced-footer, -html[data-theme='dark'] .enhanced-footer, -html[data-theme='light'] .enhanced-footer, -[data-theme='dark'] .enhanced-footer *, -[data-theme='light'] .enhanced-footer *, -[data-theme='dark'] .enhanced-footer h1, -[data-theme='dark'] .enhanced-footer h2, -[data-theme='dark'] .enhanced-footer h3, -[data-theme='dark'] .enhanced-footer h4, -[data-theme='dark'] .enhanced-footer h5, -[data-theme='dark'] .enhanced-footer h6, -[data-theme='dark'] .enhanced-footer p, -[data-theme='dark'] .enhanced-footer span, -[data-theme='dark'] .enhanced-footer div, -[data-theme='dark'] .enhanced-footer a, -[data-theme='dark'] .enhanced-footer li, -[data-theme='dark'] .enhanced-footer ul, -[data-theme='dark'] .enhanced-footer button, -[data-theme='dark'] .enhanced-footer input, -[data-theme='light'] .enhanced-footer h1, -[data-theme='light'] .enhanced-footer h2, -[data-theme='light'] .enhanced-footer h3, -[data-theme='light'] .enhanced-footer h4, -[data-theme='light'] .enhanced-footer h5, -[data-theme='light'] .enhanced-footer h6, -[data-theme='light'] .enhanced-footer p, -[data-theme='light'] .enhanced-footer span, -[data-theme='light'] .enhanced-footer div, -[data-theme='light'] .enhanced-footer a, -[data-theme='light'] .enhanced-footer li, -[data-theme='light'] .enhanced-footer ul, -[data-theme='light'] .enhanced-footer button, -[data-theme='light'] .enhanced-footer input, -html[data-theme='dark'] .enhanced-footer *, -html[data-theme='light'] .enhanced-footer * { +[data-theme="dark"] .enhanced-footer, +[data-theme="light"] .enhanced-footer, +html[data-theme="dark"] .enhanced-footer, +html[data-theme="light"] .enhanced-footer, +[data-theme="dark"] .enhanced-footer *, +[data-theme="light"] .enhanced-footer *, +[data-theme="dark"] .enhanced-footer h1, +[data-theme="dark"] .enhanced-footer h2, +[data-theme="dark"] .enhanced-footer h3, +[data-theme="dark"] .enhanced-footer h4, +[data-theme="dark"] .enhanced-footer h5, +[data-theme="dark"] .enhanced-footer h6, +[data-theme="dark"] .enhanced-footer p, +[data-theme="dark"] .enhanced-footer span, +[data-theme="dark"] .enhanced-footer div, +[data-theme="dark"] .enhanced-footer a, +[data-theme="dark"] .enhanced-footer li, +[data-theme="dark"] .enhanced-footer ul, +[data-theme="dark"] .enhanced-footer button, +[data-theme="dark"] .enhanced-footer input, +[data-theme="light"] .enhanced-footer h1, +[data-theme="light"] .enhanced-footer h2, +[data-theme="light"] .enhanced-footer h3, +[data-theme="light"] .enhanced-footer h4, +[data-theme="light"] .enhanced-footer h5, +[data-theme="light"] .enhanced-footer h6, +[data-theme="light"] .enhanced-footer p, +[data-theme="light"] .enhanced-footer span, +[data-theme="light"] .enhanced-footer div, +[data-theme="light"] .enhanced-footer a, +[data-theme="light"] .enhanced-footer li, +[data-theme="light"] .enhanced-footer ul, +[data-theme="light"] .enhanced-footer button, +[data-theme="light"] .enhanced-footer input, +html[data-theme="dark"] .enhanced-footer *, +html[data-theme="light"] .enhanced-footer * { background-color: inherit !important; color: inherit !important; } /* Force the main footer background and colors to never change */ .enhanced-footer { - background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important; + background: linear-gradient( + 135deg, + #0f0f23 0%, + #1a1a2e 25%, + #16213e 50%, + #0f3460 75%, + #533483 100% + ) !important; color: #e2e8f0 !important; } /* Absolute protection against any theme changes */ -[data-theme='dark'] .enhanced-footer, -[data-theme='light'] .enhanced-footer, -html[data-theme='dark'] .enhanced-footer, -html[data-theme='light'] .enhanced-footer { - background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%) !important; +[data-theme="dark"] .enhanced-footer, +[data-theme="light"] .enhanced-footer, +html[data-theme="dark"] .enhanced-footer, +html[data-theme="light"] .enhanced-footer { + background: linear-gradient( + 135deg, + #0f0f23 0%, + #1a1a2e 25%, + #16213e 50%, + #0f3460 75%, + #533483 100% + ) !important; color: #e2e8f0 !important; } /* Force all text elements to maintain their colors */ -[data-theme='dark'] .enhanced-footer h1, -[data-theme='dark'] .enhanced-footer h2, -[data-theme='dark'] .enhanced-footer h3, -[data-theme='dark'] .enhanced-footer h4, -[data-theme='dark'] .enhanced-footer h5, -[data-theme='dark'] .enhanced-footer h6, -[data-theme='light'] .enhanced-footer h1, -[data-theme='light'] .enhanced-footer h2, -[data-theme='light'] .enhanced-footer h3, -[data-theme='light'] .enhanced-footer h4, -[data-theme='light'] .enhanced-footer h5, -[data-theme='light'] .enhanced-footer h6 { +[data-theme="dark"] .enhanced-footer h1, +[data-theme="dark"] .enhanced-footer h2, +[data-theme="dark"] .enhanced-footer h3, +[data-theme="dark"] .enhanced-footer h4, +[data-theme="dark"] .enhanced-footer h5, +[data-theme="dark"] .enhanced-footer h6, +[data-theme="light"] .enhanced-footer h1, +[data-theme="light"] .enhanced-footer h2, +[data-theme="light"] .enhanced-footer h3, +[data-theme="light"] .enhanced-footer h4, +[data-theme="light"] .enhanced-footer h5, +[data-theme="light"] .enhanced-footer h6 { color: #ffffff !important; } -[data-theme='dark'] .enhanced-footer p, -[data-theme='dark'] .enhanced-footer span, -[data-theme='dark'] .enhanced-footer div, -[data-theme='dark'] .enhanced-footer li, -[data-theme='light'] .enhanced-footer p, -[data-theme='light'] .enhanced-footer span, -[data-theme='light'] .enhanced-footer div, -[data-theme='light'] .enhanced-footer li { +[data-theme="dark"] .enhanced-footer p, +[data-theme="dark"] .enhanced-footer span, +[data-theme="dark"] .enhanced-footer div, +[data-theme="dark"] .enhanced-footer li, +[data-theme="light"] .enhanced-footer p, +[data-theme="light"] .enhanced-footer span, +[data-theme="light"] .enhanced-footer div, +[data-theme="light"] .enhanced-footer li { color: #e2e8f0 !important; } -[data-theme='dark'] .enhanced-footer a, -[data-theme='light'] .enhanced-footer a { +[data-theme="dark"] .enhanced-footer a, +[data-theme="light"] .enhanced-footer a { color: #cbd5e1 !important; } -[data-theme='dark'] .enhanced-footer a:hover, -[data-theme='light'] .enhanced-footer a:hover { +[data-theme="dark"] .enhanced-footer a:hover, +[data-theme="light"] .enhanced-footer a:hover { color: #ffffff !important; } /* Specific protection for footer elements */ -[data-theme='dark'] .enhanced-footer .footer-brand-title, -[data-theme='light'] .enhanced-footer .footer-brand-title { +[data-theme="dark"] .enhanced-footer .footer-brand-title, +[data-theme="light"] .enhanced-footer .footer-brand-title { color: #ffffff !important; } -[data-theme='dark'] .enhanced-footer .footer-column-title, -[data-theme='light'] .enhanced-footer .footer-column-title { +[data-theme="dark"] .enhanced-footer .footer-column-title, +[data-theme="light"] .enhanced-footer .footer-column-title { color: #ffffff !important; } -[data-theme='dark'] .enhanced-footer .footer-link, -[data-theme='light'] .enhanced-footer .footer-link { +[data-theme="dark"] .enhanced-footer .footer-link, +[data-theme="light"] .enhanced-footer .footer-link { color: #cbd5e1 !important; } -[data-theme='dark'] .enhanced-footer .footer-link:hover, -[data-theme='light'] .enhanced-footer .footer-link:hover { +[data-theme="dark"] .enhanced-footer .footer-link:hover, +[data-theme="light"] .enhanced-footer .footer-link:hover { color: #ffffff !important; } -[data-theme='dark'] .enhanced-footer .footer-copyright, -[data-theme='light'] .enhanced-footer .footer-copyright { +[data-theme="dark"] .enhanced-footer .footer-copyright, +[data-theme="light"] .enhanced-footer .footer-copyright { color: #94a3b8 !important; } -[data-theme='dark'] .enhanced-footer .legal-link, -[data-theme='light'] .enhanced-footer .legal-link { +[data-theme="dark"] .enhanced-footer .legal-link, +[data-theme="light"] .enhanced-footer .legal-link { color: #94a3b8 !important; } -[data-theme='dark'] .enhanced-footer .legal-link:hover, -[data-theme='light'] .enhanced-footer .legal-link:hover { +[data-theme="dark"] .enhanced-footer .legal-link:hover, +[data-theme="light"] .enhanced-footer .legal-link:hover { color: #ffffff !important; } /* Add animated background pattern */ .enhanced-footer::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: - radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.08) 0%, transparent 60%), - radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.06) 0%, transparent 60%), - radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.04) 0%, transparent 60%), - radial-gradient(circle at 60% 70%, rgba(167, 139, 250, 0.05) 0%, transparent 50%); + background: radial-gradient( + circle at 20% 80%, + rgba(120, 119, 198, 0.08) 0%, + transparent 60% + ), + radial-gradient( + circle at 80% 20%, + rgba(255, 119, 198, 0.06) 0%, + transparent 60% + ), + radial-gradient( + circle at 40% 40%, + rgba(120, 219, 255, 0.04) 0%, + transparent 60% + ), + radial-gradient( + circle at 60% 70%, + rgba(167, 139, 250, 0.05) 0%, + transparent 50% + ); animation: backgroundShift 25s ease-in-out infinite; pointer-events: none; } /* Additional floating particles */ .enhanced-footer::after { - content: ''; + content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background-image: - radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.1), transparent), - radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.08), transparent), - radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.06), transparent), - radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.04), transparent); + background-image: radial-gradient( + 2px 2px at 20px 30px, + rgba(255, 255, 255, 0.1), + transparent + ), + radial-gradient( + 2px 2px at 40px 70px, + rgba(255, 255, 255, 0.08), + transparent + ), + radial-gradient( + 1px 1px at 90px 40px, + rgba(255, 255, 255, 0.06), + transparent + ), + radial-gradient( + 1px 1px at 130px 80px, + rgba(255, 255, 255, 0.04), + transparent + ); background-repeat: repeat; background-size: 150px 100px; animation: particleFloat 30s linear infinite; @@ -236,7 +292,8 @@ html[data-theme='light'] .enhanced-footer { } @keyframes backgroundShift { - 0%, 100% { + 0%, + 100% { opacity: 1; transform: translateX(0px) translateY(0px) scale(1); } @@ -255,10 +312,18 @@ html[data-theme='light'] .enhanced-footer { } @keyframes particleFloat { - 0% { transform: translateY(0px) translateX(0px); } - 33% { transform: translateY(-10px) translateX(10px); } - 66% { transform: translateY(5px) translateX(-5px); } - 100% { transform: translateY(0px) translateX(0px); } + 0% { + transform: translateY(0px) translateX(0px); + } + 33% { + transform: translateY(-10px) translateX(10px); + } + 66% { + transform: translateY(5px) translateX(-5px); + } + 100% { + transform: translateY(0px) translateX(0px); + } } /* NO THEME OVERRIDES - FOOTER STAYS THE SAME ALWAYS */ @@ -299,17 +364,15 @@ html[data-theme='light'] .enhanced-footer { display: flex; align-items: center; justify-content: center; - box-shadow: - 0 4px 16px rgba(102, 126, 234, 0.4), - 0 0 0 1px rgba(255, 255, 255, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4), + 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); position: relative; transition: all 0.3s ease; cursor: pointer; } .logo-container::before { - content: ''; + content: ""; position: absolute; inset: 0; border-radius: 16px; @@ -327,10 +390,8 @@ html[data-theme='light'] .enhanced-footer { .logo-container:hover { transform: translateY(-2px) scale(1.05); - box-shadow: - 0 12px 40px rgba(102, 126, 234, 0.5), - 0 0 0 1px rgba(255, 255, 255, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); + box-shadow: 0 12px 40px rgba(102, 126, 234, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .footer-logo-img { @@ -359,7 +420,8 @@ html[data-theme='light'] .enhanced-footer { text-align: center; letter-spacing: -1px; margin: 0; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", + sans-serif; } .footer-trust-badge { @@ -381,11 +443,21 @@ html[data-theme='light'] .enhanced-footer { animation: starGlow 2s ease-in-out infinite alternate; } -.trust-stars .star:nth-child(1) { animation-delay: 0s; } -.trust-stars .star:nth-child(2) { animation-delay: 0.1s; } -.trust-stars .star:nth-child(3) { animation-delay: 0.2s; } -.trust-stars .star:nth-child(4) { animation-delay: 0.3s; } -.trust-stars .star:nth-child(5) { animation-delay: 0.4s; } +.trust-stars .star:nth-child(1) { + animation-delay: 0s; +} +.trust-stars .star:nth-child(2) { + animation-delay: 0.1s; +} +.trust-stars .star:nth-child(3) { + animation-delay: 0.2s; +} +.trust-stars .star:nth-child(4) { + animation-delay: 0.3s; +} +.trust-stars .star:nth-child(5) { + animation-delay: 0.4s; +} .trust-text { font-size: 12px; @@ -456,8 +528,13 @@ html[data-theme='light'] .enhanced-footer { } @keyframes starGlow { - 0%, 100% { filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3)); } - 50% { filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.6)); } + 0%, + 100% { + filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3)); + } + 50% { + filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.6)); + } } .rating-text { @@ -471,7 +548,13 @@ html[data-theme='light'] .enhanced-footer { .footer-hero-text h1 { font-size: 32px; font-weight: 900; - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 30%, #e2e8f0 60%, #cbd5e1 100%); + background: linear-gradient( + 135deg, + #ffffff 0%, + #f8fafc 30%, + #e2e8f0 60%, + #cbd5e1 100% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -487,14 +570,27 @@ html[data-theme='light'] .enhanced-footer { } @keyframes titleGlow { - 0%, 100% { - background: linear-gradient(135deg, #ffffff 0%, #f8fafc 30%, #e2e8f0 60%, #cbd5e1 100%); + 0%, + 100% { + background: linear-gradient( + 135deg, + #ffffff 0%, + #f8fafc 30%, + #e2e8f0 60%, + #cbd5e1 100% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } 50% { - background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #ffffff 100%); + background: linear-gradient( + 135deg, + #667eea 0%, + #764ba2 30%, + #f093fb 60%, + #ffffff 100% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -538,13 +634,18 @@ html[data-theme='light'] .enhanced-footer { } .stat-item::before { - content: ''; + content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.1), + transparent + ); transition: left 0.6s ease; } @@ -553,10 +654,8 @@ html[data-theme='light'] .enhanced-footer { transform: translateY(-4px) scale(1.02); background: rgba(255, 255, 255, 0.06); border-color: rgba(102, 126, 234, 0.3); - box-shadow: - 0 12px 30px rgba(0, 0, 0, 0.2), - 0 4px 15px rgba(102, 126, 234, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2), + 0 4px 15px rgba(102, 126, 234, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); cursor: default; } @@ -690,13 +789,17 @@ html[data-theme='light'] .enhanced-footer { } .footer-column::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; - background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(240, 147, 251, 0.03) 100%); + background: linear-gradient( + 135deg, + rgba(102, 126, 234, 0.03) 0%, + rgba(240, 147, 251, 0.03) 100% + ); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; @@ -710,7 +813,8 @@ html[data-theme='light'] .enhanced-footer { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); transform: translateY(-4px); - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(102, 126, 234, 0.1); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), + 0 6px 20px rgba(102, 126, 234, 0.1); } .footer-column-title { @@ -782,26 +886,36 @@ html[data-theme='light'] .enhanced-footer { } .footer-link::before { - content: ''; + content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; - background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 50%, rgba(240, 147, 251, 0.15) 100%); + background: linear-gradient( + 135deg, + rgba(102, 126, 234, 0.15) 0%, + rgba(118, 75, 162, 0.15) 50%, + rgba(240, 147, 251, 0.15) 100% + ); transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: 12px; z-index: 0; } .footer-link::after { - content: ''; + content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.1), + transparent + ); transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: 12px; z-index: 1; @@ -820,10 +934,8 @@ html[data-theme='light'] .enhanced-footer { background: rgba(255, 255, 255, 0.12); border-color: rgba(102, 126, 234, 0.3); transform: translateX(6px) translateY(-2px) scale(1.01); - box-shadow: - 0 8px 25px rgba(0, 0, 0, 0.2), - 0 4px 15px rgba(102, 126, 234, 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), + 0 4px 15px rgba(102, 126, 234, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); } @@ -840,9 +952,7 @@ html[data-theme='light'] .enhanced-footer { .footer-link:focus { outline: none; border-color: rgba(102, 126, 234, 0.5); - box-shadow: - 0 0 0 3px rgba(102, 126, 234, 0.2), - 0 8px 25px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), 0 8px 25px rgba(0, 0, 0, 0.15); animation: linkPulse 2s infinite; } @@ -997,10 +1107,8 @@ html[data-theme='light'] .enhanced-footer { font-weight: 700; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: - 0 8px 24px rgba(102, 126, 234, 0.4), - 0 0 0 1px rgba(255, 255, 255, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); + box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4), + 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; text-transform: uppercase; @@ -1008,13 +1116,18 @@ html[data-theme='light'] .enhanced-footer { } .newsletter-button::before { - content: ''; + content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); transition: left 0.6s ease; } @@ -1024,10 +1137,8 @@ html[data-theme='light'] .enhanced-footer { .newsletter-button:hover { transform: translateY(-2px) scale(1.02); - box-shadow: - 0 12px 32px rgba(102, 126, 234, 0.5), - 0 0 0 1px rgba(255, 255, 255, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); + box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .newsletter-button:active { @@ -1041,9 +1152,15 @@ html[data-theme='light'] .enhanced-footer { } @keyframes successPulse { - 0% { transform: scale(1); } - 50% { transform: scale(1.05); } - 100% { transform: scale(1); } + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } + 100% { + transform: scale(1); + } } .newsletter-button:disabled { @@ -1072,7 +1189,7 @@ html[data-theme='light'] .enhanced-footer { /* Newsletter-specific quick links styling */ .newsletter-quick-links { margin-top: 28px; - background: rgba(255,255,255,0.02); + background: rgba(255, 255, 255, 0.02); border-radius: 12px; padding: 18px 0 0 0; box-shadow: none; @@ -1092,8 +1209,8 @@ html[data-theme='light'] .enhanced-footer { } .newsletter-quick-links .quick-link { - background: rgba(255,255,255,0.04); - border: 1px solid rgba(255,255,255,0.08); + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; color: #cbd5e1; font-size: 13px; @@ -1104,7 +1221,7 @@ html[data-theme='light'] .enhanced-footer { } .newsletter-quick-links .quick-link:hover { - background: rgba(255,255,255,0.12); + background: rgba(255, 255, 255, 0.12); color: #fff; } @@ -1148,24 +1265,33 @@ html[data-theme='light'] .enhanced-footer { } .quick-link::before { - content: ''; + content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.15), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(102, 126, 234, 0.15), + transparent + ); transition: left 0.6s ease; } .quick-link::after { - content: ''; + content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; - background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(240, 147, 251, 0.1) 100%); + background: linear-gradient( + 135deg, + rgba(102, 126, 234, 0.1) 0%, + rgba(240, 147, 251, 0.1) 100% + ); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 10px; } @@ -1183,7 +1309,8 @@ html[data-theme='light'] .enhanced-footer { border-color: rgba(102, 126, 234, 0.4); color: #ffffff; transform: translateY(-3px) translateX(2px); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(102, 126, 234, 0.15); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), + 0 4px 12px rgba(102, 126, 234, 0.15); } .quick-link-icon { @@ -1210,9 +1337,9 @@ html[data-theme='light'] .enhanced-footer { .footer-bottom-content { display: grid; - grid-template-columns: 1fr auto 1fr; + grid-template-columns: 1fr auto; align-items: center; - gap: 24px; + gap: 20px; padding: 0 16px; } @@ -1253,13 +1380,18 @@ html[data-theme='light'] .enhanced-footer { } .social-link::before { - content: ''; + content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.1), + transparent + ); transition: left 0.6s ease; } @@ -1339,13 +1471,17 @@ html[data-theme='light'] .enhanced-footer { } .legal-link::before { - content: ''; + content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; - background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); + background: linear-gradient( + 135deg, + rgba(99, 102, 241, 0.1) 0%, + rgba(139, 92, 246, 0.1) 100% + ); transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 0; } @@ -1359,9 +1495,7 @@ html[data-theme='light'] .enhanced-footer { background: rgba(255, 255, 255, 0.08); border-color: rgba(99, 102, 241, 0.4); transform: translateY(-2px) scale(1.02); - box-shadow: - 0 6px 20px rgba(0, 0, 0, 0.15), - 0 2px 8px rgba(99, 102, 241, 0.2); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(99, 102, 241, 0.2); text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); } @@ -1373,6 +1507,7 @@ html[data-theme='light'] .enhanced-footer { .footer-bottom-right { display: flex; + width: 100%; justify-content: flex-end; } @@ -1382,6 +1517,18 @@ html[data-theme='light'] .enhanced-footer { font-size: 14px; line-height: 1.6; font-weight: 500; + width: 100%; +} + +.footer { + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.footer-content { + font-size: 18px; } .newsletter-input.input-error { @@ -1394,7 +1541,6 @@ html[data-theme='light'] .enhanced-footer { color: #e53e3e; } - /* Responsive Design */ @media (max-width: 1200px) { .footer-links-grid { @@ -1509,7 +1655,7 @@ html[data-theme='light'] .enhanced-footer { border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; margin: 0; - white-space: nowrap; /* mobile-friendly single line; content fits */ + white-space: nowrap; /* mobile-friendly single line; content fits */ } .footer-link:hover { @@ -1568,8 +1714,7 @@ html[data-theme='light'] .enhanced-footer { /* Optimize hover effects for mobile */ .footer-link:hover { transform: translateX(4px) translateY(-1px) scale(1.01); - box-shadow: - 0 6px 20px rgba(0, 0, 0, 0.15), + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(102, 126, 234, 0.1); } @@ -1702,8 +1847,7 @@ html[data-theme='light'] .enhanced-footer { /* Mobile-optimized stat item hover effects */ .stat-item:hover { transform: translateY(-2px) scale(1.01); - box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.15), + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(102, 126, 234, 0.1); } @@ -1736,11 +1880,18 @@ html[data-theme='light'] .enhanced-footer { animation: fadeInUp 0.6s ease-out; } -.stat-item:nth-child(1) { animation-delay: 0.1s; } -.stat-item:nth-child(2) { animation-delay: 0.2s; } -.stat-item:nth-child(3) { animation-delay: 0.3s; } -.stat-item:nth-child(4) { animation-delay: 0.4s; } - +.stat-item:nth-child(1) { + animation-delay: 0.1s; +} +.stat-item:nth-child(2) { + animation-delay: 0.2s; +} +.stat-item:nth-child(3) { + animation-delay: 0.3s; +} +.stat-item:nth-child(4) { + animation-delay: 0.4s; +} /* Toast Notification Styles */ .newsletter-toast { @@ -1759,12 +1910,11 @@ html[data-theme='light'] .enhanced-footer { border-radius: 8px; padding: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); - border-left: 4px solid #4CAF50; + border-left: 4px solid #4caf50; max-width: 350px; opacity: 1 !important; } - .toast-icon { font-size: 24px; margin-right: 12px; @@ -1820,8 +1970,8 @@ html[data-theme='light'] .enhanced-footer { right: 10px; left: 10px; } - + .toast-content { max-width: none; } -} \ No newline at end of file +} diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx index 47fefe48..3cd6d678 100644 --- a/src/theme/Footer/Layout/index.tsx +++ b/src/theme/Footer/Layout/index.tsx @@ -55,10 +55,10 @@ export default function FooterLayout({ fetchStats(); const interval = setInterval(fetchStats, 30000); // Update every 30 seconds - + return () => clearInterval(interval); }, []); - + const handleSubscribe = (e: React.FormEvent) => { e.preventDefault(); @@ -465,13 +465,20 @@ export default function FooterLayout({ -
+ {/*
© {currentYear} recodehive. Made with ❤️ by the Community.
-
+
*/} + + +
+
+ + © {currentYear} recodehive. Made with ❤️ by the Community. +
From 8376673e25fca0420f7c2b34758de8a5f51e0cc2 Mon Sep 17 00:00:00 2001 From: Dipanshu Rawat Date: Sat, 4 Oct 2025 13:54:08 +0530 Subject: [PATCH 2/4] update css for form select --- src/pages/contact-us/index.css | 119 ++++++++++++++++++++++++++------- 1 file changed, 93 insertions(+), 26 deletions(-) diff --git a/src/pages/contact-us/index.css b/src/pages/contact-us/index.css index dba5797c..9d50ff2a 100644 --- a/src/pages/contact-us/index.css +++ b/src/pages/contact-us/index.css @@ -1,6 +1,13 @@ :root { /* Dark Theme Variables (Default) */ - --contact-bg-primary: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%); + --contact-bg-primary: linear-gradient( + 135deg, + #0f0f23 0%, + #1a1a2e 25%, + #16213e 50%, + #0f3460 75%, + #533483 100% + ); --contact-bg-card: rgba(255, 255, 255, 0.03); --contact-bg-card-hover: rgba(255, 255, 255, 0.08); --contact-bg-secondary: rgba(255, 255, 255, 0.05); @@ -19,8 +26,15 @@ } /* Light Theme Variables */ -[data-theme='light'] { - --contact-bg-primary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%); +[data-theme="light"] { + --contact-bg-primary: linear-gradient( + 135deg, + #f8fafc 0%, + #e2e8f0 25%, + #cbd5e1 50%, + #94a3b8 75%, + #64748b 100% + ); --contact-bg-card: rgba(255, 255, 255, 0.9); --contact-bg-card-hover: rgba(255, 255, 255, 0.95); --contact-bg-secondary: rgba(255, 255, 255, 0.8); @@ -39,8 +53,15 @@ } /* Force theme variables on specific elements */ -html[data-theme='light'] { - --contact-bg-primary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #cbd5e1 50%, #94a3b8 75%, #64748b 100%); +html[data-theme="light"] { + --contact-bg-primary: linear-gradient( + 135deg, + #f8fafc 0%, + #e2e8f0 25%, + #cbd5e1 50%, + #94a3b8 75%, + #64748b 100% + ); --contact-bg-card: rgba(255, 255, 255, 0.9); --contact-bg-card-hover: rgba(255, 255, 255, 0.95); --contact-bg-secondary: rgba(255, 255, 255, 0.8); @@ -69,15 +90,25 @@ html[data-theme='light'] { } @keyframes backgroundShift { - 0%, 100% { transform: translateX(0px) translateY(0px) scale(1); } - 25% { transform: translateX(30px) translateY(-20px) scale(1.02); } - 50% { transform: translateX(-10px) translateY(30px) scale(0.98); } - 75% { transform: translateX(-25px) translateY(-15px) scale(1.01); } + 0%, + 100% { + transform: translateX(0px) translateY(0px) scale(1); + } + 25% { + transform: translateX(30px) translateY(-20px) scale(1.02); + } + 50% { + transform: translateX(-10px) translateY(30px) scale(0.98); + } + 75% { + transform: translateX(-25px) translateY(-15px) scale(1.01); + } } /* Main Container */ .enhanced-contact-container { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + sans-serif; background: var(--contact-bg-primary); color: var(--contact-text-secondary); min-height: 100vh; @@ -88,26 +119,48 @@ html[data-theme='light'] { /* Background Effects */ .enhanced-contact-container::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: - radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.08) 0%, transparent 60%), - radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.06) 0%, transparent 60%), - radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.04) 0%, transparent 60%); + background: radial-gradient( + circle at 20% 80%, + rgba(120, 119, 198, 0.08) 0%, + transparent 60% + ), + radial-gradient( + circle at 80% 20%, + rgba(255, 119, 198, 0.06) 0%, + transparent 60% + ), + radial-gradient( + circle at 40% 40%, + rgba(120, 219, 255, 0.04) 0%, + transparent 60% + ); animation: backgroundShift 25s ease-in-out infinite; pointer-events: none; } /* Light theme background effects */ -[data-theme='light'] .enhanced-contact-container::before { - background: - radial-gradient(circle at 20% 80%, rgba(79, 70, 229, 0.05) 0%, transparent 60%), - radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.04) 0%, transparent 60%), - radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.03) 0%, transparent 60%); +[data-theme="light"] .enhanced-contact-container::before { + background: radial-gradient( + circle at 20% 80%, + rgba(79, 70, 229, 0.05) 0%, + transparent 60% + ), + radial-gradient( + circle at 80% 20%, + rgba(124, 58, 237, 0.04) 0%, + transparent 60% + ), + radial-gradient( + circle at 40% 40%, + rgba(236, 72, 153, 0.03) 0%, + transparent 60% + ); } /* Content Wrapper */ @@ -129,7 +182,13 @@ html[data-theme='light'] { .contact-title { font-size: 3rem; font-weight: 900; - background: linear-gradient(135deg, var(--contact-text-primary) 0%, var(--contact-text-secondary) 30%, var(--contact-text-muted) 60%, var(--contact-text-dim) 100%); + background: linear-gradient( + 135deg, + var(--contact-text-primary) 0%, + var(--contact-text-secondary) 30%, + var(--contact-text-muted) 60%, + var(--contact-text-dim) 100% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -374,19 +433,27 @@ html[data-theme='light'] { padding-right: 2.5rem; } -[data-theme='light'] .form-select { +[data-theme="light"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); } -.form-select option { +[data-theme="dark"] .form-select { + background: #273254cf; +} + +/* .form-select option { background: var(--contact-bg-card); color: var(--contact-text-primary); -} +} */ .submit-button { width: 100%; padding: 0.875rem 1.5rem; - background: linear-gradient(135deg, var(--contact-accent-primary) 0%, var(--contact-accent-secondary) 100%); + background: linear-gradient( + 135deg, + var(--contact-accent-primary) 0%, + var(--contact-accent-secondary) 100% + ); color: white; border: none; border-radius: 0.75rem; @@ -503,4 +570,4 @@ html[data-theme='light'] { .resources-title { font-size: 1.25rem; } -} \ No newline at end of file +} From 55bff4eb002e6946d0431554f33bb53a9a12313c Mon Sep 17 00:00:00 2001 From: Dipanshu Rawat Date: Sat, 4 Oct 2025 13:54:20 +0530 Subject: [PATCH 3/4] formatting --- src/theme/Footer/index.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx index a14a2b7b..511ce78a 100644 --- a/src/theme/Footer/index.tsx +++ b/src/theme/Footer/index.tsx @@ -1,17 +1,16 @@ -import React from 'react'; -import {useThemeConfig} from '@docusaurus/theme-common'; -import FooterLayout from '@theme/Footer/Layout'; -import FooterCopyright from '@theme/Footer/Copyright'; -import FooterLogo from '@theme/Footer/Logo'; -import FooterLinks from '@theme/Footer/Links'; -import type {Props} from '@theme/Footer'; +import React, { JSX } from "react"; +import { useThemeConfig } from "@docusaurus/theme-common"; +import FooterLayout from "@theme/Footer/Layout"; +import FooterCopyright from "@theme/Footer/Copyright"; +import FooterLogo from "@theme/Footer/Logo"; +import FooterLinks from "@theme/Footer/Links"; function Footer(): JSX.Element | null { - const {footer} = useThemeConfig(); + const { footer } = useThemeConfig(); if (!footer) { return null; } - const {copyright, links, logo, style} = footer; + const { copyright, links, logo, style } = footer; return ( Date: Mon, 6 Oct 2025 20:34:10 +0530 Subject: [PATCH 4/4] revert changes --- src/pages/contact-us/index.css | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/pages/contact-us/index.css b/src/pages/contact-us/index.css index 9d50ff2a..a31f31f2 100644 --- a/src/pages/contact-us/index.css +++ b/src/pages/contact-us/index.css @@ -1,13 +1,6 @@ :root { /* Dark Theme Variables (Default) */ - --contact-bg-primary: linear-gradient( - 135deg, - #0f0f23 0%, - #1a1a2e 25%, - #16213e 50%, - #0f3460 75%, - #533483 100% - ); + --contact-bg-primary: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%); --contact-bg-card: rgba(255, 255, 255, 0.03); --contact-bg-card-hover: rgba(255, 255, 255, 0.08); --contact-bg-secondary: rgba(255, 255, 255, 0.05);