File size: 8,925 Bytes
51aea09
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7cab33f
51aea09
 
 
 
 
 
 
 
 
 
4be153b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51aea09
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
cbb022a
51aea09
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Séli I.A Master Agency - Inscription</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <div class="scrolling-header">
                <div class="scrolling-text">
                    <span>SELI IA MASTER AGENCY</span>
                    <span>LA TASK FORCE DE L'IA AU SERVICE DE VOTRE BUSINESS</span>
                </div>
            </div>
        </header>

        <main>
            <section class="registration-tunnel">
                <div class="progress-indicator">
                    <div class="progress-step active" data-step="1">1</div>
                    <div class="progress-step" data-step="2">2</div>
                    <div class="progress-step" data-step="3">3</div>
                </div>

                <div id="registration-steps">
                    <div class="step active" data-step="1">
                        <h2>Informations Personnelles</h2>
                        <form id="personal-info-form">
                            <div class="input-group">
                                <input type="text" placeholder="Nom" required>
                                <input type="text" placeholder="Prénom" required>
                            </div>
                            <input type="tel" placeholder="Numéro de téléphone WhatsApp" required>
                            <button type="button" onclick="nextStep(2)">Suivant</button>
                        </form>
                    </div>

                    <div class="step" data-step="2">
                        <h2>Détails de l'Entreprise</h2>
                        <form id="company-info-form">
                            <input type="text" placeholder="Nom de l'entreprise" required>
                            <input type="text" placeholder="Secteur d'activité" required>
                            <select required>
                                <option value="">Taille de l'entreprise</option>
                                <option value="solopreneur">Solopreneur</option>
                                <option value="1-5">1-5 employés</option>
                                <option value="1-10">1-10 employés</option>
                                <option value="11-50">11-50 employés</option>
                                <option value="51-200">51-200 employés</option>
                                <option value="200+">Plus de 200 employés</option>
                            </select>
                            <div class="form-navigation">
                                <button type="button" class="btn-secondary" onclick="nextStep(1)">Précédent</button>
                                <button type="button" onclick="nextStep(3)">Suivant</button>
                            </div>
                        </form>
                    </div>

                    <div class="step" data-step="3">
                        <h2>Exprimer votre besoin</h2>
                        <form id="ai-needs-form">
                            <div class="checkbox-group">
                                <label class="checkbox-label">
                                    <input type="checkbox" name="services" value="audit">
                                    <span>Audit de vos méthodes de travail dans le but d'intégrer des outils IA dans vos processus de travail</span>
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox" name="services" value="integration">
                                    <span>Prescription sans intégration ou Prescription & intégration d'outils IA dans vos processus de travail</span>
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox" name="services" value="workshop">
                                    <span>Atelier d'initiation & coaching continu en IA pour entreprise ou solopreneur</span>
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox" name="services" value="development">
                                    <span>Formation en développement assisté par IA pour la création de site web ou d'application pour votre entreprise</span>
                                </label>
                                <label class="checkbox-label">
                                    <input type="checkbox" name="services" value="web-mobile">
                                    <span>Service de création de site web et applications mobiles (Android/iOS)</span>
                                </label>
                            </div>
                            <textarea placeholder="Décrivez vos objectifs spécifiques"></textarea>
                            <div class="form-navigation">
                                <button type="button" class="btn-secondary" onclick="nextStep(2)">Précédent</button>
                                <button type="submit">Soumettre ma demande</button>
                            </div>
                            <p class="whatsapp-note">Vous serez redirigé vers un numéro WhatsApp lors de la soumission du formulaire. Assurez-vous d'avoir WhatsApp installé sur cet appareil.</p>
                        </form>
                    </div>

                    <div id="services-gallery-modal" class="modal">
                        <div class="modal-content">
                            <span class="close-modal">&times;</span>
                            <h2>Galerie des Services</h2>
                            <div class="swiper services-gallery">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img src="https://i.ibb.co/nN7rMH3Z/5.png" alt="Séli IA Master Agency Services 1">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="https://i.ibb.co/rGVmnNZJ/6.png" alt="Séli IA Master Agency Services 2">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="https://i.ibb.co/wFYr38qp/4.png" alt="Séli IA Master Agency Services 3">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="https://i.ibb.co/nsYC5Wqs/7.png" alt="Séli IA Master Agency Services 4">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="https://i.ibb.co/4wJNwDw3/2.png" alt="Séli IA Master Agency Services 5">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="https://i.ibb.co/sdHhr6SM/1.png" alt="Séli IA Master Agency Services 6">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="https://i.ibb.co/1G93sJgR/3.png" alt="Séli IA Master Agency Services 7">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="https://i.ibb.co/0pTdpdRN/Ajouter-un-titre.png" alt="Séli IA Master Agency Services 8">
                                    </div>
                                </div>
                                <div class="swiper-pagination"></div>
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                        </div>
                    </div>

                    <div class="gallery-button-container">
                        <button id="open-services-gallery" class="btn-gallery">Galerie Services</button>
                    </div>
                </div>
            </section>
        </main>

        <footer>
            <p> 2025 SELI I.A Master Agency - Transformation Digitale par l'IA</p>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="registration.js"></script>
</body>
</html>