mojo-website/homepage at main · loopteam0/mojo-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<section class="homepage">
  <!-- Hero Section -->
  <app-homepage-hero></app-homepage-hero>


  <!-- "Why choose us" / "Our Advantages" section -->
  <section id="container" class="entire-advantages-section">
    <span id="text-xs">Why Choose Us</span>
    <span id="text-lg">Some of our advantages</span>

    <!-- Container holding feature cards -->
    <div class="feature-cards-wrapper">
      <!-- Card Population with "*ngFor" -->
      <div class="feature-card" *ngFor="let card of advantageCard">
        <!-- Ellipse holding the container -->
        <div class="icon-container">
          <img src="{{ card.icon }}" alt="" />
        </div>

        <div class="text-container">
        <span id="text-md">{{ card.title }}</span>
        <span id="text-xs">{{ card.subtitle }}</span>
        </div>
      </div>
    </div>
  </section>

  <!-- "Steps to become a mojoer" section -->
  <app-become-a-mojoer></app-become-a-mojoer>

  <!-- About Mojo section -->
  <section id="container" class="about-mojo-section" *ngFor="let info of aboutMojo">
    <div class="about-mojo-left">
      <span [innerHTML]="PageData.result.pageSection[3].header | safeHtml" id="text-lg"></span>
      <span [innerHTML]="PageData.result.pageSection[3].subtext | safeHtml" id="text-rg"></span>

      <!-- Image appears for mobile here-->
      <img id="about-us-mobile-mockup" src="/assets/images/about-mojo-img.png" alt="" />

      <button (click)="toAboutUs()" id="btn-filled">More about Us</button>
    </div>

    <!-- Image appears for mobile here-->
    <img id="about-us-desktop-mockup" src="/assets/images/about-mojo-img.png" alt="" />
  </section>

  <!-- General features section (What our app offers)-->
  <app-general-features></app-general-features>

  <!-- "Mojo is for you" section -->
  <section
    id="container"
    class="mojo-for-you-section"
    *ngFor="let info of mojoForYou"
  >

  <!-- Desktop mockup appears here -->
    <div class="section-left-desktop">
      <img id="desktop-mockup" src="{{ info.image }}" alt="" />
    </div>

    <div class="section-right">
      <div class="title-container">
        <span id="text-xs">{{ info.subheader }}</span>
        <span id="text-xl">{{ info.mainHeader }}</span>
      </div>

      <!-- Mobile mockup appears here,
        in between header and points -->
      <div class="section-left-mobile">
        <img id="mobile-mockup" src="{{ info.image }}" alt="" />
      </div>

      <div class="features-container">
        <span *ngFor="let point of info.points" class="point">
          <img src="/assets/svgs/icn-check-blue.svg" alt="" />
          <span id="text-rg">{{ point }}</span>
        </span>
      </div>
    </div>
  </section>

  <app-mojo-merchant-cta></app-mojo-merchant-cta>

  <!-- Schedule bill payments section -->
  <app-schedule-bill-payments></app-schedule-bill-payments>

  <!-- How it works section -->
  <!-- <app-how-it-works></app-how-it-works> -->

  <!-- Feedbacks (Reviews) section -->
  <!-- <app-feedbacks></app-feedbacks> -->

  <!-- Contact Us section -->
  <app-contact-us></app-contact-us>

  <!-- Media and Press -->
  <app-media-and-press></app-media-and-press>

  <!-- Newsletter section -->
  <app-newsletter></app-newsletter>


</section>