Martial arts Tarragona
The first version was built through vibe coding: generating and adjusting a website with AI. It had content and functionality, but competing CSS rules, abrupt animation and little breathing room made it hard to follow. Visitors had to explore too far to understand the centre. The redesign needed a clear path through disciplines, schedules and prices towards the next step.
Training photography, a black base and gold accents give the site a more restrained direction. Space between sections lets one idea land before the next. Visual hierarchy separates the centre’s introduction, practical information and STRIKE collection. The work combines interface design, information architecture and frontend development on an existing foundation.
Navigation follows visitors’ questions: what can I train, when can I come, what does it cost and how do I start?
Competing CSS rules were reviewed and spacing, typography and components unified across the homepage and catalogue.
Animation was reduced and more space introduced between sections, leaving time to read and find the way.
The STRIKE catalogue combines search, garment filters, sizes and a bag to compare options and prepare an enquiry.
The responsive layout preserves reading order. At 320 px, products appear in one column with search, filters and size selection intact. Order review brings products, quantities and contact fields into the available width.
Visitors can explore a discipline, check its schedule and reach the joining enquiry. In the catalogue, search and filters narrow the selection; choosing a size and adding an item preserves it in the bag. The review shows quantities and subtotal before the request goes to the team.