Spaces:
Running
Running
Download index.html from serphitech/spt-cnc: direct link, hf CLI and curl.
- Browser
- Download file 57 kB
-
https://huggingface.co/spaces/serphitech/spt-cnc/resolve/main/index.html
- Command line
-
hf download hf://spaces/serphitech/spt-cnc/index.html
-
curl -L -o index.html https://huggingface.co/spaces/serphitech/spt-cnc/resolve/main/index.html
57 kB
| <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"> | |
| © 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> |