7 Shifts is a restaurant employee scheduling service based in Canada. We helped support their dev team on a few projects in early 2023, and one of the tasks was to set up a landing page for a campaign they were running.
The design was very futuristic, playing to the theme of “Serving What’s Next”, and used Adobe Illustrator 2-d splines to create “blob” effects. The goal for the build was to a) use the existing React components in the site library, and b) make all of the effects work using SCSS.
We used multiple shadow elements in SCSS to create the 3d effect on the text, eliminating the need for image-based text, and ensuring we could keep everything live and responsive. SVG clipping masks created the wavy boundaries between sections.
// Programs & Methods Used
React / Gatsby, SCSS, SVG Clip Masks
7 Shifts is a restaurant employee scheduling service based in Canada. We helped support their dev team on a few projects in early 2023, and one of the tasks was to set up a landing page for a campaign they were running.
The design was very futuristic, playing to the theme of “Serving What’s Next”, and used Adobe Illustrator 2-d splines to create “blob” effects. The goal for the build was to a) use the existing React components in the site library, and b) make all of the effects work using SCSS.
We used multiple shadow elements in SCSS to create the 3d effect on the text, eliminating the need for image-based text, and ensuring we could keep everything live and responsive. SVG clipping masks created the wavy boundaries between sections.
// Programs & Methods Used
React / Gatsby, SCSS, SVG Clip Masks
