Gyamera Aesthetics

Six months after launching the Chic Curls link-in-bio, the studio rebranded completely — new name, new identity, new location. Gyamera Aesthetics called for more than a find-and-replace.

The rebrand became the trigger for a deeper conversation about what the platform was missing. The original page was lean by design: social links, a booking button, hours, a price list, and a WhatsApp-integrated booking flow. It worked. But the client had grown — new location, new name, a TikTok presence generating traffic from people who had never heard of the studio before. First-time visitors from TikTok need more than a booking button. They need proof.

The upgrade ran on two tracks simultaneously: visual identity overhaul and functional architecture expansion. Neither track could wait for the other.

Four clear requirements came out of the briefing.

Rebrand everything. New name (Gyamera Aesthetics), new colour palette, new profile image, new location (Sakumono / Spintex), updated social handles. TikTok added as a third social channel. The Snapchat handle preserved in markup but hidden until it goes live.

Add real slot blocking. The original booking flow sent a WhatsApp message and trusted the studio to manage conflicts manually. Two clients could request the same slot at the same time with nothing to prevent it. This needed to be solved — without introducing a traditional backend, a paid service, or anything that required ongoing infrastructure maintenance.

Expand the content layer. Before/after gallery, client reviews, an FAQ, and aftercare guidance. These are the trust signals that convert a visitor who found the page through TikTok rather than a warm referral. Someone arriving cold from a viral video doesn't have the same context as a client referred by a friend — they need the page to do more work.

Make it installable. The page should live on a client's home screen like an app, open without browser chrome, and stay fast on a slow connection.

The pink gradient palette — #FFE5EC to #FF6B9D — was retired entirely. The new system is built from four values: #b6a593 (warm taupe), #f9e8bf (champagne), #ded6c3 (sandy beige), and #ffffff.

The background moved from gradient to a single flat #b6a593, with the card container becoming a clean white surface against it. The shift in register is deliberate: away from "beauty brand pink" and toward something quieter and more elevated. The palette reads as skincare, not candy — appropriate for a studio moving upmarket with its rebrand.

The rebrand touched every layer of the CSS: all six colour variables, every rgba() reference (seventeen distinct opacity values across the codebase), hardcoded hex values inside modal components, and gradient declarations. The title font size was pulled from 3rem to 2.2rem desktop and 1.8rem mobile to accommodate the longer brand name without overflow.

TikTok (ms.gyameraaa) was added as the third social channel alongside Instagram and WhatsApp. The Snapchat link was preserved in markup but hidden via a .social-link-hidden CSS class — a deliberate choice to keep the handle ready without surfacing it before it's active.

The core infrastructure problem — duplicate slot booking — was solved without a traditional server, database, or paid service.

Google Sheets holds all booking records. Column structure: Submitted timestamp, Date, Time, Service, Price, Name, Phone, Notes, Status. The studio already knew how to use Google Sheets. No new tooling to learn.

Google Apps Script sits in front of it as a deployed web app, exposing two GET endpoints: ?action=getBlocked returns a date-keyed map of confirmed time slots, and ?action=save appends a pending booking row.

On booking modal open, the site fetches all blocked slots for the next 14 days in a single request, caches the result in memory, and uses it to grey out unavailable times in the calendar. If the fetch hasn't resolved by the time a user reaches the time selection step, a CSS spinner holds the view and slots render automatically when loading completes. The status workflow maps to a dropdown in the sheet with three values — pending, confirmed, declined. Changing a row to confirmed is the only action required to block that slot for all future visitors. No dashboard, no admin panel, no additional tooling.

Two non-obvious implementation details required specific fixes. Google Sheets auto-converts time strings like "3:30 PM" to internal time values — reading them back with String(row[2]) produces a date-formatted string, not the original value. A toTimeStr() function using Utilities.formatDate(value, 'GMT', 'h:mm a') recovers the display format. Similarly, date cells require the spreadsheet's own timezone in formatDate to prevent day-boundary shifts.

The original page was built for clients who already knew the studio. The upgrade was built for clients who didn't.

Before & After Gallery. Six slots in a 3-column grid (2-column on mobile), each a styled placeholder awaiting a photo. Replacing a placeholder with an img tag is the only publishing step required — all styling applies automatically.

Aftercare Tips. Six tips in a 2-column responsive grid. Practical information that reduces post-appointment messages and signals professional knowledge to a first-time visitor sizing up whether to book.

FAQ. Six questions in an accordion pattern. One item open at a time. Smooth max-height transition with a rotating + icon as the state indicator. The questions answer what previously arrived as DMs: duration, longevity, how to prepare, mascara compatibility, the difference between set types. Every answered DM that doesn't need to be sent is friction removed from the booking path.

Client Reviews. Three review cards with star ratings. Real testimonials replace the placeholder copy in a single HTML edit — the layout and styling are already built.

The original booking flow surfaced errors via a branded modal after a user tapped Next. The upgraded version adds inline field-level validation on the contact details step.

Name: required, minimum 2 characters. Phone: required, Ghana format regex — /^(\+233|0)[2-9]\d{8}$/ — covering MTN, Telecel, and AirtelTigo prefixes with an optional country code prefix.

Errors render directly beneath the offending field, with a red border state on the input itself. Each field clears its error on first keystroke via input event listeners attached when the modal opens — no lingering red after the user has started correcting.

Steps 1–3 (service, date, and time selection) retain the error modal pattern, because those are selection failures rather than input failures. The distinction keeps inline validation where it adds clarity and avoids applying it where it would be noise.

Three additions make the site installable and offline-capable.

manifest.webmanifest declares the app name (Gyamera Aesthetics), short name (Gyamera), theme colour (#b6a593), standalone display mode, and icon references. Standalone mode removes browser chrome on launch — the site opens like a native app.

sw.js implements a tiered caching strategy: core assets (index.html, logo, favicon) are pre-cached on service worker install; Google Fonts binaries are cached on first load; the booking API (Google Apps Script) and the Fonts stylesheet always bypass the cache to ensure live data and up-to-date font loading; everything else is cache-first with a network fallback. A client on a slow connection sees a working interface, not a blank screen.

Service worker registration runs after page load with a silent catch — no error surfacing if the browser doesn't support it. The PWA layer is an enhancement, not a dependency.

The PWA functions only over HTTPS. On Chrome for Android, the install prompt appears after two visits. On iOS Safari — the primary device for a Ghanaian beauty clientele — users can add to Home Screen manually. The apple-mobile-web-app-capable and apple-touch-icon meta tags ensure the site launches without browser chrome and uses the correct icon.

Safari — and all iOS browsers, which share the WebKit engine — requires -webkit-backdrop-filter alongside backdrop-filter. All three modals (booking, success, error) were updated with the vendor prefix. This was a targeted fix for the primary device type in the market; an oversight here would have broken the experience for the majority of users.

Every button element received an explicit type="button" attribute, preventing unintended form submission behaviour in any browser. All inline styles that had accumulated across the codebase were extracted to named CSS classes: .footer-sub, .footer-brand, .time-closed, .btn-full. The Open/Closed badge and its pulse animation were implemented as CSS classes rather than JavaScript-injected styles — keeping the visual logic where it belongs and making it overridable without touching script.

Open/Closed Indicator. A badge in the header reflects live studio status based on working hours. Ghana operates at UTC+0 with no daylight saving, so getUTCHours() gives local time directly — no timezone library needed. The badge updates every 60 seconds via setInterval. Monday–Friday open window: 15:30–20:00. Saturday: 08:00–20:00. Sunday: always closed.

The platform moved from a styled WhatsApp redirect to a functional booking system with a real data layer. Slot blocking is now enforced — confirmed bookings in the Google Sheet are invisible to future visitors at those times. Double-booking is no longer a manual coordination problem.

The content expansion gives a first-time visitor from TikTok or Instagram enough to decide without a prior conversation: before/after results, real client reviews, clear answers to the questions they were going to DM anyway, and aftercare guidance that signals competence before the appointment starts.

The PWA layer means repeat clients can add the page to their home screen and access it at app speed, even on a slow connection. The rebrand — new name, new palette, new location — is reflected consistently across every layer of the product.

The entire stack remains zero-cost at current booking volume. Google Sheets and Apps Script are free. Vercel's free tier handles deployment. The PWA runs client-side. The studio gets a product that performs like a custom-built booking platform without the infrastructure cost of one.

The original Chic Curls page was the right product for February 2026. A lean, fast, WhatsApp-integrated booking tool for a studio whose audience already knew it. The brief was narrow on purpose — solve the booking problem, don't over-engineer.

Gyamera Aesthetics is the same product six months later, with different constraints. The studio is bigger, the name is new, and the audience now includes people who have never heard of it. The content layer that wasn't needed in February became essential in May — not because the original was wrong, but because the studio had outgrown it.

The right time to add the gallery, reviews, and FAQ was when there was an audience that needed them. Building them into v1 would have been speculation. Building them now was a response to evidence. That's the sequence: ship what solves the problem today, then add what the growth of the product reveals you need.