feat: add card grid component

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -1,8 +1,11 @@
-import Title from "@/components/Title"
-import Contact from "./Contact"
+import { _ } from "@/lib/translation"
+
+import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-import Image from "@/components/Image"
+import Title from "@/components/Title"
+
+import Contact from "./Contact"
 
 import styles from "./joinLoyalty.module.css"
 
@@ -26,12 +29,12 @@ export default function JoinLoyaltyContact({
         />
         {block.preamble && <p className={styles.preamble}>{block.preamble}</p>}
         <Button intent="primary">
-          <span>{block.login_button_text}</span>
+          <span>{_("Join Scandic Friends")}</span>
         </Button>
         <div className={styles.linkContainer}>
           <Link href="/login" className={styles.logoutLink}>
-            Already a friend? <br />
-            Click here to log in
+            {_("Already a friend?")} <br />
+            {_("Click here to log in")}
           </Link>
         </div>
       </div>

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

@@ -2,7 +2,6 @@
   display: grid;
   font-weight: 600;
   background-color: var(--Base-Background-Elevated);
-  border-radius: 32px 4px 4px 32px;
 }
 
 .wrapper {
@@ -10,7 +9,7 @@
   align-items: center;
   flex-direction: column;
   gap: 2rem;
-  padding: 4rem 2rem;
+  padding: 6rem 2rem;
 }
 
 .preamble {
@@ -37,6 +36,10 @@
 }
 
 @media screen and (min-width: 950px) {
+  .container {
+    border-radius: 32px 4px 4px 32px;
+  }
+
   .wrapper {
     gap: 3rem;
   }