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}
)