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 © 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.