index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TissAI - Plateforme SaaS pour l'industrie textile marocaine</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary: #6C63FF;
            --secondary: #FF6584;
            --dark: #2D3748;
            --light: #F7FAFC;
        }
        
        body {
            font-family: 'Montserrat', sans-serif;
            scroll-behavior: smooth;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, var(--primary) 0%, #4F46E5 100%);
        }
        
        .module-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);
        }
        
        .feature-icon {
            width: 80px;
            height: 80px;
            background-color: rgba(108, 99, 255, 0.1);
        }
        
        .animated-underline {
            position: relative;
            display: inline-block;
        }
        
        .animated-underline::after {
            content: '';
            position: absolute;
            width: 100%;
            transform: scaleX(0);
            height: 3px;
            bottom: -5px;
            left: 0;
            background-color: var(--secondary);
            transform-origin: bottom right;
            transition: transform 0.25s ease-out;
        }
        
        .animated-underline:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }
        
        .svg-wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80px;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <custom-navbar></custom-navbar>
<!-- Hero Section -->
    <section class="hero-gradient text-white pt-32 pb-20 relative overflow-hidden">
        <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 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb5">Révolutionnez l'industrie textile marocaine</h1>
                    <p class="text-xl mt-6 mb-8">L'intelligence artificielle au service de la compétitivité et de la durabilité du Made in Morocco</p>
                    <div class="flex space-x-4">
                        <button class="bg-white text-indigo-600 px-6 py-3 rounded-md text-lg font-semibold hover:bg-gray-100 transition duration-300">
                            Démarrer l'essai gratuit
                        </button>
                        <button class="border-2 border-white text-white px-6 py-3 rounded-md text-lg font-semibold hover:bg-white hover:text-indigo-600 transition duration-300">
                            Voir la démo
                        </button>
                    </div>
                </div>
                <div class="md:w-1/2 relative">
                    <img src="http://static.photos/textile/1200x630/5" alt="Industrie textile marocaine" class="rounded-lg shadow-2xl w-full">
                    <div class="absolute -bottom-10 -left-10 bg-white p-4 rounded-lg shadow-lg">
                        <div class="text-indigo-600 font-bold">+87%</div>
                        <div class="text-gray-600 text-sm">Efficacité accrue</div>
                    </div>
                </div>
            </div>
        </div>
        <svg class="svg-wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="1" d="M0,160L48,154.7C96,149,192,139,288,154.7C384,171,480,213,576,213.3C672,213,768,171,864,144C960,117,1056,107,1152,112C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
    </section>

    <!-- Solution Section -->
    <section id="solution" 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">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Une solution intégrée pour toute la chaîne de valeur</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">TissAI combine les dernières innovations en intelligence artificielle pour transformer chaque étape du processus textile, de la conception à la distribution.</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                <div class="bg-gray-50 p-8 rounded-xl text-center">
                    <div class="feature-icon rounded-full flex items-center justify-center mx-auto mb-6">
                        <i data-feather="eye" class="text-indigo-600" width="40" height="40"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">Anticipation des tendances</h3>
                    <p class="text-gray-600">Analyse en temps réel des tendances mondiales pour guider
    <custom-footer></custom-footer>
    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>