HeroSectionOfProducts - slide 1 : animation

[godmmt]

First slide animation

1. 手刻
2. 設計師製作 gif

目前是用手刻，先採用固定寬度和高度+絕對定位 已花費 3 hours

同時設計師會嘗試看看能不能製作 gif 如果 gif 不行 就使用手刻的畫面 並且再修改為在螢幕寬度 1440 - 1024 之前排版不會壞掉的版本

[godmmt]

• 0625 : took 3 hours

[godmmt]

Mockup:

https://github.com/CAFECA-IO/iSunCoin-official/assets/105651918/06cdcd1c-aafb-40e4-a593-28c4e2183cd0

[godmmt]

PRO 的文字水平翻轉

Tailwind 官方語法沒有寫 我實驗結果是

-scale-x-100

可以翻轉。

[godmmt]

• [x] 手刻絕對定位版動畫完成

Click to expand/collapse codes

### `/components/carousel/product_animation.tsx` : ```tsx import Image from 'next/image'; const ProductAnimation = () => { return (

PRO

CT

PRODU

• Pro.
• Max.
• Enterprise.

); }; export default ProductAnimation; ```

[godmmt]

手刻絕對定位版動畫完成後，設計師也成功製作出 GIF 檔案

所以再花時間改為套用 GIF 檔案。

[godmmt]

原本設計師給的 mov 檔案無法使用， 原因是因為檔案太大。

這個部分 Anna(@jing12345678910) 有研究出一個解法👍，順便記錄在這裡 :

<video width="1440" autoPlay muted>
  <source src="/new_compressed.mp4" type="video/mp4" />
  <track kind="captions" src="" label="English" />
  Your browser does not support the video tag.
</video>

壓縮完會變mp4檔 type那邊我就改成mp4

壓縮的方式是： 壓縮的套件 安裝的指令 ：brew install ffmpeg 安裝完之後 檔案壓縮的指令 ：ffmpeg -i public/new.mov -vcodec h264 -acodec aac -b:v 1M -b:a 128k public/new_compressed.mp4（public後的路徑 看妳是把檔案放在哪 再修改一下）

---

後來設計師成功製作 gif 檔案所以就改用 gif 。

[godmmt]

經討論 新增一張工作單 #48 之後可以往這個方向調整

[godmmt]

took 5 hours

Total time: 8

done.