-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathProduct.html
143 lines (123 loc) · 6.6 KB
/
Product.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
<!DOCTYPE html>
<html>
<head>
<meta name="google-site-verification" content="BkJtGkSDAHT9exhaigFtJRcYo6mkxjk2dxZOh7o2eqg" />
<meta name ="viewport" content = "width=device-width, initial-scale=1.0">
<title>Cadeira AI</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script defer src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/js/all.min.js"></script>
</head>
<body>
<body style="background-color:black;">
<section class= "header">
<nav>
<a href="index.html"><img src="Images/Cad.png"></a>
<div class="nav-links" id="navLinks">
<i id="timesIcon" class="fa fa-times" onclick="hideMenu()"></i>
<h4>
<li><a href ="index.html" >HOME</a></li>
<li><a href ="Product.html" >PRODUCT</a></li>
<li><a href ="Demo.html" class="demo">DEMO</a></li>
<li><a href ="About.html">ABOUT US</a></li>
<li><a href ="Contact.html">CONTACT US</a></li>
</h4>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<p>
</p>
</div>
</section>
<section class="ProductTitle">
<h1>Our Product</h1>
</section>
<section class="Cadeira" aria-label="Details of Cadeira AI and why it was created">
<div class="content-contain">
<div class="CadeiraText">
<p>Cadeira AI was designed to facilitate the booking process for businesses. Cadeira will be available in English, French and Spanish along with more languages in the near future. The most common way to make reservations is through phone calls and keeping someone on the phone all day is a time-consuming task. Restaurants encounter difficulties in managing incoming calls efficiently. This challenge is primarily due to the constrained availability of their phone lines. As a result, the phone lines often find themselves occupied, preventing the company from handling more than one call simultaneously. The combination of restricted operational hours and the limitation of handling only a single call at a time creates hurdles in providing timely and effective communication with customers, potentially leading to customer dissatisfaction. <br><br> This is where Cadeira AI comes in. By creating an Artificial Intelligence that takes care of the entire reservation process allows for employees to do more meaningful tasks. Training our AI to respond to all types of phrases and requests with a large language model (LLM) creates a seamless system that potentially doesn’t need to be overseen by staff. This design will be fully functional and be trained to notify a restaurant employee if the process has an issue. This model allows employees and hostesses to maintain their focus on customers who are present in the establishment. This improves customer satisfaction and streamlines the reservation process at a level that is unimaginable. We plan to redesign the reservation all around the world one restaurant at a time.
</p>
</div>
<div class="Tableimg">
<a><img src="Images/Table.png" alt="Cadeira AI potential clients"></a>
</div>
</div>
</section>
<section class="MediaTitle">
<h1>Media</h1>
</section>
<section class="Media">
<div class="content-contain">
<div class="Ipad1img scroll-fade">
<a><img src="Images/Ipad1.JPG" id= "scrollImage1" alt = "Cadeira AI on a table showcasing the sleek design and technology"></a>
</div>
<div class="Ipad2img scroll-fade">
<a><img src="Images/Ipad2.JPG" id= "scrollImage2" alt = "Cadeira AI on a tablet showcasing the sleek design and technology"></a>
</div>
</div>
</section>
<!---- Footer---->
<section class="footer" aria-label ="How to connect with Cadeira AI and contact information">
<h2>Connect With Us</h2>
<div class="icons">
<a href="https://www.instagram.com/cadeiraai/" target="_blank"><i class="fab fa-instagram" aria-label = "Cadeira AI Instagram"></i></a>
<a href="https://github.com/CadeiraAI" target="_blank"><i class="fab fa-github" aria-label ="Cadeira AI github"></i></a>
<a href="https://www.linkedin.com/company/cadeira-ia" target="_blank"><i class="fab fa-linkedin" aria-label="Cadeira AI Linkedin"></i></a>
</div>
<p>© Cadeira AI 2024</p>
<p>Made with <i class="fa fa-heart"></i> by Cadeira AI</p>
</section>
<!-------Javascript for toggle menu------->
<script>
var navLinks = document.getElementById("navLinks");
var timesIcon = document.getElementById("timesIcon");
function showMenu() {
navLinks.classList.add("active");
timesIcon.classList.add("active");
}
function hideMenu() {
navLinks.classList.remove("active");
timesIcon.classList.remove("active");
}
</script>
<!------------Javascript for image-------->
<script>
function isElementInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function handleScroll() {
const scrollImage1 = document.getElementById("scrollImage1");
const scrollImage2 = document.getElementById("scrollImage2");
if (isElementInViewport(scrollImage1)) {
scrollImage1.classList.add("animate__animated", "animate__fadeIn");
}
if (isElementInViewport(scrollImage2)) {
scrollImage2.classList.add("animate__animated", "animate__fadeIn");
}
if (isElementInViewport(scrollImage1) && isElementInViewport(scrollImage2)) {
window.removeEventListener("scroll", handleScroll);
}
}
window.addEventListener("scroll", handleScroll);
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CRMJVCSV0S"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-CRMJVCSV0S');
</script>
</body>
</html>