diff --git a/assets/global.css b/assets/base.css similarity index 92% rename from assets/global.css rename to assets/base.css index 4d3d23402..3c962b16c 100644 --- a/assets/global.css +++ b/assets/base.css @@ -1,5 +1,3 @@ -@import './font.css'; - :root { --primary: white; --primary-2: #f1f3f5; @@ -14,14 +12,17 @@ --hover: rgba(0, 0, 0, 0.075); - --cyan: #50e3c2; + --cyan: #22b8cf; --green: #37b679; --red: #da3c3c; - --pink: #ff0080; + --pink: #e64980; --purple: #f81ce5; - --violet: #7928ca; + --blue: #0070f3; + --violet-light: #7048e8; + --violet: #5f3dc4; + --accents-0: #f8f9fa; --accents-1: #f1f3f5; --accents-2: #e9ecef; @@ -58,10 +59,6 @@ --accents-9: #f8f9fa; } -.fit { - min-height: calc(100vh - 88px - 41px); -} - *, *:before, *:after { diff --git a/assets/components.css b/assets/components.css new file mode 100644 index 000000000..eab469589 --- /dev/null +++ b/assets/components.css @@ -0,0 +1,3 @@ +.fit { + min-height: calc(100vh - 88px - 41px); +} diff --git a/assets/main.css b/assets/main.css new file mode 100644 index 000000000..e18f81fbf --- /dev/null +++ b/assets/main.css @@ -0,0 +1,8 @@ +@import 'tailwindcss/base'; +@import './font.css'; +@import './base.css'; + +@import 'tailwindcss/components'; +@import './components.css'; + +@import 'tailwindcss/utilities'; diff --git a/assets/tailwind.css b/assets/tailwind.css deleted file mode 100644 index 605a9cef0..000000000 --- a/assets/tailwind.css +++ /dev/null @@ -1,2 +0,0 @@ -@tailwind base; -@tailwind components; diff --git a/assets/utils.css b/assets/utils.css deleted file mode 100644 index 65dd5f63a..000000000 --- a/assets/utils.css +++ /dev/null @@ -1 +0,0 @@ -@tailwind utilities; diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx index 7dd3bc5bd..d8bea803a 100644 --- a/components/core/Avatar/Avatar.tsx +++ b/components/core/Avatar/Avatar.tsx @@ -12,7 +12,7 @@ const Avatar: FC = ({}) => { return (
= ({ hide, }) => { const rootClassName = cn( - 'transition-transform transform duration-500 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10', + 'transition-transform transform duration-500 text-center ease-out p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10', { 'translate-y-full': hide }, className ) return (
- {title} - - {description} + {title} + + {description} + {action && action}
) diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index 55f855429..e98cf1bda 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -3,7 +3,8 @@ import cn from 'classnames' import Link from 'next/link' import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' import getSlug from '@utils/get-slug' -import { Logo } from '@components/ui' +import { Logo, Container } from '@components/ui' +import { Github, DoubleChevron } from '@components/icon' interface Props { className?: string @@ -14,53 +15,100 @@ interface Props { const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy'] const Footer: FC = ({ className, pages }) => { - const rootClassName = cn( - 'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto', - className - ) + const rootClassName = cn(className) const { sitePages, legalPages } = getPages(pages) return ( -
- -
+ ) } diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index e6e45fb26..883ddd45b 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -33,12 +33,12 @@ const Layout: FC = ({ children, pageProps }) => { setAcceptedCookies(true)}> Accept cookies } - className={cn({ ['translate-y-full']: acceptedCookies })} />
diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx index c2af8e726..e5214e8a1 100644 --- a/components/core/Navbar/Navbar.tsx +++ b/components/core/Navbar/Navbar.tsx @@ -1,7 +1,6 @@ import s from './Navbar.module.css' import { FC } from 'react' import Link from 'next/link' -import { useTheme } from 'next-themes' import { Logo } from '@components/ui' import { Searchbar, UserNav } from '@components/core' interface Props { diff --git a/components/core/UserNav/DropdownMenu.module.css b/components/core/UserNav/DropdownMenu.module.css new file mode 100644 index 000000000..ad0903df5 --- /dev/null +++ b/components/core/UserNav/DropdownMenu.module.css @@ -0,0 +1,16 @@ +.dropdownMenu { + @apply fixed right-0 mt-7 origin-top-right outline-none bg-primary z-40 w-full h-full; + + @screen lg { + @apply absolute border border-accents-1 shadow-lg w-56 h-auto; + } + + & .link { + @apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center; + text-transform: capitalize; + } + + &.off { + @apply hidden; + } +} diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx new file mode 100644 index 000000000..61f8d4ca2 --- /dev/null +++ b/components/core/UserNav/DropdownMenu.tsx @@ -0,0 +1,76 @@ +import { FC } from 'react' +import Link from 'next/link' +import { useTheme } from 'next-themes' +import cn from 'classnames' +import s from './DropdownMenu.module.css' +import { Moon, Sun } from '@components/icon' +import { Menu, Transition } from '@headlessui/react' +import { usePreventScroll } from '@react-aria/overlays' +interface DropdownMenuProps { + onClose: () => void + open: boolean +} + +const DropdownMenu: FC = ({ + onClose, + children, + open = false, + ...props +}) => { + const { theme, setTheme } = useTheme() + + usePreventScroll({ + isDisabled: !open, + }) + + return ( + + + + {({ active }) => My Purchases} + + + {({ active }) => My Account} + + + {({ active }) => ( + + theme === 'dark' ? setTheme('light') : setTheme('dark') + } + > +
+ Theme: {theme}{' '} +
+
+ {theme == 'dark' ? ( + + ) : ( + + )} +
+ + )} + + + {({ active }) => ( + + Logout + + )} + + + + ) +} + +export default DropdownMenu diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css index e119a3bbd..d76382671 100644 --- a/components/core/UserNav/UserNav.module.css +++ b/components/core/UserNav/UserNav.module.css @@ -13,35 +13,14 @@ @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center; &:hover { - @apply text-accents-8; + @apply text-accents-8 transition scale-110 duration-100; } &:last-child { @apply mr-0; } -} -.dropdownMenu { - @apply bg-primary fixed right-0 z-50 w-full h-full; - - @screen lg { - @apply absolute mt-3 right-0 w-screen; - max-width: 160px; - } - - & .dropdownMenuContainer { - @apply flex-col py-6 bg-primary h-full justify-around; - - @screen lg { - @apply border border-accents-1 shadow-lg py-2 h-auto; - } - } - - & .link { - @apply cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900; - } - - &.off { - @apply hidden; + &:focus { + outline: none; } } diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx index 97c228cd4..70e2377f3 100644 --- a/components/core/UserNav/UserNav.tsx +++ b/components/core/UserNav/UserNav.tsx @@ -1,18 +1,12 @@ import Link from 'next/link' import cn from 'classnames' import s from './UserNav.module.css' -import { FC, useState, useRef, useCallback } from 'react' -import { useTheme } from 'next-themes' +import { FC, useRef } from 'react' import { Avatar } from '@components/core' import { Heart, Bag } from '@components/icon' import { useUI } from '@components/ui/context' -import { FocusScope } from '@react-aria/focus' - -import { - useOverlay, - DismissButton, - usePreventScroll, -} from '@react-aria/overlays' +import DropdownMenu from './DropdownMenu' +import { Menu } from '@headlessui/react' import useCart from '@lib/bigcommerce/cart/use-cart' interface Props { @@ -25,12 +19,18 @@ const countItems = (count: number, items: any[]) => const UserNav: FC = ({ className, children, ...props }) => { const { data } = useCart() - const { openSidebar, closeSidebar, displaySidebar } = useUI() - const [displayDropdown, setDisplayDropdown] = useState(false) + const { + openSidebar, + closeSidebar, + displaySidebar, + displayDropdown, + openDropdown, + closeDropdown, + } = useUI() + const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0) let ref = useRef() as React.MutableRefObject - const toggleDropdown = () => setDisplayDropdown((v) => !v) return ( ) } -interface DropdownMenuProps { - onClose: () => void - innerRef: React.MutableRefObject -} - -const DropdownMenu: FC = ({ - onClose, - children, - innerRef, - ...props -}) => { - const { theme, setTheme } = useTheme() - - let { overlayProps } = useOverlay( - { - onClose: onClose, - isOpen: true, - }, - innerRef - ) - - usePreventScroll() - return ( - - - - ) -} - export default UserNav diff --git a/components/icon/DoubleChevron.tsx b/components/icon/DoubleChevron.tsx new file mode 100644 index 000000000..00ed94a60 --- /dev/null +++ b/components/icon/DoubleChevron.tsx @@ -0,0 +1,22 @@ +const DoubleChevron = ({ ...props }) => { + return ( + + + + ) +} + +export default DoubleChevron diff --git a/components/icon/Github.tsx b/components/icon/Github.tsx new file mode 100644 index 000000000..b8cc0c558 --- /dev/null +++ b/components/icon/Github.tsx @@ -0,0 +1,20 @@ +const Sun = ({ ...props }) => { + return ( + + + + ) +} + +export default Sun diff --git a/components/icon/Moon.tsx b/components/icon/Moon.tsx new file mode 100644 index 000000000..bc848700f --- /dev/null +++ b/components/icon/Moon.tsx @@ -0,0 +1,20 @@ +const Moon = ({ ...props }) => { + return ( + + + + ) +} + +export default Moon diff --git a/components/icon/Sun.tsx b/components/icon/Sun.tsx new file mode 100644 index 000000000..949ac1cd1 --- /dev/null +++ b/components/icon/Sun.tsx @@ -0,0 +1,28 @@ +const Sun = ({ ...props }) => { + return ( + + + + + + + + + + + + ) +} + +export default Sun diff --git a/components/icon/index.ts b/components/icon/index.ts index 725587c69..e76cfa493 100644 --- a/components/icon/index.ts +++ b/components/icon/index.ts @@ -6,3 +6,7 @@ export { default as ArrowLeft } from './ArrowLeft' export { default as Plus } from './Plus' export { default as Minus } from './Minus' export { default as Check } from './Check' +export { default as Sun } from './Sun' +export { default as Moon } from './Moon' +export { default as Github } from './Github' +export { default as DoubleChevron } from './DoubleChevron' diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index d0ea6d80c..9246c2f7c 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -2,8 +2,12 @@ @apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer; &:hover { - & .squareBg { - @apply scale-75; + & .squareBg:before { + transform: scale(0.98); + } + + & .product-image { + transform: scale(1.05); } & .productTitle > span, @@ -37,6 +41,10 @@ } } + & .product-image { + @apply transform transition-transform duration-500; + } + &:nth-child(6n + 1) .squareBg { @apply bg-violet; } @@ -58,16 +66,23 @@ .productTitle > span, .productPrice, .wishlistButton { - @apply transition ease-in-out duration-300; + @apply transition ease-in-out duration-500; } .squareBg { - @apply transform absolute inset-0 z-0 bg-secondary; + @apply transform absolute inset-0 z-0; + background-color: #212529; +} + +.squareBg:before { + @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block; + content: ''; + background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .simple { & .squareBg { - @apply bg-gray-300 !important; + @apply bg-accents-0 !important; } & .productTitle { @@ -102,5 +117,5 @@ } .wishlistButton { - @apply w-10 h-10 flex items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer; + @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer; } diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 6b387ffeb..959d2c945 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -62,12 +62,14 @@ const ProductCard: FC = ({ - +
+ +
) diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index 99346db11..98264a46c 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -7,7 +7,7 @@ } .productDisplay { - @apply relative flex px-0 pb-0 relative box-border col-span-7; + @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet; margin-right: -2rem; margin-left: -2rem; min-height: 400px; @@ -17,7 +17,7 @@ } @screen lg { - @apply mx-0; + @apply mx-0 col-span-7; min-height: 100%; height: 100%; } @@ -34,7 +34,7 @@ } .nameBox { - @apply absolute top-6 left-0 z-50; + @apply absolute top-6 left-10 z-10; & .name { @apply px-6 py-2 bg-primary text-primary font-bold; @@ -49,15 +49,16 @@ @screen md { & .name, & .price { - @apply bg-violet text-white; + @apply bg-violet-light text-white; } } } .sidebar { - @apply flex flex-col col-span-5; + @apply flex flex-col col-span-1; @screen lg { + @apply col-span-5; padding-top: 5rem; } } @@ -75,13 +76,8 @@ } @screen lg { - height: 150%; - margin-top: -10%; - } - - @screen xl { - height: 170%; - margin-top: -19%; + height: 100%; + margin-top: -8%; } } diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 9f2a83c69..9e7a7863d 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -1,17 +1,17 @@ -import { FC, useState, useEffect } from 'react' import cn from 'classnames' import Image from 'next/image' import { NextSeo } from 'next-seo' -import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product' -import useAddItem from '@lib/bigcommerce/cart/use-add-item' -import bcImageSrc from '@lib/bc-image-src' -import getPathname from '@lib/get-pathname' +import s from './ProductView.module.css' +import { FC, useState, useEffect } from 'react' import { useUI } from '@components/ui/context' import { Button, Container } from '@components/ui' import { Swatch, ProductSlider } from '@components/product' -import { getProductOptions } from '../helpers' -import s from './ProductView.module.css' +import getPathname from '@lib/get-pathname' +import useAddItem from '@lib/bigcommerce/cart/use-add-item' import { isDesktop } from '@lib/browser' +import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product' +import { getProductOptions } from '../helpers' +import bcImageSrc from '@lib/bc-image-src' interface Props { className?: string @@ -73,7 +73,6 @@ const ProductView: FC = ({ product, className }) => { />
-

{product.name}

@@ -138,7 +137,7 @@ const ProductView: FC = ({ product, className }) => { ))}
+ Don't have an account? {` `} diff --git a/public/flag-us.png b/public/flag-us.png new file mode 100644 index 000000000..763f34fbf Binary files /dev/null and b/public/flag-us.png differ diff --git a/public/vercel.png b/public/vercel.png new file mode 100644 index 000000000..659ca11d0 Binary files /dev/null and b/public/vercel.png differ diff --git a/tailwind.config.js b/tailwind.config.js index 03b3c7f7b..4ef5bb95c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,9 @@ module.exports = { purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'], theme: { extend: { + maxWidth: { + '8xl': '1920px', + }, backgroundOpacity: { 075: '0.75', }, @@ -26,6 +29,7 @@ module.exports = { 'accents-8': 'var(--accents-8)', 'accents-9': 'var(--accents-9)', violet: 'var(--violet)', + 'violet-light': 'var(--violet-light)', pink: 'var(--pink)', cyan: 'var(--cyan)', blue: 'var(--blue)', diff --git a/yarn.lock b/yarn.lock index b6abc5981..6467442b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6106,6 +6106,11 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad" integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg== +pify@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" + integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw= + pkg-dir@^4.1.0, pkg-dir@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3" @@ -6275,6 +6280,15 @@ postcss-image-set-function@^3.0.1: postcss "^7.0.2" postcss-values-parser "^2.0.0" +postcss-import@^13.0.0: + version "13.0.0" + resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-13.0.0.tgz#d6960cd9e3de5464743b04dd8cd9d870662f8b8c" + integrity sha512-LPUbm3ytpYopwQQjqgUH4S3EM/Gb9QsaSPP/5vnoi+oKVy3/mIk2sc0Paqw7RL57GpScm9MdIMUypw2znWiBpg== + dependencies: + postcss-value-parser "^4.0.0" + read-cache "^1.0.0" + resolve "^1.1.7" + postcss-initial@^3.0.0: version "3.0.2" resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.2.tgz#f018563694b3c16ae8eaabe3c585ac6319637b2d" @@ -6489,7 +6503,7 @@ postcss-value-parser@^3.3.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== -postcss-value-parser@^4.1.0: +postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== @@ -6832,6 +6846,13 @@ react@^16.14.0: object-assign "^4.1.1" prop-types "^15.6.2" +read-cache@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" + integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q= + dependencies: + pify "^2.3.0" + read-pkg-up@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507" @@ -7092,7 +7113,7 @@ resolve-url@^0.2.1: resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo= -resolve@^1.10.0, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.8.1: +resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.8.1: version "1.18.1" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.18.1.tgz#018fcb2c5b207d2a6424aee361c5a266da8f4130" integrity sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA== @@ -7661,7 +7682,7 @@ symbol-observable@^1.0.4, symbol-observable@^1.1.0: resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== -tailwindcss@^1.8.10: +tailwindcss@^1.9: version "1.9.5" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.9.5.tgz#3339b790a68bc1f09a8efd8eb94cb05aed5235c2" integrity sha512-Je5t1fAfyW333YTpSxF+8uJwbnrkpyBskDtZYgSMMKQbNp6QUhEKJ4g/JIevZjD2Zidz9VxLraEUq/yWOx6nQg==