Create exact clone of this website: "https://www.circlesatwrenway.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: '344b875a-4001-4960-ad77-4e0c946945bc' });
};
s.onerror = (e) => console.error('Failed to load chat widget:', e);
document.head.appendChild(s);
</script>
Now I have a good picture of the website. Let me build the full clone with all sections, colors, images, and the chat widget.
Now let me build all the components and the main page:
Now let me verify the layout file has everything correct:
The fonts imported from next/font/google need to be applied to the body via CSS variables. Let me fix that:
The full CIRCLES at Wrenway clone is now complete. Here's a summary of everything built:
W logo, smooth-scroll navigation links, a gold "Request a Tour" CTA button, and a responsive mobile hamburger menu<Script> in layout.tsx with your exact agentId, plus the CSS link in <head>