💻 Daily Stride Landing Page

The Daily Stride landing page is part of a larger project, the Daily Stride dashboard. The website showcases the features and benefits of utilising the dashboard. It features a responsive, user-friendly design, along with a light and dark theme, and smooth animations.

🛠 Technologies

• Vite
• React.js
• TailwindCSS
• Framer Motion
• Vercel

⚙️ Features

Here's what Daily Stride has to offer:

• Responsive UI: An intuitive design for desktop and mobile devices.
• Theme Toggle: A light and dark theme suited for users who prefer light or dark website.
• Animations: Smooth animations to provide a better user experience.
• Mockup Designs: Customised mockups were created to add to the user experience, whilst showcasing the dashboard layout for the Daily Stride's app counterpart.

👨‍🍳 The Process

I initially begun with sketching some rough ideas about the overall layout of some components, and the structure of the different sections.

From there, I picked out some colours, generated a custom logo using AI, and begun fine tuning the design using Figma. I designed a mobile and desktop version to make the actual website build much easier down the line

Thereafter, I began the development of the website first by building out the structure, and making each section responsive as I went a long. Once the entire website was completed, I added the dark theme to the website and implemented the functionality to toggle this theme based on user-preference. Once complete, I added the animations using Framer Motion, to add that little bit of experience to the website.

Lastly, I just wanted to fine tune everything which is what you will see before you when you open the website - Daily Stride Landing page

📚 What I Learned

Building this project has taught helped me learn a lot about project planning. More than that, I also learnt a lot more about responsive design, custom theming using TailwindCSS. This was also the first time I used Framer Motion, so I learnt quite a bit regarding animations.

💭 How can it be improved?

• Fine tune animation orchestration

🚦 Running the Project

To run the project in your local environment, follow these steps:

1. Clone the repository to your local machine.
2. Run npm install or yarn in the project directory to install the required dependencies.
3. Run npm run start or yarn start to get the project started.
4. Open http://localhost:5173 (or the address shown in your console) in your web browser to view the app.