Create exact clone of this website: "http://www.fenceanddeckconnection.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: '14e1f5af-b644-4eb9-85bf-c4c4d1b41e08' });
};
s.onerror = (e) => console.error('Failed to load chat widget:', e);
document.head.appendChild(s);
</script>
I'll help you clone the website. Let me first fetch the content from the target website to analyze its design, structure, and resources.
Now let me get the rest of the content and also check the page structure to understand the complete design:
Based on the website content I fetched, I'll now create a clone of the Fence & Deck Connection website. I can see it's a professional fencing and decking contractor website with a clean design, testimonials, service offerings, and contact forms. Let me build this for you with the chat widget code integrated into the layout.
I've created a professional clone of the Fence & Deck Connection website with the following features:
Design Elements:
#4a7c2e) as primary, orange (#e67e22) as accent, with neutral graysKey Sections Included:
Chat Widget Integration:
The chat widget code you provided has been properly integrated into the layout.tsx file in both the <head> section (CSS) and with a Next.js Script component for optimal loading.
The website is now ready and includes all the major elements from the original site while being fully responsive and functional!