diff --git a/docusaurus.config.ts b/docusaurus.config.ts index fdc0673..b6d628e 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -234,6 +234,11 @@ const config: Config = { ], // hideOnScroll: true, }, + footer: { + style: 'dark', + links: [], + copyright: `Copyright © ${new Date().getFullYear()} recodehive. Built with Docusaurus.`, + }, prism: { theme: prismThemes.github, darkTheme: prismThemes.dracula, diff --git a/src/pages/blogs/blogs-new.css b/src/pages/blogs/blogs-new.css index 66ad722..8b39c59 100644 --- a/src/pages/blogs/blogs-new.css +++ b/src/pages/blogs/blogs-new.css @@ -7,36 +7,413 @@ font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%); min-height: 100vh; + animation: pageSlideIn 0.8s ease-out; + position: relative; + overflow-x: hidden; +} + +/* Dark theme support */ +[data-theme='dark'] .blog-page { + background: linear-gradient(135deg, #1b1b1d 0%, #121212 50%, #1a202c 100%); +} + +@keyframes pageSlideIn { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +/* Navbar adjustments */ +:global(.navbar) { + backdrop-filter: blur(20px) !important; + background: rgba(255, 255, 255, 0.95) !important; + border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; + transition: all 0.3s ease !important; + height: 60px !important; + min-height: 60px !important; +} + +:global(.navbar--fixed-top) { + animation: navbarSlideDown 0.6s ease-out; +} + +@keyframes navbarSlideDown { + 0% { + transform: translateY(-100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } } /* Hero Section */ .blog-hero-section { padding: 80px 20px 60px; text-align: center; - background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%); + background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 30%, #e8ebff 70%, #f0f4ff 100%); + position: relative; + overflow: hidden; + min-height: 50vh; + display: flex; + align-items: center; + margin-top: -10px; +} + +[data-theme='dark'] .blog-hero-section { + background: linear-gradient(135deg, #1b1b1d 0%, #121212 30%, #1a202c 70%, #242526 100%); +} + +.blog-hero-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 40%), + radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 45%), + radial-gradient(circle at 40% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%); + pointer-events: none; + animation: gradientShift 8s ease-in-out infinite; +} + +.blog-hero-section::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + pointer-events: none; + animation: float 20s linear infinite; +} + +@keyframes gradientShift { + 0%, 100% { + background: + radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 40%), + radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 45%), + radial-gradient(circle at 40% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%); + } + 50% { + background: + radial-gradient(circle at 80% 70%, rgba(99, 102, 241, 0.12) 0%, transparent 45%), + radial-gradient(circle at 20% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 40%), + radial-gradient(circle at 60% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%); + } +} + +@keyframes float { + 0% { + transform: translateY(0px) translateX(0px); + } + 33% { + transform: translateY(-10px) translateX(5px); + } + 66% { + transform: translateY(5px) translateX(-5px); + } + 100% { + transform: translateY(0px) translateX(0px); + } +} + +/* Floating Particles */ +.floating-particles { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; + z-index: 0; +} + +.particle { + position: absolute; + border-radius: 50%; + opacity: 0.6; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} + +.particle-1 { + width: 8px; + height: 8px; + background: linear-gradient(45deg, #6366f1, #8b5cf6); + top: 20%; + left: 10%; + animation: particleFloat1 8s infinite; +} + +.particle-2 { + width: 12px; + height: 12px; + background: linear-gradient(45deg, #a855f7, #ec4899); + top: 60%; + left: 80%; + animation: particleFloat2 10s infinite; +} + +.particle-3 { + width: 6px; + height: 6px; + background: linear-gradient(45deg, #ec4899, #f59e0b); + top: 30%; + left: 70%; + animation: particleFloat3 12s infinite; +} + +.particle-4 { + width: 10px; + height: 10px; + background: linear-gradient(45deg, #f59e0b, #10b981); + top: 80%; + left: 20%; + animation: particleFloat4 9s infinite; +} + +.particle-5 { + width: 14px; + height: 14px; + background: linear-gradient(45deg, #10b981, #06b6d4); + top: 15%; + left: 90%; + animation: particleFloat5 11s infinite; +} + +.particle-6 { + width: 7px; + height: 7px; + background: linear-gradient(45deg, #06b6d4, #6366f1); + top: 70%; + left: 5%; + animation: particleFloat6 13s infinite; +} + +@keyframes particleFloat1 { + 0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); } + 25% { transform: translateY(-30px) translateX(20px) rotate(90deg); } + 50% { transform: translateY(-10px) translateX(-15px) rotate(180deg); } + 75% { transform: translateY(20px) translateX(10px) rotate(270deg); } +} + +@keyframes particleFloat2 { + 0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); } + 33% { transform: translateY(25px) translateX(-20px) rotate(120deg); } + 66% { transform: translateY(-15px) translateX(25px) rotate(240deg); } +} + +@keyframes particleFloat3 { + 0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); } + 50% { transform: translateY(-40px) translateX(-30px) rotate(180deg); } +} + +@keyframes particleFloat4 { + 0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); } + 25% { transform: translateY(-20px) translateX(30px) rotate(90deg); } + 50% { transform: translateY(15px) translateX(-10px) rotate(180deg); } + 75% { transform: translateY(-5px) translateX(-25px) rotate(270deg); } +} + +@keyframes particleFloat5 { + 0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); } + 40% { transform: translateY(30px) translateX(-35px) rotate(144deg); } + 80% { transform: translateY(-25px) translateX(15px) rotate(288deg); } +} + +@keyframes particleFloat6 { + 0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); } + 30% { transform: translateY(-35px) translateX(25px) rotate(108deg); } + 60% { transform: translateY(20px) translateX(-20px) rotate(216deg); } + 90% { transform: translateY(-10px) translateX(35px) rotate(324deg); } } .blog-hero-container { - max-width: 800px; + max-width: 900px; margin: 0 auto; + position: relative; + z-index: 1; +} + +.hero-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; + position: relative; +} + +.hero-content::before { + content: ''; + position: absolute; + top: -60px; + left: -80px; + width: 120px; + height: 120px; + background: linear-gradient(45deg, #6366f1, #a855f7); + border-radius: 50%; + opacity: 0.08; + animation: floatLeft 6s ease-in-out infinite; + z-index: -1; +} + +.hero-content::after { + content: ''; + position: absolute; + top: 100px; + right: -60px; + width: 80px; + height: 80px; + background: linear-gradient(45deg, #ec4899, #f59e0b); + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; + opacity: 0.08; + animation: floatRight 8s ease-in-out infinite; + z-index: -1; +} + +@keyframes floatLeft { + 0%, 100% { + transform: translateY(0px) rotate(0deg); + } + 50% { + transform: translateY(-25px) rotate(180deg); + } +} + +@keyframes floatRight { + 0%, 100% { + transform: translateY(0px) rotate(0deg); + } + 50% { + transform: translateY(20px) rotate(-180deg); + } } + + .blog-main-title { - font-size: 48px; - font-weight: 700; - margin: 0 0 16px 0; - background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%); + font-size: 64px; + font-weight: 900; + margin: 0; + line-height: 1.1; + color: #1e293b; + letter-spacing: -0.02em; + animation: titleSlideUp 1s ease-out; +} + +[data-theme='dark'] .blog-main-title { + color: #f1f5f9; +} + +@keyframes titleSlideUp { + 0% { + opacity: 0; + transform: translateY(30px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.gradient-text { + background: linear-gradient(135deg, #6366f1 0%, #a855f7 30%, #ec4899 70%, #f59e0b 100%); + background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - line-height: 1.2; + animation: gradientMove 4s ease-in-out infinite; + position: relative; +} + +.gradient-text::before { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + background: linear-gradient(135deg, #6366f1 0%, #a855f7 30%, #ec4899 70%, #f59e0b 100%); + background-size: 300% 300%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + filter: blur(1px); + opacity: 0.5; + z-index: -1; + animation: gradientMove 4s ease-in-out infinite reverse; } +@keyframes gradientMove { + 0%, 100% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } +} + + + .blog-main-subtitle { - font-size: 16px; + font-size: 18px; color: #64748b; - margin: 0 0 40px 0; - line-height: 1.6; + margin: 0; + line-height: 1.7; + max-width: 700px; + font-weight: 400; +} + +[data-theme='dark'] .blog-main-subtitle { + color: #94a3b8; +} + +.hero-stats { + display: flex; + align-items: center; + gap: 32px; + margin-top: 16px; + padding: 20px 32px; + background: rgba(255, 255, 255, 0.8); + border: 1px solid rgba(99, 102, 241, 0.1); + border-radius: 16px; + backdrop-filter: blur(10px); + box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1); +} + +.stat-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; +} + +.stat-number { + font-size: 24px; + font-weight: 700; + color: #1e293b; + line-height: 1; +} + +.stat-label { + font-size: 14px; + color: #64748b; + font-weight: 500; +} + +.stat-divider { + width: 1px; + height: 32px; + background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.2), transparent); } /* Category Icons */ @@ -131,10 +508,15 @@ /* Latest Articles Section */ .latest-articles-section { - padding: 80px 20px; + padding: 60px 20px 80px; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); position: relative; overflow: hidden; + margin-top: -20px; +} + +[data-theme='dark'] .latest-articles-section { + background: linear-gradient(135deg, #121212 0%, #1a202c 100%); } .latest-articles-section::before { @@ -155,6 +537,18 @@ margin: 0 auto; position: relative; z-index: 1; + animation: contentSlideUp 1s ease-out 0.3s both; +} + +@keyframes contentSlideUp { + 0% { + opacity: 0; + transform: translateY(30px); + } + 100% { + opacity: 1; + transform: translateY(0); + } } .section-header { @@ -173,6 +567,10 @@ position: relative; } +[data-theme='dark'] .section-title { + color: #f1f5f9; +} + .section-title::after { content: ''; position: absolute; @@ -195,57 +593,139 @@ font-weight: 400; } +[data-theme='dark'] .section-subtitle { + color: #94a3b8; +} + /* Search Container */ .search-container { - max-width: 500px; - margin: 40px auto 0; + max-width: 600px; + margin: 60px auto 0; position: relative; } +.search-container::before { + content: ''; + position: absolute; + top: -20px; + left: -20px; + right: -20px; + bottom: -20px; + background: linear-gradient(45deg, #6366f1, #a855f7, #ec4899, #f59e0b); + background-size: 400% 400%; + border-radius: 32px; + opacity: 0.08; + animation: searchGlow 6s ease-in-out infinite; + z-index: -1; +} + +@keyframes searchGlow { + 0%, 100% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } +} + .search-wrapper { position: relative; display: flex; align-items: center; - background: white; - border-radius: 16px; - padding: 16px 20px; - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.08), - 0 1px 3px rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(30px); border: 2px solid transparent; - transition: all 0.3s ease; - backdrop-filter: blur(10px); + border-radius: 24px; + padding: 20px 28px; + box-shadow: + 0 20px 60px rgba(0, 0, 0, 0.08), + 0 8px 32px rgba(99, 102, 241, 0.1), + 0 0 0 1px rgba(255, 255, 255, 0.2) inset; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + background-image: linear-gradient(white, white), + linear-gradient(135deg, #6366f1, #a855f7, #ec4899); + background-origin: border-box; + background-clip: padding-box, border-box; + animation: searchFloat 4s ease-in-out infinite; +} + +[data-theme='dark'] .search-wrapper { + background: rgba(36, 37, 38, 0.95); + box-shadow: + 0 20px 60px rgba(0, 0, 0, 0.4), + 0 8px 32px rgba(99, 102, 241, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.05) inset; + background-image: linear-gradient(rgba(36, 37, 38, 0.95), rgba(36, 37, 38, 0.95)), + linear-gradient(135deg, #6366f1, #a855f7, #ec4899); +} + +@keyframes searchFloat { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-3px); + } } .search-wrapper:focus-within { - border-color: #6366f1; + transform: translateY(-8px) scale(1.02); box-shadow: - 0 8px 30px rgba(99, 102, 241, 0.15), - 0 0 0 4px rgba(99, 102, 241, 0.1); - transform: translateY(-2px); + 0 32px 80px rgba(0, 0, 0, 0.12), + 0 16px 48px rgba(99, 102, 241, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.3) inset; + animation-play-state: paused; } .search-icon { - width: 22px; - height: 22px; + width: 24px; + height: 24px; color: #6366f1; - margin-right: 16px; + margin-right: 18px; flex-shrink: 0; - transition: color 0.2s ease; + transition: all 0.3s ease; + animation: iconPulse 2s ease-in-out infinite; +} + +@keyframes iconPulse { + 0%, 100% { + opacity: 0.8; + transform: scale(1); + } + 50% { + opacity: 1; + transform: scale(1.05); + } } .search-wrapper:focus-within .search-icon { color: #4f46e5; + animation-play-state: paused; + transform: scale(1.1); } .search-input { flex: 1; border: none; outline: none; - font-size: 16px; + font-size: 17px; color: #1e293b; background: transparent; font-weight: 500; + letter-spacing: 0.01em; + transition: all 0.2s ease; +} + +.search-input:focus { + color: #0f172a; +} + +[data-theme='dark'] .search-input { + color: #f1f5f9; +} + +[data-theme='dark'] .search-input:focus { + color: #ffffff; } .search-input::placeholder { @@ -253,6 +733,58 @@ font-weight: 400; } +.clear-search-icon { + width: 24px; + height: 24px; + color: #94a3b8; + background: none; + border: none; + cursor: pointer; + padding: 6px; + border-radius: 50%; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + margin-left: 12px; + flex-shrink: 0; + position: relative; + overflow: hidden; +} + +.clear-search-icon::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(45deg, #ef4444, #f97316); + border-radius: 50%; + opacity: 0; + transform: scale(0); + transition: all 0.3s ease; +} + +.clear-search-icon:hover { + color: white; + transform: scale(1.1); +} + +.clear-search-icon:hover::before { + opacity: 1; + transform: scale(1); +} + +.clear-search-icon svg { + width: 100%; + height: 100%; + position: relative; + z-index: 1; + transition: transform 0.2s ease; +} + +.clear-search-icon:hover svg { + transform: rotate(90deg); +} + .search-decoration { display: none; } @@ -397,6 +929,33 @@ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; border: 1px solid rgba(255, 255, 255, 0.8); + animation: cardSlideIn 0.6s ease-out both; +} + +[data-theme='dark'] .article-card { + background: #242526; + border: 1px solid rgba(74, 85, 104, 0.3); + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.4), + 0 1px 3px rgba(0, 0, 0, 0.3); +} + +.article-card:nth-child(1) { animation-delay: 0.1s; } +.article-card:nth-child(2) { animation-delay: 0.2s; } +.article-card:nth-child(3) { animation-delay: 0.3s; } +.article-card:nth-child(4) { animation-delay: 0.4s; } +.article-card:nth-child(5) { animation-delay: 0.5s; } +.article-card:nth-child(6) { animation-delay: 0.6s; } + +@keyframes cardSlideIn { + 0% { + opacity: 0; + transform: translateY(40px) scale(0.95); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } } .article-card::before { @@ -419,6 +978,12 @@ 0 8px 20px rgba(99, 102, 241, 0.1); } +[data-theme='dark'] .article-card:hover { + box-shadow: + 0 20px 60px rgba(0, 0, 0, 0.6), + 0 8px 20px rgba(99, 102, 241, 0.2); +} + .article-card:hover::before { opacity: 1; } @@ -442,12 +1007,24 @@ letter-spacing: 0.5px; } +[data-theme='dark'] .card-category { + background: linear-gradient(135deg, rgba(36, 37, 38, 0.95) 0%, rgba(26, 32, 44, 0.9) 100%); + color: #a78bfa; + border: 1px solid rgba(167, 139, 250, 0.2); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + .article-card:hover .card-category { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; transform: scale(1.05); } +[data-theme='dark'] .article-card:hover .card-category { + background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%); + color: #1a202c; +} + .card-image { height: 220px; overflow: hidden; @@ -504,6 +1081,10 @@ background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%); } +[data-theme='dark'] .card-content { + background: linear-gradient(135deg, rgba(36, 37, 38, 0.95) 0%, rgba(26, 32, 44, 0.95) 100%); +} + .card-title { font-size: 22px; font-weight: 700; @@ -518,6 +1099,14 @@ color: #6366f1; } +[data-theme='dark'] .card-title { + color: #f1f5f9; +} + +[data-theme='dark'] .article-card:hover .card-title { + color: #a78bfa; +} + .card-description { font-size: 15px; color: #64748b; @@ -530,6 +1119,10 @@ font-weight: 400; } +[data-theme='dark'] .card-description { + color: #94a3b8; +} + /* Responsive card content */ @media (max-width: 767px) and (min-width: 576px) { .card-content { @@ -574,6 +1167,8 @@ padding-bottom: 20px; border-bottom: 1px solid rgba(226, 232, 240, 0.8); position: relative; + gap: 12px; + flex-wrap: wrap; } .card-meta::before { @@ -598,6 +1193,8 @@ display: flex; align-items: center; gap: 10px; + flex: 1; + min-width: 0; /* Allow text to shrink */ } .author-avatar { @@ -608,16 +1205,93 @@ display: flex; align-items: center; justify-content: center; - font-size: 14px; + font-size: 16px; color: white; font-weight: 600; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); + flex-shrink: 0; + transition: all 0.3s ease; +} + +.author-avatar:hover { + transform: scale(1.1); + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); } .author-name { font-size: 13px; color: #475569; font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + position: relative; + cursor: help; + transition: color 0.2s ease; +} + +.author-name:hover { + color: #6366f1; +} + +[data-theme='dark'] .author-name { + color: #cbd5e1; +} + +[data-theme='dark'] .author-name:hover { + color: #a78bfa; +} + +/* Tooltip for author names */ +.author-name::after { + content: attr(data-full-name); + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.9); + color: white; + padding: 8px 12px; + border-radius: 6px; + font-size: 12px; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + z-index: 1000; + pointer-events: none; + margin-bottom: 5px; +} + +.author-name::before { + content: ''; + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + border: 5px solid transparent; + border-top-color: rgba(0, 0, 0, 0.9); + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + z-index: 1000; + pointer-events: none; +} + +[data-theme='dark'] .author-name::after { + background: rgba(18, 18, 18, 0.95); + color: #f7fafc; +} + +[data-theme='dark'] .author-name::before { + border-top-color: rgba(18, 18, 18, 0.95); +} + +.author-name:hover::after, +.author-name:hover::before { + opacity: 1; + visibility: visible; } .card-read-time { @@ -629,6 +1303,11 @@ border-radius: 12px; } +[data-theme='dark'] .card-read-time { + color: #64748b; + background: rgba(100, 116, 139, 0.2); +} + /* Responsive card meta */ @media (max-width: 767px) and (min-width: 576px) { .card-meta { @@ -656,6 +1335,14 @@ .card-meta { margin-bottom: 16px; padding-bottom: 16px; + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .card-author { + width: 100%; + gap: 8px; } .author-avatar { @@ -666,11 +1353,17 @@ .author-name { font-size: 12px; + white-space: normal; + overflow: visible; + text-overflow: unset; + line-height: 1.3; } .card-read-time { font-size: 11px; padding: 3px 6px; + align-self: flex-end; + margin-top: -4px; } } diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx index ba6fe4d..9008244 100644 --- a/src/pages/blogs/index.tsx +++ b/src/pages/blogs/index.tsx @@ -4,9 +4,21 @@ import Layout from "@theme/Layout"; import Link from "@docusaurus/Link"; import blogs from "../../database/blogs/index"; import Head from "@docusaurus/Head"; -import { FaCode, FaPalette, FaBrain, FaStar } from "react-icons/fa"; + import "./blogs-new.css"; +// Author mapping based on actual blog posts +const authorMapping = { + "streamline-ux-ui": ["Sowmiya Venketashan", "Sanjay Viswanthan"], + "ux-ui-design-job": ["Sowmiya Venketashan", "Sanjay Viswanthan"], + "ux-designers-ai": ["Sowmiya Venketashan", "Sanjay Viswanthan"], + "google-deepmind": ["Sowmiya Venketashan", "Sanjay Viswanthan"], + "google-backlinks": ["Sanjay Viswanthan"], + "git-coding-agent": ["Sanjay Viswanthan"] +}; + + + export default function Blogs(): React.JSX.Element { const { siteConfig } = useDocusaurusContext(); const [searchTerm, setSearchTerm] = useState(""); @@ -42,46 +54,37 @@ export default function Blogs(): React.JSX.Element {
+ {/* Background Geometric Shapes */} +
+
+
+
+
+
+
+ {/* Hero Section */}
+
+
+
+
+
+
+
+
-

Welcome to RecodeHive Blogs

-

- Discover web development articles ranging from HTML and CSS to JavaScript, React,
- Node.js, DSA, and much more -

- - {/* Category Icons */} -
-
-
- -
- Development -
-
-
- -
- Design -
-
-
- -
- AI & Tech -
-
-
- -
- Innovation -
-
+
+

+ Welcome to RecodeHive Blogs +

+

+ Discover comprehensive web development articles, tutorials, and insights covering + everything from HTML & CSS fundamentals to advanced JavaScript, React, Node.js, + Data Structures & Algorithms, and cutting-edge technologies. +

- +
@@ -89,12 +92,6 @@ export default function Blogs(): React.JSX.Element {
-

Latest Articles

-

- Stay updated with the latest trends, tutorials, and insights from the world of
- technology and design -

- {/* Search Bar */}
@@ -104,16 +101,23 @@ export default function Blogs(): React.JSX.Element { -
-
-
-
-
+ {searchTerm && ( + + )}
@@ -167,7 +171,14 @@ const BlogCard = ({ blog, index }) => { return 'Resources'; }; + // Get authors for this blog post + const getAuthors = (slug) => { + const authors = authorMapping[slug] || ["RecodeHive Team"]; + return authors.length > 1 ? authors.join(" & ") : authors[0]; + }; + const category = getCategory(blog.title); + const authorName = getAuthors(blog.slug); return (
@@ -181,7 +192,7 @@ const BlogCard = ({ blog, index }) => {
👤 - Author Name + {authorName}
5 min read
diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css new file mode 100644 index 0000000..84adfd0 --- /dev/null +++ b/src/theme/Footer/Layout/enhanced-footer.css @@ -0,0 +1,1283 @@ +/* Enhanced Footer Styles */ +.enhanced-footer { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%); + color: #e2e8f0; + position: relative; + overflow: hidden; +} + +/* Add animated background pattern */ +.enhanced-footer::before { + 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%); + animation: backgroundShift 25s ease-in-out infinite; + pointer-events: none; +} + +/* Additional floating particles */ +.enhanced-footer::after { + 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-repeat: repeat; + background-size: 150px 100px; + animation: particleFloat 30s linear infinite; + pointer-events: none; + opacity: 0.3; +} + +@keyframes backgroundShift { + 0%, 100% { + opacity: 1; + transform: translateX(0px) translateY(0px) scale(1); + } + 25% { + opacity: 0.8; + transform: translateX(30px) translateY(-20px) scale(1.02); + } + 50% { + opacity: 0.9; + transform: translateX(-10px) translateY(30px) scale(0.98); + } + 75% { + opacity: 0.85; + transform: translateX(-25px) translateY(-15px) scale(1.01); + } +} + +@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); } +} + +/* Dark theme support */ +[data-theme='dark'] .enhanced-footer { + background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Footer Hero Section */ +.footer-hero { + padding: 40px 0 30px; + position: relative; +} + +.footer-hero-content { + text-align: center; + margin-bottom: 30px; +} + +.footer-logo-section { + margin-bottom: 16px; +} + +.footer-logo { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.logo-container { + width: 44px; + height: 44px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + border-radius: 12px; + 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); + position: relative; + transition: all 0.3s ease; + cursor: pointer; +} + +.logo-container::before { + content: ''; + position: absolute; + inset: 0; + border-radius: 16px; + padding: 1px; + background: linear-gradient(135deg, #667eea, #764ba2, #f093fb); + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + mask-composite: xor; + opacity: 0; + transition: opacity 0.3s ease; +} + +.logo-container:hover::before { + opacity: 1; +} + +.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); +} + +.footer-logo-img { + width: 24px; + height: 24px; + border-radius: 6px; + filter: brightness(1.1) contrast(1.1); +} + +/* Brand Header Styling */ +.footer-brand-header { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + margin-top: 8px; +} + +.footer-brand-title { + font-size: 28px; + font-weight: 700; + background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-align: center; + letter-spacing: -1px; + margin: 0; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; +} + +.footer-trust-badge { + display: flex; + flex-direction: column; + align-items: center; + gap: 3px; +} + +.trust-stars { + display: flex; + gap: 1px; +} + +.trust-stars .star { + font-size: 14px; + color: #fbbf24; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + 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-text { + font-size: 12px; + color: #94a3b8; + font-weight: 500; + text-align: center; +} + +@keyframes starGlow { + 0% { + opacity: 0.8; + transform: scale(1); + } + 100% { + opacity: 1; + transform: scale(1.1); + } +} + +.footer-brand-name { + font-size: 28px; + font-weight: 800; + background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + letter-spacing: -0.02em; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +.footer-brand-name:hover { + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + transform: scale(1.02); +} + +.footer-rating { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: 12px 20px; + background: rgba(255, 255, 255, 0.05); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + transition: all 0.3s ease; +} + +.footer-rating:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(102, 126, 234, 0.3); + transform: translateY(-1px); +} + +.stars { + background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-size: 18px; + letter-spacing: 2px; + filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3)); + animation: starGlow 3s ease-in-out infinite; +} + +@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)); } +} + +.rating-text { + font-size: 13px; + color: #cbd5e1; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.footer-hero-text h1 { + font-size: 32px; + font-weight: 900; + background: linear-gradient(135deg, #ffffff 0%, #f8fafc 30%, #e2e8f0 60%, #cbd5e1 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin: 0 0 16px 0; + line-height: 1.1; + letter-spacing: -0.03em; + max-width: 600px; + margin-left: auto; + margin-right: auto; + text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + position: relative; + animation: titleGlow 4s ease-in-out infinite; +} + +@keyframes titleGlow { + 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%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } +} + +.footer-hero-text p { + font-size: 16px; + color: #cbd5e1; + line-height: 1.6; + max-width: 500px; + margin: 0 auto; + font-weight: 500; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + opacity: 0.9; +} + +/* Stats Section */ +.footer-stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + margin-top: 30px; +} + +.stat-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + padding: 20px 16px; + background: rgba(255, 255, 255, 0.03); + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.08); + backdrop-filter: blur(20px); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + text-align: center; + position: relative; + overflow: hidden; + cursor: pointer; +} + +.stat-item::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + transition: left 0.6s ease; +} + +.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-icon { + width: 56px; + height: 56px; + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + position: relative; + transition: all 0.3s ease; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); +} + +.stat-icon svg { + width: 28px; + height: 28px; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); +} + +.stat-item:hover .stat-icon { + transform: scale(1.1) rotate(5deg); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); +} + +.stat-icon-learners { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; +} + +.stat-icon-tutorials { + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + color: white; +} + +.stat-icon-success { + background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); + color: white; +} + +.stat-icon-support { + background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); + color: white; +} + +.stat-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; +} + +.stat-number { + font-size: 28px; + font-weight: 900; + background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + line-height: 1; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +.stat-item:hover .stat-number { + transform: scale(1.05); + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.stat-label { + font-size: 13px; + color: #94a3b8; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.8px; + transition: color 0.3s ease; +} + +.stat-item:hover .stat-label { + color: #cbd5e1; +} + +/* Links Section */ +.footer-links-section { + padding: 40px 0; + background: rgba(0, 0, 0, 0.15); + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.footer-links-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1.2fr; + gap: 40px; +} + +.footer-column { + display: flex; + flex-direction: column; +} + +.footer-column-title { + display: flex; + align-items: center; + gap: 8px; + font-size: 16px; + font-weight: 600; + color: #ffffff; + margin-bottom: 24px; + letter-spacing: -0.01em; +} + +.column-icon { + width: 20px; + height: 20px; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + flex-shrink: 0; +} + +.resources-icon { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); +} + +.company-icon { + background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); +} + +.support-icon { + background: linear-gradient(135deg, #10b981 0%, #047857 100%); +} + +.newsletter-icon { + background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); +} + +.footer-links { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 12px; +} + +.footer-link { + display: flex; + align-items: center; + gap: 10px; + 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); + position: relative; + margin: 2px 0; + border: 1px solid transparent; +} + +.footer-link::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + 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; +} + +.footer-link:hover::before { + width: 4px; +} + +.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); +} + +.link-icon { + font-size: 14px; + opacity: 0.8; + transition: all 0.3s ease; + filter: grayscale(0.3); +} + +.footer-link:hover .link-icon { + opacity: 1; + filter: grayscale(0); + transform: scale(1.1); +} + +.link-badge { + font-size: 10px; + font-weight: 600; + padding: 2px 6px; + border-radius: 8px; + text-transform: uppercase; + letter-spacing: 0.3px; + margin-left: auto; +} + +.link-badge.popular { + background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); + color: white; +} + +.link-badge.new { + background: linear-gradient(135deg, #10b981 0%, #047857 100%); + color: white; +} + +.link-badge.hot { + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + color: white; +} + +.link-badge.hiring { + background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); + color: white; +} + +.link-badge.active { + background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); + color: white; +} + +/* Newsletter Column */ +.newsletter-column { + background: rgba(255, 255, 255, 0.03); + padding: 24px; + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.08); + backdrop-filter: blur(20px); +} + +.newsletter-description { + color: #94a3b8; + font-size: 14px; + line-height: 1.5; + margin-bottom: 20px; +} + +.newsletter-form { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 16px; +} + +.newsletter-input { + padding: 12px 16px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + background: rgba(255, 255, 255, 0.05); + color: #ffffff; + font-size: 14px; + font-weight: 400; + backdrop-filter: blur(20px); + transition: all 0.3s ease; +} + +.newsletter-input:focus { + outline: none; + border-color: #6366f1; + background: rgba(255, 255, 255, 0.08); + box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1); +} + +.newsletter-input::placeholder { + color: #94a3b8; +} + +.newsletter-button { + padding: 14px 24px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + color: white; + border: none; + border-radius: 12px; + font-size: 14px; + 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); + position: relative; + overflow: hidden; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.newsletter-button::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.6s ease; +} + +.newsletter-button:hover::before { + left: 100%; +} + +.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); +} + +.newsletter-button:active { + transform: translateY(0) scale(0.98); +} + +.newsletter-button.subscribed { + background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); + cursor: default; + animation: successPulse 0.6s ease-out; +} + +@keyframes successPulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.05); } + 100% { transform: scale(1); } +} + +.newsletter-button:disabled { + cursor: not-allowed; + opacity: 0.8; +} + +.newsletter-stats { + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 24px; +} + +.newsletter-stat { + font-size: 12px; + color: #94a3b8; + font-weight: 400; +} + +/* Quick Links Section */ +.quick-links-section { + margin-top: 24px; +} + +.quick-links-title { + display: flex; + align-items: center; + gap: 8px; + font-size: 12px; + font-weight: 600; + color: #94a3b8; + margin-bottom: 16px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.links-icon { + font-size: 12px; +} + +.quick-links-list { + display: flex; + flex-direction: column; + gap: 12px; +} + +.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; + color: #cbd5e1; + text-decoration: none; + font-size: 13px; + font-weight: 500; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; +} + +.quick-link::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + transition: left 0.6s ease; +} + +.quick-link:hover::before { + left: 100%; +} + +.quick-link:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(102, 126, 234, 0.3); + color: #ffffff; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.quick-link-icon { + font-size: 14px; + opacity: 0.8; + transition: all 0.3s ease; +} + +.quick-link:hover .quick-link-icon { + opacity: 1; + transform: scale(1.1); +} + +/* Bottom Section */ +.footer-bottom { + padding: 30px 0; + border-top: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.3); +} + +.footer-bottom-content { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + gap: 32px; +} + +.footer-bottom-left { + display: flex; + align-items: center; + gap: 24px; +} + +.social-label { + font-size: 14px; + color: #94a3b8; + font-weight: 600; + white-space: nowrap; +} + +.footer-social-links { + display: flex; + align-items: center; + gap: 16px; +} + +.social-link { + width: 48px; + height: 48px; + border-radius: 14px; + display: flex; + align-items: center; + justify-content: center; + color: #94a3b8; + text-decoration: none; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(20px); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; +} + +.social-link::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + transition: left 0.6s ease; +} + +.social-link:hover::before { + left: 100%; +} + +.social-link svg { + width: 22px; + height: 22px; + transition: all 0.3s ease; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); +} + +.social-link:hover { + transform: translateY(-4px) scale(1.05); + color: #ffffff; + border-color: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.1); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); +} + +.social-link:hover svg { + transform: scale(1.1) rotate(5deg); +} + +.social-link.github:hover { + background: linear-gradient(135deg, #24292e 0%, #1a1e22 100%); + border-color: #24292e; + box-shadow: 0 12px 32px rgba(36, 41, 46, 0.4); +} + +.social-link.twitter:hover { + background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%); + border-color: #1da1f2; + box-shadow: 0 12px 32px rgba(29, 161, 242, 0.4); +} + +.social-link.instagram:hover { + background: linear-gradient(135deg, #e4405f 0%, #833ab4 50%, #fccc63 100%); + border-color: #e4405f; + box-shadow: 0 12px 32px rgba(228, 64, 95, 0.4); +} + +.social-link.linkedin:hover { + background: linear-gradient(135deg, #0077b5 0%, #005885 100%); + border-color: #0077b5; + box-shadow: 0 12px 32px rgba(0, 119, 181, 0.4); +} + +.footer-bottom-center { + display: flex; + justify-content: center; +} + +.footer-legal-links { + display: flex; + align-items: center; + gap: 24px; + flex-wrap: wrap; + justify-content: center; +} + +.legal-link { + color: #94a3b8; + text-decoration: none; + font-size: 14px; + font-weight: 500; + padding: 8px 0; + border-bottom: 1px solid transparent; + transition: all 0.3s ease; + white-space: nowrap; +} + +.legal-link:hover { + color: #ffffff; + border-bottom-color: rgba(99, 102, 241, 0.5); +} + +.footer-bottom-right { + display: flex; + justify-content: flex-end; +} + +.footer-copyright { + text-align: right; + 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; +} + +/* Responsive Design */ +@media (max-width: 1200px) { + .footer-links-grid { + grid-template-columns: repeat(2, 1fr); + gap: 32px; + } + + .newsletter-column { + grid-column: span 2; + } +} + +@media (max-width: 1024px) { + .footer-hero-text h1 { + font-size: 32px; + } + + .footer-stats { + grid-template-columns: repeat(2, 1fr); + gap: 20px; + } + + .footer-links-grid { + grid-template-columns: repeat(2, 1fr); + gap: 28px; + } + + .newsletter-column { + grid-column: span 2; + margin-top: 20px; + } +} + +@media (max-width: 768px) { + .container { + padding: 0 16px; + } + + .footer-hero { + padding: 40px 0 30px; + } + + .footer-hero-text h1 { + font-size: 28px; + margin-bottom: 12px; + } + + .footer-hero-text p { + font-size: 15px; + line-height: 1.6; + } + + .footer-stats { + grid-template-columns: repeat(2, 1fr); + gap: 16px; + margin-top: 30px; + } + + .stat-item { + padding: 20px 12px; + } + + .stat-number { + font-size: 22px; + } + + .stat-label { + font-size: 11px; + } + + .footer-links-section { + padding: 40px 0; + } + + .footer-links-grid { + grid-template-columns: 1fr; + gap: 24px; + } + + .footer-column { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + padding: 24px; + backdrop-filter: blur(20px); + } + + .footer-column-title { + text-align: center; + margin-bottom: 20px; + padding-bottom: 12px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + .footer-links { + gap: 8px; + } + + .footer-link { + width: 100%; + justify-content: flex-start; + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 10px; + margin: 0; + } + + .footer-link:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.15); + transform: translateX(4px); + } + + .newsletter-column { + padding: 24px; + grid-column: span 1; + margin-top: 0; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + backdrop-filter: blur(20px); + } + + .footer-bottom-content { + grid-template-columns: 1fr; + gap: 20px; + text-align: center; + } + + .footer-bottom-left { + justify-content: center; + flex-wrap: wrap; + } + + .footer-legal-links { + gap: 16px; + flex-wrap: wrap; + justify-content: center; + } + + .footer-bottom-right { + justify-content: center; + } + + .footer-copyright { + text-align: center; + } + + .footer-credits { + justify-content: center; + } + + /* Improve touch targets on mobile */ + .footer-link { + padding: 12px 16px; + margin: 4px 0; + } + + .social-link { + width: 52px; + height: 52px; + } + + .newsletter-button { + padding: 16px 24px; + font-size: 15px; + } + + .newsletter-input { + padding: 14px 16px; + font-size: 15px; + } +} + +@media (max-width: 480px) { + .footer-hero { + padding: 32px 0 24px; + } + + .footer-hero-text h1 { + font-size: 24px; + line-height: 1.3; + } + + .footer-brand-name { + font-size: 20px; + } + + .footer-stats { + grid-template-columns: 1fr 1fr; + gap: 12px; + margin-top: 24px; + } + + .stat-item { + padding: 16px 8px; + } + + .stat-number { + font-size: 18px; + } + + .stat-label { + font-size: 10px; + } + + .footer-links-section { + padding: 32px 0; + } + + .footer-legal-links { + flex-direction: column; + gap: 12px; + } + + .social-label { + display: none; + } + + .footer-column { + padding: 20px; + border-radius: 12px; + } + + .footer-column-title { + font-size: 1.1rem; + margin-bottom: 16px; + } + + .footer-link { + padding: 12px 16px; + font-size: 14px; + border-radius: 8px; + } + + .newsletter-column { + padding: 20px; + border-radius: 12px; + } + + .newsletter-form { + gap: 10px; + } + + .newsletter-button { + padding: 14px 20px; + font-size: 14px; + } + + .newsletter-input { + padding: 12px 14px; + font-size: 14px; + } + + .quick-links-list { + gap: 8px; + } + + .quick-link { + padding: 10px 12px; + font-size: 12px; + } + + /* Reduce animations on small screens for better performance */ + .enhanced-footer::before, + .enhanced-footer::after { + animation-duration: 40s; + } + + .stat-item:hover { + transform: translateY(-2px) scale(1.01); + } + + .footer-link:hover { + transform: translateX(2px); + } +} + +/* Animation */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.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; } diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx index 76fc7ac..2b271f5 100644 --- a/src/theme/Footer/Layout/index.tsx +++ b/src/theme/Footer/Layout/index.tsx @@ -1,6 +1,15 @@ -import React, {type ReactNode} from 'react'; -import clsx from 'clsx'; +import React, {type ReactNode, useState, useEffect} from 'react'; +import Link from "@docusaurus/Link"; import type {Props} from '@theme/Footer/Layout'; +import './enhanced-footer.css'; + +// Dynamic stats interface +interface FooterStats { + activeUsers: string; + tutorials: string; + successRate: string; + supportHours: string; +} export default function FooterLayout({ style, @@ -8,19 +17,382 @@ export default function FooterLayout({ logo, copyright, }: Props): ReactNode { + const [currentYear, setCurrentYear] = useState(new Date().getFullYear()); + const [stats, setStats] = useState({ + activeUsers: '50K+', + tutorials: '200+', + successRate: '95%', + supportHours: '24/7' + }); + const [email, setEmail] = useState(''); + const [isSubscribed, setIsSubscribed] = useState(false); + + useEffect(() => { + // Simulate real-time stats updates + const fetchStats = async () => { + try { + // Simulate API call with realistic growth + const baseUsers = 52000; + const baseTutorials = 215; + const randomGrowth = Math.floor(Math.random() * 100); + + setStats({ + activeUsers: `${Math.floor((baseUsers + randomGrowth) / 1000)}K+`, + tutorials: `${baseTutorials + Math.floor(randomGrowth / 10)}+`, + successRate: `${95 + Math.floor(Math.random() * 3)}%`, + supportHours: '24/7' + }); + } catch (error) { + console.log('Using fallback stats'); + } + }; + + fetchStats(); + const interval = setInterval(fetchStats, 30000); // Update every 30 seconds + + return () => clearInterval(interval); + }, []); + + const handleSubscribe = (e: React.FormEvent) => { + e.preventDefault(); + if (email) { + setIsSubscribed(true); + setTimeout(() => { + setIsSubscribed(false); + setEmail(''); + }, 3000); + } + }; return ( -