KTL-3868: Move KMP landing page - hero block #5193
Conversation
# Conflicts: # pages/multiplatform/index.tsx
zoobestik
requested review from
berezinant,
krutilov and
nikpachoo
as code owners
- Update `@jetbrains/kotlin-web-site-ui` to version 4.13.0-alpha.3 - Modify a Hero section to leverage new breakpoint hooks - Adjust responsive styles for improved layout behavior
zoobestik
force-pushed
the
ktl-3875-kmp-landing-page
branch
from
bae21ac to
6bb6927
Compare
… responsiveness - Upgrade `@jetbrains/kotlin-web-site-ui` to `4.13.0-alpha.4` - Update `@rescui/colors` dependency to `0.1.11` - Refactor Hero section layout with updated breakpoints and styling adjustments
zoobestik
force-pushed
the
ktl-3875-kmp-landing-page
branch
from
6bb6927 to
bae21ac
Compare
|
|
||
| padding-block: 72px 96px; | ||
|
|
||
| --hero-logo-image: ''; |
There was a problem hiding this comment.
I think it's better when icons and other resources in the same folder with component, but i can't find a normal way for nextjs. Ask for help
There was a problem hiding this comment.
Unfortunately, the images should be in public directory, this seems to be a kind of contract in Next.JS: https://nextjs.org/docs/app/api-reference/file-conventions/public-folder.
Regarding the inlining of the SVGs, I'd prefer to see them as paths to files instead of base64 (to reduce size of the page via caching). As I see, it's something related to webpack configuration: maybe it's downside of the optimizedImages task, maybe we just need to configure "asset/resource" configuration for SVG files. Not sure we can fix it right away, without breaking all SVG imports.
@krutilov, ,maybe you know what we can do?
| padding-block: 24px; | ||
|
|
||
| @media (--ktl-ts-in) { | ||
| /* @mixin rs-hero-sm-*; */ |
There was a problem hiding this comment.
I tried to add mixins.p.css from rescui, but I see there is no way to get sm value if you are higher than 640px. Ask for help.
There was a problem hiding this comment.
Do you want to get font-size and line height, right?
Have you tried @mixin rs-typography-hero-sm?
| return ( | ||
| <div className={styles.wrapper}> | ||
| <div className={cn(styles.hero, 'ktl-layout', 'ktl-layout--center')} | ||
| style={{ '--hero-logo-image': `url(${logo.src})` }}> |
There was a problem hiding this comment.
I didn't get why you prefer using a background image instead of the img tag. Not a major thing at all, just seems more complicated then a image tag.
There was a problem hiding this comment.
there is a ts error also, something like could fix it
declare module 'react' {
interface CSSProperties {
[key: `--${string}`]: string | number;
}
}There was a problem hiding this comment.
I didn't get why you prefer using a background image instead of the img tag. Not a major thing at all, just seems more complicated then a image tag.
If your question is about the custom property - it's simply a technique to keep images colocated with the component.
If this is a broader question about images in HTML vs CSS, here's my reasoning:
Content vs Decorative graphics
This practice stems from accessibility techniques. The core idea is distinguishing between two types of images: content images and decorative graphics.
-
Content images are those essential to the narrative - screenshots, photos, charts, and similar. They're crucial to storytelling and require attributes like
altfor cases when the image fails to load or when users rely on screen readers. They should be visible when you copy an article to clipboard. Ideally, search engines should index only these images and display them in image search results. -
Decorative graphics are purely visual - backgrounds, parallax effects, animations. They're contextually disconnected from the article's content and serve as visual "noise." They don't need
altattributes, shouldn't be copied, crawled, or indexed. Plus, they unnecessarily inflate customer's context window for LLMs 🙃To make an
<img>inaccessible for decorative elements, you'd need to add numerous attributes. It's far simpler to use backgrounds and pseudo-elements. This approach ensures your HTML remains clean and your page cache consistency is maintained as long as you don't modify the article content. This also doesn't bloat your HTML size anyway.
My own baseline rule: if an image must remain accessible without CSS - use the <img> tag. If not - any CSS technique works (including sprites, which you can't implement with <img> tags). Possibly, my understanding may be outdated. I'd welcome an alternative perspective if mine isn't convincing.
| }, | ||
| { | ||
| title: 'Docs', | ||
| url: 'https://www.jetbrains.com/help/kotlin-multiplatform-dev/get-started.html' |
There was a problem hiding this comment.
:)
Let's use the link without redirect: https://kotlinlang.org/docs/multiplatform/get-started.html
There was a problem hiding this comment.
desktop and server seems to be replaced with each other according to the figma
|
|
||
| import styles from './hero.module.css'; | ||
|
|
||
| const platforms = [ |
There was a problem hiding this comment.
JIC: We have some platform types declared in the case studies module here. Probably it's worth extracting it to some common place (or maybe not)
Anyway, there is a difference in names for platforms on different pages (frontend + backend on case studies, web + server on this kmp landing) and there is still a discussion what options are better.
Not sure if there are any certain action points here, so just to share some context
This pull request introduces a new, visually enhanced multiplatform hero banner for the Kotlin website landing page, replacing the previous static layout.
Hero banner implementation:
HeroBannerReact component inblocks/multiplatform/hero/index.tsxthat displays the Kotlin Multiplatform hero section, including a title, subtitle, platform icons, and a "Get Started" button. The component uses imported SVG icons and applies custom styles.Landing page integration:
pages/multiplatform/index.tsxto import and use the newHeroBannercomponent, wrapped in a dark theme provider, and replaced the previous static layout. Also updated constants for menu items and URLs.ThemeProviderand updated the "Get started" button to link directly to the multiplatform getting started documentation.