update index

layouts/index.html

@@ -18,9 +18,10 @@
         <!-- {{ partial "components/main.html" . }} -->
         <!-- {{ partial "components/serve.html" . }} -->
         <!-- {{ partial "components/ai-video.html" . }} -->
-        <div class="reporter-img">
+        {{ partial "components/ai-reporter.html" . }}
+        <!-- <div class="reporter-img">
           <img src="imgs/home/ai-reporter.webp" alt="AI記者｜語音專訪">
-        </div>
+        </div> -->
         {{ partial "components/progress.html" . }}
         {{ partial "LP_components/blogs_tab.html" . }}
         {{ partial "LP_components/action.html" . }}

layouts/partials/components/ai-reporter.html

@@ -0,0 +1,59 @@
+<div class="container my-5 ai-reporter">
+  <div class="cover-img">
+    <img src="imgs/home/ai-reporter/cover.jpg" alt="AI記者｜語音專訪" class="img-fluid">
+  </div>
+
+  <div class="row mt-5 mt-lg-0">
+    <div class="col-md-4 info">
+      <img src="imgs/home/ai-reporter/素材-01.png" alt="" class="material">
+      <span class="grey">
+        <h3>AI記者訪問<br>語音回答省時間</h3>
+        <img src="imgs/home/ai-reporter/素材-03.png" alt="">
+      </span>
+      <p>AI自動將中文探訪翻譯成外語<br>並推廣到外文媒體</p>
+    </div>
+
+    <div class="col-md-4 info">
+      <span class="grey">
+        <h3>對抗負面假消息<br>解決公關危機</h3>
+        <img src="imgs/home/ai-reporter/素材-04.png" alt="">
+      </span>
+      <p>最快21天<br>將負評 變成 好評</p>
+    </div>
+
+    <div class="col-md-4 info">
+      <span class="grey">
+        <h3>大量優質内容<br>建立品牌形象</h3>
+        <img src="imgs/home/ai-reporter/素材-05.png" alt="">
+      </span>
+      <p>在特定搜尋詞(關鍵字)下<br>使正面文章佔滿首頁<br>讓搜尋者獲得有價值的資訊<br>進而建立積極的品牌形象</p>
+    </div>
+
+    <!-- 橘色區塊 -->
+
+    <div class="col-md-4 info">
+      <img src="imgs/home/ai-reporter/素材-02.png" alt="" class="material">
+      <span>
+        <h3>獨家技術優勢<br>客製化策略擬定</h3>
+        <img src="imgs/home/ai-reporter/素材-06.png" alt="">
+      </span>
+      <p>集仕多<br>大型語言模型(LLM)<br>融入台灣在地用語<br>網路鄉民用語<br>以AI生成高品質内容</p>
+    </div>
+
+    <div class="col-md-4 info">
+      <span>
+        <h3>AI人工智能<br>結合大數據分析</h3>
+        <img src="imgs/home/ai-reporter/素材-07.png" alt="">
+      </span>
+      <p>快速分析大量網頁數據<br>研究Google演算法<br>分析顧客最高流量來源<br>提煉出最佳關鍵字組</p>
+    </div>
+
+    <div class="col-md-4 info">
+      <span>
+        <h3>精準發佈<br>獨家監控技術</h3>
+        <img src="imgs/home/ai-reporter/素材-08.png" alt="">
+      </span>
+      <p>根據您的企業性質<br>發放到内容網站<br>平台增加曝光度<br>全自動化監控&定期成效報告<br>隨時掌握最新新聞趨勢</p>
+    </div>
+  </div>
+</div>

static/css/style.css

@@ -1190,17 +1190,98 @@
 #home .home-en .journey-content .list p {
   height: auto !important;
 }
-#home .reporter-img {
+#home .ai-reporter .cover-img {
   display: flex;
   justify-content: center;
 }
-#home .reporter-img img {
+#home .ai-reporter .cover-img img {
   width: 100%;
-  max-width: 70vw;
+}
+#home .ai-reporter .info {
+  margin: 3rem auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
 }
 @media (max-width: 767px) {
-  #home .reporter-img img {
-    max-width: 100vw;
+  #home .ai-reporter .info {
+    margin: auto;
+  }
+}
+#home .ai-reporter .info span {
+  width: 100%;
+  padding: 1rem 2rem;
+  border-radius: 30px;
+  background-color: #F8E6E2;
+}
+@media (max-width: 767px) {
+  #home .ai-reporter .info span {
+    width: 90%;
+  }
+}
+#home .ai-reporter .info span.grey {
+  background-color: #DDDDDD;
+}
+@media (max-width: 767px) {
+  #home .ai-reporter .info span.grey {
+    background-color: #F8E6E2;
+  }
+}
+#home .ai-reporter .info span h3 {
+  font-weight: bold;
+  text-align: center;
+  line-height: 1.4;
+}
+@media (max-width: 991px) {
+  #home .ai-reporter .info span h3 {
+    font-size: 1.25rem;
+  }
+}
+#home .ai-reporter .info span img {
+  width: 100%;
+  height: 30vh;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+@media (max-width: 991px) {
+  #home .ai-reporter .info span img {
+    height: 15vh;
+  }
+}
+#home .ai-reporter .info p {
+  margin-top: 1rem;
+  font-size: 1.25rem;
+  font-weight: bold;
+  text-align: center;
+  position: absolute;
+  bottom: -90px;
+}
+@media (max-width: 991px) {
+  #home .ai-reporter .info p {
+    font-size: 1rem;
+  }
+}
+@media (max-width: 767px) {
+  #home .ai-reporter .info p {
+    position: static;
+  }
+}
+#home .ai-reporter .info .material {
+  width: 100px;
+  position: absolute;
+  top: -25px;
+  left: -25px;
+}
+@media (max-width: 991px) {
+  #home .ai-reporter .info .material {
+    width: 75px;
+  }
+}
+@media (max-width: 767px) {
+  #home .ai-reporter .info .material {
+    left: 0px;
   }
 }
 
@@ -4403,6 +4484,11 @@
   padding-bottom: 5rem;
   margin: 0 auto 50px;
 }
+@media (max-width: 991px) {
+  .sec-blogtab {
+    padding-top: 0;
+  }
+}
 .sec-blogtab .blogtab-title {
   display: inline-block;
   margin-bottom: 30px;

static/css/style.scss

@@ -1361,16 +1361,98 @@
     }
   }
 
-  .reporter-img {
-    display: flex;
-    justify-content: center;
+  .ai-reporter {
+    .cover-img {
+      display: flex;
+      justify-content: center;
 
-    img {
-      width: 100%;
-      max-width: 70vw;
+      img {
+        width: 100%;
+      }
+    }
+
+    .info {
+      margin: 3rem auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
 
       @media (max-width: 767px) {
-        max-width: 100vw;
+        margin: auto;
+      }
+
+      span {
+        width: 100%;
+        padding: 1rem 2rem;
+        border-radius: 30px;
+        background-color: #F8E6E2;
+
+        @media (max-width: 767px) {
+          width: 90%;
+        }
+
+
+        &.grey {
+          background-color: #DDDDDD;
+
+          @media (max-width: 767px) {
+            background-color: #F8E6E2;
+          }
+        }
+
+        h3 {
+          font-weight: bold;
+          text-align: center;
+          line-height: 1.4;
+
+          @media (max-width: 991px) {
+            font-size: 1.25rem;
+          }
+        }
+
+        img {
+          width: 100%;
+          height: 30vh;
+          object-fit: contain;
+
+          @media (max-width: 991px) {
+            height: 15vh;
+          }
+        }
+      }
+
+      p {
+        margin-top: 1rem;
+        font-size: 1.25rem;
+        font-weight: bold;
+        text-align: center;
+        position: absolute;
+        bottom: -90px;
+
+        @media (max-width: 991px) {
+          font-size: 1rem;
+        }
+
+        @media (max-width: 767px) {
+          position: static;
+        }
+      }
+
+      .material {
+        width: 100px;
+        position: absolute;
+        top: -25px;
+        left: -25px;
+
+        @media (max-width: 991px) {
+          width: 75px;
+        }
+
+        @media (max-width: 767px) {
+          left: 0px;
+        }
       }
     }
   }
@@ -1856,6 +1938,7 @@
 }
 
 @media (max-width: 767px) {
+
   // .header {
   //   height: 70vh;
   // }
@@ -2642,7 +2725,7 @@
   }
 
   .card-content {
-    & > div {
+    &>div {
       display: flex;
       flex-direction: column;
       // border: 2px solid #ffebe2;
@@ -3698,7 +3781,7 @@
       filter: invert(33%) sepia(55%) saturate(2232%) hue-rotate(357deg) brightness(102%) contrast(89%);
     }
 
-    .content > div {
+    .content>div {
       margin-bottom: 40px;
       padding: 0px 15px;
       border-left: 1px solid rgba(0, 0, 0, 0.125);
@@ -4100,7 +4183,7 @@
     .row {
       padding: 0 5vw;
 
-      & > div {
+      &>div {
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -4691,15 +4774,15 @@
       }
     }
 
-    .table-striped > tbody > tr:nth-child(odd) > td,
-    .table-striped > tbody > tr:nth-child(odd) > th {
+    .table-striped>tbody>tr:nth-child(odd)>td,
+    .table-striped>tbody>tr:nth-child(odd)>th {
       box-shadow: none;
       background-color: #fdeae1;
       border-bottom-width: 0px !important;
     }
 
-    .table-striped > tbody > tr:nth-child(even) > td,
-    .table-striped > tbody > tr:nth-child(even) > th {
+    .table-striped>tbody>tr:nth-child(even)>td,
+    .table-striped>tbody>tr:nth-child(even)>th {
       border-bottom-width: 0px !important;
     }
 
@@ -4840,6 +4923,10 @@
   padding-bottom: 5rem;
   margin: 0 auto 50px;
 
+  @media (max-width: 991px) {
+    padding-top: 0;
+  }
+
   .blogtab-title {
     display: inline-block;
     margin-bottom: 30px;
@@ -5675,6 +5762,7 @@
 
 #responsive-iframe {
   right: 3px;
+
   @media (max-width: 768px) {
     // width: 375px; /* 行動裝置上的寬度 */
     // height: 650px; /* 行動裝置上的高度 */
@@ -5844,4 +5932,4 @@
       margin-top: 0.3rem !important;
     }
   }
-}
+}