diff --git a/package.json b/package.json index 60f049ce4..91a529d52 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "react-dom": "^17.0.2", "react-fast-marquee": "^1.1.4", "react-merge-refs": "^1.1.0", + "react-player": "^2.9.0", "react-use-measure": "^2.0.4", "sass": "^1.38.0", "swell-js": "^4.0.0-next.0", diff --git a/pages/index.tsx b/pages/index.tsx index 40bfce295..700b10f9e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,12 +1,13 @@ import { Layout } from 'src/components/common'; -import { HomeBanner, HomeCTA, HomeSubscribe } from 'src/components/modules/home'; +import { HomeBanner, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home'; export default function Home() { return ( <> + diff --git a/src/components/common/VideoPlayer/VideoPlayer.tsx b/src/components/common/VideoPlayer/VideoPlayer.tsx new file mode 100644 index 000000000..46370202b --- /dev/null +++ b/src/components/common/VideoPlayer/VideoPlayer.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import ReactPlayer from 'react-player/lazy' + +interface Props { + url: string, + controls?: boolean, + muted?: boolean, +} + +const VideoPlayer = ({ url, controls, muted }: Props) => { + return ( + + ); +}; + +export default VideoPlayer; \ No newline at end of file diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 31f33e011..e143696ea 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -14,3 +14,4 @@ export { default as Banner} from './Banner/Banner' export { default as Footer} from './Footer/Footer' export { default as MenuDropdown} from './MenuDropdown/MenuDropdown' export { default as NotiMessage} from './NotiMessage/NotiMessage' +export { default as VideoPlayer} from './VideoPlayer/VideoPlayer' diff --git a/src/components/modules/home/HomeVideo/HomeVideo.module.scss b/src/components/modules/home/HomeVideo/HomeVideo.module.scss new file mode 100644 index 000000000..2dad3da21 --- /dev/null +++ b/src/components/modules/home/HomeVideo/HomeVideo.module.scss @@ -0,0 +1,68 @@ +@import "../../../../styles/utilities"; + +.homeVideo { + margin: 2rem auto 3rem; + .top, + .videoWrap > div { + @apply spacing-horizontal; + } + @screen md { + margin: 6.4rem auto 5.6rem; + .top, + .videoWrap > div { + max-width: 60rem; + margin: auto; + padding: 0; + } + } + + @screen lg { + .top, + .videoWrap > div { + max-width: 80rem; + } + } + .top { + margin-bottom: 2rem; + @screen md { + @apply flex items-center; + margin-bottom: 4rem; + .logo { + margin-right: 2.4rem; + margin-bottom: 0; + } + } + .logo { + max-width: 10rem; + margin-bottom: 1rem; + img { + object-fit: cover; + } + } + .heading { + @apply heading-2 font-heading; + } + } + .videoWrap { + @apply relative flex justify-center; + > div { + @apply relative; + width: 100% !important; + z-index: 10; + } + &::before { + @apply absolute bg-primary; + content: ""; + width: 100%; + height: 18rem; + top: 50%; + transform: translateY(-50%); + z-index: 0; + @screen md { + background-image: url("./assets/bg_left.svg"), url("./assets/bg_right.svg"); + background-repeat: no-repeat; + background-position: 5% 0, 95% 0; + } + } + } +} diff --git a/src/components/modules/home/HomeVideo/HomeVideo.tsx b/src/components/modules/home/HomeVideo/HomeVideo.tsx new file mode 100644 index 000000000..9aaeab075 --- /dev/null +++ b/src/components/modules/home/HomeVideo/HomeVideo.tsx @@ -0,0 +1,31 @@ +import Image from 'next/image' +import React from 'react' +import s from './HomeVideo.module.scss' +import LogoBrand from './assets/logo_maggi.png' +import { VideoPlayer } from 'src/components/common' + +interface Props { + className?: string + children?: any +} + +const HomeVideo = ({ }: Props) => { + return ( +
+
+
+ +
+

+ Maggi Sauce Is The Secret Weapon For Making All Your Food +

+
+
+ {/* todo: change url video */} + +
+
+ ) +} + +export default HomeVideo diff --git a/src/components/modules/home/HomeVideo/assets/bg_left.svg b/src/components/modules/home/HomeVideo/assets/bg_left.svg new file mode 100644 index 000000000..d730f777d --- /dev/null +++ b/src/components/modules/home/HomeVideo/assets/bg_left.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/components/modules/home/HomeVideo/assets/bg_right.svg b/src/components/modules/home/HomeVideo/assets/bg_right.svg new file mode 100644 index 000000000..e89652a3a --- /dev/null +++ b/src/components/modules/home/HomeVideo/assets/bg_right.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/modules/home/HomeVideo/assets/logo_maggi.png b/src/components/modules/home/HomeVideo/assets/logo_maggi.png new file mode 100644 index 000000000..de0ce8e58 Binary files /dev/null and b/src/components/modules/home/HomeVideo/assets/logo_maggi.png differ diff --git a/src/components/modules/home/index.ts b/src/components/modules/home/index.ts index 98afbe092..ca25e8cbe 100644 --- a/src/components/modules/home/index.ts +++ b/src/components/modules/home/index.ts @@ -1,3 +1,4 @@ export { default as HomeBanner } from './HomeBanner/HomeBanner' export { default as HomeCTA } from './HomeCTA/HomeCTA' export { default as HomeSubscribe } from './HomeSubscribe/HomeSubscribe' +export { default as HomeVideo } from './HomeVideo/HomeVideo' diff --git a/yarn.lock b/yarn.lock index f71819fb6..e719b25d1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2292,7 +2292,7 @@ deep-extend@^0.6.0: resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac" integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA== -deepmerge@4.2.2, deepmerge@^4.2.2: +deepmerge@4.2.2, deepmerge@^4.0.0, deepmerge@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== @@ -3657,6 +3657,11 @@ listr@^0.14.3: p-map "^2.0.0" rxjs "^6.3.3" +load-script@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4" + integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ= + loader-utils@1.2.3: version "1.2.3" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7" @@ -3878,6 +3883,11 @@ md5.js@^1.3.4: inherits "^2.0.1" safe-buffer "^5.1.2" +memoize-one@^5.1.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + merge-stream@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" @@ -4894,7 +4904,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@15.7.2: +prop-types@15.7.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -5029,6 +5039,11 @@ react-dom@^17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" +react-fast-compare@^3.0.1: + version "3.2.0" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" + integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== + react-fast-marquee@^1.1.4: version "1.2.1" resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.2.1.tgz#8a8ee91ec0cee04bcff7f1ea5c3fd5a2c4dc227d" @@ -5049,6 +5064,17 @@ react-merge-refs@^1.1.0: resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06" integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ== +react-player@^2.9.0: + version "2.9.0" + resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.9.0.tgz#ef7fe7073434087565f00ff219824e1e02c4b046" + integrity sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA== + dependencies: + deepmerge "^4.0.0" + load-script "^1.0.0" + memoize-one "^5.1.1" + prop-types "^15.7.2" + react-fast-compare "^3.0.1" + react-refresh@0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"