diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss index 1753edf99..3275bfb3b 100644 --- a/src/components/modules/home/HomeFeature/HomeFeature.module.scss +++ b/src/components/modules/home/HomeFeature/HomeFeature.module.scss @@ -1,16 +1,5 @@ @import "../../../../styles/utilities"; .homeFeature { - @apply spacing-horizontal; - background-color: #ffffff; - height: fit-content; - margin: 3.2rem auto; - @screen md { - @apply grid grid-cols-3; - grid-gap: 2.4rem; - margin: 6.4rem auto; - } - @screen md { - grid-gap: 4rem; - } + @apply spacing-horizontal-left bg-white; } diff --git a/src/components/modules/home/HomeFeature/HomeFeature.tsx b/src/components/modules/home/HomeFeature/HomeFeature.tsx index af6ec7287..d8851aa30 100644 --- a/src/components/modules/home/HomeFeature/HomeFeature.tsx +++ b/src/components/modules/home/HomeFeature/HomeFeature.tsx @@ -1,25 +1,34 @@ import React from 'react' import s from './HomeFeature.module.scss' -import HomeFeatureItem from './components/HomeFeatureItem/HomeFeatureItem' +import FirstPic from './assets/10h30-11h.png' +import SecondPic from './assets/8h.png' +import ThirdPic from './assets/green.png' -const HomeFeature = () => { +import HomeFeatureCarousel from './components/HomeFeatureCarousel/HomeFeatureCarousel' + +const CAROUSEL_DATA = [ + { + image: FirstPic, + children: Webshop owner will upload products at 10:30pm shoppers can buy fresh products at 11pm., + }, + { + image: SecondPic, + children: Most fresh fish and seafood will be listed at 8am from inventory., + }, + { + image: ThirdPic, + children: Show that food will be shipped in a greengrocery plastic bag., + }, +] + +const HomeFeature = () => { return ( -
- - Webshop owner will upload products at 10:30pm shoppers can buy fresh products at 11pm. - - - - Most fresh fish and seafood will be listed at 8am from inventory. - - - - Show that food will be shipped in a greengrocery plastic bag. - -
+
+ +
) } -export default HomeFeature +export default HomeFeature \ No newline at end of file diff --git a/src/components/modules/home/HomeFeature/assets/10h30-11h-mobile.png b/src/components/modules/home/HomeFeature/assets/10h30-11h-mobile.png deleted file mode 100644 index 871e0e15b..000000000 Binary files a/src/components/modules/home/HomeFeature/assets/10h30-11h-mobile.png and /dev/null differ diff --git a/src/components/modules/home/HomeFeature/assets/10h30-11h-desktop.png b/src/components/modules/home/HomeFeature/assets/10h30-11h.png similarity index 100% rename from src/components/modules/home/HomeFeature/assets/10h30-11h-desktop.png rename to src/components/modules/home/HomeFeature/assets/10h30-11h.png diff --git a/src/components/modules/home/HomeFeature/assets/8h-mobile.png b/src/components/modules/home/HomeFeature/assets/8h-mobile.png deleted file mode 100644 index e734cf1e5..000000000 Binary files a/src/components/modules/home/HomeFeature/assets/8h-mobile.png and /dev/null differ diff --git a/src/components/modules/home/HomeFeature/assets/8h-desktop.png b/src/components/modules/home/HomeFeature/assets/8h.png similarity index 100% rename from src/components/modules/home/HomeFeature/assets/8h-desktop.png rename to src/components/modules/home/HomeFeature/assets/8h.png diff --git a/src/components/modules/home/HomeFeature/assets/green-desktop.png b/src/components/modules/home/HomeFeature/assets/green.png similarity index 100% rename from src/components/modules/home/HomeFeature/assets/green-desktop.png rename to src/components/modules/home/HomeFeature/assets/green.png diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx b/src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx new file mode 100644 index 000000000..32f545020 --- /dev/null +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import { TOptionsEvents } from 'keen-slider' + +import HomeFeatureItem, {HomeFeatureItemProps} from '../HomeFeatureItem/HomeFeatureItem' +import CarouselCommon, {CarouselCommonProps} from '../../../../../common/CarouselCommon/CarouselCommon' + +interface HomeFeatureCarouselProps + extends Omit, 'Component' | "option"> { + option?: TOptionsEvents +} + +const OPTION_DEFAULT: TOptionsEvents = { + slidesPerView: 1.2, + mode: 'free', + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 1.8, + }, + '(min-width: 768px)': { + slidesPerView: 2.1, + }, + '(min-width: 1008px)': { + slidesPerView: 2.3, + }, + '(min-width: 1280px)': { + slidesPerView: 2.8, + }, + '(min-width: 1440px)': { + slidesPerView: 3, + }, + }, + } + +const HomeFeatureCarousel = ({option, data, ...props} : HomeFeatureCarouselProps) => { + return ( +
+ + data={data} + Component={HomeFeatureItem} + {...props} + option={{ ...OPTION_DEFAULT, ...option }} + /> +
+ ) + +} + +export default HomeFeatureCarousel \ No newline at end of file diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss index d3dcb518b..c0b8d49ba 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss @@ -1,56 +1,18 @@ @import "../../../../../../styles/utilities"; .homeFeatureItem { - @apply flex items-center; - width: fit-content; - margin: auto; - - @screen md { - @apply flex flex-col items-center justify-between; - } - - @screen lg { - @apply flex flex-row; - } + @apply flex items-center justify-center; + margin-right: 0.8rem; + height: 100%; .itemImg { - @apply flex float-left clear-both; margin-right: 2.4rem; - align-items: center; - &.firstImg { - margin-top: 1rem; - content: url("../../assets/10h30-11h-desktop.png"); - } - &.secondImg { - margin-top: 1rem; - content: url("../../assets/8h-desktop.png"); - } - &.thirdImg { - margin-top: 1rem; - content: url("../../assets/green-desktop.png"); - } - - @screen md { - @apply flex flex-col justify-center items-center; - margin: auto; - margin-top: 0.8rem; - } - - @screen lg { - @apply flex float-left clear-both; - margin-right: 2.4rem; - margin-top: 0; - } + max-width: 12rem; + min-width: 8rem; } .itemText { max-width: 28rem; - min-width: 12rem; - @screen md { - @apply text-center; - } - @screen lg { - @apply text-left; - } + min-width: none; } } diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx index eb566bdc9..3cc2db47f 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx @@ -1,21 +1,21 @@ import React from 'react' -import classNames from 'classnames' import s from './HomeFeatureItem.module.scss' +import { StaticImage } from 'src/components/common' -interface HomeFeatureItemProps { - image: string; - children: any; +export interface HomeFeatureItemProps { + image: StaticImageData; + children: React.ReactNode; } const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => { return (
- home feature item img +
+ +
+
{children}
)