app/template/bynoiezam/Block/service_nav_block.twig line 1

Open in your IDE?
  1. {#
  2. トップページ用 サービス導線ブロック
  3. 配置先: EC-CUBE管理画面 → コンテンツ管理 → ブロック管理
  4. ブロック名: service_nav_block
  5. #}
  7. <section class="nz-top-service-nav">
  8.     <style>
  9.     .nz-top-service-nav {
  10.         padding: 60px 20px;
  11.         background: #f8f9fa;
  12.     }
  13.     .nz-top-service-inner {
  14.         max-width: 1200px;
  15.         margin: 0 auto;
  16.     }
  17.     .nz-top-section-title {
  18.         text-align: center;
  19.         margin-bottom: 40px;
  20.     }
  21.     .nz-top-section-title-en {
  22.         display: block;
  23.         font-size: 12px;
  24.         font-weight: 600;
  25.         color: #1e3c72;
  26.         letter-spacing: 2px;
  27.         margin-bottom: 8px;
  28.     }
  29.     .nz-top-section-title-ja {
  30.         display: block;
  31.         font-size: 28px;
  32.         font-weight: 700;
  33.         color: #333;
  34.     }
  35.     .nz-top-service-grid {
  36.         display: grid;
  37.         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  38.         gap: 25px;
  39.     }
  40.     .nz-top-service-card {
  41.         display: flex;
  42.         flex-direction: column;
  43.         align-items: center;
  44.         padding: 35px 25px;
  45.         background: #fff;
  46.         border-radius: 12px;
  47.         box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  48.         text-decoration: none;
  49.         color: #333;
  50.         transition: all 0.3s ease;
  51.     }
  52.     .nz-top-service-card:hover {
  53.         transform: translateY(-5px);
  54.         box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  55.     }
  56.     .nz-top-service-icon {
  57.         font-size: 48px;
  58.         margin-bottom: 15px;
  59.     }
  60.     .nz-top-service-title {
  61.         font-size: 18px;
  62.         font-weight: 700;
  63.         margin: 0 0 10px;
  64.         text-align: center;
  65.     }
  66.     .nz-top-service-desc {
  67.         font-size: 13px;
  68.         color: #666;
  69.         text-align: center;
  70.         line-height: 1.6;
  71.         margin: 0;
  72.     }
  73.     </style>
  74.     
  75.     <div class="nz-top-service-inner">
  76.         <h2 class="nz-top-section-title">
  77.             <span class="nz-top-section-title-en">SERVICES</span>
  78.             <span class="nz-top-section-title-ja">サービス一覧</span>
  79.         </h2>
  80.         
  81.         <div class="nz-top-service-grid">
  82.             <a href="/user_data/guide_first" class="nz-top-service-card">
  83.                 <span class="nz-top-service-icon">📖</span>
  84.                 <h3 class="nz-top-service-title">初めての方へ</h3>
  85.                 <p class="nz-top-service-desc">当店のご紹介と<br>ご注文の流れ</p>
  86.             </a>
  87.             
  88.             <a href="{{ url('contact') }}" class="nz-top-service-card">
  89.                 <span class="nz-top-service-icon">📝</span>
  90.                 <h3 class="nz-top-service-title">お見積り・ご相談</h3>
  91.                 <p class="nz-top-service-desc">無料でお見積り<br>お気軽にご相談ください</p>
  92.             </a>
  93.             
  94.             <a href="/user_data/guide_gallery" class="nz-top-service-card">
  95.                 <span class="nz-top-service-icon">🎨</span>
  96.                 <h3 class="nz-top-service-title">制作実績</h3>
  97.                 <p class="nz-top-service-desc">世界一の美配線<br>制作事例をご覧ください</p>
  98.             </a>
  99.             
  100.             <a href="/user_data/guide_knowledge" class="nz-top-service-card">
  101.                 <span class="nz-top-service-icon">💡</span>
  102.                 <h3 class="nz-top-service-title">知識コンテンツ</h3>
  103.                 <p class="nz-top-service-desc">PC選びのヒントと<br>トラブル対処法</p>
  104.             </a>
  105.             
  106.             <a href="/user_data/guide_staff" class="nz-top-service-card">
  107.                 <span class="nz-top-service-icon">👤</span>
  108.                 <h3 class="nz-top-service-title">店主紹介</h3>
  109.                 <p class="nz-top-service-desc">誰が作っているか<br>顔が見える安心感</p>
  110.             </a>
  111.             
  112.             <a href="/user_data/guide_support" class="nz-top-service-card">
  113.                 <span class="nz-top-service-icon">🛡️</span>
  114.                 <h3 class="nz-top-service-title">購入者サポート</h3>
  115.                 <p class="nz-top-service-desc">セットアップガイド<br>トラブル対処法</p>
  116.             </a>
  117.         </div>
  118.     </div>
  119. </section>