diff --git a/pages/index.tsx b/pages/index.tsx index 6d6f1a6e9..1d3072ef7 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,14 +1,14 @@ import { Layout } from 'src/components/common' -import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories } from 'src/components/modules/home'; -import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe'; +import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories, HomeFeature, HomeRecipe } from 'src/components/modules/home'; export default function Home() { return ( <> - - + + + diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss index fdd3dbde7..4cfe737de 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.module.scss +++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss @@ -5,7 +5,10 @@ display: flex; justify-content: center; align-items: center; - padding: 0.8rem 3.2rem; + padding: 1rem 2rem; + @screen md { + padding: 0.8rem 3.2rem; + } &:disabled { filter: brightness(0.9); cursor: not-allowed; @@ -76,9 +79,15 @@ } &.large { - padding: 1.6rem 4.8rem; + padding: 1rem 1.5rem; &.onlyIcon { - padding: 1.6rem; + padding: 1rem; + } + @screen md { + padding: 1.6rem 4.8rem; + &.onlyIcon { + padding: 1.6rem; + } } &.loading { &::before { @@ -97,10 +106,6 @@ .icon { margin: 0 1.6rem 0 0; - } - - .label, - .icon { svg path { fill: currentColor; } diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index dfce58b57..5cafab930 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -1,19 +1,18 @@ import classNames from 'classnames' import React, { memo, useEffect, useState } from 'react' +import { useModalCommon } from 'src/components/hooks/useModalCommon' import { isMobile } from 'src/utils/funtion.utils' +import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate' import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight' import HeaderMenu from './components/HeaderMenu/HeaderMenu' import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu' import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile' import s from './Header.module.scss' -interface Props { - className?: string - children?: any -} -const Header = memo(({ }: Props) => { +const Header = memo(() => { const [isFullHeader, setIsFullHeader] = useState(true) + const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: true }) useEffect(() => { window.addEventListener('scroll', handleScroll) @@ -36,11 +35,12 @@ const Header = memo(({ }: Props) => {
- +
+ ) }) diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx index 8f19b11e8..a5ef71951 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx @@ -1,30 +1,35 @@ import classNames from 'classnames' import Link from 'next/link' -import { memo } from 'react' +import { memo, useMemo } from 'react' import InputSearch from 'src/components/common/InputSearch/InputSearch' import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown' import { IconBuy, IconHeart, IconHistory, IconUser } from 'src/components/icons' import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' import s from './HeaderMenu.module.scss' -const OPTION_MENU = [ - { - link: ROUTE.ACCOUNT, - name: 'Account', - }, - { - link: '/', - name: 'Logout', - }, - -] - interface Props { children?: any, isFull: boolean, + openModalAuthen: () => void, } -const HeaderMenu = memo(({ isFull }: Props) => { +const HeaderMenu = memo(({ isFull, openModalAuthen }: Props) => { + const optionMenu = useMemo(() => [ + { + onClick: openModalAuthen, + name: 'Login (Demo)', + }, + { + link: ROUTE.ACCOUNT, + name: 'Account', + }, + { + link: '/', + name: 'Logout', + }, + + ], [openModalAuthen]) + return (
@@ -54,7 +59,7 @@ const HeaderMenu = memo(({ isFull }: Props) => {
  • - +
  • + : + + + {item.name} + + }
    • ) } diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss b/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss new file mode 100644 index 000000000..e61000bbf --- /dev/null +++ b/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss @@ -0,0 +1,10 @@ +.formAuthenticate { + @apply overflow-hidden; + .inner { + @apply grid grid-cols-2 overflow-hidden transition-all duration-200; + width: 200%; + &.register { + transform: translateX(-50%); + } + } +} diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx new file mode 100644 index 000000000..31ca3fb81 --- /dev/null +++ b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx @@ -0,0 +1,36 @@ +import classNames from 'classnames' +import React, { useState } from 'react' +import ModalCommon from '../ModalCommon/ModalCommon' +import FormLogin from './components/FormLogin/FormLogin' +import FormRegister from './components/FormRegister/FormRegister' +import s from './ModalAuthenticate.module.scss' + +interface Props { + visible: boolean, + closeModal: () => void, +} + +const ModalAuthenticate = ({ visible, closeModal }: Props) => { + const [isLogin, setIsLogin] = useState(true) + + const onSwitch = () => { + setIsLogin(!isLogin) + } + + return ( + +
    +
    + + +
    +
    +     + + ) +} + +export default ModalAuthenticate \ No newline at end of file diff --git a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss new file mode 100644 index 000000000..bdfc69387 --- /dev/null +++ b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss @@ -0,0 +1,35 @@ +.formAuthen { + @apply bg-white w-full; + .inner { + @screen md { + max-width: 52rem; + margin: auto; + } + .body { + > div { + &:not(:last-child) { + margin-bottom: 1.6rem; + } + } + } + .others { + @apply font-bold text-center; + margin-top: 4rem; + + span { + @apply text-active; + margin-right: 0.8rem; + } + button { + all: unset; + @apply text-primary cursor-pointer; + &:focus-visible { + outline: 2px solid #000; + } + &:focus { + outline: none; + } + } + } + } +} diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss new file mode 100644 index 000000000..a269e9441 --- /dev/null +++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss @@ -0,0 +1,9 @@ +.bottom { + @apply flex justify-between items-center; + margin: 4rem auto; + .forgotPassword { + @apply font-bold; + color: var(--primary); + } +} + diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx new file mode 100644 index 000000000..7ef3ec9ba --- /dev/null +++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx @@ -0,0 +1,53 @@ +import Link from 'next/link' +import React, { useRef, useEffect } from 'react' +import { Inputcommon, ButtonCommon } from 'src/components/common' +import { ROUTE } from 'src/utils/constanst.utils' +import SocialAuthen from '../SocialAuthen/SocialAuthen' +import s from '../FormAuthen.module.scss' +import styles from './FormLogin.module.scss' +import classNames from 'classnames' +import { CustomInputCommon } from 'src/utils/type.utils' + +interface Props { + isHide: boolean, + onSwitch: () => void +} + +const FormLogin = ({ onSwitch, isHide }: Props) => { + const emailRef = useRef(null) + + useEffect(() => { + if (!isHide) { + emailRef.current?.focus() + } + }, [isHide]) + + return ( +
    +
    +
    + + +
    +
    + + + Forgot Password? + + + Sign in +
    + +
    + Don't have an account? + +
    +
    +
    + ) +} + +export default FormLogin \ No newline at end of file diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss new file mode 100644 index 000000000..95f6cfb04 --- /dev/null +++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss @@ -0,0 +1,15 @@ +@import "../../../../../styles/utilities"; + +.formRegister { + .passwordNote { + @apply text-center caption text-label; + margin-top: 0.8rem; + } + .bottom { + @apply flex justify-between items-center w-full; + margin: 4rem auto; + button { + @apply w-full; + } + } +} diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx new file mode 100644 index 000000000..1624f2c1c --- /dev/null +++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx @@ -0,0 +1,50 @@ +import React, { useEffect, useRef } from 'react' +import { ButtonCommon, Inputcommon } from 'src/components/common' +import s from '../FormAuthen.module.scss' +import styles from './FormRegister.module.scss' +import SocialAuthen from '../SocialAuthen/SocialAuthen' +import classNames from 'classnames' +import { CustomInputCommon } from 'src/utils/type.utils' + +interface Props { + isHide: boolean, + onSwitch: () => void +} + +const FormRegister = ({ onSwitch, isHide }: Props) => { + const emailRef = useRef(null) + + useEffect(() => { + if (!isHide) { + emailRef.current?.focus() + } + }, [isHide]) + + return ( +
    +
    +
    + + +
    + Must contain 8 characters with at least 1 uppercase and 1 lowercase letter and either 1 number or 1 special character. +
    +
    +
    + Create Account +
    + +
    + Already an account? + +
    +
    +
    + ) +} + +export default FormRegister \ No newline at end of file diff --git a/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss b/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss new file mode 100644 index 000000000..425037e15 --- /dev/null +++ b/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss @@ -0,0 +1,36 @@ +@import "../../../../../styles/utilities"; + +.socialAuthen { + .captionText { + @apply relative text-center; + margin-bottom: 4rem; + span { + @apply relative bg-white uppercase text-label caption; + padding: 0 0.8rem; + z-index: 10; + } + &::after { + @apply absolute bg-line; + content: ""; + width: 100%; + height: 1px; + top: 50%; + left: 0; + transform: translateY(-50%); + } + } + .btns { + @apply grid grid-cols-3; + grid-gap: 1.6rem; + .buttonWithIcon { + @apply flex items-center; + .label { + @apply hidden; + @screen md { + @apply inline-block; + margin-left: 0.8rem; + } + } + } + } +} diff --git a/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.tsx b/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.tsx new file mode 100644 index 000000000..3cfdc80dd --- /dev/null +++ b/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import ButtonCommon from 'src/components/common/ButtonCommon/ButtonCommon' +import { IconApple, IconFacebookColor, IconGoogleColor } from 'src/components/icons' +import s from './SocialAuthen.module.scss' + +const SocialAuthen = () => { + return ( +
    +
    + + OR CONTINUE WITH + +
    +
    + + + Facebook + + + + + + Apple + + + + + + Google + + +
    +
    + ) +} + +export default SocialAuthen \ No newline at end of file diff --git a/src/components/common/ModalCommon/ModalCommon.module.scss b/src/components/common/ModalCommon/ModalCommon.module.scss index de47d0293..d4967b04e 100644 --- a/src/components/common/ModalCommon/ModalCommon.module.scss +++ b/src/components/common/ModalCommon/ModalCommon.module.scss @@ -1,3 +1,5 @@ +@import '../../../styles/utilities'; + .background{ @apply fixed inset-0 overflow-y-auto; background: rgba(20, 20, 20, 0.65); @@ -10,10 +12,12 @@ padding: 3.2rem; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24); border-radius: 1.2rem; + .top { + margin-bottom: 4rem; + } .title{ + @apply font-heading heading-3; padding: 0 0.8rem 0 0.8rem; - font-size: 3.2rem; - line-height: 4rem; } .close{ @apply absolute; diff --git a/src/components/hooks/useModalCommon.tsx b/src/components/hooks/useModalCommon.tsx new file mode 100644 index 000000000..02626ce94 --- /dev/null +++ b/src/components/hooks/useModalCommon.tsx @@ -0,0 +1,23 @@ +import { useState } from 'react'; + +interface Props { + initialValue?: boolean, +} + +export const useModalCommon = ({ initialValue = false }: Props) => { + const [visible, setVisible] = useState(initialValue) + + const openModal = (e?: any) => { + e && e.stopPropagation() + setVisible(true) + } + + const closeModal = (e?: any) => { + e && e.stopPropagation() + setVisible(false) + } + + return { + visible, openModal, closeModal + } +}; diff --git a/src/components/icons/IconApple.tsx b/src/components/icons/IconApple.tsx new file mode 100644 index 000000000..798d32419 --- /dev/null +++ b/src/components/icons/IconApple.tsx @@ -0,0 +1,18 @@ +import React from 'react' + +const IconApple = () => { + return ( + + + + + + + + + + + ) +} + +export default IconApple diff --git a/src/components/icons/IconFacebookColor.tsx b/src/components/icons/IconFacebookColor.tsx new file mode 100644 index 000000000..71251a1fa --- /dev/null +++ b/src/components/icons/IconFacebookColor.tsx @@ -0,0 +1,19 @@ +import React from 'react' + +const IconFacebookColor = () => { + return ( + + + + + + + + + + + + ) +} + +export default IconFacebookColor diff --git a/src/components/icons/IconGoogleColor.tsx b/src/components/icons/IconGoogleColor.tsx new file mode 100644 index 000000000..2cbf508bd --- /dev/null +++ b/src/components/icons/IconGoogleColor.tsx @@ -0,0 +1,21 @@ +import React from 'react' + +const IconGoogleColor = () => { + return ( + + + + + + + + + + + + + + ) +} + +export default IconGoogleColor diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index fc7f993a9..02b4947cb 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -9,6 +9,9 @@ export { default as IconHome } from './IconHome' export { default as IconShopping } from './IconShopping' export { default as IconHeart } from './IconHeart' export { default as IconVector } from './IconVector' +export { default as IconFacebookColor } from './IconFacebookColor' +export { default as IconGoogleColor } from './IconGoogleColor' +export { default as IconApple } from './IconApple' export { default as ArrowLeft } from './ArrowLeft' export { default as ArrowRight } from './ArrowRight' export { default as Close } from './Close' diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss index 15ad6b9dc..1753edf99 100644 --- a/src/components/modules/home/HomeFeature/HomeFeature.module.scss +++ b/src/components/modules/home/HomeFeature/HomeFeature.module.scss @@ -1,14 +1,16 @@ @import "../../../../styles/utilities"; .homeFeature { - @apply spacing-horizontal-left grid grid-cols-1; - background-color: #FFFFFF; + @apply spacing-horizontal; + background-color: #ffffff; height: fit-content; - padding-top: 3.2rem; - padding-bottom: 3.2rem; - + margin: 3.2rem auto; @screen md { - @apply spacing-horizontal grid-cols-3; - margin-bottom: 6.4rem; + @apply grid grid-cols-3; + grid-gap: 2.4rem; + margin: 6.4rem auto; } -} \ No newline at end of file + @screen md { + grid-gap: 4rem; + } +} 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 a31e5e4fe..d3dcb518b 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss @@ -1,18 +1,16 @@ -@import '../../../../../../styles/utilities'; +@import "../../../../../../styles/utilities"; .homeFeatureItem { - @apply flex; - align-items: center; - vertical-align: middle; - height: fit-content; + @apply flex items-center; width: fit-content; + margin: auto; @screen md { - @apply block; + @apply flex flex-col items-center justify-between; } @screen lg { - @apply flex; + @apply flex flex-row; } .itemImg { @@ -21,39 +19,38 @@ align-items: center; &.firstImg { margin-top: 1rem; - content:url("../../assets/10h30-11h-desktop.png"); + content: url("../../assets/10h30-11h-desktop.png"); } &.secondImg { margin-top: 1rem; - content:url("../../assets/8h-desktop.png"); + content: url("../../assets/8h-desktop.png"); } &.thirdImg { margin-top: 1rem; - content:url("../../assets/green-desktop.png"); + content: url("../../assets/green-desktop.png"); } - + @screen md { - @apply flex justify-center items-center; + @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; } } .itemText { - @apply inline-block; max-width: 28rem; min-width: 12rem; - color: #000; - margin-right: 2.4rem; - align-items: center; - @screen md { - @apply flex; + @apply text-center; + } + @screen lg { + @apply text-left; } } - -} \ No newline at end of file +} diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 5d0cd8322..67eb96726 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -34,7 +34,7 @@ --border-line: #ebebeb; --background: #fff; --gray: #f8f8f8; - --white: #fbfbfb; + --white: #fff; --background-arrow:rgba(20, 20, 20, 0.05); --font-size: 1.6rem; --line-height: 2.4rem; diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index 0d66ecda0..c7002a730 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -18,6 +18,7 @@ export const ROUTE = { TERM_CONDITION: '/term-condition', PRIVACY_POLICY: '/privacy-policy', BLOGS: '/blogs', + FORGOT_PASSWORD: '/forgot-password' } export const ACCOUNT_TAB = {