Complexo Costa Martins · Local service landing page
Studio Pilates Costa Martins: from structure to page
A dedicated introduction to the studio, with a clear path to contact
I planned and built the landing page for Studio Pilates Costa Martins in Quixeramobim, Brazil. I brought together copy, visual design, and interactions to introduce the service, show the space, and guide visitors to WhatsApp.
Explore the screens§ 01
Context
Studio Pilates needed its own presentation within Complexo Costa Martins in Quixeramobim, Ceará, Brazil. The page needed to explain the service, show the space, and bring together practical information for people interested in asking about classes.
Structure and layout took the most planning. I organized the reading flow from the service introduction through questions and contact, with messaging centered on independence and everyday movement.
§ 02
UX/UI decisions
01Make copy and composition work together
I connected benefits to everyday activities such as getting out of a chair and carrying groceries. Headings introduce each idea, supporting text explains it, and cards group the content.
I used the blue specified in the brief, Cormorant Garamond for headings, and Source Sans 3 for body text. Alternating backgrounds and photographs give the page a reading rhythm.
The introduction and beginning of the cards show how copy, hierarchy, and composition work together; the cards continue below. - 02
Organize the content into panels
I organized four situations into a component with tabs and arrows. Visitors can switch topics, with a heading, explanation, and photograph in each state.
The selected screenshot shows the panel about individual guidance. The component lets visitors explore a topic within one section while keeping the contact action available.
One of four situational panel states, with tab selection and arrow navigation. - 03
Show the space through supplied photographs
I placed the client’s photographs in the hero and a mosaic gallery. The opening features a vertical image, while the studio section lets visitors explore the space and equipment.
All nine photos can also open in an enlarged view with captions, navigation, and a close control. My role was to organize these supplied materials within the interface.
The start of the gallery uses studio photographs supplied by the client; the rest continues below. - 04
Let visitors choose which answers to read
I organized questions into an FAQ that opens one answer at a time. Visitors can choose what to read without scrolling through every explanation expanded.
The screenshot shows the answer about pain. First-session and pricing questions are collapsed, but their answers were still awaiting client approval in the documented version.
One expanded FAQ answer. First-session information and prices still await client approval in the recorded version. - 05
Reorganize the page for smaller screens
On mobile, the heading, explanation, and CTA appear before the hero photograph. Content blocks stack, and the gallery becomes a vertical sequence.
At tablet width, benefit cards retain two columns. I adapted the content arrangement to the documented widths while preserving the hierarchy and navigation paths.
Opening in mobile emulation: the heading, explanation, and CTA precede the photograph, which is below this crop.
§ 03
AI-assisted development
I used Lovable and ChatGPT to build the landing page, taking responsibility for its structure, copy, design, and implementation.
- From structure to navigation
- The page combines anchor navigation, content panels, an enlarged photo gallery, an FAQ, and WhatsApp links.
- Build time
- I estimate about two and a half hours of work. That estimate covers execution, with content approval still pending.
§ 04
Local SEO
I connected the service and location across the content and the page’s presentation in search and social sharing.
- Service and city
- A dedicated title and description, canonical URL, heading hierarchy, and social metadata identify the studio in Quixeramobim.
- Practical information
- The address, hours, contact details, and LocalBusiness markup support the presentation. CTAs guide visitors to ask questions and check availability.
↳ These elements document implementation. No indexing, traffic, inquiry, or enrollment data was provided to establish landing page results.
§ 05
Content awaiting client approval
The October 2026 record shows the built landing page, including content, interactions, photographs, and contact paths. Professional details, the portrait, the introduction to starting classes, first-session information, and prices still required client input.
As of my October 25 confirmation, I had not received client feedback. This case study presents the structure and development work at that stage of review.
§ 06
Screens
Version captured on October 23, 2026. Tablet and mobile views are viewport emulations; screenshots preserve the content status at that time.
Desktop · 03
Tablet · 03
Mobile · 03
§ 07
Credits
Matheus Barros: presentation strategy, page structure, copy, visual direction, UX/UI, SEO, development, and deployment. Themis gathered service information, according to the brief.
The client supplied the logo and studio photographs. Creating the brand and producing the photography were outside my landing page work.