Redesign homepage hero section#173
Conversation
# Conflicts: # layouts/_default/baseof.html # layouts/index.html
WalkthroughThe home page hero is replaced with a two-panel "hero-split-contrast" layout presenting Cryptomator (for individuals) and Cryptomator Hub (for teams) side by side. A large block of new CSS defines split/aura/panel foundation styles and a full animated scene system with data-flow travelers, glow effects, and keyframes for both scenes — animations are off by default and activated only on hover under Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
assets/css/custom.css (1)
262-268: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low valuePersistent
will-changeon idle decorative nodes.
will-change: transform(andtransform, opacity) is declared statically on ~9 hero elements (here, plus the travelers, key, auth, anchor icons, hub img). Since animations are disabled until.hero-panel:hover, these elements sit idle most of the time yet keep the browser holding compositor layers, wasting memory on a high-traffic landing page. Consider moving thewill-changehints into theprefers-reduced-motion: no-preferencehover block alongside theanimation-nameactivations so the promotion is scoped to when motion is actually running.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@assets/css/custom.css` around lines 262 - 268, The `.hero-scene-logo-img` class has a static `will-change: transform` declaration that keeps the browser maintaining compositor layers even when animations are idle, wasting memory. Remove the `will-change: transform` property from the static `.hero-scene-logo-img` rule and move it into a hover-activated state within a `prefers-reduced-motion: no-preference` media query block, so the compositor layer promotion only occurs when the animation is actually running. Apply the same refactoring pattern to all approximately 9 hero elements mentioned (travelers, key, auth, anchor icons, hub img, and others) that have static `will-change` declarations.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@assets/css/custom.css`:
- Around line 96-140: The stylelint declaration-empty-line-before rule requires
a blank line between `@apply` at-rules and regular CSS declarations. In the
.hero-split-panels class, add a blank line after the `@apply` statement and before
align-items: stretch. In the .hero-panel class, add a blank line after the
`@apply` statement and before the background property. In the .hero-scene class,
add a blank line after the `@apply` lg:scale-[1.1] statement and before position:
relative. These blank lines separate the at-rule from regular property
declarations as required by the linter.
- Around line 799-811: The stylelint rule `declaration-empty-line-before` is
failing because the `text-wrap: balance;` declarations in the `.font-h1`,
`.font-h2`, and `.font-h3` classes are not preceded by an empty line after the
`@apply` declarations. Add an empty line before each `text-wrap: balance;`
statement in all three font classes to satisfy the stylelint requirement and
pass the static analysis checks.
---
Nitpick comments:
In `@assets/css/custom.css`:
- Around line 262-268: The `.hero-scene-logo-img` class has a static
`will-change: transform` declaration that keeps the browser maintaining
compositor layers even when animations are idle, wasting memory. Remove the
`will-change: transform` property from the static `.hero-scene-logo-img` rule
and move it into a hover-activated state within a `prefers-reduced-motion:
no-preference` media query block, so the compositor layer promotion only occurs
when the animation is actually running. Apply the same refactoring pattern to
all approximately 9 hero elements mentioned (travelers, key, auth, anchor icons,
hub img, and others) that have static `will-change` declarations.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0fab1194-0b98-44ba-b876-8857bbedd600
⛔ Files ignored due to path filters (2)
static/img/logo-hub.pngis excluded by!**/*.pngstatic/img/logo-hub.svgis excluded by!**/*.svg
📒 Files selected for processing (7)
assets/css/custom.cssassets/css/main.cssi18n/de.yamli18n/en.yamllayouts/_default/baseof.htmllayouts/index.htmllayouts/partials/nav.html
| .hero-split-panels { | ||
| @apply container relative grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12; | ||
| align-items: stretch; | ||
| } | ||
|
|
||
| .hero-panel { | ||
| @apply relative flex flex-col items-center text-center p-10 md:p-12 rounded-sm shadow-sm overflow-hidden; | ||
| background: | ||
| linear-gradient(to bottom, transparent 60%, color-mix(in srgb, var(--accent, transparent) 4%, transparent)), | ||
| #fff; | ||
| } | ||
|
|
||
| .hero-panel-primary { --accent: var(--color-primary); } | ||
| .hero-panel-secondary { --accent: var(--color-tertiary2); } | ||
|
|
||
| .hero-panel-visual { | ||
| @apply flex items-center justify-center mt-6 mb-4 h-[180px]; | ||
| } | ||
|
|
||
| .hero-panel-content { | ||
| @apply flex flex-col items-center flex-1; | ||
| } | ||
|
|
||
| .hero-panel-content h2 { | ||
| @apply font-headline font-bold text-xl uppercase tracking-wide mb-1; | ||
| } | ||
|
|
||
|
|
||
| .hero-panel-content .hero-panel-description { | ||
| @apply flex-1 text-balance; | ||
| } | ||
|
|
||
| .hero-panel-content a.btn { | ||
| @apply mt-auto; | ||
| } | ||
|
|
||
| /* ───────────────────────────────────────────────────────────── | ||
| Shared hero scene system — both Cryp and Hub illustrations use | ||
| a fixed 320×180 canvas with absolutely positioned anchors so | ||
| the two visuals share dimensions, spacing, and easing. | ||
| ───────────────────────────────────────────────────────────── */ | ||
|
|
||
| .hero-scene { | ||
| @apply lg:scale-[1.1]; | ||
| position: relative; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Stylelint declaration-empty-line-before errors will fail lint.
Static analysis reports [error] at lines 98, 103-105, and 140: a plain declaration directly following an @apply at-rule needs a preceding empty line. Add a blank line before each.
🎨 Proposed fix
.hero-split-panels {
`@apply` container relative grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12;
+
align-items: stretch;
} .hero-panel {
`@apply` relative flex flex-col items-center text-center p-10 md:p-12 rounded-sm shadow-sm overflow-hidden;
+
background:
linear-gradient(to bottom, transparent 60%, color-mix(in srgb, var(--accent, transparent) 4%, transparent)),
`#fff`;
} .hero-scene {
`@apply` lg:scale-[1.1];
+
position: relative;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .hero-split-panels { | |
| @apply container relative grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12; | |
| align-items: stretch; | |
| } | |
| .hero-panel { | |
| @apply relative flex flex-col items-center text-center p-10 md:p-12 rounded-sm shadow-sm overflow-hidden; | |
| background: | |
| linear-gradient(to bottom, transparent 60%, color-mix(in srgb, var(--accent, transparent) 4%, transparent)), | |
| #fff; | |
| } | |
| .hero-panel-primary { --accent: var(--color-primary); } | |
| .hero-panel-secondary { --accent: var(--color-tertiary2); } | |
| .hero-panel-visual { | |
| @apply flex items-center justify-center mt-6 mb-4 h-[180px]; | |
| } | |
| .hero-panel-content { | |
| @apply flex flex-col items-center flex-1; | |
| } | |
| .hero-panel-content h2 { | |
| @apply font-headline font-bold text-xl uppercase tracking-wide mb-1; | |
| } | |
| .hero-panel-content .hero-panel-description { | |
| @apply flex-1 text-balance; | |
| } | |
| .hero-panel-content a.btn { | |
| @apply mt-auto; | |
| } | |
| /* ───────────────────────────────────────────────────────────── | |
| Shared hero scene system — both Cryp and Hub illustrations use | |
| a fixed 320×180 canvas with absolutely positioned anchors so | |
| the two visuals share dimensions, spacing, and easing. | |
| ───────────────────────────────────────────────────────────── */ | |
| .hero-scene { | |
| @apply lg:scale-[1.1]; | |
| position: relative; | |
| .hero-split-panels { | |
| `@apply` container relative grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12; | |
| align-items: stretch; | |
| } | |
| .hero-panel { | |
| `@apply` relative flex flex-col items-center text-center p-10 md:p-12 rounded-sm shadow-sm overflow-hidden; | |
| background: | |
| linear-gradient(to bottom, transparent 60%, color-mix(in srgb, var(--accent, transparent) 4%, transparent)), | |
| `#fff`; | |
| } | |
| .hero-panel-primary { --accent: var(--color-primary); } | |
| .hero-panel-secondary { --accent: var(--color-tertiary2); } | |
| .hero-panel-visual { | |
| `@apply` flex items-center justify-center mt-6 mb-4 h-[180px]; | |
| } | |
| .hero-panel-content { | |
| `@apply` flex flex-col items-center flex-1; | |
| } | |
| .hero-panel-content h2 { | |
| `@apply` font-headline font-bold text-xl uppercase tracking-wide mb-1; | |
| } | |
| .hero-panel-content .hero-panel-description { | |
| `@apply` flex-1 text-balance; | |
| } | |
| .hero-panel-content a.btn { | |
| `@apply` mt-auto; | |
| } | |
| /* ───────────────────────────────────────────────────────────── | |
| Shared hero scene system — both Cryp and Hub illustrations use | |
| a fixed 320×180 canvas with absolutely positioned anchors so | |
| the two visuals share dimensions, spacing, and easing. | |
| ───────────────────────────────────────────────────────────── */ | |
| .hero-scene { | |
| `@apply` lg:scale-[1.1]; | |
| position: relative; |
🧰 Tools
🪛 Stylelint (17.13.0)
[error] 98-98: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 103-105: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 140-140: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/custom.css` around lines 96 - 140, The stylelint
declaration-empty-line-before rule requires a blank line between `@apply` at-rules
and regular CSS declarations. In the .hero-split-panels class, add a blank line
after the `@apply` statement and before align-items: stretch. In the .hero-panel
class, add a blank line after the `@apply` statement and before the background
property. In the .hero-scene class, add a blank line after the `@apply`
lg:scale-[1.1] statement and before position: relative. These blank lines
separate the at-rule from regular property declarations as required by the
linter.
Source: Linters/SAST tools
| .font-h1 { | ||
| @apply font-headline font-medium text-3xl md:text-4xl leading-tight; | ||
| text-wrap: balance; | ||
| } | ||
|
|
||
| .font-h2 { | ||
| @apply font-headline font-medium text-xl md:text-2xl leading-snug; | ||
| text-wrap: balance; | ||
| } | ||
|
|
||
| .font-h3 { | ||
| @apply font-headline text-lg md:text-xl leading-relaxed; | ||
| text-wrap: balance; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Stylelint declaration-empty-line-before errors will fail lint.
Static analysis reports [error] at lines 801, 806, and 811: each text-wrap: balance; follows an @apply rule and needs a preceding empty line.
🎨 Proposed fix
.font-h1 {
`@apply` font-headline font-medium text-3xl md:text-4xl leading-tight;
+
text-wrap: balance;
}
.font-h2 {
`@apply` font-headline font-medium text-xl md:text-2xl leading-snug;
+
text-wrap: balance;
}
.font-h3 {
`@apply` font-headline text-lg md:text-xl leading-relaxed;
+
text-wrap: balance;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .font-h1 { | |
| @apply font-headline font-medium text-3xl md:text-4xl leading-tight; | |
| text-wrap: balance; | |
| } | |
| .font-h2 { | |
| @apply font-headline font-medium text-xl md:text-2xl leading-snug; | |
| text-wrap: balance; | |
| } | |
| .font-h3 { | |
| @apply font-headline text-lg md:text-xl leading-relaxed; | |
| text-wrap: balance; | |
| .font-h1 { | |
| `@apply` font-headline font-medium text-3xl md:text-4xl leading-tight; | |
| text-wrap: balance; | |
| } | |
| .font-h2 { | |
| `@apply` font-headline font-medium text-xl md:text-2xl leading-snug; | |
| text-wrap: balance; | |
| } | |
| .font-h3 { | |
| `@apply` font-headline text-lg md:text-xl leading-relaxed; | |
| text-wrap: balance; | |
| } |
🧰 Tools
🪛 Stylelint (17.13.0)
[error] 801-801: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 806-806: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 811-811: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@assets/css/custom.css` around lines 799 - 811, The stylelint rule
`declaration-empty-line-before` is failing because the `text-wrap: balance;`
declarations in the `.font-h1`, `.font-h2`, and `.font-h3` classes are not
preceded by an empty line after the `@apply` declarations. Add an empty line
before each `text-wrap: balance;` statement in all three font classes to satisfy
the stylelint requirement and pass the static analysis checks.
Source: Linters/SAST tools
1 participant
Reworks the homepage hero into a calmer, two-edition layout (Cryptomator + Hub).