Frontend: Create and Import the "Contributors" Section #4
Description
🎯 Objective
Develop a "Contributors" section to acknowledge and appreciate all contributors to LogiQuest. The section should match the Figma design and be responsive, visually appealing, and dynamically generated.
🔍 Context
This section will showcase the contributors who have helped build LogiQuest. It will display GitHub avatars, names, and links to their profiles. The data can be manually stored or fetched dynamically from GitHub’s API in the future.
📋 Tasks
- Create a
ContributorsSection.tsxcomponent insidecomponents/. - Ensure the section is responsive and accessible.
- Import the component into
Home.tsx.
💻 Technical Implementation
1️⃣ Create ContributorsSection.tsx inside components/
const ContributorsSection = () => {
return (
<section className="">
{/* content goes here*/}
</section>
);
};
export default ContributorsSection;
2️⃣ Import ContributorsSection.tsx into Home.tsx
import ContributorsSection from "../components/ContributorsSection";
const Home = () => {
return (
<>
{/* paste your page component below here */}
<ContributorsSection />
{/* paste your page component above here */}
</>
);
};
export default Home;
3️⃣ Style the "Contributors" Section with Tailwind classes
📝 Acceptance Criteria
✅ The "Contributors" section matches the Figma design.
✅ It is fully responsive and visually engaging.
✅ Displays contributor names, avatars, and links to their GitHub profiles.
✅ The component is correctly imported and displayed on the Home Page.
✅ Accessibility is considered (proper HTML semantics and readability).
💪 Skills Required
- React
- Tailwind CSS
- Responsive Design
- Accessibility
📈 Difficulty
Easy