From af57efad1bc55fe0a025b8040cc90d0658d2446a Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Thu, 8 Aug 2024 19:11:19 +0300
Subject: [PATCH] [Landing page]: fixed Solution header

---
 app/src/landing/PatternBlock.module.scss | 54 ++++++++++++++++++++++--
 app/src/landing/PatternBlock.tsx         |  1 +
 2 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/app/src/landing/PatternBlock.module.scss b/app/src/landing/PatternBlock.module.scss
index e45036473e..c5ed032b07 100644
--- a/app/src/landing/PatternBlock.module.scss
+++ b/app/src/landing/PatternBlock.module.scss
@@ -61,6 +61,10 @@
                 font-family: var(--font-museo-sans), serif;
             }
 
+            .brake {
+                display: none;
+            }
+
             &-end {
                 color: var(--uui-primary-50);
 
@@ -80,10 +84,7 @@
                     font-size: 30px;
                     line-height: 36px;
                     font-family: var(--font-museo-sans), serif;
-                    color: transparent;
-                    background: var(--uui-header-gradient);
-                    -webkit-background-clip: text;
-                    background-clip: text;
+                    color: var(--uui-primary-50);
                 }
             }
         }
@@ -232,6 +233,51 @@
     }
 
     @media (max-width: 768px) {
+        .header-wrapper {
+            .header {
+                text-align: center;
+                font-weight: 400;
+                font-size: 30px;
+                line-height: 36px;
+
+                &-start-electric {
+                    font-size: 30px;
+                    line-height: 36px;
+                }
+
+                &-start-promo {
+                    font-size: 30px;
+                    line-height: 36px;
+                }
+
+                .brake {
+                    display: inline;
+                }
+
+                &-end {
+                    color: var(--uui-primary-50);
+
+                    &-electric {
+                        font-weight: 600;
+                        font-size: 30px;
+                        line-height: 36px;
+                        font-family: var(--font-museo-sans), serif;
+                        color: transparent;
+                        background: var(--uui-header-gradient);
+                        -webkit-background-clip: text;
+                        background-clip: text;
+                    }
+
+                    &-promo {
+                        font-weight: 600;
+                        font-size: 30px;
+                        line-height: 36px;
+                    }
+                }
+            }
+        }
+
+
         .container {
             .start-container {
                 width: 100%;
diff --git a/app/src/landing/PatternBlock.tsx b/app/src/landing/PatternBlock.tsx
index 6284be9210..a1183c65ee 100644
--- a/app/src/landing/PatternBlock.tsx
+++ b/app/src/landing/PatternBlock.tsx
@@ -124,6 +124,7 @@ export function PatternBlock() {
             <FlexRow justifyContent="center" cx={ css.headerWrapper }>
                 <Text cx={ css.header }>
                     <span className={ cx(css.headerStart, css[getHeaderClassName('headerStart')]) }>Find solution for </span>
+                    <span className={ css.brake }><br /></span>
                     <span className={ cx(css.headerEnd, css[getHeaderClassName('headerEnd')]) }>your project</span>
                 </Text>
             </FlexRow>