Create a responsive website with two sections, where each section represents different parts and is relevant to the thesis. It is important that all parts of the thesis have a common thread.
Table of Contents
Screen shot from hero section.
Brief:
Project: Landing page for leads generation
Background: LipusPlus strives to attract physiotherapists and elite athletes to its webinars on the Return to Play concept. An enticing and informative landing page is needed to generate leads for these webinars.
Purpose: Create an emotional connection with the target group and provide them with relevant information about webinars. The goal is to convince them to sign up for the event and thereby generate leads for sales processing.
Objective: Create a user-friendly landing page that provides a seamless experience for visitors from registration to processing. Strive for a high conversion rate and satisfaction for both LipusPlus and the participants before, during and after the event.
Key questions to answer: 1- How can we make the message and the offer on the landing page clear and attractive to the target group?
2- How can we optimize the landing page to increase the conversion rate and get more visitors to sign up for webinars?
3- How can we stimulate people to spread the word about the webinar in their surroundings?
Frontend Criteria:
Create a responsive website with two sections, where each section represents different parts and is relevant to the essay. It is important that all parts of the essay have a common thread.
Responsive (mobile, tablet, computer) If the image exists, use CSS to ensure the image adapts to different screen sizes and devices. The image must also have alt text. Create at least two sections in HTML and CSS
Interactivity Integrate Javascript or ReactJS to create interactivity in at least one section
Animations Implement CSS or JavaScript based animations (at least 2) to improve user experience. Use transition effects to make transitions smooth and appealing.
Requirement
Accessibility Ensure that all interactive elements are accessible and WCAG 2.1 compliant (levels A and AA) Use legible text with high contrast to ensure good visibility and accessibility.
Grid layout Use CSS Flexbox or Grid Layout to organize the content in a flexible way. Demonstrate an understanding of the different layout options and when they are most appropriate.
This is an example of how to set up this project locally. To get a local copy up and running follow these simple example steps.
- Clone the repo to a destination folder of your choice.
git clone https://github.com/PaulEvans78/thesis.git - Install NPM packages
npm install - Install Styled components
npm i styled-components - Install Icons. import FaArrowCircleUp from react-icons/fa
npm i react-icons - Run the app
npm run dev
Distributed under the MIT License. See LICENSE.txt for more information.
Email: [email protected]
LinkedIn: https://www.linkedin.com/in/paul-evans-3a74605/
Project Link: https://paulevans78.github.io/thesis/
Paul Evans fsf: Showreel