<!-- Chosen Palette: Calm Harmony (Warm Neutrals with Indigo Accent) -->
<!-- Application Structure Plan: A single-page, vertical-scrolling dashboard with a sticky navigation. This structure replaces the linear PPT flow with a logical, user-driven exploration. Key sections (Pain Points, Solution (FAB), Data, ROI) are isolated. The FAB section is interactive (tabs) and the ROI section is a functional calculator, turning a static script into an active sales tool. This is chosen for better user engagement and value demonstration. -->
<!-- Visualization & Content Choices: 1. Pain Points (Slide 2) -> Goal: Empathize -> HTML/CSS Grid Cards -> Interaction: Hover (subtle) -> Justification: Breaks up text, visually engaging. -> Method: Tailwind. 2. FAB (Slides 4-6) -> Goal: Organize Core Value -> JS-powered Tabs -> Interaction: Click to toggle F/A/B content -> Justification: Condenses 3 slides into one interactive block, mirrors user's comparative thinking. -> Method: Vanilla JS. 3. Case Study (Slide 7) -> Goal: Compare (Before/After) -> Grouped Bar Chart -> Interaction: Hover (tooltip) -> Justification: Visually proves the machine's impact on key metrics (Defects, Output). -> Method: Chart.js (Canvas). 4. ROI (Slide 8) -> Goal: Justify Cost -> Interactive Calculator -> Interaction: User Input (form) -> Justification: Transforms a static concept into a personalized tool, high engagement. -> Method: Vanilla JS + HTML Form. -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-g">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S380A Visual PCB Separator Solution</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
html {
scroll-padding-top: 6rem;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
.nav-link.active {
color: #4f46e5;
font-weight: 600;
border-bottom: 2px solid #4f46e5;
}
.fab-tab.active {
background-color: #4f46e5;
color: #ffffff;
}
</style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
<!-- Header & Navigation -->
<header class="bg-white/95 backdrop-blur-sm shadow-md sticky top-0 z-50">
<nav class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<div class="flex-shrink-0">
<span class="text-xl font-bold text-indigo-700">S380A Solution</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#home" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-indigo-600 transition-all duration-300">Home</a>
<a href="#pain-points" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-indigo-600 transition-all duration-300">The Challenge</a>
<a href="#solution" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-indigo-600 transition-all duration-300">Our Solution (FAB)</a>
<a href="#case-study" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-indigo-600 transition-all duration-300">Case Study</a>
<a href="#roi" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-indigo-600 transition-all duration-300">Your ROI</a>
<a href="#contact" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-indigo-600 transition-all duration-300">Next Steps</a>
</div>
</div>
<div class="md:hidden">
<button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-indigo-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</nav>
<div id="mobile-menu" class="md:hidden hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#home" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600">Home</a>
<a href="#pain-points" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600">The Challenge</a>
<a href="#solution" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600">Our Solution (FAB)</a>
<a href="#case-study" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600">Case Study</a>
<a href="#roi" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600">Your ROI</a>
<a href="#contact" class="nav-link block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-indigo-600">Next Steps</a>
</div>
</div>
</header>
<main>
<!-- Section 1: Hero -->
<section id="home" class="bg-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32 text-center">
<h1 class="text-4xl md:text-6xl font-extrabold text-indigo-700 leading-tight">Beyond V-Cut:</h1>
<h2 class="text-3xl md:text-5xl font-extrabold text-gray-800 mt-2">Driving Profitability and Precision in SMT Assembly</h2>
<p class="mt-6 max-w-3xl mx-auto text-lg md:text-xl text-gray-600">
This is not just a new machine. It's a solution to a critical bottleneck every EMS factory faces. Discover the S380A Visual PCB Router and move beyond traditional limitations to improve quality, throughput, and profitability.
</p>
<a href="#solution" class="mt-10 inline-block bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-indigo-700 transition-all duration-300 shadow-lg">Explore the Solution</a>
</div>
</section>
<!-- Section 2: Pain Points -->
<section id="pain-points" class="py-20 bg-gray-100">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center text-gray-900">The High Cost of "Good Enough" Depaneling</h2>
<p class="mt-4 max-w-2xl mx-auto text-center text-lg text-gray-600">
As managers in high-volume EMS facilities, you recognize these challenges. Traditional methods are a direct risk to your reputation and your bottom line, especially with today's thin, densely populated boards.
</p>
<div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<h3 class="text-xl font-semibold text-red-600">High Defect Rates</h3>
<p class="mt-3 text-gray-600">Manual 'hand-breaks' and older V-cut machines introduce significant mechanical stress, leading to micro-cracks in solder joints and component damage, resulting in costly field failures.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<h3 class="text-xl font-semibold text-red-600">Labor Costs & Scalability</h3>
<p class="mt-3 text-gray-600">You face rising labor costs and simply cannot scale manual, operator-dependent processes to meet demand. This creates a critical production bottleneck and limits your factory's growth.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<h3 class="text-xl font-semibold text-red-600">Failing Quality Audits</h3>
<p class="mt-3 text-gray-600">The inability to process complex, non-rectangular PCBs and the risk of hidden defects puts you under constant pressure from end-clients (e.g., Automotive, Medical) for 100% quality.</p>
</div>
</div>
</div>
</section>
<!-- Section 3: Solution (FAB) -->
<section id="solution" class="py-20 bg-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center text-gray-900">The S380A: Precision, Automation, & Throughput</h2>
<p class="mt-4 max-w-2xl mx-auto text-center text-lg text-gray-600">
The S380A is a fully automated, vision-guided routing system. It's designed to solve the three core challenges of modern depaneling. Explore its value by clicking the tabs below.
</p>
<div class="mt-12 max-w-4xl mx-auto">
<!-- FAB Tabs -->
<div id="fab-tabs" class="flex flex-col sm:flex-row justify-center space-y-2 sm:space-y-0 sm:space-x-4">
<button class="fab-tab active px-6 py-3 font-semibold rounded-lg transition-all duration-300 border-2 border-transparent" data-tab="fab1">
1. Precision & Flexibility
</button>
<button class="fab-tab px-6 py-3 font-semibold rounded-lg transition-all duration-300 border-2 border-transparent text-gray-600 hover:text-indigo-600" data-tab="fab2">
2. Automation & Labor
</button>
<button class="fab-tab px-6 py-3 font-semibold rounded-lg transition-all duration-300 border-2 border-transparent text-gray-600 hover:text-indigo-600" data-tab="fab3">
3. Throughput & Efficiency
</button>
</div>
<!-- FAB Content -->
<div class="mt-8 bg-gray-50 p-8 rounded-lg shadow-inner border">
<div id="fab1" class="fab-content">
<h3 class="text-2xl font-bold text-indigo-700">FAB 1: From "High Risk" to "Zero Stress"</h3>
<div class="mt-6 space-y-4">
<p><strong class="text-gray-900">(F) Feature:</strong> High-speed 60,000 RPM spindle and Panasonic A6 servo drives, delivering cutting accuracy of <strong>±0.02mm</strong> and repeat accuracy of <strong>±0.01mm</strong>.</p>
<p><strong class="text-gray-900">(A) Advantage:</strong> This enables 'stress-free' milling of any shape—arcs, circles, L-shapes, and stamp-holes. The routing bit cuts the board cleanly, unlike the 'cracking' force of a V-cut blade, even 0.5mm from components.</p>
<p><strong class="text-gray-900">(B) Benefit:</strong> This <strong>directly reduces your PCB defect rate</strong>, virtually eliminating scrap cost from depaneling. You can confidently process complex, non-rectangular boards for high-value clients and pass the strictest quality audits.</p>
</div>
</div>
<div id="fab2" class="fab-content hidden">
<h3 class="text-2xl font-bold text-indigo-700">FAB 2: From "Complex" to "Automated"</h3>
<div class="mt-6 space-y-4">
<p><strong class="text-gray-900">(F) Feature:</strong> A CCD "whole board" visual programming system with automatic tool height correction and broken tool detection.</p>
<p><strong class="text-gray-900">(A) Advantage:</strong> This 'visual programming' subverts traditional, complex G-code. An operator can simply 'draw' the cut path on the screen. Setup for new jobs is reduced from hours to minutes, with minimal training required.</p>
<p><strong class="text-gray-900">(B) Benefit:</strong> This <strong>slashes your labor costs</strong> and dependency on highly-skilled technicians. It provides true <strong>production line flexibility</strong>, allowing you to quickly switch between high-mix, low-volume models, making those jobs more profitable.</p>
</div>
</div>
<div id="fab3" class="fab-content hidden">
<h3 class="text-2xl font-bold text-indigo-700">FAB 3: From "Idle" to "Continuous Flow"</h3>
<div class="mt-6 space-y-4">
<p><strong class="text-gray-900">(F) Feature:</strong> A dual Y-axis table configuration (Y1 and Y2).</p>
<p><strong class="text-gray-900">(A) Advantage:</strong> This design allows for continuous production. The machine executes cutting on Table Y1 *while* the operator simultaneously unloads/loads Table Y2. The spindle *never* sits idle.</p>
<p><strong class="text-gray-900">(B) Benefit:</strong> This effectively <strong>doubles your production throughput</strong> compared to a single-table machine. It's designed for 24/7 operation, <strong>improving your overall order delivery efficiency</strong> and maximizing your factory's output.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 4: Case Study -->
<section id="case-study" class="py-20 bg-gray-100">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center text-gray-900">Real-World Success: Automotive EMS Provider</h2>
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div>
<p class="text-lg text-gray-600">
A contract manufacturer for automotive sensors was struggling. Their V-cut process was causing a <strong>4.5% defect rate</strong> on complex boards, and they were at risk of losing their Tier-1 client.
</p>
<p class="mt-4 text-lg text-gray-600">
After implementing two S380A machines, their results were transformative. Their defect rate from depaneling fell to <strong>less than 0.5%</strong>. And because of the dual-table system, their line output for that product <strong>increased by 90%</strong>. They not only saved the contract but were able to bid for—and win—new projects.
</p>
</div>
<div>
<div class="chart-container">
<canvas id="caseStudyChart"></canvas>
</div>
<p class="text-center text-sm text-gray-500 mt-2">Interact with the chart to see the data.</p>
</div>
</div>
</div>
</section>
<!-- Section 5: ROI Calculator -->
<section id="roi" class="py-20 bg-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold text-gray-900">What is Your "Cost of Inaction"?</h2>
<p class="mt-4 text-lg text-gray-600">
Use this simple calculator to estimate your potential *monthly* savings by switching from a high-stress process to the S380A. We'll base the "After" defect rate on the case study (<0.5%).
</p>
<div class="mt-10 bg-gray-50 p-8 rounded-lg shadow-inner border max-w-2xl mx-auto text-left">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="scrapRate" class="block text-sm font-medium text-gray-700">Current Scrap Rate (%)</label>
<input type="number" id="scrapRate" value="4.5" class="mt-1 block w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="monthlyVolume" class="block text-sm font-medium text-gray-700">Monthly PCB Volume (units)</label>
<input type="number" id="monthlyVolume" value="50000" class="mt-1 block w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="avgBoardCost" class="block text-sm font-medium text-gray-700">Avg. Cost per Board ($)</label>
<input type="number" id="avgBoardCost" value="15" class="mt-1 block w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="operatorCost" class="block text-sm font-medium text-gray-700">Monthly Labor Savings ($)</label>
<input type="number" id="operatorCost" value="4000" class="mt-1 block w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" placeholder="Cost of re-allocated operator">
</div>
</div>
<button id="calculateRoi" class="w-full mt-8 bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-indigo-700 transition-all duration-300 shadow-lg">
Calculate Potential Savings
</button>
<div class="mt-8 text-center bg-white p-6 rounded-lg border-2 border-indigo-600 shadow-lg">
<h3 class="text-xl font-semibold text-gray-800">Your Estimated Total Monthly Savings:</h3>
<p class="text-4xl font-extrabold text-green-600 mt-2">
<span id="roiResult">$0.00</span>
</p>
</div>
</div>
</div>
</section>
<!-- Section 6: Contact -->
<section id="contact" class="py-20 bg-indigo-700 text-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold">A Partnership for Better Manufacturing</h2>
<p class="mt-4 max-w-2xl mx-auto text-lg text-indigo-100">
We don't just sell a machine; we provide a complete production solution. Let's work together to eliminate this bottleneck for good. Our commitment includes free installation, comprehensive on-site training, and 24/7 global support.
</p>
<div class="mt-10 flex flex-col md:flex-row justify-center items-center gap-6">
<div class="bg-white text-gray-800 p-6 rounded-lg shadow-lg text-left w-full md:w-auto">
<h3 class="text-xl font-bold text-indigo-700">Step 1: Free Analysis</h3>
<p class="mt-2">Schedule a 30-min call to analyze your specific PCB models and production data.</p>
</div>
<div class="bg-white text-gray-800 p-6 rounded-lg shadow-lg text-left w-full md:w-auto">
<h3 class="text-xl font-bold text-indigo-700">Step 2: Custom ROI Report</h3>
<p class="mt-2">We deliver a customized ROI report specifically for your factory's operations.</p>
</div>
<div class="bg-white text-gray-800 p-6 rounded-lg shadow-lg text-left w-full md:w-auto">
<h3 class="text-xl font-bold text-indigo-700">Step 3: Live Demo</h3>
<p class="mt-2">Schedule a live (or virtual) demo for your engineering team to see the S380A in action.</p>
</div>
</div>
<a href="mailto:sales@example.com" class="mt-12 inline-block bg-white text-indigo-700 font-bold py-3 px-10 rounded-lg text-lg hover:bg-gray-100 transition-all duration-300 shadow-lg">
Schedule Your Analysis Call
</a>
</div>
</section>
</main>
<footer class="bg-gray-800 text-gray-400 py-8">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<p>© 2025 [Your Company Name]. All rights reserved.</p>
<p class="mt-1 text-sm">S380A Visual Multifunction PCB Separator Solution</p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Mobile Menu Toggle
const menuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
menuButton.addEventListener('click', () => {
const isHidden = mobileMenu.classList.contains('hidden');
mobileMenu.classList.toggle('hidden', !isHidden);
menuButton.querySelector('svg:first-child').classList.toggle('hidden', !isHidden);
menuButton.querySelector('svg:last-child').classList.toggle('hidden', isHidden);
});
// Smooth Scroll for Nav Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
menuButton.querySelector('svg:first-child').classList.remove('hidden');
menuButton.querySelector('svg:last-child').classList.add('hidden');
}
}
});
});
// Intersection Observer for Nav Highlighting
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-link');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const id = entry.target.getAttribute('id');
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${id}`) {
link.classList.add('active');
}
});
}
});
}, { rootMargin: '-30% 0px -70% 0px' });
sections.forEach(section => {
observer.observe(section);
});
// FAB Tabs Logic
const fabTabsContainer = document.getElementById('fab-tabs');
const fabTabs = fabTabsContainer.querySelectorAll('.fab-tab');
const fabContents = document.querySelectorAll('.fab-content');
fabTabsContainer.addEventListener('click', (e) => {
const clickedTab = e.target.closest('.fab-tab');
if (!clickedTab) return;
const tabId = clickedTab.dataset.tab;
fabTabs.forEach(tab => tab.classList.remove('active'));
clickedTab.classList.add('active');
fabContents.forEach(content => {
if (content.id === tabId) {
content.classList.remove('hidden');
} else {
content.classList.add('hidden');
}
});
});
// Case Study Chart.js
const ctx = document.getElementById('caseStudyChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Defect Rate (%)', 'Production Output (Index)'],
datasets: [
{
label: 'Before S380A (V-Cut)',
data: [4.5, 100],
backgroundColor: 'rgba(239, 68, 68, 0.7)',
borderColor: 'rgba(239, 68, 68, 1)',
borderWidth: 1
},
{
label: 'After S380A (Routing)',
data: [0.5, 190],
backgroundColor: 'rgba(79, 70, 229, 0.7)',
borderColor: 'rgba(79, 70, 229, 1)',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'Case Study: Before vs. After S380A',
font: { size: 16 }
},
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += context.parsed.y;
if (context.label.includes('Defect')) {
label += '%';
}
}
return label;
}
}
}
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Value'
}
}
}
}
});
// ROI Calculator Logic
const calculateButton = document.getElementById('calculateRoi');
calculateButton.addEventListener('click', () => {
const scrapRate = parseFloat(document.getElementById('scrapRate').value) || 0;
const monthlyVolume = parseFloat(document.getElementById('monthlyVolume').value) || 0;
const avgBoardCost = parseFloat(document.getElementById('avgBoardCost').value) || 0;
const operatorCost = parseFloat(document.getElementById('operatorCost').value) || 0;
const newScrapRate = 0.5; // Based on case study
const currentScrapLoss = (scrapRate / 100) * monthlyVolume * avgBoardCost;
const newScrapLoss = (newScrapRate / 100) * monthlyVolume * avgBoardCost;
const monthlyScrapSavings = currentScrapLoss - newScrapLoss;
const totalMonthlySavings = monthlyScrapSavings + operatorCost;
document.getElementById('roiResult').textContent = `$${totalMonthlySavings.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
});
// Trigger calculation on load
calculateButton.click();
});
</script>
</body>
</html>
