Hugging Face's logo

Spaces:
gleraTech
/
README
No application file

App Files Community
niki1qqq commited on
Commit
8b01c2b
·
verified ·
1 Parent(s): 4210ecd

Upload html card

Browse files
Files changed (1) hide show
  1. index.html +475 -0
index.html ADDED
@@ -0,0 +1,475 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>gleraTech Solutions — HuggingFace</title>
7
+ <link href="https://fonts.bunny.net/css?family=PT+Serif:400,400i,700,700i|Syne:400,500,600,700,800|DM+Sans:300,300i,400,500&display=swap" rel="stylesheet" />
8
+ <style>
9
+ :root {
10
+ --red: #ff3131;
11
+ --black: #0a0a0a;
12
+ --white: #ffffff;
13
+ --off-white: #f8f7f5;
14
+ --light-gray: #efefed;
15
+ --mid-gray: #c8c8c4;
16
+ --dark-gray: #444440;
17
+ --font-headline: 'PT Serif', serif;
18
+ --font-display: 'Syne', sans-serif;
19
+ --font-body: 'DM Sans', sans-serif;
20
+ }
21
+
22
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
23
+
24
+ body {
25
+ font-family: var(--font-body);
26
+ background: var(--white);
27
+ color: var(--black);
28
+ font-size: 16px;
29
+ line-height: 1.6;
30
+ -webkit-font-smoothing: antialiased;
31
+ }
32
+
33
+ a { color: var(--red); text-decoration: none; }
34
+ a:visited { color: var(--red); }
35
+
36
+ .card {
37
+ max-width: 860px;
38
+ margin: 0 auto;
39
+ border-left: 1px solid var(--light-gray);
40
+ border-right: 1px solid var(--light-gray);
41
+ }
42
+
43
+ .top-bar { height: 3px; background: var(--red); }
44
+
45
+ /* ── header ── */
46
+ .header {
47
+ padding: 48px 48px 40px;
48
+ border-bottom: 1px solid var(--light-gray);
49
+ display: grid;
50
+ grid-template-columns: auto 1fr;
51
+ gap: 32px;
52
+ align-items: center;
53
+ }
54
+
55
+ .header-logo {
56
+ display: flex;
57
+ align-items: center;
58
+ justify-content: center;
59
+ flex-shrink: 0;
60
+ }
61
+
62
+ .header-logo img { width: 150px; height: auto; }
63
+
64
+ .eyebrow {
65
+ font-family: var(--font-display);
66
+ font-size: 11px;
67
+ font-weight: 700;
68
+ letter-spacing: 0.2em;
69
+ text-transform: uppercase;
70
+ color: var(--red);
71
+ margin-bottom: 10px;
72
+ display: flex;
73
+ align-items: center;
74
+ gap: 10px;
75
+ }
76
+
77
+ .eyebrow::before {
78
+ content: '';
79
+ display: inline-block;
80
+ width: 20px;
81
+ height: 2px;
82
+ background: var(--red);
83
+ flex-shrink: 0;
84
+ }
85
+
86
+ .org-name {
87
+ font-family: var(--font-headline);
88
+ font-size: 42px;
89
+ font-weight: 700;
90
+ letter-spacing: -0.02em;
91
+ line-height: 1.05;
92
+ margin-bottom: 14px;
93
+ }
94
+
95
+ .org-name em { font-style: normal; color: var(--red); }
96
+
97
+ .org-desc {
98
+ font-size: 16px;
99
+ font-weight: 300;
100
+ color: var(--dark-gray);
101
+ line-height: 1.75;
102
+ max-width: 520px;
103
+ }
104
+
105
+ /* ── stats ── */
106
+ .stats {
107
+ display: grid;
108
+ grid-template-columns: repeat(4, 1fr);
109
+ border-bottom: 1px solid var(--light-gray);
110
+ }
111
+
112
+ .stat {
113
+ padding: 28px 32px;
114
+ border-right: 1px solid var(--light-gray);
115
+ }
116
+
117
+ .stat:last-child { border-right: none; }
118
+
119
+ .stat-value {
120
+ font-family: var(--font-display);
121
+ font-size: 36px;
122
+ font-weight: 800;
123
+ letter-spacing: -0.03em;
124
+ color: var(--red);
125
+ line-height: 1;
126
+ }
127
+
128
+ .stat-label {
129
+ font-size: 12px;
130
+ color: var(--dark-gray);
131
+ margin-top: 6px;
132
+ }
133
+
134
+ /* ── tags ── */
135
+ .tag-row {
136
+ padding: 20px 48px;
137
+ display: flex;
138
+ flex-wrap: wrap;
139
+ gap: 8px;
140
+ border-bottom: 1px solid var(--light-gray);
141
+ }
142
+
143
+ .tag {
144
+ font-family: var(--font-display);
145
+ font-size: 10px;
146
+ font-weight: 700;
147
+ letter-spacing: 0.1em;
148
+ text-transform: uppercase;
149
+ padding: 5px 12px;
150
+ border: 1.5px solid var(--light-gray);
151
+ color: var(--dark-gray);
152
+ }
153
+
154
+ .tag-red { border-color: var(--red); color: var(--red); }
155
+
156
+ /* ── focus areas ── */
157
+ .areas-header { padding: 40px 48px 0; }
158
+
159
+ .section-label {
160
+ font-family: var(--font-display);
161
+ font-size: 11px;
162
+ font-weight: 700;
163
+ letter-spacing: 0.2em;
164
+ text-transform: uppercase;
165
+ color: var(--red);
166
+ margin-bottom: 16px;
167
+ display: flex;
168
+ align-items: center;
169
+ gap: 10px;
170
+ }
171
+
172
+ .section-label::before {
173
+ content: '';
174
+ width: 20px;
175
+ height: 2px;
176
+ background: var(--red);
177
+ flex-shrink: 0;
178
+ }
179
+
180
+ .areas-title {
181
+ font-family: var(--font-display);
182
+ font-size: 28px;
183
+ font-weight: 600;
184
+ letter-spacing: -0.02em;
185
+ line-height: 1.2;
186
+ }
187
+
188
+ .focus-grid {
189
+ display: grid;
190
+ grid-template-columns: repeat(3, 1fr);
191
+ gap: 2px;
192
+ margin-top: 24px;
193
+ background: var(--light-gray);
194
+ }
195
+
196
+ .focus-card {
197
+ background: var(--white);
198
+ padding: 36px 32px;
199
+ transition: background 0.3s;
200
+ }
201
+
202
+ .focus-card:hover { background: var(--off-white); }
203
+
204
+ .focus-num {
205
+ font-family: var(--font-display);
206
+ font-size: 11px;
207
+ font-weight: 700;
208
+ color: var(--red);
209
+ letter-spacing: 0.1em;
210
+ margin-bottom: 14px;
211
+ }
212
+
213
+ .focus-card h3 {
214
+ font-family: var(--font-headline);
215
+ font-size: 20px;
216
+ font-weight: 700;
217
+ margin-bottom: 10px;
218
+ }
219
+
220
+ .focus-card p {
221
+ font-size: 14px;
222
+ color: var(--dark-gray);
223
+ line-height: 1.7;
224
+ }
225
+
226
+ /* ── philosophy ── */
227
+ .philosophy {
228
+ background: var(--off-white);
229
+ padding: 48px;
230
+ border-top: 1px solid var(--light-gray);
231
+ border-bottom: 1px solid var(--light-gray);
232
+ }
233
+
234
+ .philosophy blockquote {
235
+ font-family: var(--font-headline);
236
+ font-size: 24px;
237
+ font-weight: 400;
238
+ font-style: italic;
239
+ color: var(--black);
240
+ line-height: 1.55;
241
+ max-width: 640px;
242
+ border-left: 3px solid var(--red);
243
+ padding-left: 24px;
244
+ margin-top: 16px;
245
+ }
246
+
247
+ .philosophy blockquote strong {
248
+ font-style: normal;
249
+ color: var(--red);
250
+ }
251
+
252
+ /* ── link micro-cards ── */
253
+ .links-section {
254
+ padding: 36px 48px 40px;
255
+ border-bottom: 1px solid var(--light-gray);
256
+ }
257
+
258
+ .links-section .section-label { margin-bottom: 20px; }
259
+
260
+ .links-grid {
261
+ display: grid;
262
+ grid-template-columns: repeat(5, 1fr);
263
+ gap: 2px;
264
+ background: var(--light-gray);
265
+ }
266
+
267
+ .link-card {
268
+ background: var(--white);
269
+ padding: 16px 14px;
270
+ display: flex;
271
+ flex-direction: column;
272
+ gap: 6px;
273
+ text-decoration: none;
274
+ color: var(--black);
275
+ transition: background 0.2s;
276
+ }
277
+
278
+ .link-card:hover { background: var(--off-white); }
279
+ .link-card:visited { color: var(--black); }
280
+
281
+ .link-card-num {
282
+ font-family: var(--font-display);
283
+ font-size: 10px;
284
+ font-weight: 700;
285
+ color: var(--red);
286
+ letter-spacing: 0.12em;
287
+ }
288
+
289
+ .link-card-name {
290
+ font-family: var(--font-display);
291
+ font-size: 12px;
292
+ font-weight: 700;
293
+ color: var(--black);
294
+ line-height: 1.2;
295
+ }
296
+
297
+ .link-card-sub {
298
+ font-family: var(--font-body);
299
+ font-size: 10px;
300
+ font-weight: 300;
301
+ color: var(--mid-gray);
302
+ line-height: 1.3;
303
+ }
304
+
305
+ .link-card-arrow {
306
+ font-size: 12px;
307
+ color: var(--light-gray);
308
+ margin-top: auto;
309
+ padding-top: 8px;
310
+ transition: color 0.2s;
311
+ }
312
+
313
+ .link-card:hover .link-card-arrow { color: var(--red); }
314
+
315
+ /* ── footer ── */
316
+ .footer {
317
+ background: var(--black);
318
+ padding: 28px 48px;
319
+ display: flex;
320
+ align-items: center;
321
+ justify-content: space-between;
322
+ position: relative;
323
+ }
324
+
325
+ .footer::before {
326
+ content: '';
327
+ position: absolute;
328
+ top: 0; left: 0; right: 0;
329
+ height: 3px;
330
+ background: var(--red);
331
+ }
332
+
333
+ .footer img {
334
+ height: 20px;
335
+
336
+ opacity: 0.75;
337
+ }
338
+
339
+ .footer-copy {
340
+ font-family: var(--font-display);
341
+ font-size: 11px;
342
+ font-weight: 600;
343
+ letter-spacing: 0.08em;
344
+ text-transform: uppercase;
345
+ color: rgba(255,255,255,0.28);
346
+ }
347
+ </style>
348
+ </head>
349
+ <body>
350
+ <div class="card">
351
+
352
+ <div class="top-bar"></div>
353
+
354
+ <div class="header">
355
+ <div class="header-logo">
356
+ <img src="https://public-images-1a-at.glera-tech.com/public-images/glera-logo-wide-b.png" alt="gleraTech" />
357
+ </div>
358
+ <div class="header-meta">
359
+ <div class="eyebrow">Austrian Tech Startup · Salzburg, AT</div>
360
+ <h1 class="org-name">gleraTech<br /><em>Solutions.</em></h1>
361
+ <p class="org-desc">We build AI that actually works for people — transparent, privacy-centred, and human by design.</p>
362
+ </div>
363
+ </div>
364
+
365
+ <div class="stats">
366
+ <div class="stat">
367
+ <div class="stat-value">AT</div>
368
+ <div class="stat-label">Founded in Austria</div>
369
+ </div>
370
+ <div class="stat">
371
+ <div class="stat-value">4</div>
372
+ <div class="stat-label">Products in Development</div>
373
+ </div>
374
+ <div class="stat">
375
+ <div class="stat-value">2027</div>
376
+ <div class="stat-label">First Releases Planned</div>
377
+ </div>
378
+ <div class="stat">
379
+ <div class="stat-value">100%</div>
380
+ <div class="stat-label">European Infrastructure</div>
381
+ </div>
382
+ </div>
383
+
384
+ <div class="tag-row">
385
+ <span class="tag tag-red">privacy-first</span>
386
+ <span class="tag tag-red">medical-ai</span>
387
+ <span class="tag">gdpr-compliant</span>
388
+ <span class="tag">austrian</span>
389
+ <span class="tag">european-cloud</span>
390
+ <span class="tag">local-ai</span>
391
+ <span class="tag">open-source</span>
392
+ </div>
393
+
394
+ <div class="areas-header">
395
+ <div class="section-label">What We Do</div>
396
+ <div class="areas-title">Three core areas. One goal.</div>
397
+ </div>
398
+
399
+ <div class="focus-grid">
400
+ <div class="focus-card">
401
+ <div class="focus-num">01</div>
402
+ <h3>Medical AI</h3>
403
+ <p>AI support for hospitals and medical practices — diagnostics, documentation, workflows. All data stays within your facility.</p>
404
+ </div>
405
+ <div class="focus-card">
406
+ <div class="focus-num">02</div>
407
+ <h3>AI Agents</h3>
408
+ <p>Intelligent assistants for individuals and businesses with no third-party data access — locally hosted or via European cloud.</p>
409
+ </div>
410
+ <div class="focus-card">
411
+ <div class="focus-num">03</div>
412
+ <h3>Infrastructure</h3>
413
+ <p>From local OS to European cloud — building the foundation for sovereign, privacy-compliant computing. European. Reliable.</p>
414
+ </div>
415
+ </div>
416
+
417
+ <div class="philosophy">
418
+ <div class="section-label">Our Philosophy</div>
419
+ <blockquote>
420
+ Privacy is not a feature —
421
+ <strong>it is the foundation.</strong>
422
+ AI should serve people, not exploit them.
423
+ </blockquote>
424
+ </div>
425
+
426
+ <div class="links-section">
427
+ <div class="section-label">Links</div>
428
+ <div class="links-grid">
429
+
430
+ <a class="link-card" href="https://glera-tech.com" target="_blank">
431
+ <span class="link-card-num">01</span>
432
+ <span class="link-card-name">Website</span>
433
+ <span class="link-card-sub">glera-tech.com</span>
434
+ <span class="link-card-arrow">→</span>
435
+ </a>
436
+
437
+ <a class="link-card" href="https://blog.glera-tech.com" target="_blank">
438
+ <span class="link-card-num">02</span>
439
+ <span class="link-card-name">Blog</span>
440
+ <span class="link-card-sub">blog.glera-tech.com</span>
441
+ <span class="link-card-arrow">→</span>
442
+ </a>
443
+
444
+ <a class="link-card" href="https://x.com/gleraTech" target="_blank">
445
+ <span class="link-card-num">03</span>
446
+ <span class="link-card-name">X / Twitter</span>
447
+ <span class="link-card-sub">@gleraTech</span>
448
+ <span class="link-card-arrow">→</span>
449
+ </a>
450
+
451
+ <a class="link-card" href="https://www.instagram.com/gleratech/" target="_blank">
452
+ <span class="link-card-num">04</span>
453
+ <span class="link-card-name">Instagram</span>
454
+ <span class="link-card-sub">@gleratech</span>
455
+ <span class="link-card-arrow">→</span>
456
+ </a>
457
+
458
+ <a class="link-card" href="mailto:invest@glera-tech.com">
459
+ <span class="link-card-num">05</span>
460
+ <span class="link-card-name">Become a Partner</span>
461
+ <span class="link-card-sub">invest@glera-tech.com</span>
462
+ <span class="link-card-arrow">→</span>
463
+ </a>
464
+
465
+ </div>
466
+ </div>
467
+
468
+ <div class="footer">
469
+ <img src="https://public-images-1a-at.glera-tech.com/public-images/gleraTech-icon-w.png" alt="gleraTech" />
470
+ <span class="footer-copy">© 2026 gleraTech solutions Austria GmbH</span>
471
+ </div>
472
+
473
+ </div>
474
+ </body>
475
+ </html>