@things-factory/operato-board 10.0.0-beta.27 → 10.0.0-beta.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import '@material/web/icon/icon.js';
|
|
2
|
+
import '@material/web/button/text-button.js';
|
|
3
|
+
import '@material/web/button/elevated-button.js';
|
|
4
|
+
import { LitElement } from 'lit';
|
|
5
|
+
declare const HomePage_base: (new (...args: any[]) => LitElement) & typeof LitElement;
|
|
6
|
+
export declare class HomePage extends HomePage_base {
|
|
7
|
+
static styles: import("lit").CSSResult[];
|
|
8
|
+
private _applicationMeta?;
|
|
9
|
+
connectedCallback(): void;
|
|
10
|
+
private _loadCopy;
|
|
11
|
+
private _t;
|
|
12
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
13
|
+
firstInput: HTMLInputElement;
|
|
14
|
+
private _toggleLang;
|
|
15
|
+
private _scrollTo;
|
|
16
|
+
get applicationMeta(): {
|
|
17
|
+
icon?: string;
|
|
18
|
+
title?: string;
|
|
19
|
+
description?: string;
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,651 @@
|
|
|
1
|
+
import { __decorate, __metadata } from "tslib";
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
|
+
import '@material/web/button/text-button.js';
|
|
4
|
+
import '@material/web/button/elevated-button.js';
|
|
5
|
+
import { css, html, LitElement } from 'lit';
|
|
6
|
+
import { customElement, query } from 'lit/decorators.js';
|
|
7
|
+
import { i18next, localize } from '@operato/i18n';
|
|
8
|
+
let HomePage = class HomePage extends localize(i18next)(LitElement) {
|
|
9
|
+
static { this.styles = [
|
|
10
|
+
css `
|
|
11
|
+
:host {
|
|
12
|
+
display: block;
|
|
13
|
+
position: absolute;
|
|
14
|
+
top: 0; left: 0; right: 0; bottom: 0;
|
|
15
|
+
overflow-y: auto;
|
|
16
|
+
overflow-x: hidden;
|
|
17
|
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
18
|
+
background: #000;
|
|
19
|
+
color: #fff;
|
|
20
|
+
-webkit-font-smoothing: antialiased;
|
|
21
|
+
scroll-behavior: smooth;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:host {
|
|
25
|
+
scrollbar-width: none;
|
|
26
|
+
}
|
|
27
|
+
:host::-webkit-scrollbar {
|
|
28
|
+
display: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* ── Nav ── */
|
|
32
|
+
nav {
|
|
33
|
+
position: fixed;
|
|
34
|
+
top: 0; left: 0; right: 0;
|
|
35
|
+
padding: 1.5rem 4rem;
|
|
36
|
+
display: flex;
|
|
37
|
+
justify-content: space-between;
|
|
38
|
+
align-items: center;
|
|
39
|
+
z-index: 100;
|
|
40
|
+
background: rgba(0,0,0,0.6);
|
|
41
|
+
backdrop-filter: blur(12px);
|
|
42
|
+
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
43
|
+
}
|
|
44
|
+
.brand {
|
|
45
|
+
font-size: 1.3rem;
|
|
46
|
+
font-weight: 900;
|
|
47
|
+
letter-spacing: -0.02em;
|
|
48
|
+
text-transform: uppercase;
|
|
49
|
+
}
|
|
50
|
+
.brand img { height: 28px; margin-right: 10px; vertical-align: middle; }
|
|
51
|
+
.nav-links { display: flex; gap: 1rem; align-items: center; }
|
|
52
|
+
.nav-link {
|
|
53
|
+
color: #aaa;
|
|
54
|
+
text-decoration: none;
|
|
55
|
+
font-size: 0.9rem;
|
|
56
|
+
font-weight: 500;
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
transition: color 0.2s;
|
|
59
|
+
}
|
|
60
|
+
.nav-link:hover { color: #fff; }
|
|
61
|
+
.lang-toggle {
|
|
62
|
+
border: 1px solid #444;
|
|
63
|
+
border-radius: 4px;
|
|
64
|
+
padding: 0.3rem 0.6rem;
|
|
65
|
+
font-size: 0.75rem;
|
|
66
|
+
font-weight: 700;
|
|
67
|
+
letter-spacing: 0.05em;
|
|
68
|
+
}
|
|
69
|
+
.signin-btn {
|
|
70
|
+
background: #fff;
|
|
71
|
+
color: #000;
|
|
72
|
+
border: none;
|
|
73
|
+
border-radius: 100px;
|
|
74
|
+
padding: 0.5rem 1.5rem;
|
|
75
|
+
font-weight: 700;
|
|
76
|
+
font-size: 0.85rem;
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
transition: opacity 0.2s;
|
|
79
|
+
}
|
|
80
|
+
.signin-btn:hover { opacity: 0.85; }
|
|
81
|
+
|
|
82
|
+
/* ── Hero ── */
|
|
83
|
+
.hero {
|
|
84
|
+
position: relative;
|
|
85
|
+
min-height: 100vh;
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-direction: column;
|
|
88
|
+
justify-content: center;
|
|
89
|
+
align-items: center;
|
|
90
|
+
text-align: center;
|
|
91
|
+
padding: 0 2rem;
|
|
92
|
+
background: radial-gradient(ellipse at 50% 30%, rgba(63,81,181,0.12) 0%, transparent 60%);
|
|
93
|
+
}
|
|
94
|
+
.headline {
|
|
95
|
+
font-size: clamp(2.5rem, 6vw, 6rem);
|
|
96
|
+
font-weight: 900;
|
|
97
|
+
line-height: 0.95;
|
|
98
|
+
letter-spacing: -0.04em;
|
|
99
|
+
text-transform: uppercase;
|
|
100
|
+
margin: 0;
|
|
101
|
+
}
|
|
102
|
+
.headline .accent { color: #3d5afe; }
|
|
103
|
+
.headline .dim { color: #333; }
|
|
104
|
+
.hero-sub {
|
|
105
|
+
margin-top: 2.5rem;
|
|
106
|
+
font-size: clamp(1.1rem, 2vw, 1.6rem);
|
|
107
|
+
color: #888;
|
|
108
|
+
max-width: 900px;
|
|
109
|
+
line-height: 1.6;
|
|
110
|
+
word-break: keep-all;
|
|
111
|
+
white-space: nowrap;
|
|
112
|
+
}
|
|
113
|
+
.hero-sub strong { color: #ccc; font-weight: 600; }
|
|
114
|
+
.cta-area { margin-top: 3.5rem; display: flex; gap: 1.2rem; }
|
|
115
|
+
.cta-primary {
|
|
116
|
+
background: #fff; color: #000; border: none; border-radius: 100px;
|
|
117
|
+
padding: 1rem 2.5rem; font-size: 1rem; font-weight: 800;
|
|
118
|
+
cursor: pointer; display: flex; align-items: center; gap: 8px;
|
|
119
|
+
transition: transform 0.2s, box-shadow 0.2s;
|
|
120
|
+
}
|
|
121
|
+
.cta-primary:hover { transform: scale(1.04); box-shadow: 0 0 40px rgba(255,255,255,0.15); }
|
|
122
|
+
.cta-secondary {
|
|
123
|
+
background: transparent; color: #aaa; border: 1px solid #333;
|
|
124
|
+
border-radius: 100px; padding: 1rem 2.5rem; font-size: 1rem;
|
|
125
|
+
font-weight: 600; cursor: pointer; transition: border-color 0.2s, color 0.2s;
|
|
126
|
+
}
|
|
127
|
+
.cta-secondary:hover { border-color: #888; color: #fff; }
|
|
128
|
+
.scroll-hint {
|
|
129
|
+
position: absolute; bottom: 2rem;
|
|
130
|
+
animation: float 3s ease-in-out infinite;
|
|
131
|
+
color: rgba(255,255,255,0.2); font-size: 1.5rem; cursor: pointer;
|
|
132
|
+
}
|
|
133
|
+
@keyframes float {
|
|
134
|
+
0%, 100% { transform: translateY(0); opacity: 0.3; }
|
|
135
|
+
50% { transform: translateY(10px); opacity: 0.6; }
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* ── Partners ── */
|
|
139
|
+
.partners {
|
|
140
|
+
padding: 5rem 0;
|
|
141
|
+
background: #050505;
|
|
142
|
+
border-top: 1px solid #111; border-bottom: 1px solid #111;
|
|
143
|
+
}
|
|
144
|
+
.partners-title {
|
|
145
|
+
text-align: center; font-size: 0.75rem; text-transform: uppercase;
|
|
146
|
+
letter-spacing: 0.25em; color: #444; margin-bottom: 1.5rem;
|
|
147
|
+
}
|
|
148
|
+
.marquee-container { overflow: hidden; white-space: nowrap; position: relative; }
|
|
149
|
+
.marquee-container::before, .marquee-container::after {
|
|
150
|
+
content: ''; position: absolute; top: 0; width: 12rem; height: 100%; z-index: 2;
|
|
151
|
+
}
|
|
152
|
+
.marquee-container::before { left: 0; background: linear-gradient(to right, #050505, transparent); }
|
|
153
|
+
.marquee-container::after { right: 0; background: linear-gradient(to left, #050505, transparent); }
|
|
154
|
+
.marquee-content { display: inline-block; animation: marquee 40s linear infinite; }
|
|
155
|
+
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
|
|
156
|
+
.marquee-content img {
|
|
157
|
+
height: 50px; margin: 0 3.5rem;
|
|
158
|
+
filter: grayscale(100%) brightness(250%); opacity: 0.6;
|
|
159
|
+
transition: opacity 0.3s, filter 0.3s, transform 0.3s;
|
|
160
|
+
}
|
|
161
|
+
.marquee-content img:hover {
|
|
162
|
+
opacity: 1;
|
|
163
|
+
filter: grayscale(0%) brightness(100%);
|
|
164
|
+
transform: scale(1.1);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* ── Workflow (3 Steps) ── */
|
|
168
|
+
.workflow {
|
|
169
|
+
padding: 10rem 4rem;
|
|
170
|
+
background: #000;
|
|
171
|
+
}
|
|
172
|
+
.workflow .section-header {
|
|
173
|
+
font-size: clamp(2rem, 4vw, 3.5rem);
|
|
174
|
+
font-weight: 800; letter-spacing: -0.03em; line-height: 1.2;
|
|
175
|
+
max-width: 1200px; margin: 0 auto 1.5rem;
|
|
176
|
+
}
|
|
177
|
+
.workflow .section-header .dim { color: #333; }
|
|
178
|
+
.workflow .section-desc {
|
|
179
|
+
max-width: 1200px; margin: 0 auto 5rem;
|
|
180
|
+
color: #666; font-size: 1.2rem; line-height: 1.6; word-break: keep-all;
|
|
181
|
+
}
|
|
182
|
+
.steps {
|
|
183
|
+
display: grid; grid-template-columns: repeat(3, 1fr);
|
|
184
|
+
gap: 0; max-width: 1200px; margin: 0 auto;
|
|
185
|
+
border: 1px solid #1a1a1a;
|
|
186
|
+
}
|
|
187
|
+
.step {
|
|
188
|
+
padding: 3rem; border-right: 1px solid #1a1a1a;
|
|
189
|
+
transition: background 0.3s;
|
|
190
|
+
}
|
|
191
|
+
.step:last-child { border-right: none; }
|
|
192
|
+
.step:hover { background: #060606; }
|
|
193
|
+
.step-number {
|
|
194
|
+
font-size: 5rem; font-weight: 900; color: #1a1a1a;
|
|
195
|
+
line-height: 1; margin-bottom: 1.5rem;
|
|
196
|
+
}
|
|
197
|
+
.step h3 { font-size: 1.4rem; margin-bottom: 1rem; color: #eee; letter-spacing: -0.02em; }
|
|
198
|
+
.step p { color: #777; line-height: 1.7; font-size: 1rem; word-break: keep-all; }
|
|
199
|
+
|
|
200
|
+
/* ── Cinematic ── */
|
|
201
|
+
.cinematic {
|
|
202
|
+
height: 70vh;
|
|
203
|
+
background: linear-gradient(135deg, #0a0a2e 0%, #000 40%, #0a0a0a 100%);
|
|
204
|
+
position: relative;
|
|
205
|
+
display: flex; align-items: center; justify-content: center;
|
|
206
|
+
overflow: hidden;
|
|
207
|
+
}
|
|
208
|
+
.cinematic::before {
|
|
209
|
+
content: ''; position: absolute; inset: 0;
|
|
210
|
+
background: radial-gradient(circle at 30% 50%, rgba(61,90,254,0.08) 0%, transparent 50%),
|
|
211
|
+
radial-gradient(circle at 70% 60%, rgba(140,158,255,0.05) 0%, transparent 40%);
|
|
212
|
+
}
|
|
213
|
+
.cinematic::after {
|
|
214
|
+
content: ''; position: absolute; inset: 0;
|
|
215
|
+
background: linear-gradient(0deg, #000 0%, transparent 15%, transparent 85%, #000 100%);
|
|
216
|
+
}
|
|
217
|
+
.cinematic-text {
|
|
218
|
+
position: relative; z-index: 10; text-align: center;
|
|
219
|
+
}
|
|
220
|
+
.cinematic-text h2 {
|
|
221
|
+
font-size: clamp(2rem, 4vw, 4rem); font-weight: 800;
|
|
222
|
+
letter-spacing: -0.03em; margin-bottom: 1rem;
|
|
223
|
+
}
|
|
224
|
+
.cinematic-text p { color: #888; font-size: 1.2rem; }
|
|
225
|
+
|
|
226
|
+
/* ── Patents Grid ── */
|
|
227
|
+
.patents {
|
|
228
|
+
padding: 10rem 4rem;
|
|
229
|
+
background: #000;
|
|
230
|
+
}
|
|
231
|
+
.patents .section-header {
|
|
232
|
+
font-size: clamp(2rem, 4vw, 3.5rem);
|
|
233
|
+
font-weight: 800; letter-spacing: -0.03em; line-height: 1.2;
|
|
234
|
+
max-width: 1400px; margin: 0 auto 1.5rem;
|
|
235
|
+
}
|
|
236
|
+
.patents .section-header .dim { color: #333; }
|
|
237
|
+
.patents .section-desc {
|
|
238
|
+
max-width: 1400px; margin: 0 auto 5rem;
|
|
239
|
+
color: #666; font-size: 1.2rem; line-height: 1.6; word-break: keep-all;
|
|
240
|
+
}
|
|
241
|
+
.patent-grid {
|
|
242
|
+
display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
|
|
243
|
+
gap: 1px; background: #1a1a1a;
|
|
244
|
+
max-width: 1400px; margin: 0 auto; border: 1px solid #1a1a1a;
|
|
245
|
+
}
|
|
246
|
+
.patent-card {
|
|
247
|
+
background: #000; padding: 3.5rem;
|
|
248
|
+
display: flex; flex-direction: column;
|
|
249
|
+
transition: background 0.3s;
|
|
250
|
+
}
|
|
251
|
+
.patent-card:hover { background: #050505; }
|
|
252
|
+
.patent-badge {
|
|
253
|
+
font-size: 0.75rem; font-weight: 800; color: #ff3b3b;
|
|
254
|
+
background: rgba(255,59,59,0.08); border: 1px solid rgba(255,59,59,0.15);
|
|
255
|
+
padding: 0.35rem 0.7rem; align-self: flex-start;
|
|
256
|
+
margin-bottom: 1.5rem; text-transform: uppercase;
|
|
257
|
+
letter-spacing: 0.08em; border-radius: 3px;
|
|
258
|
+
}
|
|
259
|
+
.patent-card h3 {
|
|
260
|
+
font-size: 1.4rem; font-weight: 700; line-height: 1.4;
|
|
261
|
+
letter-spacing: -0.02em; margin-bottom: 1.2rem; color: #ddd; word-break: keep-all;
|
|
262
|
+
}
|
|
263
|
+
.patent-card p {
|
|
264
|
+
font-size: 1rem; color: #666; line-height: 1.7;
|
|
265
|
+
flex-grow: 1; word-break: keep-all;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/* ── Use Cases ── */
|
|
269
|
+
.usecases {
|
|
270
|
+
padding: 10rem 4rem;
|
|
271
|
+
background: #050505;
|
|
272
|
+
}
|
|
273
|
+
.usecases .section-header {
|
|
274
|
+
font-size: clamp(2rem, 4vw, 3.5rem);
|
|
275
|
+
font-weight: 800; letter-spacing: -0.03em; line-height: 1.2;
|
|
276
|
+
max-width: 1200px; margin: 0 auto 5rem;
|
|
277
|
+
}
|
|
278
|
+
.usecases .section-header .dim { color: #333; }
|
|
279
|
+
.usecases .section-desc {
|
|
280
|
+
max-width: 1200px; margin: -3rem auto 5rem;
|
|
281
|
+
color: #666; font-size: 1.2rem; line-height: 1.6; word-break: keep-all;
|
|
282
|
+
text-align: center;
|
|
283
|
+
}
|
|
284
|
+
.usecase-list {
|
|
285
|
+
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
286
|
+
gap: 2rem; max-width: 1200px; margin: 0 auto;
|
|
287
|
+
}
|
|
288
|
+
.usecase-card {
|
|
289
|
+
border: 1px solid #1a1a1a; border-radius: 12px;
|
|
290
|
+
padding: 2.5rem; transition: border-color 0.3s, transform 0.3s;
|
|
291
|
+
}
|
|
292
|
+
.usecase-card:hover { border-color: #333; transform: translateY(-4px); }
|
|
293
|
+
.usecase-icon {
|
|
294
|
+
width: 48px; height: 48px;
|
|
295
|
+
border-radius: 12px;
|
|
296
|
+
display: flex; align-items: center; justify-content: center;
|
|
297
|
+
margin-bottom: 1.5rem;
|
|
298
|
+
font-size: 1.4rem;
|
|
299
|
+
}
|
|
300
|
+
.usecase-icon md-icon {
|
|
301
|
+
--md-icon-size: 24px;
|
|
302
|
+
color: inherit;
|
|
303
|
+
}
|
|
304
|
+
.usecase-icon.factory { background: rgba(76,175,80,0.12); color: #4caf50; }
|
|
305
|
+
.usecase-icon.logistics { background: rgba(33,150,243,0.12); color: #2196f3; }
|
|
306
|
+
.usecase-icon.datacenter { background: rgba(156,39,176,0.12); color: #9c27b0; }
|
|
307
|
+
.usecase-icon.energy { background: rgba(255,152,0,0.12); color: #ff9800; }
|
|
308
|
+
.usecase-icon.farm { background: rgba(76,175,80,0.08); color: #66bb6a; }
|
|
309
|
+
.usecase-icon.building { background: rgba(121,85,72,0.12); color: #8d6e63; }
|
|
310
|
+
.usecase-card h3 { font-size: 1.3rem; margin-bottom: 0.8rem; color: #eee; }
|
|
311
|
+
.usecase-card p { color: #777; line-height: 1.6; font-size: 0.95rem; word-break: keep-all; }
|
|
312
|
+
|
|
313
|
+
/* ── Footer ── */
|
|
314
|
+
footer {
|
|
315
|
+
padding: 4rem;
|
|
316
|
+
border-top: 1px solid #111;
|
|
317
|
+
background: #000;
|
|
318
|
+
}
|
|
319
|
+
.footer-cta {
|
|
320
|
+
max-width: 600px; margin: 0 auto 4rem;
|
|
321
|
+
text-align: center;
|
|
322
|
+
}
|
|
323
|
+
.footer-cta h2 {
|
|
324
|
+
font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem;
|
|
325
|
+
letter-spacing: -0.03em;
|
|
326
|
+
}
|
|
327
|
+
.footer-cta p { color: #666; margin-bottom: 2rem; font-size: 1.1rem; }
|
|
328
|
+
.join-form {
|
|
329
|
+
display: flex; gap: 10px; max-width: 500px; margin: 0 auto;
|
|
330
|
+
}
|
|
331
|
+
.join-form input[type="email"] {
|
|
332
|
+
flex: 1; padding: 1rem 1.2rem; border: 1px solid #222;
|
|
333
|
+
border-radius: 8px; background: #0a0a0a; color: #fff;
|
|
334
|
+
font-size: 1rem; transition: border-color 0.2s;
|
|
335
|
+
}
|
|
336
|
+
.join-form input[type="email"]:focus { outline: none; border-color: #3d5afe; }
|
|
337
|
+
.join-form button {
|
|
338
|
+
background: #fff; color: #000; border: none; border-radius: 8px;
|
|
339
|
+
padding: 1rem 2rem; font-weight: 800; font-size: 0.95rem;
|
|
340
|
+
cursor: pointer; white-space: nowrap; transition: opacity 0.2s;
|
|
341
|
+
}
|
|
342
|
+
.join-form button:hover { opacity: 0.85; }
|
|
343
|
+
.footer-bottom {
|
|
344
|
+
display: flex; justify-content: space-between; align-items: center;
|
|
345
|
+
color: #444; font-size: 0.85rem;
|
|
346
|
+
border-top: 1px solid #111; padding-top: 2rem;
|
|
347
|
+
}
|
|
348
|
+
.footer-bottom .patent-notice { font-size: 0.8rem; color: #333; }
|
|
349
|
+
|
|
350
|
+
@media (max-width: 768px) {
|
|
351
|
+
nav { padding: 1rem 1.5rem; }
|
|
352
|
+
.hero { padding: 0 1.5rem; }
|
|
353
|
+
.steps { grid-template-columns: 1fr; }
|
|
354
|
+
.step { border-right: none; border-bottom: 1px solid #1a1a1a; }
|
|
355
|
+
.step:last-child { border-bottom: none; }
|
|
356
|
+
.workflow, .patents, .usecases { padding: 5rem 1.5rem; }
|
|
357
|
+
.patent-grid { grid-template-columns: 1fr; }
|
|
358
|
+
.join-form { flex-direction: column; }
|
|
359
|
+
.footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
|
|
360
|
+
.nav-links { gap: 0.5rem; }
|
|
361
|
+
}
|
|
362
|
+
`
|
|
363
|
+
]; }
|
|
364
|
+
connectedCallback() {
|
|
365
|
+
super.connectedCallback();
|
|
366
|
+
this._loadCopy();
|
|
367
|
+
}
|
|
368
|
+
_loadCopy() {
|
|
369
|
+
const ns = 'landing';
|
|
370
|
+
if (i18next.hasResourceBundle('ko', ns))
|
|
371
|
+
return;
|
|
372
|
+
i18next.addResourceBundle('ko', ns, {
|
|
373
|
+
headline: 'Zero to Twin.\n차원을 넘나드는 경험.',
|
|
374
|
+
hero_sub1: '2D 스케치에서 라이브 3D 관제까지, 가장 직관적인 워크플로우.',
|
|
375
|
+
hero_sub2: '단절 없이 완성되는 차세대 디지털 트윈 솔루션을 지금 경험하세요.',
|
|
376
|
+
cta_start: '무료로 시작하기',
|
|
377
|
+
cta_how: '작동 방식 보기',
|
|
378
|
+
partners_title: '글로벌 산업 리더들이 신뢰합니다',
|
|
379
|
+
workflow_title: '스케치에서 라이브 트윈까지.',
|
|
380
|
+
workflow_desc: '전문 3D 지식 없이, 모델링 외주 없이. 세 단계만으로 완성됩니다.',
|
|
381
|
+
step1_title: '2D 레이아웃 설계',
|
|
382
|
+
step1_desc: '누구나 다룰 수 있는 직관적인 2D 에디터로 대규모 물류창고나 스마트팩토리의 평면 레이아웃과 센서 노드를 빠르고 저렴하게 구축합니다.',
|
|
383
|
+
step2_title: '원클릭 3D 변환',
|
|
384
|
+
step2_desc: '완성된 2D 레이아웃은 단 한 번의 클릭으로 완벽한 3D 가상 공간(WebGL)으로 변환됩니다. 2D 에셋의 속성만으로 입체적 공간을 자동 생성합니다.',
|
|
385
|
+
step3_title: '라이브 데이터 연동',
|
|
386
|
+
step3_desc: 'API를 통해 현장의 IoT 데이터와 보드의 컴포넌트를 즉각 연결합니다. 실시간 게이지, 장비 상태, 물류 흐름이 3D 공간 위에서 살아 움직입니다.',
|
|
387
|
+
cinematic_title: '당신의 공장이 살아 움직이는 순간.',
|
|
388
|
+
cinematic_sub: '실시간 데이터가 3D 공간과 만나는 순간.',
|
|
389
|
+
tech_title: '초대규모 퍼포먼스를 위한 핵심 아키텍처.',
|
|
390
|
+
tech_desc: '오페라토 보드의 퍼포먼스를 완성하는 3가지 특허 기술.',
|
|
391
|
+
patent_badge: '특허 출원 중',
|
|
392
|
+
patent1_title: '대규모 설비 인스턴스를 위한 최소 폴리곤 렌더링 최적화 시스템',
|
|
393
|
+
patent1_desc: '수만 개의 설비가 투입된 메가 팩토리에서도 쾌적하게 동작합니다. 단일 메시(Single Mesh) 병합과 이면 폴리곤 동적 제거로 드로우 콜(Draw Call)을 획기적으로 낮췄습니다.',
|
|
394
|
+
patent2_title: '레이아웃 기반 CAD-비의존적 절차적 디지털트윈 자동 생성',
|
|
395
|
+
patent2_desc: '2D 레이아웃의 타입(Type)과 관계(Relation) 정보만으로 엔진이 스스로 최적화된 3D 가상 설비를 절차적(Procedural)으로 조립하고 렌더링합니다.',
|
|
396
|
+
patent3_title: '단일 데이터 소스 기반 CSS3D 하이브리드 관제 동기화',
|
|
397
|
+
patent3_desc: 'HTML/CSS로 만든 차트와 폼이 3D 좌표 위에 정밀하게 오버레이되어, 실시간 상태값을 지연 없이 양방향으로 동기화합니다.',
|
|
398
|
+
usecases_title: '모든 규모의 산업 현장에 대응합니다.',
|
|
399
|
+
usecases_desc: '산업 현장의 자율화 전환(AX)을 가속하는 가장 빠른 시작점.',
|
|
400
|
+
uc_factory_title: 'Smart Factory',
|
|
401
|
+
uc_factory_desc: '수천 개의 설비와 물류 로봇(AGV)이 맞물려 돌아가는 메가 팩토리 전체를 하나의 브라우저에서 실시간 관제합니다. 설비 이상 징후를 조기에 포착하여 비계획 정지시간을 대폭 줄이고, 라인 가동률을 극대화합니다.',
|
|
402
|
+
uc_logistics_title: 'Smart Logistics',
|
|
403
|
+
uc_logistics_desc: '2D 도면 기반으로 다단 랙(Rack)과 팔레트를 배치하고, 3D 차원에서 실시간 재고 위치와 양을 입체 추적합니다. 재고 오차율을 최소화하고 피킹 동선을 최적화하여 물류 처리량을 향상시킵니다.',
|
|
404
|
+
uc_datacenter_title: 'Data Center',
|
|
405
|
+
uc_datacenter_desc: '서버 랙별 온도, 습도, 전력 소비량이 3D 공간과 결합되어 열적 불균형과 과부하 위험을 즉각 파악합니다. 냉각 효율을 높여 에너지 비용을 절감하고, 장애를 사전에 예방합니다.',
|
|
406
|
+
uc_energy_title: 'Energy & Utilities',
|
|
407
|
+
uc_energy_desc: '발전소, 변전소, 송전 네트워크의 실시간 전력 흐름을 3D 지형 위에 통합 시각화합니다. 그리드 이상을 조기 감지하고 최적 부하 분배를 지원하여 안정적인 에너지 공급 체계를 구축합니다.',
|
|
408
|
+
uc_farm_title: 'Smart Farm',
|
|
409
|
+
uc_farm_desc: '온실, 축사, 양식장의 온도, 습도, CO₂, 조도 센서 데이터를 3D 시설 모델 위에 실시간 매핑합니다. 작물 생육 환경을 정밀 제어하고, 이상 징후를 조기에 감지하여 생산성과 품질을 높입니다.',
|
|
410
|
+
uc_building_title: 'Smart Building',
|
|
411
|
+
uc_building_desc: '빌딩 전체의 공조(HVAC), 조명, 출입 통제, 엘리베이터 상태를 층별 3D 모델 위에 실시간 매핑합니다. 에너지 낭비 구간을 시각적으로 파악하고 쾌적한 근무 환경을 유지합니다.',
|
|
412
|
+
footer_cta_title: '당신의 트윈을 구축하세요.',
|
|
413
|
+
footer_cta_sub: '무료 계정으로 지금 바로 시작하세요.',
|
|
414
|
+
footer_join: '무료 가입',
|
|
415
|
+
footer_patent: '핵심 엔진 아키텍처는 현재 특허 출원 중입니다.'
|
|
416
|
+
});
|
|
417
|
+
i18next.addResourceBundle('en', ns, {
|
|
418
|
+
headline: 'Zero to Twin\nin Seconds.',
|
|
419
|
+
hero_sub1: 'The most intuitive path from a 2D sketch to a live 3D monitoring twin.',
|
|
420
|
+
hero_sub2: 'Experience the seamless, next-generation digital twin solution today.',
|
|
421
|
+
cta_start: 'Start for Free',
|
|
422
|
+
cta_how: 'How it Works',
|
|
423
|
+
partners_title: 'Trusted by Industry Leaders',
|
|
424
|
+
workflow_title: 'From Sketch to Live Twin.',
|
|
425
|
+
workflow_desc: 'No 3D expertise. No outsourced modeling. An unprecedented workflow in just three steps.',
|
|
426
|
+
step1_title: '2D Layout Design',
|
|
427
|
+
step1_desc: 'Build large-scale warehouse or smart factory floor plans and sensor nodes quickly and affordably with an intuitive 2D editor anyone can use.',
|
|
428
|
+
step2_title: 'One-Click 3D Conversion',
|
|
429
|
+
step2_desc: 'A completed 2D layout transforms into a fully immersive 3D virtual space (WebGL) with a single click. 3D geometry is auto-generated from 2D asset properties alone.',
|
|
430
|
+
step3_title: 'Live Data Integration',
|
|
431
|
+
step3_desc: 'Connect on-site IoT data to board components instantly via API. Real-time gauges, equipment status, and logistics flows come alive in 3D space.',
|
|
432
|
+
cinematic_title: 'See Your Factory Come Alive.',
|
|
433
|
+
cinematic_sub: 'The moment real-time data meets 3D space.',
|
|
434
|
+
tech_title: 'Core Technologies.',
|
|
435
|
+
tech_desc: 'The overwhelming performance of Operato Board is built on three core patent-pending technologies.',
|
|
436
|
+
patent_badge: 'Patent Pending',
|
|
437
|
+
patent1_title: 'Minimal-Polygon Rendering Optimization for Large-Scale Equipment Instances',
|
|
438
|
+
patent1_desc: 'Runs smoothly even in mega-factories with tens of thousands of equipment. Single mesh merging and dynamic backface polygon culling dramatically reduce draw calls.',
|
|
439
|
+
patent2_title: 'CAD-Independent Procedural Digital Twin Auto-Generation from Layout Data',
|
|
440
|
+
patent2_desc: 'The engine procedurally assembles and renders optimized 3D virtual equipment using only the Type and Relation data defined in the 2D layout.',
|
|
441
|
+
patent3_title: 'CSS3D Hybrid Monitoring Synchronization via Single Data Source',
|
|
442
|
+
patent3_desc: 'Charts and forms built with HTML/CSS are precisely overlaid on 3D coordinates, synchronizing real-time state values bidirectionally without delay.',
|
|
443
|
+
usecases_title: 'Built for Every Scale.',
|
|
444
|
+
usecases_desc: 'The fastest starting point to accelerate Autonomous Transformation (AX) on the industrial floor.',
|
|
445
|
+
uc_factory_title: 'Smart Factory',
|
|
446
|
+
uc_factory_desc: 'Monitor an entire mega-factory with thousands of equipment and AGVs in real-time from a single browser. Detect anomalies early to dramatically reduce unplanned downtime and maximize line utilization.',
|
|
447
|
+
uc_logistics_title: 'Smart Logistics',
|
|
448
|
+
uc_logistics_desc: 'Place multi-tier racks and pallets on 2D floor plans and track inventory location and volume in 3D in real time. Minimize inventory discrepancies and optimize picking routes to boost throughput.',
|
|
449
|
+
uc_datacenter_title: 'Data Center',
|
|
450
|
+
uc_datacenter_desc: 'Per-rack temperature, humidity, and power consumption data merged with 3D space to instantly identify thermal imbalances and overload risks. Improve cooling efficiency, cut energy costs, and prevent failures.',
|
|
451
|
+
uc_energy_title: 'Energy & Utilities',
|
|
452
|
+
uc_energy_desc: 'Visualize real-time power flows across plants, substations, and transmission networks on a 3D terrain. Detect grid anomalies early and support optimal load distribution for a reliable energy supply.',
|
|
453
|
+
uc_farm_title: 'Smart Farm',
|
|
454
|
+
uc_farm_desc: 'Map temperature, humidity, CO₂, and light sensor data onto 3D greenhouse and facility models in real time. Precisely control crop growth environments and detect anomalies early to boost yield and quality.',
|
|
455
|
+
uc_building_title: 'Smart Building',
|
|
456
|
+
uc_building_desc: 'Map HVAC, lighting, access control, and elevator status in real time across a floor-by-floor 3D building model. Visually pinpoint energy waste zones and maintain optimal work environments.',
|
|
457
|
+
footer_cta_title: 'Start Building Your Twin.',
|
|
458
|
+
footer_cta_sub: 'Create your free account and get started today.',
|
|
459
|
+
footer_join: 'Join Free',
|
|
460
|
+
footer_patent: 'Core engine architectures are patent-pending.'
|
|
461
|
+
});
|
|
462
|
+
}
|
|
463
|
+
_t(key) {
|
|
464
|
+
return i18next.t(key, { ns: 'landing' });
|
|
465
|
+
}
|
|
466
|
+
render() {
|
|
467
|
+
const title = this.applicationMeta?.title || 'Operato Board';
|
|
468
|
+
const icon = this.applicationMeta?.icon;
|
|
469
|
+
const t = (k) => this._t(k);
|
|
470
|
+
return html `
|
|
471
|
+
<nav>
|
|
472
|
+
<div class="brand">
|
|
473
|
+
${icon ? html `<img src=${icon} alt="" />` : ''}${title}
|
|
474
|
+
</div>
|
|
475
|
+
<div class="nav-links">
|
|
476
|
+
<span class="nav-link" @click=${this._scrollTo('workflow')}>Workflow</span>
|
|
477
|
+
<span class="nav-link" @click=${this._scrollTo('patents')}>Technology</span>
|
|
478
|
+
<span class="nav-link" @click=${this._scrollTo('usecases')}>Use Cases</span>
|
|
479
|
+
<span class="nav-link lang-toggle" @click=${this._toggleLang}>${i18next.language?.startsWith('ko') ? 'EN' : 'KO'}</span>
|
|
480
|
+
<button class="signin-btn" @click=${() => (window.location.href = '/auth/signin')}>Sign In</button>
|
|
481
|
+
</div>
|
|
482
|
+
</nav>
|
|
483
|
+
|
|
484
|
+
<!-- Hero -->
|
|
485
|
+
<section class="hero">
|
|
486
|
+
<h1 class="headline">${t('headline').split('\n').map((line, i) => i === 0 ? html `${line}` : html `<br/><span class="dim">${line}</span>`)}</h1>
|
|
487
|
+
<p class="hero-sub">
|
|
488
|
+
<strong>${t('hero_sub1')}</strong><br/>
|
|
489
|
+
${t('hero_sub2')}
|
|
490
|
+
</p>
|
|
491
|
+
<div class="cta-area">
|
|
492
|
+
<button class="cta-primary" @click=${this._scrollTo('footer-cta')}>
|
|
493
|
+
${t('cta_start')} <md-icon style="font-size:18px">arrow_forward</md-icon>
|
|
494
|
+
</button>
|
|
495
|
+
<button class="cta-secondary" @click=${this._scrollTo('workflow')}>${t('cta_how')}</button>
|
|
496
|
+
</div>
|
|
497
|
+
<div class="scroll-hint" @click=${this._scrollTo('workflow')}>↓</div>
|
|
498
|
+
</section>
|
|
499
|
+
|
|
500
|
+
<!-- Workflow -->
|
|
501
|
+
<section class="workflow" id="workflow">
|
|
502
|
+
<h2 class="section-header">${t('workflow_title')}</h2>
|
|
503
|
+
<p class="section-desc">${t('workflow_desc')}</p>
|
|
504
|
+
<div class="steps">
|
|
505
|
+
<div class="step">
|
|
506
|
+
<div class="step-number">01</div>
|
|
507
|
+
<h3>${t('step1_title')}</h3>
|
|
508
|
+
<p>${t('step1_desc')}</p>
|
|
509
|
+
</div>
|
|
510
|
+
<div class="step">
|
|
511
|
+
<div class="step-number">02</div>
|
|
512
|
+
<h3>${t('step2_title')}</h3>
|
|
513
|
+
<p>${t('step2_desc')}</p>
|
|
514
|
+
</div>
|
|
515
|
+
<div class="step">
|
|
516
|
+
<div class="step-number">03</div>
|
|
517
|
+
<h3>${t('step3_title')}</h3>
|
|
518
|
+
<p>${t('step3_desc')}</p>
|
|
519
|
+
</div>
|
|
520
|
+
</div>
|
|
521
|
+
</section>
|
|
522
|
+
|
|
523
|
+
<!-- Cinematic Break -->
|
|
524
|
+
<div class="cinematic">
|
|
525
|
+
<div class="cinematic-text">
|
|
526
|
+
<h2>${t('cinematic_title')}</h2>
|
|
527
|
+
<p>${t('cinematic_sub')}</p>
|
|
528
|
+
</div>
|
|
529
|
+
</div>
|
|
530
|
+
|
|
531
|
+
<!-- Patents -->
|
|
532
|
+
<section class="patents" id="patents">
|
|
533
|
+
<h2 class="section-header">${t('tech_title')}</h2>
|
|
534
|
+
<p class="section-desc">${t('tech_desc')}</p>
|
|
535
|
+
<div class="patent-grid">
|
|
536
|
+
<div class="patent-card">
|
|
537
|
+
<div class="patent-badge">${t('patent_badge')}</div>
|
|
538
|
+
<h3>${t('patent1_title')}</h3>
|
|
539
|
+
<p>${t('patent1_desc')}</p>
|
|
540
|
+
</div>
|
|
541
|
+
<div class="patent-card">
|
|
542
|
+
<div class="patent-badge">${t('patent_badge')}</div>
|
|
543
|
+
<h3>${t('patent2_title')}</h3>
|
|
544
|
+
<p>${t('patent2_desc')}</p>
|
|
545
|
+
</div>
|
|
546
|
+
<div class="patent-card">
|
|
547
|
+
<div class="patent-badge">${t('patent_badge')}</div>
|
|
548
|
+
<h3>${t('patent3_title')}</h3>
|
|
549
|
+
<p>${t('patent3_desc')}</p>
|
|
550
|
+
</div>
|
|
551
|
+
</div>
|
|
552
|
+
</section>
|
|
553
|
+
|
|
554
|
+
<!-- Use Cases -->
|
|
555
|
+
<section class="usecases" id="usecases">
|
|
556
|
+
<h2 class="section-header">${t('usecases_title')}</h2>
|
|
557
|
+
<p class="section-desc">${t('usecases_desc')}</p>
|
|
558
|
+
<div class="usecase-list">
|
|
559
|
+
<div class="usecase-card">
|
|
560
|
+
<div class="usecase-icon factory"><md-icon>precision_manufacturing</md-icon></div>
|
|
561
|
+
<h3>${t('uc_factory_title')}</h3>
|
|
562
|
+
<p>${t('uc_factory_desc')}</p>
|
|
563
|
+
</div>
|
|
564
|
+
<div class="usecase-card">
|
|
565
|
+
<div class="usecase-icon logistics"><md-icon>local_shipping</md-icon></div>
|
|
566
|
+
<h3>${t('uc_logistics_title')}</h3>
|
|
567
|
+
<p>${t('uc_logistics_desc')}</p>
|
|
568
|
+
</div>
|
|
569
|
+
<div class="usecase-card">
|
|
570
|
+
<div class="usecase-icon datacenter"><md-icon>dns</md-icon></div>
|
|
571
|
+
<h3>${t('uc_datacenter_title')}</h3>
|
|
572
|
+
<p>${t('uc_datacenter_desc')}</p>
|
|
573
|
+
</div>
|
|
574
|
+
<div class="usecase-card">
|
|
575
|
+
<div class="usecase-icon energy"><md-icon>bolt</md-icon></div>
|
|
576
|
+
<h3>${t('uc_energy_title')}</h3>
|
|
577
|
+
<p>${t('uc_energy_desc')}</p>
|
|
578
|
+
</div>
|
|
579
|
+
<div class="usecase-card">
|
|
580
|
+
<div class="usecase-icon farm"><md-icon>eco</md-icon></div>
|
|
581
|
+
<h3>${t('uc_farm_title')}</h3>
|
|
582
|
+
<p>${t('uc_farm_desc')}</p>
|
|
583
|
+
</div>
|
|
584
|
+
<div class="usecase-card">
|
|
585
|
+
<div class="usecase-icon building"><md-icon>apartment</md-icon></div>
|
|
586
|
+
<h3>${t('uc_building_title')}</h3>
|
|
587
|
+
<p>${t('uc_building_desc')}</p>
|
|
588
|
+
</div>
|
|
589
|
+
</div>
|
|
590
|
+
</section>
|
|
591
|
+
|
|
592
|
+
<!-- Partners -->
|
|
593
|
+
<section class="partners" id="partners">
|
|
594
|
+
<div class="partners-title">${t('partners_title')}</div>
|
|
595
|
+
<div class="marquee-container">
|
|
596
|
+
<div class="marquee-content">
|
|
597
|
+
${[51, 50, 49, 48, 36, 35, 34, 29, 4, 51, 50, 49, 48, 36, 35, 34, 29, 4].map(id => html `<img src="https://www.hatiolab.com/assets/img/partners/${id < 10 ? '0' + id : id}.png" alt="" />`)}
|
|
598
|
+
</div>
|
|
599
|
+
</div>
|
|
600
|
+
</section>
|
|
601
|
+
|
|
602
|
+
<!-- Footer -->
|
|
603
|
+
<footer>
|
|
604
|
+
<div class="footer-cta" id="footer-cta">
|
|
605
|
+
<h2>${t('footer_cta_title')}</h2>
|
|
606
|
+
<p>${t('footer_cta_sub')}</p>
|
|
607
|
+
<form class="join-form" action="/auth/join" method="post">
|
|
608
|
+
<input type="email" name="email" placeholder="your@email.com" required />
|
|
609
|
+
<button type="submit">${t('footer_join')}</button>
|
|
610
|
+
</form>
|
|
611
|
+
</div>
|
|
612
|
+
<div class="footer-bottom">
|
|
613
|
+
<span>${title} © Hatiolab</span>
|
|
614
|
+
<span class="patent-notice">${t('footer_patent')}</span>
|
|
615
|
+
</div>
|
|
616
|
+
</footer>
|
|
617
|
+
`;
|
|
618
|
+
}
|
|
619
|
+
_toggleLang() {
|
|
620
|
+
const next = i18next.language?.startsWith('ko') ? 'en' : 'ko';
|
|
621
|
+
i18next.changeLanguage(next);
|
|
622
|
+
this.requestUpdate();
|
|
623
|
+
}
|
|
624
|
+
_scrollTo(id) {
|
|
625
|
+
return () => {
|
|
626
|
+
this.shadowRoot?.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
|
|
627
|
+
};
|
|
628
|
+
}
|
|
629
|
+
get applicationMeta() {
|
|
630
|
+
if (!this._applicationMeta) {
|
|
631
|
+
const iconLink = document.querySelector('link[rel="application-icon"]');
|
|
632
|
+
const titleMeta = document.querySelector('meta[name="application-name"]');
|
|
633
|
+
const descriptionMeta = document.querySelector('meta[name="application-description"]');
|
|
634
|
+
this._applicationMeta = {
|
|
635
|
+
icon: iconLink?.href || '',
|
|
636
|
+
title: titleMeta?.content || 'Operato Board',
|
|
637
|
+
description: descriptionMeta?.content || ''
|
|
638
|
+
};
|
|
639
|
+
}
|
|
640
|
+
return this._applicationMeta;
|
|
641
|
+
}
|
|
642
|
+
};
|
|
643
|
+
__decorate([
|
|
644
|
+
query('input[type=email]'),
|
|
645
|
+
__metadata("design:type", HTMLInputElement)
|
|
646
|
+
], HomePage.prototype, "firstInput", void 0);
|
|
647
|
+
HomePage = __decorate([
|
|
648
|
+
customElement('home-page')
|
|
649
|
+
], HomePage);
|
|
650
|
+
export { HomePage };
|
|
651
|
+
//# sourceMappingURL=home.js.map
|