Create a responsive and professional website for the corporate site of **WEOT** (weot.com.br), a company specialized in the integration and orchestration of advanced technologies for critical operations in sectors including manufacturing, automotive, logistics, mining, oil & gas, and healthcare. Please follow the guidelines below rigorously: ### 🎯 **General Website Objectives** * Clearly showcase integrated technological solutions aimed at lead generation. * Facilitate intuitive navigation with optimized menus and footer. * Improve website performance and SEO through a clean, modern, and agile structure. * Utilize strategic banners with effective CTAs and dynamic content (embedded YouTube videos). * Ensure an outstanding mobile browsing experience. --- ### 🧭 **Main Menu Structure** * **Solutions** * Manufacturing * Automotive * Logistics * Mining * Oil & Gas * Healthcare * **Services** * Projects * Equipment Rental * Technology Assessment * Wireless Site Survey * **Products** * **Hardware:** Assisted Reality Glasses, Machine Vision, RFID/IoT, Tablets/Laptops, Data Collectors, Industrial Printers. * **Software:** Remote Assistance, Digital Workflow, Video Analytics with AI. * **News** * **Success Cases** * **Contact** (Remove Newsletter permanently) --- ### 📍 **Visual Style and UX/UI** * Clean, minimalist, and corporate design with technological and industrial inspiration. * Smooth, fluid, and dynamic transitions between sections and pages (reference: automotive sector). * Balanced spacing between text, images, and videos. * Clear and objective content formatting, utilizing subtitles, bullet-point lists, and short paragraphs. * Colors and typography aligned with the current branding (predominantly dark blue, light gray, and white), in accordance with WEOT's existing visual identity ([current logo](https://weot.com.br)). --- ### 📌 **Solution Pages** For each sector-specific page (manufacturing, automotive, logistics, mining, oil & gas, healthcare): * Modular and dynamic structure: 1. **Introductory section with visually impactful banner and CTA.** 2. **Brief descriptive text highlighting key benefits in bullet points.** 3. **Embedded videos directly from WEOT's YouTube channel.** 4. **Alternating visual blocks featuring text, images, and videos to maintain user engagement.** --- ### 📢 **Strategic Banner Usage** * Employ attractive banners with direct CTAs and concise text. * Integrate sector-specific representative images or short videos. * Ensure visual consistency aligned with the brand identity. --- ### 📐 **Optimized Footer** * Organized grouping of useful links: Solutions, Services, Success Cases. * Clear and prominent display of the company's contact number. * Modern monochrome icons for social media (LinkedIn, YouTube, Instagram, Facebook). * Remove any unnecessary text to prioritize visual clarity. --- ### ⚙️ **SEO and Performance** * Structure designed for easy subsequent implementation of: * Lazy loading for images and videos. * Automatic media compression (WebP format). * Preparation for simplified insertion of semantic HTML5 tags. * Clearly defined space for structured metadata inclusion (Schema.org). * Preparation for future easy integration of Sitemap XML, Robots.txt, and breadcrumbs. --- ### 📈 **Expected Outcomes** * Deliver a comprehensive prototype with fully responsive screens (desktop and mobile). * Facilitate subsequent fast and straightforward implementation in WordPress. * Offer smooth navigation, rapid loading speeds, and a clear focus on commercial lead generation. --- ### 🚀 **Visual References** Refer to the current layout examples available at (weot.com.br). --- ### 🔑 **Prototype Deliverables** * Interactive wireframe featuring homepage, main menu, solution pages (e.g., automotive), and optimized footer. * Complete responsive visualizations (mobile, tablet, desktop). This prototype should serve as a robust foundation for a practical, agile, and efficient future WordPress implementation, aimed at optimizing performance, user experience, and strategic results in SEO and digital marketing for WEOT. - Initial Deployment
5a42646 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WEOT - Technology Integration & Orchestration</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); | |
| } | |
| .sector-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.25%; | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #3b82f6; | |
| transition: width .3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .mobile-menu { | |
| transition: all 0.3s ease-in-out; | |
| max-height: 0; | |
| overflow: hidden; | |
| } | |
| .mobile-menu.open { | |
| max-height: 1000px; | |
| } | |
| .hamburger { | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .hamburger.open .hamburger-line:nth-child(1) { | |
| transform: rotate(45deg) translate(5px, 5px); | |
| } | |
| .hamburger.open .hamburger-line:nth-child(2) { | |
| opacity: 0; | |
| } | |
| .hamburger.open .hamburger-line:nth-child(3) { | |
| transform: rotate(-45deg) translate(7px, -6px); | |
| } | |
| .hamburger-line { | |
| transition: all 0.3s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <a href="#"> | |
| <img src="https://weot.com.br/wp-content/uploads/2022/05/logo-weot.png" alt="WEOT Logo" class="h-10"> | |
| </a> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <div class="group relative"> | |
| <button class="nav-link font-medium text-gray-700 hover:text-blue-600 flex items-center"> | |
| Solutions <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden group-hover:block"> | |
| <a href="#manufacturing" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Manufacturing</a> | |
| <a href="#automotive" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Automotive</a> | |
| <a href="#logistics" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Logistics</a> | |
| <a href="#mining" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Mining</a> | |
| <a href="#oil-gas" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Oil & Gas</a> | |
| <a href="#healthcare" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Healthcare</a> | |
| </div> | |
| </div> | |
| <div class="group relative"> | |
| <button class="nav-link font-medium text-gray-700 hover:text-blue-600 flex items-center"> | |
| Services <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden group-hover:block"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Projects</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Equipment Rental</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Technology Assessment</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Wireless Site Survey</a> | |
| </div> | |
| </div> | |
| <div class="group relative"> | |
| <button class="nav-link font-medium text-gray-700 hover:text-blue-600 flex items-center"> | |
| Products <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="absolute left-0 mt-2 w-64 bg-white rounded-md shadow-lg py-1 z-10 hidden group-hover:block"> | |
| <div class="px-4 py-2 font-medium text-gray-500">Hardware</div> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Assisted Reality Glasses</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Machine Vision</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">RFID/IoT</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Tablets/Laptops</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Data Collectors</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Industrial Printers</a> | |
| <div class="border-t my-1"></div> | |
| <div class="px-4 py-2 font-medium text-gray-500">Software</div> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Remote Assistance</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Digital Workflow</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Video Analytics with AI</a> | |
| </div> | |
| </div> | |
| <a href="#" class="nav-link font-medium text-gray-700 hover:text-blue-600">News</a> | |
| <a href="#" class="nav-link font-medium text-gray-700 hover:text-blue-600">Success Cases</a> | |
| <a href="#contact" class="nav-link font-medium text-gray-700 hover:text-blue-600">Contact</a> | |
| </nav> | |
| <!-- Mobile Menu Button --> | |
| <button id="mobile-menu-button" class="md:hidden focus:outline-none"> | |
| <div class="hamburger"> | |
| <div class="hamburger-line w-6 h-0.5 bg-gray-700 mb-1.5"></div> | |
| <div class="hamburger-line w-6 h-0.5 bg-gray-700 mb-1.5"></div> | |
| <div class="hamburger-line w-6 h-0.5 bg-gray-700"></div> | |
| </div> | |
| </button> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div id="mobile-menu" class="mobile-menu md:hidden"> | |
| <div class="pt-4 pb-2 space-y-2"> | |
| <div class="accordion"> | |
| <button class="flex justify-between items-center w-full px-4 py-2 text-left font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-600"> | |
| Solutions <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <div class="hidden px-4 py-2 bg-gray-50"> | |
| <a href="#manufacturing" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Manufacturing</a> | |
| <a href="#automotive" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Automotive</a> | |
| <a href="#logistics" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Logistics</a> | |
| <a href="#mining" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Mining</a> | |
| <a href="#oil-gas" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Oil & Gas</a> | |
| <a href="#healthcare" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Healthcare</a> | |
| </div> | |
| </div> | |
| <div class="accordion"> | |
| <button class="flex justify-between items-center w-full px-4 py-2 text-left font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-600"> | |
| Services <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <div class="hidden px-4 py-2 bg-gray-50"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Projects</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Equipment Rental</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Technology Assessment</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Wireless Site Survey</a> | |
| </div> | |
| </div> | |
| <div class="accordion"> | |
| <button class="flex justify-between items-center w-full px-4 py-2 text-left font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-600"> | |
| Products <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <div class="hidden px-4 py-2 bg-gray-50"> | |
| <div class="px-4 py-2 font-medium text-gray-500">Hardware</div> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Assisted Reality Glasses</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Machine Vision</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">RFID/IoT</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Tablets/Laptops</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Data Collectors</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Industrial Printers</a> | |
| <div class="border-t my-1"></div> | |
| <div class="px-4 py-2 font-medium text-gray-500">Software</div> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Remote Assistance</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Digital Workflow</a> | |
| <a href="#" class="block px-6 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600">Video Analytics with AI</a> | |
| </div> | |
| </div> | |
| <a href="#" class="block px-4 py-2 font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-600">News</a> | |
| <a href="#" class="block px-4 py-2 font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-600">Success Cases</a> | |
| <a href="#contact" class="block px-4 py-2 font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-600">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white"> | |
| <div class="container mx-auto px-4 py-20 md:py-32"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Advanced Technology Integration for Critical Operations</h1> | |
| <p class="text-xl mb-8 text-blue-100">WEOT specializes in orchestrating cutting-edge technologies to optimize processes in manufacturing, automotive, logistics, mining, oil & gas, and healthcare sectors.</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#contact" class="bg-white text-blue-700 hover:bg-blue-50 font-semibold py-3 px-8 rounded-lg transition duration-300 text-center">Contact Our Experts</a> | |
| <a href="#solutions" class="border border-white text-white hover:bg-white hover:text-blue-700 font-semibold py-3 px-8 rounded-lg transition duration-300 text-center">Explore Solutions</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="video-container rounded-xl overflow-hidden shadow-2xl"> | |
| <iframe src="https://www.youtube.com/embed/example" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trusted By Section --> | |
| <section class="bg-gray-50 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <p class="text-center text-gray-500 mb-8">Trusted by industry leaders worldwide</p> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <img src="https://via.placeholder.com/120x60?text=Client+1" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> | |
| <img src="https://via.placeholder.com/120x60?text=Client+2" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> | |
| <img src="https://via.placeholder.com/120x60?text=Client+3" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> | |
| <img src="https://via.placeholder.com/120x60?text=Client+4" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> | |
| <img src="https://via.placeholder.com/120x60?text=Client+5" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Overview --> | |
| <section id="solutions" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Sector-Specific Technology Solutions</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">We deliver tailored technology integration solutions designed to address the unique challenges of each industry we serve.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Manufacturing --> | |
| <div id="manufacturing" class="sector-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/400x300?text=Manufacturing" alt="Manufacturing" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Manufacturing</h3> | |
| <ul class="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>Real-time production monitoring</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Predictive maintenance solutions</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Automated quality control</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="mt-4 inline-block text-blue-600 font-medium hover:text-blue-800">Learn more →</a> | |
| </div> | |
| </div> | |
| <!-- Automotive --> | |
| <div id="automotive" class="sector-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/400x300?text=Automotive" alt="Automotive" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Automotive</h3> | |
| <ul class="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>Assembly line optimization</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Augmented reality for maintenance</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Supply chain visibility</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="mt-4 inline-block text-blue-600 font-medium hover:text-blue-800">Learn more →</a> | |
| </div> | |
| </div> | |
| <!-- Logistics --> | |
| <div id="logistics" class="sector-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/400x300?text=Logistics" alt="Logistics" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Logistics</h3> | |
| <ul class="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>Automated inventory tracking</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Smart warehouse solutions</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Route optimization algorithms</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="mt-4 inline-block text-blue-600 font-medium hover:text-blue-800">Learn more →</a> | |
| </div> | |
| </div> | |
| <!-- Mining --> | |
| <div id="mining" class="sector-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/400x300?text=Mining" alt="Mining" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Mining</h3> | |
| <ul class="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>Remote equipment monitoring</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Worker safety systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Automated mineral analysis</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="mt-4 inline-block text-blue-600 font-medium hover:text-blue-800">Learn more →</a> | |
| </div> | |
| </div> | |
| <!-- Oil & Gas --> | |
| <div id="oil-gas" class="sector-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/400x300?text=Oil+%26+Gas" alt="Oil & Gas" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Oil & Gas</h3> | |
| <ul class="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>Pipeline monitoring systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Remote facility management</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Predictive equipment analytics</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="mt-4 inline-block text-blue-600 font-medium hover:text-blue-800">Learn more →</a> | |
| </div> | |
| </div> | |
| <!-- Healthcare --> | |
| <div id="healthcare" class="sector-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/400x300?text=Healthcare" alt="Healthcare" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Healthcare</h3> | |
| <ul class="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>Medical equipment tracking</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Patient flow optimization</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Sterilization process monitoring</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="mt-4 inline-block text-blue-600 font-medium hover:text-blue-800">Learn more →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technology Showcase --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Technology Stack</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">We integrate the most advanced technologies to create comprehensive solutions for your operational challenges.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Hardware --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-microchip text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Hardware Solutions</h3> | |
| <ul class="space-y-3 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Assisted Reality Glasses</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Machine Vision Systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>RFID/IoT Devices</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Rugged Tablets & Laptops</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Industrial Printers</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Software --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-code text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Software Solutions</h3> | |
| <ul class="space-y-3 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Remote Assistance Platforms</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Digital Workflow Automation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Video Analytics with AI</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Predictive Maintenance Software</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Custom Enterprise Solutions</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Services --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-cogs text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Professional Services</h3> | |
| <ul class="space-y-3 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Custom Technology Projects</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Equipment Rental Programs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Technology Assessment</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Wireless Site Surveys</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-blue-500 mt-1 mr-2"></i> | |
| <span>Ongoing Support & Training</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Success Story --> | |
| <section class="py-16 bg-blue-700 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Transforming Automotive Manufacturing</h2> | |
| <p class="text-xl mb-6 text-blue-100">A leading automotive manufacturer reduced equipment downtime by 42% and improved production line efficiency by 28% through our integrated technology solution.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-300 mt-1 mr-2"></i> | |
| <span>Real-time monitoring of 1,200+ production assets</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-300 mt-1 mr-2"></i> | |
| <span>Predictive maintenance alerts reduced unplanned downtime</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-300 mt-1 mr-2"></i> | |
| <span>Augmented reality guides for maintenance technicians</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="inline-block bg-white text-blue-700 hover:bg-blue-100 font-semibold py-3 px-8 rounded-lg transition duration-300">Read Full Case Study</a> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="video-container rounded-xl overflow-hidden shadow-2xl"> | |
| <iframe src="https://www.youtube.com/embed/example" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- News Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-12"> | |
| <h2 class="text-3xl font-bold">Latest News & Insights</h2> | |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800">View All News →</a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- News Item 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg"> | |
| <div class="h-48 bg-gray-200"> | |
| <img src="https://via.placeholder.com/400x300?text=News+1" alt="News" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-sm text-gray-500 mb-2">June 15, 2023</div> | |
| <h3 class="text-xl font-bold mb-3">The Future of Industrial IoT in Manufacturing</h3> | |
| <p class="text-gray-600 mb-4">Exploring how IIoT is transforming traditional manufacturing processes and creating new opportunities for efficiency.</p> | |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Read More →</a> | |
| </div> | |
| </div> | |
| <!-- News Item 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg"> | |
| <div class="h-48 bg-gray-200"> | |
| <img src="https://via.placeholder.com/400x300?text=News+2" alt="News" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-sm text-gray-500 mb-2">May 28, 2023</div> | |
| <h3 class="text-xl font-bold mb-3">WEOT Announces Partnership with Leading Robotics Company</h3> | |
| <p class="text-gray-600 mb-4">New collaboration brings advanced robotic solutions to industrial automation projects across multiple sectors.</p> | |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Read More →</a> | |
| </div> | |
| </div> | |
| <!-- News Item 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg"> | |
| <div class="h-48 bg-gray-200"> | |
| <img src="https://via.placeholder.com/400x300?text=News+3" alt="News" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-sm text-gray-500 mb-2">April 10, 2023</div> | |
| <h3 class="text-xl font-bold mb-3">How Augmented Reality is Revolutionizing Field Service</h3> | |
| <p class="text-gray-600 mb-4">Case study on AR implementation that reduced service resolution times by 65% in heavy equipment maintenance.</p> | |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Read More →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Operations?</h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">Our technology experts are ready to discuss how we can help optimize your critical processes and drive measurable results.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#contact" class="bg-blue-600 hover:bg-blue-700 font-semibold py-3 px-8 rounded-lg transition duration-300">Contact Us Today</a> | |
| <a href="tel:+551130042000" class="border border-gray-600 hover:bg-gray-800 font-semibold py-3 px-8 rounded-lg transition duration-300"> | |
| <i class="fas fa-phone mr-2"></i> +55 11 3004-2000 | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> | |
| <h2 class="text-3xl font-bold mb-6">Get in Touch</h2> | |
| <p class="text-gray-600 mb-8">Have questions about our solutions or services? Our team is ready to help you find the right technology approach for your business needs.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Our Headquarters</h4> | |
| <p class="text-gray-600">Av. Paulista, 1000 - São Paulo, SP - Brazil</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Phone</h4> | |
| <p class="text-gray-600">+55 11 3004-2000</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Email</h4> | |
| <p class="text-gray-600">contact@weot.com.br</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-clock text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Business Hours</h4> | |
| <p class="text-gray-600">Monday - Friday: 8:00 AM - 6:00 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-100 hover:bg-blue-100 p-3 rounded-full text-gray-700 hover:text-blue-600 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-gray-100 hover:bg-blue-100 p-3 rounded-full text-gray-700 hover:text-blue-600 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="bg-gray-100 hover:bg-blue-100 p-3 rounded-full text-gray-700 hover:text-blue-600 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-gray-100 hover:bg-blue-100 p-3 rounded-full text-gray-700 hover:text-blue-600 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-md"> | |
| <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3> | |
| <form> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Name*</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="company" class="block text-gray-700 font-medium mb-2">Company</label> | |
| <input type="text" id="company" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email*</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Phone</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="interest" class="block text-gray-700 font-medium mb-2">Area of Interest*</label> | |
| <select id="interest" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required> | |
| <option value="">Select an option</option> | |
| <option value="manufacturing">Manufacturing Solutions</option> | |
| <option value="automotive">Automotive Solutions</option> | |
| <option value="logistics">Logistics Solutions</option> | |
| <option value="mining">Mining Solutions</option> | |
| <option value="oil-gas">Oil & Gas Solutions</option> | |
| <option value="healthcare">Healthcare Solutions</option> | |
| <option value="hardware">Hardware Products</option> | |
| <option value="software">Software Products</option> | |
| <option value="services">Professional Services</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message*</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12"> | |
| <!-- About --> | |
| <div> | |
| <img src="https://weot.com.br/wp-content/uploads/2022/05/logo-weot.png" alt="WEOT Logo" class="h-8 mb-4"> | |
| <p class="text-gray-400 mb-4">WEOT specializes in the integration and orchestration of advanced technologies for critical operations across multiple industrial sectors.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Solutions --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Solutions</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Manufacturing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Automotive</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Logistics</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Mining</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Oil & Gas</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Healthcare</a></li> | |
| </ul> | |
| </div> | |
| <!-- Services --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Services</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Projects</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Equipment Rental</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Technology Assessment</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Wireless Site Survey</a></li> | |
| </ul> | |
| <h4 class="text-lg font-bold mt-6 mb-4">Products</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Hardware</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Software</a></li> | |
| </ul> | |
| </div> | |
| <!-- Contact --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Contact</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-gray-400 mt-1 mr-3"></i> | |
| <span class="text-gray-400">Av. Paulista, 1000<br>São Paulo, SP - Brazil</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone text-gray-400 mt-1 mr-3"></i> | |
| <span class="text-gray-400">+55 11 3004-2000</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope text-gray-400 mt-1 mr-3"></i> | |
| <span class="text-gray-400">contact@weot.com.br</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 WEOT. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| const hamburger = document.querySelector('.hamburger'); | |
| menu.classList.toggle('open'); | |
| hamburger.classList.toggle('open'); | |
| }); | |
| // Accordion functionality for mobile menu | |
| const accordionButtons = document.querySelectorAll('.accordion button'); | |
| accordionButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const content = this.nextElementSibling; | |
| const icon = this.querySelector('i'); | |
| content.classList.toggle('hidden'); | |
| if (content.classList.contains('hidden')) { | |
| icon.classList.remove('fa-chevron-up'); | |
| icon.classList.add('fa-chevron-down'); | |
| } else { | |
| icon.classList.remove('fa-chevron-down'); | |
| icon.classList.add('fa-chevron-up'); | |
| } | |
| }); | |
| }); | |
| // 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) { | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const hamburger = document.querySelector('.hamburger'); | |
| if (mobileMenu.classList.contains('open')) { | |
| mobileMenu.classList.remove('open'); | |
| hamburger.classList.remove('open'); | |
| } | |
| // Scroll to target | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </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=weot/weot-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |