diff --git a/docs/python/python_operators.md b/docs/python/python_operators.md index 52fc7ef6..39c968cf 100644 --- a/docs/python/python_operators.md +++ b/docs/python/python_operators.md @@ -20,7 +20,6 @@ tags: In Python, **operators** are special symbols used to perform operations on variables and values. Python supports a wide variety of operators categorized based on their functionality. -## Arithmetic Operators. Used to perform basic mathematical operations: diff --git a/src/components/FloatingContributors/FloatingContributors.css b/src/components/FloatingContributors/FloatingContributors.css index 87a1f1d8..4194e600 100644 --- a/src/components/FloatingContributors/FloatingContributors.css +++ b/src/components/FloatingContributors/FloatingContributors.css @@ -9,14 +9,29 @@ width: calc(100vw - 48px); } +/* Header embedded version - relative positioning */ +.floating-contributors-container.header-embedded { + position: relative; + bottom: auto; + right: auto; + z-index: 1; + max-width: 480px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto; + pointer-events: auto; +} + .floating-contributors-card { background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(148, 163, 184, 0.2); - border-radius: 20px; - padding: 20px; - box-shadow: + border-radius: 24px; + padding: 24px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); @@ -25,23 +40,36 @@ overflow: hidden; color: white; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + min-width: 400px; } -/* Dark theme support */ +/* Header embedded version - larger size */ +.floating-contributors-container.header-embedded .floating-contributors-card { + min-width: 450px; + padding: 28px; + border-radius: 28px; +} + +/* Dark theme support - using website theme colors */ [data-theme='dark'] .floating-contributors-card { - background: rgba(30, 41, 59, 0.95); - border-color: rgba(148, 163, 184, 0.3); + background: rgba(26, 26, 26, 0.95); + border-color: rgba(45, 45, 45, 0.8); + color: #ffffff; + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.4), + 0 0 0 1px rgba(255, 255, 255, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.12); } -/* Light theme support */ +/* Light theme support - using website theme colors */ [data-theme='light'] .floating-contributors-card { - background: rgba(255, 255, 255, 0.95); - color: #1e293b; - border-color: rgba(148, 163, 184, 0.3); - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.1), + background: rgba(255, 255, 255, 0.98); + color: #1a202c; + border-color: rgba(0, 0, 0, 0.1); + box-shadow: + 0 25px 50px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05), - inset 0 1px 0 rgba(255, 255, 255, 0.8); + inset 0 1px 0 rgba(255, 255, 255, 0.9); } .floating-contributors-card::before { @@ -53,12 +81,17 @@ bottom: 0; background: linear-gradient( 135deg, - rgba(99, 102, 241, 0.1) 0%, - rgba(168, 85, 247, 0.05) 50%, - rgba(236, 72, 153, 0.1) 100% + rgba(102, 126, 234, 0.12) 0%, + rgba(118, 75, 162, 0.08) 50%, + rgba(37, 194, 160, 0.1) 100% ); pointer-events: none; - border-radius: 20px; + border-radius: 24px; +} + +/* Header embedded version gradient */ +.floating-contributors-container.header-embedded .floating-contributors-card::before { + border-radius: 28px; } /* Close button */ @@ -140,6 +173,14 @@ border-radius: 12px; margin-bottom: 16px; border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; +} + +.floating-contributors-activity:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(102, 126, 234, 0.3); + transform: translateY(-1px); } [data-theme='light'] .floating-contributors-activity { @@ -147,6 +188,11 @@ border-color: rgba(0, 0, 0, 0.1); } +[data-theme='light'] .floating-contributors-activity:hover { + background: rgba(102, 126, 234, 0.05); + border-color: rgba(102, 126, 234, 0.2); +} + .activity-avatar-container { position: relative; flex-shrink: 0; @@ -156,9 +202,16 @@ width: 40px; height: 40px; border-radius: 50%; - border: 2px solid rgba(99, 102, 241, 0.5); + border: 2px solid rgba(102, 126, 234, 0.5); object-fit: cover; - transition: all 0.3s ease; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; +} + +.activity-avatar:hover { + border-color: rgba(102, 126, 234, 0.8); + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); + transform: scale(1.05); } .activity-status-indicator { @@ -223,21 +276,21 @@ display: flex; align-items: center; gap: 4px; - background: rgba(99, 102, 241, 0.2); + background: rgba(102, 126, 234, 0.2); color: #a5b4fc; - padding: 2px 8px; - border-radius: 12px; + padding: 3px 10px; + border-radius: 14px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; - border: 1px solid rgba(99, 102, 241, 0.3); + border: 1px solid rgba(102, 126, 234, 0.3); } [data-theme='light'] .activity-action-badge { - background: rgba(99, 102, 241, 0.1); - color: #6366f1; - border-color: rgba(99, 102, 241, 0.2); + background: rgba(102, 126, 234, 0.1); + color: #667eea; + border-color: rgba(102, 126, 234, 0.2); } .action-icon { @@ -274,17 +327,17 @@ } .contributors-count { - background: rgba(99, 102, 241, 0.2); + background: rgba(102, 126, 234, 0.2); color: #a5b4fc; - padding: 2px 8px; - border-radius: 8px; + padding: 3px 10px; + border-radius: 10px; font-size: 11px; font-weight: 700; } [data-theme='light'] .contributors-count { - background: rgba(99, 102, 241, 0.1); - color: #6366f1; + background: rgba(102, 126, 234, 0.1); + color: #667eea; } .contributors-avatars { @@ -306,13 +359,14 @@ border: 2px solid rgba(255, 255, 255, 0.2); object-fit: cover; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - filter: grayscale(0.2); + filter: grayscale(0.1); } .contributor-avatar:hover { filter: grayscale(0); - border-color: rgba(99, 102, 241, 0.8); - box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); + border-color: rgba(102, 126, 234, 0.8); + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); + transform: scale(1.1); } [data-theme='light'] .contributor-avatar { @@ -320,14 +374,15 @@ } [data-theme='light'] .contributor-avatar:hover { - border-color: rgba(99, 102, 241, 0.8); + border-color: rgba(102, 126, 234, 0.8); + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15); } .contributor-tooltip { position: absolute; bottom: 100%; left: 50%; - transform: translateX(-50%); + transform: translateX(-50%) translateY(4px); background: rgba(0, 0, 0, 0.9); color: white; padding: 8px 12px; @@ -336,10 +391,11 @@ white-space: nowrap; opacity: 0; visibility: hidden; - transition: all 0.3s ease; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: 8px; z-index: 20; pointer-events: none; + backdrop-filter: blur(8px); } .contributor-tooltip::after { @@ -355,7 +411,7 @@ .contributor-avatar-wrapper:hover .contributor-tooltip { opacity: 1; visibility: visible; - transform: translateX(-50%) translateY(-4px); + transform: translateX(-50%) translateY(-8px); } .tooltip-name { @@ -380,6 +436,15 @@ font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.7); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; +} + +.contributors-more:hover { + background: rgba(102, 126, 234, 0.2); + border-color: rgba(102, 126, 234, 0.5); + color: rgba(255, 255, 255, 0.9); + transform: scale(1.1); } [data-theme='light'] .contributors-more { @@ -388,6 +453,12 @@ color: rgba(30, 41, 59, 0.7); } +[data-theme='light'] .contributors-more:hover { + background: rgba(102, 126, 234, 0.1); + border-color: rgba(102, 126, 234, 0.3); + color: rgba(30, 41, 59, 0.9); +} + /* Footer */ .floating-contributors-footer { border-top: 1px solid rgba(255, 255, 255, 0.1); @@ -402,20 +473,27 @@ display: flex; align-items: center; justify-content: center; - gap: 8px; + gap: 10px; width: 100%; - padding: 12px 16px; - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); + padding: 14px 20px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; - border-radius: 12px; - font-size: 14px; + border-radius: 16px; + font-size: 15px; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } +/* Header embedded version CTA */ +.floating-contributors-container.header-embedded .contributors-cta { + padding: 16px 24px; + font-size: 16px; + border-radius: 18px; +} + .contributors-cta::before { content: ''; position: absolute; @@ -432,10 +510,12 @@ } .contributors-cta:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4); + transform: translateY(-3px) scale(1.02); + box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4); color: white; text-decoration: none; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + filter: brightness(1.1); } .cta-icon { @@ -451,6 +531,13 @@ transform: translateX(4px); } +/* Add subtle glow effect for better visual feedback */ +.contributors-cta:hover { + box-shadow: + 0 12px 30px rgba(102, 126, 234, 0.4), + 0 0 20px rgba(102, 126, 234, 0.2); +} + /* Floating particles */ .floating-particles { position: absolute; @@ -480,6 +567,18 @@ background: rgba(236, 72, 153, 0.6); } +/* Large screens - limit max width for header embedded */ +@media (min-width: 1200px) { + .floating-contributors-container.header-embedded { + max-width: 520px; + } + + .floating-contributors-container.header-embedded .floating-contributors-card { + min-width: 500px; + padding: 32px; + } +} + /* Responsive design */ @media (max-width: 768px) { .floating-contributors-container { @@ -489,6 +588,17 @@ width: calc(100vw - 32px); } + /* Header embedded responsive adjustments */ + .floating-contributors-container.header-embedded { + max-width: 400px; + width: 100%; + } + + .floating-contributors-container.header-embedded .floating-contributors-card { + min-width: 380px; + padding: 22px; + } + .floating-contributors-card { padding: 16px; border-radius: 16px; @@ -536,6 +646,17 @@ width: calc(100vw - 24px); } + /* Header embedded responsive adjustments for small screens */ + .floating-contributors-container.header-embedded { + max-width: 340px; + width: 100%; + } + + .floating-contributors-container.header-embedded .floating-contributors-card { + min-width: 320px; + padding: 18px; + } + .floating-contributors-card { padding: 14px; border-radius: 14px; @@ -569,6 +690,22 @@ } } +/* Extra small screens */ +@media (max-width: 350px) { + .floating-contributors-container.header-embedded { + max-width: 280px; + } + + .floating-contributors-container.header-embedded .floating-contributors-card { + min-width: 260px; + padding: 16px; + } + + .floating-contributors-card { + padding: 12px; + } +} + /* Animation enhancements */ @keyframes float { 0%, 100% { @@ -592,6 +729,11 @@ animation: float 6s ease-in-out infinite; } +/* Disable floating animation when embedded in header */ +.floating-contributors-container.header-embedded .floating-contributors-card { + animation: none; +} + /* Accessibility improvements */ @media (prefers-reduced-motion: reduce) { .floating-contributors-card, @@ -658,22 +800,44 @@ } /* Hover effects for better interactivity */ +.floating-contributors-card { + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + .floating-contributors-card:hover { - transform: translateY(-4px); - box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.4), - 0 0 0 1px rgba(255, 255, 255, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); + transform: translateY(-2px) scale(1.02); + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.25); } [data-theme='light'] .floating-contributors-card:hover { - box-shadow: - 0 25px 50px rgba(0, 0, 0, 0.15), - 0 0 0 1px rgba(0, 0, 0, 0.1), + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.12), + 0 0 0 1px rgba(102, 126, 234, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9); } -/* Smooth transitions for theme switching */ +/* Subtle hover effects for header embedded version */ +.floating-contributors-container.header-embedded .floating-contributors-card:hover { + transform: scale(1.01); + box-shadow: + 0 30px 60px rgba(0, 0, 0, 0.35), + 0 0 0 1px rgba(102, 126, 234, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.15); + border-color: rgba(102, 126, 234, 0.3); +} + +[data-theme='light'] .floating-contributors-container.header-embedded .floating-contributors-card:hover { + box-shadow: + 0 30px 60px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(102, 126, 234, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.95); + border-color: rgba(102, 126, 234, 0.2); +} + +/* Smooth transitions for all interactive elements */ .floating-contributors-card, .floating-contributors-activity, .contributors-cta, @@ -685,6 +849,17 @@ .activity-action-badge, .contributors-count, .contributors-more, -.floating-contributors-close { - transition: all 0.3s ease; +.floating-contributors-close, +.contributor-avatar, +.activity-avatar, +.contributor-avatar-wrapper { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Enhanced hover transitions */ +.floating-contributors-card, +.contributors-cta, +.contributor-avatar, +.activity-avatar { + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } \ No newline at end of file diff --git a/src/components/FloatingContributors/index.tsx b/src/components/FloatingContributors/index.tsx index cbfad002..a423389e 100644 --- a/src/components/FloatingContributors/index.tsx +++ b/src/components/FloatingContributors/index.tsx @@ -17,18 +17,81 @@ interface ContributorActivity { timeAgo: string; } -const FloatingContributors: React.FC = () => { +interface FloatingContributorsProps { + headerEmbedded?: boolean; +} + +const FloatingContributors: React.FC = ({ headerEmbedded = false }) => { const [contributors, setContributors] = useState([]); const [activities, setActivities] = useState([]); const [currentActivityIndex, setCurrentActivityIndex] = useState(0); const [isVisible, setIsVisible] = useState(true); const [loading, setLoading] = useState(true); - // Fetch contributors from RecodeHive organization + + + // Initialize with fallback data immediately to ensure toaster always appears useEffect(() => { + // Set fallback data immediately + const initializeFallbackData = () => { + const demoContributors: Contributor[] = [ + { + id: '1', + login: 'sanjay-kv', + avatar_url: 'https://avatars.githubusercontent.com/u/30715153?v=4', + contributions: 127, + html_url: 'https://github.com/sanjay-kv', + lastActivity: '2 minutes ago', + }, + { + id: '2', + login: 'recodehive-team', + avatar_url: 'https://avatars.githubusercontent.com/u/150000000?v=4', + contributions: 89, + html_url: 'https://github.com/recodehive', + lastActivity: '5 minutes ago', + }, + { + id: '3', + login: 'contributor-1', + avatar_url: 'https://avatars.githubusercontent.com/u/1?v=4', + contributions: 64, + html_url: 'https://github.com/contributor-1', + lastActivity: '12 minutes ago', + }, + { + id: '4', + login: 'contributor-2', + avatar_url: 'https://avatars.githubusercontent.com/u/2?v=4', + contributions: 45, + html_url: 'https://github.com/contributor-2', + lastActivity: '1 hour ago', + }, + { + id: '5', + login: 'contributor-3', + avatar_url: 'https://avatars.githubusercontent.com/u/3?v=4', + contributions: 32, + html_url: 'https://github.com/contributor-3', + lastActivity: '3 hours ago', + }, + ]; + + setContributors(demoContributors); + setActivities(demoContributors.map(contributor => ({ + contributor, + action: getRandomAction(), + timeAgo: contributor.lastActivity, + }))); + setLoading(false); + }; + + // Initialize with fallback data immediately + initializeFallbackData(); + + // Then try to fetch real data const fetchContributors = async () => { try { - setLoading(true); // Fetch repositories from RecodeHive organization const reposResponse = await fetch('https://api.github.com/orgs/recodehive/repos?type=public&per_page=10&sort=updated'); @@ -84,57 +147,24 @@ const FloatingContributors: React.FC = () => { .sort((a, b) => b.contributions - a.contributions) .slice(0, 12); // Top 12 contributors - setContributors(contributorsList); - - // Generate activities - const generatedActivities: ContributorActivity[] = contributorsList.map(contributor => ({ - contributor, - action: getRandomAction(), - timeAgo: generateRandomTimeAgo(), - })); - - setActivities(generatedActivities); - setLoading(false); + // Only update if we got real data + if (contributorsList.length > 0) { + setContributors(contributorsList); + + // Generate activities + const generatedActivities: ContributorActivity[] = contributorsList.map(contributor => ({ + contributor, + action: getRandomAction(), + timeAgo: generateRandomTimeAgo(), + })); + + setActivities(generatedActivities); + } } catch (error) { // Silently handle GitHub API errors (rate limits, etc.) console.warn('Using fallback contributor data due to GitHub API limitations'); - - // Fallback demo data - const demoContributors: Contributor[] = [ - { - id: '1', - login: 'sanjay-kv', - avatar_url: 'https://avatars.githubusercontent.com/u/30715153?v=4', - contributions: 250, - html_url: 'https://github.com/sanjay-kv', - lastActivity: '2 minutes ago', - }, - { - id: '2', - login: 'vansh-codes', - avatar_url: 'https://avatars.githubusercontent.com/u/114163734?v=4', - contributions: 180, - html_url: 'https://github.com/vansh-codes', - lastActivity: '5 minutes ago', - }, - { - id: '3', - login: 'Hemu21', - avatar_url: 'https://avatars.githubusercontent.com/u/106808387?v=4', - contributions: 120, - html_url: 'https://github.com/Hemu21', - lastActivity: '1 hour ago', - }, - ]; - - setContributors(demoContributors); - setActivities(demoContributors.map(contributor => ({ - contributor, - action: getRandomAction(), - timeAgo: contributor.lastActivity, - }))); - setLoading(false); + // Fallback data is already initialized, so no need to set it again } }; @@ -211,26 +241,26 @@ const FloatingContributors: React.FC = () => { {isVisible && ( {/* Main floating card */} void; - }; - } -} +import FloatingContributors from "../FloatingContributors"; const HeaderContent = () => { return ( @@ -87,30 +79,11 @@ const HeaderContent = () => { ); }; -const HeaderImage = () => { - const imgRef = useRef(null); - - useEffect(() => { - if (imgRef.current) { - VanillaTilt.init(imgRef.current, { - max: 25, - speed: 50, - glare: true, - "max-glare": 0.5, - }); - } - - return () => { - if (imgRef.current?.vanillaTilt) { - imgRef.current.vanillaTilt.destroy(); - } - }; - }, []); - +const HeaderToaster = () => { return ( { delay: 0.3, }} className="chh__header-image" + style={{ + position: 'relative', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + minHeight: '400px', + width: '100%' + }} > - Animated illustration of Recode Hive learning + {/* Render the FloatingContributors component as the header toaster */} +
+ +
); }; @@ -136,7 +117,7 @@ const Header: React.FC = () => {
- +
); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index cc8d5e7b..99e4793e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -15,7 +15,6 @@ import { TestimonialCarousel } from "../components/testimonials/TestimonialCarou import { CommunityStatsProvider } from "../lib/statsProvider"; import { LandingCommunity } from "../components/Community"; import FAQs from "../components/faqs/faqs"; -import FloatingContributors from "../components/FloatingContributors"; export default function Home(): ReactNode { const { siteConfig } = useDocusaurusContext(); @@ -77,9 +76,6 @@ export default function Home(): ReactNode { - {/* Floating Contributors Showcase */} - - diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css index 9194553c..b685504f 100644 --- a/src/theme/Footer/Layout/enhanced-footer.css +++ b/src/theme/Footer/Layout/enhanced-footer.css @@ -1,4 +1,50 @@ /* Enhanced Footer Styles - COMPLETELY ISOLATED FROM THEME CHANGES */ + +/* Keyframe Animations */ +@keyframes linkPulse { + 0%, 100% { + box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); + } + 50% { + box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); + } +} + +@keyframes iconBounce { + 0%, 100% { + transform: scale(1) rotate(0deg); + } + 50% { + transform: scale(1.1) rotate(5deg); + } +} + +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +@keyframes statGlow { + 0%, 100% { + box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); + } + 50% { + box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.1); + } +} + +@keyframes numberPulse { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.02); + } +} .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; @@ -142,16 +188,6 @@ html[data-theme='light'] .enhanced-footer { color: #94a3b8 !important; } -[data-theme='dark'] .enhanced-footer .developer-link, -[data-theme='light'] .enhanced-footer .developer-link { - color: #fbbf24 !important; -} - -[data-theme='dark'] .enhanced-footer .developer-link:hover, -[data-theme='light'] .enhanced-footer .developer-link:hover { - color: #f59e0b !important; -} - [data-theme='dark'] .enhanced-footer .legal-link, [data-theme='light'] .enhanced-footer .legal-link { color: #94a3b8 !important; @@ -498,7 +534,7 @@ html[data-theme='light'] .enhanced-footer { text-align: center; position: relative; overflow: hidden; - cursor: pointer; + cursor: help; } .stat-item::before { @@ -512,18 +548,30 @@ html[data-theme='light'] .enhanced-footer { transition: left 0.6s ease; } +/* Subtle hover effects for stat boxes - informative but not clickable */ +.stat-item:hover { + 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); + cursor: default; +} + .stat-item:hover::before { left: 100%; } -.stat-item:hover { - transform: translateY(-8px) scale(1.02); - background: rgba(255, 255, 255, 0.08); - border-color: rgba(102, 126, 234, 0.4); - box-shadow: - 0 20px 40px rgba(0, 0, 0, 0.2), - 0 0 0 1px rgba(255, 255, 255, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.2); +.stat-item:focus { + outline: none; + animation: statGlow 2s infinite; +} + +.stat-item:focus-visible { + outline: 2px solid rgba(102, 126, 234, 0.6); + outline-offset: 2px; } .stat-icon { @@ -547,7 +595,8 @@ html[data-theme='light'] .enhanced-footer { .stat-item:hover .stat-icon { transform: scale(1.1) rotate(5deg); - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); + filter: brightness(1.1) saturate(1.2); } .stat-icon-learners { @@ -595,6 +644,7 @@ html[data-theme='light'] .enhanced-footer { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + text-shadow: 0 0 20px rgba(102, 126, 234, 0.3); } .stat-label { @@ -608,6 +658,7 @@ html[data-theme='light'] .enhanced-footer { .stat-item:hover .stat-label { color: #cbd5e1; + text-shadow: 0 0 8px rgba(203, 213, 225, 0.3); } /* Links Section */ @@ -626,6 +677,38 @@ html[data-theme='light'] .enhanced-footer { .footer-column { display: flex; flex-direction: column; + padding: 24px; + border-radius: 16px; + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: visible; +} + +.footer-column::before { + 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%); + opacity: 0; + transition: opacity 0.4s ease; + pointer-events: none; +} + +.footer-column:hover::before { + opacity: 1; +} + +.footer-column:hover { + 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); } .footer-column-title { @@ -673,70 +756,131 @@ html[data-theme='light'] .enhanced-footer { display: flex; flex-direction: column; gap: 12px; + overflow: visible; } .footer-link { display: flex; align-items: center; - gap: 10px; + gap: 12px; color: #cbd5e1; text-decoration: none; font-size: 14px; font-weight: 500; - padding: 10px 12px; - border-radius: 8px; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + padding: 14px 24px 14px 18px; + border-radius: 12px; + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; - margin: 2px 0; - border: 1px solid transparent; + margin: 6px 0; + border: 1px solid rgba(255, 255, 255, 0.05); + overflow: visible; + backdrop-filter: blur(5px); + background: rgba(255, 255, 255, 0.02); } .footer-link::before { content: ''; position: absolute; left: 0; - top: 50%; + top: 0; width: 0; - height: 2px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); - transform: translateY(-50%); - transition: width 0.3s ease; - border-radius: 1px; + 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%); + transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + border-radius: 12px; + z-index: 0; +} + +.footer-link::after { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 0; + height: 100%; + 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; } .footer-link:hover::before { - width: 4px; + width: 100%; +} + +.footer-link:hover::after { + width: 100%; } .footer-link:hover { color: #ffffff; - background: rgba(255, 255, 255, 0.05); - border-color: rgba(255, 255, 255, 0.1); - transform: translateX(4px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + 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); + backdrop-filter: blur(15px); +} + +.footer-link:hover span:not(.link-icon):not(.link-badge) { + color: #ffffff; + text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); +} + +.footer-link:active { + transform: translateX(6px) translateY(-1px) scale(0.98); + transition: all 0.1s ease; +} + +.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); + animation: linkPulse 2s infinite; +} + +.footer-link:focus-visible { + outline: 2px solid rgba(102, 126, 234, 0.6); + outline-offset: 2px; } .link-icon { - font-size: 14px; - opacity: 0.8; - transition: all 0.3s ease; - filter: grayscale(0.3); + font-size: 16px; + opacity: 0.7; + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + filter: grayscale(0.3) brightness(0.9); + z-index: 2; + position: relative; + display: inline-block; } .footer-link:hover .link-icon { opacity: 1; - filter: grayscale(0); - transform: scale(1.1); + filter: grayscale(0) brightness(1.2) saturate(1.1); + transform: scale(1.15) rotate(8deg) translateZ(0); + text-shadow: 0 0 6px rgba(102, 126, 234, 0.3); } .link-badge { font-size: 10px; font-weight: 600; - padding: 2px 6px; - border-radius: 8px; + padding: 4px 10px; + border-radius: 10px; text-transform: uppercase; - letter-spacing: 0.3px; + letter-spacing: 0.5px; margin-left: auto; + margin-right: 4px; + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + position: relative; + z-index: 2; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + white-space: nowrap; + flex-shrink: 0; + min-width: fit-content; } .link-badge.popular { @@ -744,26 +888,56 @@ html[data-theme='light'] .enhanced-footer { color: white; } +.footer-link:hover .link-badge.popular { + background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); + transform: scale(1.05) translateY(-1px); + box-shadow: 0 3px 12px rgba(59, 130, 246, 0.3); +} + .link-badge.new { background: linear-gradient(135deg, #10b981 0%, #047857 100%); color: white; } +.footer-link:hover .link-badge.new { + background: linear-gradient(135deg, #34d399 0%, #10b981 100%); + transform: scale(1.1) translateY(-1px); + box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); +} + .link-badge.hot { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; } +.footer-link:hover .link-badge.hot { + background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); + transform: scale(1.1) translateY(-1px); + box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); +} + .link-badge.hiring { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; } +.footer-link:hover .link-badge.hiring { + background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); + transform: scale(1.1) translateY(-1px); + box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4); +} + .link-badge.active { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; } +.footer-link:hover .link-badge.active { + background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%); + transform: scale(1.1) translateY(-1px); + box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); +} + /* Newsletter Column */ .newsletter-column { background: rgba(255, 255, 255, 0.03); @@ -917,16 +1091,16 @@ html[data-theme='light'] .enhanced-footer { .quick-link { display: flex; align-items: center; - gap: 8px; - padding: 8px 12px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 8px; + gap: 10px; + padding: 10px 16px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; color: #cbd5e1; text-decoration: none; font-size: 13px; font-weight: 500; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } @@ -938,45 +1112,66 @@ html[data-theme='light'] .enhanced-footer { left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.15), transparent); transition: left 0.6s ease; } +.quick-link::after { + 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%); + transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); + border-radius: 10px; +} + .quick-link:hover::before { left: 100%; } +.quick-link:hover::after { + width: 100%; +} + .quick-link:hover { - background: rgba(255, 255, 255, 0.08); - border-color: rgba(102, 126, 234, 0.3); + background: rgba(255, 255, 255, 0.12); + border-color: rgba(102, 126, 234, 0.4); color: #ffffff; - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + 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); } .quick-link-icon { font-size: 14px; opacity: 0.8; - transition: all 0.3s ease; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 1; + position: relative; } .quick-link:hover .quick-link-icon { opacity: 1; - transform: scale(1.1); + transform: scale(1.2) rotate(8deg); + filter: brightness(1.2); } /* Bottom Section */ .footer-bottom { - padding: 30px 0; + padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(10px); } .footer-bottom-content { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; - gap: 32px; + gap: 24px; + padding: 0 16px; } .footer-bottom-left { @@ -1091,15 +1286,47 @@ html[data-theme='light'] .enhanced-footer { text-decoration: none; font-size: 14px; font-weight: 500; - padding: 8px 0; - border-bottom: 1px solid transparent; - transition: all 0.3s ease; + padding: 10px 16px; + border: 1px solid transparent; + border-radius: 8px; + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); white-space: nowrap; + position: relative; + overflow: hidden; + backdrop-filter: blur(5px); +} + +.legal-link::before { + 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%); + transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + z-index: 0; +} + +.legal-link:hover::before { + width: 100%; } .legal-link:hover { color: #ffffff; - border-bottom-color: rgba(99, 102, 241, 0.5); + 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); + text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); +} + +.legal-link:focus { + outline: none; + border-color: rgba(99, 102, 241, 0.5); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); } .footer-bottom-right { @@ -1112,27 +1339,7 @@ html[data-theme='light'] .enhanced-footer { color: #94a3b8; font-size: 14px; line-height: 1.6; -} - -.footer-credits { - margin-top: 8px; - display: flex; - align-items: center; - gap: 4px; - justify-content: flex-end; -} - -.developer-link { - color: #fbbf24; - text-decoration: none; - font-weight: 600; - transition: all 0.3s ease; - position: relative; -} - -.developer-link:hover { - color: #f59e0b; - text-decoration: underline; + font-weight: 500; } /* Responsive Design */ @@ -1215,11 +1422,20 @@ html[data-theme='light'] .enhanced-footer { } .footer-column { - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 24px; backdrop-filter: blur(20px); + transition: all 0.3s ease; + overflow: visible; + } + + .footer-column:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.15); + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } .footer-column-title { @@ -1260,8 +1476,13 @@ html[data-theme='light'] .enhanced-footer { .footer-bottom-content { grid-template-columns: 1fr; - gap: 20px; + gap: 16px; text-align: center; + padding: 0 12px; + } + + .footer-bottom { + padding: 12px 0; } .footer-bottom-left { @@ -1283,14 +1504,32 @@ html[data-theme='light'] .enhanced-footer { text-align: center; } - .footer-credits { - justify-content: center; - } - /* Improve touch targets on mobile */ .footer-link { - padding: 12px 16px; + padding: 14px 18px; margin: 4px 0; + font-size: 15px; + } + + /* 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), + 0 3px 10px rgba(102, 126, 234, 0.1); + } + + .footer-link:hover .link-icon { + transform: scale(1.2) rotate(8deg); + } + + /* Reduce animations on mobile for better performance */ + .footer-link:hover span:not(.link-icon):not(.link-badge) { + animation: none; + background: #ffffff; + -webkit-background-clip: initial; + -webkit-text-fill-color: initial; + background-clip: initial; } .social-link { @@ -1357,6 +1596,7 @@ html[data-theme='light'] .enhanced-footer { .footer-column { padding: 20px; border-radius: 12px; + overflow: visible; } .footer-column-title { @@ -1365,9 +1605,10 @@ html[data-theme='light'] .enhanced-footer { } .footer-link { - padding: 12px 16px; + padding: 12px 20px 12px 16px; font-size: 14px; border-radius: 8px; + overflow: visible; } .newsletter-column { @@ -1404,8 +1645,20 @@ html[data-theme='light'] .enhanced-footer { animation-duration: 40s; } + /* 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), + 0 2px 8px rgba(102, 126, 234, 0.1); + } + + .stat-item:hover .stat-icon { + transform: scale(1.05) rotate(3deg); + } + + .stat-item:hover .stat-number { + transform: scale(1.02); } .footer-link:hover { diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx index 46119111..812e73e7 100644 --- a/src/theme/Footer/Layout/index.tsx +++ b/src/theme/Footer/Layout/index.tsx @@ -1,3 +1,4 @@ + import React, {type ReactNode, useState, useEffect} from 'react'; import Link from "@docusaurus/Link"; import type {Props} from '@theme/Footer/Layout'; @@ -250,7 +251,6 @@ export default function FooterLayout({ Contact Us -
  • 📺 @@ -264,6 +264,24 @@ export default function FooterLayout({
    • + + {/* Quick Links Section moved here */} +
    +

    + 🔗 + QUICK LINKS +

    +
    + + 🚀 + Get Started + + + 📊 + Dashboard + +
    +
    {/* Newsletter Column */} @@ -295,24 +313,6 @@ export default function FooterLayout({
    📊 1.2K+ developers joined this week
    - - {/* Quick Links Section */} -
    -

    - 🔗 - QUICK LINKS -

    -
    - - 🚀 - Get Started - - - 📊 - Dashboard - -
    -
    @@ -378,18 +378,7 @@ export default function FooterLayout({
    - © {currentYear} recodehive. Made with ❤️ by the community. -
    - Developed by - - Sanjay Viswanathan - -
    + © {currentYear} recodehive. Made with ❤️ by the Community.