From 9255a6179beef707fcc3ae36f9d6205a85728a36 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 24 Aug 2021 17:46:13 +0700 Subject: [PATCH] :art: styles: footer :%s --- pages/index.tsx | 8 +- src/assets/imgs/apple_pay.png | Bin 0 -> 467 bytes src/assets/imgs/gpay.png | Bin 0 -> 607 bytes src/assets/imgs/mastercard.png | Bin 0 -> 519 bytes src/assets/imgs/visa.png | Bin 0 -> 640 bytes .../common/Footer/Footer.module.scss | 23 +++++ src/components/common/Footer/Footer.tsx | 85 ++++++++++++++++++ .../FooterColumn/FooterColumn.module.scss | 34 +++++++ .../components/FooterColumn/FooterColumn.tsx | 38 ++++++++ .../FooterSocial/FooterSocial.module.scss | 43 +++++++++ .../components/FooterSocial/FooterSocial.tsx | 77 ++++++++++++++++ .../common/Layout/Layout.module.scss | 8 ++ src/components/common/Layout/Layout.tsx | 13 ++- src/components/icons/IconApplePay.tsx | 18 ++++ src/components/icons/IconFacebook.tsx | 11 +++ src/components/icons/IconGooglePay.tsx | 18 ++++ src/components/icons/IconInstagram.tsx | 11 +++ src/components/icons/IconMasterCard.tsx | 18 ++++ src/components/icons/IconTwitter.tsx | 11 +++ src/components/icons/IconYoutube.tsx | 11 +++ src/styles/_utilities.scss | 1 + src/utils/constanst.utils.ts | 22 ++++- 22 files changed, 437 insertions(+), 13 deletions(-) create mode 100644 src/assets/imgs/apple_pay.png create mode 100644 src/assets/imgs/gpay.png create mode 100644 src/assets/imgs/mastercard.png create mode 100644 src/assets/imgs/visa.png create mode 100644 src/components/common/Footer/Footer.module.scss create mode 100644 src/components/common/Footer/Footer.tsx create mode 100644 src/components/common/Footer/components/FooterColumn/FooterColumn.module.scss create mode 100644 src/components/common/Footer/components/FooterColumn/FooterColumn.tsx create mode 100644 src/components/common/Footer/components/FooterSocial/FooterSocial.module.scss create mode 100644 src/components/common/Footer/components/FooterSocial/FooterSocial.tsx create mode 100644 src/components/common/Layout/Layout.module.scss create mode 100644 src/components/icons/IconApplePay.tsx create mode 100644 src/components/icons/IconFacebook.tsx create mode 100644 src/components/icons/IconGooglePay.tsx create mode 100644 src/components/icons/IconInstagram.tsx create mode 100644 src/components/icons/IconMasterCard.tsx create mode 100644 src/components/icons/IconTwitter.tsx create mode 100644 src/components/icons/IconYoutube.tsx 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 0000000000000000000000000000000000000000..c2c915d6674f1d09139f5746c29105c69a5f3ae7 GIT binary patch literal 467 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<^!3-obnb*7rQgZ@)LR|kN0iYO=2PE&`zrS?p zQgLzd?c292Dk{Ez|9<}b`2qq0b#-;l&dv@F4i**`92^{vA3r{K?p#zH?CT>YQlsGU0q$()zxKXWyQtC`T6;&si_GG2|+o1@Fy*J}Lqn2?hc7wy8*Zx+Uaw1zc zseg!X>dx&UPsUG?25IN(cf59Dxr+@D`=5ISL z@^VX$+^&McruilF+*X?C2Kh|B`s|azzE<{{!-?zMe~XxzFXry>G>U)EaY6J}TIAO~ zEJBBO&pdP{VnWT|isbdry#fjn`=2xYn=W*!!BG3KzQSesOsicJuK+#E;OXk;vd$@? F2>=#!)_ni~ literal 0 HcmV?d00001 diff --git a/src/assets/imgs/gpay.png b/src/assets/imgs/gpay.png new file mode 100644 index 0000000000000000000000000000000000000000..55e5dfbae9be5b1c91ea5d321944ffd43f501cdf GIT binary patch literal 607 zcmV-l0-*hgP)@b9Z}iba-uWb?i|@>O(dAyae3o{{8*>g|PT{?E@(fgpn`TqF$leze4 zp7#Fo^5*pE;^XAs;NjZZ+{x(C|MAYiG~t2&pWkqa?~Y{+N;000Jb zQchFvAin^wuOh!@v}lfP*jx9;I(UMbos(3^x646b)^)2@Lh$@FKkh>ar}? z7#vX=b=wWN{ho_8b#CHG`U0$P)Z{G&Jw<7t<9nW}hx$O7gVj&-3|QTkwb^QvpX}){ z>IRv^9KW0QH{;7Xe&DF>_$r*|P6p!e!8FHLRRDXZVC|O%P7nH>m4$5aZW-AW%6Wx> ty-2U;{~+Oo1wOaJ|D}k6#IaTozXA4gESadJQ?>vA002ovPDHLkV1h&+Qw;zB literal 0 HcmV?d00001 diff --git a/src/assets/imgs/mastercard.png b/src/assets/imgs/mastercard.png new file mode 100644 index 0000000000000000000000000000000000000000..fad380822129916f1bf9ca7c6ce84a24bdfe668e GIT binary patch literal 519 zcmV+i0{H!jP)B+LySux$x3~GNwfx$u_n)b#sHmTxpZwIBfPjGX zZG7`!aBpvK`o3rRyJ25nU-`IL`L#F z-qi$yFeAH+^W5e&Fabl{6!HLH_-95r(_D0La&;uzsTJ`k?ANJb!_W?V%9tN`e$PvH znM;`q!xrt&=wvf)FFl*4St=E{zwyEqSs0UZs{EItAyuLlX*UTCB2AY@+#>)0002ov JPDHLkV1iUr49dHgBW8dWP;p6RxjIaPBivS^j0w8<)`~CIy z`|$Di!OP{It=55)%Xf^%q^ZT1qQ!rZ#Db5z049lde&V%h2P})ZxF#;IF*kxWL+{wc5JB)|aT&vANTnsnC<7(5bJ=nx@L4sm5b^ zzo>+2U9sW*cf3y6yr90_`ABv37dtmw=+Zo_aCsDq{_G`E%Z~%ExqQ7>g(n z(w;K?G1*5)_A1gKZ_?##0XQSQUM>x9mAi#l);y`3r)En9)UbU{3TaqZUJm09x{`;c zNrw&CQPCmWX_){18pSodNh^SQPy6Ucdk#5DL%b{F5z4ZZ+gQpr=~K~&!jL>pfj7#; z#g_bvfn}L=_rY+g)n_u7hO4>`)UI~WxNe { + 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', +} +