Implement the Event Section

[orama254]

What feature are you adding?

Events Section

Describe your issue

Requirements

• Create a component named Events in the components folder that implements the screenshots below.
• It should render a section tag with an id of events.
• It should make use of the existing DisplayRC component - feel free to adjust the DisplayRC component to match the requirements in this ticket.
• Use the events.json data shown below.
• Obtain the images from the Figma design. Use THIS VIDEO as a guide
• The images should use the Next Image component.
• Include the component in index.page.tsx
• Create a new test file in the e2e folder named events.spec.ts and add a test that verifies that clicking the "See More" link in the component navigates to the correct URL HERE.

events.json

{
  "events": [
    {
      "id": 1,
      "title": "Physical Meetups",
      "description": "Physical meetups where we share, learn and network.",
      "image_url": "https://photos.google.com/share/AF1QipMYzi5M1zTfsp9BYW6Rb1uF7_5gC3PrbTwS-xJuwVMYd9LUFXFUJbDW4-tap8SFEw/photo/AF1QipNcrZfA-7tCsE0x6kU9isgBsDgwq633uuDUGZXW?key=bkVyajFIM3BsdWtpdUY2UEVVTXhDOXZVckZtZlFR",
      "target": "https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events"
    },
    {
      "id": 2,
      "title": "Weekly Online Standups",
      "description": "Weekly open calls in the community’s Telegram group discussing industry-related topics.",
      "image_url": "https://images.unsplash.com/photo-1619490287893-862fd1808407?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80",
      "target": "https://bit.ly/joinreactdevske"
    },
    {
      "id": 3,
      "title": "Community Power Sessions",
      "description": "Community members meet and share technical concepts with other members of the community.",
      "image_url": "https://drive.google.com/file/d/1k23Ey4zXg45XoAxrcQ1k24YBkJXBI-vQ/view?usp=sharing",
      "target": "https://www.youtube.com/channel/UC9_eVcPBk4T-DcZLHpQfy4w/videos"
    },
    {
      "id": 4,
      "title": "Joint Meetups",
      "description": "Meetups hosted in collaboration with other tech communities.",
      "image_url": "https://photos.google.com/u/3/search/_tra_/photo/AF1QipOh6FM771-Q4oga0ge8kVoKsK2fEok3pE1eBjfk",
      "target": "https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events"
    },
    {
      "id": 5,
      "title": "Monthly Online Standups",
      "description": "Monthly open calls on Google Meet  bringing together people from different communities.",
      "image_url": "https://photos.google.com/share/AF1QipMYzi5M1zTfsp9BYW6Rb1uF7_5gC3PrbTwS-xJuwVMYd9LUFXFUJbDW4-tap8SFEw/photo/AF1QipNcrZfA-7tCsE0x6kU9isgBsDgwq633uuDUGZXW?key=bkVyajFIM3BsdWtpdUY2UEVVTXhDOXZVckZtZlFR",
      "target": "https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events"
    },
    {
      "id": 6,
      "title": "Community Challenges",
      "description": "We organize open source challenges to keep the community engaged.",
      "image_url": "https://photos.google.com/share/AF1QipMYzi5M1zTfsp9BYW6Rb1uF7_5gC3PrbTwS-xJuwVMYd9LUFXFUJbDW4-tap8SFEw/photo/AF1QipNcrZfA-7tCsE0x6kU9isgBsDgwq633uuDUGZXW?key=bkVyajFIM3BsdWtpdUY2UEVVTXhDOXZVckZtZlFR",
      "target": "https://github.com/reactdeveloperske/community-coding-challenges"
    }
  ]
}

SCREENSHOT

Figma Design

Acceptance Criteria

• When the "See More" link is clicked, the page opens TODO: in a new tab.
• The implementation should match the design - text content, typography, capitalization and spacing.
• The UI should be responsive and work well on both desktop and mobile viewports.
• The events.spec.ts test should pass on both Chrome, Firefox and Safari.

[EspiraMarvin]

@orama254 Assign me this, thanks.

[orama254]

Hey @EspiraMarvin

Go ahead, remember to go through our contribution guidelines and also evaluate the acceptance criteria before submitting a pull request.

Happy hacking!!!

[EspiraMarvin]

@orama254 . A clarification needed, looking at the project requirements and the design, the Events component should be a section on the home page and not a page on its own as previously done? So I should get rid of the pages/events folder?

[orama254]

@EspiraMarvin

Yes, for this MVP, the Events component should be a section on the home page. We are building it on the first phase as an MVP

[EspiraMarvin]

@orama254 okay got it