Skip to content

Commit f5e54cd

Browse files
iammajidiammajid
committed
WIP refine homepage hero and hub illustration
1 parent 5e8890a commit f5e54cd

8 files changed

Lines changed: 467 additions & 44 deletions

File tree

‎assets/css/custom.css‎

Lines changed: 216 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,226 @@
3030
@apply bg-primary border-primary text-white;
3131
}
3232

33+
.btn-secondary {
34+
@apply bg-secondary border-secondary text-white;
35+
}
36+
3337
.btn-primary:hover,
34-
.btn-primary:focus {
38+
.btn-primary:focus,
39+
.btn-secondary:hover,
40+
.btn-secondary:focus {
3541
@apply text-white transition transform duration-200 ease-in-out shadow-md -translate-y-px;
3642
}
3743

38-
.btn-primary:disabled {
44+
.btn-primary:disabled,
45+
.btn-secondary:disabled {
3946
@apply shadow-none translate-y-0;
4047
}
4148

49+
.hero-split-contrast {
50+
@apply py-12 md:py-16 lg:py-20;
51+
}
52+
53+
.hero-split-header {
54+
@apply text-center mb-10 md:mb-14 px-4;
55+
}
56+
57+
.animate-slide li i {
58+
@apply inline-block w-8 text-center;
59+
}
60+
61+
.hero-split-panels {
62+
@apply relative grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 max-w-5xl mx-auto px-4;
63+
align-items: stretch;
64+
}
65+
66+
.hero-panel {
67+
@apply flex flex-col items-center text-center p-8 rounded-2xl bg-white;
68+
box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.08);
69+
}
70+
71+
.hero-panel-visual {
72+
@apply flex items-center justify-center;
73+
height: 200px;
74+
}
75+
76+
.hero-panel-content {
77+
@apply flex flex-col items-center flex-1;
78+
}
79+
80+
.hero-panel-content h2 {
81+
@apply font-headline font-bold text-2xl mb-2;
82+
}
83+
84+
.hero-panel-content .hero-panel-tagline {
85+
@apply text-gray-700 font-medium mb-2;
86+
}
87+
88+
.hero-panel-content p.text-sm {
89+
@apply flex-1;
90+
}
91+
92+
.hero-panel-content a.btn {
93+
@apply mt-auto;
94+
}
95+
96+
@keyframes file-to-logo {
97+
0% { left: 0; top: 50%; transform: translateY(-50%); opacity: 1; }
98+
40% { left: 100%; top: 50%; transform: translateY(-50%); opacity: 1; }
99+
45%, 100% { left: 100%; opacity: 0; }
100+
}
101+
102+
@keyframes logo-shake {
103+
0%, 35% { transform: rotate(0deg); }
104+
40% { transform: rotate(-5deg); }
105+
45% { transform: rotate(5deg); }
106+
50% { transform: rotate(-5deg); }
107+
55% { transform: rotate(5deg); }
108+
60% { transform: rotate(0deg); }
109+
100% { transform: rotate(0deg); }
110+
}
111+
112+
@keyframes file-to-cloud {
113+
0%, 55% { left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
114+
60% { left: 0; top: 50%; transform: translateY(-50%); opacity: 1; }
115+
95% { left: 100%; top: 50%; transform: translateY(-50%); opacity: 1; }
116+
100% { left: 100%; opacity: 0; }
117+
}
118+
119+
.animate-file-to-logo {
120+
opacity: 0;
121+
}
122+
123+
.animate-logo-shake {
124+
transform: rotate(0deg);
125+
}
126+
127+
.animate-file-to-cloud {
128+
opacity: 0;
129+
}
130+
131+
.hero-panel:hover .animate-file-to-logo {
132+
animation: file-to-logo 3s ease-in-out infinite;
133+
}
134+
135+
.hero-panel:hover .animate-logo-shake {
136+
animation: logo-shake 3s ease-in-out infinite;
137+
}
138+
139+
.hero-panel:hover .animate-file-to-cloud {
140+
animation: file-to-cloud 3s ease-in-out infinite;
141+
}
142+
143+
@keyframes hub-pulse-center {
144+
0%, 25% { transform: scale(1); }
145+
35% { transform: scale(1.1); }
146+
45% { transform: scale(1); }
147+
100% { transform: scale(1); }
148+
}
149+
150+
.animate-hub-pulse-center {
151+
transform: scale(1);
152+
}
153+
154+
.hero-panel:hover .animate-hub-pulse-center {
155+
animation: hub-pulse-center 3s ease-in-out infinite;
156+
}
157+
158+
@keyframes hub-flow-auth {
159+
0%, 5% { opacity: 0; offset-distance: 0%; }
160+
10% { opacity: 1; offset-distance: 0%; }
161+
32% { opacity: 1; offset-distance: 100%; }
162+
38%, 100% { opacity: 0; offset-distance: 100%; }
163+
}
164+
165+
@keyframes hub-flow-key {
166+
0%, 30% { opacity: 0; offset-distance: 0%; }
167+
35% { opacity: 1; offset-distance: 0%; }
168+
55% { opacity: 1; offset-distance: 100%; }
169+
60%, 100% { opacity: 0; offset-distance: 100%; }
170+
}
171+
172+
@keyframes hub-flow-file {
173+
0%, 56% { opacity: 0; offset-distance: 0%; }
174+
61% { opacity: 1; offset-distance: 0%; }
175+
86% { opacity: 1; offset-distance: 100%; }
176+
92%, 100% { opacity: 0; offset-distance: 100%; }
177+
}
178+
179+
.animate-hub-auth,
180+
.animate-hub-key-1,
181+
.animate-hub-key-2,
182+
.animate-hub-key-3,
183+
.animate-hub-file-u1-cloud,
184+
.animate-hub-file-u2-local,
185+
.animate-hub-file-u3-local {
186+
position: absolute;
187+
left: 0;
188+
top: 0;
189+
opacity: 0;
190+
offset-rotate: 0deg;
191+
-webkit-offset-rotate: 0deg;
192+
}
193+
194+
.animate-hub-auth {
195+
offset-path: path("M36 88 H112");
196+
-webkit-offset-path: path("M36 88 H112");
197+
}
198+
199+
.animate-hub-key-1 {
200+
offset-path: path("M112 88 H148 V40 H188");
201+
-webkit-offset-path: path("M112 88 H148 V40 H188");
202+
}
203+
204+
.animate-hub-key-2 {
205+
offset-path: path("M112 88 H188");
206+
-webkit-offset-path: path("M112 88 H188");
207+
}
208+
209+
.animate-hub-key-3 {
210+
offset-path: path("M112 88 H148 V136 H188");
211+
-webkit-offset-path: path("M112 88 H148 V136 H188");
212+
}
213+
214+
.animate-hub-file-u1-cloud {
215+
offset-path: path("M188 40 H220 V56 H252");
216+
-webkit-offset-path: path("M188 40 H220 V56 H252");
217+
}
218+
219+
.animate-hub-file-u2-local {
220+
offset-path: path("M188 88 H220 V120 H252");
221+
-webkit-offset-path: path("M188 88 H220 V120 H252");
222+
}
223+
224+
.animate-hub-file-u3-local {
225+
offset-path: path("M188 136 H220 V120 H252");
226+
-webkit-offset-path: path("M188 136 H220 V120 H252");
227+
}
228+
229+
.hero-panel:hover .animate-hub-auth {
230+
animation: hub-flow-auth 3.5s ease-in-out infinite;
231+
}
232+
233+
.hero-panel:hover .animate-hub-key-1,
234+
.hero-panel:hover .animate-hub-key-2,
235+
.hero-panel:hover .animate-hub-key-3 {
236+
animation: hub-flow-key 3.5s linear infinite;
237+
}
238+
239+
.hero-panel:hover .animate-hub-key-1 { animation-delay: 0.1s; }
240+
.hero-panel:hover .animate-hub-key-2 { animation-delay: 0.35s; }
241+
.hero-panel:hover .animate-hub-key-3 { animation-delay: 0.6s; }
242+
243+
.hero-panel:hover .animate-hub-file-u1-cloud,
244+
.hero-panel:hover .animate-hub-file-u2-local,
245+
.hero-panel:hover .animate-hub-file-u3-local {
246+
animation: hub-flow-file 3.5s linear infinite;
247+
}
248+
249+
.hero-panel:hover .animate-hub-file-u1-cloud { animation-delay: 0.95s; }
250+
.hero-panel:hover .animate-hub-file-u2-local { animation-delay: 1.35s; }
251+
.hero-panel:hover .animate-hub-file-u3-local { animation-delay: 1.75s; }
252+
42253
.btn-outline-primary {
43254
@apply border border-primary text-primary;
44255
}
@@ -87,14 +298,17 @@
87298

88299
.font-h1 {
89300
@apply font-headline font-medium text-3xl md:text-4xl leading-tight;
301+
text-wrap: balance;
90302
}
91303

92304
.font-h2 {
93305
@apply font-headline font-medium text-xl md:text-2xl leading-snug;
306+
text-wrap: balance;
94307
}
95308

96309
.font-h3 {
97310
@apply font-headline text-lg md:text-xl leading-relaxed;
311+
text-wrap: balance;
98312
}
99313

100314
.font-p {

‎assets/css/main.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,17 @@
194194
transform: translateY(-88.88%);
195195
}
196196
}
197+
198+
}
199+
200+
@media (prefers-reduced-motion: reduce) {
201+
*,
202+
*::before,
203+
*::after {
204+
animation-duration: 0.01ms !important;
205+
animation-iteration-count: 1 !important;
206+
transition-duration: 0.01ms !important;
207+
}
197208
}
198209

199210
@utility container {

‎i18n/de.yaml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,24 @@
322322
translation: "Kostenlose 30-Tage-Testversion"
323323
- id: home_header_for_teams_cta
324324
translation: "Für Teams"
325+
326+
- id: home_hero_question
327+
translation: "Wie möchtest du verschlüsseln?"
328+
- id: home_hero_cryptomator_tagline
329+
translation: "Deine Dateien. Deine Privatsphäre."
330+
- id: home_hero_cryptomator_description
331+
translation: "Lass Cloud-Anbieter nicht in deine privaten Dateien schauen. Verschlüssle vor dem Sync – nur du hast Zugriff."
332+
- id: home_hero_cryptomator_cta
333+
translation: "Kostenlos laden"
334+
- id: home_hero_hub_tagline
335+
translation: "Sichere Teams. Kein Passwort-Chaos."
336+
- id: home_hero_hub_description
337+
translation: "Schluss mit Passwörtern auf Klebezetteln. Vergib und entziehe Vault-Zugriff sofort – ohne je einen Schlüssel zu teilen."
338+
- id: home_hero_hub_cta
339+
translation: "Kostenlos testen"
340+
- id: home_hero_social_proof_audited
341+
translation: "Sicherheitsgeprüft"
342+
325343
- id: home_get_started_title
326344
translation: "Wie wirst du Cryptomator nutzen?"
327345
- id: home_get_started_for_individuals_title

‎i18n/en.yaml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,24 @@
322322
translation: "Free 30-Day Trial"
323323
- id: home_header_for_teams_cta
324324
translation: "For Teams"
325+
326+
- id: home_hero_question
327+
translation: "How do you want to encrypt?"
328+
- id: home_hero_cryptomator_tagline
329+
translation: "Your files. Your privacy."
330+
- id: home_hero_cryptomator_description
331+
translation: "Don't let cloud providers peek at your private files. Encrypt before you sync – no one but you can access your data."
332+
- id: home_hero_cryptomator_cta
333+
translation: "Download Free"
334+
- id: home_hero_hub_tagline
335+
translation: "Secure teams. No password chaos."
336+
- id: home_hero_hub_description
337+
translation: "Stop sharing passwords on sticky notes. Grant and revoke vault access instantly – without ever sharing a single key."
338+
- id: home_hero_hub_cta
339+
translation: "Start Free Trial"
340+
- id: home_hero_social_proof_audited
341+
translation: "Security Audited"
342+
325343
- id: home_get_started_title
326344
translation: "How will you use Cryptomator?"
327345
- id: home_get_started_for_individuals_title

0 commit comments

Comments
 (0)