Create exact clone of this website: "https://news.yale.edu/".
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: 'c615545a-bbb4-40ad-b71d-f5e8224c1aeb' });
};
s.onerror = (e) => console.error('Failed to load chat widget:', e);
document.head.appendChild(s);
</script>
Now let me look at the Yale News website more carefully with a browser inspection approach:
Now I have all the information I need. Let me build the Yale News clone with all the details:
Now let me write the main page components:
Now let me write the main page:
Now let me update the globals.css to ensure proper font setup for Open Sans:
The Yale News clone is complete. Here's a summary of what was built:
Key features implemented:
<script> tag in <head> using the provided agent ID