Create exact clone of this website: "https://www.phillips66.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: 'ef074137-ab21-4a0d-8046-cedb1a330374' });
};
s.onerror = (e) => console.error('Failed to load chat widget:', e);
document.head.appendChild(s);
</script>
I'll help you create a clone of the Phillips 66 website. Let me start by fetching the website content to analyze its design, structure, and styling.
Now let me generate design inspiration to understand the visual style better, then create the clone:
Now let me check the current project structure and create the Phillips 66 clone:
Now let me update the layout to include the chat widget script and create the Phillips 66 clone:
Now let me create the main page component with the Phillips 66 design:
I've successfully created a clone of the Phillips 66 website with all the key features:
What I've built:
Design features:
#003DA5) and red (#E31937) color scheme matching Phillips 66 brandingThe site maintains the professional energy industry aesthetic while being fully responsive and interactive!