diff --git a/src/assets/fonts/source-serif-pro-bold.ttf b/src/assets/fonts/source-serif-pro-bold.ttf new file mode 100644 index 0000000..741979a Binary files /dev/null and b/src/assets/fonts/source-serif-pro-bold.ttf differ diff --git a/src/assets/images/belgium.svg b/src/assets/images/belgium.svg new file mode 100644 index 0000000..bef67b5 --- /dev/null +++ b/src/assets/images/belgium.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/bottles.png b/src/assets/images/bottles.png new file mode 100644 index 0000000..a63cd8e Binary files /dev/null and b/src/assets/images/bottles.png differ diff --git a/src/assets/images/cocktail.svg b/src/assets/images/cocktail.svg new file mode 100644 index 0000000..c1fae99 --- /dev/null +++ b/src/assets/images/cocktail.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/facebook.svg b/src/assets/images/facebook.svg new file mode 100644 index 0000000..ad1680d --- /dev/null +++ b/src/assets/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/instagram.svg b/src/assets/images/instagram.svg new file mode 100644 index 0000000..d8b4014 --- /dev/null +++ b/src/assets/images/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/linkedin.svg b/src/assets/images/linkedin.svg new file mode 100644 index 0000000..db674a6 --- /dev/null +++ b/src/assets/images/linkedin.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/logo-white.svg b/src/assets/images/logo-white.svg new file mode 100644 index 0000000..3a1248a --- /dev/null +++ b/src/assets/images/logo-white.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/medium.svg b/src/assets/images/medium.svg new file mode 100644 index 0000000..00f8bd2 --- /dev/null +++ b/src/assets/images/medium.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/minus.svg b/src/assets/images/minus.svg new file mode 100644 index 0000000..225e33b --- /dev/null +++ b/src/assets/images/minus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/nose.svg b/src/assets/images/nose.svg new file mode 100644 index 0000000..2d41872 --- /dev/null +++ b/src/assets/images/nose.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/party.svg b/src/assets/images/party.svg new file mode 100644 index 0000000..9df4cbc --- /dev/null +++ b/src/assets/images/party.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/plus.svg b/src/assets/images/plus.svg new file mode 100644 index 0000000..e6161f8 --- /dev/null +++ b/src/assets/images/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/article1.png b/src/assets/images/product.png similarity index 100% rename from src/assets/images/article1.png rename to src/assets/images/product.png diff --git a/src/assets/images/tongue.svg b/src/assets/images/tongue.svg new file mode 100644 index 0000000..b200f7a --- /dev/null +++ b/src/assets/images/tongue.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Destination.tsx b/src/components/Destination.tsx index 8751898..6c3b2ab 100644 --- a/src/components/Destination.tsx +++ b/src/components/Destination.tsx @@ -7,28 +7,28 @@ export default function Destination() { return (
- + home - Home + Home arrow - Spirits + Spirits arrow - Kiss My + Kiss My arrow - Kiss My Rhubarb + Kiss My Rhubarb
) diff --git a/src/components/Footer/Community.tsx b/src/components/Footer/Community.tsx new file mode 100644 index 0000000..f3c4dfc --- /dev/null +++ b/src/components/Footer/Community.tsx @@ -0,0 +1,42 @@ +import { useIsDesktop } from '../context/DesktopWidthProvider'; +import Link from 'next/link'; +import cn from 'classnames'; + +export default function Community() { + const { isDesktop } = useIsDesktop(); + + return ( +
+

+ COMMUNITY +

+
+ + + Lexir for Brands + + + + + Business Buyers + + + + + Sales Affiliates + + +
+
+ ) +} diff --git a/src/components/Footer/Company.tsx b/src/components/Footer/Company.tsx new file mode 100644 index 0000000..18f801a --- /dev/null +++ b/src/components/Footer/Company.tsx @@ -0,0 +1,42 @@ +import { useIsDesktop } from '../context/DesktopWidthProvider'; +import Link from 'next/link'; +import cn from 'classnames'; + +export default function Company() { + const { isDesktop } = useIsDesktop(); + + return ( +
+

+ COMPANY +

+
+ + + About + + + + + Contact + + + + + Legal + + +
+
+ ) +} diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..ae781a7 --- /dev/null +++ b/src/components/Footer/Footer.tsx @@ -0,0 +1,93 @@ +import Image from 'next/image'; +import Link from 'next/link'; +import logo from '../../assets/images/logo-white.svg'; +import medium from '../../assets/images/medium.svg'; +import facebook from '../../assets/images/facebook.svg'; +import insta from '../../assets/images/instagram.svg'; +import linkedIn from '../../assets/images/linkedin.svg'; +import Community from './Community'; +import Platform from './Platform'; +import Company from './Company'; +import LexirShop from './LexirShop'; +import { useIsDesktop } from '@components/context/DesktopWidthProvider'; + +export default function Footer() { + const { isDesktop } = useIsDesktop(); + + return ( + + ) +} diff --git a/src/components/Footer/LexirShop.tsx b/src/components/Footer/LexirShop.tsx new file mode 100644 index 0000000..1476a3c --- /dev/null +++ b/src/components/Footer/LexirShop.tsx @@ -0,0 +1,50 @@ +import { useIsDesktop } from '../context/DesktopWidthProvider'; +import Link from 'next/link'; +import cn from 'classnames'; + +export default function LexirShop() { + const { isDesktop } = useIsDesktop(); + + return ( +
+

+ LEXIR SHOP +

+ +
+ + + Brands + + + + + Spirits + + + + + Wine + + + + + Block + + +
+
+ ) +} diff --git a/src/components/Footer/Platform.tsx b/src/components/Footer/Platform.tsx new file mode 100644 index 0000000..645865f --- /dev/null +++ b/src/components/Footer/Platform.tsx @@ -0,0 +1,42 @@ +import { useIsDesktop } from '../context/DesktopWidthProvider'; +import Link from 'next/link'; +import cn from 'classnames'; + +export default function Platform() { + const { isDesktop } = useIsDesktop(); + + return ( +
+

+ PLATFORM +

+
+ + + Resources + + + + + Pricing + + + + + Get Started + + +
+
+ ) +} diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx index 2df275e..01425e3 100644 --- a/src/components/Menu.tsx +++ b/src/components/Menu.tsx @@ -1,23 +1,62 @@ -import { useState } from "react"; +import { useState } from 'react'; +import Link from 'next/link'; +import Image from 'next/image'; +import cn from 'classnames'; +import signInIcon from '../assets/images/signIn-icon.svg'; +import chartIcon from '../assets/images/chart-icon.svg'; +// type Props = { +// isChartFull: boolean; +// }; export default function Menu() { const [isMenuOpen, setIsMenuOpen] = useState(false); - const menuHandler = () => { + const toggleMenu = () => { setIsMenuOpen(!isMenuOpen); }; - console.log(isMenuOpen) - return ( -
- - - -
+ <> + + + {isMenuOpen && ( +
+ + PRODUCTS + + + BRANDS + + + + + sign in + SIGN IN + + + + + + sign in + CHART + + +
+ )} + ) } diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index b729706..58b4372 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -1,35 +1,23 @@ -import { useEffect, useState } from 'react'; import Image from 'next/image'; import Link from 'next/link'; import logo from '../assets/images/logo.svg'; import signInIcon from '../assets/images/signIn-icon.svg'; import chartIcon from '../assets/images/chart-icon.svg'; import Menu from './Menu'; +import cn from 'classnames'; +import { useIsDesktop } from './context/DesktopWidthProvider'; -export default function NavBar() { - const [isDesktop, setDesktop] = useState(true); - - // useEffect is used just to avoid window is not defined error on Next.js - useEffect( - () => { - setDesktop(window.innerWidth >= 768); - }, - [], - ); +type Props = { + isChartFull: boolean; +} - const updateMedia = () => { - setDesktop(window.innerWidth >= 768); - }; +export default function NavBar({isChartFull}: Props) { + const { isDesktop } = useIsDesktop(); - useEffect(() => { - window.addEventListener("resize", updateMedia); - return () => window.removeEventListener("resize", updateMedia); - }); - return ( -