|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>DataIT | Transforming Data into Actionable Insights</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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
'datait-pink': '#B51C59', |
|
|
'datait-navy': '#0C1855', |
|
|
'datait-light': '#F0F2F8', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<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, rgba(12,24,85,0.9) 0%, rgba(181,28,89,0.8) 100%); |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
display: block; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: #B51C59; |
|
|
transition: width .3s; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.animate-float { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card:hover { |
|
|
border-color: #B51C59; |
|
|
} |
|
|
|
|
|
input:focus, textarea:focus { |
|
|
outline: none; |
|
|
border-color: #B51C59; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-datait-light text-gray-800"> |
|
|
|
|
|
<div id="cookie-consent" class="fixed bottom-0 left-0 right-0 bg-datait-navy text-white p-4 z-50 hidden"> |
|
|
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between"> |
|
|
<p class="mb-4 md:mb-0">We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="cookie-accept" class="bg-datait-pink hover:bg-pink-700 text-white px-4 py-2 rounded">Accept</button> |
|
|
<button id="cookie-decline" class="border border-white hover:bg-gray-700 text-white px-4 py-2 rounded">Decline</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="bg-white shadow-md sticky top-0 z-40"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-between items-center py-4"> |
|
|
<div class="flex items-center"> |
|
|
<a href="#" class="flex items-center"> |
|
|
<img src="https://www.datait.fr/logo.png" alt="DataIT Logo" class="h-10 mr-2"> |
|
|
<span class="text-xl font-bold text-datait-navy">DataIT</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden"> |
|
|
<button id="mobile-menu-button" class="text-datait-navy focus:outline-none"> |
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#home" class="nav-link text-datait-navy font-medium">Home</a> |
|
|
<a href="#services" class="nav-link text-datait-navy font-medium">Services</a> |
|
|
<a href="#expertise" class="nav-link text-datait-navy font-medium">Expertise</a> |
|
|
<a href="#case-studies" class="nav-link text-datait-navy font-medium">Case Studies</a> |
|
|
<a href="#about" class="nav-link text-datait-navy font-medium">About Us</a> |
|
|
<a href="#contact" class="bg-datait-pink text-white px-6 py-2 rounded-md hover:bg-pink-700 transition duration-300">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden pb-4"> |
|
|
<a href="#home" class="block py-2 text-datait-navy font-medium">Home</a> |
|
|
<a href="#services" class="block py-2 text-datait-navy font-medium">Services</a> |
|
|
<a href="#expertise" class="block py-2 text-datait-navy font-medium">Expertise</a> |
|
|
<a href="#case-studies" class="block py-2 text-datait-navy font-medium">Case Studies</a> |
|
|
<a href="#about" class="block py-2 text-datait-navy font-medium">About Us</a> |
|
|
<a href="#contact" class="block mt-2 bg-datait-pink text-white px-6 py-2 rounded-md text-center hover:bg-pink-700 transition duration-300">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="hero-gradient text-white py-20 md:py-32"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Beyond Management</h1> |
|
|
<p class="text-xl mb-8">Transforming data into actionable insights for your business</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-datait-pink px-8 py-3 rounded-md font-medium hover:bg-gray-100 transition duration-300 text-center">Get Started</a> |
|
|
<a href="#services" class="border border-white px-8 py-3 rounded-md font-medium hover:bg-white hover:text-datait-pink transition duration-300 text-center">Our Services</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Data Analytics" class="rounded-lg shadow-xl w-full max-w-lg animate-float"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-2xl font-bold text-center text-datait-navy mb-12">Trusted by industry leaders</h2> |
|
|
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> |
|
|
<img src="https://via.placeholder.com/150x60?text=Client+1" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300"> |
|
|
<img src="https://via.placeholder.com/150x60?text=Client+2" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300"> |
|
|
<img src="https://via.placeholder.com/150x60?text=Client+3" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300"> |
|
|
<img src="https://via.placeholder.com/150x60?text=Client+4" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300"> |
|
|
<img src="https://via.placeholder.com/150x60?text=Client+5" alt="Client Logo" class="h-12 opacity-70 hover:opacity-100 transition duration-300"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 bg-datait-light"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-datait-navy mb-4">Our Services</h2> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">We provide comprehensive data and IT solutions tailored to your business needs</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-chart-line text-datait-pink text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-datait-navy">Data Analytics</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Unlock the power of your data with advanced analytics solutions that drive decision-making and business growth.</p> |
|
|
<ul class="space-y-2 mb-4"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Predictive analytics</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Business intelligence</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Data visualization</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-cloud text-datait-pink text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-datait-navy">Cloud Solutions</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Scalable and secure cloud infrastructure to modernize your IT environment and accelerate digital transformation.</p> |
|
|
<ul class="space-y-2 mb-4"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Cloud migration</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Hybrid cloud strategy</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Cloud security</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-robot text-datait-pink text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-datait-navy">AI & Machine Learning</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Leverage artificial intelligence to automate processes, gain insights, and create competitive advantages.</p> |
|
|
<ul class="space-y-2 mb-4"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Predictive modeling</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Natural language processing</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Computer vision</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-database text-datait-pink text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-datait-navy">Data Engineering</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Build robust data pipelines and architectures that enable real-time analytics and business intelligence.</p> |
|
|
<ul class="space-y-2 mb-4"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Data warehousing</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>ETL/ELT processes</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Data quality management</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-shield-alt text-datait-pink text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-datait-navy">Cybersecurity</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Protect your digital assets with comprehensive security solutions tailored to your organization's needs.</p> |
|
|
<ul class="space-y-2 mb-4"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Risk assessment</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Compliance management</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Incident response</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden service-card transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-users-cog text-datait-pink text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-datait-navy">IT Consulting</h3> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Strategic IT guidance to align technology with your business objectives and drive digital transformation.</p> |
|
|
<ul class="space-y-2 mb-4"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Technology roadmap</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>Digital strategy</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-datait-pink mr-2"></i> |
|
|
<span>IT optimization</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="expertise" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-datait-navy mb-4">Industry Expertise</h2> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">We have deep domain knowledge across multiple industries</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-datait-light rounded-lg p-6 flex items-start"> |
|
|
<div class="bg-datait-pink text-white p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-university text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-datait-navy mb-2">Financial Services</h3> |
|
|
<p class="text-gray-600">Risk modeling, fraud detection, regulatory compliance, and customer analytics for banks, insurance, and fintech.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-datait-light rounded-lg p-6 flex items-start"> |
|
|
<div class="bg-datait-pink text-white p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-heartbeat text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-datait-navy mb-2">Healthcare</h3> |
|
|
<p class="text-gray-600">Patient data analytics, clinical decision support, population health management, and healthcare IoT solutions.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-datait-light rounded-lg p-6 flex items-start"> |
|
|
<div class="bg-datait-pink text-white p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-shopping-bag text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-datait-navy mb-2">Retail & E-commerce</h3> |
|
|
<p class="text-gray-600">Customer segmentation, recommendation engines, inventory optimization, and pricing analytics.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-datait-light rounded-lg p-6 flex items-start"> |
|
|
<div class="bg-datait-pink text-white p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-industry text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-datait-navy mb-2">Manufacturing</h3> |
|
|
<p class="text-gray-600">Predictive maintenance, supply chain optimization, quality control, and industrial IoT implementations.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-datait-light rounded-lg p-6 flex items-start"> |
|
|
<div class="bg-datait-pink text-white p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-truck text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-datait-navy mb-2">Logistics & Transportation</h3> |
|
|
<p class="text-gray-600">Route optimization, fleet management, demand forecasting, and real-time tracking solutions.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-datait-light rounded-lg p-6 flex items-start"> |
|
|
<div class="bg-datait-pink text-white p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-graduation-cap text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-datait-navy mb-2">Education</h3> |
|
|
<p class="text-gray-600">Learning analytics, student performance tracking, institutional research, and education technology solutions.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-datait-navy text-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> |
|
|
<div class="p-4"> |
|
|
<div class="text-4xl font-bold mb-2">150+</div> |
|
|
<div class="text-gray-300">Satisfied Clients</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="text-4xl font-bold mb-2">300+</div> |
|
|
<div class="text-gray-300">Projects Completed</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="text-4xl font-bold mb-2">95%</div> |
|
|
<div class="text-gray-300">Client Retention</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="text-4xl font-bold mb-2">50+</div> |
|
|
<div class="text-gray-300">Expert Consultants</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="case-studies" class="py-20 bg-datait-light"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-datait-navy mb-4">Case Studies</h2> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Real-world solutions delivering measurable impact</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-datait-pink text-white px-3 py-1 rounded-full text-sm font-medium mr-3">Financial Services</div> |
|
|
<div class="text-gray-500 text-sm">6 months project</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-datait-navy mb-2">Fraud Detection System for Major Bank</h3> |
|
|
<p class="text-gray-600 mb-4">Implemented machine learning models that reduced fraudulent transactions by 78% while decreasing false positives by 40%.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center"> |
|
|
Read case study <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
<div class="text-datait-pink font-bold">$2.1M saved annually</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1532187863485-48b948113084?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-datait-pink text-white px-3 py-1 rounded-full text-sm font-medium mr-3">Healthcare</div> |
|
|
<div class="text-gray-500 text-sm">9 months project</div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-datait-navy mb-2">Patient Readmission Prediction for Hospital Network</h3> |
|
|
<p class="text-gray-600 mb-4">Developed predictive models identifying high-risk patients, enabling targeted interventions that reduced readmissions by 32%.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-datait-pink font-medium hover:underline inline-flex items-center"> |
|
|
Read case study <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
<div class="text-datait-pink font-bold">$4.7M saved annually</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-flex items-center bg-datait-pink text-white px-6 py-3 rounded-md font-medium hover:bg-pink-700 transition duration-300"> |
|
|
View all case studies <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-datait-navy mb-4">What Our Clients Say</h2> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Don't just take our word for it - hear from our satisfied clients</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="testimonial-card bg-datait-light rounded-lg p-8 border border-transparent"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-datait-navy">Sarah Johnson</h4> |
|
|
<p class="text-gray-500 text-sm">CTO, FinTech Solutions</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">"DataIT transformed our approach to data analytics. Their team delivered insights that directly contributed to a 35% increase in customer retention."</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-datait-light rounded-lg p-8 border border-transparent"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-datait-navy">Michael Chen</h4> |
|
|
<p class="text-gray-500 text-sm">Director of IT, HealthPlus</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">"The cloud migration strategy developed by DataIT was flawless. We achieved zero downtime during the transition and saw immediate performance improvements."</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-datait-light rounded-lg p-8 border border-transparent"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emily Rodriguez" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-datait-navy">Emily Rodriguez</h4> |
|
|
<p class="text-gray-500 text-sm">VP Operations, RetailChain</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">"Their AI-powered inventory optimization system reduced our stockouts by 62% while decreasing excess inventory by 45%. The results exceeded our expectations."</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-datait-light"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> |
|
|
<h2 class="text-3xl font-bold text-datait-navy mb-6">About DataIT</h2> |
|
|
<p class="text-gray-600 mb-6">Founded in 2010, DataIT is a leading provider of data and IT consulting services, helping organizations transform their operations through technology and data-driven insights.</p> |
|
|
<p class="text-gray-600 mb-8">Our team of 50+ experts combines deep technical expertise with industry knowledge to deliver solutions that drive real business value.</p> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-datait-pink text-white p-2 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-bullseye text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-datait-navy mb-1">Our Mission</h4> |
|
|
<p class="text-gray-600">Empower organizations to harness the full potential of their data through innovative technology solutions.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-datait-pink text-white p-2 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-eye text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-datait-navy mb-1">Our Vision</h4> |
|
|
<p class="text-gray-600">To be the trusted partner for organizations navigating their digital transformation journey.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-datait-pink text-white p-2 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-gem text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-datait-navy mb-1">Our Values</h4> |
|
|
<p class="text-gray-600">Integrity, Innovation, Excellence, and Client Success guide everything we do.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-datait-navy mb-4">Our Team</h3> |
|
|
<p class="text-gray-600 mb-6">We bring together data scientists, engineers, architects, and industry specialists to form cross-functional teams tailored to each client's needs.</p> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4"> |
|
|
<div class="text-center"> |
|
|
<div class="w-20 h-20 rounded-full bg-gray-300 mx-auto mb-2 overflow-hidden"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h4 class="font-medium text-datait-navy">Sophie Martin</h4> |
|
|
<p class="text-gray-500 text-sm">Data Science Lead</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-20 h-20 rounded-full bg-gray-300 mx-auto mb-2 overflow-hidden"> |
|
|
<img src="https://randomuser.me/api/portraits/men/42.jpg" alt="Team Member" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h4 class="font-medium text-datait-navy">James Wilson</h4> |
|
|
<p class="text-gray-500 text-sm">Cloud Architect</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-20 h-20 rounded-full bg-gray-300 mx-auto mb-2 overflow-hidden"> |
|
|
<img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Team Member" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h4 class="font-medium text-datait-navy">Priya Patel</h4> |
|
|
<p class="text-gray-500 text-sm">AI Specialist</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-20 h-20 rounded-full bg-gray-300 mx-auto mb-2 overflow-hidden"> |
|
|
<img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Team Member" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h4 class="font-medium text-datait-navy">David Kim</h4> |
|
|
<p class="text-gray-500 text-sm">Data Engineer</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-20 h-20 rounded-full bg-gray-300 mx-auto mb-2 overflow-hidden"> |
|
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Team Member" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h4 class="font-medium text-datait-navy">Emma Johnson</h4> |
|
|
<p class="text-gray-500 text-sm">Cybersecurity Expert</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-20 h-20 rounded-full bg-gray-300 mx-auto mb-2 overflow-hidden"> |
|
|
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Team Member" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h4 class="font-medium text-datait-navy">Carlos Mendez</h4> |
|
|
<p class="text-gray-500 text-sm">IT Consultant</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-datait-pink text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Ready to Transform Your Data into Results?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Let's discuss how we can help your organization leverage data and technology for competitive advantage.</p> |
|
|
<a href="#contact" class="inline-block bg-white text-datait-pink px-8 py-3 rounded-md font-medium hover:bg-gray-100 transition duration-300">Get in Touch</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col lg:flex-row"> |
|
|
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> |
|
|
<h2 class="text-3xl font-bold text-datait-navy mb-6">Contact Us</h2> |
|
|
<p class="text-gray-600 mb-8">Have questions or want to discuss a project? Our team is here to help.</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-datait-pink"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-datait-navy mb-1">Headquarters</h4> |
|
|
<p class="text-gray-600">123 Data Street, Tech City, TC 10100</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-phone-alt text-datait-pink"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-datait-navy mb-1">Phone</h4> |
|
|
<p class="text-gray-600">+1 (555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-envelope text-datait-pink"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-datait-navy mb-1">Email</h4> |
|
|
<p class="text-gray-600">info@datait.com</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-datait-pink bg-opacity-10 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-clock text-datait-pink"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-datait-navy mb-1">Business Hours</h4> |
|
|
<p class="text-gray-600">Monday - Friday: 9:00 AM - 6:00 PM</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<h4 class="font-bold text-datait-navy mb-4">Follow Us</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-datait-light text-datait-pink p-3 rounded-full hover:bg-datait-pink hover:text-white transition duration-300"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-datait-light text-datait-pink p-3 rounded-full hover:bg-datait-pink hover:text-white transition duration-300"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-datait-light text-datait-pink p-3 rounded-full hover:bg-datait-pink hover:text-white transition duration-300"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-datait-light text-datait-pink p-3 rounded-full hover:bg-datait-pink hover:text-white transition duration-300"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<div class="bg-datait-light rounded-xl p-8"> |
|
|
<h3 class="text-xl font-bold text-datait-navy mb-6">Send Us a Message</h3> |
|
|
<form id="contact-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" name="name" class="w-full px-4 py-2 border rounded-md focus:border-datait-pink" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-gray-700 font-medium mb-2">Email</label> |
|
|
<input type="email" id="email" name="email" class="w-full px-4 py-2 border rounded-md focus:border-datait-pink" required> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label> |
|
|
<input type="text" id="subject" name="subject" class="w-full px-4 py-2 border rounded-md focus:border-datait-pink" required> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-gray-700 font-medium mb-2">Message</label> |
|
|
<textarea id="message" name="message" rows="5" class="w-full px-4 py-2 border rounded-md focus:border-datait-pink" required></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-datait-pink text-white px-6 py-3 rounded-md font-medium hover:bg-pink-700 transition duration-300">Send Message</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="h-96 bg-gray-200"> |
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215256539349!2d-73.98784492453893!3d40.7579859713895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855c6480299%3A0x55194ec5a1ae072e!2sTimes%20Square!5e0!3m2!1sen!2sus!4v1689872623451!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-datait-navy text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<a href="#" class="flex items-center mb-6"> |
|
|
<img src="https://www.datait.fr/logo.png" alt="DataIT Logo" class="h-8 mr-2"> |
|
|
<span class="text-xl font-bold">DataIT</span> |
|
|
</a> |
|
|
<p class="text-gray-300 mb-4">Beyond Management. Transforming data into actionable insights for your business.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-6">Services</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Data Analytics</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Cloud Solutions</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">AI & Machine Learning</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Data Engineering</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Cybersecurity</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">IT Consulting</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-6">Company</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#about" class="text-gray-300 hover:text-white">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li> |
|
|
<li><a href="#case-studies" class="text-gray-300 hover:text-white">Case Studies</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Press</a></li> |
|
|
<li><a href="#contact" class="text-gray-300 hover:text-white">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-6">Newsletter</h4> |
|
|
<p class="text-gray-300 mb-4">Subscribe to our newsletter for the latest insights and updates.</p> |
|
|
<form class="flex"> |
|
|
<input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-md w-full text-gray-800"> |
|
|
<button type="submit" class="bg-datait-pink px-4 py-2 rounded-r-md hover:bg-pink-700 transition duration-300"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</form> |
|
|
<p class="text-gray-400 text-sm mt-2">We respect your privacy. Unsubscribe at any time.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 DataIT. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
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) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const contactForm = document.getElementById('contact-form'); |
|
|
if (contactForm) { |
|
|
contactForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
|
|
|
alert('Thank you for your message! We will get back to you soon.'); |
|
|
this.reset(); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const cookieConsent = document.getElementById('cookie-consent'); |
|
|
const cookieAccept = document.getElementById('cookie-accept'); |
|
|
const cookieDecline = document.getElementById('cookie-decline'); |
|
|
|
|
|
|
|
|
if (!localStorage.getItem('cookieConsent')) { |
|
|
setTimeout(() => { |
|
|
cookieConsent.classList.remove('hidden'); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
cookieAccept.addEventListener('click', () => { |
|
|
localStorage.setItem('cookieConsent', 'accepted'); |
|
|
cookieConsent.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
cookieDecline.addEventListener('click', () => { |
|
|
localStorage.setItem('cookieConsent', 'declined'); |
|
|
cookieConsent.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=IssamKLAI/datait" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
