Create exact clone of this website: "https://www.drkfoundation.org".
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: '8cad39d0-111d-4038-939d-f5e8faa7246b' });
};
s.onerror = (e) => console.error('Failed to load chat widget:', e);
document.head.appendChild(s);
</script>
Now I have enough context. Let me build the complete DRK Foundation website clone.
Now let me update the globals.css to add the correct CSS variables for the --drk-mid-green that's referenced in some components:
Now let me also verify the layout file is correctly referencing the font variables in globals.css:
The DRK Foundation clone is complete! Here's a summary of what was built:
Script in layout.tsx with the provided agent ID