spt-cnc / index.html
serphitech's picture
Add 2 files
00549de verified
Raw History Blame Contribute Delete
57 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PrecisionCNC | Industrial CNC Machining Solutions</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom CSS for elements that need more precise control */
.hero-gradient {
background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(30, 64, 175, 0.8) 100%);
}
.machine-card:hover .machine-overlay {
opacity: 1;
transform: translateY(0);
}
.machine-overlay {
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
}
.stats-counter {
transition: all 0.5s ease;
}
.contact-form input, .contact-form textarea {
transition: all 0.3s ease;
}
.contact-form input:focus, .contact-form textarea:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-cogs text-blue-700 text-2xl mr-2"></i>
<span class="text-xl font-bold text-blue-700">Precision<span class="text-blue-500">CNC</span></span>
</div>
<div class="hidden md:ml-10 md:flex md:space-x-8">
<a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
<a href="#machines" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Machines</a>
<a href="#services" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Services</a>
<a href="#industries" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Industries</a>
<a href="#about" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
<a href="#contact" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
Request Quote <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
<div class="pt-2 pb-3 space-y-1">
<a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
<a href="#machines" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Machines</a>
<a href="#services" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Services</a>
<a href="#industries" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Industries</a>
<a href="#about" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a>
<a href="#contact" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Contact</a>
<div class="mt-4 px-4">
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-base font-medium transition duration-300">
Request Quote <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="relative hero-gradient">
<div class="absolute inset-0 overflow-hidden">
<img class="w-full h-full object-cover opacity-20" src="https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="CNC Machine">
</div>
<div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
Precision CNC Machining Solutions
</h1>
<p class="mt-6 max-w-3xl mx-auto text-xl text-blue-100">
Industrial-grade CNC machines engineered for performance, precision, and productivity. Partner with us for your manufacturing needs.
</p>
<div class="mt-10 flex justify-center space-x-4">
<a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-blue-50 transition duration-300">
Contact Sales <i class="fas fa-phone-alt ml-2"></i>
</a>
<a href="#machines" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-500 bg-opacity-60 hover:bg-opacity-70 transition duration-300">
Explore Machines <i class="fas fa-chevron-right ml-2"></i>
</a>
</div>
</div>
</div>
</header>
<!-- Stats Section -->
<section class="bg-gray-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="text-blue-600 text-4xl font-bold stats-counter" data-target="25">0</div>
<div class="mt-2 text-gray-600 font-medium">Years in Business</div>
<i class="fas fa-calendar-alt text-blue-100 text-3xl mt-4"></i>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="text-blue-600 text-4xl font-bold stats-counter" data-target="1500">0</div>
<div class="mt-2 text-gray-600 font-medium">Machines Installed</div>
<i class="fas fa-cogs text-blue-100 text-3xl mt-4"></i>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="text-blue-600 text-4xl font-bold stats-counter" data-target="42">0</div>
<div class="mt-2 text-gray-600 font-medium">Countries Served</div>
<i class="fas fa-globe text-blue-100 text-3xl mt-4"></i>
</div>
<div class="bg-white p-6 rounded-lg shadow-md text-center">
<div class="text-blue-600 text-4xl font-bold stats-counter" data-target="98">0</div>
<div class="mt-2 text-gray-600 font-medium">% Customer Satisfaction</div>
<i class="fas fa-smile text-blue-100 text-3xl mt-4"></i>
</div>
</div>
</div>
</section>
<!-- Machines Section -->
<section id="machines" class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Our CNC Machine Portfolio
</h2>
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
High-performance CNC machines designed for precision manufacturing across industries
</p>
</div>
<div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Machine 1 -->
<div class="group relative bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 machine-card">
<div class="relative h-60 overflow-hidden">
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1597852074816-d933c7d2b988?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Precision Mill 5000">
<div class="absolute inset-0 bg-blue-600 bg-opacity-0 group-hover:bg-opacity-20 transition duration-300"></div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900">Precision Mill 5000</h3>
<p class="mt-2 text-gray-600">5-axis CNC milling machine with advanced automation capabilities</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-blue-600 font-bold">From $85,000</span>
<button class="text-blue-600 hover:text-blue-800 font-medium">
View Details <i class="fas fa-chevron-right ml-1"></i>
</button>
</div>
</div>
<div class="absolute inset-0 bg-white bg-opacity-90 p-6 flex flex-col justify-center machine-overlay">
<h3 class="text-xl font-bold text-gray-900">Precision Mill 5000</h3>
<ul class="mt-4 space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
<span>5-axis simultaneous machining</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
<span>±0.001mm positioning accuracy</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
<span>Automatic tool changer (24 tools)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
<span>High-speed spindle (15,000 RPM)</span>
</li>
</ul>
<button class="mt-6 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
Request Quote
</button>
</div>
</div>
<!-- Machine 2 -->
<div class="group relative bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 machine-card">
<div class="relative h-60 overflow-hidden">
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Titan Turn 3000">
<div class="absolute inset-0 bg-blue-600 bg-opacity-0 group-hover:bg-opacity-20 transition duration-300"></div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900">Titan Turn 3000</h3>
<p class="mt-2 text-gray-600">Heavy-duty CNC lathe for large diameter turning applications</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-blue-600 font-bold">From $120,000</span>
<button class="text-blue-600 hover:text-blue-800 font-medium">
View Details <i class="fas fa-chevron-right ml-1"></i>
</button>
</div>
</div>
<div class="absolute inset-0 bg-white bg-opacity-90 p-6 flex flex-col justify-center machine-overlay">
<h3 class="text-xl font-bold text-gray-900">Titan Turn 3000</h3>
<ul class="mt-4 space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
<span>Max turning diameter: 800mm</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
<span>±0.005mm machining accuracy</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
<span>Live tooling capabilities</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
<span>Y-axis functionality</span>
</li>
</ul>
<button class="mt-6 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
Request Quote
</button>
</div>
</div>
<!-- Machine 3 -->
<div class="group relative bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 machine-card">
<div class="relative h-60 overflow-hidden">
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="SwissCut Pro">
<div class="absolute inset-0 bg-blue-600 bg-opacity-0 group-hover:bg-opacity-20 transition duration-300"></div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900">SwissCut Pro</h3>
<p class="mt-2 text-gray-600">Precision Swiss-type CNC lathe for small, complex parts</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-blue-600 font-bold">From $95,000</span>
<button class="text-blue-600 hover:text-blue-800 font-medium">
View Details <i class="fas fa-chevron-right ml-1"></i>
</button>
</div>
</div>
<div class="absolute inset-0 bg-white bg-opacity-90 p-6 flex flex-col justify-center machine-overlay">
<h3 class="text-xl font-bold text-gray-900">SwissCut Pro</h3>
<ul class="mt-4 space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
<span>Ideal for medical and watch components</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
<span>±0.002mm machining tolerance</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
<span>Automatic bar feeder integration</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
<span>Multi-axis simultaneous machining</span>
</li>
</ul>
<button class="mt-6 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
Request Quote
</button>
</div>
</div>
</div>
<div class="mt-12 text-center">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 transition duration-300">
View Full Machine Catalog <i class="fas fa-chevron-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Comprehensive CNC Services
</h2>
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
End-to-end solutions to support your manufacturing operations
</p>
</div>
<div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Service 1 -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600">
<i class="fas fa-tools text-xl"></i>
</div>
<h3 class="mt-4 text-lg font-medium text-gray-900">Machine Installation</h3>
<p class="mt-2 text-gray-600">
Professional installation and calibration by certified technicians to ensure optimal performance from day one.
</p>
</div>
<!-- Service 2 -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600">
<i class="fas fa-graduation-cap text-xl"></i>
</div>
<h3 class="mt-4 text-lg font-medium text-gray-900">Operator Training</h3>
<p class="mt-2 text-gray-600">
Comprehensive training programs tailored to your team's needs, from basic operation to advanced programming.
</p>
</div>
<!-- Service 3 -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600">
<i class="fas fa-wrench text-xl"></i>
</div>
<h3 class="mt-4 text-lg font-medium text-gray-900">Maintenance Contracts</h3>
<p class="mt-2 text-gray-600">
Preventative maintenance plans to maximize uptime and extend the lifespan of your CNC equipment.
</p>
</div>
<!-- Service 4 -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600">
<i class="fas fa-cogs text-xl"></i>
</div>
<h3 class="mt-4 text-lg font-medium text-gray-900">Retrofitting & Upgrades</h3>
<p class="mt-2 text-gray-600">
Modernize older machines with new controls, drives, and software to improve performance and capabilities.
</p>
</div>
<!-- Service 5 -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600">
<i class="fas fa-headset text-xl"></i>
</div>
<h3 class="mt-4 text-lg font-medium text-gray-900">24/7 Technical Support</h3>
<p class="mt-2 text-gray-600">
Around-the-clock assistance from our team of CNC experts to minimize downtime and keep you running.
</p>
</div>
<!-- Service 6 -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600">
<i class="fas fa-boxes text-xl"></i>
</div>
<h3 class="mt-4 text-lg font-medium text-gray-900">Spare Parts Supply</h3>
<p class="mt-2 text-gray-600">
Genuine replacement parts with fast global shipping to keep your operations moving forward.
</p>
</div>
</div>
</div>
</section>
<!-- Industries Section -->
<section id="industries" class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Industries We Serve
</h2>
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
Our CNC solutions power manufacturing across diverse sectors
</p>
</div>
<div class="mt-12">
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Industry 1 -->
<div class="group relative rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 h-64">
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Aerospace">
<div class="absolute inset-0 bg-blue-600 bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
<div class="text-center p-6">
<h3 class="text-xl font-bold text-white">Aerospace</h3>
<p class="mt-2 text-blue-100">
High-precision machining for aircraft components with strict tolerances and complex geometries.
</p>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-4">
<h3 class="text-lg font-bold text-gray-900">Aerospace</h3>
</div>
</div>
<!-- Industry 2 -->
<div class="group relative rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 h-64">
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1581093057307-9b4d162900f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Medical">
<div class="absolute inset-0 bg-blue-600 bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
<div class="text-center p-6">
<h3 class="text-xl font-bold text-white">Medical</h3>
<p class="mt-2 text-blue-100">
Precision machining for surgical instruments, implants, and diagnostic equipment.
</p>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-4">
<h3 class="text-lg font-bold text-gray-900">Medical</h3>
</div>
</div>
<!-- Industry 3 -->
<div class="group relative rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 h-64">
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1581094271900-2f9200a52a1c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Automotive">
<div class="absolute inset-0 bg-blue-600 bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
<div class="text-center p-6">
<h3 class="text-xl font-bold text-white">Automotive</h3>
<p class="mt-2 text-blue-100">
High-volume production of engine components, transmission parts, and chassis elements.
</p>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-4">
<h3 class="text-lg font-bold text-gray-900">Automotive</h3>
</div>
</div>
<!-- Industry 4 -->
<div class="group relative rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 h-64">
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1581093057921-892ce5a12456?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Energy">
<div class="absolute inset-0 bg-blue-600 bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
<div class="text-center p-6">
<h3 class="text-xl font-bold text-white">Energy</h3>
<p class="mt-2 text-blue-100">
Machining solutions for oil & gas, wind, and nuclear energy applications.
</p>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-4">
<h3 class="text-lg font-bold text-gray-900">Energy</h3>
</div>
</div>
<!-- Industry 5 -->
<div class="group relative rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 h-64">
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1581094271900-2f9200a52a1c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Defense">
<div class="absolute inset-0 bg-blue-600 bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
<div class="text-center p-6">
<h3 class="text-xl font-bold text-white">Defense</h3>
<p class="mt-2 text-blue-100">
Secure manufacturing solutions for military and defense applications.
</p>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-4">
<h3 class="text-lg font-bold text-gray-900">Defense</h3>
</div>
</div>
<!-- Industry 6 -->
<div class="group relative rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 h-64">
<img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1581094271900-2f9200a52a1c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="General Manufacturing">
<div class="absolute inset-0 bg-blue-600 bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
<div class="text-center p-6">
<h3 class="text-xl font-bold text-white">General Manufacturing</h3>
<p class="mt-2 text-blue-100">
Versatile CNC solutions for a wide range of industrial manufacturing needs.
</p>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-4">
<h3 class="text-lg font-bold text-gray-900">General Manufacturing</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
<div class="relative">
<img class="w-full rounded-lg shadow-lg" src="https://images.unsplash.com/photo-1581094271900-2f9200a52a1c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Facility">
<div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-md">
<div class="text-3xl font-bold text-blue-600">25+</div>
<div class="text-gray-600">Years Experience</div>
</div>
</div>
<div class="mt-10 lg:mt-0">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
About PrecisionCNC
</h2>
<p class="mt-4 text-lg text-gray-600">
Founded in 1998, PrecisionCNC has grown from a small machine shop to a global leader in CNC machine manufacturing and solutions. Our commitment to innovation, quality, and customer service has made us the trusted partner for manufacturers worldwide.
</p>
<div class="mt-8 space-y-4">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-check-circle text-blue-500"></i>
</div>
<div class="ml-3">
<p class="text-lg text-gray-600">
<span class="font-bold">ISO 9001:2015 Certified</span> - Rigorous quality management system
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-check-circle text-blue-500"></i>
</div>
<div class="ml-3">
<p class="text-lg text-gray-600">
<span class="font-bold">150+ Employees</span> - Skilled engineers, technicians, and support staff
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-check-circle text-blue-500"></i>
</div>
<div class="ml-3">
<p class="text-lg text-gray-600">
<span class="font-bold">Global Support Network</span> - Service centers in 15 countries
</p>
</div>
</div>
</div>
<div class="mt-8">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 transition duration-300">
Learn More About Us <i class="fas fa-chevron-right ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
What Our Clients Say
</h2>
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
Trusted by manufacturers across industries worldwide
</p>
</div>
<div class="mt-12">
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Testimonial 1 -->
<div class="bg-gray-50 p-6 rounded-lg shadow-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sarah Johnson">
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4>
<p class="text-gray-500">Director of Manufacturing, AeroTech</p>
</div>
</div>
<div class="mt-4">
<p class="text-gray-600 italic">
"The PrecisionMill 5000 has transformed our aerospace component production. We've seen a 40% increase in throughput while maintaining our strict quality standards. Their support team is exceptional."
</p>
</div>
<div class="mt-4 flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-gray-50 p-6 rounded-lg shadow-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Michael Chen">
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">Michael Chen</h4>
<p class="text-gray-500">Operations Manager, MedInstruments</p>
</div>
</div>
<div class="mt-4">
<p class="text-gray-600 italic">
"We've been using PrecisionCNC machines for 8 years across three facilities. Their reliability and precision are unmatched in medical device manufacturing. The SwissCut Pro is perfect for our small implant components."
</p>
</div>
<div class="mt-4 flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-gray-50 p-6 rounded-lg shadow-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="David Müller">
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-gray-900">David Müller</h4>
<p class="text-gray-500">Production Director, AutoParts EU</p>
</div>
</div>
<div class="mt-4">
<p class="text-gray-600 italic">
"The Titan Turn 3000 handles our high-volume automotive parts with ease. We've reduced our machining time by 25% while improving surface finish quality. PrecisionCNC's European service center provides excellent support."
</p>
</div>
<div class="mt-4 flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="bg-blue-700">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
<span class="block">Ready to upgrade your manufacturing capabilities?</span>
<span class="block text-blue-200">Contact our CNC experts today.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<div class="inline-flex rounded-md shadow">
<a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 transition duration-300">
Get in Touch <i class="fas fa-envelope ml-2"></i>
</a>
</div>
<div class="ml-3 inline-flex rounded-md shadow">
<a href="tel:+18005551234" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 bg-opacity-60 hover:bg-opacity-70 transition duration-300">
Call Now <i class="fas fa-phone-alt ml-2"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-2 lg:gap-16">
<div>
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
Contact Us
</h2>
<p class="mt-4 text-lg text-gray-600">
Have questions about our CNC machines or services? Our team is ready to help you find the right solution for your manufacturing needs.
</p>
<div class="mt-8">
<div class="flex items-start">
<div class="flex-shrink-0">
<i class="fas fa-map-marker-alt text-blue-500 text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Headquarters</h3>
<p class="mt-1 text-gray-600">123 Industrial Park Drive<br>Springfield, ST 12345<br>United States</p>
</div>
</div>
<div class="mt-6 flex items-start">
<div class="flex-shrink-0">
<i class="fas fa-phone-alt text-blue-500 text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Phone</h3>
<p class="mt-1 text-gray-600">+1 (800) 555-1234<br>Mon-Fri, 8am-6pm EST</p>
</div>
</div>
<div class="mt-6 flex items-start">
<div class="flex-shrink-0">
<i class="fas fa-envelope text-blue-500 text-xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Email</h3>
<p class="mt-1 text-gray-600">sales@precisioncnc.com<br>support@precisioncnc.com</p>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="text-lg font-medium text-gray-900">Global Offices</h3>
<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
<div class="bg-white p-4 rounded-lg shadow-sm">
<h4 class="font-medium text-gray-900">Europe</h4>
<p class="mt-1 text-sm text-gray-600">Berlin, Germany<br>+49 30 1234567</p>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm">
<h4 class="font-medium text-gray-900">Asia</h4>
<p class="mt-1 text-sm text-gray-600">Shanghai, China<br>+86 21 12345678</p>
</div>
</div>
</div>
</div>
<div class="mt-12 lg:mt-0">
<div class="bg-white py-8 px-6 shadow rounded-lg sm:px-10 contact-form">
<h3 class="text-xl font-bold text-gray-900 mb-6">Send Us a Message</h3>
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
<div class="mt-1">
<input id="name" name="name" type="text" required class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
<div>
<label for="company" class="block text-sm font-medium text-gray-700">Company</label>
<div class="mt-1">
<input id="company" name="company" type="text" required class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<div class="mt-1">
<input id="email" name="email" type="email" required class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700">Phone</label>
<div class="mt-1">
<input id="phone" name="phone" type="tel" class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
<div>
<label for="interest" class="block text-sm font-medium text-gray-700">I'm interested in</label>
<div class="mt-1">
<select id="interest" name="interest" class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option>CNC Machines</option>
<option>Service & Support</option>
<option>Spare Parts</option>
<option>Training</option>
<option>Other</option>
</select>
</div>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700">Message</label>
<div class="mt-1">
<textarea id="message" name="message" rows="4" class="w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300">
Send Message <i class="fas fa-paper-plane ml-2"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2">
<div class="flex items-center">
<i class="fas fa-cogs text-blue-500 text-2xl mr-2"></i>
<span class="text-xl font-bold text-white">Precision<span class="text-blue-400">CNC</span></span>
</div>
<p class="mt-4 text-gray-400">
Industrial CNC machining solutions for precision manufacturing across aerospace, medical, automotive, and energy industries.
</p>
<div class="mt-6 flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
<div>
<h3 class="text-sm font-semibold text-white tracking-wider uppercase">Products</h3>
<div class="mt-4 space-y-4">
<a href="#" class="text-base text-gray-400 hover:text-white block">CNC Mills</a>
<a href="#" class="text-base text-gray-400 hover:text-white block">CNC Lathes</a>
<a href="#" class="text-base text-gray-400 hover:text-white block">Swiss Machines</a>
<a href="#" class="text-base text-gray-400 hover:text-white block">Automation</a>
</div>
</div>
<div>
<h3 class="text-sm font-semibold text-white tracking-wider uppercase">Company</h3>
<div class="mt-4 space-y-4">
<a href="#" class="text-base text-gray-400 hover:text-white block">About Us</a>
<a href="#" class="text-base text-gray-400 hover:text-white block">Careers</a>
<a href="#" class="text-base text-gray-400 hover:text-white block">News</a>
<a href="#" class="text-base text-gray-400 hover:text-white block">Contact</a>
</div>
</div>
</div>
<div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
<p class="text-gray-400 text-sm">
&copy; 2023 PrecisionCNC. All rights reserved.
</p>
<div class="mt-4 md:mt-0 flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Sitemap</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Animate stats counters
function animateCounters() {
const counters = document.querySelectorAll('.stats-counter');
const speed = 200;
counters.forEach(counter => {
const target = +counter.getAttribute('data-target');
const count = +counter.innerText;
const increment = target / speed;
if(count < target) {
counter.innerText = Math.ceil(count + increment);
setTimeout(animateCounters, 1);
} else {
counter.innerText = target;
}
});
}
// Intersection Observer for counter animation
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
animateCounters();
observer.unobserve(entry.target);
}
});
}, {threshold: 0.5});
// Observe the stats section
const statsSection = document.querySelector('.bg-gray-50');
if(statsSection) {
observer.observe(statsSection);
}
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if(targetId === '#') return;
const targetElement = document.querySelector(targetId);
if(targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
if(!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=serphitech/spt-cnc" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>