diff --git a/package-lock.json b/package-lock.json index 90ee45c3..68241e92 100644 --- a/package-lock.json +++ b/package-lock.json @@ -281,6 +281,7 @@ "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.40.0.tgz", "integrity": "sha512-nlr/MMgoLNUHcfWC5Ns2ENrzKx9x51orPc6wJ8Ignv1DsrUmKm0LUih+Tj3J+kxYofzqQIQRU495d4xn3ozMbg==", "license": "MIT", + "peer": true, "dependencies": { "@algolia/client-common": "5.40.0", "@algolia/requester-browser-xhr": "5.40.0", @@ -441,6 +442,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz", "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -2275,6 +2277,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=18" }, @@ -2297,6 +2300,7 @@ } ], "license": "MIT", + "peer": true, "engines": { "node": ">=18" } @@ -2406,6 +2410,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -2827,6 +2832,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -3814,6 +3820,7 @@ "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.9.2.tgz", "integrity": "sha512-C5wZsGuKTY8jEYsqdxhhFOe1ZDjH0uIYJ9T/jebHwkyxqnr4wW0jTkB72OMqNjsoQRcb0JN3PcSeTwFlVgzCZg==", "license": "MIT", + "peer": true, "dependencies": { "@docusaurus/core": "3.9.2", "@docusaurus/logger": "3.9.2", @@ -5922,6 +5929,7 @@ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", "license": "MIT", + "peer": true, "dependencies": { "@emotion/memoize": "^0.8.1" } @@ -6194,6 +6202,7 @@ "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.9.13.tgz", "integrity": "sha512-GfiI1JxJ7ecluEmDjPzseRXk/PX31hS7+tjgBopL7XjB2hLUdR+0FTMXy2Q3/hXezypDvU6or7gVFizDESrkXw==", "license": "Apache-2.0", + "peer": true, "dependencies": { "@firebase/component": "0.6.4", "@firebase/logger": "0.4.0", @@ -6251,6 +6260,7 @@ "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.13.tgz", "integrity": "sha512-j6ANZaWjeVy5zg6X7uiqh6lM6o3n3LD1+/SJFNs9V781xyryyZWXe+tmnWNWPkP086QfJoNkWN9pMQRqSG4vMg==", "license": "Apache-2.0", + "peer": true, "dependencies": { "@firebase/app": "0.9.13", "@firebase/component": "0.6.4", @@ -6263,7 +6273,8 @@ "version": "0.9.0", "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.0.tgz", "integrity": "sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q==", - "license": "Apache-2.0" + "license": "Apache-2.0", + "peer": true }, "node_modules/@firebase/auth": { "version": "0.23.2", @@ -6673,6 +6684,7 @@ "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.3.tgz", "integrity": "sha512-DY02CRhOZwpzO36fHpuVysz6JZrscPiBXD0fXp6qSrL9oNOx5KWICKdR95C0lSITzxp0TZosVyHqzatE8JbcjA==", "license": "Apache-2.0", + "peer": true, "dependencies": { "tslib": "^2.1.0" } @@ -7289,6 +7301,7 @@ "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz", "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==", "license": "MIT", + "peer": true, "dependencies": { "@types/mdx": "^2.0.0" }, @@ -7974,6 +7987,7 @@ "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", @@ -8490,7 +8504,8 @@ } ], "hasInstallScript": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@tsparticles/interaction-external-attract": { "version": "3.9.1", @@ -9443,6 +9458,7 @@ "integrity": "sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==", "devOptional": true, "license": "MIT", + "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -9620,6 +9636,7 @@ "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.46.2", "@typescript-eslint/types": "8.46.2", @@ -10078,6 +10095,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -10163,6 +10181,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -10208,6 +10227,7 @@ "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.40.0.tgz", "integrity": "sha512-a9aIL2E3Z7uYUPMCmjMFFd5MWhn+ccTubEvnMy7rOTZCB62dXBJtz0R5BZ/TPuX3R9ocBsgWuAbGWQ+Ph4Fmlg==", "license": "MIT", + "peer": true, "dependencies": { "@algolia/abtesting": "1.6.0", "@algolia/client-abtesting": "5.40.0", @@ -10966,6 +10986,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.9", "caniuse-lite": "^1.0.30001746", @@ -11320,6 +11341,7 @@ "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz", "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==", "license": "Apache-2.0", + "peer": true, "dependencies": { "@chevrotain/cst-dts-gen": "11.0.3", "@chevrotain/gast": "11.0.3", @@ -12210,6 +12232,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -12540,6 +12563,7 @@ "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz", "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10" } @@ -12961,6 +12985,7 @@ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", "license": "ISC", + "peer": true, "engines": { "node": ">=12" } @@ -13554,7 +13579,8 @@ "version": "8.6.0", "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz", "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/embla-carousel-autoplay": { "version": "8.6.0", @@ -13940,6 +13966,7 @@ "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -14772,6 +14799,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -14899,6 +14927,7 @@ "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.23.0.tgz", "integrity": "sha512-/4lUVY0lUvBDIaeY1q6dUYhS8Sd18Qb9CgWkPZICUo9IXpJNCEagfNZXBBFCkMTTN5L5gx2Hjr27y21a9NzUcA==", "license": "Apache-2.0", + "peer": true, "dependencies": { "@firebase/analytics": "0.10.0", "@firebase/analytics-compat": "0.2.6", @@ -20845,7 +20874,6 @@ "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.54.0.tgz", "integrity": "sha512-hx45SEUoLatgWxHKCmlLJH81xBo0uXP4sRkESUpmDQevfi+e7K1VuiSprK6UpQ8u4zOcKNiH0pMvHvlMWA/4cw==", "license": "MIT", - "peer": true, "dependencies": { "dompurify": "3.1.7", "marked": "14.0.0" @@ -20855,15 +20883,13 @@ "version": "3.1.7", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz", "integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==", - "license": "(MPL-2.0 OR Apache-2.0)", - "peer": true + "license": "(MPL-2.0 OR Apache-2.0)" }, "node_modules/monaco-editor/node_modules/marked": { "version": "14.0.0", "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz", "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==", "license": "MIT", - "peer": true, "bin": { "marked": "bin/marked.js" }, @@ -21136,6 +21162,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -21909,6 +21936,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -22812,6 +22840,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -23425,6 +23454,7 @@ "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -23831,6 +23861,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -23843,6 +23874,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -23908,6 +23940,7 @@ "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-6.0.0.tgz", "integrity": "sha512-YMMxTUQV/QFSnbgrP3tjDzLHRg7vsbMn8e9HAa8o/1iXoiomo48b7sk/kkmWEuWNDPJVlKSJRB6Y2fHqdJk+SQ==", "license": "MIT", + "peer": true, "dependencies": { "@types/react": "*" }, @@ -23936,6 +23969,7 @@ "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", @@ -26437,7 +26471,8 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD" + "license": "0BSD", + "peer": true }, "node_modules/tunnel-agent": { "version": "0.6.0", @@ -26612,6 +26647,7 @@ "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "devOptional": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -27006,6 +27042,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -27278,6 +27315,7 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.102.1.tgz", "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==", "license": "MIT", + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -28096,6 +28134,7 @@ "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz", "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==", "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/src/pages/community/community.css b/src/pages/community/community.css index 5120f605..71507e20 100644 --- a/src/pages/community/community.css +++ b/src/pages/community/community.css @@ -1,4 +1,4 @@ -/* Community Page Styles */ +/* Community Page Styles - Modern Card-Based Layout */ .community-page { min-height: 100vh; font-family: @@ -12,40 +12,30 @@ transition: background-color 0.3s ease; } -/* Community page should maintain its own background regardless of theme */ [data-theme="dark"] .community-page { background: transparent; } -/* CSS Custom Properties for better browser support */ -:root { - --section-color-rgb: 139, 92, 246; - --text-primary: #1e293b; - --text-secondary: #64748b; - --bg-primary: #ffffff; - --bg-secondary: #f8fafc; - --border-color: #e2e8f0; +.community-main { + overflow: hidden; } -[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); +.community-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 24px; } -/* Hero Section */ +/* ===== Hero Section ===== */ .community-hero { position: relative; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; - padding: 80px 0 60px; + padding: 100px 0 80px; overflow: hidden; text-align: center; } -/* Dark theme support */ [data-theme="dark"] .community-hero { background: linear-gradient(135deg, #4c1d95 0%, #581c87 100%); } @@ -64,7 +54,7 @@ width: 200px; height: 200px; border-radius: 50%; - background: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.08); animation: float 6s ease-in-out infinite; } @@ -91,66 +81,51 @@ 100% { transform: translateY(0px) rotate(0deg); } - 50% { transform: translateY(-20px) rotate(180deg); } } -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 24px; -} - .community-hero-content { - text-align: center; position: relative; z-index: 2; + max-width: 800px; + margin: 0 auto; } -.hero-icon { - font-size: 4rem; - margin-bottom: 24px; +.hero-badge { display: inline-block; - animation: bounce 2s infinite; -} - -@keyframes bounce { - 0%, - 20%, - 50%, - 80%, - 100% { - transform: translateY(0); - } - - 40% { - transform: translateY(-10px); - } - - 60% { - transform: translateY(-5px); - } + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.25); + padding: 8px 20px; + border-radius: 50px; + font-size: 0.95rem; + font-weight: 600; + margin-bottom: 24px; + letter-spacing: 0.5px; } .community-hero-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 24px; - background: linear-gradient(45deg, #ffffff, #f0f9ff); + line-height: 1.15; + color: #ffffff; +} + +.hero-title-highlight { + background: linear-gradient(45deg, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - line-height: 1.2; } .community-hero-description { - font-size: 1.25rem; + font-size: 1.2rem; line-height: 1.7; - max-width: 800px; - margin: 0 auto; opacity: 0.95; + margin-bottom: 32px; } .highlight { @@ -158,248 +133,237 @@ font-weight: 600; } -/* Contribution Header */ -.contribution-header { - padding: 50px 0 35px; - background: linear-gradient(to bottom, #f8fafc, #ffffff); - text-align: center; +.hero-actions { + display: flex; + gap: 16px; + justify-content: center; + flex-wrap: wrap; } -[data-theme="dark"] .contribution-header { - background: linear-gradient(to bottom, #1a1a1a, #121212); +.hero-btn { + display: inline-flex; + align-items: center; + padding: 14px 32px; + border-radius: 12px; + font-size: 1rem; + font-weight: 600; + text-decoration: none; + transition: all 0.3s ease; + cursor: pointer; } -.contribution-header-content { - max-width: 800px; - margin: 0 auto; +.hero-btn-primary { + background: #ffffff; + color: #764ba2; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } -.contribution-icon { - font-size: 3rem; - margin-bottom: 20px; - display: inline-block; +.hero-btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); + color: #764ba2; + text-decoration: none; +} + +.hero-btn-secondary { + background: rgba(255, 255, 255, 0.15); + color: #ffffff; + border: 2px solid rgba(255, 255, 255, 0.3); + backdrop-filter: blur(10px); } -.contribution-title { +.hero-btn-secondary:hover { + background: rgba(255, 255, 255, 0.25); + transform: translateY(-2px); + color: #ffffff; + text-decoration: none; +} + +/* ===== Section Headings ===== */ +.section-heading { + text-align: center; + margin-bottom: 48px; +} + +.section-heading-title { font-size: 2.5rem; font-weight: 800; color: #1e293b; - margin-bottom: 16px; + margin-bottom: 12px; } -[data-theme="dark"] .contribution-title { +[data-theme="dark"] .section-heading-title { color: #ffffff; } -.contribution-description { - font-size: 1.2rem; +.section-heading-description { + font-size: 1.15rem; color: #64748b; + max-width: 600px; + margin: 0 auto; line-height: 1.6; } -[data-theme="dark"] .contribution-description { - color: #edf2f7; -} - -/* Main Content */ -.community-content { - padding: 40px 0 80px; - background: #ffffff; +[data-theme="dark"] .section-heading-description { + color: #94a3b8; } -[data-theme="dark"] .community-content { - background: #121212; +/* ===== Community Channels Section ===== */ +.community-channels-section { + padding: 80px 0; + background: #f8fafc; } -.community-layout { - display: grid; - grid-template-columns: 1fr 300px; - gap: 48px; - align-items: start; +[data-theme="dark"] .community-channels-section { + background: #0f0f0f; } -.contribution-sections { +.channels-grid { display: grid; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(4, 1fr); gap: 24px; } -/* Contribution Sections */ -.contribution-section { - background: white; +.channel-card { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 32px 24px; + background: #ffffff; 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); + border: 1px solid #e2e8f0; + text-decoration: none; transition: all 0.3s ease; - transition: - transform 0.2s ease, - box-shadow 0.2s ease; -} - -.contribution-section:hover { - transform: translateY(-2px); - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); + cursor: pointer; } -[data-theme="dark"] .contribution-section { +[data-theme="dark"] .channel-card { 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); - transition: - box-shadow 0.3s ease, - border 0.3s ease; +.channel-card:hover { + border-color: var(--channel-color, #2e8555); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); + text-decoration: none; } -.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); +[data-theme="dark"] .channel-card:hover { + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); } -/* Table of Contents Sidebar */ -.table-of-contents { - position: sticky; - top: 100px; - background: white; +.channel-icon-wrapper { + width: 64px; + height: 64px; 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"] .table-of-contents { - background: #1a1a1a; - border: 1px solid #2d2d2d; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); -} - -.toc-header { + background: linear-gradient( + 135deg, + var(--channel-color, #2e8555), + color-mix(in srgb, var(--channel-color, #2e8555) 70%, #000) + ); display: flex; align-items: center; - gap: 8px; - margin-bottom: 20px; - padding-bottom: 16px; - border-bottom: 2px solid #f1f5f9; -} - -[data-theme="dark"] .toc-header { - border-bottom: 2px solid #2d2d2d; + justify-content: center; + margin-bottom: 16px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } -.toc-icon { - font-size: 1.2rem; +.channel-icon { + font-size: 1.8rem; } -.toc-header h4 { - font-size: 1rem; - font-weight: 600; +.channel-title { + font-size: 1.25rem; + font-weight: 700; color: #1e293b; - margin: 0; + margin: 0 0 8px 0; } -[data-theme="dark"] .toc-header h4 { +[data-theme="dark"] .channel-title { color: #ffffff; } -.toc-nav { - display: flex; - flex-direction: column; - gap: 4px; +.channel-description { + font-size: 0.9rem; + color: #64748b; + line-height: 1.6; + margin: 0 0 16px 0; + flex: 1; } -.toc-item { - display: flex; - 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%; +[data-theme="dark"] .channel-description { + color: #94a3b8; +} + +.channel-btn { + display: inline-block; font-size: 0.9rem; - font-weight: 500; - color: #64748b; + font-weight: 600; + color: var(--channel-color, #2e8555); + transition: gap 0.3s ease; } -[data-theme="dark"] .toc-item { - color: #edf2f7; +.channel-card:hover .channel-btn { + text-decoration: none; } -.toc-item:hover { - background: rgba(0, 0, 0, 0.04); - transform: translateX(4px); +/* ===== Community Stats Section ===== */ +.community-stats-section { + padding: 80px 0; + background: #ffffff; } -[data-theme="dark"] .toc-item:hover { - background: rgba(255, 255, 255, 0.08); +[data-theme="dark"] .community-stats-section { + background: #121212; } -.toc-item.active { - background: rgba(139, 92, 246, 0.1); - color: #8b5cf6; - font-weight: 600; +/* ===== Contribute Section ===== */ +.community-contribute-section { + padding: 80px 0; + background: #f8fafc; } -[data-theme="dark"] .toc-item.active { - background: rgba(139, 92, 246, 0.2); - color: #a78bfa; +[data-theme="dark"] .community-contribute-section { + background: #0f0f0f; } -.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 */ +.contribute-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; } -/* 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; +.contribute-card { + background: #ffffff; + border-radius: 16px; + padding: 28px; + border: 1px solid #e2e8f0; + transition: all 0.3s ease; } -/* 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; +[data-theme="dark"] .contribute-card { + background: #1a1a1a; + border: 1px solid #2d2d2d; } -.toc-item-icon { - font-size: 1rem; - flex-shrink: 0; +.contribute-card:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); } -.toc-item-text { - flex: 1; +[data-theme="dark"] .contribute-card:hover { + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); } -.section-header { +.contribute-card-header { display: flex; align-items: center; - gap: 16px; + gap: 14px; margin-bottom: 16px; } -.section-icon { +.contribute-card-icon { width: 48px; height: 48px; border-radius: 12px; @@ -408,153 +372,163 @@ justify-content: center; font-size: 1.5rem; color: white; - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); flex-shrink: 0; } -.section-title { - font-size: 1.8rem; +.contribute-card-title { + font-size: 1.5rem; font-weight: 700; color: #1e293b; margin: 0; } -[data-theme="dark"] .section-title { +[data-theme="dark"] .contribute-card-title { color: #ffffff; } -.section-description { +.contribute-card-description { color: #64748b; - font-size: 1rem; - margin-bottom: 20px; + font-size: 0.95rem; + margin-bottom: 16px; line-height: 1.6; } -[data-theme="dark"] .section-description { - color: #edf2f7; +[data-theme="dark"] .contribute-card-description { + color: #94a3b8; } -.section-items { +.contribute-card-items { list-style: none; padding: 0; margin: 0 0 20px 0; } -.section-item { +.contribute-card-item { display: flex; align-items: center; - gap: 16px; - padding: 12px 0 10px; + gap: 12px; + padding: 10px 0; font-size: 0.95rem; color: #374151; border-bottom: 1px solid #f1f5f9; font-weight: 600; + cursor: pointer; + transition: color 0.2s ease; } -[data-theme="dark"] .section-item { - color: #edf2f7; +[data-theme="dark"] .contribute-card-item { + color: #e2e8f0; border-bottom: 1px solid #2d2d2d; } -.section-item:last-child { +.contribute-card-item:last-child { border-bottom: none; } +.contribute-card-item:hover { + color: #2e8555; +} + +[data-theme="dark"] .contribute-card-item:hover { + color: #25c2a0; +} + .item-arrow { color: #8b5cf6; - font-size: 0.8rem; + font-size: 0.7rem; flex-shrink: 0; + transition: transform 0.3s ease; } -.section-links { - background: linear-gradient(135deg, #f8fafc, #f1f5f9); - border-radius: 12px; - padding: 20px; - border: 1px solid #e2e8f0; +.item-arrow.rotate { + transform: rotate(90deg); } -[data-theme="dark"] .section-links { - background: linear-gradient(135deg, #2d2d2d, #1a1a1a); - border: 1px solid #3d3d3d; +.contribute-item-details { + margin: 4px 0 8px 24px; + padding: 12px 16px; + background: #f8fafc; + border-radius: 8px; + border-left: 3px solid #8b5cf6; + overflow: hidden; } -.links-header { - display: flex; - align-items: center; - gap: 12px; - margin-bottom: 20px; - font-weight: 600; - color: #374151; +[data-theme="dark"] .contribute-item-details { + background: #2d2d2d; } -[data-theme="dark"] .links-header { - color: #edf2f7; +.contribute-item-details p { + margin: 0; + color: #64748b; + font-size: 0.9rem; + line-height: 1.6; } -.links-icon { - font-size: 1.2rem; +[data-theme="dark"] .contribute-item-details p { + color: #94a3b8; } -.links-container { +.contribute-card-links { display: flex; - gap: 12px; + gap: 10px; flex-wrap: wrap; + padding-top: 4px; } -.resource-link { +.contribute-link { display: inline-flex; align-items: center; padding: 8px 16px; - background: white; color: var(--link-color, #8b5cf6); text-decoration: none; border-radius: 8px; font-weight: 600; - border: 2px solid var(--link-color, #8b5cf6); + font-size: 0.85rem; + border: 1.5px solid var(--link-color, #8b5cf6); + background: transparent; transition: all 0.3s ease; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - font-size: 0.9rem; } -[data-theme="dark"] .resource-link { - background: #1a1a1a; - color: var(--link-color, #8b5cf6); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); +[data-theme="dark"] .contribute-link { + color: var(--link-color, #a78bfa); + border-color: var(--link-color, #a78bfa); } -.resource-link:hover { +.contribute-link:hover { background: var(--link-color, #8b5cf6); color: white; - transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); text-decoration: none; + transform: translateY(-1px); } -[data-theme="dark"] .resource-link:hover { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); +/* ===== CTA / Thank You Section ===== */ +.community-cta-section { + padding: 80px 0; + background: #ffffff; } -/* Thank You Section */ -.thank-you-section { - grid-column: 1 / -1; - margin-top: 40px; - display: flex; - justify-content: center; +[data-theme="dark"] .community-cta-section { + background: #121212; } -.thank-you-card { +.cta-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); color: white; - padding: 0; + padding: 60px 48px; border-radius: 24px; - box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3); - max-width: 700px; - width: 100%; - overflow: hidden; + text-align: center; position: relative; + overflow: hidden; + box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3); +} + +[data-theme="dark"] .cta-card { + background: linear-gradient(135deg, #4c1d95 0%, #581c87 50%, #7c3aed 100%); + box-shadow: 0 20px 40px rgba(76, 29, 149, 0.4); } -.thank-you-card::before { +.cta-card::before { content: ""; position: absolute; top: 0; @@ -563,42 +537,35 @@ bottom: 0; background: linear-gradient( 45deg, - rgba(255, 255, 255, 0.1) 0%, + rgba(255, 255, 255, 0.08) 0%, transparent 50%, - rgba(255, 255, 255, 0.1) 100% + rgba(255, 255, 255, 0.08) 100% ); pointer-events: none; } -.thank-you-header { - text-align: center; - padding: 40px 40px 20px; - position: relative; -} - -.thank-you-icons { +.cta-icons { display: flex; justify-content: center; gap: 16px; - margin-bottom: 20px; + margin-bottom: 24px; } -.thank-icon { +.cta-icon { font-size: 2.5rem; animation: bounce 2s infinite; - animation-delay: var(--delay, 0s); } -.thank-icon:nth-child(1) { - --delay: 0s; +.cta-icon:nth-child(1) { + animation-delay: 0s; } -.thank-icon:nth-child(2) { - --delay: 0.3s; +.cta-icon:nth-child(2) { + animation-delay: 0.3s; } -.thank-icon:nth-child(3) { - --delay: 0.6s; +.cta-icon:nth-child(3) { + animation-delay: 0.6s; } @keyframes bounce { @@ -609,234 +576,143 @@ 100% { transform: translateY(0); } - 40% { transform: translateY(-10px); } - 60% { transform: translateY(-5px); } } -.thank-you-card h3 { - font-size: 2.5rem; +.cta-title { + font-size: 2rem; font-weight: 800; - margin: 0 0 8px 0; - color: white; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); -} - -.thank-you-subtitle { - font-size: 1.2rem; - font-weight: 500; - opacity: 0.9; - color: #fbbf24; -} - -.thank-you-content { - padding: 0 40px 40px; -} - -.thank-you-main { - font-size: 1.2rem; - line-height: 1.6; margin-bottom: 16px; - text-align: center; - font-weight: 500; + color: #ffffff; } -.thank-you-description { - font-size: 1.1rem; +.cta-description { + font-size: 1.15rem; line-height: 1.7; - margin-bottom: 32px; - text-align: center; opacity: 0.95; -} - -.highlight { - padding: 2px 8px; - border-radius: 6px; - font-weight: 600; - text-shadow: none; + max-width: 600px; + margin: 0 auto 24px; } .highlight.collaborate { background: rgba(16, 185, 129, 0.3); + padding: 2px 8px; + border-radius: 6px; color: #10f981; } .highlight.learn { background: rgba(59, 130, 246, 0.3); + padding: 2px 8px; + border-radius: 6px; color: #60a5fa; } .highlight.grow { background: rgba(245, 158, 11, 0.3); + padding: 2px 8px; + border-radius: 6px; 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; -} - -.thank-you-quote { - background: rgba(255, 255, 255, 0.15); +.cta-quote { + background: rgba(255, 255, 255, 0.12); border: none; padding: 24px; - margin: 32px 0; + margin: 0 auto 32px; + max-width: 500px; border-radius: 16px; text-align: center; - position: relative; backdrop-filter: blur(10px); } -.quote-icon { +.cta-quote-icon { font-size: 2rem; - margin-bottom: 12px; display: block; + margin-bottom: 8px; } -.thank-you-quote em { +.cta-quote em { font-size: 1.1rem; font-weight: 500; color: #fbbf24; } -.support-section { +.cta-actions { display: flex; - align-items: center; gap: 16px; - background: rgba(255, 255, 255, 0.1); - padding: 20px; - border-radius: 12px; - backdrop-filter: blur(10px); -} - -.support-icon { - font-size: 1.8rem; - flex-shrink: 0; -} - -.support-text { - font-weight: 500; - font-size: 1rem; - 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); + justify-content: center; + flex-wrap: wrap; } -/* Responsive Design */ +/* ===== Responsive Design ===== */ @media (max-width: 1024px) { - .community-layout { - grid-template-columns: 1fr; - gap: 32px; - } - - .table-of-contents { - position: static; - order: -1; - margin-bottom: 32px; - } - - .toc-nav { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 8px; + .channels-grid { + grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { + .community-hero { + padding: 70px 0 50px; + } + .community-hero-title { font-size: 2.5rem; } .community-hero-description { - font-size: 1.1rem; + font-size: 1.05rem; } - .contribution-title { + .section-heading-title { font-size: 2rem; } - .contribution-sections { - gap: 32px; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - } - - .contribution-section { - padding: 32px 24px; - } - - .section-title { - font-size: 1.5rem; - } - - .section-header { - gap: 12px; - } - - .section-icon { - width: 40px; - height: 40px; - font-size: 1.3rem; - } - - .thank-you-card { - padding: 32px 24px; + .channels-grid { + grid-template-columns: 1fr; + gap: 16px; } - .thank-you-card h3 { - font-size: 1.8rem; + .contribute-grid { + grid-template-columns: 1fr; + gap: 20px; } - .thank-you-header { - padding: 32px 24px 16px; + .community-channels-section, + .community-stats-section, + .community-contribute-section, + .community-cta-section { + padding: 60px 0; } - .thank-you-content { - padding: 0 24px 32px; + .cta-card { + padding: 40px 24px; } - .thank-you-features { - grid-template-columns: 1fr; - gap: 12px; + .cta-title { + font-size: 1.6rem; } - .feature-item { - padding: 12px; + .hero-actions { + flex-direction: column; + align-items: center; } - .toc-nav { - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + .hero-btn { + width: 100%; + max-width: 280px; + justify-content: center; } - .toc-item { - padding: 10px 12px; - font-size: 0.85rem; + .cta-actions { + flex-direction: column; + align-items: center; } } @@ -849,127 +725,28 @@ font-size: 2rem; } - .contribution-header { - padding: 40px 0 30px; - } - - .contribution-title { - font-size: 1.8rem; - } - - .contribution-section { - padding: 24px 20px; + .hero-badge { + font-size: 0.85rem; + padding: 6px 16px; } - .links-container { - flex-direction: column; + .section-heading-title { + font-size: 1.75rem; } - .resource-link { - text-align: center; + .contribute-card { + padding: 20px; } - .thank-you-card h3 { - font-size: 1.6rem; + .cta-title { + font-size: 1.4rem; } - .thank-you-icons { + .cta-icons { gap: 12px; } - .thank-icon { + .cta-icon { font-size: 2rem; } - - .thank-you-header { - padding: 24px 20px 12px; - } - - .thank-you-content { - padding: 0 20px 24px; - } -} -.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 14ed37f4..a53aba89 100644 --- a/src/pages/community/index.tsx +++ b/src/pages/community/index.tsx @@ -1,22 +1,77 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import Layout from "@theme/Layout"; import Head from "@docusaurus/Head"; import { motion } from "framer-motion"; import ScrollBottomToTop from "@site/src/components/scroll/bottom-to-top"; +import { CommunityStatsProvider } from "@site/src/lib/statsProvider"; +import { LandingCommunity } from "@site/src/components/Community"; import "./community.css"; -interface ContributionSection { +interface CommunityChannel { + id: string; + title: string; + icon: string; + description: string; + buttonText: string; + url: string; + color: string; +} + +interface ContributeCard { id: string; title: string; icon: string; description: string; items: string[]; - details?: string[]; + details: string[]; links: { text: string; url: string }[]; color: string; } -const contributionSections: ContributionSection[] = [ +const communityChannels: CommunityChannel[] = [ + { + id: "discord", + title: "Discord", + icon: "💬", + description: + "Chat with fellow developers, get help with your projects, and share your knowledge in real time.", + buttonText: "Join Discord", + url: "https://discord.gg/b6ffxhXRNH", + color: "#5865F2", + }, + { + id: "github", + title: "GitHub", + icon: "🐙", + description: + "Explore our open-source repos, contribute code, report bugs, and collaborate on exciting projects.", + buttonText: "View GitHub", + url: "https://github.com/recodehive?view_as=public", + color: "#2e8555", + }, + { + id: "whatsapp", + title: "WhatsApp", + icon: "📱", + description: + "Stay connected on the go. Get updates, share resources, and network with community members.", + buttonText: "Join WhatsApp", + url: "https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t", + color: "#25D366", + }, + { + id: "discussions", + title: "Discussions", + icon: "🗣️", + description: + "Ask questions, share ideas, and engage in thoughtful conversations with the community.", + buttonText: "Join Discussions", + url: "https://github.com/recodehive/recode-website/discussions", + color: "#8b5cf6", + }, +]; + +const contributeCards: ContributeCard[] = [ { id: "code", title: "Code", @@ -77,7 +132,7 @@ const contributionSections: ContributionSection[] = [ links: [ { text: "Discord", url: "https://discord.gg/b6ffxhXRNH" }, { - text: "Whatsapp", + text: "WhatsApp", url: "https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t", }, ], @@ -101,7 +156,7 @@ const contributionSections: ContributionSection[] = [ 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" }, @@ -110,73 +165,9 @@ const contributionSections: ContributionSection[] = [ }, ]; -const tableOfContents = [ - { id: "how-you-can-contribute", title: "How You Can Contribute", icon: "⚡" }, - { id: "code", title: "Code", icon: "💻" }, - { id: "documentation", title: "Documentation", icon: "📚" }, - { id: "community", title: "Community", icon: "🤝" }, - { id: "get-started", title: "Get Started", icon: "🚀" }, -]; - export default function CommunityPage(): React.ReactElement { - const [activeSections, setActiveSections] = useState([ - "how-you-can-contribute", - ]); - const [selectedSection, setSelectedSection] = useState(null); const [openDropdowns, setOpenDropdowns] = useState([]); - useEffect(() => { - const handleScroll = () => { - const sections = tableOfContents.map((item) => item.id); - const midpoint = window.innerHeight * 0.4; - const visible: string[] = []; - - sections.forEach((id) => { - const el = document.getElementById(id); - if (el) { - const rect = el.getBoundingClientRect(); - if (rect.top <= midpoint && rect.bottom >= midpoint) { - visible.push(id); - } - } - }); - - if (visible.length === 1) { - const current = visible[0]; - const element = document.getElementById(current); - if (element) { - const rowTop = element.offsetTop; - const siblings = sections.filter((id) => { - const sib = document.getElementById(id); - return sib && sib.offsetTop === rowTop; - }); - visible.push(...siblings.filter((id) => id !== current)); - } - } - - if (visible.length > 0) { - setActiveSections(visible); - if (selectedSection && !visible.includes(selectedSection)) { - setSelectedSection(null); - } - } - }; - - window.addEventListener("scroll", handleScroll); - handleScroll(); - return () => window.removeEventListener("scroll", handleScroll); - }, [selectedSection]); - - const scrollToSection = (sectionId: string) => { - const element = document.getElementById(sectionId); - if (element) { - const offset = 80; - const top = element.offsetTop - offset; - window.scrollTo({ top, behavior: "smooth" }); - setSelectedSection(sectionId); - } - }; - const toggleDropdown = (itemId: string) => { setOpenDropdowns((prev) => prev.includes(itemId) @@ -185,15 +176,6 @@ 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); - }, []); - return ( -
+
{/* Hero Section */}
@@ -219,257 +201,271 @@ export default function CommunityPage(): React.ReactElement {
-
+
-
🐝
+
🐝 Community

- Welcome to recode hive Community + Learn, Share & Grow +
+ Together

- Welcome to recode hive — a community built - for everyone to learn,{" "} - share, and{" "} - grow. Whether you're a{" "} - developer 👨‍💻,{" "} - designer 🎨, or just - someone interested in exploring new ideas 💡, we're excited to - have you here! + Welcome to recode hive — a community for{" "} + developers 👨‍💻,{" "} + designers 🎨, and everyone + curious about new ideas 💡. Join thousands of members who + learn, share, and grow together.

+
- {/* How You Can Contribute Header */} -
-
+ {/* Community Channels Section */} +
+
-
⚡
-

How You Can Contribute

-

- There are many ways to get involved in recode hive. Here's how - you can contribute: +

+ Connect with the Community +

+

+ Find your space in our community. Join the conversation + wherever you feel most at home.

+ +
+ {communityChannels.map((channel, index) => ( + +
+ {channel.icon} +
+

{channel.title}

+

+ {channel.description} +

+ {channel.buttonText} → + + ))} +
- {/* Scrollable Content Sections */} -
-
-
- {/* Main Content */} -
- {contributionSections.map((section, index) => ( - -
-
- {section.icon} -
-

{section.title}

-
- -

- {section.description} -

- -
    - {section.items.map((item, itemIndex) => ( - - - toggleDropdown(`${section.id}-${itemIndex}`) - } - style={{ cursor: "pointer" }} - > - - ▶ - - {item} - - - {section.details && - openDropdowns.includes( - `${section.id}-${itemIndex}`, - ) && ( - -

    {section.details[itemIndex]}

    -     - )} -     - ))} -
+ {/* Community Stats Section */} +
+
+ +

+ Our Community in Numbers +

+

+ See the impact our amazing community is making across open + source. +

+ + + + +
+
- {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} - - ))} -
-
- )} - - ))} + {/* Contribute Section */} +
+
+ +

How You Can Contribute

+

+ There are many ways to get involved in recode hive. Find what + excites you and start contributing! +

+ - {/* Thank You Section */} +
+ {contributeCards.map((card, index) => ( -
-
-
- 💚 - 🎉 - ✨ -
+
+
+ {card.icon}
+

{card.title}

+
-
-

- Thank you for your interest in{" "} - recode hive! -

-

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

+

+ {card.description} +

-
-
🐝
- - Let's make this community the best it can bee! - -
+
    + {card.items.map((item, itemIndex) => ( + +
  • + toggleDropdown(`${card.id}-${itemIndex}`) + } + > + + ▶ + + {item} +
    • + + {openDropdowns.includes( + `${card.id}-${itemIndex}`, + ) && ( + +

    {card.details[itemIndex]}

    +     + )} +     + ))} +
-
-
💬
+ {card.links.length > 0 && ( + + ))}
-
+ )} + ))} +
+
+
+ + {/* CTA / Thank You Section */} +
+
+ +
+ 💚 + 🎉 + ✨
+

+ Thank you for being part of recode hive! +

+

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

- {/* Table of Contents Sidebar */} - -
- ⚡ -

How You Can Contribute

-
- - -
+
+ 🐝 + Let's make this community the best it can bee! +
+ + +
- {/* Scroll to Top Button - Same as Home Page */}