Landing page for a team that really cares about accessibility.
I had the pleasure of meeting the members of Clarify’s team and learning about their incredible idea. I’m close to the team, so when I found out they would participate in a regional tournament called InnovaTecNM 2024, I knew I had to support them and their project. That’s when I proposed creating a landing page to reinforce their brand image and add value for the upcoming event. The team leader, Karely Duran, was fascinated with the idea. She outlined the sections she wanted for the landing page and provided all the necessary resources, including a demo of the project, to make it visible to everyone.
I began by considering the technologies I would use. One option was Astro, one of the newest frameworks for web development that I believe will become a standard in the coming years. Why? Astro focuses heavily on performance and page load speed, generating static sites at build time with zero JavaScript by default. That’s impressive, but what really blew my mind was the concept of "Islands," which allows different technologies to coexist and communicate through properties. Along with other features and functionalities, Astro seemed like the best option for this project and more complex ones.
I’m currently studying the Astro framework, and the more I learn about it, the more I love it. I’m excited about its brilliant future. However, at the time of this project, I only knew the basics of Astro and wasn’t sure about starting the project with it. What if I needed to learn something else? What if something didn’t work properly? If it were a personal project, I might have been more flexible about taking risks, but this was a page for a team that needed to make the best impression on the judges to win this phase. It wouldn’t have been professional to experiment with unfamiliar technologies at that moment.
So, I decided to work with the technologies I know and master best: Next.js. I could have used React and Vite, but I wanted to use Next.js, keeping in mind that this page could scale. With advantages like Server Side Rendering performance, the possibility of creating a backend and server actions in the same project, app routing, and SEO-friendly performance, I decided to do it all with Next.js and deploy the project on Vercel.
With Next.js and React as the foundation, choosing Tailwind CSS for styling was an easy decision. Given the limited time for creating the page, I couldn’t afford to lose time making styles from scratch. Also, if I needed components, there are many resources available with Tailwind. To make the page eye-catching, I used Framer Motion for animations. For icons, I tried Radix UI Icons, as I like their design.
The final tech stack consisted of Next.js with React and TypeScript, Tailwind CSS for styling, Framer Motion for animations, and Vercel for hosting. Since the project demo was quite heavy, I used Cloudinary for video hosting. As an added bonus, I used Next-intl to internationalize the page and reach a broader audience.
I started by seeking inspiration, looking at designs, creating mockups, and experimenting with a new tool called V0.dev from Vercel. It’s an AI-focused tool for creating UI components, and it works great for an early version. I adapted some components I really liked, such as the team member cards and the phone mockup made with Tailwind CSS. With some styling improvements, I achieved the final design I wanted.
The result is a minimalist, beautifully animated page that illustrates the team’s purpose. I haven’t mentioned it before, but Clarify is a mobile application built with Flutter to help disabled people, especially those who are blind, make their phones more useful. The app uses AI to detect objects in the environment or documents and provides voice feedback so users know what’s in front of their phone. The app’s design is minimalistic and clear, with large buttons and a light theme to highlight those buttons, making it easier for disabled people to find and use options. I applied these principles to the landing page, providing features like dark mode, simple and readable content, internationalization, and subtitles for the demo.
This project taught me how to make a truly accessible page using ARIA attributes and naming buttons and icons to improve accessibility. This accessibility is also internationalized, so labels and other elements are in the selected language to further enhance the experience for those who need them. I also learned how to create dynamic metadata based on the language, developing a simple solution that I plan to implement in other projects, like my portfolio. Throughout this project, I strived to make my code clean, maintainable, error-free, scalable, and, most importantly, accessible.
It was a pleasure to create this project for the Clarify team. I’m committed to their cause and glad to volunteer my services for such a noble project. I hope this strengthens their brand image and increases their visibility. I wish them the best of luck.
Update: They won 3rd place in the Regional tournament in Monterrey, Nuevo Leon, Mexico. They have advanced to the national tournament. The page received many compliments, with other teams amazed that a team had their own page. "Beautiful" and "minimal" were some of the most repeated comments, according to Karely Duran. (I will update with the results of the national phase.)
