site: refresh official v2.7 landing experience

Author: GaspardKirira

vix-site/src/components/common/CommandLine.vue

@@ -129,7 +129,7 @@ async function copy() {
   display: flex;
   align-items: center;
   gap: 0.65rem;
-  padding: 0.65rem 0.85rem;
+  padding: 0.5rem 0.85rem;
   border-radius: var(--radius-md);
   border: 1px solid var(--line-ink);
   background: var(--bg-ink);
@@ -226,4 +226,38 @@ async function copy() {
     pointer-events: auto;
   }
 }
+@media (max-width: 640px) {
+  .cmd {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: 0.7rem 3.1rem 0.7rem 0.9rem;
+  }
+
+  .cmd__code {
+    display: block;
+    min-width: 0;
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-width: none;
+  }
+
+  .cmd__code::-webkit-scrollbar {
+    display: none;
+  }
+
+  .cmd__copy {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(-50%);
+  }
+
+  .cmd__copy:hover {
+    transform: translateY(-50%);
+  }
+}
 </style>

vix-site/src/components/home/ArchitectureSection.vue

@@ -107,20 +107,6 @@
           to show the shape of the project and the direction behind it.
         </p>
       </div>
-
-      <div class="architecture__divider" aria-hidden="true">
-        <span class="architecture__divider-line" />
-        <svg
-          class="architecture__divider-mark"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <polygon points="5,3 9,3 12,21 10,21" fill="#4ade80" />
-          <polygon points="19,3 15,3 12,21 14,21" fill="#16a34a" />
-        </svg>
-        <span class="architecture__divider-line" />
-      </div>
     </div>
   </section>
 </template>
@@ -134,7 +120,7 @@ import { images } from "@/data/images";
 <style scoped>
 .architecture {
   position: relative;
-  background: var(--bg-soft);
+  background: var(--bg);
   border-block: 1px solid var(--line-soft);
 }