KTL-1238 fix: updates after design review

Author: berezinant

src/components/ContactUs/contactUs.module.css

@@ -3,3 +3,11 @@
     display: none;
   }
 }
+
+.mainTitle {
+  @media (--ktl-tm) {
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 28px;
+  }
+}

src/components/ContactUs/index.tsx

@@ -1,7 +1,6 @@
 import { CtaBlock } from '@jetbrains/kotlin-web-site-ui/out/components/cta-block-v2';
-
+import cn from 'classnames';
 import { Link } from '../Link';
-
 import * as styles from './contactUs.module.css';
 
 const contactEmail = '[email protected]';
@@ -15,7 +14,7 @@ export function ContactUs() {
           Contact us!
         </>
       }
-      classMainTitle="ktf-h2 ktf-h3--ts"
+      classMainTitle={cn('ktf-h2', 'ktf-h4--tm', 'ktf-h3--ts', styles.mainTitle)}
       mainTitle={
         <Link href={`mailto:${contactEmail}`} mode="clear">
           {contactEmail}

src/components/IntroBanner/introBanner.module.css

@@ -59,6 +59,7 @@
   display: block;
   font-size: 0;
   line-height: 0;
+
   &,
   &:hover {
     text-decoration: none;
@@ -70,7 +71,12 @@
     margin-right: -70px;
   }
 
+  .image {
+    margin-top: 72px;
+  }
+
   .companies {
+    margin-top: -12px;
     margin-left: calc(var(--ktl-box-section-l) * -1);
   }
 
@@ -82,13 +88,14 @@
 @media (--ktl-tl) {
   .intro {
     display: block;
+    padding-bottom: var(--ktl-box-page-m);
     margin-top: var(--ktl-box-page-m);
-    margin-bottom: var(--ktl-box-page-m);
+    margin-bottom: 0;
   }
 
   .title {
-    height: 242px;
-    margin-top: 12px;
+    height: 280px;
+    margin-top: 8px;
     margin-right: 0;
   }
 
@@ -109,7 +116,7 @@
 
 @media (--ktl-tm) {
   .intro {
-    margin-bottom: var(--ktl-box-section-l);
+    padding-bottom: var(--ktl-box-section-l);
   }
 
   .title {

src/components/LatestNews/index.tsx

@@ -8,7 +8,6 @@ import { postContentPreview, DEFAULT_EXCERPT_SIZE } from '../PostContent';
 import * as styles from './latestNews.module.css';
 
 export function LatestNews() {
-  const textCn = useTextStyles();
   const isTm = useTM();
   const {
     allMdx: { nodes: posts },
@@ -49,7 +48,7 @@ export function LatestNews() {
 
   return (
     <>
-      <h2 className={cn(styles.title, textCn('rs-h2'))}>Latest news</h2>
+      <h2 className={cn(styles.title, 'ktf-h2')}>Latest news</h2>
       <div className={styles.news}>
         {posts.map((post, i: number) => (
           <NewsPreview

src/components/LatestNews/latestNews.module.css

@@ -2,6 +2,16 @@
   display: block;
 }
 
+.title {
+  margin-top: var(--ktl-box-section-l);
+  margin-bottom: var(--ktl-box-section-s);
+}
+
+.item {
+  background-color: var(--kt-grey);
+  border-radius: 16px;
+}
+
 @media (--ktl-tm-min) {
   .news {
     display: grid;

src/components/ProductHighlight/index.tsx

@@ -14,7 +14,7 @@ export const ProductHighlight: FC<ProductHighlightProps> = ({ title, children })
   return (
     <KtlLayout spacing addExtraSpace>
       <div className={styles.productHighlight}>
-        <h2 className={cn(styles.header, 'ktf-h1--ds ktf-h2--ds-min ktf-h2--tl')}>{title}</h2>
+        <h2 className={cn(styles.header, 'ktf-h2')}>{title}</h2>
         <ul className={cn(styles.items)}>{children}</ul>
       </div>
     </KtlLayout>

src/components/VideoGallery/index.tsx

@@ -68,7 +68,7 @@ export function VideoGallery({ videos, title }: VideoGalleryProps) {
   return (
     <div className={styles.container}>
       <KtlLayout>
-        <h2 className={cn(styles.header, 'ktf-h1--ds ktf-h2--ds-min ktf-h2--tl')}>{title}</h2>
+        <h2 className={cn(styles.header, 'ktf-h2')}>{title}</h2>
       </KtlLayout>
 
       <div className={styles.wrapper}>