|
|
<navigationBar></navigationBar>
|
|
|
<!--Main Navigation-->
|
|
|
<header>
|
|
|
|
|
|
<!-- Intro Section -->
|
|
|
<div class="view hm-white-light jarallax" id="intro" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg); background-attachment: fixed;">
|
|
|
<div class="full-bg-img">
|
|
|
<div class="container flex-center">
|
|
|
<div class="row pt-5 mt-3">
|
|
|
<div class="col-md-12 mb-3">
|
|
|
<div class="intro-info-content text-center">
|
|
|
<h1 class="display-3 mb-5 wow fadeInDown" data-wow-delay="0.3s">Parraine <a class="indigo-text font-bold">Tes Amis</a></h1>
|
|
|
<h5 class="font-up mb-5 mt-1 font-bold wow fadeInDown" data-wow-delay="0.3s">La Grosse Remise !</h5>
|
|
|
|
|
|
<button class="btn btn-light-blue btn-lg wow fadeInDown waves-light" id="inscription" data-wow-delay="0.3s" mdbRippleRadius (click)="loadRegisterComponent();">S'inscrire</button>
|
|
|
<div *ngIf='loadComponentRegister'>
|
|
|
<app-register></app-register>
|
|
|
</div>
|
|
|
|
|
|
<button class="btn btn-indigo btn-lg wow fadeInDown waves-light" id="login" data-wow-delay="0.3s" mdbRippleRadius (click)="loadLoginComponent();">Se connecter</button>
|
|
|
<div *ngIf='loadComponentLogin'>
|
|
|
<login></login>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
<!--Section: Features v.1-->
|
|
|
<section class="section feature-box wow fadeInUp" id="features">
|
|
|
|
|
|
<!--Section heading-->
|
|
|
<h1 class="section-heading pt-4">Comment ça marche ?</h1>
|
|
|
<!--Section description-->
|
|
|
<p class="section-description lead grey-text"><label class="font-bold">ParraineTesAmis.com</label> est le 1er site de parrainage en ligne !
|
|
|
<br>Les <label class="font-bold">Commerçants</label> créent des offres de parrainage et élisent des <label class="font-bold">Parrains</label>.
|
|
|
<br>Les parrains reçoivent leurs <label class="font-bold">Cartes de parrainage</label> numériques et les transfèrent à leurs Filleuls.
|
|
|
<br>Dès lors qu'un Filleul réalise un achat chez un Commerçant, la Carte de parrainage correspondante est créditée.
|
|
|
</p>
|
|
|
|
|
|
<!--Grid row-->
|
|
|
<div class="row features-big">
|
|
|
|
|
|
<!--Grid column-->
|
|
|
<div class="col-md-4 mb-r wow fadeInLeft">
|
|
|
<i class="fa fa-handshake-o blue-text"></i>
|
|
|
<h5 class="feature-title">Commercant</h5>
|
|
|
<p class="grey-text">Les Commerçants fixent leurs offres de parrainages.<br>Exemple: 5€ de remise pour le Filleul.<br>5€ de remise pour le Parrain</p>
|
|
|
|
|
|
</div>
|
|
|
<!--Grid column-->
|
|
|
|
|
|
<!--Grid column-->
|
|
|
<div class="col-md-4 mb-r wow fadeInUp">
|
|
|
<i class="fa fa-euro blue-text"></i>
|
|
|
<h5 class="feature-title">Parrain</h5>
|
|
|
<p class="grey-text">Les Parrains sont récompensés sur leur Carte à chaque fois qu'un parrainage aboutie.<br>Les filleuls profitent de bons plans.</p>
|
|
|
</div>
|
|
|
<!--Grid column-->
|
|
|
|
|
|
<!--Grid column-->
|
|
|
<div class="col-md-4 mb-r wow fadeInRight">
|
|
|
<i class="fa fa-line-chart blue-text"></i>
|
|
|
<h5 class="feature-title">Avantages</h5>
|
|
|
<p class="grey-text">Les Parrains cumulent des récompenses toute l'année.<br> Les Commerçants voient leurs fréquentation augmenter.</p>
|
|
|
</div>
|
|
|
<!--Grid column-->
|
|
|
|
|
|
</div>
|
|
|
<!--Grid row-->
|
|
|
|
|
|
</section>
|
|
|
<!--Section: Features v.1-->
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
<!--Projects section v.3-->
|
|
|
<section class="section extra-margins" id="projects">
|
|
|
|
|
|
|
|
|
<!--Grid row-->
|
|
|
<div class="row">
|
|
|
|
|
|
<!--Grid column-->
|
|
|
<div class="col-lg-6 col-xl-5 pr-lg-5 pb-5 wow fadeInLeft" id="featuresImg1">
|
|
|
|
|
|
<!--Image-->
|
|
|
<img src="https://firebasestorage.googleapis.com/v0/b/webappparrain.appspot.com/o/ImgApp%2FHomeImgPar.jpg?alt=media&token=febce08c-a3af-452b-b870-223b8b3b1583" alt="Sample project image" class="img-fluid z-depth-2">
|
|
|
|
|
|
</div>
|
|
|
<!--Grid column-->
|
|
|
|
|
|
<!--Grid column-->
|
|
|
<div class="features col-lg-6 col-xl-7 pl-lg-5 pb-4 wow fadeInLeft flex-center" id="part1Features" style="padding-top: 5%">
|
|
|
|
|
|
<h5 class="feature-title font-bold">Particuliers</h5>
|
|
|
<!--Grid row-->
|
|
|
<div class="feature-item row mb-3" >
|
|
|
<div class="col-12">
|
|
|
<!--<h5 class="feature-title font-bold">Safety</h5>-->
|
|
|
<p class="black-text">100% gratuit pour les particuliers, vos données
|
|
|
Confidentielles sont protégées, gagnez des avantages
|
|
|
N’a jamais été aussi simple…</p>
|
|
|
<br>
|
|
|
<p class="black-text">Inscrivez vous en quelques secondes et commencez à
|
|
|
Collectionner vos cartes de parrainage chez vos
|
|
|
Commerçants affiliés !</p>
|
|
|
<div class="col-md-12" id="btnFeature1">
|
|
|
<button class="btn btn-light-blue btn-lg wow fadeInDown" pageScroll="#intro" [pageScrollOffset]="0" [pageScrollDuration]="700" [pageScrollInterruptible]="false" href="#intro" (click)="loadRegisterComponent2();" style="margin-top: 10%">Inscrivez vous !</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--Grid row-->
|
|
|
|
|
|
<!--Grid row
|
|
|
<div class="feature-item row mb-3">
|
|
|
<div class="col-1 mr-1">
|
|
|
<i class="fa fa-code fa-lg red-text"></i>
|
|
|
</div>
|
|
|
<div class="col-10 ">
|
|
|
<h5 class="feature-title font-bold">Technology</h5>
|
|
|
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda voluptate velit.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
Grid row-->
|
|
|
|
|
|
<!--Third row
|
|
|
<div class="feature-item row">
|
|
|
<div class="col-1 mr-1">
|
|
|
<i class="fa fa-money fa-lg brown-text"></i>
|
|
|
</div>
|
|
|
<div class="col-10">
|
|
|
<h5 class="feature-title font-bold">Finance</h5>
|
|
|
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda voluptate velit.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
Third row-->
|
|
|
|
|
|
</div>
|
|
|
<!--Grid column-->
|
|
|
|
|
|
</div>
|
|
|
<!--Grid row-->
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
<!--Grid row-->
|
|
|
<div class="row pt-5">
|
|
|
|
|
|
<!--Grid column-->
|
|
|
<div class="features col-lg-6 col-xl-7 mb-3 wow fadeInRight">
|
|
|
<h5 class="feature-title font-bold">Commerçants</h5>
|
|
|
<h5 class="feature-title">Ce qui va changer pour votre commerce</h5>
|
|
|
|
|
|
|
|
|
<!--Grid row-->
|
|
|
<div class="feature-item row mb-3" id="part2features" >
|
|
|
<div class="col-12">
|
|
|
<!--<h5 class="feature-title font-bold">Safety</h5>-->
|
|
|
<p class="black-text"><label class="font-bold blue-text">Réaliser des économies</label>, contrairement à des services classiques
|
|
|
Et onéreux où vous devez payer d’avance, ne payer que lorsqu’un
|
|
|
client a effectivement réaliser un achat chez vous.</p>
|
|
|
<p class="black-text"><label class="font-bold blue-text">Des cartes de fidélités dématérialisées</label>, des frais en moins.</p>
|
|
|
<p class="black-text"><label class="font-bold blue-text">Moins de cartes oubliés</label>, un système de fidélité plus fiable.</p>
|
|
|
<p class="black-text"><label class="font-bold blue-text">Vos clients satisfaits</label>, ils sont récompensés lorsqu’ils vous
|
|
|
Envoient des clients.</p>
|
|
|
<p class="black-text"><label class="font-bold blue-text">Une meilleure visibilité sur internet</label>, vous figurez
|
|
|
Automatiquement dans notre base de données clients
|
|
|
Consultables par tous. Vos offres de fidélité sont publiées
|
|
|
Sur notre page Facebook sous 24h.</p>
|
|
|
|
|
|
<div class="col-md-12" id="btnFeature2">
|
|
|
<button class="btn btn-light-blue btn-lg wow fadeInDown waves-light" pageScroll="#intro" [pageScrollOffset]="0" [pageScrollDuration]="700" [pageScrollInterruptible]="false" href="#intro" (click)="loadRegisterComponent2();" style="margin-top: 10%">Inscrivez vous !</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<!--Grid column-->
|
|
|
|
|
|
<!--Grid column-->
|
|
|
<div class="col-lg-6 col-xl-5 mb-3 wow fadeInRight" id="featuresImg2">
|
|
|
|
|
|
<!--Image-->
|
|
|
<img src="https://firebasestorage.googleapis.com/v0/b/webappparrain.appspot.com/o/ImgApp%2FHomeImgCom.jpg?alt=media&token=beb1ef50-e902-4d18-ac05-e4f48a7cf72b" alt="Sample project image" class="img-fluid card-img z-depth-2">
|
|
|
|
|
|
</div>
|
|
|
<!--Grid column-->
|
|
|
|
|
|
</div>
|
|
|
<!--Grid row-->
|
|
|
|
|
|
</section>
|
|
|
<!--Projects section v.3-->
|
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
<!--Main Navigation-->
|
|
|
<main>
|
|
|
<div class="container" id="footer-text">
|
|
|
|
|
|
<!--Grid row-->
|
|
|
<div class="row py-5 mt-4">
|
|
|
|
|
|
<!--Grid column-->
|
|
|
<div class="col-md-12 text-center">
|
|
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
|
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
|
|
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
|
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
|
|
|
|
|
|
</div>
|
|
|
<!--Grid column-->
|
|
|
|
|
|
</div>
|
|
|
<!--Grid row-->
|
|
|
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
|
|
|
<!--Footer-->
|
|
|
<footer class="page-footer mdb-color center-on-small-only">
|
|
|
|
|
|
<!--Footer Links-->
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
|
|
|
<!--First column-->
|
|
|
<div class="col-md-3 offset-md-1">
|
|
|
<h5 class="title">Footer Content </h5>
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
|
</div>
|
|
|
<!--/.First column-->
|
|
|
|
|
|
<hr class="hidden-md-up">
|
|
|
|
|
|
<!--Second column-->
|
|
|
<div class="col-md-2 offset-md-1">
|
|
|
<h5 class="title">Links</h5>
|
|
|
<ul>
|
|
|
<li><a href="#!">Link 1</a></li>
|
|
|
<li><a href="#!">Link 2</a></li>
|
|
|
<li><a href="#!">Link 3</a></li>
|
|
|
<li><a href="#!">Link 4</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<!--/.Second column-->
|
|
|
|
|
|
<hr class="hidden-md-up">
|
|
|
|
|
|
<!--Third column-->
|
|
|
<div class="col-md-2">
|
|
|
<h5 class="title">Links</h5>
|
|
|
<ul>
|
|
|
<li><a href="#!">Link 1</a></li>
|
|
|
<li><a href="#!">Link 2</a></li>
|
|
|
<li><a href="#!">Link 3</a></li>
|
|
|
<li><a href="#!">Link 4</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<!--/.Third column-->
|
|
|
|
|
|
<hr class="hidden-md-up">
|
|
|
|
|
|
<!--Fourth column-->
|
|
|
<div class="col-md-2">
|
|
|
<h5 class="title">Links</h5>
|
|
|
<ul>
|
|
|
<li><a href="#!">Link 1</a></li>
|
|
|
<li><a href="#!">Link 2</a></li>
|
|
|
<li><a href="#!">Link 3</a></li>
|
|
|
<li><a href="#!">Link 4</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<!--/.Fourth column-->
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--/.Footer Links-->
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
<!--Call to action-->
|
|
|
<div class="call-to-action">
|
|
|
<ul>
|
|
|
<li>
|
|
|
<h5>Register for free</h5>
|
|
|
</li>
|
|
|
<li><a href="" class="btn btn-danger waves-light" mdbRippleRadius>Sign up!</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<!--/.Call to action-->
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
<!--Social buttons-->
|
|
|
<div class="text-center mb-3">
|
|
|
|
|
|
<a class="btn-floating btn-small btn-fb waves-light" mdbRippleRadius><i class="fa fa-facebook"> </i></a>
|
|
|
<a class="btn-floating btn-small btn-tw waves-light" mdbRippleRadius><i class="fa fa-twitter"> </i></a>
|
|
|
<a class="btn-floating btn-small btn-gplus waves-light" mdbRippleRadius><i class="fa fa-google-plus"> </i></a>
|
|
|
<a class="btn-floating btn-small btn-li waves-light" mdbRippleRadius><i class="fa fa-linkedin"> </i></a>
|
|
|
<a class="btn-floating btn-small btn-git waves-light" mdbRippleRadius><i class="fa fa-github"> </i></a>
|
|
|
<a class="btn-floating btn-small btn-pin waves-light" mdbRippleRadius><i class="fa fa-pinterest"> </i></a>
|
|
|
<a class="btn-floating btn-small btn-ins waves-light" mdbRippleRadius><i class="fa fa-instagram"> </i></a>
|
|
|
|
|
|
</div>
|
|
|
<!--/.Social buttons-->
|
|
|
|
|
|
<!--Copyright-->
|
|
|
<div class="footer-copyright">
|
|
|
<div class="container-fluid">
|
|
|
© 2017 Copyright: <a href=""> XJC </a>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--/.Copyright-->
|
|
|
|
|
|
</footer>
|
|
|
<!--/.Footer-->
|
|
|
|