Skip to content

Commit 76e8b16

Browse files
simonablersimonabler
authored
Merge pull request #21 from simonabler/21-feat-home-hero
feat(home): terminal/industrial hero redesign
2 parents 9296805 + 1ab6a53 commit 76e8b16

2 files changed

Lines changed: 359 additions & 66 deletions

File tree

‎apps/simonapi/src/app/features/home/home.component.html‎

Lines changed: 100 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,123 @@
11
<!-- ══════════════════════════════════════════════
2-
HERO — zwei Spalten
2+
HERO — Terminal / Industrial Cyber Aesthetic
33
══════════════════════════════════════════════════ -->
4-
<header class="hero-bg py-5">
5-
<div class="container py-3 py-lg-4">
6-
<div class="row align-items-center g-4">
7-
8-
<!-- Linke Spalte: Text + CTAs -->
9-
<div class="col-12 col-lg-7">
10-
<span class="badge border fw-semibold px-3 py-2 mb-3 d-inline-block"
11-
style="color:var(--brand);border-color:var(--brand)!important;
12-
background:color-mix(in oklab,var(--brand),transparent 92%);">
13-
hub.abler.tirol
14-
</span>
15-
<h1 class="fw-bold mb-3"
16-
style="font-size:clamp(2rem,5vw,3rem);line-height:1.1;letter-spacing:-.025em">
17-
Secure APIs.<br>
18-
<span style="background:linear-gradient(100deg,var(--brand-2),var(--brand));
19-
-webkit-background-clip:text;background-clip:text;color:transparent;">
20-
Resilient Systems.
21-
</span>
4+
<header class="hero-bg">
5+
6+
<!-- Subtile Grid-Lines (pure CSS) -->
7+
<div class="hero-grid" aria-hidden="true"></div>
8+
9+
<div class="container hero-inner py-5">
10+
<div class="row align-items-center g-5">
11+
12+
<!-- ── Left: Text + CTAs ── -->
13+
<div class="col-12 col-lg-6">
14+
15+
<!-- Status badge -->
16+
<div class="hero-status mb-4">
17+
<span class="status-dot" aria-hidden="true"></span>
18+
<span class="status-text">hub.abler.tirol &mdash; all systems operational</span>
19+
</div>
20+
21+
<!-- Headline -->
22+
<h1 class="hero-title mb-3">
23+
<span class="hero-title-line">Secure APIs.</span><br>
24+
<span class="hero-title-accent">Resilient Systems.</span>
2225
</h1>
23-
<p class="text-body-secondary mb-4"
24-
style="font-size:1.05rem;max-width:500px;line-height:1.65">
25-
GS1 barcodes, QR codes, watermarking and dev utilities —
26-
built by a Cyber Security Engineer from Tyrol.
26+
27+
<!-- Sub -->
28+
<p class="hero-sub mb-5">
29+
GS1 barcodes &middot; QR codes &middot; watermarking &middot; crypto &middot; signing &mdash;
30+
engineered by a Cyber Security Engineer from Tyrol.
2731
</p>
32+
33+
<!-- CTAs -->
2834
<div class="d-flex gap-2 flex-wrap">
2935
<a href="/api" target="_blank" rel="noopener"
30-
class="btn btn-primary d-inline-flex align-items-center gap-2 px-4">
31-
<lucide-icon [img]="BookOpenIcon" [size]="17"></lucide-icon>
36+
class="hero-btn-primary d-inline-flex align-items-center gap-2">
37+
<lucide-icon [img]="BookOpenIcon" [size]="16"></lucide-icon>
3238
API Docs
3339
</a>
3440
<a href="/api#/" target="_blank" rel="noopener"
35-
class="btn btn-outline-primary d-inline-flex align-items-center gap-2 px-4">
36-
<lucide-icon [img]="SendIcon" [size]="17"></lucide-icon>
41+
class="hero-btn-secondary d-inline-flex align-items-center gap-2">
42+
<lucide-icon [img]="SendIcon" [size]="16"></lucide-icon>
3743
Try in Swagger
3844
</a>
39-
<a href="#catalog"
40-
class="btn btn-outline-secondary d-inline-flex align-items-center gap-2 px-4">
41-
<lucide-icon [img]="SendIcon" [size]="17"></lucide-icon>
42-
Explore APIs
43-
</a>
44-
<a href="mailto:simon@abler.tirol"
45-
class="btn btn-outline-secondary d-inline-flex align-items-center gap-2 px-4">
46-
<lucide-icon [img]="MailIcon" [size]="17"></lucide-icon>
47-
Contact
45+
<a href="#catalog" class="hero-btn-ghost">
46+
Explore APIs ↓
4847
</a>
4948
</div>
49+
5050
</div>
5151

52-
<!-- Rechte Spalte: 3 Feature-Items -->
53-
<div class="col-12 col-lg-5">
54-
<div class="d-flex flex-column gap-2">
55-
<div class="d-flex align-items-center gap-3 p-3 rounded-3 border bg-white"
56-
style="box-shadow:var(--shadow-sm)">
57-
<span style="font-size:1.4rem;flex-shrink:0">🏭</span>
58-
<div>
59-
<div class="fw-semibold small">Industrial GS1</div>
60-
<div class="text-body-secondary" style="font-size:.8rem">
61-
GS1-128, DataMatrix, batch up to 100 barcodes/request
62-
</div>
63-
</div>
52+
<!-- ── Right: Terminal Widget ── -->
53+
<div class="col-12 col-lg-6">
54+
<div class="terminal-widget">
55+
56+
<!-- Title bar -->
57+
<div class="terminal-bar">
58+
<span class="t-dot t-red" aria-hidden="true"></span>
59+
<span class="t-dot t-yellow" aria-hidden="true"></span>
60+
<span class="t-dot t-green" aria-hidden="true"></span>
61+
<span class="terminal-title">hub.abler.tirol &mdash; api</span>
6462
</div>
65-
<div class="d-flex align-items-center gap-3 p-3 rounded-3 border bg-white"
66-
style="box-shadow:var(--shadow-sm)">
67-
<span style="font-size:1.4rem;flex-shrink:0">🔐</span>
68-
<div>
69-
<div class="fw-semibold small">Security-first</div>
70-
<div class="text-body-secondary" style="font-size:.8rem">
71-
Rate limiting, anomaly detection, blocklist
72-
</div>
63+
64+
<!-- Body -->
65+
<div class="terminal-body" aria-label="Example API requests">
66+
<div class="t-line">
67+
<span class="t-prompt">$</span>
68+
<span class="t-cmd"> curl -X POST https://hub.abler.tirol/api/qr \</span>
69+
</div>
70+
<div class="t-line">
71+
<span class="t-flag"> -H</span><span class="t-string"> "Content-Type: application/json" \</span>
72+
</div>
73+
<div class="t-line">
74+
<span class="t-flag"> -d</span><span class="t-string"> '&#123;"type":"url","payload":&#123;"url":"https://example.com"&#125;&#125;'</span>
75+
</div>
76+
<div class="t-blank"></div>
77+
<div class="t-line">
78+
<span class="t-comment"># 200 OK &middot; image/png &middot; 3.2 KB &middot; 41ms</span>
79+
</div>
80+
<div class="t-blank"></div>
81+
<div class="t-line">
82+
<span class="t-prompt">$</span>
83+
<span class="t-cmd"> curl https://hub.abler.tirol/api/barcode/png?type=ean13&text=12222222222222&includetext=true&scale=3 \</span>
84+
</div>
85+
<div class="t-line">
86+
<span class="t-flag"> -H</span><span class="t-string"> "x-api-key: sk_pro_&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"</span>
87+
</div>
88+
<div class="t-blank"></div>
89+
<div class="t-line">
90+
<span class="t-comment"># 200 OK &middot; image/svg+xml &middot; 4.8 KB &middot; 28ms</span>
91+
</div>
92+
<div class="t-blank"></div>
93+
<div class="t-line">
94+
<span class="t-prompt">$</span><span class="t-cursor" aria-hidden="true"></span>
7395
</div>
7496
</div>
75-
<div class="d-flex align-items-center gap-3 p-3 rounded-3 border bg-white"
76-
style="box-shadow:var(--shadow-sm)">
77-
<span style="font-size:1.4rem;flex-shrink:0">⚡</span>
78-
<div>
79-
<div class="fw-semibold small">Open &amp; free</div>
80-
<div class="text-body-secondary" style="font-size:.8rem">
81-
Standard APIs free to use · GS1 with API key
82-
</div>
97+
98+
<!-- Stats strip -->
99+
<div class="terminal-stats">
100+
<div class="t-stat">
101+
<span class="t-stat-val">7</span>
102+
<span class="t-stat-label">APIs</span>
103+
</div>
104+
<div class="t-stat-sep" aria-hidden="true"></div>
105+
<div class="t-stat">
106+
<span class="t-stat-val">&lt;50ms</span>
107+
<span class="t-stat-label">avg latency</span>
108+
</div>
109+
<div class="t-stat-sep" aria-hidden="true"></div>
110+
<div class="t-stat">
111+
<span class="t-stat-val">free</span>
112+
<span class="t-stat-label">to start</span>
113+
</div>
114+
<div class="t-stat-sep" aria-hidden="true"></div>
115+
<div class="t-stat">
116+
<span class="t-stat-val">GS1</span>
117+
<span class="t-stat-label">certified</span>
83118
</div>
84119
</div>
120+
85121
</div>
86122
</div>
87123

0 commit comments

Comments
 (0)