ok

package.json

@@ -2,7 +2,7 @@
   "name": "groovebrew-mockup",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://dev.kedaimaster.com",
+  "homepage": "https://test.kedaimaster.com",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",

src/components/MusicPlayer.js

@@ -108,7 +108,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
           //   setSubtitleColor("white");
           //   setSubtitleBG("black");
           // }
-          const proxiedUrl = `https://dev.api.kedaimaster.com/image?url=${encodeURIComponent(modifyUrl(imageUrl))}`;  // Use your proxy to fetch the image
+          const proxiedUrl = `https://test.api.kedaimaster.com/image?url=${encodeURIComponent(modifyUrl(imageUrl))}`;  // Use your proxy to fetch the image
 
           setBackgroundImage(proxiedUrl);
         } catch (error) {

src/components/Watermark.js

@@ -1,15 +1,18 @@
 import React from 'react';
 import StepByStep from './StepByStep';
+import styles from './Watermark.module.css';
 
-const Watermark = ({dontShowName}) => {
+const Watermark = ({ dontShowName }) => {
   return (
-    <div style={{ zIndex: 5, marginTop: '30px', backgroundColor: 'rgb(222 237 100)', fontWeight: 700, fontSize: '15px', lineHeight: '1rem', letterSpacing: '-1px', color: 'rgb(37, 79, 26)', padding: '10px' }}>
-      {!dontShowName && <div>KEDAIMASTER.COM</div>}
-      <div style={{ display: 'flex' }}>
-        <div style={{ width: '45vw', marginTop: '10px', fontSize: '5.5vw', lineHeight: '33px' }}>Gak perlu rasain antri panjang yang bikin bosen lagi. Tinggal scan QR yang ada di meja, eh tiba tiba kamu udah kenyang wkwkkw</div>
+    <div className={styles.watermark}>
+      {!dontShowName && <div className={styles.watermarkName}>KEDAIMASTER.COM</div>}
+      <div className={styles.watermarkContent}>
+        <div className={styles.watermarkText}>
+          Gak perlu rasain antri panjang yang bikin bosen lagi. Tinggal scan QR yang ada di meja, eh tiba tiba kamu udah kenyang wkwkkw
+        </div>
         <StepByStep />
       </div>
-      <div style={{ marginTop: '8px' }}>© 2025 KEDIRITECHNOPARK.COM</div>
+      <div className={styles.watermarkFooter}>© 2025 KEDIRITECHNOPARK.COM</div>
     </div>
   );
 };

src/components/Watermark.module.css

@@ -0,0 +1,55 @@
+.watermark {
+    z-index: 5;
+    margin-top: 30px;
+    background-color: rgb(222, 237, 100);
+    font-weight: 700;
+    font-size: 15px;
+    line-height: 1rem;
+    letter-spacing: -1px;
+    color: rgb(37, 79, 26);
+    padding: 10px;
+  }
+  
+  .watermarkName {
+    display: block;
+  }
+  
+  .watermarkContent {
+    display: flex;
+  }
+  
+  .watermarkText {
+    width: 45vw;
+    margin-top: 10px;
+    font-size: 5.5vw;
+    line-height: 33px;
+  }
+  
+/* Media query for desktop */
+@media (min-width: 768px) { /* Adjust the min-width as needed */
+    .watermark {
+        z-index: 5;
+        margin-top: 30px;
+        background-color: rgb(222, 237, 100);
+        font-weight: 700;
+        font-size: 15px;
+        line-height: 1rem;
+        letter-spacing: -1px;
+        color: rgb(37, 79, 26);
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      
+    .watermarkText {
+        width: 25vw;
+        margin-top: 10px;
+        font-size: 3vw;
+        line-height: 34px;
+    }
+  }
+
+  .watermarkFooter {
+    margin-top: 8px;
+  }

src/config.js

@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = 'https://dev.api.kedaimaster.com';
+const API_BASE_URL = 'https://test.api.kedaimaster.com';
 
 export default API_BASE_URL;

src/pages/CreateCoupon.js

@@ -46,7 +46,7 @@ const CreateCouponPage = () => {
       let encodedCouponCode = encodeURIComponent(encryptedCouponCode);
       
       // Construct the URL with the encoded coupon code as a query parameter
-      const urlWithCoupon = `https://dev.coupon.kedaimaster.com/coupon?c=${encodedCouponCode}`;
+      const urlWithCoupon = `https://test.coupon.kedaimaster.com/coupon?c=${encodedCouponCode}`;
   
       // Optionally, set the URL to use with the coupon
       setCouponUrl(urlWithCoupon);

src/pages/LinktreePage.module.css

@@ -1,9 +1,9 @@
 /* General container */
 .centeredLinktreePage {
   display: flex;
-  flex-direction: column;
+  flex-direction: column; /* Default to column for mobile */
   justify-content: center;
-  background-color: rgb(222 237 100);
+  background-color: rgb(222, 237, 100);
 }
 
 .dashboardLine {
@@ -22,6 +22,32 @@
   padding-top: 100px;
   margin-bottom: 30px;
 }
+/* Media query for desktop */
+@media (min-width: 768px) { /* Adjust the min-width as needed */
+  .centeredLinktreePage {
+    flex-direction: row; /* Change to row for desktop */
+    padding: 20px;
+  }
+
+  .dashboardContainer {
+    background-color: inherit;
+    z-index: 6;
+    padding: 0 1rem;
+    padding-top: 100px;
+    margin-bottom: 30px;
+    width: 40vw;
+  }
+
+  .dashboardLine {
+    position: fixed;
+    left: 0px;
+    height: 100vh;
+    width: 30px;
+    border-right: 1px solid rgba(0, 0, 0, 0);
+    z-index: 5;
+  }
+}
+
 
 /* Main Heading */
 .mainHeading {