| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>HIVE IT - Specialist IT Services</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .hero-gradient { |
| background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%); |
| } |
| .service-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .floating { |
| animation: floating 3s ease-in-out infinite; |
| } |
| @keyframes floating { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-15px); } |
| 100% { transform: translateY(0px); } |
| } |
| </style> |
| </head> |
| <body class="font-sans antialiased text-gray-800"> |
| |
| <nav class="bg-white shadow-sm fixed w-full z-10"> |
| <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"> |
| <img src="http://static.photos/technology/200x200/42" alt="SIVE IT Logo" class="h-8 w-8 mr-2"> |
| <span class="text-2xl font-bold text-blue-900">SIVE<span class="text-blue-600"> IT</span></span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="#services" class="text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Services</a> |
| <a href="#about" class="text-blue-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">About</a> |
| <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition duration-300">Contact Us</a> |
| </div> |
| <div class="-mr-2 flex items-center md:hidden"> |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-900 hover:text-blue-600 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="hero-gradient pt-24 pb-32 text-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="md:flex md:items-center md:justify-between"> |
| <div class="md:w-1/2" data-aos="fade-right"> |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-6"> |
| Wanting to make things run smoother? |
| </h1> |
| <p class="text-xl text-blue-100 mb-8"> |
| Specialist infotech services and customised bespoke software for 20 years |
| </p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <a href="#contact" class="bg-white text-blue-700 px-6 py-3 rounded-md text-lg font-medium hover:bg-blue-50 transition duration-300 text-center"> |
| Get Started |
| </a> |
| <a href="#services" class="border-2 border-white text-white px-6 py-3 rounded-md text-lg font-medium hover:bg-white hover:bg-opacity-10 transition duration-300 text-center"> |
| Our Services |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2 mt-12 md:mt-0 flex justify-center" data-aos="fade-left"> |
| <div class="relative w-64 h-64 sm:w-80 sm:h-80"> |
| <div class="absolute inset-0 bg-blue-500 rounded-full opacity-20 blur-xl"></div> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <img src="http://static.photos/technology/640x360/42" alt="IT Services" class="rounded-full w-full h-full object-cover border-4 border-white shadow-xl floating"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div 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 mb-16" data-aos="fade-up"> |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
| Our Specialist Services |
| </h2> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
| Tailored solutions to streamline your business operations |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4"> |
| <i data-feather="code"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Custom Workflow Software</h3> |
| <p class="text-gray-500"> |
| Bespoke software solutions designed specifically for your business processes to maximize efficiency. |
| </p> |
| </div> |
| |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4"> |
| <i data-feather="link"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Software Integration</h3> |
| <p class="text-gray-500"> |
| Connecting and integrating your existing software systems for seamless data flow and operations. |
| </p> |
| </div> |
| |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4"> |
| <i data-feather="file-text"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Document Management</h3> |
| <p class="text-gray-500"> |
| Private paperwork management software to organize, secure, and streamline your document handling. |
| </p> |
| </div> |
| |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4"> |
| <i data-feather="monitor"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Workstation Support</h3> |
| <p class="text-gray-500"> |
| Comprehensive support for all your workstations and devices to keep your team productive. |
| </p> |
| </div> |
| |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4"> |
| <i data-feather="server"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Server Management</h3> |
| <p class="text-gray-500"> |
| Professional server management to ensure your infrastructure is secure, reliable, and performing optimally. |
| </p> |
| </div> |
| |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4"> |
| <i data-feather="users"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Event Assistance</h3> |
| <p class="text-gray-500"> |
| Exceptional on-site IT support for your special events, ensuring everything runs smoothly. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="about" class="py-16 bg-white"> |
| <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="mb-12 lg:mb-0" data-aos="fade-right"> |
| <img src="http://static.photos/office/640x360/23" alt="Our Team" class="rounded-lg shadow-xl w-full h-auto"> |
| </div> |
| <div data-aos="fade-left"> |
| <h2 class="text-3xl font-extrabold text-gray-900 mb-6"> |
| 20 Years of IT Excellence |
| </h2> |
| <p class="text-lg text-gray-500 mb-6"> |
| At SIVE IT, we've been providing specialist infotech services and customised bespoke software solutions for two decades. Our experience allows us to understand your unique challenges and deliver tailored solutions that make your business run smoother. |
| </p> |
| <p class="text-lg text-gray-500 mb-8"> |
| We pride ourselves on building long-term relationships with our clients, becoming an extension of your team rather than just another service provider. |
| </p> |
| <div class="flex items-center space-x-4"> |
| <div class="flex-shrink-0 bg-blue-100 rounded-full p-3"> |
| <i data-feather="award" class="text-blue-600"></i> |
| </div> |
| <div> |
| <h4 class="text-lg font-medium text-gray-900">Trusted Expertise</h4> |
| <p class="text-gray-500">20 years of proven results</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div 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 streamline your operations?</span> |
| <span class="block text-blue-200">Call us for a free consultation.</span> |
| </h2> |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
| <div class="inline-flex rounded-md shadow"> |
| <a href="tel:0898765432" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50"> |
| <i data-feather="phone" class="mr-2"></i> (08) 9876 5432 |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div 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="text-center mb-12" data-aos="fade-up"> |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
| Get In Touch |
| </h2> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
| Contact us for a free, no-obligation discussion about your IT needs |
| </p> |
| </div> |
| |
| <div class="bg-white shadow-xl rounded-lg overflow-hidden"> |
| <div class="grid grid-cols-1 md:grid-cols-2"> |
| <div class="p-8 sm:p-12" data-aos="fade-right"> |
| <h3 class="text-2xl 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">Your Name</label> |
| <input type="text" id="name" name="name" class="mt-1 block 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> |
| <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label> |
| <input type="email" id="email" name="email" class="mt-1 block 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> |
| <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label> |
| <input type="tel" id="phone" name="phone" class="mt-1 block 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> |
| <label for="message" class="block text-sm font-medium text-gray-700">Your Message</label> |
| <textarea id="message" name="message" rows="4" class="mt-1 block 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> |
| <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"> |
| Send Message |
| </button> |
| </div> |
| </form> |
| </div> |
| <div class="bg-blue-700 p-8 sm:p-12 text-white" data-aos="fade-left"> |
| <h3 class="text-2xl font-bold mb-6">Contact Information</h3> |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="phone"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Phone</h4> |
| <p class="text-blue-100">(08) 7079 8670</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="mail"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Email</h4> |
| <p class="text-blue-100">info@siveit.com.au</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <i data-feather="clock"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-lg font-medium">Business Hours</h4> |
| <p class="text-blue-100">Monday - Friday: 9am - 5pm</p> |
| <p class="text-blue-100">Emergency support available</p> |
| </div> |
| </div> |
| <div class="pt-6"> |
| <h4 class="text-lg font-medium mb-4">Why choose us?</h4> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i data-feather="check" class="text-green-300 mr-2"></i> |
| <span class="text-blue-100">20 years of experience</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="text-green-300 mr-2"></i> |
| <span class="text-blue-100">Bespoke solutions</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="text-green-300 mr-2"></i> |
| <span class="text-blue-100">Personalized service</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check" class="text-green-300 mr-2"></i> |
| <span class="text-blue-100">No obligation consultation</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-white"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4">SIVE IT</h3> |
| <p class="text-gray-400"> |
| Specialist IT services and custom software solutions to make your business run smoother. |
| </p> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
| <ul class="space-y-2"> |
| <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li> |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Connect With Us</h3> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i data-feather="facebook"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
| <i data-feather="linkedin"></i> |
| </a> |
| </div> |
| <div class="mt-4"> |
| <a href="tel:0870798670" class="text-gray-400 hover:text-white transition duration-300 flex items-center"> |
| <i data-feather="phone" class="mr-2"></i> (08) 7079 8670 |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="mt-12 pt-8 border-t border-gray-800"> |
| <p class="text-gray-400 text-center"> |
| © 2023 SIVE IT. All rights reserved. |
| </p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| AOS.init(); |
| feather.replace(); |
| |
| |
| const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]'); |
| mobileMenuButton.addEventListener('click', function() { |
| |
| console.log('Mobile menu clicked'); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
