tagly/landing.html at master · Laink/tagly · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link href="styles/main.css" rel="stylesheet">
    <link href="styles/remodal.css" rel="stylesheet">
    <link href="styles/remodal-default-theme.css" rel="stylesheet">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="scripts/main.js"></script>
    <script type="text/javascript" src="scripts/remodal.min.js"></script>
    <title>DataHound</title>
</head>

<body class="landing">
  <div class="page">
    <div class="remodal" data-remodal-id="modal">
      <div class="logo"><img src="./images/logo-dark.svg" alt="DataHound logo"></div>
      <h6 class="title1">We'll be live soon.</h6>
      <p>In the meantime, give us your email and we'll send you a free trial of DataHound.</p>
      <div class="formGroup">
        <label for="project-url" class="formLabel caption">Name</label>
        <input type="text" id="name" class="js-pasteInput" name="name" placeholder="Jonathan Dog" autocomplete="off">
      </div>
      <div class="formGroup">
        <label for="project-url" class="formLabel caption">E-mail Address</label>
        <input type="text" id="email" class="js-pasteInput" name="email" placeholder="Click here to add your e-mail" autocomplete="off">
      </div>
      <br><br>
      <button data-remodal-action="confirm" class="button button--plain">Request free trial</button>
    </div>

    <section class="top">
      <img src="./images/logo-header.svg" alt="DataHound logo" class="logo">
      <a type="button" class="button button--plain" href="#modal">Try for free</a>
      <div class="text">
        <h2 class="display2">Track what matters on your e-shop,<br />no coding.</h2>
        <h3 class="title1">Easily get insights on your users' behavior</h3>
        <a href="#insight" class="trial-link" id="scroll-to-insight">Learn More <i class="mdi mdi-arrow-right"></i></a>
      </div>
    </section>
    <section class="insight" id="insight">
      <div class="container">
        <div class="content">
         <h2 class="display2">Easily get insights on your users' behavior</h2>
         <h3 class="title1 opacity">Collect customer data</h3>
         <h3 class="title1 opacity">Zero coding, what you see is what you get</h3>
        </div>
        <img src="./images/behaviour_screen.jpg" alt="">
      </div>
    </section>
    <section class="steps">
      <div class="container">
        <div class="headings">
          <h2 class="display2">We adapt to your business with simplicity</h2>
          <h3 class="title1">Collecting customer data shouldn’t require coding skills.<br />DataHound’s point-and-click interface guides you through setting up custom analytics on your e-shop with no technical know-how.</h3>
        </div>
         <div class="cols">
           <div class="col">
             <span class="stepNumber">1</span>
             <h4 class="title1">Project Setup.</h4>
             <p class="opacity4">We fit the needs of small e-shops to provide a better DataHound experience, adapted to your project's architecture.</p>
           </div>
           <div class="col">
             <span class="stepNumber">2</span>
             <h4 class="title1">Magic Pages.</h4>
             <p class="opacity4">We've worked hard so you won't have to! Special templates were designed by our webanalysts to fit your every need: product pages, shopping cart, conversion funnel. You're all set!</p>
           </div>
           <div class="col">
             <span class="stepNumber">3</span>
             <h4 class="title1">Step-by-step Guide.</h4>
             <p class="opacity4">We'll give you a step-by-step guide to set up the elements you want to track on your page. All you have to do is browse your website, and point and click what matters.</p>
           </div>
         </div>
      </div>
    </section>
    <section class="lifeguards">
      <div class="container">
        <img src="./images/lifeguards_screen.jpg" alt="">
        <div class="content">
          <h2 class="display2">We'll be your watchdogs.</h2>
          <h3 class="title1 opacity">DataHound will keep an eye on the elements you’ve tracked 24/7 to make sure everything’s well implemented.</h3>
          <h3 class="title1 opacity">If anything goes wrong, you will get an e-mail alert with a link to a step-by-step guide through an easy fix.</h3>
        </div>
      </div>
    </section>
		<section class="reports">
      <div class="container">
        <div class="content">
          <h2 class="display2">Weekly/Monthly reports</h2>
          <h3 class="title1 opacity">Get insightful reports with key numbers to better adjust your e-shop.</h3>
          <h3 class="title1 opacity">These can be shared and downloaded as PDF or a web page.</h3>
        </div>
        <img src="./images/report-illu.svg" alt="" class="report-illu">
      </div>
    </section>
    <section class="pricing">
      <div class="container">
        <h2 class="display2">Start for free, upgrade later.</h2>
        <h3 class="title1">After a free 30-days trial, DataHound is all yours for a monthly 19€</h3>
        <a href="#modal" class="trial-link">Try now for free <i class="mdi mdi-arrow-right"></i></a>
        <span class="price">/19€</span>
      </div>
    </section>
  </div>
  <footer>
   <div class="container">
     <img src="./images/logo-footer.svg" class="logo" alt="">
     <nav>
       <ul class="navleft">
         <li class="footernavItem">
           <a href="#modal" class="footernavLink">Pricing</a>
         </li>
         <li class="footernavItem">
           <a href="#modal" class="footernavLink">Jobs</a>
         </li>
        <li class="footernavItem">
           <a href="#modal" class="footernavLink">Blog</a>
           </li>
         <li class="footernavItem">
           <a href="#modal" class="footernavLink">Community</a>
         </li>
        <li class="footernavItem">
           <a href="#modal" class="footernavLink">Press</a>
           </li>
         <li class="footernavItem">
           <a href="#modal" class="footernavLink">Help</a>
         </li>
          <li class="footernavItem">
           <a href="#modal" class="footernavLink">Facebook</a>
           </li>
         <li class="footernavItem">
           <a href="#modal" class="footernavLink">Twitter</a>
         </li>
        <li class="footernavItem">
           <a href="#modal" class="footernavLink">Contact</a>
         </li>
       </ul>
       <ul class="navright">
         <li class="footernavItem">
           <a href="#modal" class="footernavLink">About</a>
         </li>
         <li class="footernavItem">
           <a href="#modal" class="footernavLink">Privacy</a>
         </li>
         <li class="footernavItem">
           <a href="#modal" class="footernavLink">Terms</a>
         </li>
       </ul>
      </nav>
      <p class="caption opacity">© DataHound Limited. All right reserved. 27 bis rue du Progrès, 93100 Montreuil, France</p>
   </div>
  </footer>
</body>

</html>