-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
371 lines (351 loc) · 16.2 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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--meta http-equiv="refresh" content="10"-->
<title>QLever - QLeverize Your Data</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=apps,price_check,speed,support,verified,zoom_out_map" rel="stylesheet" />
<!--link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0&icon_names=speed" /-->
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/d61f9541ff.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark shadow py-3">
<div class="container">
<a class="navbar-brand" href="#">
<h1 class="m-0 h3">QLeverize</h1>
<p class="small text m-0 lead">by the makers of QLever</p>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#why-qlever">Why QLever</a></li>
<li class="nav-item"><a class="nav-link" href="#pricing">Licensing</a></li>
<li class="nav-item"><a class="nav-link" href="#other-services">Other Services</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="bg-header bg-primary text-center py-5">
<div class="blur-bg"></div>
<div class="container my-5 py-5">
<h1 class="display-3 text-shadow">QLeverize Your Data</h1>
<p class="lead text-shadow">The New Era of Knowledge Graphs: Fast, Scalable, and Easy to Use</p>
</div>
</header>
<!-- About Section -->
<section id="about" class="py-5">
<div class="container text-center mb-5">
<p class="lead">
<a href="https://github.com/ad-freiburg/qlever/">QLever</a> is a powerful open-source graph database and RDF
triplestore that allows you to load and query <strong>hundreds of billions of facts</strong> on a single
commodity machine, delivering <strong>unprecedented performance</strong>. QLever’s SPARQL frontend offers
<strong>intuitive autocompletion</strong> and <strong>real-time term lookup</strong>, making it easier than ever
to work with knowledge graphs. Explore our <a href="https://qlever.dev/">public SPARQL endpoints</a> and see the
difference for yourself.
<strong>QLeverize</strong> offers <strong>commercial support</strong> for organizations seeking faster
implementations, advanced scalability, and private assistance tailored to their needs.
</p>
</div>
<!-- Video Carousel -->
<div class="container mt-5">
<div id="qleverCarousel" class="carousel bg-primary rounded-5 shadow py-5">
<!-- Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#qleverCarousel" data-bs-slide-to="0" class="active" aria-current="true"
aria-label="Slide 1"></button>
<button type="button" data-bs-target="#qleverCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<!-- Carousel Inner -->
<div class="carousel-inner">
<div class="carousel-item active">
<video class="d-block w-100 mx-auto shadow rounded" style="max-width: 600px; height: auto;" muted>
<source src="OSM-autocomplete.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="carousel-item">
<video class="d-block w-100 mx-auto shadow rounded" style="max-width: 600px; height: auto;" muted>
<source src="OSM-powerlines.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#qleverCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#qleverCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
<!-- Why QLever Section-->
<section id="why-qlever" class="bg-light py-5">
<div class="container">
<h2 class="text-center mb-4">Why Choose QLever?</h2>
<div class="d-flex justify-content-center row g-4">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="container p-3 card border-primary h-100 bg-primary shadow">
<span class="material-symbols-outlined text-center">
<h1 class="text-white">speed</h1>
</span>
<h4 class="">Unmatched Speed and Efficiency</h4>
<p>QLever delivers fast query performance, handling
smaller queries in milliseconds and completing complex ones on massive datasets in seconds.</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="container p-3 card border-primary h-100 bg-primary shadow">
<span class="material-symbols-outlined text-center">
<h1 class="text-white">zoom_out_map</h1>
</span>
<h4>Effortless Scalability</h4>
<p>Whether working with millions or billions of triples, QLever
scales seamlessly, managing large datasets with ease.</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="container p-3 card border-primary h-100 bg-primary shadow">
<span class="material-symbols-outlined text-center">
<h1 class="text-white">price_check</h1>
</span>
<h4>Cost-Effective on Commodity Hardware</h4>
<p>Save on hardware and cloud costs with QLever’s
efficient design, which performs exceptionally well without clusters or specialized setups.</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="container p-3 card border-primary h-100 bg-primary shadow">
<span class="material-symbols-outlined text-center">
<h1 class="text-white">verified</h1>
</span>
<h4>Proven Track Record</h4>
<p>Trusted by global projects like Wikidata, UniProt, PubChem,
OpenStreetMap, and Dblp.</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="container p-3 card border-primary border-primary h-100 bg-primary shadow">
<span class="material-symbols-outlined text-center">
<h1 class="text-white">apps</h1>
</span>
<h4>Comprehensive Features</h4>
<p>Full SPARQL 1.1 support, GeoSPARQL for spatial queries, and
integrated full-text search make QLever a powerful choice.</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="container p-3 card border-primary h-100 bg-primary shadow">
<span class="material-symbols-outlined text-center">
<h1 class="text-white">support</h1>
</span>
<h4>Open-Source with Commercial Options</h4>
<p>While QLever is fully open-source, we offer
commercial licenses for high availability, scaling, private issue tracking, and premium support.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Licensing and Support Section -->
<section id="pricing" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Licensing and Support Options</h2>
<div class="row g-4 text-center">
<!-- Free (Open Source) -->
<div class="col-md-4">
<div class="card p-3 h-100 d-flex flex-column">
<h4>Free (Open Source)</h4>
<p>Fully feature-complete and free to use. Community support available via GitHub for bug reports and
general advice.</p>
<p><strong>Note:</strong> No assistance is provided for query optimization, profiler analysis, or internal
system debugging for non-open-data datasets.</p>
</div>
</div>
<!-- Standard Support -->
<div class="col-md-4">
<div class="card p-3 h-100 d-flex flex-column">
<h4>Standard Support</h4>
<p>Perfect for organizations starting with QLever or expanding datasets and query demands. Ideal for
moderate workloads with growing scalability needs.</p>
<p><strong>Support:</strong> Basic or priority support, private issue tracking, and quality-assured
binaries.</p>
</div>
</div>
<!-- Enterprise Support -->
<div class="col-md-4">
<div class="card p-3 h-100 d-flex flex-column">
<h4>Enterprise Support</h4>
<p>Perfect for large-scale knowledge graphs requiring continuous response times and extensive query
capacity.</p>
<p><strong>Support:</strong> Priority support, priority feature requests, private issue tracking and
quality-assured binaries.</p>
</div>
</div>
</div>
<p class="text-center mt-4">
<a href="mailto:[email protected]?subject=Request%20for%20QLever%20Price%20Sheet" class="btn btn-primary">
Contact us today to receive a detailed price sheet
</a>
</p>
</div>
</section>
<section id="other-services" class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-4">Other Services</h2>
<p class="text-center mb-5">At QLeverize, we are dedicated to helping our clients tailor QLever to their unique
needs. Whether you're working with small-scale deployments or large-scale knowledge graphs, our expertise allows
us to fast-track your implementation and ensure seamless integration into your workflows, so you can achieve
exceptional results more efficiently.</p>
<div class="row">
<!-- Infrastructure Options -->
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Infrastructure Options</h3>
<ul>
<li><strong>Single-Server Setup:</strong> Cost-effective solution for small to medium datasets.</li>
<li><strong>High Availability (HA):</strong> Ensures continuous operation with failover capability.</li>
<li><strong>Large-Scale Deployments:</strong> Multi-machine setup for maximum availability and
throughput.</li>
</ul>
</div>
</div>
</div>
<!-- SLA Section -->
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Service Level Agreements (SLAs)</h3>
<p>
Customizable SLAs tailored to your operational needs, including guaranteed response times, uptime
commitments, and 24/7 critical support.
</p>
<p>Contact us to develop an SLA plan aligned with your requirements and budget.</p>
</div>
</div>
</div>
<!-- Managed Services -->
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">QLever as a Managed Service</h3>
<p>
Fully managed service hosted on major cloud platforms. Deploy QLever tailored to your needs or
pre-loaded with datasets like UniProt, PubChem, Wikidata, and OpenStreetMap. No in-house infrastructure
needed.
</p>
</div>
</div>
</div>
<!-- Embedded Environments -->
<div class="col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title">Embedded Environments</h3>
<p>
Optimized builds for memory and CPU efficiency, ideal for automotive, medical devices, and other
regulated industries. Supports certifications and regulatory standards.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Team-->
<section id="team" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Meet Our Team</h2>
<div id="team-profiles" class="row d-flex justify-content-center g-4"></div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-5">
<div class="container text-center">
<h2>Contact Us</h2>
<p>For more information about QLever, licensing and infrastructure options, managed services, or tailored
solutions, please reach out to us.</p>
<a href="mailto:[email protected]?subject=Inquiry%20about%20QLever%20Services" class="btn btn-primary">Email
Us</a>
</div>
</section>
<!-- Footer -->
<footer class="text-center py-3">
<p>© 2024 QLeverize</p>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="teamProfile.js"></script>
<!-- JS code needed -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const carousel = document.querySelector("#qleverCarousel");
const carouselInstance = bootstrap.Carousel.getOrCreateInstance(carousel);
const videos = carousel.querySelectorAll("video");
// Pause carousel cycling and play the first video
carouselInstance.pause();
videos[0].play();
// Set up 'ended' event for each video
videos.forEach((video, index) => {
video.addEventListener("ended", () => {
if (index === videos.length - 1) {
// If the last video ends, go back to the first slide
carouselInstance.to(0);
videos[0].play();
} else {
// Otherwise, move to the next slide
carouselInstance.next();
}
});
});
// Restart video on slide change
carousel.addEventListener("slid.bs.carousel", (event) => {
const activeVideo = videos[event.to];
if (activeVideo) {
activeVideo.play();
}
});
});
const teamProfiles = document.getElementById("team-profiles");
teamProfile.forEach(option => {
const profileContainer = document.createElement("div");
profileContainer.classList.add("col","col-xl-3","col-lg-4","col-md-6");
profileContainer.innerHTML = `
<div class="card p-3 h-100">
<div class="d-flex justify-content-center m-3">
<img src="${option.photo}" class="img-fluid rounded-circle profile-img">
</div>
<h4 class="text-center">${option.name}</h4>
<h6 class="text-center">${option.role}</h6>
<div class="m-3 socmed d-flex justify-content-center"></div>
</div>
`;
teamProfiles.appendChild(profileContainer);
const socmed = profileContainer.querySelector(".socmed");
Object.keys(socMed).forEach(platform => {
if (option[platform]) {
const socmedLink = document.createElement("a");
socmedLink.classList.add("btn","btn-dark","shadow","rounded-circle","mx-1");
socmedLink.setAttribute('href', option[platform]);
socmedLink.innerHTML = `<i class="fa-brands ${socMed[platform].icon}"></i>`;
socmed.appendChild(socmedLink);
}
});
});
</script>
</body>
</html>