From e81c7e1b6308671b1dbaae6aa3c7a46eba4e39e7 Mon Sep 17 00:00:00 2001
From: QIWEI <davidmaeew@gmail.com>
Date: Sun, 30 Mar 2025 22:37:05 +0800
Subject: [PATCH] feat: update components

---
 MyCompSuite/EnterpriseFeatures/main.vue   | 346 +++++++++++
 MyCompSuite/FeatureList/main.vue          | 666 ++++++++++++++++++++++
 MyCompSuite/HubCollaboration/main.vue     | 102 ++++
 MyCompSuite/HuggingFaceSearchBar/main.vue | 186 ++++++
 MyCompSuite/SupportBanner/main.vue        |  50 ++
 MyCompSuite/main.vue                      |  53 +-
 6 files changed, 1384 insertions(+), 19 deletions(-)
 create mode 100644 MyCompSuite/EnterpriseFeatures/main.vue
 create mode 100644 MyCompSuite/FeatureList/main.vue
 create mode 100644 MyCompSuite/HubCollaboration/main.vue
 create mode 100644 MyCompSuite/HuggingFaceSearchBar/main.vue
 create mode 100644 MyCompSuite/SupportBanner/main.vue

diff --git a/MyCompSuite/EnterpriseFeatures/main.vue b/MyCompSuite/EnterpriseFeatures/main.vue
new file mode 100644
index 0000000..455c661
--- /dev/null
+++ b/MyCompSuite/EnterpriseFeatures/main.vue
@@ -0,0 +1,346 @@
+<template>
+  <div :class="$style['wrapper-5']">
+    <div :class="$style['enterprise-header']">
+      <div :class="$style['header-content']">
+        <img src="https://weavefox.alipay.com/assets/9f19ba76-cf92-4e39-a3f6-dde1f57b9661.png" :class="$style['header-image']" />
+        <span :class="$style['header-title']">
+          Enterprise Hub
+        </span>
+      </div>
+      <span :class="$style['header-subtitle']">
+        Accelerate your Al roadmap
+      </span>
+    </div>
+    <div :class="$style['features-container']">
+      <div :class="$style['feature-list']">
+        <div :class="$style['feature-item']">
+          <ElIconAntd :iconData="CheckOutlined" :class="$style['feature-icon']" />
+          <span :class="$style['feature-title']">
+            SSO and SAML support
+          </span>
+        </div>
+        <div :class="$style['feature-item-2']">
+          <ElIconAntd :iconData="CheckOutlined" :class="$style['feature-icon']" />
+          <span :class="$style['feature-title']">
+            Select data location with Storage Regions
+          </span>
+        </div>
+        <div :class="$style['feature-item-3']">
+          <ElIconAntd :iconData="CheckOutlined" :class="$style['feature-icon']" />
+          <span :class="$style['feature-title']">
+            Precise actions reviews with Audit logs
+          </span>
+        </div>
+        <div :class="$style['feature-item-4']">
+          <ElIconAntd :iconData="CheckOutlined" :class="$style['feature-icon']" />
+          <span :class="$style['feature-description-3']">
+            Granular access control with Resource groups
+          </span>
+        </div>
+        <div :class="$style['feature-item-5']">
+          <ElIconAntd :iconData="CheckOutlined" :class="$style['feature-icon']" />
+          <span :class="$style['feature-description-3']">
+            Centralized token control and approval
+          </span>
+        </div>
+        <div :class="$style['feature-item-2']">
+          <ElIconAntd :iconData="CheckOutlined" :class="$style['feature-icon']" />
+          <span :class="$style['feature-title']">
+            Dataset Viewer for private datasets
+          </span>
+        </div>
+        <div :class="$style['feature-item-7']">
+          <ElIconAntd :iconData="CheckOutlined" :class="$style['feature-icon']" />
+          <span :class="$style['feature-description-3']">
+            Advanced compute options for Spaces
+          </span>
+        </div>
+        <div :class="$style['feature-item-8']">
+          <ElIconAntd :iconData="CheckOutlined" :class="$style['premium-feature-icon']" />
+          <span :class="$style['feature-description-7']">
+            5x more ZeroGPU quota for all org members
+          </span>
+        </div>
+        <div :class="$style['feature-item-9']">
+          <ElIconAntd :iconData="CheckOutlined" :class="$style['feature-icon']" />
+          <span :class="$style['feature-description-8']">
+            Deploy Inference on your own Infra
+          </span>
+        </div>
+        <div :class="$style['feature-item-10']">
+          <ElIconAntd :iconData="CheckOutlined" :class="$style['billing-feature-icon']" />
+          <span :class="$style['feature-description-3']">
+            Managed billing with yearly commits
+          </span>
+        </div>
+        <div :class="$style['feature-item-11']">
+          <ElIconAntd :iconData="CheckOutlined" :class="$style['feature-icon']" />
+          <span :class="$style['feature-description-3']">
+            Priority support
+          </span>
+        </div>
+      </div>
+      <span :class="$style['pricing-label']">
+        Starting at
+      </span>
+      <div :class="$style['pricing-details']">
+        <span :class="$style['price-amount']">
+          $20
+        </span>
+        <span :class="$style['price-frequency']">
+          peruserpermonth
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { CheckOutlined } from '@ant-design/icons-svg';
+
+export default {
+  data () {
+    return {
+      CheckOutlined
+    };
+  }
+};
+</script>
+
+<style module>
+.wrapper-5 {
+  border-radius: 27px;
+  background-color: #ffffff;
+  border-color: #f2f4f9;
+  border-style: solid;
+  width: 437.5px;
+  border-width: 1px;
+  display: flex;
+  flex-direction: column;
+  padding-top: 2px;
+}
+
+.enterprise-header {
+  border-radius: 23px;
+  background-color: #ffffff;
+  border-color: #f0f2f8;
+  border-style: solid;
+  border-width: 1px;
+  display: flex;
+  flex-direction: column;
+  min-width: 438px;
+  padding: 26px 26px 28px 26px;
+}
+
+.header-content {
+  align-self: flex-start;
+  margin-left: 2px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.header-image {
+  flex-shrink: 0;
+  border-radius: 3px;
+  width: 28px;
+  height: 24px;
+}
+
+.header-title {
+  color: #101828;
+  font-size: 20px;
+  font-weight: bold;
+  margin-left: 12px;
+  white-space: nowrap;
+}
+
+.header-subtitle {
+  color: #99a1af;
+  font-size: 16px;
+  margin-top: 12px;
+  margin-left: 4px;
+  white-space: nowrap;
+}
+
+.features-container {
+  border-radius: 28px;
+  background-color: #fdfffd;
+  margin-top: 6px;
+  margin-left: 4px;
+  display: flex;
+  flex-direction: column;
+  min-width: 434px;
+  padding: 24px 20px 22px 20px;
+}
+
+.feature-list {
+  align-self: flex-start;
+  display: flex;
+  flex-direction: column;
+}
+
+.feature-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 8px 2px 8px;
+}
+
+.feature-icon {
+  color: #b7bdc7;
+  font-size: 12px;
+  width: 12px;
+  height: 12px;
+}
+
+.feature-title {
+  color: #000000;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 14px;
+  white-space: nowrap;
+}
+
+.feature-item-2 {
+  margin-top: 15px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px 8px 2px 8px;
+}
+
+.feature-item-3 {
+  margin-top: 14px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px 6px 5px 6px;
+}
+
+.feature-item-4 {
+  margin-top: 14px;
+  display: flex;
+  flex-direction: row;
+  padding-left: 8px;
+  padding-top: 5px;
+  padding-bottom: 2px;
+  align-items: center;
+}
+
+.feature-description-3 {
+  color: #000000;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 12px;
+  white-space: nowrap;
+}
+
+.feature-item-5 {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 6px 8px 2px 8px;
+}
+
+.feature-item-7 {
+  margin-top: 15px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 8px 2px 8px;
+}
+
+.feature-item-8 {
+  margin-top: 14px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 6px 2px 6px;
+}
+
+.premium-feature-icon {
+  color: #b7bdc7;
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.feature-description-7 {
+  color: #000000;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 10px;
+  white-space: nowrap;
+}
+
+.feature-item-9 {
+  margin-top: 15px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 6px 2px 6px;
+}
+
+.feature-description-8 {
+  color: #000000;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 15px;
+  white-space: nowrap;
+}
+
+.feature-item-10 {
+  margin-top: 15px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 2px 4px 2px 4px;
+}
+
+.billing-feature-icon {
+  color: #b7bdc7;
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+}
+
+.feature-item-11 {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px 8px 2px 8px;
+}
+
+.pricing-label {
+  color: #99a1af;
+  font-size: 16px;
+  margin-top: 218px;
+  margin-left: 10px;
+}
+
+.pricing-details {
+  margin-top: 2px;
+  align-self: flex-start;
+  margin-left: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+
+.price-amount {
+  color: #000000;
+  font-size: 27px;
+  white-space: nowrap;
+}
+
+.price-frequency {
+  color: #99a1af;
+  font-size: 16px;
+  margin-left: 4px;
+  margin-bottom: 4px;
+  white-space: nowrap;
+}
+</style>
\ No newline at end of file
diff --git a/MyCompSuite/FeatureList/main.vue b/MyCompSuite/FeatureList/main.vue
new file mode 100644
index 0000000..e200158
--- /dev/null
+++ b/MyCompSuite/FeatureList/main.vue
@@ -0,0 +1,666 @@
+<template>
+  <div :class="$style['wrapper-4']">
+    <div :class="$style['content-container']">
+      <div :class="$style['main-container']">
+        <div :class="$style['hardware-header']">
+          <img src="https://weavefox.alipay.com/assets/d0be72bc-9fe7-4875-9d13-46e4f3ce2fd7.png" :class="$style['feature-image']" />
+          <span :class="$style['pro-account-title']">
+            HF Hub
+          </span>
+        </div>
+        <span :class="$style['section-description']">
+          Collaborate on Machine Learning
+        </span>
+        <div :class="$style['features-list']">
+          <div :class="$style['feature-item']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['pro-feature-text']">
+              Host unlimited public models, datasets
+            </span>
+          </div>
+          <div :class="$style['feature-item-2']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['pro-feature-text']">
+              Create unlimited orgs with no member limits
+            </span>
+          </div>
+          <div :class="$style['feature-item-3']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['icon-check']" />
+            <span :class="$style['feature-text']">
+              Access the latest ML tools and open source
+            </span>
+          </div>
+          <div :class="$style['feature-item-4']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['pro-feature-text']">
+              Community support
+            </span>
+          </div>
+        </div>
+      </div>
+      <span :class="$style['price-duration']">
+        Forever
+      </span>
+      <span :class="$style['price-value']">
+        Free
+      </span>
+    </div>
+    <div :class="$style['pricing-section']">
+      <div :class="$style['pricing-option']">
+        <div :class="$style['hardware-header']">
+          <img src="https://weavefox.alipay.com/assets/846760c7-36ca-43e8-b3b5-b338335d3ea8.png" :class="$style['pro-account-image']" />
+          <span :class="$style['pro-account-title']">
+            Pro Account
+          </span>
+        </div>
+        <span :class="$style['pro-account-description']">
+          Unlock advanced HF features
+        </span>
+        <div :class="$style['pro-features-list']">
+          <div :class="$style['hardware-header']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['pro-feature-text-2']">
+              ZeroGPU and Dev Mode for Spaces
+            </span>
+          </div>
+          <div :class="$style['pro-feature-item']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['pro-feature-text-3']">
+              Free credits across all Inference Providers
+            </span>
+          </div>
+          <div :class="$style['pro-feature-item-2']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['pro-feature-text-3']">
+              Get early access to upcoming features
+            </span>
+          </div>
+          <div :class="$style['pro-feature-item-3']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['pro-feature-text']">
+              Show your support with a Pro badge
+            </span>
+          </div>
+        </div>
+      </div>
+      <span :class="$style['subscribe-text']">
+        Subscribe for
+      </span>
+      <div :class="$style['price-details']">
+        <span :class="$style['monthly-price']">
+          $9
+        </span>
+        <span :class="$style['price-unit']">
+          /month
+        </span>
+      </div>
+    </div>
+    <div :class="$style['hardware-section']">
+      <div :class="$style['hardware-option']">
+        <div :class="$style['hardware-header']">
+          <img src="https://weavefox.alipay.com/assets/373fffb7-59a1-4859-bc75-dc73749e117d.png" :class="$style['hardware-image']" />
+          <span :class="$style['hardware-title']">
+            Spaces Hardware
+          </span>
+        </div>
+        <span :class="$style['hardware-description']">
+          Upgrade your Space compute
+        </span>
+        <div :class="$style['hardware-features-list']">
+          <div :class="$style['hardware-header']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['icon-check']" />
+            <span :class="$style['cpu-free-label']">
+              Free CPUs
+            </span>
+          </div>
+          <div :class="$style['content-container-2']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['pro-feature-text-3']">
+              Build more advanced Spaces
+            </span>
+          </div>
+          <div :class="$style['section-wrapper']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['pro-feature-text']">
+              7 optimized hardware available
+            </span>
+          </div>
+          <div :class="$style['feature-list']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['accelerator-description']">
+              From CPU to GPU to Accelerators
+            </span>
+          </div>
+        </div>
+      </div>
+      <span :class="$style['price-indicator']">
+        Starting at
+      </span>
+      <div :class="$style['price-box']">
+        <span :class="$style['placeholder-text']">
+          so
+        </span>
+        <span :class="$style['price-unit']">
+          /hour
+        </span>
+      </div>
+    </div>
+    <div :class="$style['image-container']">
+      <div :class="$style['pricing-option']">
+        <div :class="$style['hardware-header']">
+          <img src="https://weavefox.alipay.com/assets/7bd73fc3-ee39-4743-9389-95b4866b4b38.png" :class="$style['infrastructure-image']" />
+          <span :class="$style['hardware-title']">
+            Inference Endpoints
+          </span>
+        </div>
+        <span :class="$style['deployment-description']">
+          Deploy models on fully managed infrastructure
+        </span>
+        <div :class="$style['security-section']">
+          <div :class="$style['security-details']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['pro-feature-text-2']">
+              Deploy dedicated Endpoints in seconds
+            </span>
+          </div>
+          <div :class="$style['section-wrapper']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['pro-feature-text-3']">
+              Keep your costs low
+            </span>
+          </div>
+          <div :class="$style['security-feature']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['pro-feature-text']">
+              Fully-managed autoscaling
+            </span>
+          </div>
+          <div :class="$style['security-pricing']">
+            <ElIconAntd :iconData="CheckOutlined" :class="$style['check-icon']" />
+            <span :class="$style['security-title']">
+              Enterprise security
+            </span>
+          </div>
+        </div>
+      </div>
+      <span :class="$style['security-price-indicator']">
+        Starting at
+      </span>
+      <div :class="$style['price-box']">
+        <span :class="$style['price-value-2']">
+          $0.032
+        </span>
+        <span :class="$style['price-unit-2']">
+          /hour
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { CheckOutlined } from '@ant-design/icons-svg';
+
+export default {
+  data () {
+    return {
+      CheckOutlined
+    };
+  }
+};
+</script>
+
+<style module>
+.wrapper-4 {
+  background-color: #ffffff;
+  width: 918px;
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 24;
+  column-gap: 21.5;
+}
+
+.content-container {
+  border-radius: 26px;
+  background-color: #fdfffd;
+  border-color: #f2f4f9;
+  border-style: solid;
+  border-width: 1px;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: calc(50% - 11px);
+  max-width: calc(50% - 11px);
+  display: flex;
+  flex-direction: column;
+  padding: 26px 50px 15px 28px;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.hardware-header {
+  align-self: flex-start;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.feature-image {
+  flex-shrink: 0;
+  border-radius: 3px;
+  width: 26px;
+  height: 26px;
+}
+
+.pro-account-title {
+  color: #101828;
+  font-size: 20px;
+  font-weight: bold;
+  margin-left: 12px;
+  white-space: nowrap;
+}
+
+.section-description {
+  color: #99a1af;
+  font-size: 16px;
+  margin-top: 14px;
+  margin-left: 2px;
+}
+
+.features-list {
+  margin-top: 62px;
+  margin-left: 2px;
+  display: flex;
+  flex-direction: column;
+}
+
+.feature-item {
+  margin-left: 2px;
+  margin-right: 25px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.check-icon {
+  color: #b7bdc7;
+  font-size: 12px;
+  width: 12px;
+  height: 12px;
+}
+
+.pro-feature-text {
+  color: #000000;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 15px;
+  white-space: nowrap;
+}
+
+.feature-item-2 {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.feature-item-3 {
+  margin-top: 24px;
+  margin-left: 2px;
+  margin-right: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.icon-check {
+  color: #b7bdc7;
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.feature-text {
+  color: #000000;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+.feature-item-4 {
+  margin-top: 20px;
+  align-self: flex-start;
+  margin-left: 2px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.price-duration {
+  color: #99a1af;
+  font-size: 16px;
+  margin-top: 45px;
+  margin-left: 2px;
+}
+
+.price-value {
+  color: #000000;
+  font-size: 27px;
+  margin-top: 2px;
+  margin-left: 4px;
+}
+
+.pricing-section {
+  border-radius: 28px;
+  background-color: #fdfffd;
+  border-color: #eff0f3;
+  border-style: solid;
+  border-width: 1px;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: calc(50% - 11px);
+  max-width: calc(50% - 11px);
+  display: flex;
+  flex-direction: column;
+  padding: 26px 46px 20px 30px;
+}
+
+.pricing-option {
+  margin-left: 2px;
+  margin-right: 2px;
+  display: flex;
+  flex-direction: column;
+}
+
+.pro-account-image {
+  flex-shrink: 0;
+  border-radius: 3px;
+  width: 46px;
+  height: 30px;
+}
+
+.pro-account-description {
+  color: #99a1af;
+  font-size: 16px;
+  margin-top: 12px;
+  margin-left: 2px;
+}
+
+.pro-features-list {
+  margin-top: 64px;
+  margin-left: 2px;
+  display: flex;
+  flex-direction: column;
+}
+
+.pro-feature-text-2 {
+  color: #000000;
+  font-size: 16px;
+  margin-left: 14px;
+  white-space: nowrap;
+}
+
+.pro-feature-item {
+  margin-top: 22px;
+  margin-left: 2px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.pro-feature-text-3 {
+  color: #000000;
+  font-size: 16px;
+  margin-left: 15px;
+  white-space: nowrap;
+}
+
+.pro-feature-item-2 {
+  margin-top: 24px;
+  margin-right: 45px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.pro-feature-item-3 {
+  margin-top: 20px;
+  align-self: flex-start;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.subscribe-text {
+  color: #99a1af;
+  font-size: 16px;
+  margin-top: 50px;
+  margin-left: 6px;
+}
+
+.price-details {
+  margin-top: 2px;
+  align-self: flex-start;
+  margin-left: 6px;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+
+.monthly-price {
+  color: #000000;
+  font-size: 29px;
+  white-space: nowrap;
+}
+
+.price-unit {
+  color: #99a1af;
+  font-size: 16px;
+  margin-left: 10px;
+  white-space: nowrap;
+}
+
+.hardware-section {
+  border-radius: 27px;
+  background-color: #ffffff;
+  border-color: #f3f4f6;
+  border-style: solid;
+  border-width: 1px;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: calc(50% - 11px);
+  max-width: calc(50% - 11px);
+  display: flex;
+  flex-direction: column;
+  padding: 28px 28px 26px 28px;
+}
+
+.hardware-option {
+  align-self: flex-start;
+  display: flex;
+  flex-direction: column;
+}
+
+.hardware-image {
+  border-radius: 3px;
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+}
+
+.hardware-title {
+  color: #101828;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 12px;
+  white-space: nowrap;
+}
+
+.hardware-description {
+  color: #99a1af;
+  font-size: 16px;
+  margin-top: 16px;
+  margin-left: 2px;
+}
+
+.hardware-features-list {
+  margin-top: 55px;
+  margin-left: 2px;
+  display: flex;
+  flex-direction: column;
+}
+
+.cpu-free-label {
+  color: #000000;
+  font-size: 16px;
+  margin-left: 10px;
+  white-space: nowrap;
+}
+
+.content-container-2 {
+  margin-top: 14px;
+  align-self: flex-start;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.section-wrapper {
+  margin-top: 18px;
+  align-self: flex-start;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.feature-list {
+  margin-top: 24px;
+  margin-left: 2px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.accelerator-description {
+  color: #000000;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 12px;
+  white-space: nowrap;
+}
+
+.price-indicator {
+  color: #99a1af;
+  font-size: 16px;
+  margin-top: 54px;
+  margin-left: 6px;
+}
+
+.price-box {
+  margin-top: 2px;
+  align-self: flex-start;
+  margin-left: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+
+.placeholder-text {
+  color: #000000;
+  font-size: 46px;
+  white-space: nowrap;
+}
+
+.image-container {
+  border-radius: 28px;
+  background-color: #fdfffd;
+  border-color: #eff0f3;
+  border-style: solid;
+  border-width: 1px;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: calc(50% - 11px);
+  max-width: calc(50% - 11px);
+  display: flex;
+  flex-direction: column;
+  padding: 26px 56px 14px 28px;
+}
+
+.infrastructure-image {
+  flex-shrink: 0;
+  border-radius: 3px;
+  width: 26px;
+  height: 28px;
+}
+
+.deployment-description {
+  color: #99a1af;
+  font-size: 16px;
+  margin-top: 15px;
+  margin-left: 4px;
+  white-space: nowrap;
+}
+
+.security-section {
+  margin-top: 60px;
+  margin-left: 2px;
+  margin-right: 30px;
+  display: flex;
+  flex-direction: column;
+}
+
+.security-details {
+  margin-left: 2px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.security-feature {
+  margin-top: 12px;
+  align-self: flex-start;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.security-pricing {
+  margin-top: 12px;
+  align-self: flex-start;
+  margin-left: 2px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.security-title {
+  color: #000000;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 14px;
+  white-space: nowrap;
+}
+
+.security-price-indicator {
+  color: #99a1af;
+  font-size: 16px;
+  margin-top: 46px;
+  margin-left: 8px;
+}
+
+.price-value-2 {
+  color: #000000;
+  font-size: 27px;
+  white-space: nowrap;
+}
+
+.price-unit-2 {
+  color: #99a1af;
+  font-size: 16px;
+  margin-left: 2px;
+  white-space: nowrap;
+}
+</style>
\ No newline at end of file
diff --git a/MyCompSuite/HubCollaboration/main.vue b/MyCompSuite/HubCollaboration/main.vue
new file mode 100644
index 0000000..e157001
--- /dev/null
+++ b/MyCompSuite/HubCollaboration/main.vue
@@ -0,0 +1,102 @@
+<template>
+  <div :class="$style['wrapper-3']">
+    <div :class="$style['header-container']">
+      <img src="https://weavefox.alipay.com/assets/fd0b82d4-33ce-42d9-9f1c-ac77c2dd2cc6.png" :class="$style['header-image']" />
+      <span :class="$style['pricing-label']">
+        Pricing
+      </span>
+    </div>
+    <span :class="$style['feature-description']">
+      Leveling up Al collaboration and compute.
+    </span>
+    <div :class="$style['content-section']">
+      <div :class="$style['user-platform-info']">
+        <span :class="$style['user-platform-text']">
+          Users and organizations already use the Hub as a collaboration platform,
+        </span>
+      </div>
+      <div :class="$style['ml-compute-info']">
+        <span :class="$style['ml-compute-text']">
+          we're making iteasy to seamlessly and scalably launch ML compute directly from the Hub.
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+};
+</script>
+
+<style module>
+.wrapper-3 {
+  background-color: #ffffff;
+  width: 750px;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  padding: 4px 8px 6px 8px;
+}
+
+.header-container {
+  align-self: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.header-image {
+  flex-shrink: 0;
+  border-radius: 3px;
+  width: 18px;
+  height: 16px;
+}
+
+.pricing-label {
+  color: #000000;
+  font-size: 16px;
+  margin-left: 6px;
+  white-space: nowrap;
+}
+
+.feature-description {
+  color: #000000;
+  font-size: 37px;
+  font-weight: bold;
+  margin-top: 12px;
+  margin-left: 2px;
+  white-space: nowrap;
+}
+
+.content-section {
+  margin-top: 18px;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.user-platform-info {
+  padding: 4px 32px 0px 74px;
+}
+
+.user-platform-text {
+  color: #6a7282;
+  font-size: 16px;
+  margin-right: 2px;
+  white-space: nowrap;
+}
+
+.ml-compute-info {
+  margin-top: 10px;
+  padding: 2px 6px 0px 8px;
+}
+
+.ml-compute-text {
+  color: #6a7282;
+  font-size: 16px;
+  white-space: nowrap;
+}
+</style>
\ No newline at end of file
diff --git a/MyCompSuite/HuggingFaceSearchBar/main.vue b/MyCompSuite/HuggingFaceSearchBar/main.vue
new file mode 100644
index 0000000..6b01678
--- /dev/null
+++ b/MyCompSuite/HuggingFaceSearchBar/main.vue
@@ -0,0 +1,186 @@
+<template>
+  <div :class="$style['wrapper-2']">
+    <div :class="$style['header-section']">
+      <img src="https://weavefox.alipay.com/assets/955162e7-9c43-496c-8da0-237641635b34.png" :class="$style['logo-image']" />
+      <span :class="$style['site-title']">
+        Hugging Face
+      </span>
+      <ElInput placeholder="Search models, datasets,users.." v-model="searchItemsValue" :class="$style['search-input']">
+        <template #prepend="prepend">
+          <ElIconAntd :iconData="SearchOutlined" :class="$style['search-icon']" />
+        </template>
+      </ElInput>
+    </div>
+    <div :class="$style['content-section']">
+      <img src="https://weavefox.alipay.com/assets/66dc1c69-a7c8-47c2-8209-388ea74c9aac.png" :class="$style['model-thumbnail']" />
+      <span :class="$style['model-label']">
+        Models
+      </span>
+      <img src="https://weavefox.alipay.com/assets/941df887-b380-40ab-801f-0e3ef95e9126.png" :class="$style['dataset-thumbnail']" />
+      <span :class="$style['model-label']">
+        Datasets
+      </span>
+      <img src="https://weavefox.alipay.com/assets/b46b70db-bfa2-4922-9bf2-306661b5054c.png" :class="$style['space-thumbnail']" />
+      <span :class="$style['model-label']">
+        Spaces
+      </span>
+      <img src="https://weavefox.alipay.com/assets/46a238d4-897b-48c1-a490-30aac58dcb34.png" :class="$style['post-thumbnail']" />
+      <span :class="$style['model-label']">
+        Posts
+      </span>
+      <img src="https://weavefox.alipay.com/assets/d0d75f65-3efa-49ba-8e3e-a45f7b8d0c36.png" :class="$style['doc-thumbnail']" />
+      <span :class="$style['model-label']">
+        Docs
+      </span>
+      <img src="https://weavefox.alipay.com/assets/8ac5f4b0-1e80-4806-8546-8e019dadbb82.png" :class="$style['enterprise-thumbnail']" />
+      <span :class="$style['model-label']">
+        Enterprise
+      </span>
+      <span :class="$style['pricing-label']">
+        Pricing
+      </span>
+      <img src="https://weavefox.alipay.com/assets/e89f11ac-f43a-472b-a2bb-2882f71fa996.png" :class="$style['feature-thumbnail']" />
+      <div :class="$style['divider-line']" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { SearchOutlined } from '@ant-design/icons-svg';
+
+export default {
+  data () {
+    return {
+      searchItemsValue: '',
+      SearchOutlined
+    };
+  }
+};
+</script>
+
+<style module>
+.wrapper-2 {
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 16px 6px 10px 10px;
+}
+
+.header-section {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.logo-image {
+  flex-shrink: 0;
+  border-radius: 3px;
+  width: 30px;
+  height: 30px;
+}
+
+.site-title {
+  color: #000000;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+.search-input {
+  width: 384px;
+  margin-left: 18px;
+}
+
+.search-icon {
+  color: #99a1af;
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+}
+
+.content-section {
+  flex: 1;
+  margin-left: 245px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.model-thumbnail {
+  border-radius: 6px;
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+}
+
+.model-label {
+  color: #000000;
+  font-size: 16px;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+.dataset-thumbnail {
+  border-radius: 2px;
+  flex-shrink: 0;
+  width: 12px;
+  margin-left: 24px;
+  height: 12px;
+}
+
+.space-thumbnail {
+  border-radius: 2px;
+  flex-shrink: 0;
+  width: 12px;
+  margin-left: 24px;
+  height: 14px;
+}
+
+.post-thumbnail {
+  border-radius: 4px;
+  flex-shrink: 0;
+  width: 12px;
+  margin-left: 26px;
+  height: 12px;
+}
+
+.doc-thumbnail {
+  border-radius: 2px;
+  flex-shrink: 0;
+  width: 14px;
+  margin-left: 22px;
+  height: 12px;
+}
+
+.enterprise-thumbnail {
+  border-radius: 6px;
+  flex-shrink: 0;
+  width: 15px;
+  margin-left: 22px;
+  height: 14px;
+}
+
+.pricing-label {
+  color: #000000;
+  font-size: 16px;
+  margin-left: 22px;
+  white-space: nowrap;
+}
+
+.feature-thumbnail {
+  flex-shrink: 0;
+  border-radius: 3px;
+  width: 18px;
+  margin-left: 22px;
+  height: 16px;
+}
+
+.divider-line {
+  background-color: #f2f4f9;
+  width: 3px;
+  margin-left: 16px;
+  height: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/MyCompSuite/SupportBanner/main.vue b/MyCompSuite/SupportBanner/main.vue
new file mode 100644
index 0000000..774ee7f
--- /dev/null
+++ b/MyCompSuite/SupportBanner/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <div :class="$style['wrapper-6']">
+    <div :class="$style['support-container']">
+      <span :class="$style['support-text']">
+        Need support to accelerate Al in your organization? View our
+        <img src="https://weavefox.alipay.com/assets/2fbedde8-4e3d-41e0-bb61-e169bc0206da.png" :class="$style['support-icon']" />
+        Expert Support.
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+};
+</script>
+
+<style module>
+.wrapper-6 {
+  background-color: #fdfffd;
+  width: 616px;
+  margin-top: 54px;
+  align-self: center;
+  padding: 2px 2px 2px 2px;
+}
+
+.support-container {
+  border-radius: 2px;
+  background-color: #ffffff;
+  padding: 8px 10px 6px 15px;
+}
+
+.support-text {
+  color: #000000;
+  font-size: 16px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  white-space: nowrap;
+}
+
+.support-icon {
+  flex-shrink: 0;
+  border-radius: 3px;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+}
+</style>
\ No newline at end of file
diff --git a/MyCompSuite/main.vue b/MyCompSuite/main.vue
index bfad263..13ac587 100644
--- a/MyCompSuite/main.vue
+++ b/MyCompSuite/main.vue
@@ -1,40 +1,55 @@
 <template>
   <div :class="$style['wrapper']">
-    <CoursePromotion />
-    <VueFrameworkOverview />
-    <div :class="$style['content-wrapper']">
-      <ApproachableBuilds />
-      <CheckboxGroupExample />
-      <CheckboxGroupDescription />
+    <div :class="$style['main-container']">
+      <div :class="$style['main-container']">
+        <HuggingFaceSearchBar />
+        <div :class="$style['nested-content']">
+          <HubCollaboration />
+          <div :class="$style['inner-wrapper']">
+            <FeatureList />
+            <EnterpriseFeatures />
+          </div>
+        </div>
+      </div>
+      <SupportBanner />
     </div>
   </div>
 </template>
 
 <script>
-import CoursePromotion from './CoursePromotion/main.vue';
-import VueFrameworkOverview from './VueFrameworkOverview/main.vue';
-import ApproachableBuilds from './ApproachableBuilds/main.vue';
-import CheckboxGroupExample from './CheckboxGroupExample/main.vue';
-import CheckboxGroupDescription from './CheckboxGroupDescription/main.vue';
+import HuggingFaceSearchBar from './HuggingFaceSearchBar/main.vue';
+import HubCollaboration from './HubCollaboration/main.vue';
+import FeatureList from './FeatureList/main.vue';
+import EnterpriseFeatures from './EnterpriseFeatures/main.vue';
+import SupportBanner from './SupportBanner/main.vue';
 
 export default {
-  components: { CoursePromotion, VueFrameworkOverview, ApproachableBuilds, CheckboxGroupExample, CheckboxGroupDescription }
+  components: { HuggingFaceSearchBar, HubCollaboration, FeatureList, EnterpriseFeatures, SupportBanner }
 };
 </script>
 
 <style module>
 .wrapper {
+  padding: 0px 4px 15px 0px;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.nested-content {
+  margin-top: 100px;
+  margin-left: 82px;
+  margin-right: 82px;
   display: flex;
   flex-direction: column;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  width: 864px;
 }
 
-.content-wrapper {
+.inner-wrapper {
+  margin-top: 95px;
   display: flex;
-  align-self: center;
-  margin-top: 106px;
-  gap: 46;
+  flex-direction: row;
+  justify-content: space-between;
 }
 </style>
\ No newline at end of file