diff --git a/src/pages/community/community.css b/src/pages/community/community.css index 8c238a77..4848a7de 100644 --- a/src/pages/community/community.css +++ b/src/pages/community/community.css @@ -437,10 +437,11 @@ display: flex; align-items: center; gap: 16px; - padding: 10px 0; + padding: 12px 0 10px; font-size: 0.95rem; color: #374151; border-bottom: 1px solid #f1f5f9; + font-weight: 600; } [data-theme='dark'] .section-item { @@ -924,3 +925,40 @@ [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 ae6fa3ee..35c7fe26 100644 --- a/src/pages/community/index.tsx +++ b/src/pages/community/index.tsx @@ -11,6 +11,7 @@ interface ContributionSection { icon: string; description: string; items: string[]; + details?: string[]; links: { text: string; url: string; }[]; color: string; } @@ -22,13 +23,18 @@ const contributionSections: ContributionSection[] = [ icon: '💻', description: "If you're a developer, you can:", items: [ - 'Write code 🧑‍💻', - 'Fix bugs 🐞', - 'Add new features 🚀' + '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.', + '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.' ], links: [ { text: 'GitHub', url: 'https://github.com/recodehive' }, - { text: 'GitLab', url: 'https://gitlab.com' } + { text: 'GitLab', url: 'https://gitlab.com' } ], color: '#8b5cf6' }, @@ -39,9 +45,14 @@ const contributionSections: ContributionSection[] = [ description: "If you're a writer or educator, you can:", items: [ 'Improve documentation 🖋️', - 'Write tutorials 📚', + 'Structure tutorials 📚', 'Translate content 🌍' ], + 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.' + ], links: [ { text: 'GitHub Docs', url: 'https://www.recodehive.com/docs' } ], @@ -53,13 +64,18 @@ const contributionSections: ContributionSection[] = [ icon: '🤝', description: "If you're a community-minded person, you can:", items: [ - 'Help answer questions', - 'Support new members 💬', - 'Share knowledge and insights' + 'Connect with members 👥', + 'Support newcomers 💬', + 'Share resources 📝' + ], + details: [ + 'Connect with fellow members by joining active discussions in forums and chats.', + 'Offer support to newcomers by guiding them through onboarding and answering beginner questions.', + 'Share resources, tutorials, and best practices to help others grow.' ], links: [ - { text: 'Discord', url: 'https://discord.com/invite/w2V2aH6U' }, - { text: 'Whatsapp', url: 'https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t' } + { text: 'Discord', url: 'https://discord.com/invite/w2V2aH6U' }, + { text: 'Whatsapp', url: 'https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t' } ], color: '#10b981' }, @@ -69,13 +85,18 @@ const contributionSections: ContributionSection[] = [ icon: '🚀', description: 'To begin your journey with RecodeHive:', items: [ - 'Join our community on Discord or Slack', - 'Explore our repositories on GitHub', - 'Pick a task or area you\'re excited about!' + '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.', + '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.' ], links: [ - { text: 'Discord', url: 'https://discord.com/invite/w2V2aH6U' }, - { text: 'Whatsapp', url: 'https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t' }, + { text: 'Discord', url: 'https://discord.com/invite/w2V2aH6U' }, + { text: 'Whatsapp', url: 'https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t' }, { text: 'GitHub', url: 'https://github.com/recodehive' } ], color: '#6366f1' @@ -94,6 +115,7 @@ const tableOfContents = [ 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 = () => { @@ -148,6 +170,14 @@ export default function CommunityPage(): React.ReactElement { setSelectedSection(sectionId); } }; + + const toggleDropdown = (itemId: string) => { + setOpenDropdowns(prev => + prev.includes(itemId) + ? prev.filter(id => id !== itemId) + : [...prev, itemId] + ); + }; const [isMobile, setIsMobile] = useState(false); @@ -250,16 +280,32 @@ export default function CommunityPage(): React.ReactElement {
    {section.items.map((item, itemIndex) => ( - - ▶ - {item} - + + toggleDropdown(`${section.id}-${itemIndex}`)} + style={{ cursor: 'pointer' }} + > + + ▶ + + {item} + + + {section.details && openDropdowns.includes(`${section.id}-${itemIndex}`) && ( + +

    {section.details[itemIndex]}

    +     + )} +     ))}