feat(WEB-250): overview hero final ui

components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css

@@ -2,7 +2,7 @@
   display: none;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .contactContainer {
     display: flex;
     flex-direction: column;

components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx

@@ -1,6 +1,6 @@
 import { _ } from "@/lib/translation"
 
-import Title from "@/components/Title"
+import Title from "@/components/TempDesignSystem/Title"
 
 import ContactRow from "./ContactRow"
 

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -3,7 +3,7 @@ import { _ } from "@/lib/translation"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/Title"
+import Title from "@/components/TempDesignSystem/Title"
 
 import Contact from "./Contact"
 
@@ -15,7 +15,7 @@ export default function JoinLoyaltyContact({ block }: JoinLoyaltyContactProps) {
   return (
     <div className={styles.container}>
       <div className={styles.wrapper}>
-        {block.title && <Title level="h3">{block.title}</Title>}
+        <Title level="h3">{block.title}</Title>
         <Image
           alt="Scandic Friends"
           className={styles.image}

components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css

@@ -35,7 +35,7 @@
   display: none;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .container {
     border-radius: 32px 4px 4px 32px;
   }

components/Loyalty/Sidebar/sidebar.module.css

@@ -1,4 +1,4 @@
-@media screen and (max-width: 950px) {
+@media screen and (max-width: 1366px) {
   .content {
     padding: 0 1.6rem;
   }