update

style.css

@@ -89,16 +89,25 @@ body {
     margin-bottom: 2rem;
 }
 
-h1, h2 {
+h1 {
     margin: 0.5rem 0;
     font-size: 3.5rem;
     font-weight: bold;
     background: linear-gradient(45deg, #fff, #e0e0e0);
     -webkit-background-clip: text;
+    background-clip: text;
     -webkit-text-fill-color: transparent;
     text-shadow: 0 0 30px rgba(255,255,255,0.1);
 }
 
+h2 {
+    margin: 1.5rem 0 1rem;
+    font-size: 2.2rem;
+    font-weight: bold;
+    color: #2196F3;
+    text-shadow: 0 0 15px rgba(33,150,243,0.2);
+}
+
 .announcement-section {
     margin: 2rem 0;
 }
@@ -282,21 +291,43 @@ h1, h2 {
     transform: scale(1.05);
 }
 
-.huggingface-link {
-    margin-top: 2rem;
+.resource-links-section {
+    margin: 3rem 0 1rem;
+    padding: 1rem;
+    background: rgba(255,255,255,0.03);
+    border-radius: 16px;
+}
+
+.resource-links {
+    margin-top: 1rem;
     font-size: 0.9rem;
     color: #888;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+    align-items: center;
+}
+
+.resource-links p {
+    margin: 0;
+    margin-right: 0.5rem;
 }
 
-.huggingface-link a {
+.resource-link {
     color: #2196F3;
     text-decoration: none;
-    transition: color 0.3s ease;
+    transition: all 0.3s ease;
+    padding: 0.4rem 1rem;
+    background: rgba(33, 150, 243, 0.1);
+    border-radius: 20px;
+    font-weight: 500;
 }
 
-.huggingface-link a:hover {
-    color: #1976D2;
-    text-decoration: underline;
+.resource-link:hover {
+    color: white;
+    background: #2196F3;
+    transform: translateY(-2px);
 }
 
 .highlight-links {
@@ -306,6 +337,221 @@ h1, h2 {
     justify-content: center;
 }
 
+/* Introduction Section */
+.intro-section {
+    margin: 2rem 0;
+    padding: 1.5rem;
+    background: rgba(255,255,255,0.03);
+    border-radius: 16px;
+    text-align: left;
+    line-height: 1.6;
+}
+
+.intro-section p {
+    color: #ddd;
+    line-height: 1.6;
+    font-size: 1.1rem;
+}
+
+.hero-image {
+    width: 100%;
+    margin: 30px 0;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+}
+
+.benchmark-image {
+    width: 100%;
+    margin: 30px 0;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+}
+
+.full-width-img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* News Section */
+.news-section {
+    margin: 2rem 0;
+    padding: 1.5rem;
+    background: rgba(255,255,255,0.03);
+    border-radius: 16px;
+    text-align: left;
+}
+
+.news-items {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.news-item {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+
+.news-date {
+    color: #2196F3;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.news-content {
+    color: #ddd;
+}
+
+.news-content a {
+    color: #2196F3;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.news-content a:hover {
+    color: #64B5F6;
+    text-decoration: underline;
+}
+
+/* Quick Start Section */
+.quickstart-section {
+    margin: 3rem 0;
+    padding: 1.5rem;
+    background: rgba(255,255,255,0.03);
+    border-radius: 16px;
+    text-align: left;
+}
+
+.quickstart-section p {
+    color: #ddd;
+    line-height: 1.6;
+}
+
+.code-block {
+    margin: 1rem 0;
+    padding: 1rem;
+    background: rgba(0,0,0,0.3);
+    border-radius: 8px;
+    overflow-x: auto;
+}
+
+.code-block pre {
+    margin: 0;
+}
+
+.code-block code {
+    color: #E0E0E0;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+
+/* Showcase Section */
+.showcase-section {
+    margin: 3rem 0;
+    padding: 1.5rem;
+    background: rgba(255,255,255,0.03);
+    border-radius: 16px;
+    text-align: left;
+}
+
+.showcase-item {
+    margin-bottom: 2rem;
+    display: grid;
+}
+
+.showcase-description {
+    flex: 1;
+}
+
+.showcase-image {
+    height: auto;
+    background: rgba(0,0,0,0.2);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #888;
+    font-style: italic;
+    border: 1px dashed rgba(255,255,255,0.2);
+    overflow: hidden;
+}
+
+.showcase-img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    border-radius: 8px;
+    transition: transform 0.3s ease;
+}
+
+.showcase-img:hover {
+    transform: scale(1.02);
+}
+
+.showcase-item-full {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 80px;
+    width: 100%;
+}
+
+.showcase-description-full {
+    margin-bottom: 30px;
+    text-align: center;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0 20px;
+}
+
+.showcase-description-full h3 {
+    font-size: 24px;
+    margin-bottom: 15px;
+    color: #4a9eff;
+}
+
+.showcase-image-full {
+    width: 100%;
+    height: auto;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+}
+
+.showcase-img-full {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    display: block;
+    transition: transform 0.5s ease;
+}
+
+.showcase-img-full:hover {
+    transform: scale(1.01);
+}
+
+.showcase-conclusion {
+    margin-top: 2rem;
+    padding: 1rem;
+    background: rgba(33,150,243,0.1);
+    border-radius: 8px;
+    border-left: 4px solid #2196F3;
+}
+
+.showcase-conclusion p {
+    color: #fff;
+    font-size: 1.1rem;
+    line-height: 1.6;
+    margin: 0;
+}
+
 .highlight-link {
     display: inline-block;
     padding: 0.6rem 1.2rem;
@@ -359,10 +605,14 @@ h1, h2 {
 }
 
 @media (max-width: 600px) {
-    h1, h2 {
+    h1 {
         font-size: 2.5rem;
     }
     
+    h2 {
+        font-size: 1.8rem;
+    }
+    
     .announcement {
         font-size: 1.5rem;
     }
@@ -399,6 +649,52 @@ h1, h2 {
         gap: 0.8rem;
     }
     
+    .intro-section,
+    .news-section,
+    .quickstart-section,
+    .showcase-section,
+    .resource-links-section {
+        padding: 1rem;
+        margin: 1.5rem 0;
+    }
+    
+    .code-block {
+        padding: 0.5rem;
+    }
+    
+    .showcase-image {
+        height: auto;
+        max-height: 300px;
+    }
+    
+    .showcase-description-full {
+        padding: 0 15px;
+        margin-bottom: 20px;
+    }
+    
+    .showcase-image-full {
+        border-radius: 8px;
+    }
+    
+    .showcase-item-full {
+        margin-bottom: 50px;
+    }
+    
+    .hero-image img,
+    .benchmark-image img {
+        border-radius: 8px;
+    }
+    
+    .news-item {
+        flex-direction: column;
+        gap: 0.3rem;
+    }
+    
+    .resource-links {
+        flex-direction: column;
+        gap: 0.8rem;
+    }
+    
     .highlight-link {
         text-align: center;
     }