feat: add ListItem component with title and subtitle

src/components/ListItem/_listItem.scss

@@ -0,0 +1,70 @@
+@use '../../styles/tokens/typography' as *;
+
+.list-item {
+  width: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--nds-spacing-md);
+  border-radius: var(--nds-radius-sm);
+  background: var(--nds-background, #040B0B);
+  flex-shrink: 0;
+  position: relative;
+  cursor: pointer;
+  &:hover {
+    background: color-mix(in srgb, var(--nds-secondary) 25%, transparent);
+  }
+
+  &:active {
+    background: color-mix(in srgb, var(--nds-accent) 25%, transparent);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-radius: var(--nds-radius-md);
+    border-color: transparent;
+    background:
+      linear-gradient(var(--nds-background, #040B0B), var(--nds-background, #040B0B)) padding-box,
+      linear-gradient(
+        135deg,
+        transparent 0%,
+        transparent 20%,
+        rgba(245, 250, 250, 0.08) 50%,
+        rgba(245, 250, 250, 0.28) 100%
+      ) border-box;
+    -webkit-mask:
+      linear-gradient(#fff 0 0) padding-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -1px;
+    width: 1px;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nds-spacing-md);
+  }
+
+  &__subTitle {
+    @include text-base;
+  }
+
+  &__title {
+    @include text-xl;
+  }
+}

src/components/ListItem/listItem.astro

@@ -0,0 +1,15 @@
+---
+import Arrow2 from "../Icons/Arrow2/Arrow2.astro"
+---
+<div class='list-item'>
+  <div class='list-item__content'>
+    <slot/>
+  </div>
+  <Arrow2 
+  size={24}
+  orientation='right' />
+</div>
+
+<style lang="scss">
+@use './listItem';
+</style>

src/components/ListItem/listItemSubtitle.astro

@@ -0,0 +1,7 @@
+<div class='list-item__subTitle'>
+    <slot/>
+</div>
+
+<style lang="scss">
+@use './listItem';
+</style>

src/components/ListItem/listItemTitle.astro

@@ -0,0 +1,7 @@
+<div class='list-item__title'>
+    <slot/>
+</div>
+
+<style lang="scss">
+@use './listItem';
+</style>