-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcode.html
More file actions
249 lines (249 loc) · 12.2 KB
/
code.html
File metadata and controls
249 lines (249 loc) · 12.2 KB
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
<!doctype html>
<html class="dark" lang="ru">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Smirnoff - Obsidian Knowledge Base Case Study</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
rel="stylesheet"
/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#60a5fa",
"background-light": "#f3f4f6",
"background-dark": "#111111",
"surface-light": "#ffffff",
"surface-dark": "#161618",
"border-light": "#e5e7eb",
"border-dark": "#27272a",
"text-main-light": "#1f2937",
"text-main-dark": "#e5e7eb",
"text-muted-light": "#6b7280",
"text-muted-dark": "#9ca3af",
},
fontFamily: {
display: ["Inter", "sans-serif"],
body: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.5rem",
},
},
},
}
</script>
<style type="text/tailwindcss">
body {
font-family: "Inter", sans-serif;
}
.hero-pattern {
background-image: radial-gradient(
circle at 2px 2px,
rgba(96, 165, 250, 0.05) 1px,
transparent 0
);
background-size: 24px 24px;
}
.material-symbols-outlined {
font-variation-settings:
"FILL" 0,
"wght" 300,
"GRAD" 0,
"opsz" 24;
}
.graph-mesh {
background-image: radial-gradient(circle, #3b82f6 1px, transparent 1px);
background-size: 30px 30px;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body
class="bg-background-light dark:bg-background-dark text-text-main-light dark:text-text-main-dark min-h-screen flex items-center justify-center p-4 transition-colors duration-200"
>
<div class="max-w-5xl w-full mx-auto">
<div
class="group bg-surface-light dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-3xl overflow-hidden flex flex-col shadow-2xl transition-all duration-500"
>
<div class="p-8 md:p-10 pb-0">
<div class="flex items-center gap-2 mb-6">
<span
class="px-3 py-1 rounded-md bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-300 text-xs font-bold uppercase tracking-wider"
>Infrastructure</span
>
<h4 class="text-2xl font-bold dark:text-white ml-2">Obsidian Knowledge Base</h4>
</div>
<div class="flex flex-col md:flex-row gap-8 mb-8">
<div
class="flex-grow bg-zinc-100 dark:bg-zinc-800/50 rounded-2xl relative overflow-hidden flex items-center justify-center min-h-[400px] border border-border-light dark:border-border-dark"
>
<div class="absolute inset-0 opacity-20 graph-mesh"></div>
<div class="relative w-full h-full max-w-lg mx-auto flex items-center justify-center">
<svg class="w-full h-full p-8 md:p-12" viewBox="0 0 400 300">
<g class="stroke-zinc-600 dark:stroke-zinc-500" stroke-width="0.5">
<line x1="200" x2="100" y1="150" y2="80"></line>
<line x1="200" x2="300" y1="150" y2="80"></line>
<line x1="200" x2="150" y1="150" y2="230"></line>
<line x1="200" x2="250" y1="150" y2="230"></line>
<line x1="100" x2="60" y1="80" y2="120"></line>
<line x1="100" x2="140" y1="80" y2="40"></line>
<line x1="300" x2="340" y1="80" y2="120"></line>
<line x1="150" x2="100" y1="230" y2="210"></line>
<line x1="250" x2="300" y1="230" y2="250"></line>
</g>
<circle class="fill-primary animate-pulse" cx="200" cy="150" r="8"></circle>
<circle class="fill-zinc-400" cx="100" cy="80" r="4"></circle>
<circle class="fill-zinc-400" cx="300" cy="80" r="4"></circle>
<circle class="fill-zinc-400" cx="150" cy="230" r="4"></circle>
<circle class="fill-zinc-400" cx="250" cy="230" r="4"></circle>
<circle class="fill-zinc-600" cx="60" cy="120" r="2.5"></circle>
<circle class="fill-zinc-600" cx="140" cy="40" r="2.5"></circle>
<circle class="fill-zinc-600" cx="340" cy="120" r="2.5"></circle>
<circle class="fill-zinc-600" cx="100" cy="210" r="2.5"></circle>
<circle class="fill-zinc-600" cx="300" cy="250" r="2.5"></circle>
</svg>
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-primary/20 rounded-full blur-3xl"
></div>
</div>
</div>
<div
class="w-full md:w-24 flex flex-row md:flex-col gap-3 justify-center md:justify-center items-center py-2"
>
<button
class="w-16 h-16 rounded-xl bg-primary/20 border-2 border-primary flex items-center justify-center text-primary font-bold shadow-lg shadow-primary/10 transition-transform hover:scale-105"
>
<span class="material-symbols-outlined text-2xl">hub</span>
</button>
<button
class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-800 border border-border-light dark:border-border-dark flex items-center justify-center text-text-muted-dark hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary transition-all hover:scale-105"
>
<span class="material-symbols-outlined text-2xl">folder_open</span>
</button>
<button
class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-800 border border-border-light dark:border-border-dark flex items-center justify-center text-text-muted-dark hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary transition-all hover:scale-105"
>
<span class="material-symbols-outlined text-2xl">edit_note</span>
</button>
<button
class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-800 border border-border-light dark:border-border-dark flex items-center justify-center text-text-muted-dark hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-primary transition-all hover:scale-105"
>
<span class="material-symbols-outlined text-2xl">sync_alt</span>
</button>
</div>
</div>
</div>
<div
class="bg-zinc-50 dark:bg-zinc-900/50 px-8 md:px-10 py-8 border-t border-border-light dark:border-border-dark"
>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div
class="p-5 rounded-2xl bg-surface-light dark:bg-zinc-800 border border-border-light dark:border-border-dark flex flex-col justify-between group/card hover:border-red-400/50 hover:shadow-lg transition-all cursor-pointer h-full relative overflow-hidden"
>
<div
class="absolute top-0 right-0 p-4 opacity-50 group-hover/card:opacity-100 transition-opacity"
>
<span
class="material-symbols-outlined text-text-muted-dark group-hover/card:text-red-400 rotate-45 group-hover/card:rotate-0 transition-transform duration-300"
>unfold_more</span
>
</div>
<div class="mb-4">
<div class="flex items-center gap-2 mb-2">
<span class="material-symbols-outlined text-red-400 text-lg"
>remove_circle_outline</span
>
<p
class="text-xs font-bold uppercase tracking-wider text-text-muted-light dark:text-text-muted-dark"
>
Было
</p>
</div>
<h5 class="text-base font-medium text-text-main-light dark:text-white leading-snug">
Затянутый онбординг (2 недели)
</h5>
</div>
<p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-2 line-clamp-2">
Разрозненные документы, отсутствие структуры и долгий поиск информации новыми
сотрудниками.
</p>
</div>
<div
class="p-5 rounded-2xl bg-surface-light dark:bg-zinc-800 border border-border-light dark:border-border-dark flex flex-col justify-between group/card hover:border-primary/50 hover:shadow-lg transition-all cursor-pointer h-full relative overflow-hidden"
>
<div
class="absolute top-0 right-0 p-4 opacity-50 group-hover/card:opacity-100 transition-opacity"
>
<span
class="material-symbols-outlined text-text-muted-dark group-hover/card:text-primary rotate-45 group-hover/card:rotate-0 transition-transform duration-300"
>unfold_more</span
>
</div>
<div class="mb-4">
<div class="flex items-center gap-2 mb-2">
<span class="material-symbols-outlined text-primary text-lg"
>add_circle_outline</span
>
<p
class="text-xs font-bold uppercase tracking-wider text-text-muted-light dark:text-text-muted-dark"
>
Сделали
</p>
</div>
<h5 class="text-base font-medium text-text-main-light dark:text-white leading-snug">
Связанная база знаний Obsidian
</h5>
</div>
<p class="text-xs text-text-muted-light dark:text-text-muted-dark mt-2 line-clamp-2">
Внедрение графовой структуры, шаблонов заметок и автоматизации для быстрого создания
гайдов.
</p>
</div>
<div
class="p-5 rounded-2xl bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 flex flex-col justify-between group/card hover:bg-blue-100 dark:hover:bg-blue-900/20 hover:shadow-lg transition-all cursor-pointer h-full relative overflow-hidden"
>
<div class="absolute top-0 right-0 p-4">
<span
class="material-symbols-outlined text-blue-500 group-hover/card:translate-x-1 transition-transform"
>arrow_forward</span
>
</div>
<div class="mb-4">
<div class="flex items-center gap-2 mb-2">
<span class="material-symbols-outlined text-blue-500 text-lg">verified</span>
<p
class="text-xs font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400"
>
Результат
</p>
</div>
<h5 class="text-xl font-bold text-blue-700 dark:text-blue-300 leading-snug">
Онбординг 3 дня
</h5>
</div>
<p class="text-xs text-blue-600/70 dark:text-blue-300/60 mt-2">
Сокращение времени адаптации сотрудников в 4.5 раза.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>