-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (147 loc) · 9.58 KB
/
index.html
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
157
158
159
160
161
<html>
<head>
<title>Ayoda</title>
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="shortcut icon" href="./assets/img/logo/png/Logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="has-background-orange">
<main class="is-flex is-flex-direction-column">
<section class="is-flex is-flex-direction-column has-background-white-bis height-full">
<header class="columns p-75 pt-50">
<section class="column is-flex is-flex-direction-column is-align-items-center gap-15 is-flex-1">
<img src="./assets/img/logo/svg/Text-Logo-No-Background-Black.svg" class="p-0 height-50" />
</section>
<nav class="column is-three-fifths is-flex is-justify-content-center is-align-items-center gap-50">
<a href="#what-we-do" class="nav-link">What we do</a>
<a href="#why-us" class="nav-link">Why us</a>
<a href="#calculate-savings" class="nav-link">Calculate savings</a>
</nav>
<section class="column is-hidden-mobile is-align-items-flex-end">
<button class="button is-medium is-orange is-rounded" >
Contact us
</button>
</section>
</header>
<section class="is-flex is-flex-direction-column is-flex-1 is-justify-content-center p-75 pt-0">
<h1 class="is-size-1 has-text-centered">
Reducing <span class="has-text-orange">Waste</span>
</h1>
<h2 class="is-size-2 has-text-centered">
down to
</h2>
<h3 class="is-size-3 has-text-centered">
an <span class="has-text-orange">iota</span>
</h3>
<div class="is-flex is-flex-direction-column is-align-items-center pt-75">
<button class="button is-medium is-orange is-rounded" >
Try the demo
</button>
</div>
</section>
</section>
<section id="what-we-do" class="columns has-background-white gap-50 p-75 p-50-mobile m-0">
<div class="column is-flex is-flex-direction-column gap-15">
<h2 class="title has-text-orange has-text-centered-mobile">
What We Do
</h2>
<p class="column is-size-6 line-height-2">
Our mission is to reduce food waste in the restaurant industry down to an iota.
We're tackling this issue using our custom built machine learning models that take in various sorts of information,
such as sales, weather, and local events data to provide estimates for what foot traffic will look
like in different markets at different times. These estimates can make all the difference for restaurants,
particularly those just starting out, by giving them clarity on how much inventory to buy ahead of time.
</p>
</div>
<img src="./assets/img/icons/dashboard.svg" class="is-hidden-mobile" style="height: 350px;" />
</section>
<section id="why-us" class="columns has-background-white-bis p-75 p-50-mobile m-0">
<div class="column is-flex is-align-items-center is-justify-content-center is-hidden-mobile">
<img src="./assets/img/icons/tie.svg" class="opacity-75" style="height: 100px;" />
</div>
<div class="column is-three-quarters is-flex is-flex-direction-column gap-15">
<h2 class="title has-text-orange has-text-centered-mobile">
Why Us
</h2>
<p class="is-size-6 line-height-2">
Ayoda is the tailor-fit solution for your tailor-fit needs. Each instance of Ayoda is trained specifically
on your geographic market, with customizations available for any variables that could affect your businesses
day to day traffic. If your business has years of sales data we can train our model directly on that. If you're
the new place on the block we also offer pre-trained models using data from other restaurants in your area.
</p>
</div>
</section>
<section
id="calculate-savings"
class="is-flex is-flex-direction-column is-align-items-center has-background-white gap-50 p-75 p-50-mobile"
>
<h2 class="title has-text-orange has-text-centered-mobile">How much are we talking?</h2>
<div class="columns box gap-10" style="background-color: rgb(250, 250, 250); border: 1px solid rgb(0, 0, 0, 0.1); border-radius: 25px; box-shadow: 0px 0px 25px 0px rgba(60, 60, 60, 0.2);">
<div class="column is-two-fifths is-flex is-flex-direction-column p-25 pr-50 pl-50 gap-25">
<h1 class="title is-size-4 has-text-orange m-0">Your Info</h1>
<div>
<h2 class="subtitle m-0 mb-4">Last Month's Revenue</h2>
<div class="field">
<p class="control has-icons-left has-icons-right">
<input id="revenue-input" class="input" type="text" placeholder="Revenue">
<span class="icon is-small is-left">
<i class="fas fa-dollar-sign"></i>
</span>
</p>
</div>
</div>
<div>
<h2 class="subtitle m-0 mb-4">Last Month's Cost of Goods Sold</h2>
<div class="field">
<p class="control has-icons-left has-icons-right">
<input id="cogs-input" class="input" type="text" placeholder="COGS">
<span class="icon is-small is-left">
<i class="fas fa-dollar-sign"></i>
</span>
</p>
</div>
</div>
<div>
<h2 class="subtitle m-0 mb-2">Last Month's Shrinkage Rate</h2>
<input id="shrinkage-input" class="input" type="text" placeholder="Ex: 10%">
</div>
<button class="button" onclick="calculateSavings()">Calculate</button>
</div>
<div class="column is-three-fifths is-flex is-flex-direction-column p-25 pr-50 pl-50 gap-25">
<div class="is-flex is-flex-direction-row gap-25 is-flex-1">
<div class="is-flex is-flex-direction-column gap-15">
<h2 class="title is-size-5-mobile">Your Current State</h2>
<h2>Current COGS</h2>
<label id="current-cogs">-</label>
<h2>Current Profit</h2>
<label id="current-profit">-</label>
</div>
<div class="is-flex is-flex-direction-column gap-15">
<h2 class="title is-size-5-mobile has-text-orange">The Ayoda Impact</h2>
<h2>New COGS</h2>
<label id="ayoda-cogs">-</label>
<h2>New Profit</h2>
<label id="ayoda-profit">-</label>
</div>
</div>
<div class="is-flex is-flex-direction-column is-align-items-center gap-25">
<h2 class="subtitle m-0 mb-2">Total Annual Savings</h2>
<label id="savings-output" class="title">-</label>
<!-- <label id="savings-percentage-output" class="title"></label> -->
</div>
</div>
</div>
</section>
<footer class="is-flex is-flex-direction-column gap-25 p-75">
<h2 class="subtitle has-text-white m-0">© Ayoda 2023</h2>
<!--<div class="is-flex is-flex-direction-row gap-15">
<input class="input width-250 is-align-self-flex-start" type="text" placeholder="email">
<button class="button is-white">Contact us</button>
</div>-->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="./assets/js/index.js"></script>
</footer>
</main>
</body>
</html>