@chrryai/chrry 1.1.78

package/About.module.scss

@@ -0,0 +1,112 @@
+@use "./breakpoints.scss";
+@use "./toRem.scss";
+
+.ossLink,
+.oss {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.ossWrapper {
+  margin-bottom: toRem.toRem(20);
+  display: flex;
+  flex-direction: column;
+}
+
+.ossContainer {
+  display: flex;
+  gap: 15px;
+  flex-direction: column;
+
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.apps {
+  display: flex;
+  flex-wrap: wrap;
+  gap: toRem.toRem(15);
+  margin: toRem.toRem(15) 0;
+}
+
+.app {
+  flex: 1;
+  min-width: toRem.toRem(200);
+  padding: toRem.toRem(15);
+  border: 1px dashed var(--shade-2);
+  border-radius: toRem.toRem(20);
+
+  transition: border-color 0.3s ease;
+
+  &:hover {
+    border: 1px solid var(--accent-1);
+    background-color: var(--shade-1);
+  }
+
+  h4 {
+    margin: 0;
+    font-size: toRem.toRem(15);
+    margin-bottom: toRem.toRem(8);
+    display: flex;
+    align-items: center;
+    gap: toRem.toRem(5);
+  }
+}
+
+.signInButton {
+  margin-left: auto;
+  font-size: 13px;
+}
+
+.appDescription {
+  font-size: toRem.toRem(13);
+  color: var(--shade-6);
+}
+
+.video {
+  width: 100%;
+  max-width: 100%;
+  margin-top: toRem.toRem(10);
+  border-radius: toRem.toRem(10);
+}
+
+.copyright {
+  margin-bottom: toRem.toRem(20);
+}
+
+.about {
+  section {
+    font-size: toRem.toRem(15);
+    h2,
+    h3 {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+  }
+}
+
+.oss {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 20px;
+  > li {
+    > a {
+      svg {
+        color: var(--foreground);
+      }
+    }
+  }
+}
+
+.lastUpdated {
+  font-size: toRem.toRem(13);
+  color: var(--shade-6);
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  margin-top: toRem.toRem(20);
+}

package/Account.module.scss

@@ -0,0 +1,159 @@
+@use "./toRem.scss";
+
+.accountButton {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  padding: toRem.toRem(5) toRem.toRem(10);
+  background-color: var(--background);
+  border: toRem.toRem(1) solid var(--shade-2);
+  box-shadow: none;
+  color: var(--foreground);
+  svg {
+    stroke: var(--accent-6);
+  }
+  &:hover,
+  &:disabled {
+    background-color: var(--background);
+
+    svg {
+      stroke: var(--accent-5);
+    }
+
+    color: var(--shade-6);
+  }
+}
+
+.userNameContainer {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  margin: toRem.toRem(10) 0 toRem.toRem(5) 0;
+
+  input {
+    flex: 1;
+  }
+}
+
+.email {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(10);
+}
+.deleteAccountButton {
+  margin-left: auto;
+}
+
+.userImageContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(10);
+}
+
+.userImageWrapper {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(10);
+  position: relative;
+  cursor: pointer;
+}
+
+.userImage {
+  border-radius: 50%;
+}
+
+.editImageButton {
+  padding: toRem.toRem(3) !important;
+  position: absolute;
+  bottom: toRem.toRem(-4);
+  right: toRem.toRem(-5);
+}
+
+.deleteAccount {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.accountContainer {
+  display: flex;
+  flex-direction: column;
+  gap: toRem.toRem(10);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: toRem.toRem(15);
+  margin: 0;
+  flex: 1;
+}
+
+.title {
+  font-size: toRem.toRem(22);
+  flex: 1;
+  line-height: 1.2;
+}
+
+.close {
+  margin-left: auto;
+}
+
+.accounts {
+  margin-top: toRem.toRem(5);
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.linkAccount,
+.accountLinked {
+  margin-bottom: toRem.toRem(10);
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  justify-content: center;
+}
+
+.linkAccount {
+  margin-left: auto;
+}
+.cookieConsent {
+  max-width: toRem.toRem(400);
+  padding: 0;
+  border: none;
+  margin-bottom: toRem.toRem(10);
+}
+.accountLinked {
+  justify-content: flex-start;
+}
+
+.logoutButton {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: toRem.toRem(5);
+  margin-left: auto;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  align-self: flex-end;
+  gap: toRem.toRem(15);
+  margin-top: toRem.toRem(5);
+  font-size: toRem.toRem(14);
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(toRem.toRem(20)); /* Start slightly below */
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0); /* End at original position */
+  }
+}

package/AddToHomeScreen.module.scss

@@ -0,0 +1,126 @@
+@use "./breakpoints.scss";
+@use "./utils.scss";
+
+.addToHomeScreen {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  top: 0;
+  left: 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1001;
+  position: fixed;
+  background: var(--overlay);
+
+  .main {
+    margin: 0 auto;
+    width: auto;
+    padding: 0 10px;
+    z-index: 3;
+    position: relative;
+    flex: 1;
+    flex-direction: column;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    @media (min-width: breakpoints.$breakpoint-mobile) {
+      max-width: breakpoints.$breakpoint-mobile;
+      width: inherit;
+    }
+
+    .inner {
+      animation: slideUp 0.4s ease forwards;
+      background-color: var(--background);
+      padding: 20px;
+      border-radius: 20px;
+      border: 1px solid var(--shade-2);
+      position: relative;
+      min-width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      box-shadow: var(--shadow);
+
+      @media (min-width: breakpoints.$breakpoint-mobile) {
+        flex-direction: row;
+        gap: 20px;
+      }
+
+      @media (min-width: breakpoints.$breakpoint-mobile) {
+        min-width: 320px;
+      }
+
+      .close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+      }
+
+      .logoContainer {
+        display: inline-flex;
+        border-radius: 10px;
+        padding: 10px;
+        border: 1px solid var(--shade-2);
+        background-color: var(--background);
+        height: fit-content;
+        width: fit-content;
+      }
+
+      .content {
+        .icon {
+          width: 24px;
+          height: 24px;
+        }
+        > p {
+          margin: 0 0 10px 0;
+          display: flex;
+          gap: 10px;
+          align-items: center;
+        }
+        > div {
+          margin: 0 0 10px 0;
+        }
+        .addHomeScreen,
+        .addHomeScreenAndroid,
+        .share {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+          border: 1px solid var(--shade-2);
+          background-color: var(--background);
+          margin-top: 10px;
+          border-radius: 10px;
+          width: fit-content;
+          padding: 5px 8px;
+        }
+
+        .addHomeScreenAndroid {
+          margin-top: 0;
+        }
+
+        .selectAddToHomeScreen {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+        }
+        .quickAccess {
+          font-size: 14px;
+        }
+        .scrollDown {
+          font-weight: bold;
+        }
+      }
+
+      @include utils.respect-reduced-motion;
+    }
+  }
+
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+    margin: 0 0 10px 0;
+  }
+}

package/Affiliate.module.scss

@@ -0,0 +1,245 @@
+@use "./toRem.scss";
+@use "./breakpoints.scss";
+@use "./utils.scss";
+
+.affiliate {
+  width: 100%;
+  max-width: breakpoints.$breakpoint-tablet;
+  margin: 0 auto;
+  padding: toRem.toRem(5);
+  margin-bottom: toRem.toRem(20);
+
+  .loading {
+    text-align: center;
+    margin-top: toRem.toRem(50);
+  }
+
+  // Marketing Page Styles
+  .marketing {
+    .hero {
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: toRem.toRem(4);
+
+      h1 {
+        margin: toRem.toRem(0);
+        color: #f87171;
+      }
+
+      .subtitle {
+        font-size: toRem.toRem(16);
+        color: var(--text-secondary);
+      }
+    }
+
+    .benefits {
+      margin: toRem.toRem(20) 0 toRem.toRem(10) 0;
+      h2 {
+        text-align: center;
+        margin: 0 0 toRem.toRem(30) 0;
+      }
+
+      .benefitGrid {
+        display: flex;
+        gap: toRem.toRem(10);
+        flex-wrap: wrap;
+        font-size: toRem.toRem(14);
+
+        .benefit {
+          flex: 1;
+          text-align: center;
+          border-radius: toRem.toRem(20);
+          border: 1px dashed var(--shade-2);
+          background: var(--shade-1);
+          transition: transform 0.2s;
+          padding: toRem.toRem(15);
+          min-width: toRem.toRem(150);
+          width: 50%;
+
+          @media (max-width: breakpoints.$breakpoint-tablet) {
+            width: 25%;
+          }
+
+          &:hover {
+            @media (min: breakpoints.$breakpoint-mobile) {
+              transform: translateY(-2px);
+            }
+            border-style: solid;
+          }
+
+          svg {
+            color: var(--primary);
+            margin-bottom: 1rem;
+          }
+
+          h3 {
+            margin: toRem.toRem(10) 0;
+          }
+
+          p {
+            color: var(--text-secondary);
+          }
+        }
+      }
+    }
+
+    .earnings {
+      margin-bottom: toRem.toRem(20);
+
+      h2 {
+        text-align: center;
+        margin: toRem.toRem(25) 0;
+        font-size: toRem.toRem(28);
+      }
+
+      .earningsGrid {
+        display: flex;
+        gap: toRem.toRem(15);
+        flex-wrap: wrap;
+        margin-bottom: toRem.toRem(0);
+        align-items: center;
+        justify-content: center;
+
+        font-size: toRem.toRem(14);
+        .earningCard {
+          text-align: center;
+          padding: toRem.toRem(20);
+          border-radius: toRem.toRem(20);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          transition: transform 0.2s;
+          background-color: var(--shade-1);
+          max-width: 47%;
+
+          &.plus {
+            border: toRem.toRem(2) solid #f87171;
+            .commission {
+              strong {
+                color: #f87171;
+              }
+            }
+          }
+
+          &.pro {
+            border: toRem.toRem(2) solid #f5a623;
+
+            .commission {
+              strong {
+                color: #f5a623;
+              }
+            }
+          }
+
+          &:hover {
+            @media (min: breakpoints.$breakpoint-mobile) {
+              transform: translateY(-2px);
+            }
+          }
+
+          h3 {
+            margin: toRem.toRem(10) 0;
+            font-size: toRem.toRem(22);
+          }
+
+          .price {
+          }
+
+          .detail {
+            opacity: 0.9;
+            font-size: 0.9rem;
+          }
+        }
+      }
+
+      .example {
+        text-align: center;
+        padding: toRem.toRem(10);
+        margin-top: toRem.toRem(10);
+        border-radius: 12px;
+
+        strong {
+          color: var(--primary);
+        }
+      }
+    }
+
+    .howItWorks {
+      h2 {
+        text-align: center;
+        margin: 0 0 toRem.toRem(20) 0;
+      }
+
+      font-size: toRem.toRem(15);
+
+      .steps {
+        display: flex;
+        gap: toRem.toRem(20);
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: flex-start;
+
+        .step {
+          text-align: center;
+          max-width: toRem.toRem(200);
+
+          .stepNumber {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: var(--shade-4);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            font-weight: bold;
+            margin: 0 auto 1rem;
+          }
+
+          h3 {
+            font-size: 1.3rem;
+            margin-bottom: 0.5rem;
+          }
+
+          p {
+            color: var(--text-secondary);
+          }
+        }
+      }
+    }
+
+    .cta {
+      text-align: center;
+      margin-top: toRem.toRem(20);
+
+      .joinButton {
+        font-weight: bold;
+      }
+
+      .signInNote {
+        margin-top: 1rem;
+        color: var(--text-secondary);
+      }
+    }
+  }
+
+  .footer {
+    display: flex;
+    justify-content: center;
+    margin-top: toRem.toRem(20);
+
+    .logo {
+      color: var(--foreground);
+    }
+  }
+  .goToDashboard {
+    margin-top: toRem.toRem(10);
+    animation: slideUp 0.4s ease forwards;
+    @include utils.respect-reduced-motion;
+  }
+}