-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
228 lines (225 loc) · 15.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Octigen - Data, AI & Reporting Automation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Octigen GmbH provides expert consulting in data integration,
transformation, AI, and quantitative analysis across Switzerland,
specializing in Financial Services.">
<meta name="keywords"
content="Octigen, Data Consulting, AI Consulting, Data Integration, Data Transformation,
Quantitative Analysis, Financial Services, Reporting Automation, Powerpoint Reporting">
<meta name="author" content="Octigen GmbH">
<meta property="og:title" content="Octigen - Data, AI and Automated Reporting Consulting">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="main.js" defer></script>
<script src="translator.js" defer></script>
<script src="form.js" defer></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/main.css">
<link rel="stylesheet" href="assets/homepage.css">
<link rel="icon" type="assets/images/png" href="favicon.png">
</head>
<body class="d-flex flex-column vh-100">
<main>
<nav class="navbar navbar-expand-lg position-absolute w-100">
<div class="container d-flex justify-content-between align-items-center">
<!-- Logo -->
<a class="navbar-brand" href="#">
<img src="assets/images/logo_octigen_black.png" alt="Octigen Logo" style="max-width:170px" class="d-inline-block align-top">
</a>
<!-- Right Section (Hamburger + Nav Links + Language Selector) -->
<div class="d-flex align-items-center">
<!-- Hamburger Menu -->
<div class="dropdown dropdown-hamburger-container">
<button class="navbar-toggler me-lg-2" id="hamburgerMenu" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="dropdown-hamburger dropdown-menu dropdown-menu-end" id="menuDropdown">
<a class="dropdown-item mb-2" href="#services">Our Services</a>
<a class="dropdown-item mb-2" href="#who-we-are">Who We Are</a>
<a class="dropdown-item mb-2" href="#contacts">Contact Us</a>
</div>
</div>
<!-- Navigation Links -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item ms-4"><a class="nav-link" href="#services" data-translate="common.nav.services">Our Services</a></li>
<li class="nav-item ms-4"><a class="nav-link" href="#who-we-are" data-translate="common.nav.who_we_are">Who We Are</a></li>
<li class="nav-item ms-4"><a class="nav-link nav-highlighted-link" href="#contacts" data-translate="common.nav.contact_us">Contact Us</a></li>
</ul>
</div>
<!-- Language Dropdown -->
<div class="dropdown language-selector ms-2 ms-lg-5">
<button class="dropdown-toggle nav-link" id="langDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<span id="currentLang">EN</span>
</button>
<ul class="lang-dropdown dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item lang-select" href="#" data-lang="de">DE</a></li>
<li><a class="dropdown-item lang-select" href="#" data-lang="fr">FR</a></li>
<li><a class="dropdown-item lang-select" href="#" data-lang="it">IT</a></li>
<li><a class="dropdown-item lang-select" href="#" data-lang="en">EN</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Main Hero -->
<section class="container-fluid main-hero">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3 class="hero-top-header mb-2" data-translate="hero.top_header">AI, Data and Reporting Services</h3>
<h1 class="display-6 mb-3" data-translate="hero.main_header">Harness the Power of your Data.</h1>
<div class="container-fluid hero-text ps-0 pe-lg-5 mb-4">
<p data-translate="hero.description">Take advantage of a partner that knows how to handle your data,
using AI to make your operations run smoothly, and create outstanding client reporting
while using the software you already have. This is Octigen.
</p>
</div>
<a href="#services" class="btn btn-primary" data-translate="hero.button">What we can do for you</a>
</div>
</div>
</div>
</section>
<!-- Our Services -->
<section class="container-fluid p-lg-5 py-5 px-0 service-section" id="services">
<div class="container">
<div class="py-4">
<h2 class="text-center mt-1 mb-5" data-translate="services.title">Our Services</h2>
</div>
</div>
<div class="row g-4 g-lg-3 px-3 px-lg-5 py-0 mb-4">
<div class="col-md-5">
<div class="data-sources-box service-box p-5 m-2 h-100">
<h3 class="service-box-title mb-4" data-translate="services.data_integration.title">Your data sources in a
coherent landscape</h3>
<p data-translate="services.data_integration.description">Data is the raw ore of your business intelligence.
Octigen is highly proficient in refining it into a precious resource for you, by bringing our tools right <b>to your data.</b></p>
</div>
</div>
<div class="col-md-7">
<div class="service-box p-5 m-2 h-100">
<div class="row">
<div class="col-lg-6">
<h3 class="service-box-title mb-4" data-translate="services.reporting.title">Automate your client reporting</h3>
<p data-translate="services.reporting.description">Octigen helps you focus on the bottom line rather than spending unnecessary time on reports. From software development & integration to <i>reporting as a service</i>, we offer you à la carte solutions for your needs.</p>
</div>
<div class="col-lg-6">
<img class="reporting-box-image" src="assets/images/reporting_cycle.png" alt="Reporting">
</div>
</div>
</div>
</div>
</div>
<div class="row g-4 g-lg-3 px-3 px-lg-5 py-0 mb-4">
<div class="col-md-6">
<div class="quantitative-box service-box p-5 m-2 h-100">
<h3 class="service-box-title mb-4" data-translate="services.quant_analysis.title">Elevate your quantitative edge</h3>
<p data-translate="services.quant_analysis.description">Let us supercharge your quant analytics with our expertise, in topics like Machine Learning, data quality, portfolio construction, and time series forecasting.</p>
</div>
</div>
<div class="col-md-6">
<div class="service-box p-5 m-2 h-100">
<div class="row">
<div class="col-lg-5">
<img class="ai-box-image" src="assets/images/ai_chat.png" alt="AI Chat">
</div>
<div class="col-lg-7">
<h3 class="service-box-title mb-4" data-translate="services.generative_ai.title">Generative AI, in the real world</h3>
<p data-translate="services.generative_ai.description">At Octigen we have extensive experience in delivering real business value with clever uses of Large Language Models (LLMs). Have some ideas of potential use cases? <a style="color: white;" href="#contacts">Let's talk.</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid p-lg-5 py-5 who-we-are-section" id="who-we-are">
<div class="container-fluid py-4">
<h2 class="text-center mt-8" data-translate="who_we_are.title">Who We Are</h2>
<div class="row px-2 px-lg-0">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<p class="py-4" data-translate="who_we_are.description">We've worked side by side to revolutionize the client reporting of a leading independent asset manager in Zurich. Building on that expertise, we founded Octigen. Our mission? To transform the way you can use data to engage with your clients.</p>
</div>
<div class="col-lg-3"></div>
</div>
<div class="row px-lg-5">
<div class="col-lg-6 d-flex flex-column align-items-center text-center p-3">
<div class="container-fluid founder-container p-3 p-lg-5 m-0 h-100">
<img class="founder-image my-4" src="assets/images/michel_muller.png" alt="Michel Müller, Co-Founder">
<h3>Michel Müller</h3>
<h5 data-translate="who_we_are.michel_muller.title">Co-Founder</h5>
<p class="px-4" data-translate="who_we_are.michel_muller.description">With over 15 years of experience as a software architect and more than 6 years developing cutting-edge data solutions for the finance industry, Michel brings deep expertise across all computing technology. He holds a PhD in High-performance computing and an MSc from ETH Zurich.</p>
</div>
</div>
<div class="col-lg-6 d-flex flex-column align-items-center text-center p-3">
<div class="container-fluid founder-container p-3 p-lg-5 m-0 h-100">
<img class="founder-image my-4" src="assets/images/kevin_graziani.png" alt="Kevin Graziani, Co-Founder">
<h3>Kevin Graziani</h3>
<h5 data-translate="who_we_are.kevin_graziani.title">Co-Founder</h5>
<p class="px-4" data-translate="who_we_are.kevin_graziani.description">Bringing experience as front-office quant for some of Europe’s largest financial institutions, Kevin is a seasoned software engineer and marketing expert. He graduated <i>cum laude</i> and holds two MSc degrees, in Quantitative and Corporate Finance.</p>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid p-lg-5 py-5 contacts-section" id="contacts">
<div class="container mb-5">
<div class="mt-8 text-center free-banner">
<h5 class="free-banner-text" data-translate="contact_us.offer">First 1 hour free of charge</h5>
</div>
<div class="py-4 text-center">
<h2 data-translate="contact_us.title">Get in touch today</h2>
</div>
<div class="row d-flex align-items-start px-3 px-lg-5 justify-content-between">
<div class="col-lg-5 d-flex flex-column align-items-start py-lg-5 py-3">
<h6 class="highlighted-header" data-translate="contact_us.top_cta">DATA INTEGRATION, AI, REPORTING</h6>
<h4 class="line-height-1and5" data-translate="contact_us.cta">Ready to start your next project with us?</h4>
<p data-translate="contact_us.cta_description">Let's talk and see how we can make a difference — whether it's small tweaks or a total workflow transformation, we've got your back!
</p>
</div>
<form action="https://formspree.io/f/xrbelbzl" id="contact-form" class="form-container col-lg-6 d-flex flex-column align-items-end p-lg-3" method="POST">
<div class="row w-100 gx-2 gy-2 gy-lg-0 px-0 mx-0 my-2">
<div class="col-md-6 px-1">
<input name="name" type="text" class="form-control" placeholder="Your Name" required
data-translate="contact_us.form.name">
</div>
<div class="col-md-6 px-1">
<input name="email" type="email" class="form-control" placeholder="Your Email" required
data-translate="contact_us.form.email">
</div>
</div>
<div class="row w-100 px-0 mx-0">
<div class="col-12 px-1">
<textarea name="message" class="form-control" placeholder="Your Message" style="height: 180px;"
data-translate="contact_us.form.message"></textarea>
</div>
</div>
<div class="row w-100 px-0 mx-0 my-2 d-flex justify-content-between">
<div class="col-auto px-1">
<div class="form-check">
<input name="gdpr-consent" type="checkbox" class="form-check-input" id="gdpr-checkbox" required>
<label class="form-check-label ms-2" for="gdpr-checkbox" data-translate="contact_us.form.privacy_policy">I agree to the <a href="privacy_policy.html" target="_blank">privacy policy</a></label>
<p id="contact-form-status"></p>
</div>
</div>
<div class="col-auto px-1">
<button id="contact-form-button" class="btn btn-primary form-btn" data-translate="contact_us.form.submit">Send</button>
</div>
</div>
</form>
</div>
</div>
<footer class="footer mt-auto text-white text-center pt-5 my-0 px-lg-4 px-3 mx-4 mx-lg-5">
<div class="container footer-container pt-4">
<span class="text-center pt-5 footer-text">© 2025 Octigen GmbH. All rights reserved.</span>
</div>
</footer>
</section>
</main>
</body>
</html>