Polish company introduction landing page

index.html

@@ -8,7 +8,7 @@
       name="description"
       content="컴트로피 회사소개 웹페이지. 방송 그래픽, 실시간 데이터, AI 솔루션, 웹/앱 개발 역량 소개."
     >
-    <title>컴트로피 | Total IT Service</title>
+    <title>컴트로피 | Broadcast Data Graphics &amp; AI Solutions</title>
     <script>
       document.documentElement.classList.remove("no-js");
       document.documentElement.classList.add("js");
@@ -48,6 +48,7 @@
           <a href="#about">회사</a>
           <a href="#clients">고객사</a>
           <a href="#services">사업</a>
+          <a href="#cases">사례</a>
           <a href="#contact">문의</a>
         </nav>
         <a class="header__contact" href="mailto:ecoropy@naver.com">
@@ -66,7 +67,8 @@
         <a href="#about"><span>01</span>회사</a>
         <a href="#clients"><span>02</span>고객사</a>
         <a href="#services"><span>03</span>사업</a>
-        <a href="#contact"><span>04</span>문의</a>
+        <a href="#cases"><span>04</span>사례</a>
+        <a href="#contact"><span>05</span>문의</a>
       </nav>
       <p>서울특별시 금천구 서부샛길 606 대성지식산업센터 B동 1601호</p>
     </div>
@@ -80,14 +82,22 @@
         <div class="shell hero__inner">
           <div class="hero__copy reveal">
             <p class="eyebrow">Company Introduction</p>
-            <h1 id="heroTitle">고객과 함께<br>성장하는<br>Total IT Service</h1>
+            <h1 id="heroTitle">COMTROPY</h1>
+            <p class="hero__subhead">Broadcast Data Graphics &amp; AI Solutions</p>
             <p class="hero__lead">
-              컴트로피는 실시간 방송 자막 송출 시스템, 방송 TV Graphic 솔루션,
-              웹/앱 구축과 AI 솔루션을 개발하는 IT 솔루션 전문기업입니다.
+              방송 현장의 실시간 데이터를 안정적인 화면 언어로 바꾸는 개발 파트너.
+              컴트로피는 선거, 스포츠, 경제, 홈쇼핑, AI 영상 분석까지 운영 흐름에 맞춘
+              송출 시스템과 그래픽 솔루션을 만듭니다.
             </p>
+            <div class="hero__proof" aria-label="핵심 검증 분야">
+              <span>선관위 실시간 연동</span>
+              <span>KPGA 공식 기록</span>
+              <span>HD/UHD TV Graphic</span>
+              <span>Unreal / Unity</span>
+            </div>
             <div class="hero__actions">
-              <a class="button button--hot" href="#services">
-                <span>주요 사업 보기</span>
+              <a class="button button--hot" href="#cases">
+                <span>프로젝트 보기</span>
                 <i data-lucide="arrow-up-right"></i>
               </a>
               <a class="button" href="#contact">
@@ -97,20 +107,36 @@
             </div>
           </div>
 
-          <aside class="hero__console reveal" data-delay="1" aria-label="핵심 역량">
+          <aside class="hero__console reveal" data-delay="1" aria-label="컴트로피 핵심 솔루션 화면">
             <div class="console__top">
-              <span>LIVE SYSTEM</span>
+              <span>COMMAND CENTER</span>
               <strong>ON AIR</strong>
             </div>
+            <div class="hero__metrics" aria-label="주요 역량">
+              <div>
+                <strong>LIVE</strong>
+                <span>Data Interface</span>
+              </div>
+              <div>
+                <strong>CG</strong>
+                <span>Broadcast Output</span>
+              </div>
+              <div>
+                <strong>AI</strong>
+                <span>Vision Solution</span>
+              </div>
+            </div>
+            <div class="hero__screen">
+              <img src="assets/media/election-candidate-screen.webp" alt="선거방송 후보자 득표 그래픽 화면">
+            </div>
             <div class="signal-grid">
               <span>Election</span>
-              <span>Home Shopping</span>
+              <span>Sports TVG</span>
               <span>Finance</span>
-              <span>Sports</span>
+              <span>Shopping</span>
               <span>Virtual Graphic</span>
               <span>AI Vision</span>
             </div>
-            <img src="assets/media/election-candidate-screen.webp" alt="선거방송 후보자 득표 그래픽 화면">
           </aside>
         </div>
       </section>
@@ -133,13 +159,13 @@
         <div class="shell about__grid">
           <div class="section-heading reveal">
             <p class="eyebrow">01 / About</p>
-            <h2 id="aboutTitle">고객 감동 실현을 기업의 사명으로 삼습니다.</h2>
+            <h2 id="aboutTitle">방송사의 기술 연구소 역할을 수행하는 개발 파트너</h2>
           </div>
           <div class="about__body reveal" data-delay="1">
             <p>
-              최고의 기술력과 서비스를 지향하며 고객 중심의 사업경쟁력을 강화합니다.
-              핵심 서비스 분야의 품질을 보장하고, 고객의 가치 향상을 극대화할 수
-              있도록 끊임없이 개선합니다.
+              컴트로피는 실시간 방송 자막 송출 시스템, 방송 TV Graphic 솔루션,
+              웹/앱 구축과 AI 솔루션을 개발하는 IT 솔루션 전문기업입니다.
+              현장의 속도와 안정성을 이해하고, 운영자가 믿고 다룰 수 있는 시스템을 설계합니다.
             </p>
             <div class="value-strip" aria-label="핵심 가치">
               <strong>Best People</strong>
@@ -176,17 +202,20 @@
           </div>
           <div class="intro-band__copy reveal" data-delay="1">
             <p class="eyebrow">Company Profile</p>
-            <h2>방송사의 기술 연구소 역할을 대행하는 개발 파트너</h2>
+            <h2>실시간 데이터와 화면 출력 사이를 책임집니다.</h2>
             <p>
-              선거방송, 증권, 홈쇼핑, 스포츠와 게임 방송의 자막 송출 솔루션을
-              제공하고, 실시간 데이터 기반 방송 그래픽과 AI 솔루션, 웹 사이트 구축
-              사업역량을 강화하고 있습니다.
+              선거방송, 증권, 홈쇼핑, 스포츠와 게임 방송의 자막 송출 솔루션을 제공하고,
+              데이터 기반 방송 그래픽과 AI 솔루션, 웹 사이트 구축 역량을 강화하고 있습니다.
             </p>
             <dl class="profile-list">
               <div>
                 <dt>사업 분야</dt>
                 <dd>소프트웨어 개발 및 공급, 방송 TV Graphic 솔루션, 웹 콘텐츠 개발</dd>
               </div>
+              <div>
+                <dt>핵심 기술</dt>
+                <dd>실시간 데이터 연동, 송출 제어, API 서버, AI 영상 분석, VR/AR 그래픽</dd>
+              </div>
               <div>
                 <dt>위치</dt>
                 <dd>서울특별시 금천구 서부샛길 606 대성지식산업센터 B동 1601호</dd>
@@ -197,9 +226,15 @@
       </section>
 
       <section class="section clients" id="clients" aria-labelledby="clientsTitle">
-        <div class="shell section-heading section-heading--wide reveal">
-          <p class="eyebrow">02 / Clients</p>
-          <h2 id="clientsTitle">방송, 스포츠, 커머스, 게임 산업의 현장과 함께했습니다.</h2>
+        <div class="shell clients__head reveal">
+          <div class="section-heading section-heading--wide">
+            <p class="eyebrow">02 / Clients</p>
+            <h2 id="clientsTitle">방송, 스포츠, 커머스, 게임 산업의 현장과 함께했습니다.</h2>
+          </div>
+          <p class="client-note">
+            공공 방송부터 스포츠 중계, 홈쇼핑, 게임 방송까지 다양한 운영 환경에서
+            안정성과 정확도가 필요한 화면 시스템을 구축했습니다.
+          </p>
         </div>
         <div class="shell logo-grid reveal" data-delay="1">
           <figure><img src="assets/media/client-01-kpga.png" alt="KPGA"></figure>
@@ -229,46 +264,70 @@
 
         <div class="shell service-grid">
           <article class="service-card reveal">
-            <span>01</span>
+            <div class="service-card__top">
+              <span>01</span>
+              <i data-lucide="captions"></i>
+            </div>
             <h3>방송 그래픽 자막 송출 솔루션</h3>
             <p>선거방송, 홈쇼핑, 증권, 스포츠와 게임 데이터를 방송 그래픽으로 연결합니다.</p>
+            <div class="service-card__tags"><span>CG</span><span>Live Data</span><span>Output</span></div>
           </article>
           <article class="service-card reveal" data-delay="1">
-            <span>02</span>
+            <div class="service-card__top">
+              <span>02</span>
+              <i data-lucide="satellite-dish"></i>
+            </div>
             <h3>국제신호 제작</h3>
             <p>아시안게임, 동남아시안게임, 월드컵 등 국제경기 중계의 IS 제작 경험을 보유합니다.</p>
+            <div class="service-card__tags"><span>IS</span><span>HD/UHD</span><span>Sports</span></div>
           </article>
           <article class="service-card reveal" data-delay="2">
-            <span>03</span>
+            <div class="service-card__top">
+              <span>03</span>
+              <i data-lucide="scan-search"></i>
+            </div>
             <h3>AI 솔루션 연구 개발</h3>
             <p>딥러닝 기반 영상 분석과 거리 측정 시스템 등 현장형 AI 솔루션을 개발합니다.</p>
+            <div class="service-card__tags"><span>CUDA</span><span>Vision</span><span>Tracking</span></div>
           </article>
           <article class="service-card reveal">
-            <span>04</span>
+            <div class="service-card__top">
+              <span>04</span>
+              <i data-lucide="database-zap"></i>
+            </div>
             <h3>데이터베이스 시스템 구축</h3>
             <p>실시간 데이터 연계, API, 데이터 송수신 프로그램과 방송 송출 서버를 설계합니다.</p>
+            <div class="service-card__tags"><span>API</span><span>DB</span><span>Scheduler</span></div>
           </article>
           <article class="service-card reveal" data-delay="1">
-            <span>05</span>
+            <div class="service-card__top">
+              <span>05</span>
+              <i data-lucide="panel-top"></i>
+            </div>
             <h3>웹 사이트 / 앱 개발</h3>
             <p>방송 운영 시스템과 연동되는 웹 페이지, 모바일 앱, 관리 도구를 구현합니다.</p>
+            <div class="service-card__tags"><span>Web</span><span>Mobile</span><span>Admin</span></div>
           </article>
           <article class="service-card reveal" data-delay="2">
-            <span>06</span>
+            <div class="service-card__top">
+              <span>06</span>
+              <i data-lucide="box"></i>
+            </div>
             <h3>버추얼 그래픽 시스템</h3>
             <p>Unreal Engine, Unity 기반 VR/AR 시스템과 실시간 3D 그래픽 처리를 제공합니다.</p>
+            <div class="service-card__tags"><span>VR/AR</span><span>3D</span><span>Unity</span></div>
           </article>
         </div>
       </section>
 
-      <section class="section case-lab" aria-labelledby="caseTitle">
+      <section class="section case-lab" id="cases" aria-labelledby="caseTitle">
         <div class="shell case-lab__head reveal">
           <div>
-            <p class="eyebrow">Project Fields</p>
+            <p class="eyebrow">04 / Project Fields</p>
             <h2 id="caseTitle">현장에서 검증된 여섯 가지 솔루션</h2>
           </div>
           <p>
-            데이터 연동, 그래픽 송출, AI 분석, 운영 UI까지 현장 흐름에 맞춰 설계합니다.
+            데이터 연동, 그래픽 송출, AI 분석, 운영 UI까지 실제 방송 흐름에 맞춰 설계합니다.
           </p>
         </div>
 
@@ -296,15 +355,28 @@
 
           <article class="case-stage reveal" data-delay="1" aria-live="polite">
             <div class="case-stage__media">
+              <div class="case-stage__bar" aria-hidden="true">
+                <span></span><span></span><span></span>
+                <strong id="caseStatus">LIVE READY</strong>
+              </div>
               <img id="caseImage" src="assets/media/election-candidate-screen.webp" alt="선거방송 후보자 득표 그래픽 화면">
               <div class="case-stage__thumbs" id="caseThumbs"></div>
             </div>
             <div class="case-stage__copy">
               <p class="case-stage__kicker" id="caseKicker">2.1 선거방송</p>
+              <div class="case-stage__meta" aria-label="프로젝트 정보">
+                <span id="caseClient">Election Broadcast</span>
+                <span id="caseField">Real-time CG</span>
+              </div>
               <h3 id="caseName">선거방송 데이터 방송 그래픽 솔루션 개발</h3>
               <p id="caseDescription">
                 선관위 데이터와 방송 그래픽을 실시간으로 연동해 자막 송출 시스템을 구성합니다.
               </p>
+              <div class="case-stage__chips" id="caseTags" aria-label="핵심 기술"></div>
+              <div class="case-stat" aria-label="대표 성과">
+                <strong id="caseStatValue">Real-time</strong>
+                <span id="caseStatLabel">선관위 데이터와 방송 그래픽 연동</span>
+              </div>
               <ul id="caseBullets"></ul>
             </div>
           </article>
@@ -334,7 +406,7 @@
       <section class="section contact" id="contact" aria-labelledby="contactTitle">
         <div class="shell contact__grid">
           <div class="contact__copy reveal">
-            <p class="eyebrow">04 / Contact</p>
+            <p class="eyebrow">05 / Contact</p>
             <h2 id="contactTitle">방송 현장의 데이터를 안정적인 화면으로 연결합니다.</h2>
             <p>
               실시간 송출 시스템, 방송 그래픽, AI 영상 분석, 웹/앱 개발이 필요한 프로젝트를