設計大綱

上一個區塊設計了使用者的「痛點」，因此接下來的區塊想要做一個「平台的小廣告」，讓使用者了解到我們這個平台可以幫助他們解決問題。
由於上一個區塊並不是滿版的設計，所以今天這個小廣告的設計將會用滿版的設計，這樣就會比較有平衡感喔！
而小廣告的內容底下，我想要用一個微透明白色作為小小的打底背景，讓小廣告的內容更能突顯出來，所以設計將會是以「背景圖 > 微透明白色背景 > 文字內容」的方式進行！這樣講是不是很抽象XDD，好啦！直接進入重點！

步驟

滿版背景

1. 找出適合的圖片來作為滿版的背景圖
2. 把圖片直接拉進畫布
3. 調整寬度與畫布同寬
4. 維持上下margin為96px

微透明白色背景

1. 畫出一個與container同等寬的長方形
2. 高度等等再調整
3. 長方形的顏色為 #FFFFFF＋80%

標題與箭頭

1. 標題和內容想以 靠左對齊 來呈現，所以這邊直接在左邊開始輸入文案
2. 標題文字大小為32px（h2的大小）
3. 標題字重為Bold
4. 標題文字顏色為Text（#707070）
5. 這邊用鋼筆工具幫標題的下方畫一個裝飾用的小箭頭，顏色為Primary-color(#9B3C05)
   （這是裝飾用哈哈哈哈，看你們啦～）

內容

1. 內容和標題一樣從左開始輸入文案
2. 內容文字大小為16px（p的大小）
3. 內容文字字重為Normal
4. 內容文字顏色為Text（#707070）

按鈕

1. 按鈕的部分想 靠右對齊，這樣才能平衡視覺感覺，讓小廣告的右邊看起來不會太空！
2. 把上面的Button複製下來使用
3. 修改Button的文字為「瞭解方案」

調整間距

1. 把「標題」、「內容」、「按鈕」之間的間距調整為24px
2. 把「整個文字內容」與「透明白色背景」之間的間距調整為margin-y:96px、margin-x:72px
3. 調整完後，你會發現「透明白色背景」的高度就自然而然地出來了
4. 把調「透明白色背景」與「滿版背景圖片」之間的margin-y調整為96px
5. 這時候，「滿版背景圖片」的高度也出來了

結論

今天的區塊設計也不太難，而重點就是 整個區塊裡面的元件高度不用預先設定好，這就是之前提到的 用padding去推擠高度 的做法，這樣在之後切版時也會比較輕鬆！來想想，只要加上「py-10」就能讓元件撐大，不用再另外開新的scss去加入padding的客製化（下省1000字），這樣是不是方便多了呢！
明天再來寫下一個區塊吧！