add Contributors page to Header

Author: nikohoffren

components/data/communityList.ts

@@ -1,21 +1,23 @@
 export const roadmapList = [
-  { name: "How To Contribute", link: "/roadmaps/how-to-contribute" },
+  { name: 'How To Contribute', link: '/roadmaps/how-to-contribute' },
   {
-    name: "Contribution Management",
-    link: "/roadmaps/contribution-management",
+    name: 'Contribution Management',
+    link: '/roadmaps/contribution-management'
   },
-  { name: "Open Source Philosophy", link: "/roadmaps/open-source-philosophy" },
-  { name: "Open Souce Licenses", link: "/roadmaps/open-source-licenses" },
+  { name: 'Open Source Philosophy', link: '/roadmaps/open-source-philosophy' },
+  { name: 'Open Souce Licenses', link: '/roadmaps/open-source-licenses' },
   {
-    name: "Overview of Documentation",
-    link: "/roadmaps/overview-of-documentation",
+    name: 'Overview of Documentation',
+    link: '/roadmaps/overview-of-documentation'
   },
   {
-    name: "Legal And Ethical Considerations",
-    link: "/roadmaps/legal-and-ethical-considerations",
+    name: 'Legal And Ethical Considerations',
+    link: '/roadmaps/legal-and-ethical-considerations'
   },
   {
-    name: "Open Source Terminology",
-    link: "/roadmaps/open-source-terminology",
+    name: 'Open Source Terminology',
+    link: '/roadmaps/open-source-terminology'
   },
-];
+  { name: 'Discussions', link: '/community/discussions' },
+  { name: 'Events', link: '/community/events' }
+]

components/data/roadmapList.ts

@@ -13,7 +13,6 @@ import { languageList } from '../data/languageList'
 import { frameworkList } from '../data/frameworkList'
 import { gitList } from '../data/gitList'
 import { roadmapList } from '../data/roadmapList'
-import { communityList } from '../data/communityList'
 import { UserButton, useUser } from '@clerk/nextjs'
 import ThemeSelector from '../ThemeSelector'
 
@@ -24,12 +23,10 @@ const Header = () => {
   const [isGitSelectionDropdownOpen, setGitSelectionDropdownOpen] =
     useState(false)
   const [isRoadmapDropdownOpen, setRoadmapDropdownOpen] = useState(false)
-  const [isCommunityDropdownOpen, setCommunityDropdownOpen] = useState(false)
   const node = useRef<HTMLLIElement | null>(null)
   const frameworkNode = useRef<HTMLLIElement | null>(null)
   const gitSelectionNode = useRef<HTMLLIElement | null>(null)
   const roadmapNode = useRef<HTMLLIElement | null>(null)
-  const communityNode = useRef<HTMLLIElement | null>(null)
   const router = useRouter()
   const [starCount, setStarCount] = useState<number | null>(null)
   const { user, isLoaded } = useUser()
@@ -69,11 +66,6 @@ const Header = () => {
     setRoadmapDropdownOpen(false)
   }
 
-  const navigateToCommunity = (link: string) => {
-    router.push(link)
-    setCommunityDropdownOpen(false)
-  }
-
   const toggleLanguageDropdown = () => {
     setLanguageDropdownOpen(!isLanguageDropdownOpen)
     if (!isLanguageDropdownOpen) {
@@ -82,7 +74,6 @@ const Header = () => {
     setFrameworkDropdownOpen(false)
     setGitSelectionDropdownOpen(false)
     setRoadmapDropdownOpen(false)
-    setCommunityDropdownOpen(false)
   }
 
   const toggleFrameworkDropdown = () => {
@@ -93,7 +84,6 @@ const Header = () => {
     setLanguageDropdownOpen(false)
     setGitSelectionDropdownOpen(false)
     setRoadmapDropdownOpen(false)
-    setCommunityDropdownOpen(false)
   }
 
   const toggleGitSelectionDropdown = () => {
@@ -104,7 +94,6 @@ const Header = () => {
     setLanguageDropdownOpen(false)
     setFrameworkDropdownOpen(false)
     setRoadmapDropdownOpen(false)
-    setCommunityDropdownOpen(false)
   }
 
   const toggleRoadmapDropdown = () => {
@@ -115,18 +104,6 @@ const Header = () => {
     setLanguageDropdownOpen(false)
     setFrameworkDropdownOpen(false)
     setGitSelectionDropdownOpen(false)
-    setCommunityDropdownOpen(false)
-  }
-
-  const toggleCommunityDropdown = () => {
-    setCommunityDropdownOpen(!isCommunityDropdownOpen)
-    if (!isCommunityDropdownOpen) {
-      window.dispatchEvent(new Event('dropdownOpened'))
-    }
-    setLanguageDropdownOpen(false)
-    setFrameworkDropdownOpen(false)
-    setGitSelectionDropdownOpen(false)
-    setRoadmapDropdownOpen(false)
   }
 
   return (
@@ -339,55 +316,6 @@ const Header = () => {
                     </div>
                   )}
                 </div>
-
-                <div
-                  className='relative'
-                  ref={communityNode as React.RefObject<HTMLDivElement>}
-                >
-                  <button
-                    onClick={toggleCommunityDropdown}
-                    className='flex items-center transition-colors hover:text-modern-purple'
-                    style={{ color: 'var(--fc-primary)' }}
-                  >
-                    <span className='font-medium'>Community</span>
-                    <svg
-                      className={`ml-1 h-4 w-4 transition-transform ${isCommunityDropdownOpen ? 'rotate-180' : ''}`}
-                      fill='none'
-                      viewBox='0 0 24 24'
-                      stroke='currentColor'
-                    >
-                      <path
-                        strokeLinecap='round'
-                        strokeLinejoin='round'
-                        strokeWidth={2}
-                        d='M19 9l-7 7-7-7'
-                      />
-                    </svg>
-                  </button>
-                  {isCommunityDropdownOpen && (
-                    <div
-                      className='scrollable-dropdown absolute z-50 mt-2 w-60 rounded-md py-1 shadow-lg'
-                      style={{
-                        backgroundColor: 'var(--bg-secondary)',
-                        color: 'var(--fc-primary)'
-                      }}
-                    >
-                      {communityList.map(community => (
-                        <button
-                          key={community.name}
-                          onClick={() => navigateToCommunity(community.link)}
-                          className='block w-full px-4 py-2 text-left text-sm transition-colors hover:bg-[var(--bg-hover)]'
-                          style={{
-                            color: 'var(--fc-primary)',
-                            backgroundColor: 'var(--bg-secondary)'
-                          }}
-                        >
-                          {community.name}
-                        </button>
-                      ))}
-                    </div>
-                  )}
-                </div>
               </div>
             </div>
           </div>
@@ -400,6 +328,12 @@ const Header = () => {
               >
                 Resources
               </Link>
+              <Link
+                href='/contributors'
+                className='mx-2 font-medium text-gray-700 transition-colors hover:text-modern-purple'
+              >
+                Contributors
+              </Link>
               <Link
                 href='/ai'
                 className='mx-2 font-medium text-gray-700 transition-colors hover:text-modern-purple'
@@ -572,6 +506,14 @@ const Header = () => {
               Resources
             </Link>
 
+            <Link
+              href='/contributors'
+              onClick={() => setIsOpen(false)}
+              className='block px-3 py-2 text-base font-medium text-gray-700 hover:text-modern-purple'
+            >
+              Contributors
+            </Link>
+
             <Link
               href='/ai'
               onClick={() => setIsOpen(false)}

components/layout/Header.tsx

@@ -75,9 +75,9 @@ export default function Home() {
           <Features />
         </motion.div>
 
-        {/* About Section */}
+        {/* Project Description Section */}
         <motion.section
-          className='bg-gray-50 pb-16'
+          className='bg-white py-16'
           variants={container}
           initial='hidden'
           animate='show'
@@ -87,52 +87,12 @@ export default function Home() {
             className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'
           >
             <div className='px-20 text-center'>
-              <h2 className='text-2xl font-semibold leading-7 text-modern-purple'>
+              <h2 className='text-3xl font-semibold leading-7 text-modern-purple'>
                 Become a part of our community of over 700 inspiring developers
                 who have already contributed to this project!
               </h2>
             </div>
 
-            <motion.div
-              variants={item}
-              className='prose prose-lg mx-auto mt-12 px-20 text-center'
-            >
-              <p>
-                Fork, Commit, Merge is your one-stop resource hub for mastering
-                GitHub contributions! Whether you're a novice coder or an
-                experienced developer, our comprehensive guides are designed to
-                streamline your GitHub journey. We delve into everything from
-                basic Git commands to intricate pull request processes, making
-                collaboration seamless and efficient.
-              </p>
-              <p>
-                Learn the ins and outs of forking, committing, and merging with
-                our easy-to-follow tutorials and expert advice. At Fork Commit
-                Merge, we're passionate about empowering you to contribute
-                confidently and effectively to the open-source world.
-              </p>
-              <p>Let's code, collaborate, and create together!</p>
-            </motion.div>
-          </motion.div>
-        </motion.section>
-
-        {/* Project Description Section */}
-        <motion.section
-          className='bg-white py-16'
-          variants={container}
-          initial='hidden'
-          animate='show'
-        >
-          <motion.div
-            variants={item}
-            className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'
-          >
-            <div className='text-center'>
-              <h2 className='text-3xl font-bold text-gray-900 sm:text-4xl'>
-                About the Fork, Commit, Merge project
-              </h2>
-            </div>
-
             <motion.div
               variants={item}
               className='prose prose-lg mx-auto mt-12'
@@ -141,9 +101,10 @@ export default function Home() {
                 "Fork, Commit, Merge" is an educational and practical project
                 aimed at helping developers - both newcomers and seasoned -
                 improve their skills in open-source contribution,
-                problem-solving, finding bugs, testing, and much more in 135
-                individual issues encompassing various programming languages,
-                libraries and frameworks.
+                problem-solving, finding bugs, testing, and much more in{' '}
+                <span className='text-green-400'>135</span> individual issues
+                encompassing various programming languages, libraries and
+                frameworks.
               </p>
               <p>
                 The project is open to everyone and anyone who wants to learn
@@ -199,38 +160,8 @@ export default function Home() {
               ))}
             </motion.div>
 
-            <div className='mt-8 text-center'>
-              <Link
-                href='/contributors'
-                className='inline-flex items-center justify-center rounded-md bg-modern-purple px-6 py-3 text-base font-medium text-white shadow-sm transition-colors duration-200 hover:bg-modern-purple/90'
-              >
-                View All Contributors
-                <svg
-                  className='ml-2 h-5 w-5'
-                  fill='none'
-                  stroke='currentColor'
-                  viewBox='0 0 24 24'
-                  xmlns='http://www.w3.org/2000/svg'
-                >
-                  <path
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                    strokeWidth={2}
-                    d='M13 7l5 5m0 0l-5 5m5-5H6'
-                  />
-                </svg>
-              </Link>
-            </div>
-
             {/* Other Contributors */}
             <div className='mt-16'>
-              <h3 className='mb-8 text-center text-2xl font-bold text-gray-900'>
-                Join Our Community
-              </h3>
-              <p className='mb-8 text-center text-gray-600'>
-                Be part of our growing community of developers who are learning
-                and contributing to open source
-              </p>
               <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-3'>
                 {otherContributors.map((contributor, index) => (
                   <a
@@ -262,6 +193,28 @@ export default function Home() {
                 )}
               </div>
             </div>
+            <div className='mt-8 text-center'>
+              <Link
+                href='/contributors'
+                className='inline-flex items-center justify-center rounded-md bg-modern-purple px-6 py-3 text-base font-medium text-white shadow-sm transition-colors duration-200 hover:bg-modern-purple/90'
+              >
+                View All Contributors
+                <svg
+                  className='ml-2 h-5 w-5'
+                  fill='none'
+                  stroke='currentColor'
+                  viewBox='0 0 24 24'
+                  xmlns='http://www.w3.org/2000/svg'
+                >
+                  <path
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth={2}
+                    d='M13 7l5 5m0 0l-5 5m5-5H6'
+                  />
+                </svg>
+              </Link>
+            </div>
           </div>
         </section>