Added rounded edge boxes around each section by wrapping WelcomeItem content in a styled container with border-radius, background, and hover effects

src/components/WelcomeItem.vue

@@ -1,22 +1,37 @@
 <template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
+  <div class="item-wrapper">
+    <div class="item">
+      <i>
+        <slot name="icon"></slot>
+      </i>
+      <div class="details">
+        <h3>
+          <slot name="heading"></slot>
+        </h3>
+        <slot></slot>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
+.item-wrapper {
+  background: var(--color-background-soft);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  transition: border-color 0.3s ease;
+}
+
+.item-wrapper:hover {
+  border-color: var(--color-border-hover);
+}
+
 .item {
-  margin-top: 2rem;
   display: flex;
   position: relative;
+  margin: 0;
 }
 
 .details {
@@ -30,8 +45,8 @@ i {
   place-content: center;
   width: 32px;
   height: 32px;
-
   color: var(--color-text);
+  flex-shrink: 0;
 }
 
 h3 {
@@ -42,46 +57,20 @@ h3 {
 }
 
 @media (min-width: 1024px) {
+  .item-wrapper {
+    margin-bottom: 2rem;
+  }
+  
   .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+    padding: 0;
   }
 
   i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
+    width: 50px;
+    height: 50px;
     border: 1px solid var(--color-border);
     background: var(--color-background);
     border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
   }
 }
-</style>
+</style>