Create exact clone of this website: "https://www.yocale.com/en/b/the-mayer-salon?t=services".
Make sure to read all the colour schemes and details carefully. Use target website image links if available, else do not use placeholders at all.
You must add this there:
<link rel="stylesheet" href="https://embeddable-widgets.pages.dev/chat-widget.css" />
<script>
const s = document.createElement('script');
s.src = 'https://embeddable-widgets.pages.dev/chat-widget.umd.js';
s.onload = () => {
console.log('Chat widget script loaded');
window?.ChatWidget?.initChatWidget &&
window.ChatWidget.initChatWidget({ agentId: 'dc0838ef-5d08-4281-8b87-62d2e319f0b6' });
};
s.onerror = (e) => console.error('Failed to load chat widget:', e);
document.head.appendChild(s);
</script>
Let me do a deeper visual inspection of the site to get image URLs and color schemes.
Now I have enough information. Let me build the complete clone with all the details. I'll now read the existing files and build the site.
Now I have all the info I need. Let me build the complete clone:
Now let me build the main components:
Now let me build the main page with tab navigation:
Now let me also add some additional CSS refinements to match the Yocale styling more precisely:
The clone is complete! Here's a summary of what was built:
The Mayer Salon – Yocale Clone faithfully reproduces:
Book Now and phone CTA, salon name, star rating (4.9/5, 390 reviews), address, and expandable description#1abcac active indicator/en/b/the-mayer-salon?t=services URL) with all 6 collapsible categories — Men's Cut (3), Women's Cut (1), Styling (3), Keratin (6), Colour (15), Hair Botox (2) — each showing duration, price, description, and Book buttons<head> using agentId: 'dc0838ef-5d08-4281-8b87-62d2e319f0b6'