This epic issue aims to add a Project Showcase Page to our website. The Project Showcase Page will serve as a central hub where community-built projects will be featured, celebrated, and shared with our audience. This new addition will highlight the diversity and creativity of our community's projects and provide a platform for project creators to showcase their work.

It contains the following the task:

• #24
• #25
• #26
• #27
• #28

Upon successful implementation of this epic, our website will feature an impressive Project Showcase Page, providing a platform for community-built projects to shine.

Instead of something generic like HEKORS Community, it shows website link.

Issue Title: Create Project Listing Section for Project Showcase Page

Issue Description:
The goal of this issue is to implement a Project Listing Section on our Project Showcase page using the provided Figma designs from the design team. This section will provide an appealing introduction to the community-built projects, attracting visitors and enhancing user engagement. The Project Listing Section plays a crucial role in capturing visitors' attention while conveying the essence of the showcased projects.

Figma Designs: Link to Figma File

Scope of Work:

1. Design Review: Carefully review the Figma file to understand the layout, styles, and interactions required for the Project Listing Section.

2. Responsiveness: Ensure that the Project Listing Section is fully responsive and displayed flawlessly across various devices, including desktops, tablets, and mobile phones.

3. Dynamic Content: Implement a flexible mechanism to update and manage the content of the Project Listing Section, such as project titles, descriptions, and call-to-action buttons.

4. Image Optimization: Optimize images used in the section to ensure fast loading times without compromising visual quality.

5. Accessibility: Apply accessibility best practices to ensure the Project Listing Section is usable and navigable for all users, including those with disabilities.

6. Code Integration: Integrate the Project Listing Section into the existing Project Page codebase, adhering to our coding standards and best practices.

Expected Outcome:
Upon completion of this issue, visitors to the Project Showcase Page will be greeted with an engaging and compelling Project Listing Section, providing them with a comprehensive view of the showcased projects and encouraging them to explore further. This enhancement will significantly contribute to an improved user experience and increase user engagement on our website.

Let's collaborate and create a more inviting and exciting Project Showcase page for our users!

This is a epic which contains the following tasks

• #16
• #8

Let's go with the import pattern
Prioritized with numbering in order to follow the pattern

1. React, Next: Basic Imports
2. Any library used: Library Imports
3. Any file or components: Components Imports
4. For styles: Styles Imports
5. For types: Types imports
6. For icons: Icons Imports

Let me know if any changes we have to do in this pattern or any thoughts on this.

Originally posted by @ayushsoni1010 in #4 (review)

Right now the data for team-members and community narratives is coming from Strapi CMS which is having some issues regarding cloud deployments thus we've no data to test and implement our frontend as of now.

To don't affect the interaction with the website of the users, we're "temporarily" using JSON data for showing team-members and community-narratives data. Things to make sure while working on this feature,

1. To make sure that the new "temporary" JSON data schema follows the schema of Strapi REST APIs. For both the components,

• Teams
• Community Narratives

Data Schema

1. Teams Members

type TeamMemberCardType = {
  picture?: string | any;
  fullName?:
    | any
    | {
        firstName?: string | any;
        lastName?: string | any;
      };
  isAvenger?: boolean;
  directWebsite?:
    | {
        label?: string | any;
        link?: string | any;
      }
    | any;
  socialProfile?:
    | {
        twitterUsername?: string | any;
        instagramUsername?: string | any;
        linkedInUsername?: string | any;
        githubUsername?: string | any;
      }
    | any;
  description?: string | any;
};

2. Community Narratives

type CommunityNarrativesType = {
  content?: any,
  author: {
    picture?: string,
    name?: string,
    website?: string,
    tagline?: string
  }
};

• Refer to the above provided types to create new JSON schema for data.

The goal is to use the next-seo package to implement SEO for the HEKORS website.

I believe that the SEO implementation should follow the next-seo package's best practices and guidelines, which include optimizing page titles, meta descriptions, and Open Graph tags,

We can create a custom SEO component for the website to ensure that everything will be reusable and optimized for search engine algorithms. This SEO component can be seamlessly integrated into the website, ensuring a smooth user experience. Additionally, the SEO component will be well-documented, making it easy to update and maintain.

Finally, we can update the pages once the SEO is implemented to ensure that it is up-to-date and compliant with the latest standards and best practices. This will ensure that the website is always ranking highly in search engine result pages, further increasing the visibility of the website.

CC - @yashsehgal @ayushsoni1010

We're writing our complete middleware and frontend code on the data-collection schema that we receive from Strapi. After writing a bunch of frontend code and implementing many data-collections to UI, we found out that media files are getting affected while receiving data from APIs.

• Right now, the approach we're using is to upload a media item on Strapi and mention the media-id after upload in the data-collection schema as well, in order to use that ID later on to fetch data from /uploads/[ID]

We tested this issue several times and thinking to make changes in the media storing structure in the beginning only.

Method we're thinking to move forward to improve our frontend & middleware with:

• We will be changing the (collectionType)Image & (collectionType)ImageID to just (collectionType)ImageSource. For an example, images of team-members will be stored in a new field called teamMemberImageSource
• Data inside (collectionType)ImageSource will taken from a third-party CDN provider, which is going to be ImageKit 🎉
• CDN links from ImageKit will be stored in all the new Strapi publishes, in order to store media content.

Approach we'll be following to re-engineer this issue, in short Steps to be followed:

1. Create and Work on a new branch called fix/strapi-media-content
2. Change the data-collection schema for all the collectionTypes,
   • Teams collection type
   • Hackathons collection type
3. Re-write middleware and API handlers according to the new changes
4. Re-write frontend according to the newly written middleware

Implement a responsive navbar menu that adapts to different screen sizes, providing users with a smooth and user-friendly navigation experience on all pages of the website. This enhancement will improve usability and accessibility for users across various devices, ensuring a good browsing experience.

Issue

We need to create a responsive layout for landing page in this issue. Checkout the Figma file to get a better idea.

Description

We'll be using TailwindCSS classes for responsiveness. Sections which will be covered in this issue

• Hero section
• Get Started section
• "Collaborate with us" section
• The Team section
• "Attend a hackathon" (CTA) section

More sections will be added soon according to the design progress.

The purpose of this issue is to enhance the user experience on our Project Showcase page by implementing a robust search functionality for projects. The search feature will empower visitors to quickly find specific projects based on their interests, categories, or keywords, making it easier for them to discover relevant and captivating content within our community-built projects.

Figma Designs: Link to Figma File

Scope of Work:

1. Design and Layout: Carefully review the Figma file to understand the layout, styles, and interactions to create a user-friendly search interface that seamlessly integrates with the existing Project Showcase page layout.

2. Search Algorithm: Develop a search algorithm that efficiently filters and matches user queries to project titles, descriptions, and relevant metadata.

3. Real-Time Search: Implement real-time search suggestions to assist users in finding relevant projects as they type in their search queries.

4. Filtering Options: Introduce filtering options that allow users to narrow down search results based on categories, tags, or other relevant criteria.

5. Responsive Design: Ensure the search functionality is fully responsive, providing a consistent experience across different devices and screen sizes.

6. Performance Optimization: Optimize the search feature for fast and efficient retrieval of project data, even with a large number of projects in the showcase.

7. Accessibility: Apply accessibility best practices to make the search functionality usable for all users, including those with disabilities.

8. Code Integration: Integrate the search functionality into the existing Project Showcase page codebase, following coding standards and best practices.

Expected Outcome:
Upon successful completion of this issue, our Project Showcase page will be equipped with a powerful and user-friendly search functionality, enabling visitors to efficiently discover projects that match their interests. This enhancement will significantly improve the overall user experience, leading to increased engagement and satisfaction among our website users.

Let's work together to implement this essential project search functionality and elevate our Project Showcase page to new heights!

The objective of this issue is to introduce a visually appealing "Featured Projects" section on our Project Showcase page, utilizing the provided Figma designs from the design team. This section will be prominently placed at after "best project of the month" CTA section and will serve as an engaging showcase of exceptional community-built projects, attracting visitors and enhancing user engagement.

Figma Designs: Link to Figma File

Scope of Work:

1. Design Review: Carefully review the Figma file to understand the layout, styles, and interactions required for the "Featured Projects" section.

2. Responsiveness: Ensure the section is fully responsive, providing a seamless viewing experience across various devices, including desktops, tablets, and mobile phones.

3. Dynamic Content: Implement a flexible mechanism to update and manage the content of the section, enabling easy modification of project titles, descriptions, and call-to-action buttons.

4. Image Optimization: Optimize images used in the section to achieve fast loading times without compromising on visual quality.

5. Accessibility: Apply accessibility best practices to ensure the section is usable and navigable for all users, including those with disabilities.

6. Code Integration: Integrate the coded Featured Projects section into the existing Project Page codebase, adhering to our coding standards and best practices.

Expected Outcome:
Upon successful completion of this issue, the Project Showcase page will feature an appealing and compelling "Featured Projects" section. Visitors will be presented with a curated selection of outstanding community-built projects, encouraging them to explore further. This enhancement will significantly improve the user experience and foster greater user engagement on our website.

Let's collaborate and make the Project Showcase page even more inviting and exciting for our users!

This issue aims to code the Hero Section for the Project Showcase page using the Figma designs provided by the design team. The Hero Section, placed at the top of the page, will serve as a captivating introduction to the projects built by the community, attracting visitors and enhancing user engagement. The Hero Section serves as the prominent visual element at the top of the page and plays a crucial role in grabbing the visitors' attention while conveying the essence of the event.

• Here's the figma file for the same: Link to Figma File

Scope of Work:

• Design: Thoroughly review the Figma file to understand the layout, styles, and interactions required for the Hero Section.

• Responsiveness: Ensure that the Hero Section is fully responsive and displays flawlessly across various devices, including desktops, tablets, and mobile phones.

• Dynamic Content: Implement a mechanism to easily update and manage the content of the Hero Section, such as project titles, descriptions, and call-to-action buttons.

• Image Optimization: Optimize images used in the Hero Section to ensure fast loading times without compromising on visual quality.

• Accessibility: Implement accessibility best practices to guarantee that the Hero Section is usable and navigable for all users, including those with disabilities.

• Code Integration: Integrate the Hero Section into the existing Project Page codebase, adhering to our coding standards and best practices.

Expected Outcome:

• By completing this issue, visitors to the Project Showcase Page will be greeted with an engaging and compelling Hero Section, providing them with a glimpse of the projects and encouraging them to explore further. This enhancement will contribute to an improved user experience and increase user engagement on our website.

Let's collaborate and make the Project Showcase page even more inviting and exciting for our users!

This issue focuses on implementing the "Best Project of the Month" Call-to-Action (CTA) Section for our Project Showcase page, using the provided Figma designs from the design team. Placed after the hero section, the CTA Section will act as a captivating introduction to the community-built projects, enticing visitors and boosting user engagement.

Figma Designs: Link to Figma File

Scope of Work:

1. Design Review: Carefully examine the Figma designs to understand the layout, styles, and interactions required for the "Best Project of the Month" Section.

2. Responsiveness: Ensure full responsiveness of the CTA Section, providing a seamless display on various devices, including desktops, tablets, and mobile phones.

3. Dynamic Content: Implement a flexible mechanism for updating and managing the Section's content, such as project titles, descriptions, and call-to-action buttons.

4. Image Optimization: Optimize images used in the Section to achieve quick loading times without compromising visual quality.

5. Accessibility: Incorporate accessibility best practices to ensure the Section is usable and navigable for all users, including those with disabilities.

6. Code Integration: Integrate the coded CTA Section into the existing Project Page codebase, adhering to our coding standards and best practices.

Expected Outcome:
Upon completion of this issue, visitors to the Project Showcase Page will encounter an engaging and compelling "Best Project of the Month" CTA Section, offering a glimpse of the featured projects and motivating them to explore further. This enhancement will significantly enhance user experience, fostering greater engagement with our website.

Let's collaborate to create an enticing Project Showcase page that leaves a lasting impression on our users!