Create exact clone of this website: "https://www.awesomealleys.com".
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: '6414be24-c201-4db4-90a0-83b9746fb921' });
};
s.onerror = (e) => console.error('Failed to load chat widget:', e);
document.head.appendChild(s);
</script>
I'll help you create an exact clone of the Awesome Alleys website. Let me first inspect and fetch the website to understand its design, layout, and content.
I can see the Awesome Alley website. Now I'll create an exact clone with all the design elements, colors, fonts, and layout. I'll include the chat widget script you provided in the layout.
I've created an exact clone of the Awesome Alley website with all the key design elements preserved: the purple color scheme, maroon buttons, wave dividers, bowling alley imagery, and the complete layout structure. The chat widget script and stylesheet have been integrated into the layout header as requested. All images are linked directly from the original website, and the site maintains the same visual hierarchy, spacing, and brand identity.
Fixed the globals.css file to include all required shadcn/ui variables and sidebar-related CSS properties while maintaining the Awesome Alley color scheme.