Create exact clone of this website: "www.aiguyjohn.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: '47d3a2f6-ed3e-44f5-a369-87f6ba328df4' });
};
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 www.aiguyjohn.com. Let me first fetch the website to analyze its design, layout, colors, and content.
Now let me check the project structure to understand what files exist:
Let me read the current layout and page files:
Now I'll create the exact clone of the aiguyjohn.com website. Based on the content, I can see it's a landing page for AI automation services with sections for different offerings. Let me create the page with the proper styling and structure:
Now let me create the main page with all the sections:
Now let me add the custom animations to the globals.css:
I've successfully created an exact clone of the aiguyjohn.com website. Here's what I've implemented:
Service Cards - Four main offerings:
The design uses a minimalist black and white color scheme with white text on black background, rounded buttons, and smooth hover transitions on the cards. All animations are implemented with custom CSS keyframes for the marquee effects.