Create exact clone of this website: "https://www.sci-corp.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: '4fb7ba0c-efb9-49a0-869c-57a98162b283' });
};
s.onerror = (e) => console.error('Failed to load chat widget:', e);
document.head.appendChild(s);
</script>
Now let me look at the actual page source to find image URLs and styles:
Now I have enough information. Let me build the complete clone:
Now I have everything I need. Let me build the full clone:
Now let me create all the components and the main page:
Now let's create the main page:
Now let me verify all files look correct and add some finishing touches:
The layout looks perfect. The clone is complete. Here's a summary of everything built:
The complete clone of sci-corp.com has been built with the following components:
| File | Description |
|---|---|
app/layout.tsx | Lato + Playfair Display fonts, SEO metadata, chat widget injection |
app/globals.css | SCI brand color tokens (navy #1a2e4a, gold #c9a84c) |
components/sci/Header.tsx | Top utility bar, sustainability banner, main nav with mobile hamburger |
components/sci/Hero.tsx | Full-width hero with left gradient overlay, GPTW badge row |
components/sci/WhoWeAre.tsx | 3-column card grid: About Us, Careers, Investors |
components/sci/Testimonial.tsx | Dark navy quote block with Joe Eagan testimonial |
components/sci/GetToKnow.tsx | 4-panel image grid: Our People, Corporate Responsibility, Why Work at SCI, Latest News |
components/sci/Brands.tsx | Trusted brands logo strip + "View Our Full Family of Brands" CTA |
components/sci/Footer.tsx | 4-column footer with legal text and copyright |
#1a2e4a, Gold #c9a84c, white/gray neutrals — exact to the source<head> with your agentId: 4fb7ba0c-efb9-49a0-869c-57a98162b283onError fallbacks so no broken placeholders appear