![[images/optoai-landing-page/optoai-1.jpg|Thumbnail of OptoAI - Landing Page]] OptoAI is a cost optimization application powered by AI. It integrate customer Projects and AWS account and do optimization based on that data. It also equiped with Data Visualization tools to make it easy for customer to make the financial decision on their project.
My Role
Front-End Developer
Project Goal
Developing the front-end based on Figma Design.
Stacks & Skills
#Javascript #Typescript #HTML #CSS #TailwindCSS #NextJS
Challange
The client requires an implementation of his design. It was a landing page for his company profile. Unfortunately, the client only provide me with one board/frame to implement. So I have to figured it of how it will look like on smaller screen like 14” laptop and general mobile screen.
So the challange is:
- How implement the design properly on the frontend
- How to make it responsive to smaller screen like laptop and mobile screen
- How to animate the navigation bar on smaller screen
Solution
I decided to use NextJS with TailwindCSS as the frameworks. I also following the best practice to be on DRY (don’t repeat yourself), so I create some reusable elements into React Component.
I start working on sections by sections. I devide the sections into:
- Navbar
- Hero
- Body, and
- Footer
The most challanging part is to make the app responsive to smaller screen. The only way to do it is by adding more tailwindcss utilities which put some effect when the screen size is fall within the breakpoints.
The final challange is to animate the navbar with show/hide functionality when use tapping on the burger menu. The solution for this is, I use React hook to manipulate the vertical position to be in and out of the screen.
For more detail I will attach the website view below. ![[images/optoai-landing-page/preview.png|Thumbnail of OptoAI app preview in Desktop and Mobile]]