feat: adds events section

[EspiraMarvin]

• Closes Implement the Event Section #81

Requirements to be achieved

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.

Check List (Check all the applicable boxes)

• 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.

Screenshots

Implementation of the design

Testing of the events section

Note to reviewers

1. I've downloaded images from Figma its located in pages/images folder but it needs to be stored in some service like cloudinary. I could not add relative urls for the images since they're not https/http while the events data is in json format

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
reactdevske-website	✅ Ready (Inspect)	Visit Preview	Oct 18, 2022 at 5:41PM (UTC)

[antosan]

I request a few adjustments:

• 1. Kindly delete the 6 Rectangle XX.png images that came from Figma. Sorry for the confusion. These were placeholder images in the design but we intend to load our own images that are linked in the events.json.

• 2. For better organization, let us create a new folder named Events inside the components folder and move the src/components/Events.tsx and src/components/DisplayRC.tsx files in there.

src/components/Events.tsx ➜ src/components/Events/Events.tsx
src/components/DisplayRC.tsx ➜ src/components/Events/DisplayRC.tsx

• 3. Run prettier npm run prettier:format to format your files.

[EspiraMarvin]

Done, with the changes needed.

[EspiraMarvin]

the test you've given is perfect, it works well for chrome, firefox but not safari.
Safari needs to scroll the page until the #events >> text="See More' is in view before clicking it, otherwise it will fail.
The solution for it is adding test.slow() after page.locator('#events >> text="See More"').click(), for it to work universally across all browsers factoring in safari

const [newPage] = await Promise.all([
page.waitForEvent('popup'),
page.locator('#events >> text="See More"').click(),
test.slow()
]);

If you're not experiencing this issue and all tests are passing in all the 3 browsers,, just ignore this. It maybe an issue with my environment

[antosan]

LGTM 👍