Update index.html

index.html

@@ -31,32 +31,55 @@
             margin-bottom: 10px;
         }
 
-        /* Featured Link Section */
-        .featured-link {
+        /* Featured Section with Videos */
+        .featured-section {
             background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
             border-radius: 20px;
-            padding: 30px;
+            padding: 40px;
             margin-bottom: 50px;
-            display: flex;
-            align-items: center;
-            gap: 30px;
-            flex-wrap: wrap;
         }
 
-        .featured-link img {
-            width: 300px;
-            border-radius: 10px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        .featured-section h2 {
+            font-size: 2em;
+            margin-bottom: 20px;
+            text-align: center;
         }
 
-        .featured-link .content {
-            flex: 1;
-            min-width: 250px;
+        .featured-section p {
+            text-align: center;
+            font-size: 1.1em;
+            margin-bottom: 30px;
         }
 
-        .featured-link h2 {
-            font-size: 2em;
-            margin-bottom: 15px;
+        .featured-media {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+
+        .featured-media-item {
+            background: #1a1a1a;
+            border-radius: 15px;
+            overflow: hidden;
+        }
+
+        .featured-media-item img,
+        .featured-media-item video {
+            width: 100%;
+            height: 250px;
+            object-fit: cover;
+            display: block;
+        }
+
+        .featured-media-item .caption {
+            padding: 10px;
+            text-align: center;
+            font-size: 0.9em;
+        }
+
+        .link-container {
+            text-align: center;
         }
 
         .visit-button {
@@ -69,7 +92,6 @@
             font-weight: bold;
             font-size: 1.1em;
             transition: all 0.3s ease;
-            margin-top: 15px;
         }
 
         .visit-button:hover {
@@ -96,7 +118,6 @@
             border-radius: 15px;
             overflow: hidden;
             transition: transform 0.3s ease;
-            cursor: pointer;
         }
 
         .gallery-item:hover {
@@ -159,16 +180,13 @@
             border: none;
         }
 
-        @media (max-width: 768px) {
-            .featured-link {
-                flex-direction: column;
-                text-align: center;
-            }
-
-            .featured-link img {
-                width: 100%;
+        @media (max-width: 1024px) {
+            .featured-media {
+                grid-template-columns: 1fr;
             }
+        }
 
+        @media (max-width: 768px) {
             .gallery {
                 grid-template-columns: 1fr;
             }
@@ -181,15 +199,33 @@
         <p>HuggingFace-based AI Development Portfolio</p>
     </div>
 
-    <!-- Featured Link Section -->
-    <div class="featured-link">
-        <img src="ginigen-screenshot.png" alt="Ginigen AI">
-        <div class="content">
-            <h2>🍌 Ginigen AI</h2>
-            <p>Next-Generation AI Solution Platform</p>
-            <p>Accelerate your business with innovative AI technology</p>
+    <!-- Featured Section -->
+    <div class="featured-section">
+        <h2>🍌 Ginigen AI</h2>
+        <p>Next-Generation AI Solution Platform - Accelerate your business with innovative AI technology</p>
+        
+        <div class="featured-media">
+            <div class="featured-media-item">
+                <img src="ginigen-screenshot.png" alt="Ginigen AI Screenshot">
+                <div class="caption">Ginigen AI Platform</div>
+            </div>
+            <div class="featured-media-item">
+                <video src="h1.mp4" controls>
+                    Your browser does not support the video tag.
+                </video>
+                <div class="caption">H1 Demo</div>
+            </div>
+            <div class="featured-media-item">
+                <video src="h2.mp4" controls>
+                    Your browser does not support the video tag.
+                </video>
+                <div class="caption">H2 Demo</div>
+            </div>
+        </div>
+
+        <div class="link-container">
             <a href="https://www.ginigen.ai/en" target="_blank" class="visit-button">
-                Visit Now →
+                Visit Ginigen AI Now →
             </a>
         </div>
     </div>
@@ -197,18 +233,6 @@
     <!-- Video Gallery -->
     <h2 class="section-title">🎬 Video Gallery</h2>
     <div class="gallery" id="video-gallery">
-        <div class="gallery-item">
-            <video src="h1.mp4" controls>
-                Your browser does not support the video tag.
-            </video>
-            <div class="caption">H1 Demo</div>
-        </div>
-        <div class="gallery-item">
-            <video src="h2.mp4" controls>
-                Your browser does not support the video tag.
-            </video>
-            <div class="caption">H2 Demo</div>
-        </div>
         <div class="gallery-item">
             <video src="q1.mp4" controls>
                 Your browser does not support the video tag.
@@ -224,7 +248,7 @@
         <div class="gallery-item">
             <video src="q3.mp4" controls>
                 Your browser does not support the video tag.
-            </div>
+            </video>
             <div class="caption">Q3 Demo</div>
         </div>
         <div class="gallery-item">
@@ -245,6 +269,18 @@
             </video>
             <div class="caption">Q6 Demo</div>
         </div>
+        <div class="gallery-item">
+            <video src="q7.mp4" controls>
+                Your browser does not support the video tag.
+            </video>
+            <div class="caption">Q7 Demo</div>
+        </div>
+        <div class="gallery-item">
+            <video src="q8.mp4" controls>
+                Your browser does not support the video tag.
+            </video>
+            <div class="caption">Q8 Demo</div>
+        </div>
     </div>
 
     <!-- Image Gallery -->
@@ -311,3 +347,26 @@
     </script>
 </body>
 </html>
+```
+
+## 주요 변경사항
+
+✅ **Featured Section**: 
+- Ginigen 스크린샷 + h1.mp4 + h2.mp4를 가로로 나란히 배치 (3열 그리드)
+- 그 아래 링크 버튼 중앙 배치
+
+✅ **Video Gallery**: 
+- q1~q8.mp4까지 8개 동영상을 2x4 그리드로 배치
+
+✅ **Image Gallery**: 
+- q1~q8.jpg까지 8개 이미지 유지
+
+## 파일 구조
+```
+your-space/
+├── index.html
+├── ginigen-screenshot.png
+├── h1.mp4
+├── h2.mp4
+├── q1.mp4 ~ q8.mp4 (총 8개)
+└── q1.jpg ~ q8.jpg (총 8개)