SADARI Website

When I started working on the Sadari website, I realized this wasn't just another landing page project. Mental health services require a unique approach - the website needed to feel safe, professional, and welcoming all at once. The challenge was creating a design that would: • Make visitors feel comfortable seeking help • Establish credibility and professionalism • Be accessible to people of all technical abilities • Load quickly even on slower connections I spent the first two weeks researching mental health websites, studying color psychology, and understanding the emotional journey of someone seeking psychological help.

I decided to build the website using a container-presentational pattern, separating business logic from UI components. This approach allowed me to: 1. Create a comprehensive design system in Figma first 2. Build reusable components with Shadcn UI as the foundation 3. Implement smooth animations with Framer Motion without sacrificing performance 4. Use TypeScript to catch errors early and improve code quality For the design system, I created auto-layout components in Figma that could be directly translated to code. This meant designers and I could work in parallel without conflicts.

One of the most interesting challenges was implementing the smooth scroll animations while keeping the Lighthouse performance score above 90. I used Framer Motion's viewport detection to only animate elements when they're visible, significantly reducing JavaScript execution time. For SEO optimization, I implemented: • Dynamic meta tags using Next.js metadata API • Structured data (JSON-LD) for better search visibility • Image optimization with next/image • Semantic HTML for better accessibility and SEO The result? A website that loads in under 2 seconds even on 3G connections, with a Lighthouse score consistently above 95.

After launch, the website became the primary touchpoint for Sadari's digital presence. The clean, professional design helped establish trust with potential clients, while the fast performance ensured no one would leave due to slow loading times. The component-based architecture I built also made it easy for the team to add new services and content without requiring my constant involvement - exactly what a growing mental health practice needs.