diff --git a/pages/index.tsx b/pages/index.tsx index 5f4ebb217..238543466 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,5 @@ -import { Banner, ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout } from 'src/components/common'; +import { ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout } from 'src/components/common'; import { IconBuy } from 'src/components/icons'; export default function Home() { return ( @@ -15,12 +15,6 @@ export default function Home() { - - }>Button diff --git a/src/assets/imgs/apple_pay.png b/src/assets/imgs/apple_pay.png new file mode 100644 index 000000000..c2c915d66 Binary files /dev/null and b/src/assets/imgs/apple_pay.png differ diff --git a/src/assets/imgs/gpay.png b/src/assets/imgs/gpay.png new file mode 100644 index 000000000..55e5dfbae Binary files /dev/null and b/src/assets/imgs/gpay.png differ diff --git a/src/assets/imgs/mastercard.png b/src/assets/imgs/mastercard.png new file mode 100644 index 000000000..fad380822 Binary files /dev/null and b/src/assets/imgs/mastercard.png differ diff --git a/src/assets/imgs/visa.png b/src/assets/imgs/visa.png new file mode 100644 index 000000000..1ba0cec4b Binary files /dev/null and b/src/assets/imgs/visa.png differ diff --git a/src/components/common/Footer/Footer.module.scss b/src/components/common/Footer/Footer.module.scss new file mode 100644 index 000000000..1eaa84456 --- /dev/null +++ b/src/components/common/Footer/Footer.module.scss @@ -0,0 +1,23 @@ +@import "../../../styles/utilities"; + +.footer { + @apply spacing-horizontal; + padding-top: 4rem; + padding-bottom: 2rem; + .footerMenu { + padding-bottom: 8rem; + } + .menu { + @apply flex flex-wrap; + } + + @screen md { + padding-bottom: 4rem; + .footerMenu { + @apply flex; + .menu { + @apply flex-nowrap justify-between; + } + } + } +} diff --git a/src/components/common/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx new file mode 100644 index 000000000..a830c60ea --- /dev/null +++ b/src/components/common/Footer/Footer.tsx @@ -0,0 +1,85 @@ +import React from 'react' +import { ROUTE } from 'src/utils/constanst.utils' +import FooterColumn from './components/FooterColumn/FooterColumn' +import FooterSocial from './components/FooterSocial/FooterSocial' +import s from './Footer.module.scss' + +const FOOTER_COLUMNS = [ + { + title: 'Company', + items: [ + { + name: 'All Product', + link: ROUTE.PRODUCTS, + }, + { + name: 'About Us', + link: ROUTE.ABOUT, + }, + { + name: 'Bussiness', + link: ROUTE.BUSSINESS, + } + ] + }, + { + title: 'Resources', + items: [ + { + name: 'Contact Us', + link: ROUTE.CONTACT, + }, + { + name: 'FAQ', + link: ROUTE.FAQ, + }, + { + name: 'Customer Service', + link: ROUTE.CUSTOMER_SERVICE, + }, + ] + }, + { + title: 'Quick Links', + items: [ + { + name: 'Terms & Conditions', + link: ROUTE.TERM_CONDITION, + }, + { + name: 'Privacy Policy', + link: ROUTE.TERM_CONDITION, + }, + { + name: 'Blog', + link: ROUTE.TERM_CONDITION, + }, + ] + } +] + +interface Props { + className?: string + children?: any +} + +const Footer = ({ }: Props) => { + return ( +
+
+
+ {FOOTER_COLUMNS.map(item => )} +
+ +
+
+ © 2021 Online Grocery +
+
+ ) +} + +export default Footer diff --git a/src/components/common/Footer/components/FooterColumn/FooterColumn.module.scss b/src/components/common/Footer/components/FooterColumn/FooterColumn.module.scss new file mode 100644 index 000000000..49728bc76 --- /dev/null +++ b/src/components/common/Footer/components/FooterColumn/FooterColumn.module.scss @@ -0,0 +1,34 @@ +@import "../../../../../styles/utilities"; + +.footerColumn { + width: 50%; + margin-bottom: 4rem; + @screen md { + padding-right: 6.4rem; + width: unset; + margin-bottom: 0; + } + + @screen lg { + padding-right: 12.8rem; + } + .title { + @apply sm-headline text-active; + margin-bottom: 2.4rem; + } + ul { + list-style: none; + li { + &:not(:last-child) { + margin-bottom: 1.6rem; + } + a { + text-decoration: none; + @apply transition-all duration-200; + &:hover { + color: var(--primary); + } + } + } + } +} diff --git a/src/components/common/Footer/components/FooterColumn/FooterColumn.tsx b/src/components/common/Footer/components/FooterColumn/FooterColumn.tsx new file mode 100644 index 000000000..4adda1985 --- /dev/null +++ b/src/components/common/Footer/components/FooterColumn/FooterColumn.tsx @@ -0,0 +1,38 @@ +import Link from 'next/link'; +import React from 'react'; +import s from './FooterColumn.module.scss' + +interface Props { + title: string, + items: { link: string, name: string, isOpenNewTab?: boolean }[], +} + +const FooterColumn = ({ title, items }: Props) => { + return ( +
+

+ {title} +

+ +
+ ); +}; + +export default FooterColumn; \ No newline at end of file diff --git a/src/components/common/Footer/components/FooterSocial/FooterSocial.module.scss b/src/components/common/Footer/components/FooterSocial/FooterSocial.module.scss new file mode 100644 index 000000000..cfc2060c5 --- /dev/null +++ b/src/components/common/Footer/components/FooterSocial/FooterSocial.module.scss @@ -0,0 +1,43 @@ +@import "../../../../../styles/utilities"; + +.footerSocial { + .title { + @apply sm-headline text-active; + margin-bottom: 2.4rem; + } + .socialMedia, + .payment { + @apply list-none flex items-center; + } + .socialMedia { + li { + @apply transition-all duration-200; + margin-right: 1.6rem; + &:last-child { + margin-right: 0; + } + a { + @apply no-underline; + } + &:hover { + svg path { + fill: var(--primary); + } + } + } + } + .payment { + margin-top: 3.2rem; + li { + margin-right: 1.6rem; + width: 4rem; + img { + width: 100%; + object-fit: contain; + } + &:last-child { + margin-right: 0; + } + } + } +} diff --git a/src/components/common/Footer/components/FooterSocial/FooterSocial.tsx b/src/components/common/Footer/components/FooterSocial/FooterSocial.tsx new file mode 100644 index 000000000..997fbfbfe --- /dev/null +++ b/src/components/common/Footer/components/FooterSocial/FooterSocial.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import IconFacebook from 'src/components/icons/IconFacebook'; +import IconInstagram from 'src/components/icons/IconInstagram'; +import IconTwitter from 'src/components/icons/IconTwitter'; +import IconYoutube from 'src/components/icons/IconYoutube'; +import { SOCIAL_LINKS } from 'src/utils/constanst.utils'; +import IconVisa from '../../../../../assets/imgs/visa.png'; +import IconMasterCard from '../../../../../assets/imgs/mastercard.png'; +import IconGooglePlay from '../../../../../assets/imgs/gpay.png'; +import IconApplePay from '../../../../../assets/imgs/apple_pay.png'; +import s from './FooterSocial.module.scss'; + + + +const SOCIAL_MENU = [ + { + icon: , + link: SOCIAL_LINKS.FB, + }, + { + icon: , + link: SOCIAL_LINKS.TWITTER, + }, + { + icon: , + link: SOCIAL_LINKS.YOUTUBE, + }, + { + icon: , + link: SOCIAL_LINKS.IG, + }, +] + +const PAYMENT_METHODS = [ + { + icon: IconVisa.src, + name: 'Visa' + }, + { + icon: IconMasterCard.src, + name: 'Master Card' + }, + { + icon: IconGooglePlay.src, + name: 'GooglePay' + }, + { + icon: IconApplePay.src, + name: 'Apple Pay' + }, +] + +const FooterSocial = () => { + return ( +
+
Social
+ +
    + { + PAYMENT_METHODS.map(item =>
  • + {item.name} +
    • ) + } +
+
+ ); +}; + +export default FooterSocial; \ No newline at end of file diff --git a/src/components/common/Layout/Layout.module.scss b/src/components/common/Layout/Layout.module.scss new file mode 100644 index 000000000..e495667eb --- /dev/null +++ b/src/components/common/Layout/Layout.module.scss @@ -0,0 +1,8 @@ +.mainLayout { + display: flex; + flex-direction: column; + min-height: 100vh; + > main { + flex: 1; + } +} diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index 356ecfce5..aa5da11e1 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -1,7 +1,9 @@ -import { FC, useRef, useEffect } from 'react' -import Header from '../Header/Header' import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' +import { FC } from 'react' +import Footer from '../Footer/Footer' +import Header from '../Header/Header' +import s from './Layout.module.scss' interface Props { className?: string @@ -14,8 +16,11 @@ const Layout: FC = ({ children }) => { return ( -
-
{children}
+
+
+
{children}
+
+
) diff --git a/src/components/icons/IconApplePay.tsx b/src/components/icons/IconApplePay.tsx new file mode 100644 index 000000000..6fc15e35c --- /dev/null +++ b/src/components/icons/IconApplePay.tsx @@ -0,0 +1,18 @@ +import React from 'react' + +const IconApplePay = () => { + return ( + + + + + + + + + + + ) +} + +export default IconApplePay diff --git a/src/components/icons/IconFacebook.tsx b/src/components/icons/IconFacebook.tsx new file mode 100644 index 000000000..f3d6e72ea --- /dev/null +++ b/src/components/icons/IconFacebook.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconFacebook = () => { + return ( + + + + ) +} + +export default IconFacebook diff --git a/src/components/icons/IconGooglePay.tsx b/src/components/icons/IconGooglePay.tsx new file mode 100644 index 000000000..e0932c155 --- /dev/null +++ b/src/components/icons/IconGooglePay.tsx @@ -0,0 +1,18 @@ +import React from 'react' + +const IconGooglePay = () => { + return ( + + + + + + + + + + + ) +} + +export default IconGooglePay diff --git a/src/components/icons/IconInstagram.tsx b/src/components/icons/IconInstagram.tsx new file mode 100644 index 000000000..77b028806 --- /dev/null +++ b/src/components/icons/IconInstagram.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconInstagram = () => { + return ( + + + + ) +} + +export default IconInstagram diff --git a/src/components/icons/IconMasterCard.tsx b/src/components/icons/IconMasterCard.tsx new file mode 100644 index 000000000..91bedc944 --- /dev/null +++ b/src/components/icons/IconMasterCard.tsx @@ -0,0 +1,18 @@ +import React from 'react' + +const IconMasterCard = () => { + return ( + + + + + + + + + + + ) +} + +export default IconMasterCard diff --git a/src/components/icons/IconTwitter.tsx b/src/components/icons/IconTwitter.tsx new file mode 100644 index 000000000..3d5220607 --- /dev/null +++ b/src/components/icons/IconTwitter.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconTwitter = () => { + return ( + + + + ) +} + +export default IconTwitter diff --git a/src/components/icons/IconYoutube.tsx b/src/components/icons/IconYoutube.tsx new file mode 100644 index 000000000..105bc3332 --- /dev/null +++ b/src/components/icons/IconYoutube.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconYoutube = () => { + return ( + + + + ) +} + +export default IconYoutube diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index 63dd56281..266834b62 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -40,6 +40,7 @@ font-size: 1.8rem; line-height: 2.8rem; letter-spacing: -0.01em; + font-weight: bold; @screen md { font-size: 2rem; line-height: 2.8rem; diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index defc74eba..11f17767a 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -1,7 +1,25 @@ -export const KEY = { - ENTER: 'Enter', +export const SOCIAL_LINKS = { + FB: '', + TWITTER: '', + YOUTUBE: '', + IG: '', } export const ROUTE = { HOME: '/', + PRODUCTS: '/products', + ABOUT: '/about', + BUSSINESS: '/bussiness', + + CONTACT: '/contact', + FAQ: '/faq', + CUSTOMER_SERVICE: '/customer-service', + TERM_CONDITION: '/term-condition', + PRIVACY_POLICY: '/privacy-policy', + BLOGS: '/blogs', } + +export const KEY = { + ENTER: 'Enter', +} +