diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss new file mode 100644 index 000000000..f9f799ae6 --- /dev/null +++ b/src/components/modules/home/HomeFeature/HomeFeature.module.scss @@ -0,0 +1,43 @@ +@import '../../../../styles/utilities'; + +.homeFeature { + @apply spacing-horizontal-left; + overflow-x: hidden; + + @screen md { + @apply spacing-horizontal grid grid-cols-3; + + } +} + +.homeFeatureItem { + @apply inline-block align-middle; + + .itemImg { + @apply float-left clear-both; + width: 5.6rem; + height: 5.6rem; + + @screen md { + @apply float-left clear-both; + width: 11.2rem; + height: 11.2rem; + } + } + + .itemText { + @apply collection-subtitle; + width: 28rem; + height: 9.6rem; + margin-left: 2.4rem; + + @screen md { + @apply collection-subtitle text-justify; + width: 36rem; + height: 9.6rem; + margin-left: 2.4rem; + color: red; + } + } + +} \ No newline at end of file diff --git a/src/components/modules/home/HomeFeature/HomeFeature.tsx b/src/components/modules/home/HomeFeature/HomeFeature.tsx new file mode 100644 index 000000000..04611ac75 --- /dev/null +++ b/src/components/modules/home/HomeFeature/HomeFeature.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import s from './HomeFeature.module.scss' + +import HomeFeatureItem from './HomeFeatureItem' + +import img from './assets/desktop.png' + +interface HomeFeatureProps { + +} + +const HomeFeature = ({ }: HomeFeatureProps) => { + return ( +
+ + + +
+ ) + +} + +export default HomeFeature diff --git a/src/components/modules/home/HomeFeature/HomeFeatureItem.tsx b/src/components/modules/home/HomeFeature/HomeFeatureItem.tsx new file mode 100644 index 000000000..50b01abd0 --- /dev/null +++ b/src/components/modules/home/HomeFeature/HomeFeatureItem.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import s from './HomeFeature.module.scss' +import Image from 'next/image' + +interface HomeFeatureItemProps { + image?: any; + children: string; +} + +const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => { + + return ( +
+ home feature item img + {/* home feature item img */} +
{children}
+
+ ) + +} + +export default HomeFeatureItem diff --git a/src/components/modules/home/HomeFeature/assets/desktop.png b/src/components/modules/home/HomeFeature/assets/desktop.png new file mode 100644 index 000000000..f304867b9 Binary files /dev/null and b/src/components/modules/home/HomeFeature/assets/desktop.png differ diff --git a/src/components/modules/home/HomeFeature/assets/mobile.png b/src/components/modules/home/HomeFeature/assets/mobile.png new file mode 100644 index 000000000..871e0e15b Binary files /dev/null and b/src/components/modules/home/HomeFeature/assets/mobile.png differ diff --git a/src/components/modules/home/index.ts b/src/components/modules/home/index.ts index a83854f9f..2db06b7bb 100644 --- a/src/components/modules/home/index.ts +++ b/src/components/modules/home/index.ts @@ -1 +1,3 @@ export { default as HomeBanner } from './HomeBanner/HomeBanner' +export { default as HomeFeature } from './HomeFeature/HomeFeature' +export { default as HomeFeatureItem } from './HomeFeature/HomeFeatureItem'