diff --git a/.gitignore b/.gitignore index c99a29e4..195c4c26 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,6 @@ yarn-error.log* # Temporary files /tmp/ tsconfig.tsbuildinfo + +.idea/ +*.iml \ No newline at end of file diff --git a/src/pages/community/community.css b/src/pages/community/community.css index 5120f605..54c2e003 100644 --- a/src/pages/community/community.css +++ b/src/pages/community/community.css @@ -8,97 +8,107 @@ "Segoe UI", Roboto, sans-serif; - background: #ffffff; - transition: background-color 0.3s ease; + background: radial-gradient(circle at top left, #eef2ff 0, #ffffff 40%, #f9fafb 100%); + transition: + background-color 0.4s ease, + color 0.4s ease; } -/* Community page should maintain its own background regardless of theme */ [data-theme="dark"] .community-page { - background: transparent; + background: radial-gradient(circle at top left, #111827 0, #020617 45%, #020617 100%); } -/* CSS Custom Properties for better browser support */ :root { --section-color-rgb: 139, 92, 246; - --text-primary: #1e293b; + --text-primary: #0f172a; --text-secondary: #64748b; --bg-primary: #ffffff; --bg-secondary: #f8fafc; - --border-color: #e2e8f0; + --border-subtle: #e2e8f0; + --card-radius: 20px; } [data-theme="dark"] { - --text-primary: var(--dark-text-primary); - --text-secondary: var(--dark-text-secondary); - --bg-primary: var(--dark-bg-secondary); - --bg-secondary: var(--dark-bg-primary); - --border-color: var(--dark-border); + --text-primary: #e5e7eb; + --text-secondary: #9ca3af; + --bg-primary: #020617; + --bg-secondary: #020617; + --border-subtle: #1f2937; } /* Hero Section */ .community-hero { position: relative; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 80px 0 60px; + background: radial-gradient(circle at top left, #212121 0, #6059ec 40%, #0f172a 100%); + color: rgb(246, 212, 212); + padding: 88px 0 72px; overflow: hidden; text-align: center; } -/* Dark theme support */ [data-theme="dark"] .community-hero { - background: linear-gradient(135deg, #4c1d95 0%, #581c87 100%); + background: radial-gradient(circle at top left, #4c228d 0, #0d0c32 40%, #0d2aab 100%); } .community-hero-background { position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; overflow: hidden; + opacity: 0.5; } .hero-particle { position: absolute; - width: 200px; - height: 200px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.1); - animation: float 6s ease-in-out infinite; + width: 220px; + height: 220px; + border-radius: 999px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%); + filter: blur(2px); + animation: float 12s ease-in-out infinite; } .hero-particle:nth-child(1) { - top: 10%; - left: 10%; + top: -40px; + left: -40px; animation-delay: 0s; } .hero-particle:nth-child(2) { - top: 60%; - right: 10%; - animation-delay: 2s; + top: 40%; + right: -70px; + animation-delay: 3s; } .hero-particle:nth-child(3) { - bottom: 20%; - left: 50%; - animation-delay: 4s; + bottom: -80px; + left: 40%; + animation-delay: 6s; } -@keyframes float { - 0%, +@keyframes continuousFloat { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } 100% { - transform: translateY(0px) rotate(0deg); + transform: translateY(0); + } +} + +@keyframes darkFloat { + 0%,100% { + transform: translateY(0); } 50% { - transform: translateY(-20px) rotate(180deg); + transform: translateY(-4px); } } .container { - max-width: 1200px; + max-width: 1180px; margin: 0 auto; padding: 0 24px; } @@ -109,14 +119,61 @@ z-index: 2; } +.hero-badge-row { + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + margin: 0 auto 18px; + gap: 12px; + padding: 1px 12px; + border-radius: 999px; + background: rgba(60, 28, 148, 0.427); + border: 1px solid rgba(242, 199, 190, 0.966); + +} + +.hero-badge, +.hero-pill { + display: flex; + align-items: center; + justify-content: center; + padding: 6px 18px; + min-height: 36px; + font-size: 0.78rem; + letter-spacing: 0.05em; + text-transform: uppercase; + border-radius: 999px; + line-height: 1; + box-sizing: border-box; + white-space: nowrap; + +} + +.hero-badge { + background: rgba(41, 94, 220, 0.85); + color: #e5e7eb; + border: 1px solid rgba(148, 163, 184, 0.8); + margin-top: 25px; +} + +.hero-pill { + background: rgba(10, 13, 36, 0.2); + color: #e0e7ff; + border: 1px solid rgba(129, 140, 248, 0.6); +} + .hero-icon { - font-size: 4rem; - margin-bottom: 24px; - display: inline-block; - animation: bounce 2s infinite; + font-size: 3.75rem; + margin-bottom: 20px; + display: inline-flex; + align-items: center; + justify-content: center; + filter: drop-shadow(0 12px 28px rgba(15, 23, 42, 0.55)); + animation: heroBounce 2.8s infinite; } -@keyframes bounce { +@keyframes heroBounce { 0%, 20%, 50%, @@ -124,414 +181,631 @@ 100% { transform: translateY(0); } - 40% { transform: translateY(-10px); } - 60% { - transform: translateY(-5px); + transform: translateY(-4px); } } .community-hero-title { - font-size: 3.5rem; + font-size: 3.1rem; font-weight: 800; - margin-bottom: 24px; - background: linear-gradient(45deg, #ffffff, #f0f9ff); + margin-bottom: 20px; + background: linear-gradient(45deg, #ffffff, #e0f2fe); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - line-height: 1.2; + line-height: 1.18; } .community-hero-description { - font-size: 1.25rem; - line-height: 1.7; - max-width: 800px; + font-size: 1.15rem; + line-height: 1.8; + max-width: 780px; margin: 0 auto; opacity: 0.95; } .highlight { - color: #fbbf24; + color: #fde68a; font-weight: 600; } +.hero-cta-row { + margin-top: 28px; + display: flex; + justify-content: center; + gap: 14px; + flex-wrap: wrap; +} + +.hero-primary-cta, +.hero-secondary-cta { + border-radius: 999px; + font-size: 0.95rem; + font-weight: 600; + padding: 10px 20px; + border: 1px solid transparent; + cursor: pointer; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 6px; + transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, + color 0.2s ease, border-color 0.2s ease; +} + +.hero-primary-cta { + background: linear-gradient(135deg, #a855f7, #4f46e5); + color: #f9fafb; + box-shadow: 0 12px 30px rgba(15, 23, 42, 0.7); +} + +.hero-primary-cta span { + font-size: 0.9em; +} + +.hero-secondary-cta { + background: rgba(15, 23, 42, 0.2); + color: #e5e7eb; + border-color: rgba(148, 163, 184, 0.7); + box-shadow: 0 12px 30px rgba(15, 23, 42, 0.7); +} + +.hero-primary-cta:hover, +.hero-primary-cta:focus-visible { + transform: translateY(-3px); + box-shadow: 5px 5px 5px rgba(15, 23, 42, 0.85) , 0 12px 24px rgb(246, 232, 232); + background-color: rgb(226, 73, 73); + color: #c7d3f0; + border: 1px solid rgb(244, 188, 188); + transition: all 0.3s ease; +} + +.hero-secondary-cta:hover, +.hero-secondary-cta:focus-visible { + transform: translateY(-3px); + background: rgb(58, 4, 138); + border-color: rgba(92, 154, 229, 0.9); + color: #f9fafb; + box-shadow: 0 12px 30px rgba(206, 217, 241, 0.7); +} + +.hero-primary-cta:focus-visible, +.hero-secondary-cta:focus-visible { + outline: 2px solid #ecdaad; + outline-offset: 2px; +} + /* Contribution Header */ .contribution-header { - padding: 50px 0 35px; - background: linear-gradient(to bottom, #f8fafc, #ffffff); + padding: 52px 0 32px; + background: linear-gradient(to bottom, rgba(248, 250, 252, 0.9), #ffffff); text-align: center; } [data-theme="dark"] .contribution-header { - background: linear-gradient(to bottom, #1a1a1a, #121212); + background: linear-gradient(to right ,#221551,#0c1a57, #001466); } .contribution-header-content { - max-width: 800px; + max-width: 760px; margin: 0 auto; } .contribution-icon { - font-size: 3rem; - margin-bottom: 20px; + font-size: 2.8rem; + margin-bottom: 14px; display: inline-block; } .contribution-title { - font-size: 2.5rem; + font-size: 2.3rem; font-weight: 800; - color: #1e293b; - margin-bottom: 16px; + color: var(--text-primary); + margin-bottom: 12px; } -[data-theme="dark"] .contribution-title { - color: #ffffff; +.contribution-description { + font-size: 1.06rem; + color: var(--text-secondary); + line-height: 1.7; } -.contribution-description { - font-size: 1.2rem; - color: #64748b; - line-height: 1.6; +.contribution-meta-row { + margin-top: 20px; + display: flex; + justify-content: center; + gap: 10px; + flex-wrap: wrap; +} + +.contribution-meta-pill { + font-size: 0.8rem; + letter-spacing: 0.08em; + text-transform: uppercase; + padding: 6px 12px; + border-radius: 999px; + border: 1px solid rgba(148, 163, 184, 0.7); + color: var(--text-secondary); + background: rgba(248, 250, 252, 0.9); } -[data-theme="dark"] .contribution-description { - color: #edf2f7; +.contribution-meta-pill.subtle { + opacity: 0.9; +} + +[data-theme="dark"] .contribution-meta-pill { + background: rgb(8 31 85); + border-color: rgba(55, 65, 81, 0.9); } /* Main Content */ .community-content { padding: 40px 0 80px; - background: #ffffff; -} - -[data-theme="dark"] .community-content { - background: #121212; } .community-layout { display: grid; - grid-template-columns: 1fr 300px; - gap: 48px; - align-items: start; + grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr); + gap: 40px; + align-items: flex-start; } .contribution-sections { display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 24px; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 25px; } /* Contribution Sections */ .contribution-section { - background: white; - border-radius: 16px; - padding: 24px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); - transition: all 0.3s ease; - transition: - transform 0.2s ease, - box-shadow 0.2s ease; + position: relative; + border-radius: var(--card-radius); + padding: 1px; + background: linear-gradient( + 135deg, + rgb(52 4 83 / 78%), + rgba(129, 140, 248, 0.2), + rgba(244, 114, 182, 0.3) + ); + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; } .contribution-section:hover { - transform: translateY(-2px); - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); + /* Rotate slightly on X and Y axis, and move toward the viewer (Z) */ + transform: translateY(-6px) rotateX(2deg) rotateY(1deg); + box-shadow: + 0 20px 40px rgb(113 94 94), + 0 15px 15px rgb(8 0 0); + z-index: 10; } -[data-theme="dark"] .contribution-section { - background: #1a1a1a; - border: 1px solid #2d2d2d; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); -} - -[data-theme="dark"] .contribution-section:hover { - box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4); -} - -.contribution-section.active { - border: 2px solid #8b5cf6; - box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); +.contribution-section { transition: + transform 0.3s ease, box-shadow 0.3s ease, - border 0.3s ease; + background 0.3s ease; } -.contribution-section.selected { - border: 2px solid #8b5cf6; - box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); - transition: - box-shadow 0.3s ease, - border 0.3s ease; - transform: translateY(30px); +/* Make the inner content feel layered */ +.contribution-section:hover .contribution-section-inner { + background: #f4f6fb1a; } -/* Table of Contents Sidebar */ -.table-of-contents { - position: sticky; - top: 100px; - background: white; - border-radius: 16px; - padding: 24px; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(0, 0, 0, 0.05); - height: fit-content; +[data-theme="dark"] .contribution-section:hover { + box-shadow: + 0 20px 40px rgba(0,0,0,0.8), + 0 0 25px rgba(139,92,246,0.25); } -[data-theme="dark"] .table-of-contents { - background: #1a1a1a; - border: 1px solid #2d2d2d; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); +.contribution-section::before { + content: ""; + position: absolute; + inset: -1px; + border-radius: inherit; + opacity: 0; + background: radial-gradient(circle at top left, rgba(248, 250, 252, 0.8), transparent 55%); + transition: opacity 0.25s ease; + pointer-events: none; } -.toc-header { - display: flex; - align-items: center; - gap: 8px; - margin-bottom: 20px; - padding-bottom: 16px; - border-bottom: 2px solid #f1f5f9; +.contribution-section.selected::before { + opacity: 1; } -[data-theme="dark"] .toc-header { - border-bottom: 2px solid #2d2d2d; +.contribution-section-inner { + position: relative; + border-radius: calc(var(--card-radius) - 2px); + padding: 20px 18px 20px; + background: rgb(255 255 255 / 0%); + box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08); + text-align: left; } -.toc-icon { - font-size: 1.2rem; -} +[data-theme="dark"] .contribution-section-inner { + background: linear-gradient( + 135deg, + #061e50, + #1a0749 + ); -.toc-header h4 { - font-size: 1rem; - font-weight: 600; - color: #1e293b; - margin: 0; -} + border: 1px solid rgb(63 38 119 / 49%); -[data-theme="dark"] .toc-header h4 { - color: #ffffff; + box-shadow: + 0 10px 30px rgba(0,0,0,0.5), + 0 0 20px rgba(139,92,246,0.08); } -.toc-nav { - display: flex; - flex-direction: column; - gap: 4px; +.contribution-section.selected { + transform: translateY(-4px); + box-shadow: 0 18px 46px rgb(65 55 123); } -.toc-item { +.section-chip-row { display: flex; + justify-content: space-between; align-items: center; - gap: 12px; - padding: 12px 16px; - border: none; - background: transparent; - border-radius: 8px; - cursor: pointer; - transition: all 0.3s ease; - text-align: left; - width: 100%; - font-size: 0.9rem; - font-weight: 500; - color: #64748b; -} - -[data-theme="dark"] .toc-item { - color: #edf2f7; -} - -.toc-item:hover { - background: rgba(0, 0, 0, 0.04); - transform: translateX(4px); -} - -[data-theme="dark"] .toc-item:hover { - background: rgba(255, 255, 255, 0.08); -} - -.toc-item.active { - background: rgba(139, 92, 246, 0.1); - color: #8b5cf6; - font-weight: 600; -} - -[data-theme="dark"] .toc-item.active { - background: rgba(139, 92, 246, 0.2); - color: #a78bfa; -} - -.toc-item.active + .toc-item.active { - margin-top: -2px; - /* overlap borders */ - border-top: 1px solid rgba(139, 92, 246, 0.3); - /* subtle divider */ - border-radius: 0; - /* flatten middle items */ + margin-bottom: 12px; + gap: 8px; } -/* First active in a block keeps rounded top */ -.toc-item.active:first-child, -.toc-item.active:not(:first-child):not(:last-child) { - border-radius: 8px 8px 0 0; +.section-label-chip { + font-size: 0.67rem; + text-transform: uppercase; + letter-spacing: 0.08em; + padding: 4px 10px; + border-radius: 999px; + border: 1px solid rgb(148 163 184 / 62%); + color: #282840; + background: rgb(189 179 218 / 37%); } -/* Last active in a block keeps rounded bottom */ -.toc-item.active:last-child, -.toc-item.active + .toc-item:not(.active) { - border-radius: 0 0 8px 8px; +.section-pill { + font-size: 0.73rem; + padding: 4px 9px; + border-radius: 999px; + background: rgb(194 190 230 / 43%); + color: #644c7d; } -.toc-item-icon { - font-size: 1rem; - flex-shrink: 0; +[data-theme="dark"] .section-label-chip { + background: rgb(35 17 96 / 96%); + border-color: rgb(50 56 142 / 78%); } -.toc-item-text { - flex: 1; +[data-theme="dark"] .section-pill { + background: rgb(33 37 66); + color: #c7d2fe; } .section-header { display: flex; align-items: center; - gap: 16px; - margin-bottom: 16px; + justify-content: flex-start; + gap: 10px; + margin-bottom: 10px; + text-align: left; + width: 100% ; } .section-icon { - width: 48px; - height: 48px; - border-radius: 12px; + width: 40px; + height: 40px; + border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); + box-shadow: 0 10px 24px #605baa; flex-shrink: 0; } .section-title { - font-size: 1.8rem; + font-size: 1.45rem; font-weight: 700; - color: #1e293b; + color: #ffffff; margin: 0; + text-align: left; + width: 100%; } -[data-theme="dark"] .section-title { - color: #ffffff; +.section-subtitle { + margin: 3px 0 0; + font-size: 0.9rem; + color: var(--text-secondary); + text-align: left; } .section-description { - color: #64748b; - font-size: 1rem; - margin-bottom: 20px; + color: var(--text-secondary); + font-size: 0.98rem; + margin: 12px 0 16px; line-height: 1.6; -} - -[data-theme="dark"] .section-description { - color: #edf2f7; + text-align: left; } .section-items { list-style: none; padding: 0; - margin: 0 0 20px 0; + margin: 0 0 14px; + display: flex; + flex-direction: column; + gap: 4px; +} + +.section-item-row { + border-bottom: 1px solid rgba(226, 232, 240, 0.9); +} + +.section-item-row:last-child { + border-bottom: none; +} + +[data-theme="dark"] .section-item-row { + border-bottom-color: rgb(101 122 152 / 95%); } .section-item { display: flex; align-items: center; - gap: 16px; - padding: 12px 0 10px; - font-size: 0.95rem; - color: #374151; - border-bottom: 1px solid #f1f5f9; + gap: 10px; + width: 100%; + padding: 9px 0; + border: none; + background: none; + cursor: pointer; + font-size: 0.93rem; + color: var(--text-primary); font-weight: 600; + text-align: left; } -[data-theme="dark"] .section-item { - color: #edf2f7; - border-bottom: 1px solid #2d2d2d; +.section-item-text { + flex: 1; } -.section-item:last-child { - border-bottom: none; +.section-item:hover .section-item-text { + color: #4f46e5; +} + +[data-theme="dark"] .section-item:hover .section-item-text { + color: #c7d2fe; +} + +.section-item:focus-visible { + outline: none; +} + +.section-item:focus-visible .section-item-text { + outline: 2px solid #4f46e5; + outline-offset: 2px; + border-radius: 6px; } .item-arrow { - color: #8b5cf6; + color: #a95cf6; font-size: 0.8rem; flex-shrink: 0; + transition: transform 0.24s ease; +} + +.section-item.open .item-arrow { + transform: rotate(90deg); +} + +.section-item-details { + margin: 0 0 8px 20px; + padding: 10px 12px 11px; + background: #f8fafc; + border-radius: 10px; + border-left: 3px solid #8b5cf6; + overflow: hidden; +} + +[data-theme="dark"] .section-item-details { + background: #020617; + border-left-color: #8b5cf6; +} + +.section-item-details p { + margin: 0; + color: var(--text-secondary); + font-size: 0.9rem; + line-height: 1.6; } +/* Links inside cards */ .section-links { - background: linear-gradient(135deg, #f8fafc, #f1f5f9); - border-radius: 12px; - padding: 20px; - border: 1px solid #e2e8f0; + margin-top: 12px; + background: linear-gradient(135deg, #f8fafc, #e5e7eb); + border-radius: 13px; + padding: 14px 14px 13px; + border: 1px solid rgba(226, 232, 240, 0.9); + box-shadow: 0 14px 32px rgb(86 91 102 / 85%); + backdrop-filter: blur(18px); } [data-theme="dark"] .section-links { - background: linear-gradient(135deg, #2d2d2d, #1a1a1a); - border: 1px solid #3d3d3d; + background: radial-gradient(circle at top left, #271a5e, #141b51 60%); + border-color: rgba(31, 41, 55, 0.9); } .links-header { display: flex; align-items: center; - gap: 12px; - margin-bottom: 20px; + gap: 10px; + margin-bottom: 10px; font-weight: 600; - color: #374151; -} - -[data-theme="dark"] .links-header { - color: #edf2f7; + color: var(--text-primary); } .links-icon { - font-size: 1.2rem; + font-size: 1.1rem; } .links-container { display: flex; - gap: 12px; + gap: 8px; flex-wrap: wrap; } .resource-link { display: inline-flex; align-items: center; - padding: 8px 16px; - background: white; - color: var(--link-color, #8b5cf6); + gap: 5px; + padding: 7px 14px; + background: #ffffff; + color: var(--link-color, #4f46e5); text-decoration: none; - border-radius: 8px; + border-radius: 999px; font-weight: 600; - border: 2px solid var(--link-color, #8b5cf6); - transition: all 0.3s ease; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - font-size: 0.9rem; + border: 1px solid var(--link-color, #4f46e5); + transition: all 0.22s ease; + font-size: 0.86rem; + box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); } -[data-theme="dark"] .resource-link { - background: #1a1a1a; - color: var(--link-color, #8b5cf6); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); +.resource-link-icon { + font-size: 0.8em; + opacity: 0.7; } .resource-link:hover { - background: var(--link-color, #8b5cf6); - color: white; - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); + background: var(--link-color, #4f46e5); + color: #ffffff; + transform: translateY(-3px); + box-shadow: 10px 10px 22px rgb(15 23 42 / 73%); text-decoration: none; } [data-theme="dark"] .resource-link:hover { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); + box-shadow: + 0 0 20px rgba(139,92,246,0.4); + + transform: + translateY(-3px) + scale(1.03); +} + +/* Table of Contents Sidebar */ +.table-of-contents { + position: sticky; + top: 100px; + background: #f8fafc; + border-radius: 18px; + padding: 18px 18px 16px; + box-shadow: 0 14px 32px rgb(15 23 42 / 85%); + border: 1px solid rgb(139 183 242 / 96%); + height: fit-content; + backdrop-filter: blur(18px); +} + +.contribution-section.table-of-contents { + animation: continuousFloat 0.01s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; +} + +[data-theme="dark"] .table-of-contents { + background: linear-gradient( + 135deg, + #111827, + #26044d + ); + + border: 1px solid rgba(139,92,246,0.15); + + box-shadow: + 0 15px 40px #4e5156; +} + +.toc-header { + display: flex; + align-items: flex-start; + gap: 10px; + margin-bottom: 16px; + padding-bottom: 14px; + border-bottom: 1px solid rgba(226, 232, 240, 0.9); +} + +.toc-icon { + font-size: 1.2rem; +} + +.toc-header h4 { + font-size: 0.95rem; + font-weight: 600; + color: var(--text-primary); + margin: 0 0 2px; +} + +.toc-subtitle { + margin: 0; + font-size: 0.78rem; + color: var(--text-secondary); +} + +.toc-nav { + display: flex; + flex-direction: column; + gap: 4px; +} + +.toc-item { + display: flex; + align-items: center; + gap: 10px; + padding: 9px 10px; + border: none; + background: #00000008; + border-radius: 10px; + cursor: pointer; + transition: all 0.18s ease; + text-align: left; + width: 100%; + font-size: 0.88rem; + font-weight: 500; + color: var(--text-secondary); +} + +.toc-item:hover { + background: rgba(148, 163, 184, 0.09); + transform: translateX(2px); +} + +.toc-item.active { + background: rgba(79, 70, 229, 0.08); + color: #0f172ab3; + font-weight: 600; +} + +[data-theme="dark"] .toc-item.active { + background: + linear-gradient( + 90deg, + rgba(139,92,246,0.25), + rgba(99,102,241,0.15) + ); + + color: #c7d2fe; + + border-left: 3px solid #573e90; +} + +.toc-item:focus-visible { + outline: 2px solid #4f46e5; + outline-offset: 2px; +} + +.toc-item-icon { + font-size: 1rem; + flex-shrink: 0; +} + +.toc-item-text { + flex: 1; } /* Thank You Section */ @@ -543,12 +817,12 @@ } .thank-you-card { - background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + background: linear-gradient(135deg, #6366f1 0%, #7c3aed 40%, #ec4899 100%); color: white; padding: 0; border-radius: 24px; - box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3); - max-width: 700px; + box-shadow: 0 24px 48px rgba(79, 70, 229, 0.6); + max-width: 720px; width: 100%; overflow: hidden; position: relative; @@ -557,292 +831,204 @@ .thank-you-card::before { content: ""; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background: linear-gradient( 45deg, - rgba(255, 255, 255, 0.1) 0%, - transparent 50%, - rgba(255, 255, 255, 0.1) 100% + rgba(255, 255, 255, 0.16) 0%, + transparent 45%, + rgba(255, 255, 255, 0.22) 100% ); pointer-events: none; } .thank-you-header { text-align: center; - padding: 40px 40px 20px; + padding: 34px 32px 16px; position: relative; } .thank-you-icons { display: flex; justify-content: center; - gap: 16px; - margin-bottom: 20px; + gap: 14px; + margin-bottom: 14px; } .thank-icon { - font-size: 2.5rem; - animation: bounce 2s infinite; - animation-delay: var(--delay, 0s); -} - -.thank-icon:nth-child(1) { - --delay: 0s; -} - -.thank-icon:nth-child(2) { - --delay: 0.3s; -} - -.thank-icon:nth-child(3) { - --delay: 0.6s; -} - -@keyframes bounce { - 0%, - 20%, - 50%, - 80%, - 100% { - transform: translateY(0); - } - - 40% { - transform: translateY(-10px); - } - - 60% { - transform: translateY(-5px); - } + font-size: 2.2rem; + animation: heroBounce 2.4s infinite; } .thank-you-card h3 { - font-size: 2.5rem; + font-size: 2.2rem; font-weight: 800; - margin: 0 0 8px 0; + margin: 0 0 6px; color: white; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + text-shadow: 0 2px 6px rgba(15, 23, 42, 0.35); } .thank-you-subtitle { - font-size: 1.2rem; + font-size: 1rem; font-weight: 500; - opacity: 0.9; - color: #fbbf24; + opacity: 0.94; + color: #fef9c3; } .thank-you-content { - padding: 0 40px 40px; + padding: 0 32px 32px; } .thank-you-main { - font-size: 1.2rem; + font-size: 1.12rem; line-height: 1.6; - margin-bottom: 16px; + margin-bottom: 10px; text-align: center; font-weight: 500; } .thank-you-description { - font-size: 1.1rem; + font-size: 1.02rem; line-height: 1.7; - margin-bottom: 32px; + margin-bottom: 26px; text-align: center; - opacity: 0.95; -} - -.highlight { - padding: 2px 8px; - border-radius: 6px; - font-weight: 600; - text-shadow: none; + opacity: 0.96; } .highlight.collaborate { - background: rgba(16, 185, 129, 0.3); - color: #10f981; + background: rgba(16, 185, 129, 0.35); + color: #bbf7d0; } .highlight.learn { - background: rgba(59, 130, 246, 0.3); - color: #60a5fa; + background: rgba(59, 130, 246, 0.35); + color: #bfdbfe; } .highlight.grow { - background: rgba(245, 158, 11, 0.3); - color: #fbbf24; -} - -.thank-you-features { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 16px; - margin-bottom: 32px; -} - -.feature-item { - display: flex; - align-items: center; - gap: 12px; - background: rgba(255, 255, 255, 0.1); - padding: 16px; - border-radius: 12px; - backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.2); -} - -.feature-icon { - font-size: 1.5rem; - flex-shrink: 0; + background: rgba(245, 158, 11, 0.35); + color: #fed7aa; } .thank-you-quote { - background: rgba(255, 255, 255, 0.15); + background: rgba(15, 23, 42, 0.22); border: none; - padding: 24px; - margin: 32px 0; + padding: 20px; + margin: 26px 0 20px; border-radius: 16px; text-align: center; position: relative; - backdrop-filter: blur(10px); + backdrop-filter: blur(12px); } .quote-icon { - font-size: 2rem; - margin-bottom: 12px; + font-size: 1.8rem; + margin-bottom: 8px; display: block; } .thank-you-quote em { - font-size: 1.1rem; + font-size: 1.02rem; font-weight: 500; - color: #fbbf24; + color: #fef9c3; } .support-section { display: flex; align-items: center; - gap: 16px; - background: rgba(255, 255, 255, 0.1); - padding: 20px; - border-radius: 12px; - backdrop-filter: blur(10px); + gap: 12px; + background: rgba(15, 23, 42, 0.22); + padding: 16px 17px; + border-radius: 14px; + backdrop-filter: blur(12px); } .support-icon { - font-size: 1.8rem; + font-size: 1.6rem; flex-shrink: 0; } .support-text { font-weight: 500; - font-size: 1rem; + font-size: 0.98rem; margin: 0; line-height: 1.5; } [data-theme="dark"] .thank-you-card { - background: linear-gradient(135deg, #4c1d95 0%, #581c87 50%, #7c3aed 100%); - box-shadow: 0 20px 40px rgba(76, 29, 149, 0.4); + box-shadow: 0 26px 58px rgba(55, 48, 163, 0.9); } /* Responsive Design */ @media (max-width: 1024px) { .community-layout { - grid-template-columns: 1fr; + grid-template-columns: minmax(0, 1fr); gap: 32px; } .table-of-contents { position: static; order: -1; - margin-bottom: 32px; + margin-bottom: 12px; } .toc-nav { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 8px; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 6px; + } +} + +@media (max-width: 900px) { + .contribution-sections { + grid-template-columns: minmax(0, 1fr); } } @media (max-width: 768px) { + .community-hero { + padding: 70px 0 48px; + } + .community-hero-title { - font-size: 2.5rem; + font-size: 2.35rem; } .community-hero-description { - font-size: 1.1rem; + font-size: 1.02rem; } .contribution-title { font-size: 2rem; } - .contribution-sections { - gap: 32px; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - } - - .contribution-section { - padding: 32px 24px; + .contribution-section-inner { + padding: 18px 16px 18px; } .section-title { - font-size: 1.5rem; - } - - .section-header { - gap: 12px; - } - - .section-icon { - width: 40px; - height: 40px; - font-size: 1.3rem; + font-size: 1.35rem; } .thank-you-card { - padding: 32px 24px; + border-radius: 22px; } .thank-you-card h3 { - font-size: 1.8rem; + font-size: 1.85rem; } .thank-you-header { - padding: 32px 24px 16px; + padding: 26px 22px 12px; } .thank-you-content { - padding: 0 24px 32px; - } - - .thank-you-features { - grid-template-columns: 1fr; - gap: 12px; - } - - .feature-item { - padding: 12px; - } - - .toc-nav { - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - } - - .toc-item { - padding: 10px 12px; - font-size: 0.85rem; + padding: 0 22px 24px; } } -@media (max-width: 480px) { +@media (max-width: 520px) { .community-hero { - padding: 60px 0 40px; + padding: 64px 0 42px; } .community-hero-title { @@ -850,15 +1036,11 @@ } .contribution-header { - padding: 40px 0 30px; - } - - .contribution-title { - font-size: 1.8rem; + padding: 40px 0 28px; } - .contribution-section { - padding: 24px 20px; + .contribution-section-inner { + padding: 16px 14px 16px; } .links-container { @@ -866,11 +1048,12 @@ } .resource-link { - text-align: center; + width: 100%; + justify-content: center; } .thank-you-card h3 { - font-size: 1.6rem; + font-size: 1.7rem; } .thank-you-icons { @@ -881,95 +1064,8 @@ font-size: 2rem; } - .thank-you-header { - padding: 24px 20px 12px; - } - - .thank-you-content { - padding: 0 20px 24px; + .support-section { + flex-direction: column; + align-items: flex-start; } } -.section-header h2, -.section-header h3, -.contribution-section h2, -.contribution-section h3 { - color: #1e293b; - font-weight: 700; -} - -[data-theme="dark"] .section-header h2, -[data-theme="dark"] .section-header h3, -[data-theme="dark"] .contribution-section h2, -[data-theme="dark"] .contribution-section h3 { - color: #ffffff; -} - -/* force the heading for a constant theme */ -.contribution-section > h2, -.contribution-section > h3, -.contribution-section > h4 { - color: #1e293b; - font-weight: 700; -} - -[data-theme="dark"] .contribution-section > h2, -[data-theme="dark"] .contribution-section > h3, -[data-theme="dark"] .contribution-section > h4 { - color: #ffffff; -} - -/* Generic fix for any heading contribution sections */ -.contribution-section h1, -.contribution-section h2, -.contribution-section h3, -.contribution-section h4, -.contribution-section h5, -.contribution-section h6 { - color: #1e293b; -} - -[data-theme="dark"] .contribution-section h1, -[data-theme="dark"] .contribution-section h2, -[data-theme="dark"] .contribution-section h3, -[data-theme="dark"] .contribution-section h4, -[data-theme="dark"] .contribution-section h5, -[data-theme="dark"] .contribution-section h6 { - color: #ffffff; -} - -/* Dropdown Details Styling */ -.section-item-details { - margin: 5px 0 10px 25px; - padding: 12px 15px; - background: #f8fafc; - border-radius: 8px; - border-left: 3px solid #8b5cf6; - overflow: hidden; -} - -[data-theme="dark"] .section-item-details { - background: #2d2d2d; - border-left: 3px solid #8b5cf6; -} - -.section-item-details p { - margin: 0; - color: #64748b; - font-size: 0.95rem; - line-height: 1.6; -} - -[data-theme="dark"] .section-item-details p { - color: #e2e8f0; -} - -.item-arrow { - color: #8b5cf6; - font-size: 0.8rem; - flex-shrink: 0; - transition: transform 0.3s ease; -} - -.item-arrow.rotate { - transform: rotate(90deg); -} diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx index b5cf786d..fe1c94d7 100644 --- a/src/pages/community/index.tsx +++ b/src/pages/community/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useEffect, useState } from "react"; import Layout from "@theme/Layout"; import Head from "@docusaurus/Head"; import { motion } from "framer-motion"; @@ -14,6 +14,8 @@ interface ContributionSection { details?: string[]; links: { text: string; url: string }[]; color: string; + // small label chip shown at top of card + label: string; } const contributionSections: ContributionSection[] = [ @@ -21,16 +23,16 @@ const contributionSections: ContributionSection[] = [ id: "code", title: "Code", icon: "πŸ’»", - description: "If you're a developer, you can:", + description: "If you're a developer, here’s how you can make direct impact:", items: [ "Access coding standards πŸ§‘β€πŸ’»", "Find debugging tips 🐞", "Propose new features πŸš€", ], details: [ - "Access coding standards and setup instructions to streamline your work with the team's codebase.", + "Access coding standards and setup instructions that help you quickly align with the team's codebase.", "Find tips for debugging, troubleshooting common errors, and submitting clear bug reports.", - "Read about how to propose new features, collaborate on pull requests, and review peer code.", + "Learn how to propose new features, collaborate on pull requests, and review peer code effectively.", ], links: [ { text: "GitHub", url: "https://github.com/recodehive?view_as=public" }, @@ -39,13 +41,15 @@ const contributionSections: ContributionSection[] = [ url: "https://github.com/recodehive/Support/issues/new?assignees=&labels=invite+me+to+the+community&projects=&template=invitation.yml&title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization", }, ], - color: "#8b5cf6", + color: "#b499f4", + label: "For developers", }, { id: "documentation", title: "Documentation", icon: "πŸ“š", - description: "If you're a writer or educator, you can:", + description: + "If you love explaining concepts clearly, our docs always need your voice:", items: [ "Improve documentation πŸ–‹οΈ", "Structure tutorials πŸ“š", @@ -54,16 +58,18 @@ const contributionSections: ContributionSection[] = [ details: [ "Explore detailed guides for improving existing documentation, including style and terminology tips.", "Learn how to structure tutorials, add examples, and make learning resources more accessible.", - "See guidelines for translating technical content into different languages or for various backgrounds.", + "See guidelines for translating technical content into different languages and backgrounds.", ], - links: [{ text: "GitHub Docs", url: "https://www.recodehive.com/docs" }], + links: [{ text: "Docs Hub", url: "https://www.recodehive.com/docs" }], color: "#f59e0b", + label: "For writers & educators", }, { id: "community", title: "Community", icon: "🀝", - description: "If you're a community-minded person, you can:", + description: + "If you enjoy connecting people, you can help our community feel welcoming:", items: [ "Connect with members πŸ‘₯", "Support newcomers πŸ’¬", @@ -77,36 +83,38 @@ const contributionSections: ContributionSection[] = [ links: [ { text: "Discord", url: "https://discord.gg/dh3TA8U55Q" }, { - text: "Whatsapp", + text: "WhatsApp", url: "https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t", }, ], color: "#10b981", + label: "For community builders", }, { id: "get-started", title: "Get Started", icon: "πŸš€", - description: "To begin your journey with recode hive:", + description: "New here? Start simple and grow your comfort step by step:", items: [ "Sign up and introduce yourself πŸ‘‹", "Discover key repositories πŸ”", "Browse beginner tasks πŸ“‹", ], details: [ - "Learn how to sign up and introduce yourself in the welcome channels on Discord or Slack.", + "Learn how to sign up and introduce yourself in the welcome channels on Discord.", "Discover key open source repositories and find out how you can contribute, regardless of experience level.", - "Browse a list of beginner-friendly tasks and guides to help select your first area of involvement.", + "Browse a list of beginner-friendly tasks and guides to help you choose your first contribution.", ], links: [ { text: "Discord", url: "https://discord.gg/b6ffxhXRNH" }, { - text: "Whatsapp", + text: "WhatsApp", url: "https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t", }, { text: "GitHub", url: "https://github.com/recodehive" }, ], color: "#6366f1", + label: "Best for beginners", }, ]; @@ -124,6 +132,7 @@ export default function CommunityPage(): React.ReactElement { ]); const [selectedSection, setSelectedSection] = useState(null); const [openDropdowns, setOpenDropdowns] = useState([]); + const [isMobile, setIsMobile] = useState(false); useEffect(() => { const handleScroll = () => { @@ -146,11 +155,11 @@ export default function CommunityPage(): React.ReactElement { const element = document.getElementById(current); if (element) { const rowTop = element.offsetTop; - const siblings = sections.filter((id) => { - const sib = document.getElementById(id); + const siblings = sections.filter((sectionId) => { + const sib = document.getElementById(sectionId); return sib && sib.offsetTop === rowTop; }); - visible.push(...siblings.filter((id) => id !== current)); + visible.push(...siblings.filter((sectionId) => sectionId !== current)); } } @@ -167,6 +176,13 @@ export default function CommunityPage(): React.ReactElement { return () => window.removeEventListener("scroll", handleScroll); }, [selectedSection]); + useEffect(() => { + const checkMobile = () => setIsMobile(window.innerWidth < 768); + checkMobile(); + window.addEventListener("resize", checkMobile); + return () => window.removeEventListener("resize", checkMobile); + }, []); + const scrollToSection = (sectionId: string) => { const element = document.getElementById(sectionId); if (element) { @@ -185,14 +201,12 @@ export default function CommunityPage(): React.ReactElement { ); }; - const [isMobile, setIsMobile] = useState(false); - - useEffect(() => { - const checkMobile = () => setIsMobile(window.innerWidth < 768); - checkMobile(); - window.addEventListener("resize", checkMobile); - return () => window.removeEventListener("resize", checkMobile); - }, []); + const isSectionActive = (sectionId: string) => { + if (isMobile) { + return activeSections.includes(sectionId); + } + return selectedSection === sectionId || activeSections.includes(sectionId); + }; return (
-
-
-
+
+
+
+
+ Open source community + Beginner friendly +
🐝

Welcome to recode hive Community

Welcome to recode hive β€” a community built - for everyone to learn,{" "} + for everyone to{" "} + learn,{" "} share, and{" "} grow. Whether you're a{" "} developer πŸ‘¨β€πŸ’»,{" "} @@ -240,6 +259,27 @@ export default function CommunityPage(): React.ReactElement { someone interested in exploring new ideas πŸ’‘, we're excited to have you here!

+
@@ -251,143 +291,166 @@ export default function CommunityPage(): React.ReactElement { className="contribution-header-content" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} - transition={{ duration: 0.6, delay: 0.3 }} + transition={{ duration: 0.6, delay: 0.2 }} >
⚑

How You Can Contribute

- There are many ways to get involved in recode hive. Here's how - you can contribute: + There are many ways to get involved in recode hive. Choose the + path that matches your strengths and interests, and we'll + support you along the way.

+
+ + 4 contribution paths + + + Click any row to see details + +
- {/* Scrollable Content Sections */} + {/* Engagement / Contribution Sections */}
{/* Main Content */}
{contributionSections.map((section, index) => ( - -
-
- {section.icon} +
+
+ + {section.label} + + + {section.items.length} focus areas +
-

{section.title}

-
-

- {section.description} -

+
+
+ {section.icon} +
+
+

{section.title}

+

+ Make an impact through this track. +

+
+
-
    - {section.items.map((item, itemIndex) => ( - - - toggleDropdown(`${section.id}-${itemIndex}`) - } - style={{ cursor: "pointer" }} - > - - β–Ά - - {item} - +

    + {section.description} +

    - {section.details && - openDropdowns.includes( - `${section.id}-${itemIndex}`, - ) && ( - + {section.items.map((item, itemIndex) => { + const dropdownId = `${section.id}-${itemIndex}`; + const isOpen = openDropdowns.includes(dropdownId); + + return ( +
  • +
+ + + {item} + + - {section.links.length > 0 && ( -
-
- πŸ”— - - Find our{" "} - {section.id === "code" - ? "codebase" - : section.id === "documentation" - ? "documentation" - : section.id === "community" - ? "conversation" - : "resources"}{" "} - on: - -
-
- {section.links.map((link, linkIndex) => ( - - {link.text} - - ))} + {section.details && ( + +

{section.details[itemIndex]}

+ + )} + + ); + })} + + + {section.links.length > 0 && ( +
+
+ πŸ”— + + Deep dive into{" "} + {section.id === "code" + ? "our repositories" + : section.id === "documentation" + ? "the docs hub" + : section.id === "community" + ? "live conversations" + : "getting started resources"} + : + +
+
+ {section.links.map((link, linkIndex) => ( + + {link.text} + + + ))} +
-
- )} - + )} +
+ ))} {/* Thank You Section */} -
@@ -396,6 +459,10 @@ export default function CommunityPage(): React.ReactElement { πŸŽ‰ ✨
+

Thank you for being here

+

+ Every message, PR, and question helps this hive grow. +

@@ -404,11 +471,10 @@ export default function CommunityPage(): React.ReactElement { recode hive!

- We're thrilled to have you here and can't wait to{" "} - - collaborate - - , learn, and{" "} + We're thrilled to have you here and can't + wait to{" "} + collaborate,{" "} + learn, and{" "} grow β€” together. 🌱

@@ -416,7 +482,7 @@ export default function CommunityPage(): React.ReactElement {
🐝
- Let's make this community the best it can bee! + Let's make this community the best it can bee!
@@ -429,18 +495,18 @@ export default function CommunityPage(): React.ReactElement { style={{ color: "inherit" }} >

- We're here to help and support you throughout your - journey β€” don't hesitate to reach out. + We're here to help and support you throughout + your journey β€” don't hesitate to reach out.

- +
{/* Table of Contents Sidebar */} -
⚑ -

How You Can Contribute

+
+

Quick navigation

+

+ Jump between contribution paths. +

+
-
- {/* Scroll to Top Button - Same as Home Page */}
diff --git a/tsconfig.json b/tsconfig.json index 09e916ba..ef6c942f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,6 +3,7 @@ "compilerOptions": { "jsx": "react-jsx", "baseUrl": ".", + "ignoreDeprecations": "6.0", "esModuleInterop": true, "allowSyntheticDefaultImports": true, "moduleResolution": "bundler",