feat(multiplatform): refactor Hero icons structure and update image sources

- Migrate Hero icons from inline SVGs to static assets under `/public/images/multiplatform/hero`
- Update `HeroBanner` component to reference new image paths
- Refactor `hero.module.css` to use new CSS classes for platform-specific styles

Author: zoobestik

blocks/multiplatform/hero/hero.module.css

@@ -29,14 +29,12 @@
     align-items: center;
 
     padding-block: 72px 96px;
-
-    --hero-logo-image: '';
 }
 
 .hero::before {
     display: block;
     content: '';
-    background: var(--hero-logo-image) no-repeat center;
+    background: url('/images/multiplatform/hero/logo.svg') no-repeat center;
 
     height: 72px;
     width: 72px;
@@ -103,6 +101,26 @@
     @media (--ktl-ms-in) {
         padding-inline: 14px;
     }
+
+    &.android {
+        --hero-item-src: url('/images/multiplatform/hero/android.svg');
+    }
+
+    &.ios {
+        --hero-item-src: url('/images/multiplatform/hero/ios.svg');
+    }
+
+    &.web {
+        --hero-item-src: url('/images/multiplatform/hero/web.svg');
+    }
+
+    &.desktop {
+        --hero-item-src: url('/images/multiplatform/hero/desktop.svg');
+    }
+
+    &.server {
+        --hero-item-src: url('/images/multiplatform/hero/server.svg');
+    }
 }
 
 .platform::before {

blocks/multiplatform/hero/index.tsx

@@ -5,46 +5,32 @@ import { Button } from '@rescui/button';
 
 import { useML } from '@jetbrains/kotlin-web-site-ui/out/components/breakpoints-v2';
 
-import android from './icons/android.svg';
-import ios from './icons/ios.svg';
-import web from './icons/web.svg';
-import desktop from './icons/desktop.svg';
-import server from './icons/server.svg';
-
-import logo from './logo.svg';
-
 import styles from './hero.module.css';
 
-const platforms = [
-    { title: 'Android', icon: android },
-    { title: 'iOS', icon: ios },
-    { title: 'Web', icon: web },
-    { title: 'Desktop', icon: desktop },
-    { title: 'Server', icon: server }
-] as const;
+const platforms = ['Android', 'iOS', 'Web', 'Desktop', 'Server'] as const;
 
 export function HeroBanner({ url }: { url: string }) {
     const isML = useML();
     const textCn = useTextStyles();
 
     return (
         <div className={styles.wrapper}>
-            <div className={cn(styles.hero, 'ktl-layout', 'ktl-layout--center')}
-                 style={{ '--hero-logo-image': `url(${logo.src})` }}>
+            <div className={cn(styles.hero, 'ktl-layout', 'ktl-layout--center')}>
                 <h1 className={cn(styles.title, textCn('rs-hero'))}>Kotlin Multiplatform</h1>
                 <p className={cn(styles.subtitle, textCn('rs-subtitle-1'))}>
                     Go&nbsp;cross&#8209;platform without compromising performance, UX, or&nbsp;code&nbsp;quality
                 </p>
                 <ul className={styles.platforms}>
-                    {platforms.map(({ title, icon }) => (
-                        <li
-                            key={title.toLowerCase()}
-                            className={cn(styles.platform, textCn(isML ? 'rs-h5' : 'rs-h4'))}
-                            style={{ '--hero-item-src': `url(${icon.src})` }}
-                        >
-                            {title}
-                        </li>
-                    ))}
+                    {platforms.map(title => {
+                        const key = title.toLowerCase();
+
+                        return (
+                            <li key={key}
+                                className={cn(styles.platform, styles[`${key}`], textCn(isML ? 'rs-h5' : 'rs-h4'))}>
+                                {title}
+                            </li>
+                        );
+                    })}
                 </ul>
                 <Button className={cn(styles.button)} mode={'rock'} href={url} size={isML ? 'm' : 'l'}>Get
                     Started</Button>