update ai-anchor

layouts/ai-anchor/single.html

@@ -14,243 +14,12 @@
   <!-- Start of HubSpot Embed Code -->
   <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/20485755.js"></script>
   <!-- End of HubSpot Embed Code -->
-  <style>
-    .header__anchor_title {
-      font-size: 2rem;
-      color: #20616D;
-      font-weight: 400;
-
-    }
-
-    .footer {
-      color: #656565;
-    }
-
-    .footer a {
-      color: #656565;
-      text-decoration: none;
-    }
-
-    .footer h5 {
-      color: black;
-      font-weight: 600;
-      padding-bottom: 15px;
-    }
-
-    .footer .link {
-      padding-bottom: 20px;
-    }
-
-    .footer {
-      background-color: #F0F0F0;
-      padding: 3rem;
-    }
-
-    .footer .right-column {
-      border-left: 1px solid black;
-    }
-
-    .footer .footer-aigirl {
-      font-weight: 600;
-      font-size: 2rem;
-      margin-top: 1rem;
-      margin-bottom: 1rem;
-    }
-
-    .footer .footer-follow {
-      font-size: 1.6rem;
-      margin-bottom: 1rem;
-      color: black;
-      font-size: 1rem;
-      font-weight: 600;
-      margin-top: 2rem;
-    }
-
-    .footer .footer-socials a {
-      margin-right: 5px;
-    }
-
-    .ai-anchor {
-      overflow-x: hidden;
-    }
-
-    .ai-anchor .header {
-      padding-left: 6vw;
-      width: 80%;
-      margin: 65px auto 0;
-    }
-
-    @media (max-width: 767px) {
-      .ai-anchor .header {
-        width: 90%;
-        /* margin-top: 100px; */
-      }
-    }
-
-    .ai-anchor .header-right {
-      width: 90%;
-    }
-
-    .ai-anchor .header-right-bubble {
-      width: 25%;
-      top: -13%;
-      right: -10%;
-      left: auto;
-    }
-
-    .header-sub {
-      font-size: 20px;
-      text-align: left;
-      font-weight: bold;
-      color: #f8a154;
-    }
-
-    .ai-description {
-      padding: 0 8vw;
-    }
-
-    .ai-description section {
-      padding-left: 8rem;
-    }
-
-    .triangle-item {
-      padding-left: 7rem;
-    }
-
-    .triangle-item img {
-      width: 40px;
-      height: 100%;
-      image-rendering: -webkit-optimize-contrast;
-    }
-
-    .ai-description div img {
-      width: 30px;
-    }
-
-    .ai-description h5 {
-      margin: 0;
-      font-size: 22px;
-      font-weight: bold;
-      color: #ea5413;
-    }
-
-    .ai-description span,
-    .ai-anchor .content {
-      font-weight: bold;
-      color: #3190da;
-    }
-
-    .ai-anchor .content {
-      width: 800px;
-      margin: 10rem auto;
-      padding: 2rem 8rem;
-      border-radius: 20px;
-      background-color: #fff2ec;
-      font-size: 20px;
-    }
-
-    .content .img-01 {
-      position: absolute;
-      top: -75px;
-      left: -30px;
-      z-index: 1;
-      width: 45%;
-      image-rendering: -webkit-optimize-contrast;
-    }
-
-    .ai-anchor .header-dm {
-      max-width: 500px;
-
-    }
-
-    .price-box p {
-      margin: 0;
-      font-size: 16px;
-    }
-
-    .price-box .item {
-      font-size: 50px;
-    }
-
-    .ai-anchor-price mark {
-      background-color: transparent;
-      padding: 2px 1px;
-      border-radius: 5px;
-      color: #3190da;
-      background: linear-gradient(transparent 40%, rgba(255, 255, 255, 0) 50%, yellow 75%, yellow 90%, transparent 95%);
-    }
-
-    @media (max-width: 991px) {
-      .header {
-        padding-left: 0;
-        padding: 5%;
-      }
-
-      .ai-anchor .content {
-        width: 90%;
-        padding: 2rem 5vw;
-      }
-
-      .ai-description {
-        margin-top: 250px;
-      }
-
-      .ai-description section {
-        padding-left: 0;
-        padding: 0 10%;
-      }
-
-      .ai-description section:first-child {
-        margin-top: 150px;
-      }
-
-      .triangle-item {
-        padding-left: 0;
-      }
-
-      .triangle-item img {
-        transform: rotate(90deg);
-      }
-    }
-
-
-    @media (max-width: 767px) {
-      .ai-anchor .header-dm {
-        width: 90%;
-      }
-
-      .ai-description section {
-        padding: 0 5%;
-      }
-    }
-
-    @media (max-width: 567px) {
-      .ai-anchor .content {
-        padding-top: 130px;
-      }
-
-      .content .img-01 {
-        top: -40%;
-        width: 250px;
-      }
-    }
-
-    @media (max-width: 375px) {
-      .ai-description h5 {
-        font-size: 20px;
-      }
-
-      .header-title {
-        font-size: 2rem;
-      }
-    }
-  </style>
 </head>
 
 <body>
   {{ partial "navbar.html" . }}
-  <main class="ai-anchor">
-    <section class="header">
+  <main id="ai-anchor">
+    <!-- <section class="header">
       <img src="/imgs/01.webp" alt="" class="header-lefttop">
       <div class="row align-items-center g-0">
         <div class="col-12 col-lg-5 text-center pt-5 pt-lg-0">
@@ -259,21 +28,78 @@
           <p class="header-sub">圖文+影音+聯播<br>全方位媒體曝光，一次到位！</p>
 
           <p class="text-start">
-            ChoozMo 最強大的網路新聞聯播方案，將您的圖文報導製成 AI 主播影音新聞影片，保證發佈曝光到包括yahoo 新聞、新浪網、Pchome 新聞、LineToday 等十二家知名媒體平台！
+            ChoozMo 最強大的網路新聞聯播方案，將您的圖文報導製成 AI 主播影音新聞影片，保證發佈曝光到包括 yahoo 新聞、新浪網、Pchome 新聞、LineToday 等十二家知名媒體平台！
           <p>
             <button class="contact-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
         </div>
         <div class="col-12 col-lg-7" style="padding-top: 50px;">
           <div class="header-right header-dm" style="background-image: url('/imgs/圖層 5.png');">
             <img src="/imgs/02.webp" alt="" class="header-right-cir">
-            <!-- <img src="imgs/影片.webp" alt="" class="header-right__video"> -->
+            <img src="imgs/影片.webp" alt="" class="header-right__video">
             <img class="header-right-bubble" src="/imgs/圖層 8.png" alt="">
             <img class="header-right-linecir" src="/imgs/裝飾圓.webp" alt="">
           </div>
         </div>
       </div>
+    </section> -->
+
+    <section class="container header p-0">
+      <div class="row align-items-center">
+        <div class="col-12 col-lg-6 d-flex flex-column align-items-center">
+          <h2 class="header-title" style="margin-top: 100px;">
+            {{ .Params.packageTitle }}
+            <br>
+            {{ .Params.packageSub }}
+          </h2>
+          <section class="header-sub">
+            <span>圖文ｘ影音ｘ聯播<br>全方位媒體曝光，一次到位！</span>
+            <p>
+              {{ .Params.description }}
+              <br>
+              {{ .Params.descriptionSub }}
+            </p>
+          </section>
+          <button class="contact-btn" onclick="window.location.href=`/contact/service/`">立即諮詢</button>
+          <img src="/imgs/dm/stock-img-04.png" alt="" class="stock-bg">
+        </div>
+        <div class="col-12 col-lg-6 mt-5 mt-lg-0">
+          <img src="{{ .Params.packageBg }}" alt="" class="img-fluid">
+        </div>
+      </div>
     </section>
-    <div class="d-flex align-items-center flex-column flex-lg-row ai-description">
+
+    <div class="container ai-description">
+      <div class="row gx-5 ps-5 justify-content-center justify-content-lg-between">
+        <div class="col-12 col-lg-5">
+          <div class="d-flex align-items-center" style="margin-left: -30px;">
+            <img src="/imgs/資產 3.png" alt="">
+            <h5 class="ms-2">AI 主播報導影片｜提升知名度</h5>
+          </div>
+          <p class="text-start mt-3 pe-3" style="margin: 0;">透過 AI
+            主播報導影片，客戶能短時間內透過影音獲取資訊，更能透過報導增加客戶的信心度，不論是公司宣傳／產品發表／品牌經營，都能透過新聞稿發布，提升曝光及知名度！</p>
+        </div>
+        <div class="col-1">
+          <div class="triangle-item">
+            <img src="/imgs/三角形 1.png" alt="">
+          </div>
+        </div>
+        <div class="col-12 col-lg-5">
+          <section class="text-center">
+            <div class="d-flex align-items-center" style="margin-left: -30px;">
+              <img src="/imgs/資產 3.png" alt="">
+              <h5 class="ms-2">您僅需提供：</h5>
+            </div>
+            <ul class="text-start mt-3">
+              <li>新聞報導使用照片 5 張</li>
+              <li>新聞稿內容文字 1000 字以內</li>
+            </ul>
+            <span class="d-block text-start mt-3 pe-3">即可獲得總價值超過 36000 元的全方位媒體曝光方案！</span>
+          </section>
+        </div>
+      </div>
+    </div>
+
+    <!-- <div class="d-flex align-items-center flex-column flex-lg-row ai-description">
       <section class="category container text-center py-5">
         <div class="d-flex align-items-center" style="margin-left: -30px;">
           <img src="/imgs/資產 3.png" alt="">
@@ -296,7 +122,7 @@
         </ul>
         <span class="d-block text-start mt-3">即可獲得總價值超過 36000 元的全方位媒體曝光方案！</span>
       </section>
-    </div>
+    </div> -->
     <!-- <section class="category container text-center py-5 dm-description">
       <h2 class="category-sub-h2"></h2>
       <h5 style="font-weight: 300;">{{ .Params.description }}</h5>
@@ -314,7 +140,7 @@
             <!-- <p>優惠價</p> -->
             <!-- <p class="text-decoration-line-through">36000</p> -->
           </div>
-          <p class="item ms-3 ai-anchor-price"><mark>36000 元</mark>></p>
+          <p class="item ms-3 ai-anchor-price"><mark>36000 元</mark></p>
         </div>
       </div>
 

static/css/style.css

@@ -28,8 +28,15 @@
 }
 
 .header-title {
-  font-size: 3rem;
-  font-weight: bold;
+  font-size: 2.5rem;
+  line-height: 50px;
+  font-weight: 600;
+  color: #000;
+}
+@media (max-width: 768px) {
+  .header-title {
+    font-size: 2.2rem;
+  }
 }
 
 .header__sub {
@@ -136,6 +143,14 @@
   z-index: -1;
 }
 
+.stock-01 {
+  position: absolute;
+  z-index: -1;
+  width: 800px;
+  top: -180px;
+  left: -300px;
+}
+
 /* footer.html Start */
 .footer {
   color: #656565;
@@ -941,6 +956,141 @@
     top: 1.3rem;
   }
 }
+/* ai-anchor Start */
+#ai-anchor {
+  overflow-x: hidden;
+}
+#ai-anchor .stock-bg {
+  height: 850px;
+  left: -15vw;
+  top: -125px;
+  position: absolute;
+  z-index: -1;
+}
+@media (max-width: 1400px) {
+  #ai-anchor .stock-bg {
+    top: -130px;
+  }
+}
+@media (max-width: 991px) {
+  #ai-anchor .stock-bg {
+    top: -175px;
+  }
+}
+@media (max-width: 767px) {
+  #ai-anchor .stock-bg {
+    top: -155px;
+  }
+}
+@media (max-width: 490px) {
+  #ai-anchor .stock-bg {
+    top: -130px;
+  }
+}
+#ai-anchor .header-sub {
+  padding: 0 10px;
+  text-align: start;
+}
+#ai-anchor .header-sub span {
+  display: inline-block;
+  margin-top: 35px;
+  font-size: 24px;
+  font-weight: bold;
+  color: #f8a154;
+}
+#ai-anchor .header-sub p {
+  width: 450px;
+  margin: 20px auto;
+}
+@media (max-width: 991px) {
+  #ai-anchor .header-sub p {
+    width: auto;
+  }
+}
+#ai-anchor .ai-description {
+  padding: 200px 0 100px;
+}
+@media (max-width: 991px) {
+  #ai-anchor .ai-description {
+    padding: 100px 0;
+  }
+}
+#ai-anchor .ai-description div img {
+  width: 30px;
+}
+#ai-anchor .ai-description h5 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: bold;
+  color: #ea5413;
+}
+@media (max-width: 375px) {
+  #ai-anchor .ai-description h5 {
+    font-size: 20px;
+  }
+}
+@media (max-width: 991px) {
+  #ai-anchor .ai-description .triangle-item {
+    margin-left: -35px;
+  }
+}
+#ai-anchor .ai-description .triangle-item img {
+  width: 40px;
+  height: 100%;
+  image-rendering: -webkit-optimize-contrast;
+}
+@media (max-width: 991px) {
+  #ai-anchor .ai-description .triangle-item img {
+    transform: rotate(90deg);
+  }
+}
+#ai-anchor .content {
+  width: 800px;
+  margin: 10rem auto;
+  padding: 2rem 8rem;
+  border-radius: 20px;
+  background-color: #fff2ec;
+  font-size: 20px;
+}
+@media (max-width: 991px) {
+  #ai-anchor .content {
+    width: 90%;
+    padding: 2rem 5vw;
+  }
+}
+@media (max-width: 567px) {
+  #ai-anchor .content {
+    padding-top: 130px;
+  }
+}
+#ai-anchor .content .img-01 {
+  position: absolute;
+  top: -75px;
+  left: -30px;
+  z-index: 1;
+  width: 45%;
+  image-rendering: -webkit-optimize-contrast;
+}
+@media (max-width: 567px) {
+  #ai-anchor .content .img-01 {
+    top: -40%;
+    width: 250px;
+  }
+}
+#ai-anchor .content .ai-anchor-price mark {
+  background-color: transparent;
+  padding: 2px 1px;
+  border-radius: 5px;
+  color: #3190da;
+  background: linear-gradient(transparent 40%, rgba(255, 255, 255, 0) 50%, yellow 75%, yellow 90%, transparent 95%);
+}
+#ai-anchor .content,
+#ai-anchor .ai-description span {
+  font-weight: bold;
+  color: #3190da;
+}
+
+/* ai-anchor End */
 /* blog-traffic Start */
 .blog-traffic {
   overflow-x: hidden;
@@ -1141,13 +1291,6 @@
 #seo-dm {
   overflow: hidden;
 }
-#seo-dm .stock-01 {
-  position: absolute;
-  z-index: -1;
-  width: 800px;
-  top: -180px;
-  left: -300px;
-}
 #seo-dm .bg-img {
   width: 50%;
   position: absolute;

static/css/style.scss

@@ -31,10 +31,20 @@
   width: 350px;
 }
 
+// .header-title {
+//   font-size: 3rem;
+//   font-weight: bold;
+//   color: #20616d;
+// }
+
 .header-title {
-  font-size: 3rem;
-  font-weight: bold;
-  // color: #20616d;
+  font-size: 2.5rem;
+  line-height: 50px;
+  font-weight: 600;
+  color: #000;
+  @media (max-width: 768px) {
+    font-size: 2.2rem;
+  }
 }
 
 .header__sub {
@@ -141,6 +151,14 @@
   z-index: -1;
 }
 
+.stock-01 {
+  position: absolute;
+  z-index: -1;
+  width: 800px;
+  top: -180px;
+  left: -300px;
+}
+
 /* footer.html Start */
 
 .footer {
@@ -972,6 +990,130 @@
   }
 }
 
+/* ai-anchor Start */
+
+#ai-anchor {
+  overflow-x: hidden;
+  .stock-bg {
+    height: 850px;
+    left: -15vw;
+    top: -125px;
+    position: absolute;
+    z-index: -1;
+    @media (max-width: 1400px) {
+      top: -130px;
+    }
+    @media (max-width: 991px) {
+      top: -175px;
+    }
+    @media (max-width: 767px) {
+      top: -155px;
+    }
+    @media (max-width: 490px) {
+      top: -130px;
+    }
+  }
+  .header-sub {
+    padding: 0 10px;
+    text-align: start;
+    span {
+      display: inline-block;
+      margin-top: 35px;
+      font-size: 24px;
+      font-weight: bold;
+      color: #f8a154;
+    }
+    p {
+      width: 450px;
+      margin: 20px auto;
+      @media (max-width: 991px) {
+        width: auto;
+      }
+    }
+  }
+  .ai-description {
+    padding: 200px 0 100px;
+    @media (max-width: 991px) {
+      padding: 100px 0;
+    }
+    div {
+      img {
+        width: 30px;
+      }
+    }
+
+    h5 {
+      margin: 0;
+      font-size: 22px;
+      font-weight: bold;
+      color: #ea5413;
+
+      @media (max-width: 375px) {
+        font-size: 20px;
+      }
+    }
+    .triangle-item {
+      @media (max-width: 991px) {
+        margin-left: -35px;
+      }
+
+      img {
+        width: 40px;
+        height: 100%;
+        image-rendering: -webkit-optimize-contrast;
+
+        @media (max-width: 991px) {
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
+  .content {
+    width: 800px;
+    margin: 10rem auto;
+    padding: 2rem 8rem;
+    border-radius: 20px;
+    background-color: #fff2ec;
+    font-size: 20px;
+
+    @media (max-width: 991px) {
+      width: 90%;
+      padding: 2rem 5vw;
+    }
+
+    @media (max-width: 567px) {
+      padding-top: 130px;
+    }
+
+    .img-01 {
+      position: absolute;
+      top: -75px;
+      left: -30px;
+      z-index: 1;
+      width: 45%;
+      image-rendering: -webkit-optimize-contrast;
+      @media (max-width: 567px) {
+        top: -40%;
+        width: 250px;
+      }
+    }
+    .ai-anchor-price mark {
+      background-color: transparent;
+      padding: 2px 1px;
+      border-radius: 5px;
+      color: #3190da;
+      background: linear-gradient(transparent 40%, rgba(255, 255, 255, 0) 50%, yellow 75%, yellow 90%, transparent 95%);
+    }
+  }
+  .content,
+  .ai-description span {
+    font-weight: bold;
+    color: #3190da;
+  }
+}
+
+/* ai-anchor End */
+
 /* blog-traffic Start */
 
 .blog-traffic {
@@ -1138,13 +1280,6 @@
 
 #seo-dm {
   overflow: hidden;
-  .stock-01 {
-    position: absolute;
-    z-index: -1;
-    width: 800px;
-    top: -180px;
-    left: -300px;
-  }
   .bg-img {
     width: 50%;
     position: absolute;

webSite/content/ai-anchor/dm.md

@@ -5,26 +5,41 @@ tags = ["DM"]
 categories = ["DM"]
 layout = "DM"
 banner = "/imgs/dm/dm_computer.jpeg"
-packageTitle = "Big Data 大數據蒐集與分析"
-packageSub = "網路訊息瞬息萬變 活用數據 洞悉議題才能掌握"
-packageBg = "/imgs/dm/dm_computer.jpeg"
-description = "集仕多團隊擁有紥實 Machine Learning 與 Deep Learning 技術，大數據專案經驗豐富，包含美妝產業應用、廣告帶操、選戰分析、輿情分析、金融應用。團隊服務過的客戶包含雄獅旅遊總公司、信義房屋總部、永慶房屋總部、麗嬰房總公司等等。"
-block1_title = "Deep Learning 商品趨勢預測"
-block1_strong = "RNN用於時間序列預測協助廠商找出潛力商品"
-block1_text = "潛力商品與衰退商品預測示警 篩選隱含領先因子 (Latent Leading Factor) 偵測多層隱含領先因子，計算領先權重作爲輸入特徵"
-block1_img = "/imgs/dm/dm_data_1.png"
-block2_title = "Opinion monitoring 與情分析掌握新熱門趨勢事半功倍"
+packageTitle = "集仕多 新聞 AI 主播"
+packageSub = "媒體聯播網最佳方案"
+packageBg = "/imgs/dm/ai-anchor-01.png"
+description = "ChoozMo 最強大的網路新聞聯播方案，將您的圖文報導製成 AI 主播影音新聞影片，保證發佈曝光到包括 yahoo 新聞、新浪網、Pchome 新聞、LineToday 等十二家知名媒體平台！"
+descriptionSub = ""
+
+block1_title = ""
+block1_strong = ""
+block1_text = ""
+block1_img = ""
+
+block2_title = ""
 block2_strong = ""
-block2_text = "大數據除「數字」之外，消費者透過「文字」在網路各平台所產生的内容，也是具有價值的探究資料。"
-block2_img = "/imgs/dm/dm_data_2.png"
-block3_title = "Text Mining 文字探勘"
+block2_text1 = ""
+block2_text2 = ""
+block2_text3 = ""
+block2_img = "/imgs/dm/seo-03.png"
+
+block3_title = ""
 block3_strong = ""
-block3_text = "用於財經行業，從新聞中(非結構性資料)萃取分析師或機構的預測，比對結果回測分析師的預測績效。"
-block3_img = "/imgs/dm/dm_data_1.png"
+block3_text = ""
+block3_img1 = ""
+block3_img2 = ""
+
 block4_title = ""
 block4_strong = ""
-block4_list1 = ""
-block4_list2 = ""
-block4_list3 = ""
+block4_text1 = ""
+block4_text2 = ""
+block4_text3 = ""
 block4_img = ""
+
+block5_title = ""
+block5_strong = ""
+block5_text1 = ""
+block5_text2 = ""
+block5_text3 = ""
+block5_img = ""
 +++