add link

css/style.css

@@ -700,6 +700,7 @@ input[type="radio"][class="style"]:checked + label {
 @media (max-width: 576px) {
   .hero__h2 {
     font-size: 2rem;
+    margin: 0rem;
   }
 }
 

css/style.scss

@@ -634,6 +634,7 @@ input[type="radio"][class="style"]:checked + label {
 		}
 		@media (max-width: 576px) {
 			font-size: 2rem;
+			margin: 0rem; 
 		}
 	}
 	&__p {

index_withoutAmp.html

@@ -57,16 +57,16 @@
               <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                   <li class="nav-item">
-                    <a class="nav-link text-light" href="#">專訪/愛心捐款</a>
+                    <a class="nav-link text-light linktoSection" data-section="#section1">專訪/愛心捐款</a>
                   </li>
                   <li class="nav-item">
-                    <a class="nav-link text-light" href="#">合作夥伴</a>
+                    <a class="nav-link text-light linktoSection" data-section="#section2">合作夥伴</a>
                   </li>
                   <li class="nav-item">
                     <a class="nav-link text-light" href="#">AI無人電視台</a>
                   </li>
                   <li class="nav-item">
-                    <a class="nav-link text-light" href="#">關於集仕多</a>
+                    <a class="nav-link text-light" href="https://ai.choozmo.com/aboutus/info/">關於集仕多</a>
                   </li>
                 </ul>
               </div>
@@ -78,8 +78,8 @@
               <p class="text-light mt-4 mb-5">集仕多使用AI Spokesgirl技術 訪問默默幫助社會的NGO，<br>也許你第一次認識它、或是遺忘了，<br>
                 但AI 幫你記著，讓AI主播帶您重新認識NGO...</p>
               <div class="d-flex "text-light">
-                <button class="btn-yellow me-3" onclick="window.open()">了解AI主播</button>
-                <button class="btn-yellow btn-yellow__fill">公益頻道</button>
+                <button class="btn-yellow me-3" onclick="window.open('https://ai.choozmo.com/')">了解AI主播</button>
+                <button class="btn-yellow btn-yellow__fill" onclick="window.open('https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg')">公益頻道</button>
               </div>
             </div>
             <div class="col"></div>
@@ -90,7 +90,7 @@
         <div class="container text-center">
           <h3 style="color: black;margin-bottom: 1.5rem;" class="text-center">用AI的世界看見愛、跟NGO一起做公益。</h3>
           <p style="color: #4C4C4C;">在疫情的衝擊下，我們身後還有這群人默默幫助社會上的弱勢族群，集仕多使用AI<br>主播問答專訪的方式，帶您更了解這些人，而這些基金會需要您的幫助....</p>
-          <button class="btn-yellow btn-yellow__fill mt-3">愛心捐款</button>
+          <button class="btn-yellow btn-yellow__fill mt-3 linktoSection" data-section="#section1">愛心捐款</button>
         </div>
       </section>
       <section style="background-color: #2980B8;padding: 3.5rem 0;" class="condition">
@@ -135,8 +135,7 @@
                 <div class="item mx-1" style="background-image: url(./imgs/01.png);width: 100%;height: 16rem;background-size: cover;"></div>
                 <div class="item mx-1" style="background-image: url(./imgs/18083cec23.png);height: 16rem;background-size: cover;"></div>
                 <div class="item mx-1" style="background-image: url(./imgs/270670090_10159492256741273_8735688059836287786_n.jpg);height: 16rem;background-size: cover;"></div>
-                <div class="item mx-1" style="background-image: url(./imgs/01.png);height: 16rem;background-size: cover;"></div>
-                <div class="item mx-1" style="background-image: url(./imgs/01.png);height: 16rem;background-size: cover;"></div>
+                <div class="item mx-1" style="background-image: url(https://kids-career.com.tw/wp-content/uploads/2018/06/55C21743-F117-403E-A33A-E08D52935178.jpeg);height: 16rem;background-size: cover;"></div>
               </div>
             </div>
             <div class="col-md-5 ps-4" style="position: relative;">
@@ -153,7 +152,7 @@
           </div>
         </div>
       </section>
-      <section class="cards" style="padding: 4rem 0;background-color: #F1F5F9;">
+      <section class="cards" style="padding: 4rem 0;background-color: #F1F5F9;" id="section1">
         <div class="container text-center">
           <h2 style="color: black;text-align: center;" class="mb-5">AI主播與幕後英雄的專訪</h2>
           <div class="row">
@@ -346,7 +345,7 @@
           <button class="btn-blue">了解更多AI主播</button>
         </div>
       </section>
-      <section class="logos" style="background-color: white;padding: 3rem 0;">
+      <section class="logos" style="background-color: white;padding: 3rem 0;" id="section2">
         <div class="container">
           <h2 style="margin-top: 0rem;color: black;" class="text-center">基金會夥伴</h2>
           <div class="row justify-content-center d-none d-md-block" style="margin: auto auto;">

js/index.js

@@ -45,4 +45,16 @@ $('.items').slick({
       }
     }
   ]
-});
+});
+
+var menuBar_pc = $('.linktoSection');
+    menuBar_pc.on("click", function () {
+        console.log('ss');
+        var section = $(this).data("section");
+        $("html,body").animate(
+            {
+                scrollTop: $(section).offset().top
+            },
+            400
+        );
+    });