SeaLink Travel Group - Front-end Developer code test

Task brief

View the design file in Figma
Using a mobile-first development approach, we'd like you to build the 'What's on' component from the Figma design
Specs of this component:
- There are a limit of 3 events shown.
- Event items are displayed as accordions. The first item loads in an active (open) state.
- Each event item has an image, when the item is active the relevant image swaps in.
- Each event item has a link, plus there is one general button in the component (use placeholder links).

Fork our repository to your own Github account
Install dependencies using yarn. cd into the /src directory and run yarn install.
Once dependencies have been installed, run yarn start to compile SCSS and Javascript. This will actively watch for any changes you save.
To run a simple webpack server, in a new terminal tab from the /src directory run yarn server. The app should open at http://localhost:8080/

Once you have the project running as per the steps above, you're ready to start development.

Our boilerplate has you started with Bootstrap 5 installed, and provided you with some starter SCSS, such as colours and fonts – /src/scss/app.scss
/src/js/app.js is where you can add your custom JavaScript.
As mentioned above, Webpack will re-build SCSS or JS as you save changes (compiled to /app/dist/).
There are 3 images available to use, located in the /app/images directory.

We'll let you decide how you wish to create the component. There is no right or wrong answer here.

Once you're happy with your component, push your code changes to Git and create a Pull Request to our repository.