testsprite 정보 보완

helper/index.html

@@ -31,10 +31,18 @@
         <!-- Briefing Tab -->
         <div id="tab-briefing" class="tab-content active">
             <header class="hero">
-                <div class="container">
+                <div class="container hero-content">
                     <div class="badge animate-fade-in">Strategic Briefing</div>
                     <h1 class="animate-slide-up">AI 협업 기반<br><span class="gradient-text">코드 교차 검증 전략</span></h1>
                     <p class="subtitle animate-fade-in-delay">Maximize Quality | Optimize Cost | 5-Step Workflow</p>
+
+                    <div class="hero-video-container animate-slide-up">
+                        <div class="video-wrapper glass-card">
+                            <iframe
+                                src="https://player.vimeo.com/video/1149934634?autoplay=1&loop=1&byline=0&title=0&muted=1"
+                                frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+                        </div>
+                    </div>
                 </div>
             </header>
 
@@ -125,6 +133,21 @@
                 </div>
             </section>
 
+            <section id="visual-proof" class="section">
+                <div class="container">
+                    <div class="section-header">
+                        <span class="section-tag">Visual Evidence</span>
+                        <h2 class="section-title">검증 및 테스트의 실제</h2>
+                        <p>TestSprite MCP를 통한 자동화 테스트 결과 및 분석 화면</p>
+                    </div>
+                    <div class="glass-card visual-card animate-slide-up">
+                        <div class="image-container">
+                            <img src="img/testprite1.png" alt="TestSprite Core Analysis" class="feature-image">
+                        </div>
+                    </div>
+                </div>
+            </section>
+
             <section id="workflow-detail" class="section">
                 <div class="container">
                     <div class="section-header">

helper/style.css

@@ -122,13 +122,47 @@ h4,
 
 /* Hero Section */
 .hero {
-    height: 60vh;
+    min-height: 80vh;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     position: relative;
-    padding-top: 2rem;
+    padding: 6rem 0;
+    overflow: visible;
+}
+
+.hero-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 2;
+    width: 100%;
+}
+
+.hero-video-container {
+    width: 100%;
+    max-width: 900px;
+    margin-top: 3rem;
+    position: relative;
+}
+
+.video-wrapper {
+    padding: 1rem !important;
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.05);
+    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
+}
+
+.video-wrapper iframe {
+    width: 100%;
+    height: 100%;
+    border-radius: 16px;
+    border: none;
 }
 
 .badge {
@@ -150,6 +184,7 @@ h4,
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: 1.5rem;
+    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }
 
 .gradient-text {
@@ -181,6 +216,51 @@ h4,
     background: rgba(255, 255, 255, 0.05);
 }
 
+/* Visual Proof Section */
+.visual-card {
+    padding: 1.5rem !important;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+    position: relative;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.image-container {
+    width: 100%;
+    border-radius: 16px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 10px 40px rgba(123, 97, 255, 0.15);
+}
+
+.feature-image {
+    width: 100%;
+    height: auto;
+    display: block;
+    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.visual-card:hover .feature-image {
+    transform: scale(1.02);
+}
+
+.visual-card::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    background: var(--gradient);
+    z-index: -1;
+    border-radius: 26px;
+    opacity: 0.1;
+    filter: blur(15px);
+    transition: var(--transition);
+}
+
+.visual-card:hover::before {
+    opacity: 0.3;
+}
+
 /* Sections */
 .section {
     padding: 6rem 0;
@@ -251,7 +331,7 @@ h4,
     text-align: left;
 }
 
-.strategy-table th, 
+.strategy-table th,
 .strategy-table td {
     padding: 1.5rem;
     border-bottom: 1px solid var(--card-border);
@@ -510,28 +590,67 @@ h4,
 
 /* Animations */
 @keyframes slideUp {
-    from { opacity: 0; transform: translateY(30px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
-.animate-slide-up { animation: slideUp 0.8s ease forwards; }
-.animate-fade-in { animation: fadeIn 1s ease forwards; }
-.animate-fade-in-delay { opacity: 0; animation: fadeIn 1s ease 0.3s forwards; }
+.animate-slide-up {
+    animation: slideUp 0.8s ease forwards;
+}
+
+.animate-fade-in {
+    animation: fadeIn 1s ease forwards;
+}
+
+.animate-fade-in-delay {
+    opacity: 0;
+    animation: fadeIn 1s ease 0.3s forwards;
+}
 
 /* Responsive */
 @media (max-width: 1024px) {
-    .tool-detail-grid { grid-template-columns: 1fr; }
+    .tool-detail-grid {
+        grid-template-columns: 1fr;
+    }
 }
 
 @media (max-width: 768px) {
-    .hero h1 { font-size: 2.5rem; }
-    .hero { height: auto; padding: 6rem 0; }
-    .section { padding: 4rem 0; }
-    .outcome-grid { grid-template-columns: 1fr; }
-    .nav-container { flex-direction: column; gap: 1rem; }
-}
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+
+    .hero {
+        height: auto;
+        padding: 6rem 0;
+    }
+
+    .section {
+        padding: 4rem 0;
+    }
+
+    .outcome-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .nav-container {
+        flex-direction: column;
+        gap: 1rem;
+    }
+}