PageSourceSearch

https://thesymo.com/

html thesymo.com collected 2026-10-02 00:56:39 UTC 65,181 bytes, 2,080 lines download raw bytes

1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title> THESYMO - Support You More Online</title>
8   <!-- Favicon -->
9   <link href="https://thesymo.com/public/img/favicon-1747678168.png" rel="icon">
10  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
11  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css"
12    rel="stylesheet">
13  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
14  <link rel="preconnect" href="https://fonts.googleapis.com">
15  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
17    rel="stylesheet">
18<link href="https://thesymo.com/css/styles1.css" rel="stylesheet">
19  <style>
20    * {
21      margin: 0;
22      padding: 0;
23      box-sizing: border-box;
24    }
25
26    body {
27      font-family: 'Open Sans', sans-serif;
28      overflow-x: hidden;
29    }
30
31    .slide-text .word {
32      font-size: calc(7000vw/1018);
33    }
34
35    .hero-section {
36      position: relative;
37      padding: 120px 0;
38      overflow: hidden;
39      height: 700px;
40    }
41
42    .hero-section::before {
43      content: '';
44      position: absolute;
45      top: 0;
46      left: 0;
47      right: 0;
48      bottom: 0;
49      background-color: rgba(0, 0, 0, 0.5);
50      z-index: 1;
51      backdrop-filter: blur(1px);
52      /* Ajout d'un léger flou supplémentaire */
53    }
54
55    .hero-slideshow {
56      position: absolute;
57      top: 0;
58      left: 0;
59      width: 100%;
60      height: 100%;
61    }
62
63    .slide-hero {
64      position: absolute;
65      top: 0;
66      left: 0;
67      width: 100%;
68      height: 100%;
69      opacity: 0;
70      visibility: hidden;
71      z-index: 0;
72    }
73
74    .slide-hero img {
75      width: 100%;
76      height: 100%;
77      object-fit: cover;
78      filter: blur(2px) brightness(0.5);
79      /* Ajout du flou et diminution de la luminosité */
80    }
81
82    .hero-content {
83      position: relative;
84      z-index: 2;
85      height: 100%;
86      display: flex;
87      flex-direction: column;
88      justify-content: center;
89      color: white;
90      padding: 0 5%;
91    }
92
93    .slide-text {
94      font-size: 3rem;
95      font-weight: 500;
96      /* Légèrement plus fin pour plus de lisibilité */
97      overflow: hidden;
98      color: rgba(255, 255, 255, 0.95);
99    }
100
101    .slide-text .word {
102      display: inline-block;
103      overflow: hidden;
104      margin-right: 0.5rem;
105    }
106
107    .slide-text .word span {
108      display: inline-block;
109      transform: translateY(100%);
110      opacity: 0;
111    }
112
113    @media (max-width: 768px) {
114      .slide-text {
115        font-size: 2rem;
116      }
117    }
118    @media (max-width: 768px) { /* Ajustez la valeur 768px selon vos besoins */
119    .carousel-item .col-md-6 p.lead {
120        display: none;
121    }
122    .hero-title2 {
123        font-size: 1.75rem; /* Taille réduite pour les écrans plus petits */
124    }
125    }
126
127
128    .title {
129      /* font-family: Arial, sans-serif; */
130      font-size: 3rem;
131      font-weight: 800;
132      color: #333;
133      /* margin: 20px 0; */
134    }
135
136    .title-start {
137      text-align: left;
138    }
139
140    .title-end {
141      text-align: right;
142    }
143
144    .slider-container {
145      width: 100%;
146      height: 500px;
147      /* Augmenté pour accommoder le décalage vertical */
148      overflow: hidden;
149      position: relative;
150    }
151
152    .slider {
153      display: flex;
154      position: absolute;
155      height: 100%;
156      align-items: center;
157      /* Centre verticalement par défaut */
158    }
159
160    .slides {
161      flex: 0 0 400px;
162      height: 400px;
163      /* Hauteur de base des slides */
164      padding: 0 30px;
165      transition: transform 0.3s ease;
166      position: relative;
167    }
168
169    .slides img {
170      width: 100%;
171      height: 100%;
172      object-fit: cover;
173    }
174
175    /* Classes pour les différentes positions verticales */
176    .slides:nth-child(3n+1) {
177      transform: translateY(-50px);
178    }
179
180    .slides:nth-child(3n+2) {
181      transform: translateY(50px);
182    }
183
184    .slides:nth-child(3n+3) {
185      transform: translateY(0);
186    }
187
188    /* Style de la légende */
189    .caption {
190      position: absolute;
191      bottom: 10px;
192      left: 20px;
193      right: 20px;
194      /* background: rgba(0, 0, 0, 0.7); */
195      color: white;
196      padding: 10px 15px;
197      /* font-family: Arial, sans-serif; */
198      font-size: 16px;
199      font-weight: bold;
200      border-radius: 4px;
201      opacity: 0.9;
202      /* transform: skew(-5deg); */
203      /* Effet incliné */
204    }
205
206    .hero-section {
207      position: relative;
208      padding: 120px 0;
209      overflow: hidden;
210      height: 700px;
211      pointer-events: auto;
212    }
213
214    .hero-section::before {
215      content: '';
216      position: absolute;
217      top: 0;
218      left: 0;
219      right: 0;
220      bottom: 0;
221      background-color: rgba(0, 0, 0, 0.2);
222      /* Ajustez la valeur 0.5 pour modifier l'opacité */
223      z-index: 1;
224    }
225
226    .hero-slideshow {
227      position: absolute;
228      top: 0;
229      left: 0;
230      width: 100%;
231      height: 100%;
232      /* display: none; */
233    }
234
235    .hero-slideshow::after {
236      content: '';
237      position: absolute;
238      top: 0;
239      left: 0;
240      right: 0;
241      bottom: 0;
242      /* background: rgba(0, 0, 0, 0.6); */
243      z-index: 1;
244    }
245
246    .hero-slideshow img {
247      position: absolute;
248      top: 0;
249      left: 0;
250      width: 100%;
251      height: 100%;
252      object-fit: cover;
253      opacity: 0;
254      animation: slideshow 20s linear infinite;
255      z-index: 0;
256    }
257
258    .hero-slideshow img:nth-child(2) {
259      animation-delay: 4s;
260    }
261
262    .hero-slideshow img:nth-child(3) {
263      animation-delay: 8s;
264    }
265
266    .hero-slideshow img:nth-child(4) {
267      animation-delay: 12s;
268    }
269
270    @keyframes  slideshow {
271
272      0%,
273      20% {
274        opacity: 1;
275      }
276
277      /* 25%,
278  95% {
279    opacity: 0;
280  } */
281
282      100% {
283        opacity: 1;
284      }
285    }
286
287    .hero-content {
288      position: relative;
289      z-index: 2;
290      height: auto;
291      display: flex;
292      flex-direction: column;
293      justify-content: center;
294      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
295      /* Ajout d'une ombre au texte */
296    }
297
298    .hero-title {
299      font-size: 3.5rem;
300      font-weight: 800;
301      margin-bottom: 2rem;
302      color: #ffffff;
303    }
304
305    .hero-subtitle {
306      font-size: 1.5rem;
307      color: rgba(255, 255, 255, 0.9);
308      margin-bottom: 2rem;
309      font-weight: 300;
310      text-align: left;
311    }
312
313    .hero-title2 {
314      font-size: 3rem;
315      font-weight: 800;
316      margin-bottom: 1.5rem;
317      background: #333;
318      -webkit-background-clip: text;
319      background-clip: text;
320      color: white
321      /*-webkit-text-fill-color: transparent;*/
322    }
323
324  .hero-subtitle2 {
325  font-size: 1.5rem;
326  color: #333;
327  margin-bottom: 2rem;
328  font-weight: 300;
329  max-width: 800px; /* Largeur maximale du texte */
330  margin-left: auto; /* Centrer horizontalement */
331  margin-right: auto; /* Centrer horizontalement */
332  text-align: center; /* Centrer le texte */
333  padding-left: 20px; /* Espace à gauche */
334  padding-right: 20px; /* Espace à droite */
335}
336
337    .cta-wrapper {
338      display: flex;
339      gap: 1rem;
340      justify-content: flex-start;
341      margin-top: 2rem;
342    }
343
344    .btn-creator {
345      padding: 1rem 2.5rem;
346      font-size: 1.1rem;
347      font-weight: 600;
348      border-radius: 50px;
349      transition: all 0.3s ease;
350      text-transform: uppercase;
351      letter-spacing: 1px;
352    }
353
354    .btn-primary-creator {
355      background: #5d0706;
356      background: linear-gradient(90deg, #5d0706 0%, rgba(215, 80, 30, 1) 50%, #5d0706 100%);
357      border: none;
358      color: white;
359    }
360
361    .btn-primary-creator:hover {
362      transform: translateY(-3px);
363      box-shadow: 0 10px 20px rgba(139, 0, 0, 0.3);
364    }
365
366    .stats-section {
367      background: #5d0706;
368      background: linear-gradient(90deg, #5d0706 0%, rgba(215, 80, 30, 1) 50%, #5d0706 100%);
369      border-radius: 0;
370      /* Suppression des coins arrondis pour prendre toute la largeur */
371      padding: 2rem 0;
372      width: 100%;
373      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
374    }
375
376    .stats-header {
377      text-align: center;
378      margin-bottom: 2rem;
379    }
380
381    .stats-header h2 {
382      color: #ffffff;
383      font-size: 2rem;
384      margin-bottom: 0.5rem;
385      font-weight: 700;
386    }
387
388    .stats-header p {
389      color: rgba(255, 255, 255, 0.9);
390      font-size: 1.1rem;
391    }
392
393    .stat-item {
394      display: flex;
395      align-items: center;
396      justify-content: center;
397      /* padding: 1.5rem; */
398      transition: transform 0.3s ease;
399    }
400
401    .stat-item:hover {
402      transform: translateY(-5px);
403    }
404
405    .stat-icon {
406      font-size: 2rem;
407      margin-right: 1.2rem;
408      color: #ff9966;
409      width: 60px;
410      text-align: center;
411    }
412
413    .stat-content h3 {
414      color: #ffffff;
415      font-size: 1.5rem;
416      margin: 0;
417      font-weight: 700;
418    }
419
420    .stat-content h5 {
421      color: rgba(255, 255, 255, 0.9);
422      font-size: 1rem;
423      margin: 0;
424      font-weight: 400;
425    }
426
427    @media (max-width: 768px) {
428      .hero-title {
429        font-size: 2.5rem;
430      }
431
432      .hero-subtitle {
433        font-size: 1.2rem;
434      }
435
436      .stat-item {
437        margin-bottom: 1.5rem;
438      }
439    }
440
441    /* Style pour le simulateur de revenus en rouge */
442    .earnings-simulator {
443      background-color: #f8f9fa;
444      padding: 4rem 0;
445    }
446
447    .earnings-simulator h1 {
448      color: #5d0706;
449    }
450
451    .earnings-simulator .card {
452      border-color: rgba(139, 0, 0, 0.1);
453    }
454
455    .earnings-simulator .form-label {
456      color: #333;
457    }
458
459    .earnings-simulator .text-primary,
460    .earnings-simulator .fw-bold.text-primary {
461      color: #5d0706 !important;
462    }
463
464    .earnings-simulator .form-range::-webkit-slider-thumb {
465      background: #5d0706;
466    }
467
468    .earnings-simulator .form-range::-moz-range-thumb {
469      background: #5d0706;
470    }
471
472    .earnings-simulator .form-range::-ms-thumb {
473      background: #5d0706;
474    }
475
476    .earnings-simulator .result-box {
477      background: linear-gradient(to right, rgba(139, 0, 0, 0.05), rgba(139, 0, 0, 0.1));
478      border-left: 4px solid #5d0706;
479    }
480
481    .social-icons i {
482      color: #5d0706;
483      opacity: 0.8;
484    }
485
486    /* Styles pour la navbar modifiée */
487    #mainNav {
488      background: transparent;
489      transition: all 0.3s ease;
490    }
491
492    #mainNav.scrolled {
493      background: rgba(10, 10, 10, 0.95);
494      backdrop-filter: blur(10px);
495      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
496    }
497
498    #mainNav .container {
499      display: flex;
500      justify-content: space-between;
501      align-items: center;
502      position: relative;
503    }
504
505    /* Logo au centre */
506    #mainNav .navbar-brand {
507      color: #fff;
508      font-weight: 700;
509      /* font-size: 1.8rem;
510      letter-spacing: 1px; */
511      position: absolute;
512      left: 50%;
513      transform: translateX(-50%);
514      margin-top: 70px;
515    }
516
517    /* Menu de navigation (à gauche) */
518    #mainNav .navbar-collapse {
519      flex-grow: 0;
520    }
521
522    #mainNav .navbar-nav {
523      margin-right: auto;
524    }
525
526    #mainNav .nav-link {
527      color: rgba(255, 255, 255, 0.85);
528      font-weight: 500;
529      transition: all 0.2s ease;
530      margin: 0 10px;
531      padding: 10px 0;
532      position: relative;
533    }
534
535    #mainNav .nav-link:hover {
536      color: #fff;
537    }
538
539    #mainNav .nav-link::after {
540      content: '';
541      position: absolute;
542      bottom: 5px;
543      left: 0;
544      width: 0;
545      height: 2px;
546      background: linear-gradient(90deg, #ff4d4d, #5d0706);
547      transition: width 0.3s ease;
548    }
549
550    #mainNav .nav-link:hover::after {
551      width: 100%;
552    }
553
554    .auth-links {
555      display: flex;
556      align-items: center;
557      z-index: 10;
558    }
559
560    /* Lien de connexion (à droite) */
561    .nav-link-login {
562      color: rgba(255, 255, 255, 0.85);
563      font-weight: 500;
564      transition: all 0.2s ease;
565      text-decoration: none;
566      padding-right: 0;
567      margin-left: auto;
568      z-index: 10;
569    }
570
571    .nav-link-login:hover {
572      color: #fff;
573      text-decoration: none;
574    }
575
576    /* Bouton du menu hamburger */
577    .navbar-toggler {
578      border: none;
579      color: white;
580      padding: 0.25rem 0.75rem;
581      z-index: 10;
582    }
583
584    .navbar-toggler-icon {
585      filter: invert(1);
586    }
587
588    /* Ajustements pour mobile */
589    @media (max-width: 991px) {
590      #mainNav .navbar-nav {
591        padding: 20px 0;
592        text-align: center;
593      }
594
595      #mainNav .nav-link {
596        text-align: center;
597        margin: 5px 0;
598      }
599
600      #mainNav .nav-link::after {
601        display: none;
602      }
603
604      /* Sur mobile, s'assurer que hamburger est à gauche et login à droite */
605      #mainNav .navbar-toggler {
606        order: 1;
607      }
608
609      #mainNav .navbar-brand {
610        position: static;
611        transform: none;
612        order: 2;
613        margin: 0 auto;
614      }
615
616      .nav-link-login {
617        order: 3;
618      }
619
620      /* Menu en pleine largeur sur mobile quand déplié */
621      #mainNav .navbar-collapse {
622        position: absolute;
623        top: 100%;
624        left: 0;
625        right: 0;
626        background: rgba(10, 10, 10, 0.95);
627        padding: 1rem;
628      }
629
630      .auth-links {
631        order: 3;
632      }
633    }
634
635    .btn-start {
636      background: linear-gradient(90deg, #5d0706 0%, rgba(215, 80, 30, 1) 50%, #5d0706 100%);
637      color: #fff;
638      border: none;
639      /* padding: 10px 20px; */
640      font-size: 2rem;
641      /* font-weight: 600; */
642      border-radius: 50px;
643      transition: all 0.3s ease;
644      text-transform: uppercase;
645      letter-spacing: 1px;
646      width: 30%;
647      height: 90px;
648      display: flex;
649      align-items: center;
650      justify-content: center;
651      margin: auto;
652    }
653
654    .btn-start i {
655      margin-left: 20px;
656      font-size: 1.5rem;
657    }
658
659    .footer-section {
660      background: rgba(10, 10, 10, 0.97);
661      color: rgba(255, 255, 255, 0.8);
662      position: relative;
663    }
664
665    .footer-section::before {
666      content: "";
667      position: absolute;
668      top: 0;
669      left: 0;
670      width: 100%;
671      height: 5px;
672      background: linear-gradient(90deg, #5d0706 0%, rgba(215, 80, 30, 1) 50%, #5d0706 100%);
673    }
674
675    .footer-heading {
676      color: #fff;
677      font-weight: 600;
678      margin-bottom: 1.5rem;
679      position: relative;
680      padding-bottom: 10px;
681    }
682
683    .footer-heading::after {
684      content: "";
685      position: absolute;
686      bottom: 0;
687      left: 0;
688      width: 40px;
689      height: 2px;
690      background: linear-gradient(90deg, #5d0706 0%, rgba(215, 80, 30, 1) 100%);
691    }
692
693    .social-links {
694      display: flex;
695      flex-wrap: wrap;
696    }
697
698    .social-link {
699      display: inline-flex;
700      align-items: center;
701      justify-content: center;
702      width: 36px;
703      height: 36px;
704      border-radius: 50%;
705      background-color: rgba(255, 255, 255, 0.1);
706      color: #fff;
707      transition: all 0.3s ease;
708    }
709
710    .social-link:hover {
711      background: linear-gradient(90deg, #5d0706 0%, rgba(215, 80, 30, 1) 100%);
712      color: #fff;
713      transform: translateY(-3px);
714    }
715
716    .footer-links {
717      list-style: none;
718      padding-left: 0;
719    }
720
721    .footer-links li {
722      margin-bottom: 0.75rem;
723    }
724
725    .footer-links a {
726      color: rgba(255, 255, 255, 0.8);
727      text-decoration: none;
728      transition: all 0.3s ease;
729      position: relative;
730      padding-left: 15px;
731    }
732
733    .footer-links a::before {
734      content: "›";
735      position: absolute;
736      left: 0;
737      color: #d7501e;
738    }
739
740    .footer-links a:hover {
741      color: #fff;
742      padding-left: 20px;
743    }
744
745    .footer-contact {
746      list-style: none;
747      padding-left: 0;
748    }
749
750    .footer-contact li {
751      display: flex;
752      align-items: flex-start;
753      margin-bottom: 1rem;
754    }
755
756    .contact-icon {
757      color: #d7501e;
758      margin-right: 15px;
759      margin-top: 5px;
760    }
761
762    .footer-contact a {
763      color: rgba(255, 255, 255, 0.8);
764      text-decoration: none;
765      transition: all 0.2s ease;
766    }
767
768    .footer-contact a:hover {
769      color: #fff;
770    }
771
772    .download-btn {
773      border-color: #5d0706;
774      color: #fff;
775      transition: all 0.3s ease;
776    }
777
778    .download-btn:hover {
779      background: linear-gradient(90deg, #5d0706 0%, rgba(215, 80, 30, 1) 100%);
780      border-color: transparent;
781      color: #fff;
782    }
783
784    .footer-bottom {
785      border-color: rgba(255, 255, 255, 0.1);
786    }
787
788    .footer-links-inline a {
789      color: rgba(255, 255, 255, 0.6);
790      text-decoration: none;
791      margin-left: 20px;
792      transition: color 0.2s ease;
793    }
794
795    .footer-links-inline a:hover {
796      color: #fff;
797    }
798
799    .language-selector .btn {
800      color: rgba(255, 255, 255, 0.8);
801      border-color: rgba(255, 255, 255, 0.2);
802    }
803
804    .language-selector .btn:hover {
805      background-color: rgba(255, 255, 255, 0.1);
806      border-color: rgba(255, 255, 255, 0.3);
807    }
808
809
810    .login-card {
811      background-color: white;
812      border-radius: 30px;
813      padding: 40px;
814      width: 80%;
815      max-width: 360px;
816      display: flex;
817      flex-direction: column;
818      align-items: center;
819      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
820      margin: auto;
821      position: relative;
822      z-index: 2;
823    }
824
825    .logo {
826      width: 80px;
827      height: 80px;
828      margin-bottom: 20px;
829      border-radius: 40% 60% 70% 30%;
830      background: linear-gradient(90deg, #5d0706 0%, rgba(215, 80, 30, 1) 100%);
831      position: relative;
832      transform: rotate(-10deg);
833    }
834
835    h1 {
836      font-size: 28px;
837      margin: 15px 0 35px 0;
838      font-weight: 700;
839      color: #000;
840      text-align: center;
841    }
842
843    .get-started-btn {
844      background: linear-gradient(90deg, #5d0706 0%, rgba(215, 80, 30, 1) 100%);
845      color: white;
846      border: none;
847      border-radius: 25px;
848      padding: 15px 0;
849      font-size: 16px;
850      width: 100%;
851      font-weight: 500;
852      cursor: pointer;
853      margin-bottom: 20px;
854    }
855
856    .login-text {
857      color: #888;
858      font-size: 14px;
859      margin: 10px 0 30px 0;
860    }
861
862    .login-link {
863      color: #000;
864      text-decoration: none;
865      font-weight: 600;
866    }
867
868    .app-stores {
869      display: flex;
870      justify-content: center;
871      gap: 12px;
872      margin-top: 10px;
873      width: 100%;
874    }
875
876    .store-button {
877      display: flex;
878      align-items: center;
879      background-color: white;
880      border: 1px solid #e0e0e0;
881      border-radius: 8px;
882      padding: 5px 10px;
883      text-decoration: none;
884      color: #000;
885      font-size: 12px;
886    }
887
888    .store-icon {
889      width: 24px;
890      height: 24px;
891      margin-right: 8px;
892      display: flex;
893      align-items: center;
894      justify-content: center;
895    }
896
897    .store-text {
898      display: flex;
899      flex-direction: column;
900      line-height: 1.2;
901    }
902
903    .store-text .small {
904      font-size: 9px;
905      color: #666;
906    }
907
908    .store-text .large {
909      font-size: 14px;
910      font-weight: 500;
911    }
912
913    .login-card-background {
914      background-image: url('https://thesymo.com/public/img/background.png');
915      background-size: cover;
916      background-position: center;
917      background-repeat: no-repeat;
918      backdrop-filter: blur(20px);
919      /* Augmentation du flou */
920      -webkit-backdrop-filter: blur(8px);
921      /* Pour la compatibilité Safari */
922      position: relative;
923      height: 600px;
924      padding-top: 80px;
925    }
926
927    /* Ajout d'une couche semi-transparente pour améliorer la lisibilité */
928    .login-card-background::before {
929      content: '';
930      position: absolute;
931      top: 0;
932      left: 0;
933      right: 0;
934      bottom: 0;
935      background-color: rgba(0, 0, 0, 0.3);
936      z-index: 1;
937    }
938
939    /* .section2 {
940      /* background: rgb(139, 0, 0);
941      background: linear-gradient(90deg, rgba(139, 0, 0, 1) 0%, rgba(245, 190, 170, 1) 50%, rgba(139, 0, 0, 1) 100%);
942      opacity: 0.9; */
943    /* background-image: url('https://images.pexels.com/photos/6271528/pexels-photo-6271528.jpeg?auto=compress&cs=tinysrgb&w=600');
944      background-size: cover;
945      background-position: center;
946      background-repeat: no-repeat;
947    } */
948
949        /* Taille par défaut du logo */
950.navbar-brand img {
951    width: 170px;
952    height: 80px;
953}
954
955/* Version responsive : réduire la taille de moitié */
956@media (max-width: 768px) { /* Vous pouvez ajuster la valeur 768px selon vos besoins */
957    .navbar-brand img {
958        width: 85px; /* Moitié de 170px */
959        height: 35px; /* Moitié de 80px */
960    }
961}
962    .earnings-simulator  {
963    background: linear-gradient(180deg, #ffcccb, rgba(215, 80, 30, 1) 100%); /* Dégradé de deux couleurs */
964
965    }
966    #mainCarousel  {
967    background: linear-gradient(180deg, #E2A040, #ffcccb); /* Dégradé de deux couleurs */
968   border-radius: 12px;
969    }
970      #mainCarouselcover  {
971    background: #5d0706;
972      background: linear-gradient(90deg, #5d0706 0%, rgba(215, 80, 30, 1) 50%, #5d0706 100%);
973      border-radius: 0;
974      /* Suppression des coins arrondis pour prendre toute la largeur */
975      padding: 2rem 0;
976      width: 100%;
977      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
978    }
979
980
981    .hover-button {
982    background-color: transparent; /* Fond transparent */
983    border: 1px solid white; /* Bordure noire */
984    border-radius: 50px; /* Bords arrondis */
985    padding: 8px 20px; /* Espacement interne */
986    text-decoration: none; /* Supprime le soulignement */
987    color: white; /* Texte noir par défaut */
988    transition: background-color 0.3s, color 0.3s; /* Transition fluide */
989    }
990
991    .hover-button:hover {
992        background-color: white; /* Fond noir au survol */
993        color: black; /* Texte blanc au survol */
994}
995.white-text h2,
996.white-text p {
997  color: white; /* Texte en blanc */
998}
999.scroll-down-arrow {
1000  position: absolute;
1001  bottom: 20px; /* Position en bas de la section */
1002  right: 20px; /* Aligner à droite */
1003  cursor: pointer;
1004  z-index: 10; /* Assurez-vous qu'elle est au-dessus des autres éléments */
1005  display: flex;
1006  justify-content: center;
1007  align-items: center;
1008}
1009
1010.arrow-head {
1011  width: 90px; /* Taille de la flèche */
1012  height: 90px; /* Taille de la flèche */
1013   transform: rotate(180deg);
1014  animation: scrollDownAnimation 1.5s infinite; /* Animation de rotation */
1015}
1016@keyframes  scrollDownAnimation {
1017  0%, 100% {
1018      transform: rotate(180deg) translateY(0); /* Position initiale */
1019    }
1020    50% {
1021      transform: rotate(180deg) translateY(20px); /* Déplacement vers le bas */
1022    }
1023}
1024/* Version responsive : réduire la taille de moitié */
1025@media (max-width: 768px) { /* Vous pouvez ajuster la valeur 768px selon vos besoins */
1026.arrow-head {
1027        width: 60px; /* Moitié de 170px */
1028        height: 50px; /* Moitié de 80px */
1029    }
1030}
1031
1032
1033/* .organic-reveal {
1034  position: absolute;
1035  width: 180px;
1036  height: 180px;
1037  border-radius: 50%;
1038  pointer-events: none;
1039  overflow: hidden;
1040  z-index: 5;
1041  transform: scale(0);
1042  transition: transform 0.3s ease;
1043  animation: pulse 3s infinite ease-in-out;
1044} */
1045/*
1046.organic-reveal img {
1047  position: absolute;
1048  width: 100vw;
1049  height: 100vh;
1050  top: 0;
1051  left: 0;
1052  object-fit: cover;
1053  transform: translate(-50%, -50%);
1054  pointer-events: none;
1055} */
1056
1057/* @keyframes  pulse {
1058  0%, 100% { transform: scale(1) skew(0deg, 0deg); }
1059  50%      { transform: scale(1.02) skew(1deg, -1deg); }
1060}
1061
1062.slide-text,
1063.slide-text .word span {
1064  pointer-events: none;
1065  position: relative;
1066  z-index: 10;
1067} */
1068
1069
1070
1071  </style>
1072
1073
1074  <!-- Web Application Manifest -->
1075<link rel="manifest" href="https://thesymo.com/manifest.json">
1076<!-- Add to homescreen for Chrome on Android -->
1077<meta name="mobile-web-app-capable" content="yes">
1078<meta name="application-name" content="THESYMO">
1079
1080<!-- Add to homescreen for Safari on iOS -->
1081<meta name="apple-mobile-web-app-capable" content="yes">
1082<meta name="apple-mobile-web-app-status-bar-style" content="black">
1083<meta name="apple-mobile-web-app-title" content="THESYMO">
1084<link rel="apple-touch-icon" href="public/images/icons/807abc3ab8cd9556f36919fe838ddd05.png">
1085
1086
1087<link href="public/images/icons/03c9264d893e195df9f93d72befe89e6.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
1088<link href="public/images/icons/7c0ca4369a9dd982ae78eb8ccb92fd96.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
1089<link href="public/images/icons/e41efb8c3d8118dae3b87b5a222fde5a.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
1090<link href="public/images/icons/86e76b0a43e3039abf43be29cc04bac6.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
1091<link href="public/images/icons/adf01676468f17a4b9ce1ec43b9ca17f.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
1092<link href="public/images/icons/d9b748dcc8895a4dec240f783729b248.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
1093<link href="public/images/icons/4c7384c46067edad5452233e05d2ea9d.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
1094<link href="public/images/icons/8af63179b92233a45d8f01d48e160bcc.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
1095<link href="public/images/icons/fcef22e6327baa885bd77b4df13370ec.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
1096
1097<!-- Tile for Win8 -->
1098<meta name="msapplication-TileColor" content="#ffffff">
1099<meta name="msapplication-TileImage" content="public/images/icons/807abc3ab8cd9556f36919fe838ddd05.png">
1100
1101<script type="text/javascript">
1102// Initialize the service worker
1103if ('serviceWorker' in navigator) {
1104  navigator.serviceWorker.register('https://thesymo.com/serviceworker.js?v=', {
1105      scope: '.'
1106  }).then(function (registration) {
1107      // Registration was successful
1108      console.log('Laravel PWA: ServiceWorker registration successful with scope: ', registration.scope);
1109  }, function (err) {
1110      // registration failed :(
1111      console.log('Laravel PWA: ServiceWorker registration failed: ', err);
1112  });
1113}
1114
1115 function scrollToSection(sectionId) {
1116    const section = document.getElementById(sectionId);
1117    if (section) {
1118      section.scrollIntoView({ behavior: 'smooth' });
1119    }
1120  }
1121</script>
1121
1122
1123<!--nouvelle version de google analytics(GA4)-->
1124<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 1124-1125
1124
1125<script async src="https://www.googletagmanager.com/gtag/js?id=
1125G-658RKJXNJC
vendor: 12 bytes, line 1125
1125"></script>
1126<script>
vendor: 128 bytes, lines 1127-1131
1127window.dataLayer = window.dataLayer || [];
1128function gtag(){dataLayer.push(arguments);}
1129gtag('js', new Date());
1130
1131gtag('config', '
1131G-658RKJXNJC
vendor: 4 bytes, line 1131
1131');
1132</script>
vendor: 1 bytes, line 1132
1132
1133<script src="https://code.jquery.com/jquery.min.js"></script>
1133
1134
1135
1136<!--Fin GA4-->
1137
1138</head>
1139<!-- 
1139<script>
1140  document.addEventListener("DOMContentLoaded", function () {
1141    const hero = document.querySelector(".hero-section");
1142    const slideshow = document.querySelector(".hero-slideshow");
1143    const slides = document.querySelectorAll(".slide-hero");
1144    let currentSlide = 0;
1145    let clickInProgress = false;
1146    let circleVisible = false;
1147
1148    // Init slides
1149    slides.forEach((slide, i) => {
1150      slide.style.opacity = i === 0 ? "1" : "0";
1151      slide.style.visibility = i === 0 ? "visible" : "hidden";
1152      slide.style.transition = "opacity 0.6s ease";
1153    });
1154
1155    // Create the reveal circle
1156    const reveal = document.createElement("div");
1157    reveal.className = "organic-reveal";
1158    const revealImg = document.createElement("img");
1159    reveal.appendChild(revealImg);
1160    slideshow.appendChild(reveal);
1161
1162    function getDirection(x, bounds) {
1163      return x > bounds.width / 2 ? 'right' : 'left';
1164    }
1165
1166    function getNextIndex(direction) {
1167      return (currentSlide + (direction === 'right' ? 1 : -1) + slides.length) % slides.length;
1168    }
1169
1170    function updateReveal(x, y) {
1171      if (clickInProgress) return;
1172
1173      const bounds = slideshow.getBoundingClientRect();
1174      let relX = x - bounds.left;
1175      let relY = y - bounds.top;
1176      const r = 90;
1177
1178      // Empêcher la sortie du cercle
1179      relX = Math.max(r, Math.min(bounds.width - r, relX));
1180      relY = Math.max(r, Math.min(bounds.height - r, relY));
1181
1182      const direction = getDirection(relX, bounds);
1183      const nextIndex = getNextIndex(direction);
1184      const nextImg = slides[nextIndex].querySelector("img").src;
1185
1186      revealImg.src = nextImg;
1187      reveal.style.left = `${relX - r}px`;
1188      reveal.style.top = `${relY - r}px`;
1189      revealImg.style.left = `${relX}px`;
1190      revealImg.style.top = `${relY}px`;
1191      revealImg.style.objectPosition = `${(relX / bounds.width) * 100}% ${(relY / bounds.height) * 100}%`;
1192
1193      if (!circleVisible) {
1194        reveal.style.transition = "transform 0.3s ease";
1195        reveal.style.transform = "scale(1)";
1196        circleVisible = true;
1197      }
1198    }
1199
1200    function expandAndSwitch(x) {
1201      if (clickInProgress || !circleVisible) return;
1202
1203      clickInProgress = true;
1204      const bounds = slideshow.getBoundingClientRect();
1205      const relX = x - bounds.left;
1206      const direction = getDirection(relX, bounds);
1207      const newIndex = getNextIndex(direction);
1208
1209      // Grandir
1210      reveal.style.transition = "transform 0.5s ease";
1211      reveal.style.transform = "scale(20)";
1212
1213      setTimeout(() => {
1214        slides[currentSlide].style.opacity = "0";
1215        slides[currentSlide].style.visibility = "hidden";
1216
1217        currentSlide = newIndex;
1218        slides[currentSlide].style.opacity = "1";
1219        slides[currentSlide].style.visibility = "visible";
1220
1221        // Reset
1222        reveal.style.transition = "none";
1223        reveal.style.transform = "scale(0)";
1224        circleVisible = false;
1225        clickInProgress = false;
1226      }, 500);
1227    }
1228
1229    // Souris
1230    slideshow.addEventListener("mousemove", e => {
1231      if (!clickInProgress) updateReveal(e.clientX, e.clientY);
1232    });
1233
1234    slideshow.addEventListener("click", e => {
1235      expandAndSwitch(e.clientX);
1236    });
1237
1238    slideshow.addEventListener("mouseleave", () => {
1239      if (!clickInProgress) {
1240        reveal.style.transform = "scale(0)";
1241        circleVisible = false;
1242      }
1243    });
1244
1245    // Mobile
1246    slideshow.addEventListener("touchmove", e => {
1247      if (!clickInProgress && e.touches.length) {
1248        const t = e.touches[0];
1249        updateReveal(t.clientX, t.clientY);
1250      }
1251    });
1252
1253    slideshow.addEventListener("touchend", e => {
1254  if (clickInProgress || e.changedTouches.length === 0) return;
1255
1256  const x = e.changedTouches[0].clientX;
1257  const bounds = slideshow.getBoundingClientRect();
1258  const relX = x - bounds.left;
1259  const direction = relX > bounds.width / 2 ? 'right' : 'left';
1260  const newIndex = (currentSlide + (direction === 'right' ? 1 : -1) + slides.length) % slides.length;
1261
1262  slides[currentSlide].style.opacity = "0";
1263  slides[currentSlide].style.visibility = "hidden";
1264
1265  currentSlide = newIndex;
1266  slides[currentSlide].style.opacity = "1";
1267  slides[currentSlide].style.visibility = "visible";
1268});
1269
1270  });
1271</script>
1271 -->
1272
1273
1274<script>
1275document.addEventListener("DOMContentLoaded", function() {
1276    const counters = document.querySelectorAll('.count-up');
1277    counters.forEach(counter => {
1278        const target = parseInt(counter.getAttribute('data-target'));
1279        let current = 0;
1280
1281        const increment = Math.ceil(target / 100); // Plus le diviseur est petit, plus ça va vite
1282        const interval = setInterval(() => {
1283            current += increment;
1284            if (current >= target) {
1285                counter.textContent = target.toLocaleString();
1286                clearInterval(interval);
1287            } else {
1288                counter.textContent = current.toLocaleString();
1289            }
1290        }, 20); // Interval en ms (plus petit = plus fluide, plus rapide)
1291    });
1292});
1293</script>
1293
1294
1295
1296<body>
1297  <!-- Navbar fixe modifiée -->
1298  <nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
1299    <div class="container">
1300      <!-- Bouton hamburger à gauche -->
1301      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
1302        aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
1303        <span class="navbar-toggler-icon"></span>
1304      </button>
1305
1306      <!-- Menu de navigation à gauche -->
1307      <div class="collapse navbar-collapse" id="navbarContent">
1308        <ul class="navbar-nav">
1309          <li class="nav-item">
1310            <a class="nav-link" href="https://thesymo.com/creators">Our creators </a>
1311          </li>
1312          <li class="nav-item">
1313            <a class="nav-link" href="https://thesymo.com/shop">Market</a>
1314          </li>
1315          <li class="nav-item">
1316            <a class="nav-link" href="https://thesymo.com/blog">Blog </a>
1317          </li>
1318          <li class="nav-item">
1319            <a class="nav-link" href="https://thesymo.com/contact">Contact us</a>
1320          </li>
1321        </ul>
1322      </div>
1323
1324      <!-- Logo au centre -->
1325      <a class="navbar-brand" href="#"><img src="https://thesymo.com/public/img/logodiviser.png" alt="" width="170px" height="80px" loading="lazy"></a>
1326
1327      <!-- Liens de connexion groupés à droite -->
1328      <div class="auth-links">
1329          <a href="https://thesymo.com/login" class="nav-link-login  me-3">Login</a>
1330        <a href="https://thesymo.com/signup" class="nav-link-login hover-button">Sign up</a>
1331
1332      </div>
1333
1334    </div>
1335  </nav>
1336
1337  <div class="hero-section">
1338    <div class="hero-slideshow">
1339      <div class="slide-hero" id="slide1">
1340        <img src="https://thesymo.com/public/img/img1.jpg" alt="Background 1" loading="lazy">
1341      </div>
1342      <div class="slide-hero" id="slide2">
1343        <img src="https://thesymo.com/public/img/img2.jpg" alt="Background 2" loading="lazy">
1344      </div>
1345      <div class="slide-hero" id="slide3">
1346        <img src="https://thesymo.com/public/img/img3.jpg" alt="Background 3" loading="lazy">
1347      </div>
1348      <div class="slide-hero" id="slide4">
1349        <img src="https://thesymo.com/public/img/img4.jpg" alt="Background 4" loading="lazy">
1350      </div>
1351      <div class="slide-hero" id="slide5">
1352        <img src="https://thesymo.com/public/img/img5.jpg" alt="Background 5" loading="lazy">
1353      </div>
1354    </div>
1355
1356    <div class="container-fluid hero-content">
1357      <div class="slide-text" id="text1">
1358        <div class="word"><span>Bienvenue sur</span></div>
1359        <div class="word"><span>THESYMO</span></div>
1360        <div class=""><span>La première plateforme africaine de monétisation de contenu en Afrique</span></div>
1361      </div>
1362
1363      <div class="slide-text" id="text2">
1364        <div class="word"><span>Partagez</span></div>
1365        <div class="word"><span>vos</span></div>
1366        <div class="word"><span>créations</span></div>
1367      </div>
1368
1369      <div class="slide-text" id="text3">
1370        <div class="word"><span>Inspirez</span></div>
1371        <div class="word"><span>votre communauté</span></div>
1372        <div class="word"><span></span></div>
1373      </div>
1374
1375      <div class="slide-text" id="text4">
1376        <div class="word"><span>Développez</span></div>
1377        <div class="word"><span>votre</span></div>
1378        <div class="word"><span>audience</span></div>
1379      </div>
1380
1381      <div class="slide-text" id="text5">
1382        <div class="word"><span>Vivez</span></div>
1383        <div class="word"><span>de</span></div>
1384        <div class="word"><span>votre</span></div>
1385        <div class="word"><span>passion</span></div>
1386      </div>
1387    </div>
1388    <div class="scroll-down-arrow" onclick="scrollToSection('mainCarouselcover')">
1389  <!--<div class="arrow-stem"></div> -->
1390  <svg class="arrow-head" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
1391    <path d="M12 4L12.7071 3.29289L12 2.58579L11.2929 3.29289L12 4ZM13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17L13 17ZM18.7071 9.29289L12.7071 3.29289L11.2929 4.70711L17.2929 10.7071L18.7071 9.29289ZM11.2929 3.29289L5.29289 9.29289L6.70711 10.7071L12.7071 4.70711L11.2929 3.29289ZM11 4L11 17L13 17L13 4L11 4Z" />
1392  </svg>
1393</div>
1394</div>
1395
1396  <div id="mainCarouselcover"  class="section2 py-5">
1397    <div class="btn-block text-center mb-5 white-text">
1398      <h2 class="hero-title2">How to make money with THESYMO?</h2>
1399      <p class="hero-subtitle2">
1400            Fans can enjoy exclusive content to show their support. Creators can use funds received to continue working on their project
1401      </p>
1402    </div>
1403
1404    <div id="mainCarousel" class="carousel slide " data-bs-ride="carousel">
1405      <div class="carousel-inner">
1406        <div class="carousel-item active">
1407          <div class="row p-5 align-items-center">
1408            <div class="col-md-6 text-center text-md-start">
1409              <h2 class="display-6 fw-bold">Create an account on THESYMO</h2>
1410              <p class="lead">
1411               Users must first register for an account on TheSymo. This requires providing basic information, such as their name and email address, as well as information about their creative project.
1412              </p>
1413            </div>
1414            <div class="col-md-6">
1415              <div class="image-wrapper">
1416                <img src="https://thesymo.com/public/img/pixelcut-export.png" class="d-block mx-auto mobile-screenshot" alt="Sign Up Screen" loading="lazy">
1417              </div>
1418            </div>
1419          </div>
1420        </div>
1421
1422        <div class="carousel-item">
1423          <div class="row p-5 align-items-center">
1424            <div class="col-md-6 text-center text-md-start">
1425              <h2 class="display-6 fw-bold">Have your account verified</h2>
1426              <p class="lead">
1427               Once registered, creators must apply to become a content creator by providing correct information about themselves such as their addresses, cities of residence, number and a photo of their IDs.
1428              </p>
1429            </div>
1430            <div class="col-md-6">
1431              <div class="image-wrapper">
1432                <img src="https://thesymo.com/public/img/verification.png" class="d-block mx-auto mobile-screenshot" alt="Login Screen" loading="lazy">
1433              </div>
1434            </div>
1435          </div>
1436        </div>
1437
1438        <div class="carousel-item">
1439          <div class="row p-5 align-items-center">
1440            <div class="col-md-6 text-center text-md-start">
1441              <h2 class="display-6 fw-bold">Create great content</h2>
1442              <p class="lead">
1443              Once the account is verified, creators can create a page for their project. This page may include project information, images and videos to show off their work, as well as award details which are of course exclusive content that will not be found elsewhere.
1444              </p>
1445            </div>
1446            <div class="col-md-6">
1447              <div class="image-wrapper">
1448                <img src="https://thesymo.com/public/img/contenu_de_qualite.png" class="d-block mx-auto mobile-screenshot" alt="Profile Setup" loading="lazy">
1449              </div>
1450            </div>
1451          </div>
1452        </div>
1453
1454        <div class="carousel-item">
1455          <div class="row p-5 align-items-center">
1456            <div class="col-md-6 text-center text-md-start">
1457              <h2 class="display-6 fw-bold">Grow your market</h2>
1458              <p class="lead">
1459             Create attractive content for your audience and share your THESYMO page on social networks, in your videos or in your blog articles. The more you publicize your page, the more likely you are to find backers. Host exclusive online events, polls or contests to show your backers that you appreciate their support.
1460              </p>
1461            </div>
1462            <div class="col-md-6">
1463              <div class="image-wrapper">
1464                <img src="https://thesymo.com/public/img/developper_marche.png" class="d-block mx-auto mobile-screenshot" alt="Password Recovery" loading="lazy">
1465              </div>
1466            </div>
1467          </div>
1468        </div>
1469      </div>
1470
1471      <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
1472        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
1473        <span class="visually-hidden">Previous</span>
1474      </button>
1475      <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
1476        <span class="carousel-control-next-icon" aria-hidden="true"></span>
1477        <span class="visually-hidden">Next</span>
1478      </button>
1479
1480      <div class="carousel-indicators">
1481        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true"
1482          aria-label="Slide 1"></button>
1483        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
1484        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
1485        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
1486      </div>
1487    </div>
1488  </div>
1489
1490  <div class=" mb-5">
1491    <div class="title title-start">Découvrez Nos</div>
1492    <div class="slider-container">
1493      <div class="slider">
1494        <div class="slides">
1495          <img src="https://www.thesymo.com/uploads/cover/robertdjabaku-11685304983zommw5uypy.jpg" style="border-radius: 24px;" alt="Image 1"
1496            style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));" loading="lazy">
1497          <div class="caption">
1498            <span>THESYMO</span>
1499            <i class="fa-solid fa-arrow-right"></i>
1500          </div>
1501        </div>
1502         <div class="slides">
1503          <img src="https://www.thesymo.com/uploads/cover/elisabeth3490-34901733224589sagqlcbdx5.jpg"  style="border-radius: 24px;" alt="Image 5" loading="lazy">
1504          <div class="caption">
1505            <span>ELISABETH APAMPA</span>
1506            <i class="fa-solid fa-arrow-right"></i>
1507          </div>
1508        </div>
1509        <div class="slides">
1510          <img src="https://thesymo.com/files/storage/446/1662ef10a13cae1714352394fjgnayi7ftxjzvvknmku.jpg" style="border-radius: 24px;" alt="Image 3" loading="lazy">
1511          <div class="caption">
1512            <span>Robert DJABAKU</span>
1513            <i class="fa-solid fa-arrow-right"></i>
1514          </div>
1515        </div>
1516
1517        <div class="slides">
1518          <img src="https://www.thesymo.com/uploads/cover/onaalfa-711671088873hbfkit9sch.jpeg" style="border-radius: 24px;" alt="Image 3" loading="lazy">
1519          <div class="caption">
1520            <span>Onaalfa</span>
1521            <i class="fa-solid fa-arrow-right"></i>
1522          </div>
1523        </div>
1524        <div class="slides">
1525          <img src="https://www.thesymo.com/uploads/cover/kaporal3021-30211699954072avlw5pmkxk.jpg" style="border-radius: 24px;" alt="Image 4" loading="lazy">
1526          <div class="caption">
1527            <span>Kaporal Wisdom</span>
1528            <i class="fa-solid fa-arrow-right"></i>
1529          </div>
1530        </div>
1531        <div class="slides">
1532          <img src="https://www.thesymo.com/uploads/cover/alexbgstarboy3212-32121715024343jhev17dsko.png" style="border-radius: 24px;" alt="Image 5" loading="lazy">
1533          <div class="caption">
1534            <span>Alexbgstarboy</span>
1535            <i class="fa-solid fa-arrow-right"></i>
1536          </div>
1537        </div>
1538        <div class="slides">
1539          <img src="https://www.thesymo.com/uploads/cover/nosmas4172-417217446741330wlocwxgy6.jpg" style="border-radius: 24px;" alt="Image 5" loading="lazy">
1540          <div class="caption">
1541            <span>Nosmas LeCamétigre</span>
1542            <i class="fa-solid fa-arrow-right"></i>
1543          </div>
1544        </div>
1545
1546           <div class="slides">
1547          <img src="https://www.thesymo.com/uploads/cover/u64-641656764896mdtzo3aotc.jpg" style="border-radius: 24px;" alt="Image 2" loading="lazy">
1548          <div class="caption">
1549            <span>Marthe Noun Fare</span>
1550            <i class="fa-solid fa-arrow-right"></i>
1551          </div>
1552        </div>
1553
1554      </div>
1555    </div>
1556    <div class="title title-end">Creators</div>
1557  </div>
1558
1559  <!-- Stats Section (après le carousel) -->
1560  <div class="stats-section">
1561    <div class="container">
1562      <div class="stats-header">
1563        <h2>Our statistics</h2>
1564        <p>Our figures in real time</p>
1565      </div>
1566      <div class="row">
1567        <div class="col-md-3">
1568          <div class="stat-item">
1569            <span class="stat-icon">
1570              <i class="bi bi-person-plus"></i>
1571            </span>
1572            <div class="stat-content">
1573              <h3 class="count-up" data-target="4113">0</h3>
1574              <h5>Members</h5>
1575            </div>
1576          </div>
1577        </div>
1578        <div class="col-md-3">
1579          <div class="stat-item">
1580            <span class="stat-icon">
1581              <i class="fa fa-user-edit"></i>
1582            </span>
1583            <div class="stat-content">
1584              <h3 class="count-up" data-target="1321">0 </h3>
1585              <h5>Content created</h5>
1586            </div>
1587          </div>
1588        </div>
1589        <div class="col-md-3">
1590          <div class="stat-item">
1591            <span class="stat-icon">
1592              <i class="bi bi-currency-dollar"></i>
1593            </span>
1594            <div class="stat-content">
1595              <h3 class="count-up" data-target="859">0 </h3>
1596              <h5>Subscriptions active</h5>
1597            </div>
1598          </div>
1599        </div>
1600        <!-- <div class="col-md-3">
1601          <div class="stat-item">
1602            <span class="stat-icon">
1603              <i class="bi bi-cash-coin"></i>
1604            </span>
1605            <div class="stat-content">
1606              <h3>$<span class="counterStats">727</span> </h3>
1607              <h5>Earnings of creators</h5>
1608            </div>
1609          </div>
1610        </div> -->
1611      </div>
1612    </div>
1613  </div>
1614
1615  <!-- Earnings Simulator (version modernisée) -->
1616  <div class="earnings-simulator py-5">
1617    <div class="container mb-4">
1618      <div class="text-center mb-5">
1619        <h1 class="fw-bold display-5 mb-3">
1619Creators Earnings Simulator</h1>
1620        <p class="lead text-muted mb-0">
1621        Calculate how much you can earn based on the number of followers and their rate
1622        </p>
1623      </div>
1624
1625      <div class="row justify-content-center" >
1626        <div class="col-lg-10">
1627          <div class="card shadow-lg border-0 rounded-lg p-4">
1628            <div class="card-body">
1629              <div class="row">
1630                <div class="col-md-6 mb-4">
1631                  <label for="rangeNumberFollowers" class="form-label fw-bold mb-3">
1632                   Number of followers?
1633                    <div class="social-icons mt-2">
1634                      <i class="fab fa-facebook me-2"></i>
1635                      <i class="fab fa-twitter me-2"></i>
1636                      <i class="fab fa-instagram me-2"></i>
1637                      <i class="fab fa-youtube me-2"></i>
1638                      <i class="bi bi-tiktok me-2"></i>
1639                      <i class="bi bi-snapchat"></i>
1640                    </div>
1641                  </label>
1642                  <div class="d-flex justify-content-between mb-2">
1643                    <span>100</span>
1644                    <span class="text-primary fw-bold" id="numberFollowers">100</span>
1645                    <span>1M</span>
1646                  </div>
1647                  <input type="range" class="form-range" value="100" min="100" max="1000000" id="rangeNumberFollowers"
1648                    oninput="$('#numberFollowers').html($(this).val())">
1649                </div>
1650
1651                <div class="col-md-6 mb-4">
1652                  <label for="rangeMonthlySubscription" class="form-label fw-bold mb-3">
1653                   Monthly subscription price?
1654                  </label>
1655                  <div class="d-flex justify-content-between mb-2">
1656                    <span>$5</span>
1657                    <span class="text-primary fw-bold">$<span id="monthlySubscription">5</span></span>
1658                    <span>$100</span>
1659                  </div>
1660                  <input type="range" class="form-range" value="5"
1661                    oninput="$('#monthlySubscription').html($(this).val());updateEstimate()" min="5" max="100"
1662                    id="rangeMonthlySubscription">
1663                </div>
1664
1665                <div class="col-12 text-center mt-4">
1666                  <div class="result-box p-4 bg-light rounded-3">
1667                    <h3 class="fw-light mb-3">You could earn an estimated :
1668                      <span class="fw-bold text-primary fs-2">$<span id="estimatedEarn">0</span>
1669                        <small class="fs-5">USD</small></span>
1670                      <span class="text-muted">par mois*</span>
1671                    </h3>
1672                    <p class="mb-1 text-muted">
1673                      * Based on an estimate of 5% of your followers who subscribe (Does not include payment processor fees)
1674                    </p>
1675                    <small class="text-muted d-block mt-2">* Includes the 13% platform fee</small>
1676                  </div>
1677                </div>
1678              </div>
1679            </div>
1680          </div>
1681        </div>
1682      </div>
1683    </div>
1684  </div>
1685
1686  <!-- <div class="container text-center">
1687    <h1 class="txt-black hero-title2">Qu'est-ce que tu attends ?</h1>
1688    <p class="hero-subtitle2">
1689      Commencez à générer des profits avec votre contenu de qualité
1690    </p>
1691    <div class="btn btn-start">
1692      <span>Commencer</span>
1693      <i class="fa-solid fa-arrow-right"></i>
1694    </div>
1695  </div> -->
1696
1697  <div class="login-card-background">
1698    <div class="login-card">
1699        <img src="https://www.thesymo.com/public/img/favicon-1747678168.png" width="130px" height="130px">
1700
1701
1702      <h1>What are you waiting for?</h1>
1703            <a href="https://thesymo.com/signup" class="btn btn-outline-danger rounded-pill download-btn get-started-btn">Getting started</a>
1704
1705      <!-- <p class="login-text">Already have an account? <a href="#" class="login-link">Log in</a></p> -->
1706
1707      <div class="app-stores">
1708        <a href="https://play.google.com/store/apps/details?id=africa.thesymo.app" class="store-button">
1709          <div class="store-icon">
1710            <svg viewBox="0 0 24 24" width="24" height="24" fill="#5f6368">
1711              <path
1712                d="M3.609 1.814L13.792 12 3.609 22.186c-.181.181-.29.435-.29.704 0 .253.097.484.254.658l.036.046c.174.174.435.29.704.29.253 0 .484-.097.658-.254l.046-.036L16.772 12 5.018 1.246C4.837 1.065 4.583.956 4.314.956c-.253 0-.484.097-.658.254l-.046.036c-.174.174-.29.435-.29.704 0 .253.097.484.254.658l.036.046z" />
1713            </svg>
1714          </div>
1715          <div class="store-text">
1716            <span class="small">GET IT ON</span>
1717            <span class="large">Google Play</span>
1718          </div>
1719        </a>
1720        <a href="https://landing.thesymo.com" class="store-button">
1721          <div class="store-icon">
1722            <svg viewBox="0 0 24 24" width="24" height="24" fill="#000">
1723              <path
1724                d="M15.139 11.961l4.384-7.302c.405-.632.214-1.456-.414-1.846-.632-.391-1.455-.2-1.846.431l-4.95 8.289 2.826.428zM12.097 9.654l-.391-6.77c-.023-.731-.632-1.318-1.363-1.295-.731.023-1.318.632-1.295 1.364l.444 7.727 2.605-1.026zM6.241 20.341c.146.713.85 1.172 1.563 1.026.713-.146 1.172-.85 1.026-1.563l-1.654-8.001-2.486.511 1.551 8.027zM8.273 11.025l4.599-1.016-2.633-1.01-2.756 1.15c.39.284.714.584.79.876z" />
1725            </svg>
1726          </div>
1727          <div class="store-text">
1728            <span class="small">Download on the</span>
1729            <span class="large">App Store</span>
1730          </div>
1731        </a>
1732      </div>
1733    </div>
1734  </div>
1735
1736  <footer class="footer-section py-5">
1737    <div class="container">
1738      <div class="row mb-4">
1739        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
1740          <div class="footer-brand">
1741            <a href="#" class="d-inline-block">
1742              <img src="https://thesymo.com/public/img/thesymo_logo.png" alt="THESYMO" class="img-fluid" style="max-height: 200px;" loading="lazy">
1743            </a>
1744          </div>
1745          <p class="mb-4" style="color: #fff;">Keep connect with us!<br/>Follow us on any of these platforms </p>
1746          <div class="social-links">
1747            <a href="https://twitter.com/thesymo_off" class="social-link me-2" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
1748            <a href="https://www.facebook.com/profile.php?id=100086800410714" class="social-link me-2" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
1749            <a href="https://instagram.com/thesymo_officiel" class="social-link me-2" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
1750            <a href="https://www.youtube.com/@thesymo_official" class="social-link me-2" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
1751            <a href="https://www.tiktok.com/@thesymo_officiel" class="social-link me-2" aria-label="TikTok"><i class="fab fa-tiktok"></i></a>
1752            <a href="https://www.linkedin.com/company/symopage" class="social-link" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
1753          </div>
1754    <!-- <li>-->
1755    <!--  <div id="installContainer" class="mt-4">-->
1756    <!--    <button class="btn btn-outline-danger w-100 rounded-pill download-btn" id="butInstall" type="button">-->
1757    <!--      <i class="bi-phone mr-1"></i> Install Web App THESYMO-->
1758    <!--    </button>-->
1759    <!--  </div>-->
1760    <!--</li>-->
1761      <div id="installContainer" class="mt-4">
1762        <!--<button class="btn btn-outline-danger w-100 rounded-pill download-btn" id="butInstall" type="button">-->
1763        <!--  <i class="bi-phone mr-1"></i> Install Web App THESYMO-->
1764        <!--</button>-->
1765            <a href="https://forms.gle/QJUDae1BzAcL1UpEA" class="btn btn-outline-danger w-100 rounded-pill download-btn" aria-label="Twitter">Demander un accompagnement</a>
1766
1767      </div>
1768
1769        </div>
1770
1771        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
1772          <h5 class="footer-heading">About</h5>
1773          <ul class="footer-links">
1774                 
1775      
1776          <li>
1777            <a class="link-footer" href="https://thesymo.com/p/terms-of-service">
1778              Terms of Service
1779            </a>
1780        </li>
1781
1782      
1783    
1784      
1785          <li>
1786            <a class="link-footer" href="https://thesymo.com/p/help">
1787              Help
1788            </a>
1789        </li>
1790
1791      
1792    
1793      
1794          <li>
1795            <a class="link-footer" href="https://thesymo.com/p/how-it-works">
1796              How it works
1797            </a>
1798        </li>
1799
1800      
1801    
1802      
1803          <li>
1804            <a class="link-footer" href="https://thesymo.com/p/cookies">
1805              Cookies Policy
1806            </a>
1807        </li>
1808
1809      
1810    
1811      
1812          <li>
1813            <a class="link-footer" href="https://thesymo.com/p/privacy">
1814              Privacy
1815            </a>
1816        </li>
1817
1818      
1819    
1820      
1821          <li>
1822            <a class="link-footer" href="https://thesymo.com/p/delete-account">
1823              Request to delete account and personal data
1824            </a>
1825        </li>
1826
1827      
1828            <li><a class="link-footer" href="https://thesymo.com/contact">Contact us</a></li>
1829
1830                  <li><a class="link-footer" href="https://thesymo.com/blog">Blog</a></li>
1831                  </ul>
1832        </div>
1833
1834        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
1835          <h5 class="footer-heading">All Categories</h5>
1836          <ul class="footer-links">
1837         
1838               <li>
1839          <a class="link-footer" href="https://thesymo.com/category/animation">
1840            Animation
1841          </a>
1842        </li>
1843        
1844               <li>
1845          <a class="link-footer" href="https://thesymo.com/category/artist">
1846            Artist
1847          </a>
1848        </li>
1849        
1850               <li>
1851          <a class="link-footer" href="https://thesymo.com/category/athlete">
1852            Athlète
1853          </a>
1854        </li>
1855        
1856               <li>
1857          <a class="link-footer" href="https://thesymo.com/category/coaching">
1858            Coaching
1859          </a>
1860        </li>
1861        
1862               <li>
1863          <a class="link-footer" href="https://thesymo.com/category/comedy">
1864            Comedy
1865          </a>
1866        </li>
1867        
1868               <li>
1869          <a class="link-footer" href="https://thesymo.com/category/designer">
1870            Designer
1871          </a>
1872        </li>
1873                             <li><a href="https://thesymo.com/creators">Nos créateurs <i class="fas fa-arrow-right ms-1"></i></a></li>
1874                       </ul>
1875        </div>
1876
1877        <div class="col-lg-3 col-md-6">
1878          <h5 class="footer-heading">Contact us</h5>
1879          <ul class="footer-contact">
1880            <li>
1881              <i class="far fa-envelope contact-icon"></i>
1882              <a href="mailto:[email protected]">[email protected]</a>
1883            </li>
1884            <li>
1885              <i class="fas fa-phone-alt contact-icon"></i>
1886              <a href="tel:+22899563323">+228 99 56 33 23 </a>
1887            </li>
1888            <li>
1889              <i class="fas fa-map-marker-alt contact-icon"></i>
1890              <span>50 Rue IPG, Adidogomé</span>
1891            </li>
1892          </ul>
1893<ul class="list-unstyled">
1894          <li class="dropdown mt-1">
1895          <a class="btn btn-outline-secondary rounded-pill mt-2 dropdown-toggle px-4 dropdown-toggle text-decoration-none" href="javascript:;" data-toggle="dropdown">
1896            <i class="feather icon-globe mr-1"></i>
1897                           English                                                                          </a>
1898
1899        <div class="dropdown-menu">
1900                      <a  class="dropdown-item mb-1 dropdown-lang  active text-white ">
1901             <i class="fa fa-check mr-1"></i>  English
1902            </a>
1903                        <a  href="https://thesymo.com/lang/es"  class="dropdown-item mb-1 dropdown-lang ">
1904             Español
1905            </a>
1906                        <a  href="https://thesymo.com/lang/fr"  class="dropdown-item mb-1 dropdown-lang ">
1907             French
1908            </a>
1909                    </div>
1910        </li>
1911
1912      
1913      </ul>
1914
1915        </div>
1916      </div>
1917
1918      <div class="footer-bottom pt-4 mt-4 border-top">
1919        <div class="row align-items-center">
1920          <div class="col-md-6 text-center text-md-start">
1921            <p class="mb-0">Copyright &copy; 2026 All rights reserved. Development by <a href="https://studio.thesymo.com/" target="_blank" style="color: #6b0d0d;"> THESYMO Technologies</a></p>
1922          </div>
1923          <div class="col-md-6 text-center text-md-end">
1924            <div class="footer-links-inline">
1925              <a href="https://thesymo.com/p/privacy">Confidentialité</a>
1926              <a href="https://thesymo.com/p/terms-of-service">Conditions</a>
1927              <a href="https://thesymo.com/p/cookies">Cookies</a>
1928            </div>
1929          </div>
1930        </div>
1931      </div>
1932    </div>
1933  </footer>
1934
1935  
1935<script>
1936    function createInfiniteSlider() {
1937      // Dupliquer les slides pour créer l'effet infini
1938      const slider = document.querySelector('.slider');
1939      const slides = [...document.querySelectorAll('.slides')];
1940      const slidesToAdd = slides.map(slide => slide.cloneNode(true));
1941      slidesToAdd.forEach(slide => slider.appendChild(slide));
1942
1943      // Calculer la largeur totale
1944      const slideWidth = slides[0].offsetWidth;
1945      const totalWidth = slideWidth * slides.length;
1946
1947      // Animation
1948      gsap.to(slider, {
1949        x: -totalWidth,
1950        duration: 30,
1951        ease: "none",
1952        repeat: -1,
1953        onRepeat: () => {
1954          gsap.set(slider, { x: 0 });
1955        }
1956      });
1957    }
1958
1959    // Lancer l'animation quand le DOM est chargé
1960    document.addEventListener('DOMContentLoaded', createInfiniteSlider);
1961  </script>
1961
1962
1963  
1963<script>
1964    // Fonction pour mettre à jour l'estimation des revenus
1965    function updateEstimate() {
1966      const followers = parseInt(document.getElementById('rangeNumberFollowers').value);
1967      const price = parseInt(document.getElementById('monthlySubscription').innerHTML);
1968      const conversionRate = 0.02; // Taux de conversion estimé à 2%
1969      const platformFee = 0.95; // 5% de frais de plateforme
1970
1971      const subscribersEstimate = Math.floor(followers * conversionRate);
1972      const earnings = subscribersEstimate * price * platformFee;
1973
1974      document.getElementById('estimatedEarn').innerHTML = earnings.toFixed(0);
1975    }
1976
1977    // Ajouter les écouteurs d'événements pour les deux sliders
1978    document.getElementById('rangeNumberFollowers').addEventListener('input', updateEstimate);
1979    document.getElementById('rangeMonthlySubscription').addEventListener('input', updateEstimate);
1980
1981    // Initialiser l'estimation au chargement
1982    updateEstimate();
1983  </script>
1983
1984
1985  
1985<script>
1986    // Script pour changer l'apparence de la navbar au défilement
1987    window.addEventListener('scroll', function () {
1988      if (window.scrollY > 50) {
1989        document.getElementById('mainNav').classList.add('scrolled');
1990      } else {
1991        document.getElementById('mainNav').classList.remove('scrolled');
1992      }
1993    });
1994
1995    // Fermer le menu mobile quand on clique sur un lien
1996    document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
1997      link.addEventListener('click', () => {
1998        const navbarCollapse = document.querySelector('.navbar-collapse');
1999        if (navbarCollapse.classList.contains('show')) {
2000          const bsCollapse = new bootstrap.Collapse(navbarCollapse);
2001          bsCollapse.hide();
2002        }
2003      });
2004    });
2005
2006    document.addEventListener('DOMContentLoaded', function () {
2007      // Hide all text elements initially
2008      gsap.set('.slide-text', { display: 'none' });
2009
2010      // Create a timeline for the slideshow
2011      const mainTimeline = gsap.timeline({ repeat: -1 });
2012
2013      // Function to animate a single slide
2014      function animateSlide(slideIndex) {
2015        const slideTl = gsap.timeline();
2016        const slide = document.getElementById(`slide${slideIndex}`);
2017        const text = document.getElementById(`text${slideIndex}`);
2018        const words = text.querySelectorAll('.word span');
2019
2020        // Show the current text and hide others
2021        slideTl.set('.slide-text', { display: 'none' });
2022        slideTl.set(text, { display: 'block' });
2023
2024        // Animate the slide in and out with Y movement
2025        slideTl.fromTo(slide,
2026          { y: 50, opacity: 0, visibility: 'visible' },
2027          { y: 0, opacity: 1, duration: 1.2, ease: 'power3.out' }
2028        );
2029
2030        // Animate each word one by one with slide up effect
2031        slideTl.fromTo(words,
2032          { y: '100%', opacity: 0 },
2033          { y: 0, opacity: 1, stagger: 0.15, duration: 0.8, ease: 'back.out(1.7)' },
2034          '-=0.8'
2035        );
2036
2037        // Hold the slide
2038        slideTl.to({}, { duration: 2 });
2039
2040        // Fade out slide and text
2041        slideTl.to(words, { y: '-100%', opacity: 0, stagger: 0.1, duration: 0.6, ease: 'power2.in' });
2042        slideTl.to(slide, { y: -50, opacity: 0, duration: 1, ease: 'power2.in' }, '-=0.4');
2043
2044        return slideTl;
2045      }
2046
2047      // Add each slide animation to the main timeline
2048      for (let i = 1; i <= 5; i++) {
2049        mainTimeline.add(animateSlide(i));
2050      }
2051
2052      // Start the animation
2053      mainTimeline.play();
2054    });
2055  </script>
2055
2056
2057  
2057<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
2057
2058  
2058<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2058
2059  
2059<script src="/src/main.js"></script>
2059
2060  
2060<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
2060
2061
2062  
2062<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Flip.min.js"></script>
2062
2063  
2063<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
2063
2064  
2064<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Observer.min.js"></script>
2064
2065  
2065<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollToPlugin.min.js"></script>
2065
2066  
2066<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Draggable.min.js"></script>
2066
2067  
2067<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/MotionPathPlugin.min.js"></script>
2067
2068  
2068<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/EaselPlugin.min.js"></script>
2068
2069  
2069<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/PixiPlugin.min.js"></script>
2069
2070  
2070<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/TextPlugin.min.js"></script>
2070
2071
2072
2073  <!-- RoughEase, ExpoScaleEase and SlowMo are all included in the EasePack file -->
2074  
2074<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/EasePack.min.js"></script>
2074
2075</body>
2076
2077</html>
2078</body>
2079
2080</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.