4/8 上線細部修正

config.toml

@@ -158,7 +158,7 @@ identifier = "home"
 
 
 [[menu.main]]
-name = "家具規劃師"
+name = "規劃師服務"
 url = "/room_planner"
 weight = 2
 identifier = "solution"
@@ -201,7 +201,7 @@ identifier = "solution"
 
 
 [[menu.main]]
-name = "規劃作品"
+name = "規劃作品集"
 url = "/collection"
 weight = 3
 identifier = "collection"

content/_index.md

@@ -40,40 +40,38 @@ draft: false
     </div>
 </section>
 
-<section class="section15">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-6 col-sm-12">
-                <div class="block">
-                    <div class="section-title">
-                        <div class="title mb-4"><b>專門服務首購族的室內設計品牌</b></div>
-                        <div><b>傳統的空間設計將60-80%的預算</b></div>
-                        <div><b>花在「重裝修」上</b></div>
-                        <div><b>我們則改變作法小寶優居使用「輕裝修」</b></div>
-                        <div><b>降低不必要的空間裝修與裝飾</b></div>
-                        <div><b>再搭配我們自己設計的</b></div>
-                        <div><b>家具與模組系統櫃</b></div>
-                        <div><b>規劃你的新家</b></div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-6 col-sm-12">
-                <div class="block">
-                    <amp-img
-                        class="mb-3"
-                        alt="小寶優居"
-                        src="/img/home2/2.webp"
-                        width="2696"
-                        height="954"
-                        layout="responsive">
-                    </amp-img>
-                    <p>「美感和預算，沒有絕對相關」</p>
-                    <p>我們追求</p>
-                    <p>裝修預算與家具、模組系統櫃之間</p>
-                    <p>達成絕妙平衡</p>
-                </div>
+<section class="section25">
+    <div class="container text-center">
+        <div class="mb-5">
+            <div class="title"><b>我們和傳統做法 不一樣</b></div>
+        </div>
+        <div class="mb-5">
+            <h4><b>傳統的空間設計</b></h4>
+            <h4><b>將60-80%的預算花在「重裝修」上</b></h4>
+            <h4><b>我們則改變做法</b></h4>
+            <h4><b>小寶優居使用「輕裝修」</b></h4>
+            <h4><b>降低不必要的空間裝修與裝飾</b></h4>
+            <h4><b>再搭配我們自己設計的</b></h4>
+            <h4><b>家具與模組系統櫃，規劃你的新家</b></h4>
+        </div>
+        <div class="row justify-content-md-center">
+            <div class="col-md-6">
+                <amp-img
+                    class="text-center"
+                    alt="小寶優居"
+                    src="/img/home2/2.webp"
+                    width="2758"
+                    height="1050"
+                    layout="responsive">
+                </amp-img>
             </div>
         </div>
+        <div>
+            <h4><b>「美感和預算，沒有絕對相關」</b></h2>
+            <h4><b>我們追求</b></h2>
+            <h4><b>裝修預算與家具、模組系統櫃之間</b></h2>
+            <h4><b>達成絕妙平衡</b></h2>
+        </div>
     </div>
 </section>
 
@@ -87,13 +85,13 @@ draft: false
 
 <section class="section16">
     <div class="container text-center">
-        <div class="row">
-            <h2><b>規劃師 六大服務特色</b></h2>
+        <div class="mb-5">
+            <div class="title"><b>規劃師 六大服務特色</b></div>
         </div>
         <div class="row row-cols-2 row-cols-sm-3 row-cols-lg-6">
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="生活動線"
@@ -112,7 +110,7 @@ draft: false
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="收納規劃"
@@ -131,7 +129,7 @@ draft: false
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-1">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="色彩風格"
@@ -150,7 +148,7 @@ draft: false
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="整體規劃"
@@ -161,7 +159,7 @@ draft: false
                         </amp-img>
                     </div>
                     <div class="card-body">
-                        <h4 class="card-title"><b>整體規劃</b></h5>
+                        <h4 class="card-title"><b>整體規劃</b></h4>
                         <div class="card-text">搭配燈光、顏色</div>
                         <div class="card-text">打造有設計感的家</div>
                     </div>
@@ -169,7 +167,7 @@ draft: false
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="家具搭配"
@@ -180,7 +178,7 @@ draft: false
                         </amp-img>
                     </div>
                     <div class="card-body">
-                        <h4 class="card-title"><b>家具搭配</b></h5>
+                        <h4 class="card-title"><b>家具搭配</b></h4>
                         <div class="card-text">一站完成</div>
                         <div class="card-text">省時省力</div>                        
                     </div>
@@ -188,7 +186,7 @@ draft: false
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="預算管理"
@@ -199,7 +197,7 @@ draft: false
                         </amp-img>
                     </div>
                     <div class="card-body">
-                        <h4 class="card-title"><b>預算管理</b></h5>
+                        <h4 class="card-title"><b>預算管理</b></h4>
                         <div class="card-text">刪除多餘</div>
                         <div class="card-text">拒絕浪費</div>                        
                     </div>
@@ -216,13 +214,18 @@ draft: false
 
 <section class="section17">
     <div class="container text-center">
-        <div class="row">
-            <h2><b>規劃師 六大堅持</b></h2>
+        <div class="mb-5">
+            <div class="title"><b>規劃師 六大堅持</b></div>
+        </div>
+        <div class="mb-5">
+            <h4><b>我們想要解決你</b></h4>
+            <h4><b>第一次買房的壓力與無奈</b></h4>
+            <h4><b>甚至是買房後的經濟壓力</b></h4>
         </div>
         <div class="row row-cols-2 row-cols-sm-3 row-cols-lg-6">
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="刪除多餘"
@@ -241,7 +244,7 @@ draft: false
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="輕裝修"
@@ -260,7 +263,7 @@ draft: false
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="預算控管"
@@ -279,7 +282,7 @@ draft: false
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="拒絕浪費"
@@ -298,7 +301,7 @@ draft: false
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="創意設計"
@@ -317,7 +320,7 @@ draft: false
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="透明報價"
@@ -346,9 +349,15 @@ draft: false
 
 <section class="section18">
     <div class="container text-center">
-        <div class="title mb-5">不用花大筆大筆的錢，也能擁有設計感的家</div>
+        <div class="title mb-1">不用花大筆大筆的錢</div>
+        <div class="title mb-5">也能擁有設計感的家</div>
         <div>如果你也相信這份價值與理念</div>
         <div class="mb-5">一定也很適合我們的規劃師服務</div>
-        <a href="/room_planner">30秒深度了解，規劃師服務流程>></a>
+        <div>
+            <a href="/room_planner">30秒深度了解</a>
+        </div>
+        <div>
+            <a href="/room_planner">規劃師服務流程>></a>
+        </div>
     </div>
 </section>

content/家具規劃作品/_index.md

@@ -1,5 +1,5 @@
 ---
-title: "家具規劃作品"
+title: "規劃作品集"
 date: 2021-02-06T18:14:22+08:00
 draft: false
 type: "collection"

content/家具規劃師/index.md

@@ -19,9 +19,12 @@ tags:
 
 <section class="section19">
     <div class="container text-center">
-        <div class="row mb-4">
-            <h2 class="mb-3"><b>其實，所有人都需要「規劃師服務」</b></h2>
-            <div class="title"><b>成家的過程，你遇到下面這些問題</b></div>            
+        <div class="mb-4">
+            <div class="mb-5">
+                <div class="title mb-3"><b>其實，所有人</b></div>
+                <div class="title"><b>都需要「規劃師服務」</b></div>
+            </div>
+            <h4 class="mb-5"><b>成家的過程，你會遇到下面這些問題</b></h4>
         </div>
         <div class="img-padding mb-5">
             <amp-img
@@ -32,70 +35,55 @@ tags:
                 layout="responsive">
             </amp-img>
         </div>
-        <div class="row">
-            <div class="title"><b>我們是你「一站式解決問題」的答案</b></div>
-            <div class="title"><b>在這裡搞定成家大小事</b></div>
+        <div>
+            <h4><b>我們是你「一站式解決問題」的答案</b></h4>
+            <h4><b>在這裡搞定成家大小事</b></h4>
         </div>
     </div>
 </section>
 
-<section class="section15">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-6 col-sm-12">
-                <div class="block">
-                    <div class="section-title">
-                        <div class="title mb-4"><b>專門服務首購族的室內設計品牌</b></div>
-                        <div><b>傳統的空間設計</b></div>
-                        <div><b>將60-80%的預算花在「重裝修」上</b></div>
-                        <div><b>我們則改變作法</b></div>
-                        <div><b>小寶優居使用「輕裝修」</b></div>
-                        <div><b>降低不必要的空間裝修與裝飾</b></div>
-                        <div><b>大幅降低你的「成家預算」</b></div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-6 col-sm-12">
-                <div class="block">
-                    <amp-img
-                        class="mb-3"
-                        alt="小寶優居"
-                        src="/img/room_planner2/3.webp"
-                        width="2862"
-                        height="1456"
-                        layout="responsive">
-                    </amp-img>
-                    <p>「美感和預算，沒有絕對相關」</p>
-                    <p>我們追求</p>
-                    <p>裝修預算與家具、模組系統櫃之間</p>
-                    <p>達成絕妙平衡</p>
-                </div>
-            </div>
+<section class="section26">
+    <div class="container text-center">
+        <div class="mb-5">
+            <div class="title mb-3"><b>我們追求，讓大部分的預算</b></div>
+            <div class="title mb-3"><b>花在家具與模組系統櫃</b></div>
+            <div class="title mb-3"><b>再搭配輕裝修，規劃你的家</b></div>
+        </div>
+        <div class="img-padding mb-5">
+            <amp-img
+                alt="小寶優居"
+                src="/img/room_planner2/4.webp"
+                width="2550"
+                height="1744"
+                layout="responsive">
+            </amp-img>
         </div>
     </div>
 </section>
 
-<section class="section20">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-6 col-sm-12">
-                <div class="section-title">
-                    <div class="title"><b>我們追求，讓大部分的預算</b></div>
-                    <div class="title"><b>花在家具與模組系統櫃</b></div>
-                    <div class="title"><b>再搭配輕裝修</b></div>
-                    <div class="title"><b>規劃你的家</b></div>
-                </div>
-            </div>
-            <div class="col-md-6 col-sm-12">
+<section class="section27">
+    <div class="container text-center">
+        <div class="mb-5">
+            <div class="title"><b>我們和傳統做法 不一樣</b></div>
+        </div>
+        <div class="row justify-content-md-center">
+            <div class="col-md-6">
                 <amp-img
+                    class="text-center"
                     alt="小寶優居"
-                    src="/img/room_planner2/4.webp"
-                    width="2550"
-                    height="1744"
+                    src="/img/room_planner2/3.webp"
+                    width="3392"
+                    height="1933"
                     layout="responsive">
                 </amp-img>
             </div>
         </div>
+        <div>
+            <h4><b>「美感和預算，沒有絕對相關」</b></h2>
+            <h4><b>我們追求</b></h2>
+            <h4><b>裝修預算與家具、模組系統櫃之間</b></h2>
+            <h4><b>達成絕妙平衡</b></h2>
+        </div>
     </div>
 </section>
 
@@ -110,20 +98,22 @@ tags:
 
 <section class="section16">
     <div class="container text-center">
-        <div class="row">
-            <h2><b>規劃師 六大服務特色</b></h2>
+        <div class="mb-5">
+            <div class="title"><b>規劃師 六大服務特色</b></div>
         </div>
         <div class="row row-cols-2 row-cols-sm-3 row-cols-lg-6">
             <div class="col">
                 <div class="h-100">
-                    <amp-img
-                        class="card-img-top"
-                        alt="生活動線"
-                        src="/img/room_planner2/5.webp"
-                        width="375"
-                        height="367"
-                        layout="responsive">
-                    </amp-img>
+                    <div class="img-resize">
+                        <amp-img
+                            class="card-img-top"
+                            alt="生活動線"
+                            src="/img/home2/4.webp"
+                            width="375"
+                            height="367"
+                            layout="responsive">
+                        </amp-img>
+                    </div>
                     <div class="card-body">
                         <h4 class="card-title"><b>生活動線</b></h4>
                         <div class="card-text">跟著空間</div>
@@ -133,14 +123,16 @@ tags:
             </div>
             <div class="col">
                 <div class="h-100">
-                    <amp-img
-                        class="card-img-top"
-                        alt="收納規劃"
-                        src="/img/room_planner2/6.webp"
-                        width="372"
-                        height="367"
-                        layout="responsive">
-                    </amp-img>
+                    <div class="img-resize">
+                        <amp-img
+                            class="card-img-top"
+                            alt="收納規劃"
+                            src="/img/home2/5.webp"
+                            width="372"
+                            height="367"
+                            layout="responsive">
+                        </amp-img>
+                    </div>
                     <div class="card-body">
                         <h4 class="card-title"><b>收納規劃</b></h4>
                         <div class="card-text">設計專屬</div>
@@ -150,33 +142,37 @@ tags:
             </div>
             <div class="col">
                 <div class="h-100">
-                    <amp-img
-                        class="card-img-top mb-1"
-                        alt="色彩風格"
-                        src="/img/room_planner2/7.webp"
-                        width="385"
-                        height="367"
-                        layout="responsive">
-                    </amp-img>
-                    <div class="card-body">
+                    <div class="img-resize">
+                        <amp-img
+                            class="card-img-top"
+                            alt="色彩風格"
+                            src="/img/home2/6.webp"
+                            width="385"
+                            height="367"
+                            layout="responsive">
+                        </amp-img>
+                    </div>
+                    <div class="card-body mt-1">
                         <h4 class="card-title"><b>色彩風格</b></h4>
-                        <div class="card-text">全屋色彩計畫</div>
-                        <div class="card-text">建議書</div>
+                        <div class="card-text">全屋色彩</div>
+                        <div class="card-text">計畫建議書</div>
                     </div>
                 </div>
             </div>
             <div class="col">
                 <div class="h-100">
-                    <amp-img
-                        class="card-img-top"
-                        alt="整體規劃"
-                        src="/img/room_planner2/8.webp"
-                        width="372"
-                        height="367"
-                        layout="responsive">
-                    </amp-img>
+                    <div class="img-resize">
+                        <amp-img
+                            class="card-img-top"
+                            alt="整體規劃"
+                            src="/img/home2/7.webp"
+                            width="372"
+                            height="367"
+                            layout="responsive">
+                        </amp-img>
+                    </div>
                     <div class="card-body">
-                        <h4 class="card-title"><b>整體規劃</b></h5>
+                        <h4 class="card-title"><b>整體規劃</b></h4>
                         <div class="card-text">搭配燈光、顏色</div>
                         <div class="card-text">打造有設計感的家</div>
                     </div>
@@ -184,16 +180,18 @@ tags:
             </div>
             <div class="col">
                 <div class="h-100">
-                    <amp-img
-                        class="card-img-top"
-                        alt="家具搭配"
-                        src="/img/room_planner2/9.webp"
-                        width="373"
-                        height="367"
-                        layout="responsive">
-                    </amp-img>
+                    <div class="img-resize">
+                        <amp-img
+                            class="card-img-top"
+                            alt="家具搭配"
+                            src="/img/home2/8.webp"
+                            width="373"
+                            height="367"
+                            layout="responsive">
+                        </amp-img>
+                    </div>
                     <div class="card-body">
-                        <h4 class="card-title"><b>家具搭配</b></h5>
+                        <h4 class="card-title"><b>家具搭配</b></h4>
                         <div class="card-text">一站完成</div>
                         <div class="card-text">省時省力</div>                        
                     </div>
@@ -201,14 +199,16 @@ tags:
             </div>
             <div class="col">
                 <div class="h-100">
-                    <amp-img
-                        class="card-img-top"
-                        alt="預算管理"
-                        src="/img/room_planner2/10.webp"
-                        width="382"
-                        height="367"
-                        layout="responsive">
-                    </amp-img>
+                    <div class="img-resize">
+                        <amp-img
+                            class="card-img-top"
+                            alt="預算管理"
+                            src="/img/home2/9.webp"
+                            width="382"
+                            height="367"
+                            layout="responsive">
+                        </amp-img>
+                    </div>
                     <div class="card-body">
                         <h4 class="card-title"><b>預算管理</b></h4>
                         <div class="card-text">刪除多餘</div>
@@ -218,132 +218,38 @@ tags:
             </div>
         </div>
         <div>
-            <h4><b>規劃師 不只擅長打造室內空間美感</b></h4>
-            <h4><b>而是連同你的生活習慣、生活動線</b></h4>
-            <h4><b>都一同照顧到</b></h4>
+            <h4><b>規劃師 不只擅長打造室內空間美感</b></h2>
+            <h4><b>而是連同你的生活習慣、生活動線</b></h2>
+            <h4><b>都一同照顧到</b></h2>
         </div>
     </div>
 </section>
 
-<section class="section21">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-5 col-sm-12">
-                <div class="block">
-                    <div class="section-title">
-                        <div class="title mb-3"><b>規劃師 八大服務流程</b></div>
-                        <div class="title mb-5"><b>和你一起，完成你的新家</b></div>
-                        <table style="width:100%;">
-                            <tr>
-                                <td style="padding: 15px;border-right: 1px solid silver;">
-                                    <amp-img
-                                        alt="STEP 1.釐清需求"
-                                        src="/img/room_planner2/11.webp"
-                                        width="275"
-                                        height="269"
-                                        layout="responsive">
-                                    </amp-img>
-                                </td>
-                                <td style="padding: 15px;">STEP 1.釐清需求</td>
-                            </tr>
-                            <tr>
-                                <td style="padding: 15px;border-right: 1px solid silver;">
-                                    <amp-img
-                                        alt="STEP 2.前往丈量"
-                                        src="/img/room_planner2/12.webp"
-                                        width="275"
-                                        height="269"
-                                        layout="responsive">
-                                    </amp-img>
-                                </td>
-                                <td style="padding: 15px;">STEP 2.前往丈量</td>
-                            </tr>
-                            <tr>
-                                <td style="padding: 15px;border-right: 1px solid silver;">
-                                    <amp-img
-                                        alt="STEP 3.風格測驗"
-                                        src="/img/room_planner2/13.webp"
-                                        width="268"
-                                        height="263"
-                                        layout="responsive">
-                                    </amp-img>
-                                </td>
-                                <td style="padding: 15px;">STEP 3.風格測驗</td>
-                            </tr>
-                            <tr>
-                                <td style="padding: 15px;border-right: 1px solid silver;">
-                                    <amp-img
-                                        alt="STEP 4.收納規劃"
-                                        src="/img/room_planner2/14.webp"
-                                        width="268"
-                                        height="283"
-                                        layout="responsive">
-                                    </amp-img>
-                                </td>
-                                <td style="padding: 15px;">STEP 4.收納規劃</td>
-                            </tr>
-                            <tr>
-                                <td style="padding: 15px;border-right: 1px solid silver;">
-                                    <amp-img
-                                        alt="STEP 5.空間設計"
-                                        src="/img/room_planner2/15.webp"
-                                        width="268"
-                                        height="264"
-                                        layout="responsive">
-                                    </amp-img>
-                                </td>
-                                <td style="padding: 15px;">STEP 5.空間設計</td>
-                            </tr>
-                            <tr>
-                                <td style="padding: 15px;border-right: 1px solid silver;">
-                                    <amp-img
-                                        alt="STEP 6.3D/VR圖討論"
-                                        src="/img/room_planner2/16.webp"
-                                        width="268"
-                                        height="279"
-                                        layout="responsive">
-                                    </amp-img>
-                                </td>
-                                <td style="padding: 15px;">STEP 6.3D/VR圖討論</td>
-                            </tr>
-                            <tr>
-                                <td style="padding: 15px;border-right: 1px solid silver;">
-                                    <amp-img
-                                        alt="STEP 7.進場施工"
-                                        src="/img/room_planner2/17.webp"
-                                        width="268"
-                                        height="269"
-                                        layout="responsive">
-                                    </amp-img>
-                                </td>
-                                <td style="padding: 15px;">STEP 7.進場施工</td>
-                            </tr>
-                            <tr>
-                                <td style="padding: 15px;border-right: 1px solid silver;">
-                                    <amp-img
-                                        alt="STEP 8.進場施工"
-                                        src="/img/room_planner2/18.webp"
-                                        width="268"
-                                        height="279"
-                                        layout="responsive">
-                                    </amp-img>
-                                </td>
-                                <td style="padding: 15px;">STEP 8.施工完成</td>
-                            </tr>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-7 col-sm-12">
-                <div class="block content">
-                    <amp-img
-                        alt="小寶優居"
-                        src="/img/room_planner2/19.webp"
-                        width="1900"
-                        height="1458"
-                        layout="responsive">
-                    </amp-img>
-                </div>
+<section class="section28">
+    <div class="container text-center">
+        <div class="mb-5">
+            <div class="title mb-3"><b>規劃師 八大服務流程</b></div>
+            <div class="title"><b>和你一起，完成你的新家</b></div>
+        </div>
+        <div class="mb-5">
+            <div class="step"><b>STEP1.釐清需求</b></div>
+            <div class="step"><b>STEP2.前往丈量</b></div>
+            <div class="step"><b>STEP3.風格測驗</b></div>
+            <div class="step"><b>STEP4.收納規劃</b></div>
+            <div class="step"><b>STEP5.空間設計</b></div>
+            <div class="step"><b>STEP6.3D/VR圖討論</b></div>
+            <div class="step"><b>STEP7.進場施工</b></div>
+            <div class="step"><b>STEP8.施工完成</b></div>
+        </div>
+        <div class="row justify-content-md-center">
+            <div class="col-md-5">
+                <amp-img
+                    alt="小寶優居"
+                    src="/img/room_planner2/19.webp"
+                    width="1900"
+                    height="1458"
+                    layout="responsive">
+                </amp-img>
             </div>
         </div>
     </div>
@@ -416,28 +322,24 @@ tags:
     </div>
 </section>
 
-<section class="section23">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-6 col-sm-12">
-                <div class="block">
-                    <div class="section-title">
-                        <div class="title mb-4"><b>業界首創 安心裝修服務</b></div>
-                        <div class="mb-2"><b>安心裝修、監工服務、履約保證</b></div>
-                        <div><b>三大機制</b></div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-6 col-sm-12">
-                <div class="img-padding">
-                    <amp-img
-                        alt="小寶優居"
-                        src="/img/room_planner2/28.webp"
-                        width="3100"
-                        height="3325"
-                        layout="responsive">
-                    </amp-img>
-                </div>
+<section class="section29">
+    <div class="container text-center">
+        <div class="mb-5">
+            <div class="title"><b>業界首創 安心裝修服務</b></div>
+        </div>
+        <div class="mb-5">
+            <h4><b>安心裝修、監工服務、履約保證</b></h4>
+            <h4><b>三大機制</b></h4>
+        </div>
+        <div class="row justify-content-md-center">
+            <div class="col-md-4">
+                <amp-img
+                    alt="小寶優居"
+                    src="/img/room_planner2/28.webp"
+                    width="1883"
+                    height="2900"
+                    layout="responsive">
+                </amp-img>
             </div>
         </div>
     </div>
@@ -445,17 +347,17 @@ tags:
 
 <section class="section16">
     <div class="container text-center">
-        <div class="row">
-            <h2><b>安心裝修服務 六大特色</b></h2>
+        <div class="mb-5">
+            <div class="title"><b>安心裝修服務 六大特色</b></div>
         </div>
-        <div class="row">
-            <h4><b>成家的過程中讓你「很安心」</b></h2>
-            <h4><b>是我們的責任</b></h2>
+        <div class="mb-5">
+            <h4><b>成家的過程中讓你「很安心」</b></h4>
+            <h4><b>是我們的責任</b></h4>
         </div>
         <div class="row row-cols-2 row-cols-sm-3 row-cols-lg-6">
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="篩選廠商"
@@ -475,7 +377,7 @@ tags:
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="溝通需求"
@@ -494,7 +396,7 @@ tags:
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-1">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="設計需求"
@@ -504,7 +406,7 @@ tags:
                             layout="responsive">
                         </amp-img>
                     </div>
-                    <div class="card-body mt-1">
+                    <div class="card-body">
                         <h4 class="card-title"><b>設計需求</b></h4>
                         <div class="card-text">不必擔心如何</div>
                         <div class="card-text">把腦海中的家傳</div>
@@ -514,7 +416,7 @@ tags:
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="品質把關"
@@ -533,7 +435,7 @@ tags:
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="進度回報"
@@ -553,7 +455,7 @@ tags:
             </div>
             <div class="col">
                 <div class="h-100">
-                    <div class="p-3">
+                    <div class="img-resize">
                         <amp-img
                             class="card-img-top"
                             alt="驗收交屋"
@@ -577,9 +479,15 @@ tags:
 
 <section class="section18">
     <div class="container text-center">
-        <div class="title mb-5">不用花大筆大筆的錢，也能擁有設計感的家</div>
+        <div class="title mb-1">不用花大筆大筆的錢</div>
+        <div class="title mb-5">也能擁有設計感的家</div>
         <div>如果你也相信這份價值與理念</div>
         <div class="mb-5">一定也很適合我們的規劃師服務</div>
-        <a href="/collection">看看2000個屋主的家，我們真實作品集>></a>
+        <div>
+            <a href="/collection">看看2000個屋主的家</a>
+        </div>
+        <div>
+            <a href="/collection">我們真實作品集>></a>
+        </div>
     </div>
 </section>

themes/hugo-lamp/layouts/blog/list.html

@@ -22,6 +22,28 @@
             {{ $paginator := .Paginate .Data.Pages }}
             {{ range $paginator.Pages }}
             <div class="mb-5 post">
+                <div class="mb-4">
+                    <a href="{{ .Permalink }}">
+                        <amp-img
+                            alt="{{ .Title }}"
+                            src="{{ .Params.Image | relURL }}"
+                            width="2664"
+                            height="956"
+                            layout="responsive">
+                        </amp-img>
+                    </a>
+                </div>
+                <a href="{{ .Permalink }}" style="color:#444444;">
+                    <h3 class="card-title"><b>{{ .Title }}</b></h3>
+                </a>
+                <p class="blog-content" style="font-size:0.8rem;">{{ .PublishDate.Format "January 2, 2006" }}</p>
+                <div class="blog-content">
+                    <p class="card-text" style="color:#4D4D4D;">{{ .Summary }}</p>
+                    <a href="{{ .Permalink }}" class="btn btn-light">繼續閱讀</a>
+                </div>
+            </div>
+
+            <!-- <div class="mb-5 post">
                 <div class="mb-4">
                     <a href="{{ .Permalink }}">
                         <amp-img
@@ -39,7 +61,7 @@
                     <p>{{ .Summary }}</p>
                     <a href="{{ .Permalink }}" class="btn btn-light">繼續閱讀</a>
                 </div>
-            </div>
+            </div> -->
             {{ end }}
             
             <!-- pagination -->

themes/hugo-lamp/layouts/collection/list.html

@@ -5,11 +5,16 @@
 
 <div class="page-wrapper">
     <div class="container mb-5">
-        <div class="row" style="padding-top:60px;">
+        <!-- <div class="row" style="padding-top:60px;">
             <div class="col-md-10 mx-auto">
               <h1 class="post-title mb-5"><b>{{ .Title }}</b></h1>
             </div>
-        </div>
+        </div> -->
+        <section class="section14" style="padding-top:60px;">
+            <div class="text-center mb-4">
+                <div class="title"><b>{{ .Title }}</b></div>
+            </div>
+        </section>
         
         <!-- 手機版 -->
         <div class="d-block d-md-none">

themes/hugo-lamp/static/css/chuz.css

@@ -874,6 +874,11 @@ amp-img[class^=-amp] {
   .ms-md-5 {
     margin-left: 3rem !important;
   }
+  .justify-content-md-center {
+    -webkit-box-pack: center !important;
+        -ms-flex-pack: center !important;
+            justify-content: center !important;
+  }
 }
 
 @media (min-width: 992px) {
@@ -2179,39 +2184,39 @@ input[type="radio"][class="style"]:checked + label {
 }
 
 /* 顏色設定 */
-section-style, .section1, .section2, .section3, .section4, .section5, .section6, .section7, .section8, .section9, .section10, .section11, .section13, .section14, .section15, .section16, .section17, .section18, .section19, .section20, .section21, .section22, .section23, .section24 {
+section-style, .section1, .section2, .section3, .section4, .section5, .section6, .section7, .section8, .section9, .section10, .section11, .section13, .section14, .section16, .section17, .section18, .section19, .section22, .section24, .section25, .section26, .section27, .section28, .section29 {
   padding: 80px 0;
 }
 
-section-style .block p, .section1 .block p, .section2 .block p, .section3 .block p, .section4 .block p, .section5 .block p, .section6 .block p, .section7 .block p, .section8 .block p, .section9 .block p, .section10 .block p, .section11 .block p, .section13 .block p, .section14 .block p, .section15 .block p, .section16 .block p, .section17 .block p, .section18 .block p, .section19 .block p, .section20 .block p, .section21 .block p, .section22 .block p, .section23 .block p, .section24 .block p {
+section-style .block p, .section1 .block p, .section2 .block p, .section3 .block p, .section4 .block p, .section5 .block p, .section6 .block p, .section7 .block p, .section8 .block p, .section9 .block p, .section10 .block p, .section11 .block p, .section13 .block p, .section14 .block p, .section16 .block p, .section17 .block p, .section18 .block p, .section19 .block p, .section22 .block p, .section24 .block p, .section25 .block p, .section26 .block p, .section27 .block p, .section28 .block p, .section29 .block p {
   line-height: 20px;
 }
 
-section-style .block img, .section1 .block img, .section2 .block img, .section3 .block img, .section4 .block img, .section5 .block img, .section6 .block img, .section7 .block img, .section8 .block img, .section9 .block img, .section10 .block img, .section11 .block img, .section13 .block img, .section14 .block img, .section15 .block img, .section16 .block img, .section17 .block img, .section18 .block img, .section19 .block img, .section20 .block img, .section21 .block img, .section22 .block img, .section23 .block img, .section24 .block img {
+section-style .block img, .section1 .block img, .section2 .block img, .section3 .block img, .section4 .block img, .section5 .block img, .section6 .block img, .section7 .block img, .section8 .block img, .section9 .block img, .section10 .block img, .section11 .block img, .section13 .block img, .section14 .block img, .section16 .block img, .section17 .block img, .section18 .block img, .section19 .block img, .section22 .block img, .section24 .block img, .section25 .block img, .section26 .block img, .section27 .block img, .section28 .block img, .section29 .block img {
   width: 100%;
 }
 
-section-style .block .start, .section1 .block .start, .section2 .block .start, .section3 .block .start, .section4 .block .start, .section5 .block .start, .section6 .block .start, .section7 .block .start, .section8 .block .start, .section9 .block .start, .section10 .block .start, .section11 .block .start, .section13 .block .start, .section14 .block .start, .section15 .block .start, .section16 .block .start, .section17 .block .start, .section18 .block .start, .section19 .block .start, .section20 .block .start, .section21 .block .start, .section22 .block .start, .section23 .block .start, .section24 .block .start {
+section-style .block .start, .section1 .block .start, .section2 .block .start, .section3 .block .start, .section4 .block .start, .section5 .block .start, .section6 .block .start, .section7 .block .start, .section8 .block .start, .section9 .block .start, .section10 .block .start, .section11 .block .start, .section13 .block .start, .section14 .block .start, .section16 .block .start, .section17 .block .start, .section18 .block .start, .section19 .block .start, .section22 .block .start, .section24 .block .start, .section25 .block .start, .section26 .block .start, .section27 .block .start, .section28 .block .start, .section29 .block .start {
   padding-top: 30px;
 }
 
-section-style .content, .section1 .content, .section2 .content, .section3 .content, .section4 .content, .section5 .content, .section6 .content, .section7 .content, .section8 .content, .section9 .content, .section10 .content, .section11 .content, .section13 .content, .section14 .content, .section15 .content, .section16 .content, .section17 .content, .section18 .content, .section19 .content, .section20 .content, .section21 .content, .section22 .content, .section23 .content, .section24 .content {
+section-style .content, .section1 .content, .section2 .content, .section3 .content, .section4 .content, .section5 .content, .section6 .content, .section7 .content, .section8 .content, .section9 .content, .section10 .content, .section11 .content, .section13 .content, .section14 .content, .section16 .content, .section17 .content, .section18 .content, .section19 .content, .section22 .content, .section24 .content, .section25 .content, .section26 .content, .section27 .content, .section28 .content, .section29 .content {
   padding: 0 30px;
 }
 
 @media (min-width: 992px) {
-  section-style .content, .section1 .content, .section2 .content, .section3 .content, .section4 .content, .section5 .content, .section6 .content, .section7 .content, .section8 .content, .section9 .content, .section10 .content, .section11 .content, .section13 .content, .section14 .content, .section15 .content, .section16 .content, .section17 .content, .section18 .content, .section19 .content, .section20 .content, .section21 .content, .section22 .content, .section23 .content, .section24 .content {
+  section-style .content, .section1 .content, .section2 .content, .section3 .content, .section4 .content, .section5 .content, .section6 .content, .section7 .content, .section8 .content, .section9 .content, .section10 .content, .section11 .content, .section13 .content, .section14 .content, .section16 .content, .section17 .content, .section18 .content, .section19 .content, .section22 .content, .section24 .content, .section25 .content, .section26 .content, .section27 .content, .section28 .content, .section29 .content {
     padding: 0 50px;
   }
 }
 
-section-style .card-text, .section1 .card-text, .section2 .card-text, .section3 .card-text, .section4 .card-text, .section5 .card-text, .section6 .card-text, .section7 .card-text, .section8 .card-text, .section9 .card-text, .section10 .card-text, .section11 .card-text, .section13 .card-text, .section14 .card-text, .section15 .card-text, .section16 .card-text, .section17 .card-text, .section18 .card-text, .section19 .card-text, .section20 .card-text, .section21 .card-text, .section22 .card-text, .section23 .card-text, .section24 .card-text {
+section-style .card-text, .section1 .card-text, .section2 .card-text, .section3 .card-text, .section4 .card-text, .section5 .card-text, .section6 .card-text, .section7 .card-text, .section8 .card-text, .section9 .card-text, .section10 .card-text, .section11 .card-text, .section13 .card-text, .section14 .card-text, .section16 .card-text, .section17 .card-text, .section18 .card-text, .section19 .card-text, .section22 .card-text, .section24 .card-text, .section25 .card-text, .section26 .card-text, .section27 .card-text, .section28 .card-text, .section29 .card-text {
   padding-bottom: 5px;
   font-size: 0.8rem;
   color: #666666;
 }
 
-section-style .sub-title, .section1 .sub-title, .section2 .sub-title, .section3 .sub-title, .section4 .sub-title, .section5 .sub-title, .section6 .sub-title, .section7 .sub-title, .section8 .sub-title, .section9 .sub-title, .section10 .sub-title, .section11 .sub-title, .section13 .sub-title, .section14 .sub-title, .section15 .sub-title, .section16 .sub-title, .section17 .sub-title, .section18 .sub-title, .section19 .sub-title, .section20 .sub-title, .section21 .sub-title, .section22 .sub-title, .section23 .sub-title, .section24 .sub-title {
+section-style .sub-title, .section1 .sub-title, .section2 .sub-title, .section3 .sub-title, .section4 .sub-title, .section5 .sub-title, .section6 .sub-title, .section7 .sub-title, .section8 .sub-title, .section9 .sub-title, .section10 .sub-title, .section11 .sub-title, .section13 .sub-title, .section14 .sub-title, .section16 .sub-title, .section17 .sub-title, .section18 .sub-title, .section19 .sub-title, .section22 .sub-title, .section24 .sub-title, .section25 .sub-title, .section26 .sub-title, .section27 .sub-title, .section28 .sub-title, .section29 .sub-title {
   color: #000;
 }
 
@@ -2343,28 +2348,20 @@ section-style .sub-title, .section1 .sub-title, .section2 .sub-title, .section3
   color: #78AD42;
 }
 
-.section15 {
-  background-color: #F1F1F1;
-}
-
-.section15 div {
-  padding-bottom: 10px;
-}
-
-.section15 p {
-  color: #4D4D4D;
+.section16 h2 {
+  color: #78AD42;
 }
 
-.section15 .title {
-  color: #78AD42;
+.section16 .row {
+  margin-bottom: 60px;
 }
 
-.section16 h2 {
+.section16 .title {
   color: #78AD42;
 }
 
-.section16 .row {
-  margin-bottom: 60px;
+.section16 .img-resize {
+  padding: 0 2.5rem;
 }
 
 .section17 {
@@ -2379,6 +2376,14 @@ section-style .sub-title, .section1 .sub-title, .section2 .sub-title, .section3
   margin-bottom: 60px;
 }
 
+.section17 .title {
+  color: #78AD42;
+}
+
+.section17 .img-resize {
+  padding: 0 2.5rem;
+}
+
 .section18 {
   color: #FFF;
   font-weight: 600;
@@ -2399,67 +2404,101 @@ section-style .sub-title, .section1 .sub-title, .section2 .sub-title, .section3
   color: #78AD42;
 }
 
+.section19 .title {
+  color: #78AD42;
+}
+
 @media (min-width: 768px) {
   .section19 .img-padding {
     padding: 0 200px;
   }
 }
 
-.section20 .title {
+.section22 .title {
   color: #78AD42;
-  padding-bottom: 10px;
 }
 
-.section21 {
-  background-color: #ECECEC;
+@media (min-width: 768px) {
+  .section22 .img-padding {
+    padding: 0 100px 0 0;
+  }
 }
 
-.section21 table {
-  border-collapse: collapse;
+.section24 {
+  padding: 50px 0;
 }
 
-.section21 tr {
-  line-height: 22px;
+.section24 .title {
+  color: #78AD42;
 }
 
-.section21 td {
-  border: none;
-  font-weight: 600;
+.section25 {
+  background-color: #F1F1F1;
 }
 
-.section21 .title {
+.section25 h2 {
   color: #78AD42;
 }
 
-.section22 .title {
+.section25 .row {
+  margin-bottom: 60px;
+}
+
+.section25 .title {
+  color: #78AD42;
+}
+
+.section26 {
+  background-color: #F1F1F1;
+}
+
+.section26 .title {
   color: #78AD42;
 }
 
 @media (min-width: 768px) {
-  .section22 .img-padding {
-    padding: 0 100px 0 0;
+  .section26 .img-padding {
+    padding: 80px 280px;
   }
 }
 
-.section23 {
-  background-color: #ECECEC;
+.section27 h2 {
+  color: #78AD42;
+}
+
+.section27 .row {
+  margin-bottom: 60px;
 }
 
-.section23 .title {
+.section27 .title {
   color: #78AD42;
 }
 
-@media (min-width: 768px) {
-  .section23 .img-padding {
-    padding: 0 50px 0 0;
-  }
+.section28 {
+  background-color: #F1F1F1;
 }
 
-.section24 {
-  padding: 50px 0;
+.section28 h2 {
+  color: #78AD42;
 }
 
-.section24 .title {
+.section28 .row {
+  margin-bottom: 60px;
+}
+
+.section28 .step {
+  margin-bottom: 20px;
+}
+
+.section28 .title {
+  color: #78AD42;
+}
+
+.section29 {
+  background-color: #F1F1F1;
+}
+
+.section29 .title {
   color: #78AD42;
 }
 

themes/hugo-lamp/static/css/chuz.scss

@@ -789,6 +789,10 @@ amp-img[class^=-amp] {
 	.ms-md-5 {
 		margin-left: 3rem !important;
 	}
+
+	.justify-content-md-center {
+		justify-content: center !important;
+	}
 }
 
 @media (min-width: 992px) {

themes/hugo-lamp/static/css/templates/_section.scss

@@ -195,33 +195,23 @@ section-style {
 	}
 }
 
-.section15 {
+.section16 {
 	@extend section-style;
 
-	background-color: #F1F1F1;
-
-	div {
-		padding-bottom: 10px;
+	h2 {
+		color: #78AD42;
 	}
 
-	p {
-		color: #4D4D4D;
+	.row {
+		margin-bottom: 60px;
 	}
 
 	.title {
 		color: #78AD42;
 	}
-}
-
-.section16 {
-	@extend section-style;
-
-	h2 {
-		color: #78AD42;
-	}
 
-	.row {
-		margin-bottom: 60px;
+	.img-resize {
+		padding: 0 2.5rem;
 	}
 }
 
@@ -237,6 +227,14 @@ section-style {
 	.row {
 		margin-bottom: 60px;
 	}
+
+	.title {
+		color: #78AD42;
+	}
+
+	.img-resize {
+		padding: 0 2.5rem;
+	}
 }
 
 .section18 {
@@ -266,6 +264,10 @@ section-style {
 		color: #78AD42;
 	}
 
+	.title {
+		color: #78AD42;
+	}
+
 	@media (min-width: 768px) {
 		.img-padding {
 			padding: 0 200px;
@@ -273,31 +275,41 @@ section-style {
 	}
 }
 
-.section20 {
+.section22 {
 	@extend section-style;
 
 	.title {
 		color: #78AD42;
-		padding-bottom: 10px;
+	}
+
+	@media (min-width: 768px) {
+		.img-padding {
+			padding: 0 100px 0 0;
+		}
 	}
 }
 
-.section21 {
+.section24 {
 	@extend section-style;
 
-	background-color: #ECECEC;
+	padding: 50px 0;
 
-	table {
-		border-collapse: collapse;
+	.title {
+		color: #78AD42;
 	}
-	
-	tr {
-		line-height: 22px;
+}
+
+.section25 {
+	@extend section-style;
+
+	background-color: #F1F1F1;
+
+	h2 {
+		color: #78AD42;
 	}
 
-	td {
-		border: none;
-		font-weight: 600;
+	.row {
+		margin-bottom: 60px;
 	}
 
 	.title {
@@ -305,42 +317,66 @@ section-style {
 	}
 }
 
-.section22 {
+.section26 {
 	@extend section-style;
 
+	background-color: #F1F1F1;
+
 	.title {
 		color: #78AD42;
 	}
 
 	@media (min-width: 768px) {
 		.img-padding {
-			padding: 0 100px 0 0;
+			padding: 80px 280px;
 		}
 	}
 }
 
-.section23 {
+.section27 {
 	@extend section-style;
-	
-	background-color: #ECECEC;
 
-    .title {
+	h2 {
 		color: #78AD42;
 	}
 
-	@media (min-width: 768px) {
-		.img-padding {
-			padding: 0 50px 0 0;
-		}
+	.row {
+		margin-bottom: 60px;
+	}
+
+	.title {
+		color: #78AD42;
 	}
 }
 
-.section24 {
+.section28 {
 	@extend section-style;
 
-	padding: 50px 0;
+	background-color: #F1F1F1;
+
+	h2 {
+		color: #78AD42;
+	}
+
+	.row {
+		margin-bottom: 60px;
+	}
+
+	.step {
+		margin-bottom: 20px;
+	}
 
 	.title {
 		color: #78AD42;
 	}
-}
+}
+
+.section29 {
+	@extend section-style;
+
+	background-color: #F1F1F1;
+
+	.title {
+		color: #78AD42;
+	}
+}