Testimonials Grid Section | Vue 3 + SCSS + CSS Grid (Mobile-first)

In this challenge, I focused on building a clean and responsive grid layout using a modern frontend stack. Here are the key tools and techniques I used: Vue.js: I structured the project as a component-based application to practice working with Vue's reactivity and scoped styles. SCSS: Used for more maintainable CSS, leveraging variables for colors and nesting for cleaner code. CSS Grid (grid-template-areas): This was the core of the layout. I used grid areas to easily rearrange the testimonials for different screen sizes (1-column on mobile, 4-column grid on desktop). Mobile-First Workflow: I started styling for mobile devices first and then added media queries for larger screens to ensure a smooth responsive experience. Lighthouse Optimization: I used AI assistants to help analyze Lighthouse reports, focusing on improving accessibility and performance scores.