@chrryai/chrry 1.1.78

package/SplashScreen.module.scss

@@ -0,0 +1,189 @@
+@import "./styles/toRem.scss";
+
+.container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: toRem(40);
+  background: var(--background);
+
+  &[data-mode="chrry"] {
+    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
+  }
+}
+
+.content {
+  max-width: toRem(1200);
+  width: 100%;
+  text-align: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: toRem(16);
+  margin-bottom: toRem(24);
+}
+
+.logoIcon {
+  font-size: toRem(64);
+  line-height: 1;
+}
+
+.logoText {
+  font-size: toRem(48);
+  font-weight: 700;
+  margin: 0;
+  color: var(--foreground);
+}
+
+.description {
+  font-size: toRem(20);
+  color: var(--shade-6);
+  margin-bottom: toRem(40);
+  max-width: toRem(600);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.links {
+  display: flex;
+  gap: toRem(16);
+  justify-content: center;
+  margin-bottom: toRem(48);
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  gap: toRem(8);
+  padding: toRem(12) toRem(24);
+  background: var(--background);
+  border: 1px solid var(--shade-2);
+  border-radius: toRem(8);
+  color: var(--foreground);
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.2s;
+
+  &:hover {
+    background: var(--shade-1);
+    border-color: var(--shade-3);
+    transform: translateY(toRem(-2));
+  }
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(toRem(300), 1fr));
+  gap: toRem(24);
+  margin-bottom: toRem(48);
+}
+
+.feature {
+  display: flex;
+  align-items: flex-start;
+  gap: toRem(16);
+  padding: toRem(24);
+  background: var(--background);
+  border: 1px solid var(--shade-2);
+  border-radius: toRem(12);
+  text-decoration: none;
+  color: var(--foreground);
+  transition: all 0.2s;
+  text-align: left;
+
+  &:hover {
+    border-color: var(--shade-3);
+    transform: translateY(toRem(-4));
+    box-shadow: 0 toRem(8) toRem(24) rgba(0, 0, 0, 0.1);
+  }
+
+  &[data-opensource="true"] {
+    border-color: var(--accent-3);
+
+    &:hover {
+      border-color: var(--accent-5);
+      background: var(--accent-0);
+    }
+  }
+}
+
+.featureIcon {
+  font-size: toRem(32);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.featureContent {
+  flex: 1;
+}
+
+.featureTitle {
+  font-size: toRem(18);
+  font-weight: 600;
+  margin: 0 0 toRem(8) 0;
+  display: flex;
+  align-items: center;
+  gap: toRem(8);
+}
+
+.openSourceBadge {
+  font-size: toRem(12);
+  font-weight: 500;
+  padding: toRem(2) toRem(8);
+  background: var(--accent-2);
+  color: var(--accent-8);
+  border-radius: toRem(4);
+}
+
+.featureDescription {
+  font-size: toRem(14);
+  color: var(--shade-6);
+  margin: 0;
+}
+
+.featureArrow {
+  flex-shrink: 0;
+  color: var(--shade-5);
+  transition: transform 0.2s;
+
+  .feature:hover & {
+    transform: translateX(toRem(4));
+  }
+}
+
+.footer {
+  padding-top: toRem(32);
+  border-top: 1px solid var(--shade-2);
+  color: var(--shade-6);
+  font-size: toRem(14);
+
+  p {
+    margin: toRem(8) 0;
+  }
+
+  a {
+    color: var(--accent-6);
+    text-decoration: none;
+    font-weight: 500;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.install {
+  code {
+    padding: toRem(8) toRem(16);
+    background: var(--shade-1);
+    border: 1px solid var(--shade-2);
+    border-radius: toRem(6);
+    font-family: "Monaco", "Courier New", monospace;
+    font-size: toRem(14);
+    color: var(--accent-7);
+  }
+}

package/Star.module.scss

@@ -0,0 +1,15 @@
+@use "./toRem.scss";
+
+.star {
+  display: inline-flex;
+  &.active {
+    display: inline-flex !important;
+  }
+  font-size: toRem.toRem(12);
+  & {
+    color: var(--shade-6);
+  }
+  &:hover {
+    color: var(--accent-1);
+  }
+}

package/Store.module.scss

@@ -0,0 +1,240 @@
+@use "./breakpoints.scss";
+@use "./toRem.scss";
+@use "./utils.scss";
+
+.lifeOS {
+  max-width: breakpoints.$breakpoint-mobile;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  margin-top: toRem.toRem(10);
+  margin-bottom: toRem.toRem(30);
+  padding: toRem.toRem(5);
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: toRem.toRem(5);
+    margin-bottom: toRem.toRem(20);
+
+    .title {
+      display: flex;
+      font-size: toRem.toRem(20);
+      align-items: center;
+      gap: toRem.toRem(10);
+      margin: 0;
+      margin-bottom: toRem.toRem(5);
+      > span {
+        flex: 1;
+        text-align: center;
+      }
+
+      @media (min-width: breakpoints.$breakpoint-mobile) {
+        font-size: toRem.toRem(24);
+      }
+    }
+
+    .intro {
+      text-align: center;
+
+      font-size: toRem.toRem(14);
+
+      @media (min-width: breakpoints.$breakpoint-mobile) {
+        font-size: toRem.toRem(15);
+      }
+    }
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: toRem.toRem(15);
+}
+
+.createAgent {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  bottom: toRem.toRem(10);
+}
+
+.apps {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(15);
+  justify-content: center;
+  margin-top: toRem.toRem(10);
+  flex-wrap: wrap;
+}
+
+.titleText {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  text-align: center;
+  flex: 1;
+  align-self: center;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+}
+
+.headerIcons {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(7.5);
+  margin-bottom: toRem.toRem(10);
+}
+
+.app {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: toRem.toRem(10);
+  outline: 1px dashed var(--shade-2);
+  padding: toRem.toRem(10);
+  padding-top: toRem.toRem(12.5);
+  border-radius: toRem.toRem(20);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  min-width: initial;
+  flex: 1;
+
+  min-width: toRem.toRem(130);
+
+  //   @media (min-width: toRem.toRem(420)) {
+  //     min-width: toRem.toRem(160);
+  //   }
+
+  //   @media (min-width: toRem.toRem(440)) {
+  //     min-width: toRem.toRem(200);
+  //   }
+
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    flex: inherit;
+  }
+
+  &:last-child {
+    // flex: 1;
+    align-self: flex-start;
+    flex: 1;
+  }
+
+  &:hover {
+    outline: 2px solid var(--accent-1);
+  }
+
+  &.selected {
+    outline: 3px solid var(--accent-5);
+    background-color: var(--shade-1);
+  }
+
+  .appInfo {
+    display: flex;
+    flex-direction: column;
+    gap: toRem.toRem(2);
+
+    .appName {
+      font-size: toRem.toRem(16);
+      font-weight: 600;
+      text-align: center;
+    }
+
+    .appSubtitle {
+      font-size: toRem.toRem(12);
+      color: var(--shade-5);
+      text-align: center;
+      font-weight: 400;
+      max-width: toRem.toRem(115);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .badge {
+    bottom: 1px;
+    right: 1px;
+    background-color: var(--accent-1);
+    color: var(--shade-8);
+    padding: toRem.toRem(3) toRem.toRem(10);
+    border-radius: toRem.toRem(20);
+    font-size: toRem.toRem(12);
+    margin-bottom: toRem.toRem(10);
+
+    &.inProgress {
+      background-color: var(--accent-5);
+    }
+    &.planned {
+      background-color: var(--shade-3);
+    }
+  }
+}
+
+.footer {
+  padding: toRem.toRem(15);
+  background: var(--shade-1);
+  border-radius: toRem.toRem(20);
+  border: 1px dashed var(--shade-2);
+  animation: slideUp 0.4s ease forwards;
+
+  .appDetails {
+    h3 {
+      margin: 0 0 toRem.toRem(10) 0;
+      font-size: toRem.toRem(24);
+      font-weight: 600;
+    }
+
+    .subtitle {
+      margin: 0 0 toRem.toRem(5) 0;
+      color: var(--accent-1);
+      font-weight: 500;
+      font-size: toRem.toRem(16);
+    }
+
+    .description {
+      margin: 0 0 toRem.toRem(20) 0;
+      line-height: 1.6;
+      color: var(--shade-7);
+      font-size: toRem.toRem(15);
+    }
+
+    .features {
+      h4 {
+        margin: 0 0 toRem.toRem(10) 0;
+        font-size: toRem.toRem(16);
+        font-weight: 600;
+      }
+
+      .feature {
+        display: flex;
+        align-items: center;
+        gap: toRem.toRem(5);
+      }
+
+      ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        li {
+          margin-bottom: toRem.toRem(6);
+          color: var(--shade-6);
+        }
+      }
+    }
+  }
+
+  @include utils.respect-reduced-motion;
+}
+
+.tetris {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: toRem.toRem(20);
+  gap: toRem.toRem(10);
+  flex-direction: column;
+  font-size: toRem.toRem(12);
+}

package/Subscribe.module.scss

@@ -0,0 +1,219 @@
+@use "./toRem.scss";
+@use "./utils.scss";
+
+.subscribeButton {
+  &.isDrawerOpen {
+    position: relative;
+    left: toRem.toRem(125);
+  }
+}
+
+.checkout {
+  display: inline-flex;
+}
+
+.subscribeButton,
+.plusButton {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  background-color: var(--background);
+  border: toRem.toRem(1) solid var(--accent-1) !important;
+  box-shadow: none;
+  padding: toRem.toRem(5) toRem.toRem(10);
+  color: var(--foreground);
+
+  &:hover,
+  &:disabled {
+    background-color: var(--background);
+
+    .svg {
+      stroke: var(--accent-5);
+    }
+
+    color: var(--shade-6);
+  }
+}
+
+.button {
+  display: flex;
+
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: toRem.toRem(10) !important;
+  font-size: toRem.toRem(16) !important;
+}
+
+.plans {
+  margin-bottom: toRem.toRem(7.5);
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.modal {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  top: 0;
+  left: 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  position: fixed;
+  background: var(--overlay);
+}
+
+.main {
+  margin: 0 auto;
+  width: auto;
+  padding: 0 toRem.toRem(10);
+  z-index: 3;
+  position: relative;
+  flex: 1;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  width: auto;
+
+  .inner {
+    animation: slideUp 0.4s ease forwards;
+    background-color: var(--background);
+    padding: toRem.toRem(20);
+    padding-top: toRem.toRem(10);
+    border-radius: var(--radius);
+    border: toRem.toRem(1) solid var(--shade-2);
+    position: relative;
+    min-width: 100%;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow);
+    gap: toRem.toRem(5);
+    justify-content: flex-start;
+
+    .title {
+      margin: 0;
+      margin-bottom: toRem.toRem(5);
+      border-bottom: toRem.toRem(1) solid var(--shade-2);
+      padding: 0;
+      padding-bottom: toRem.toRem(5);
+      display: flex;
+      align-items: center;
+      gap: toRem.toRem(5);
+    }
+  }
+
+  .close {
+    margin-left: auto;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(toRem.toRem(20)); /* Start slightly below */
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0); /* End at original position */
+  }
+}
+
+.features {
+  display: flex;
+  flex-direction: column;
+  gap: toRem.toRem(5);
+  list-style-type: none;
+  margin: 0;
+  font-size: toRem.toRem(15);
+  padding: 0;
+  opacity: 0;
+
+  .feature {
+    margin: 0;
+    display: flex;
+
+    gap: toRem.toRem(1);
+    align-items: center;
+    padding: 0;
+    opacity: 0;
+  }
+}
+
+.checkoutButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: toRem.toRem(5);
+  font-size: toRem.toRem(16);
+  background-color: var(--accent-4);
+}
+
+.userToGift {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(10);
+  margin-bottom: toRem.toRem(10);
+}
+
+.gift {
+  margin-top: toRem.toRem(10);
+}
+
+.invite {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+}
+
+.userToGiftName {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+
+  .backButton {
+    margin-left: auto;
+  }
+}
+
+.inviteInput {
+  flex: 1;
+}
+
+.subscribeAsGuest {
+  font-size: toRem.toRem(14);
+  text-align: center;
+  margin-top: toRem.toRem(15);
+  margin-bottom: toRem.toRem(3);
+  color: var(--shade-7);
+
+  p {
+    font-size: toRem.toRem(12);
+  }
+}
+
+.giftButton,
+.currentPlanButton,
+.cancelSubscriptionButton {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(5);
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  font-size: toRem.toRem(16);
+  width: 100%;
+  padding: toRem.toRem(10);
+}
+
+.checkoutButtonContainer {
+  display: flex;
+  gap: toRem.toRem(8.5);
+  flex-direction: column;
+  margin-top: toRem.toRem(8.5);
+}

package/Testimonials.module.scss

@@ -0,0 +1,33 @@
+@use "./breakpoints.scss";
+@use "./toRem.scss";
+
+.testimonials {
+  margin-top: toRem.toRem(15);
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-size: toRem.toRem(13);
+
+    li:last-child {
+      display: none;
+    }
+
+    @media (min-height: toRem.toRem(740)) {
+      li:last-child {
+        display: block;
+      }
+    }
+  }
+}
+
+.testimonial {
+  margin-bottom: toRem.toRem(10);
+  position: relative;
+
+  .author {
+    color: var(--shade-5);
+    font-size: toRem.toRem(12);
+  }
+}