feat: GTSIT 사이트 구축

app/Views/home.php

@@ -0,0 +1,66 @@
+<section class="hero">
+  <div class="container hero-grid">
+    <div class="hero-copy">
+      <span class="eyebrow">20년 현장 경험 · 통신 인프라 전문</span>
+      <h1>사무실 네트워크,<br>처음부터 끝까지 책임집니다</h1>
+      <p>LAN 구축부터 키폰·CCTV 시공과 유지보수까지 직접 시공팀이 안정적인 통신 환경을 책임집니다.</p>
+      <div class="hero-actions"><a class="button button-primary" href="tel:<?= e(site_setting('phone', config('app.contact.phone'))) ?>">전화상담 <?= e(site_setting('phone', config('app.contact.phone'))) ?></a><a class="button button-secondary" href="/contact">1:1 온라인 문의</a></div>
+      <small><?= e(site_setting('business_hours', config('app.contact.business_hours'))) ?> · 견적 상담 무료</small>
+    </div>
+    <div class="hero-visual hero-slider" data-hero-slider aria-label="주요 시공 현장 사진">
+      <div class="hero-slides" aria-live="off">
+        <figure class="hero-slide is-active" aria-hidden="false"><img src="<?= e(asset('images/field/keyphone-network-rack.jpg')) ?>" alt="키폰과 네트워크 장비를 구성한 통신 랙" width="1200" height="900" fetchpriority="high"><figcaption>키폰·네트워크 통합 장비 구성</figcaption></figure>
+        <figure class="hero-slide" aria-hidden="true"><img src="<?= e(asset('images/field/lan-cabling-rack.jpg')) ?>" alt="포트별로 정리하고 라벨링한 네트워크 배선 랙" width="1200" height="900" loading="lazy"><figcaption>네트워크 배선 정리와 라벨링</figcaption></figure>
+        <figure class="hero-slide" aria-hidden="true"><img src="<?= e(asset('images/field/cctv-control-rack.jpg')) ?>" alt="여러 CCTV 화면을 확인하는 녹화장치와 관제 랙" width="1200" height="900" loading="lazy"><figcaption>CCTV 녹화장치·관제 환경 구성</figcaption></figure>
+        <figure class="hero-slide" aria-hidden="true"><img src="<?= e(asset('images/field/outdoor-wireless-link.jpg')) ?>" alt="건물 옥상에 설치한 옥외 무선 통신 장비" width="1200" height="900" loading="lazy"><figcaption>옥외 무선 통신 구간 설치</figcaption></figure>
+      </div>
+      <div class="hero-slider-controls">
+        <button class="hero-slider-arrow" type="button" data-slider-prev aria-label="이전 시공 사진">‹</button>
+        <div class="hero-slider-dots" role="group" aria-label="시공 사진 선택">
+          <button class="is-active" type="button" data-slider-dot="0" aria-label="1번째 사진 보기" aria-current="true"></button>
+          <button type="button" data-slider-dot="1" aria-label="2번째 사진 보기"></button>
+          <button type="button" data-slider-dot="2" aria-label="3번째 사진 보기"></button>
+          <button type="button" data-slider-dot="3" aria-label="4번째 사진 보기"></button>
+        </div>
+        <button class="hero-slider-arrow" type="button" data-slider-next aria-label="다음 시공 사진">›</button>
+        <button class="hero-slider-pause" type="button" data-slider-pause aria-pressed="false">자동재생 일시정지</button>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="stats" aria-label="주요 실적">
+  <div class="container stats-grid">
+    <div><strong>20<small>년</small></strong><span>통신 인프라 업력</span></div><div><strong>1,200<small>+</small></strong><span>누적 시공 현장</span></div><div><strong>24<small>시간</small></strong><span>견적 회신 기준</span></div><div><strong>A/S</strong><span>시공 후 사후관리</span></div>
+  </div>
+</section>
+
+<section class="section services" aria-labelledby="services-title">
+  <div class="container"><header class="section-heading centered"><span>SERVICES</span><h2 id="services-title">전문 시공 서비스</h2><p>한 곳에서 설계·시공·유지보수를 책임집니다.</p></header>
+    <div class="service-grid">
+      <?php
+      $serviceIcons = [
+          'network' => '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="14" width="20" height="8" rx="2"/><path d="M6 18h.01M10 18h.01M15 10v4M17.8 7.2a4 4 0 0 0-5.6 0M20.7 4.3a8 8 0 0 0-11.4 0"/></svg>',
+          'keyphone' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.8.7a2 2 0 0 1 1.7 2Z"/></svg>',
+          'cctv' => '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="m16 10 6-3v10l-6-3zM6 10h4"/></svg>',
+          'maintenance' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 8l-7 6.9a2.1 2.1 0 0 1-3-3l7-6.9a6 6 0 0 1 7.9-8z"/></svg>',
+      ];
+      $services = [
+          ['네트워크(LAN) 구축', '사무실과 건물의 유선·무선 네트워크를 안정적으로 설계하고 시공합니다.', '네트워크 구축', 'network'],
+          ['키폰시스템', '사업장 규모에 맞는 주장치와 내선 구성을 제안하고 설치합니다.', '키폰시스템', 'keyphone'],
+          ['CCTV 보안', '현장에 맞는 카메라와 저장장치, 통합 관제 환경을 구축합니다.', 'CCTV 설치', 'cctv'],
+          ['시공·유지보수', '정기 점검과 장애 대응까지 통신 인프라를 지속적으로 관리합니다.', '시공·유지보수', 'maintenance'],
+      ];
+      foreach ($services as [$name, $text, $type, $icon]): ?>
+        <article class="service-card"><span class="service-icon type-<?= e($icon) ?>" aria-hidden="true"><?= $serviceIcons[$icon] ?></span><h3><?= e($name) ?></h3><p><?= e($text) ?></p><a href="/contact?type=<?= rawurlencode($type) ?>">상담 요청</a></article>
+      <?php endforeach; ?>
+    </div>
+  </div>
+</section>
+
+<section class="section process" aria-labelledby="process-title"><div class="container"><header class="section-heading centered"><span>PROCESS</span><h2 id="process-title">상담부터 사후관리까지</h2><p>확인 가능한 5단계 과정으로 진행합니다.</p></header><ol class="process-grid"><li><b>1</b><strong>상담 신청</strong><span>전화 또는 온라인 요청</span></li><li><b>2</b><strong>현장 조사</strong><span>환경과 요구사항 확인</span></li><li><b>3</b><strong>견적 제안</strong><span>항목별 구성 안내</span></li><li><b>4</b><strong>시공</strong><span>안전한 설치와 검수</span></li><li><b>5</b><strong>사후관리</strong><span>점검과 장애 대응</span></li></ol></div></section>
+
+<section class="section latest" aria-labelledby="latest-title"><div class="container"><header class="section-heading row"><div><span>BLOG</span><h2 id="latest-title">시공 이야기와 알아두면 좋은 정보</h2></div><a class="button button-secondary button-small" href="/blog">블로그 더보기</a></header>
+  <?php if ($posts): ?><div class="post-grid"><?php foreach ($posts as $post): ?><article class="post-card"><div class="post-thumbnail"><?php if (!empty($post['image_path'])): ?><img src="<?= e($post['image_path']) ?>" alt="<?= e($post['image_alt']) ?>" loading="lazy"><?php else: ?><div class="post-placeholder" data-category="<?= e($post['category']) ?>" aria-hidden="true"><img src="<?= e(asset('images/company-logo-v3.png')) ?>" alt="" width="136" height="63"><small>TECH FIELD NOTE</small></div><?php endif; ?><span class="post-category"><?= e($post['category']) ?></span></div><div class="post-body"><h3><a href="/blog/<?= e($post['slug']) ?>"><?= e($post['title']) ?></a></h3><p><?= e($post['excerpt']) ?></p><time datetime="<?= e(date('Y-m-d', strtotime($post['published_at']))) ?>"><?= e(date('Y.m.d', strtotime($post['published_at']))) ?></time></div></article><?php endforeach; ?></div>
+  <?php else: ?><div class="empty-state"><h3>콘텐츠를 준비하고 있습니다</h3><p>시공 사례와 유용한 정보를 순차적으로 등록하겠습니다.</p></div><?php endif; ?>
+</div></section>