si / index.html
syffus's picture
changer l'image - Follow Up Deployment
3d7c324 verified
Raw History Blame Contribute Delete
46.5 kB
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Silitic – L'IA au service de votre entreprise</title>
<!-- TailwindCSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Custom Tailwind Config -->
<script>
tailwind.config = {
theme: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
heading: ['Space Grotesk', 'sans-serif'],
},
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
},
dark: '#0f172a',
light: '#f8fafc',
},
animation: {
'float': 'float 6s ease-in-out infinite',
'pulse-slow': 'pulse 6s ease-in-out infinite',
'gradient': 'gradient 8s ease infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
},
gradient: {
'0%, 100%': { 'background-position': '0% 50%' },
'50%': { 'background-position': '100% 50%' },
}
}
}
}
}
</script>
<style>
body { scroll-behavior: smooth; }
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.gradient-text {
background: linear-gradient(90deg, #0ea5e9, #0284c7);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gradient-bg {
background: linear-gradient(135deg, #0ea5e9, #0284c7);
}
.gradient-animated {
background-size: 200% 200%;
background-image: linear-gradient(45deg, #0ea5e9, #0284c7, #0ea5e9);
animation: gradient 8s ease infinite;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover: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);
}
.nav-link {
position: relative;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #0ea5e9;
transition: width 0.3s ease;
}
.nav-link:hover:after {
width: 100%;
}
.service-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
margin-bottom: 1.5rem;
color: white;
font-size: 1.5rem;
}
.project-card {
position: relative;
overflow: hidden;
border-radius: 16px;
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
}
.project-card:hover .project-overlay {
opacity: 1;
}
.project-card img {
transition: transform 0.5s ease;
}
.project-card:hover img {
transform: scale(1.05);
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased">
<!-- Language Switcher -->
<div class="fixed top-4 right-4 z-50">
<button onclick="changeLanguage('fr')" class="bg-white/90 px-3 py-1 rounded-full text-sm font-medium text-gray-800 shadow-md hover:bg-white transition">FR</button>
</div>
<!-- Navigation -->
<nav id="navbar" class="fixed w-full z-40 transition-all duration-300 py-4">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center">
<a href="#home" class="flex items-center">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">S</div>
<span class="ml-3 text-xl font-bold text-dark font-heading">Silitic</span>
</a>
<div class="hidden md:flex items-center space-x-8">
<a href="#home" data-i18n="nav.home" class="nav-link text-dark hover:text-primary-600 font-medium">Accueil</a>
<a href="#about" data-i18n="nav.about" class="nav-link text-dark hover:text-primary-600 font-medium">À propos</a>
<a href="#services" data-i18n="nav.services" class="nav-link text-dark hover:text-primary-600 font-medium">Services</a>
<a href="#projects" data-i18n="nav.projects" class="nav-link text-dark hover:text-primary-600 font-medium">Projets</a>
<a href="#contact" data-i18n="nav.contact" class="nav-link text-dark hover:text-primary-600 font-medium">Contact</a>
</div>
<button id="mobile-menu-button" class="md:hidden text-dark">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-white rounded-xl p-6 mt-4 shadow-xl">
<div class="flex flex-col space-y-4">
<a href="#home" data-i18n="nav.home" class="text-dark hover:text-primary-600 font-medium py-2">Accueil</a>
<a href="#about" data-i18n="nav.about" class="text-dark hover:text-primary-600 font-medium py-2">À propos</a>
<a href="#services" data-i18n="nav.services" class="text-dark hover:text-primary-600 font-medium py-2">Services</a>
<a href="#projects" data-i18n="nav.projects" class="text-dark hover:text-primary-600 font-medium py-2">Projets</a>
<a href="#contact" data-i18n="nav.contact" class="text-dark hover:text-primary-600 font-medium py-2">Contact</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
<div class="absolute inset-0 bg-gradient-to-br from-primary-100 to-primary-50 z-0"></div>
<div class="absolute inset-0 z-1 opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgwLCAwLCAwLCAwLjAyKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==')"></div>
<div class="relative z-10 px-4 max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<div class="text-center md:text-left">
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight font-heading">
<span class="gradient-text">L'IA au service</span><br>
de votre entreprise
</h1>
<p class="text-lg md:text-xl text-gray-600 mb-8 max-w-lg mx-auto md:mx-0">
Des solutions d'intelligence artificielle sur mesure pour transformer vos processus et accélérer votre croissance.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
<a href="#contact" class="gradient-bg text-white px-6 py-3 rounded-lg font-semibold shadow-lg hover:opacity-90 transition flex items-center justify-center">
<span>Commencer maintenant</span>
<i class="fas fa-arrow-right ml-2"></i>
</a>
<a href="#services" class="border border-primary-600 text-primary-600 px-6 py-3 rounded-lg font-semibold hover:bg-primary-50 transition flex items-center justify-center">
<span>Nos solutions</span>
<i class="fas fa-eye ml-2"></i>
</a>
</div>
<div class="mt-12 flex flex-wrap justify-center md:justify-start gap-6">
<div class="flex items-center">
<div class="flex -space-x-2">
<img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white">
<img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-white">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-600">Rejoignez <span class="text-primary-600 font-bold">50+</span> entreprises</p>
</div>
</div>
</div>
</div>
<div class="hidden md:block relative">
<div class="relative">
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="w-full h-auto rounded-2xl shadow-2xl animate-float" style="max-height: 600px; object-fit: cover;">
<div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg w-64">
<div class="flex items-center">
<div class="bg-primary-100 p-2 rounded-lg">
<i class="fas fa-chart-line text-primary-600 text-xl"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-600">Performance</p>
<p class="text-lg font-bold text-dark">+87%</p>
</div>
</div>
</div>
<div class="absolute -top-6 -right-6 bg-white p-4 rounded-xl shadow-lg w-64">
<div class="flex items-center">
<div class="bg-primary-100 p-2 rounded-lg">
<i class="fas fa-clock text-primary-600 text-xl"></i>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-600">Temps gagné</p>
<p class="text-lg font-bold text-dark">+120h/mois</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce text-primary-600">
<i class="fas fa-chevron-down text-2xl"></i>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-6 font-heading">Transformer votre entreprise avec l'IA</h2>
<p class="text-lg text-gray-600 mb-6">
Silitic est une entreprise spécialisée dans le développement de solutions d'intelligence artificielle sur mesure pour les entreprises de toutes tailles.
</p>
<p class="text-lg text-gray-600 mb-8">
Notre équipe d'experts combine expertise technique et compréhension des enjeux métiers pour vous proposer des solutions qui créent de la valeur.
</p>
<div class="flex flex-wrap gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
<div class="bg-primary-100 p-2 rounded-lg mr-3">
<i class="fas fa-check text-primary-600"></i>
</div>
<span class="font-medium">Solutions sur mesure</span>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
<div class="bg-primary-100 p-2 rounded-lg mr-3">
<i class="fas fa-check text-primary-600"></i>
</div>
<span class="font-medium">Approche éthique</span>
</div>
</div>
</div>
<div class="relative">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="w-full rounded-2xl shadow-lg" style="max-height: 500px; object-fit: cover;">
<div class="absolute -bottom-6 -right-6 bg-white p-6 rounded-xl shadow-lg w-64">
<div class="text-center">
<p class="text-4xl font-bold text-primary-600 mb-2">5+</p>
<p class="text-sm font-medium text-gray-600">Années d'expérience</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-16 gradient-animated text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-8 text-center">
<div class="p-6">
<p class="text-4xl font-bold mb-2">50+</p>
<p class="text-sm font-medium">Clients satisfaits</p>
</div>
<div class="p-6">
<p class="text-4xl font-bold mb-2">120+</p>
<p class="text-sm font-medium">Projets réalisés</p>
</div>
<div class="p-6">
<p class="text-4xl font-bold mb-2">15+</p>
<p class="text-sm font-medium">Experts IA</p>
</div>
<div class="p-6">
<p class="text-4xl font-bold mb-2">98%</p>
<p class="text-sm font-medium">Satisfaction client</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-primary-600 font-semibold">Nos solutions</span>
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 font-heading">Services sur mesure</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Nous développons des solutions adaptées à vos besoins spécifiques.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="bg-gray-50 p-8 rounded-xl card-hover">
<div class="service-icon gradient-bg">
<i class="fas fa-robot"></i>
</div>
<h3 class="text-xl font-bold mb-3 font-heading">Développement d'IA</h3>
<p class="text-gray-600 mb-4">
Conception et déploiement de modèles d'intelligence artificielle adaptés à vos besoins métiers.
</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Machine Learning</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Deep Learning</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Computer Vision</span>
</li>
</ul>
</div>
<!-- Service 2 -->
<div class="bg-gray-50 p-8 rounded-xl card-hover">
<div class="service-icon gradient-bg">
<i class="fas fa-cogs"></i>
</div>
<h3 class="text-xl font-bold mb-3 font-heading">Automatisation</h3>
<p class="text-gray-600 mb-4">
Optimisation de vos processus métiers grâce à des solutions d'automatisation intelligentes.
</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>RPA (Robotic Process Automation)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Workflows intelligents</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Intégration systèmes</span>
</li>
</ul>
</div>
<!-- Service 3 -->
<div class="bg-gray-50 p-8 rounded-xl card-hover">
<div class="service-icon gradient-bg">
<i class="fas fa-chart-bar"></i>
</div>
<h3 class="text-xl font-bold mb-3 font-heading">Analyse de données</h3>
<p class="text-gray-600 mb-4">
Transformation de vos données en insights actionnables pour une meilleure prise de décision.
</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Business Intelligence</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Data Visualization</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Prédictions avancées</span>
</li>
</ul>
</div>
<!-- Service 4 -->
<div class="bg-gray-50 p-8 rounded-xl card-hover">
<div class="service-icon gradient-bg">
<i class="fas fa-cloud"></i>
</div>
<h3 class="text-xl font-bold mb-3 font-heading">Solutions Cloud</h3>
<p class="text-gray-600 mb-4">
Déploiement et optimisation de vos solutions IA sur les plateformes cloud les plus performantes.
</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Architecture cloud</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Optimisation coûts</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Sécurité des données</span>
</li>
</ul>
</div>
<!-- Service 5 -->
<div class="bg-gray-50 p-8 rounded-xl card-hover">
<div class="service-icon gradient-bg">
<i class="fas fa-lightbulb"></i>
</div>
<h3 class="text-xl font-bold mb-3 font-heading">Conseil Stratégique</h3>
<p class="text-gray-600 mb-4">
Accompagnement dans la définition et la mise en œuvre de votre stratégie IA.
</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Roadmap technologique</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Étude de faisabilité</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Formation équipes</span>
</li>
</ul>
</div>
<!-- Service 6 -->
<div class="bg-gray-50 p-8 rounded-xl card-hover">
<div class="service-icon gradient-bg">
<i class="fas fa-mobile-alt"></i>
</div>
<h3 class="text-xl font-bold mb-3 font-heading">Applications intelligentes</h3>
<p class="text-gray-600 mb-4">
Développement d'applications mobiles et web intégrant des fonctionnalités IA avancées.
</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Reconnaissance vocale</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Recommandation personnalisée</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-primary-600 mt-1 mr-2 text-sm"></i>
<span>Chatbots intelligents</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Process Section -->
<section class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-primary-600 font-semibold">Notre méthode</span>
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 font-heading">Processus de travail</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Une approche structurée pour des résultats optimaux.</p>
</div>
<div class="grid md:grid-cols-4 gap-8">
<!-- Step 1 -->
<div class="text-center">
<div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center text-white text-xl font-bold mx-auto mb-4">1</div>
<h3 class="text-lg font-bold mb-2">Analyse</h3>
<p class="text-gray-600">Compréhension approfondie de vos besoins et contraintes.</p>
</div>
<!-- Step 2 -->
<div class="text-center">
<div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center text-white text-xl font-bold mx-auto mb-4">2</div>
<h3 class="text-lg font-bold mb-2">Conception</h3>
<p class="text-gray-600">Définition de l'architecture technique et des spécifications.</p>
</div>
<!-- Step 3 -->
<div class="text-center">
<div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center text-white text-xl font-bold mx-auto mb-4">3</div>
<h3 class="text-lg font-bold mb-2">Développement</h3>
<p class="text-gray-600">Implémentation itérative avec validation continue.</p>
</div>
<!-- Step 4 -->
<div class="text-center">
<div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center text-white text-xl font-bold mx-auto mb-4">4</div>
<h3 class="text-lg font-bold mb-2">Déploiement</h3>
<p class="text-gray-600">Mise en production et accompagnement post-livraison.</p>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-primary-600 font-semibold">Nos réalisations</span>
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 font-heading">Projets récents</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Découvrez comment nous avons aidé nos clients à atteindre leurs objectifs.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project 1 -->
<div class="project-card">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="w-full h-64 object-cover">
<div class="project-overlay">
<h3 class="text-xl font-bold text-white mb-2">Conseil et intégration IA</h3>
<p class="text-gray-300 mb-4">Solutions d'intelligence artificielle sur mesure pour votre entreprise.</p>
<a href="#" class="text-white font-medium hover:underline">Voir l'étude de cas →</a>
</div>
</div>
<!-- Project 2 -->
<div class="project-card">
<img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="w-full h-64 object-cover">
<div class="project-overlay">
<h3 class="text-xl font-bold text-white mb-2">Automatisation des processus métiers (RPA - Robotic Process Automation)</h3>
<p class="text-gray-300 mb-4">Optimisation des processus métiers et automatisation des tâches répétitives pour améliorer l'efficacité opérationnelle.</p>
<a href="#" class="text-white font-medium hover:underline">Voir l'étude de cas →</a>
</div>
</div>
<!-- Project 3 -->
<div class="project-card">
<img src="https://images.unsplash.com/photo-1526498460520-4c246339dccb?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="w-full h-64 object-cover">
<div class="project-overlay">
<h3 class="text-xl font-bold text-white mb-2">Assistant bancaire</h3>
<p class="text-gray-300 mb-4">Chatbot intelligent pour le service client d'une grande banque.</p>
<a href="#" class="text-white font-medium hover:underline">Voir l'étude de cas →</a>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-flex items-center text-primary-600 font-medium hover:text-primary-800">
<span>Voir tous nos projets</span>
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-primary-600 font-semibold">Témoignages</span>
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 font-heading">Ce que disent nos clients</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Découvrez les retours de nos clients satisfaits.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/32.jpg" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Sophie Martin</h4>
<p class="text-sm text-gray-600">Directrice Marketing, TechCorp</p>
</div>
</div>
<p class="text-gray-600">
"L'équipe de Silitic a transformé notre façon de travailler. Leur solution d'analyse prédictive nous a permis d'augmenter nos ventes de 30% en 6 mois."
</p>
<div class="mt-4 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>
<!-- Testimonial 2 -->
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/54.jpg" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Pierre Dubois</h4>
<p class="text-sm text-gray-600">CEO, RetailSolutions</p>
</div>
</div>
<p class="text-gray-600">
"L'automatisation de nos processus a été une révolution. Nous avons économisé plus de 200 heures de travail mensuel grâce à leur solution."
</p>
<div class="mt-4 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>
<!-- Testimonial 3 -->
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Amélie Leroy</h4>
<p class="text-sm text-gray-600">Directrice Technique, HealthPlus</p>
</div>
</div>
<p class="text-gray-600">
"Leur approche sur mesure et leur expertise en IA ont permis d'améliorer significativement la précision de nos diagnostics médicaux."
</p>
<div class="mt-4 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>
<!-- CTA Section -->
<section class="py-20 gradient-animated text-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6 font-heading">Prêt à transformer votre entreprise avec l'IA ?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">
Contactez-nous dès aujourd'hui pour discuter de votre projet et découvrir comment nous pouvons vous aider.
</p>
<a href="#contact" class="inline-block bg-white text-primary-600 px-8 py-3 rounded-lg font-semibold shadow-lg hover:bg-gray-100 transition">Discuter avec un expert</a>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<span class="text-primary-600 font-semibold">Contactez-nous</span>
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 font-heading">Travaillons ensemble</h2>
<p class="text-lg text-gray-600 mb-8">
Que vous ayez un projet précis ou simplement des questions sur nos services, notre équipe est là pour vous aider.
</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-primary-100 p-3 rounded-lg mr-4">
<i class="fas fa-map-marker-alt text-primary-600"></i>
</div>
<div>
<h3 class="font-bold text-lg mb-1">Adresse</h3>
<p class="text-gray-600">123 Rue de l'Innovation<br>75015 Paris, France</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-primary-100 p-3 rounded-lg mr-4">
<i class="fas fa-phone-alt text-primary-600"></i>
</div>
<div>
<h3 class="font-bold text-lg mb-1">Téléphone</h3>
<p class="text-gray-600">+33 1 23 45 67 89</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-primary-100 p-3 rounded-lg mr-4">
<i class="fas fa-envelope text-primary-600"></i>
</div>
<div>
<h3 class="font-bold text-lg mb-1">Email</h3>
<p class="text-gray-600">contact@silitic.com</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-sm">
<h3 class="text-xl font-bold mb-6 font-heading">Envoyez-nous un message</h3>
<form class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<input type="text" placeholder="Nom complet" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
<input type="email" placeholder="Email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
</div>
<input type="text" placeholder="Sujet" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent">
<textarea placeholder="Message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"></textarea>
<button type="submit" class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition shadow-md w-full">Envoyer le message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-5 gap-8 mb-8">
<div class="md:col-span-2">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold text-xl">S</div>
<span class="ml-3 text-xl font-bold font-heading">Silitic</span>
</div>
<p class="text-gray-400 mb-4">
Solutions d'intelligence artificielle et d'automatisation pour les entreprises innovantes.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
<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-github"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 font-heading">Entreprise</h3>
<ul class="space-y-2">
<li><a href="#about" class="text-gray-400 hover:text-white transition">À propos</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Presse</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 font-heading">Services</h3>
<ul class="space-y-2">
<li><a href="#services" class="text-gray-400 hover:text-white transition">Développement IA</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white transition">Automatisation</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white transition">Analyse de données</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white transition">Conseil stratégique</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 font-heading">Ressources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Guides</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm">&copy; 2023 Silitic. Tous droits réservés.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white text-sm transition">Confidentialité</a>
<a href="#" class="text-gray-400 hover:text-white text-sm transition">Conditions</a>
<a href="#" class="text-gray-400 hover:text-white text-sm transition">Cookies</a>
</div>
</div>
</div>
</footer>
<!-- Back to Top -->
<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 rounded-full gradient-bg text-white shadow-lg hidden hover:scale-110 transition flex items-center justify-center">
<i class="fas fa-arrow-up"></i>
</button>
<!-- JavaScript -->
<script>
// Navbar scroll effect
window.addEventListener('scroll', () => {
const nav = document.getElementById('navbar');
if (window.scrollY > 50) {
nav.classList.add('bg-white', 'shadow-sm');
nav.classList.remove('py-4');
nav.classList.add('py-2');
} else {
nav.classList.remove('bg-white', 'shadow-sm');
nav.classList.remove('py-2');
nav.classList.add('py-4');
}
});
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', () => {
document.getElementById('mobile-menu').classList.toggle('hidden');
});
// Back to top
const backBtn = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
backBtn.classList.toggle('hidden', window.scrollY < 300);
});
backBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
document.getElementById('mobile-menu')?.classList.add('hidden');
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Language switcher (placeholder)
function changeLanguage(lang) {
// Real i18n logic would go here
alert('Langue changée en ' + lang.toUpperCase());
}
// Animate elements when they come into view
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fadeIn');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.service-icon, .project-card, .card-hover').forEach(el => {
observer.observe(el);
});
</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=syffus/si" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>