mirror of
https://github.com/vercel/commerce.git
synced 2025-07-13 16:01:21 +00:00
🎨 styles: footer
:%s
This commit is contained in:
lytrankieio123
parent
eec5a15ff2
commit
9255a6179b
@ -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() {
|
||||
<Inputcommon placeholder="Enter here" />
|
||||
<InputSearch />
|
||||
</div>
|
||||
|
||||
<Banner
|
||||
imgLink="https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png"
|
||||
title="Save 15% on your first order"
|
||||
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
|
||||
/>
|
||||
<ButtonCommon type='ghost' icon={<IconBuy />}>Button</ButtonCommon>
|
||||
<ButtonIconBuy />
|
||||
</>
|
||||
|
||||
BIN
src/assets/imgs/apple_pay.png
Normal file
BIN
src/assets/imgs/apple_pay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 467 B |
BIN
src/assets/imgs/gpay.png
Normal file
BIN
src/assets/imgs/gpay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 607 B |
BIN
src/assets/imgs/mastercard.png
Normal file
BIN
src/assets/imgs/mastercard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 519 B |
BIN
src/assets/imgs/visa.png
Normal file
BIN
src/assets/imgs/visa.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 640 B |
23
src/components/common/Footer/Footer.module.scss
Normal file
23
src/components/common/Footer/Footer.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
85
src/components/common/Footer/Footer.tsx
Normal file
85
src/components/common/Footer/Footer.tsx
Normal file
@ -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 className={s.footer}>
|
||||
<div className={s.footerMenu}>
|
||||
<section className={s.menu}>
|
||||
{FOOTER_COLUMNS.map(item => <FooterColumn
|
||||
key={item.title}
|
||||
title={item.title}
|
||||
items={item.items} />)}
|
||||
</section>
|
||||
<FooterSocial />
|
||||
</div>
|
||||
<div>
|
||||
© 2021 Online Grocery
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<section className={s.footerColumn}>
|
||||
<h4 className={s.title}>
|
||||
{title}
|
||||
</h4>
|
||||
<ul>
|
||||
{
|
||||
items.map(item => <li key={item.name}>
|
||||
{
|
||||
item.isOpenNewTab ?
|
||||
<a href={item.link} target="_blank" rel="noopener noreferrer">
|
||||
{item.name}
|
||||
</a>
|
||||
:
|
||||
<Link href={item.link}>
|
||||
<a >
|
||||
{item.name}
|
||||
</a>
|
||||
</Link>
|
||||
}
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterColumn;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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: <IconFacebook />,
|
||||
link: SOCIAL_LINKS.FB,
|
||||
},
|
||||
{
|
||||
icon: <IconTwitter />,
|
||||
link: SOCIAL_LINKS.TWITTER,
|
||||
},
|
||||
{
|
||||
icon: <IconYoutube />,
|
||||
link: SOCIAL_LINKS.YOUTUBE,
|
||||
},
|
||||
{
|
||||
icon: <IconInstagram />,
|
||||
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 (
|
||||
<section className={s.footerSocial}>
|
||||
<div className={s.title}>Social</div>
|
||||
<ul className={s.socialMedia}>
|
||||
{
|
||||
SOCIAL_MENU.map(item => <li key={item.link}>
|
||||
<a href={item.link} target="_blank" rel="noopener noreferrer">
|
||||
{item.icon}
|
||||
</a>
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
<ul className={s.payment}>
|
||||
{
|
||||
PAYMENT_METHODS.map(item => <li key={item.name}>
|
||||
<img src={item.icon} alt={item.name} />
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterSocial;
|
||||
8
src/components/common/Layout/Layout.module.scss
Normal file
8
src/components/common/Layout/Layout.module.scss
Normal file
@ -0,0 +1,8 @@
|
||||
.mainLayout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
> main {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@ -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<Props> = ({ children }) => {
|
||||
|
||||
return (
|
||||
<CommerceProvider locale={locale}>
|
||||
<Header />
|
||||
<main>{children}</main>
|
||||
<div className={s.mainLayout}>
|
||||
<Header />
|
||||
<main >{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</CommerceProvider>
|
||||
|
||||
)
|
||||
|
||||
18
src/components/icons/IconApplePay.tsx
Normal file
18
src/components/icons/IconApplePay.tsx
Normal file
File diff suppressed because one or more lines are too long
11
src/components/icons/IconFacebook.tsx
Normal file
11
src/components/icons/IconFacebook.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const IconFacebook = () => {
|
||||
return (
|
||||
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.12035 3.32003H11.0004V0.14003C10.0901 0.045377 9.17551 -0.00135428 8.26035 2.98641e-05C5.54035 2.98641e-05 3.68035 1.66003 3.68035 4.70003V7.32003H0.610352V10.88H3.68035V20H7.36035V10.88H10.4204L10.8804 7.32003H7.36035V5.05003C7.36035 4.00003 7.64035 3.32003 9.12035 3.32003Z" fill="#141414" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconFacebook
|
||||
18
src/components/icons/IconGooglePay.tsx
Normal file
18
src/components/icons/IconGooglePay.tsx
Normal file
File diff suppressed because one or more lines are too long
11
src/components/icons/IconInstagram.tsx
Normal file
11
src/components/icons/IconInstagram.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const IconInstagram = () => {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 7.52C9.5095 7.52 9.03002 7.66545 8.62219 7.93795C8.21435 8.21046 7.89648 8.59778 7.70878 9.05095C7.52107 9.50411 7.47196 10.0028 7.56765 10.4838C7.66334 10.9649 7.89954 11.4068 8.24638 11.7536C8.59321 12.1005 9.0351 12.3367 9.51618 12.4323C9.99725 12.528 10.4959 12.4789 10.9491 12.2912C11.4022 12.1035 11.7895 11.7856 12.062 11.3778C12.3346 10.97 12.48 10.4905 12.48 10C12.48 9.67432 12.4159 9.35183 12.2912 9.05095C12.1666 8.75006 11.9839 8.47666 11.7536 8.24638C11.5233 8.01609 11.2499 7.83341 10.9491 7.70878C10.6482 7.58415 10.3257 7.52 10 7.52ZM19.93 5.07C19.9247 4.29776 19.7825 3.53257 19.51 2.81C19.3093 2.28126 18.9987 1.80109 18.5988 1.40119C18.1989 1.00128 17.7187 0.690718 17.19 0.49C16.4674 0.217464 15.7022 0.0752609 14.93 0.0699999C13.64 -6.70552e-08 13.26 0 10 0C6.74 0 6.36 -6.70552e-08 5.07 0.0699999C4.29776 0.0752609 3.53257 0.217464 2.81 0.49C2.28126 0.690718 1.80109 1.00128 1.40119 1.40119C1.00128 1.80109 0.690718 2.28126 0.49 2.81C0.217464 3.53257 0.0752609 4.29776 0.0699999 5.07C-6.70552e-08 6.36 0 6.74 0 10C0 13.26 -6.70552e-08 13.64 0.0699999 14.93C0.0807639 15.705 0.222774 16.4725 0.49 17.2C0.689828 17.7263 1.00013 18.2037 1.4 18.6C1.79819 19.0023 2.27939 19.3129 2.81 19.51C3.53257 19.7825 4.29776 19.9247 5.07 19.93C6.36 20 6.74 20 10 20C13.26 20 13.64 20 14.93 19.93C15.7022 19.9247 16.4674 19.7825 17.19 19.51C17.7206 19.3129 18.2018 19.0023 18.6 18.6C18.9999 18.2037 19.3102 17.7263 19.51 17.2C19.7823 16.4739 19.9244 15.7055 19.93 14.93C20 13.64 20 13.26 20 10C20 6.74 20 6.36 19.93 5.07ZM17.39 13.07C17.3579 13.6871 17.2262 14.295 17 14.87C16.8059 15.3497 16.5173 15.7854 16.1514 16.1514C15.7854 16.5173 15.3497 16.8059 14.87 17C14.2895 17.2136 13.6783 17.3318 13.06 17.35C12.27 17.35 12.06 17.35 10 17.35C7.94 17.35 7.73 17.35 6.94 17.35C6.32173 17.3318 5.71049 17.2136 5.13 17C4.6341 16.8157 4.18628 16.5217 3.82 16.14C3.45767 15.7813 3.17784 15.3479 3 14.87C2.78556 14.2901 2.67061 13.6782 2.66 13.06C2.66 12.27 2.66 12.06 2.66 10C2.66 7.94 2.66 7.73 2.66 6.94C2.67061 6.32183 2.78556 5.70988 3 5.13C3.18428 4.6341 3.47827 4.18628 3.86 3.82C4.22033 3.45962 4.65326 3.18009 5.13 3C5.71049 2.78641 6.32173 2.66821 6.94 2.65C7.73 2.65 7.94 2.65 10 2.65C12.06 2.65 12.27 2.65 13.06 2.65C13.6783 2.66821 14.2895 2.78641 14.87 3C15.3659 3.18428 15.8137 3.47827 16.18 3.86C16.5423 4.21875 16.8222 4.65213 17 5.13C17.2136 5.71049 17.3318 6.32173 17.35 6.94C17.35 7.73 17.35 7.94 17.35 10C17.35 12.06 17.42 12.27 17.39 13.06V13.07ZM15.79 5.63C15.6709 5.30698 15.4832 5.01364 15.2398 4.77021C14.9964 4.52678 14.703 4.33906 14.38 4.22C13.9365 4.06626 13.4693 3.99179 13 4C12.22 4 12 4 10 4C8 4 7.78 4 7 4C6.52827 4.00461 6.06107 4.09263 5.62 4.26C5.30193 4.37366 5.01169 4.55371 4.76858 4.7882C4.52547 5.02269 4.33506 5.30624 4.21 5.62C4.06478 6.06537 3.99383 6.5316 4 7C4 7.78 4 8 4 10C4 12 4 12.22 4 13C4.00991 13.4712 4.09777 13.9375 4.26 14.38C4.37906 14.703 4.56678 14.9964 4.81021 15.2398C5.05364 15.4832 5.34698 15.6709 5.67 15.79C6.09667 15.9469 6.54565 16.0347 7 16.05C7.78 16.05 8 16.05 10 16.05C12 16.05 12.22 16.05 13 16.05C13.4717 16.0454 13.9389 15.9574 14.38 15.79C14.703 15.6709 14.9964 15.4832 15.2398 15.2398C15.4832 14.9964 15.6709 14.703 15.79 14.38C15.9574 13.9389 16.0454 13.4717 16.05 13C16.05 12.22 16.05 12 16.05 10C16.05 8 16.05 7.78 16.05 7C16.0503 6.5278 15.9621 6.05972 15.79 5.62V5.63ZM10 13.82C9.49882 13.82 9.00257 13.7211 8.53966 13.529C8.07676 13.3369 7.6563 13.0554 7.30238 12.7005C6.94846 12.3457 6.66803 11.9245 6.47714 11.4611C6.28626 10.9977 6.18868 10.5012 6.19 10C6.19 9.24405 6.4143 8.5051 6.83449 7.87669C7.25468 7.24828 7.85187 6.75866 8.55047 6.46983C9.24907 6.181 10.0177 6.10594 10.7589 6.25415C11.5002 6.40236 12.1808 6.76717 12.7147 7.30241C13.2485 7.83764 13.6116 8.51924 13.7578 9.2609C13.9041 10.0026 13.827 10.771 13.5363 11.4688C13.2457 12.1666 12.7545 12.7625 12.125 13.1811C11.4955 13.5996 10.7559 13.822 10 13.82ZM14 6.93C13.7789 6.9066 13.5744 6.80222 13.4257 6.63697C13.277 6.47172 13.1947 6.25729 13.1947 6.035C13.1947 5.81271 13.277 5.59828 13.4257 5.43303C13.5744 5.26778 13.7789 5.1634 14 5.14C14.2211 5.1634 14.4256 5.26778 14.5743 5.43303C14.723 5.59828 14.8053 5.81271 14.8053 6.035C14.8053 6.25729 14.723 6.47172 14.5743 6.63697C14.4256 6.80222 14.2211 6.9066 14 6.93Z" fill="#141414" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconInstagram
|
||||
18
src/components/icons/IconMasterCard.tsx
Normal file
18
src/components/icons/IconMasterCard.tsx
Normal file
File diff suppressed because one or more lines are too long
11
src/components/icons/IconTwitter.tsx
Normal file
11
src/components/icons/IconTwitter.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const IconTwitter = () => {
|
||||
return (
|
||||
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20 2.80021C19.2483 3.1263 18.4534 3.34187 17.64 3.44021C18.4982 2.92753 19.1413 2.12099 19.45 1.17021C18.6436 1.65027 17.7608 1.98851 16.84 2.17021C16.2245 1.50278 15.405 1.05851 14.5098 0.907061C13.6147 0.755616 12.6945 0.905568 11.8938 1.3334C11.093 1.76123 10.4569 2.44274 10.0852 3.27105C9.71355 4.09935 9.62729 5.0276 9.84 5.91021C8.20943 5.82774 6.61444 5.40316 5.15865 4.66407C3.70287 3.92498 2.41885 2.8879 1.39 1.62021C1.02914 2.25038 0.839519 2.96403 0.84 3.69021C0.83872 4.36459 1.00422 5.02883 1.32176 5.62377C1.63929 6.21872 2.09902 6.72592 2.66 7.10021C2.00798 7.08247 1.36989 6.90751 0.8 6.59021V6.64021C0.804887 7.5851 1.13599 8.4993 1.73731 9.22818C2.33864 9.95705 3.17326 10.4559 4.1 10.6402C3.74326 10.7488 3.37287 10.806 3 10.8102C2.74189 10.8072 2.48442 10.7838 2.23 10.7402C2.49391 11.553 3.00462 12.2634 3.69107 12.7724C4.37753 13.2814 5.20558 13.5638 6.06 13.5802C4.6172 14.7155 2.83588 15.3351 1 15.3402C0.665735 15.3413 0.331736 15.3213 0 15.2802C1.87443 16.4905 4.05881 17.1329 6.29 17.1302C7.82969 17.1462 9.35714 16.8552 10.7831 16.2743C12.2091 15.6934 13.505 14.8341 14.5952 13.7467C15.6854 12.6593 16.548 11.3656 17.1326 9.94112C17.7172 8.51663 18.012 6.98994 18 5.45021C18 5.28021 18 5.10021 18 4.92021C18.7847 4.33502 19.4615 3.61763 20 2.80021Z" fill="#141414" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconTwitter
|
||||
11
src/components/icons/IconYoutube.tsx
Normal file
11
src/components/icons/IconYoutube.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const IconYoutube = () => {
|
||||
return (
|
||||
<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23 5.70998C23.0495 4.27864 22.7365 2.858 22.09 1.57998C21.6514 1.05558 21.0427 0.701694 20.37 0.579984C17.5875 0.327509 14.7936 0.224028 12 0.269984C9.21667 0.221942 6.43274 0.322084 3.66003 0.569984C3.11185 0.669701 2.60454 0.926826 2.20003 1.30998C1.30003 2.13998 1.20003 3.55998 1.10003 4.75998C0.954939 6.91755 0.954939 9.08242 1.10003 11.24C1.12896 11.9154 1.22952 12.5858 1.40003 13.24C1.5206 13.745 1.76455 14.2123 2.11003 14.6C2.51729 15.0034 3.03641 15.2752 3.60003 15.38C5.75594 15.6461 7.92824 15.7564 10.1 15.71C13.6 15.76 16.67 15.71 20.3 15.43C20.8775 15.3316 21.4112 15.0595 21.83 14.65C22.11 14.3699 22.3191 14.0271 22.44 13.65C22.7977 12.5526 22.9733 11.4041 22.96 10.25C23 9.68998 23 6.30998 23 5.70998ZM9.74003 10.85V4.65998L15.66 7.76998C14 8.68998 11.81 9.72998 9.74003 10.85Z" fill="#141414" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconYoutube
|
||||
@ -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;
|
||||
|
||||
@ -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',
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user