Junior Frontend Developer - Breno Perricone Fischer - Brands Collection Page

brands-data.tsx

@@ -0,0 +1,57 @@
+import SiwuLogo from "./src/assets/SiWu-Logo 2.png";
+import ErikaLogo from "./src/assets/erika-logo.png";
+import NineFoldLogo from "./src/assets/ninefold-distillery-logo.png";
+import ArgalaLogo from "./src/assets/argala-logo.png";
+import BaldoriaLogo from "./src/assets/baldoria-logo.png";
+import KissMyLogo from "./src/assets/kiss-my-logo 1.png";
+
+import DenmarkFlag from "./src/assets/denmark-flag.png";
+import FranceFlag from "./src/assets/france-flag.png";
+import ScotlandFlag from "./src/assets/scotland-flag.png";
+import ItalyFlag from "./src/assets/italy-flag.png";
+import BelgiumFlag from "./src/assets/belgium-flag.png";
+
+export const brandsCollection =[
+    {
+        "logo": SiwuLogo,
+        "title": "Siwu Distillet",
+        "subtitle": "Aquavit & Gin",
+        "flag": DenmarkFlag,
+        "place": "Copehagen, Denmark"
+    },
+    {
+        "logo": ErikaLogo,
+        "title": "Erika Spirits",
+        "subtitle": "Vodka & Gin",
+        "flag": FranceFlag,
+        "place": "Cognac, France"
+    },
+    {
+        "logo": NineFoldLogo,
+        "title": "Ninefold",
+        "subtitle": "Rum",
+        "flag": ScotlandFlag,
+        "place": "D&G, Scotland"
+    },
+    {
+        "logo": ArgalaLogo,
+        "title": "Argala",
+        "subtitle": "Pastis, Bitters & Liqueurs",
+        "flag": ItalyFlag,
+        "place": "Boves, Italy"
+    },
+    {
+        "logo": BaldoriaLogo,
+        "title": "Baldoria",
+        "subtitle": "Vermouth",
+        "flag": ItalyFlag,
+        "place": "Boves, Italy"
+    },
+    {
+        "logo": KissMyLogo,
+        "title": "Kiss My",
+        "subtitle": "Aperitif",
+        "flag": BelgiumFlag,
+        "place": "Izegem, Belgium"
+    },
+]

package.json

@@ -9,9 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "autoprefixer": "^9.8.8",
     "next": "12.2.5",
+    "postcss": "^7.0.39",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
   },
   "devDependencies": {
     "@types/node": "^18.7.13",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/brand.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+
+import type { StaticImageData } from 'next/image';
+
+import Image from 'next/image';
+
+
+export type BrandType = {
+    logo: StaticImageData,
+    title: string,
+    subtitle: string,
+    flag: StaticImageData,
+    place: string
+}
+
+const Brand = ({logo, title, subtitle, flag, place}: BrandType) => {
+    const [isSelected, setIsSelected] = useState(false);
+
+    const toggleIsSelected = () => setIsSelected(!isSelected);
+
+    const getBrandStyle = () => {
+        return isSelected ?
+            "w-96 h-28 bg-light-grey flex items-center cursor-pointer" :
+            "w-96 h-28 bg-white flex items-center border border-[#E7E7E7] rounded-md cursor-pointer"
+    }
+
+    const brandStyle = getBrandStyle();
+
+    return (
+        <div className={brandStyle} onClick={toggleIsSelected}>
+            <div className='px-5'>
+                <Image src={logo} alt={title} height={35} width={72}/>
+            </div>
+            <div className='pr-5 border-l-2'>
+                <div className='font-lato ml-4 flex flex-col'>
+                    <div className='uppercase font-bold text-xl text-light-black'>
+                        {title}
+                    </div>
+                    <div className='mt-1 font-normal text-base text-primary'>
+                        <div>
+                            {subtitle}
+                        </div>
+                        <div className='flex items-center mt-1'>
+                            <Image src={flag} alt={place} height={15} width={22}/>
+                            <div className='ml-3'>
+                                {place}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Brand;

src/components/button.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+
+const enum BUTTON_TYPES {
+    base = 'base'
+} 
+
+export type ButtonProps = {
+    type?: BUTTON_TYPES
+}
+
+const getButtonStyle = (type = BUTTON_TYPES.base): string => 
+({
+    [BUTTON_TYPES.base]: "font-lato p-3 bg-light-black text-white font-medium text-base w-60 rounded",
+}[type])
+
+
+const Button: React.FC<PropsWithChildren<ButtonProps>> = ({children, type}) => {
+    const buttonStyle = getButtonStyle(type);
+
+    return (
+        <button className={buttonStyle}>
+            {children}
+        </button>
+    );
+}
+
+export default Button;

src/components/footer.tsx

@@ -0,0 +1,72 @@
+import { PropsWithChildren } from 'react';
+
+import Image from 'next/image';
+
+import LogoWhite from '../assets/logo-white.png';
+import MediumLogo from '../assets/medium-icon.png';
+import LinkedinLogo from '../assets/linkedin-icon.png';
+import InstagramLogo from '../assets/instagram-icon.png';
+import FacebookLogo from '../assets/facebook-icon.png';
+
+type FooterSectionProps = {
+    header: string
+}
+
+const FooterSection: React.FC<PropsWithChildren<FooterSectionProps>> = ({header, children}) => {
+    return (
+        <div className='flex flex-col gap-y-2'>
+            <h3 className='font-medium uppercase text-medium-grey cursor-text'>{header}</h3>
+            {children}
+        </div>
+    );
+}
+
+const Footer = () => {
+    return (
+        <footer className="h-80 bg-light-black font-lato flex flex-col items-center justify-between px-5 py-6 text-white">
+                    <div className="w-full h-full flex justify-between">
+                        <div>
+                            <Image src={LogoWhite} alt='Logo' />
+                        </div>
+                        <div className='flex items-start p-0 gap-20 leading-8 cursor-pointer'>
+                            <FooterSection header='Community'>
+                                <div>Lexir for Brands</div>
+                                <div>Business Buyers</div>
+                                <div>Sales Affiliates</div>
+                            </FooterSection>
+                            <FooterSection header='Platform'>
+                                <div>Resourcer</div>
+                                <div>Pricing</div>
+                                <div>Get Started</div>
+                            </FooterSection>
+                            <FooterSection header='Company'>
+                                <div>About</div>
+                                <div>Contact</div>
+                                <div>Legal</div>
+                            </FooterSection>
+                            <FooterSection header='Lexir Shop'>
+                                <div>Brands</div>
+                                <div>Spirits</div>
+                                <div>Wine</div>
+                                <div>Blog</div>
+                            </FooterSection>
+                        </div>
+                        <div className='cursor-pointer'>
+                            <Image src={MediumLogo} alt='Logo' />
+                            <Image src={FacebookLogo} alt='Logo' />
+                            <Image src={InstagramLogo} alt='Logo' />
+                            <Image src={LinkedinLogo} alt='Logo' />
+                        </div>
+                    </div>
+                    <div className="w-full border-t pt-5 flex justify-between">
+                        <span className="font-light text-base">© 2022 Lexir Inc.</span>
+                        <div className="w-56 mr-3 font-medium text-base flex justify-between items-center cursor-pointer">
+                            <span>Privacy</span>
+                            <span>Terms of Service</span>
+                        </div>
+                    </div>
+            </footer>
+    );
+}
+
+export default Footer;

src/pages/_document.tsx

@@ -0,0 +1,21 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' />
+      <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet" />
+
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' />
+        <link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,600&display=swap" rel="stylesheet" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}

src/pages/brands.tsx

@@ -0,0 +1,64 @@
+import { useState, useEffect } from "react";
+import Image from 'next/image';
+
+import Cottonbro from "../assets/pexels-cottonbro.png";
+
+import Navigation from "./navigation";
+import Brand from "@components/brand";
+import Button from "@components/button";
+
+import { BrandType } from "@components/brand";
+
+import { brandsCollection } from "brands-data";
+import Footer from "@components/footer";
+
+const Brands = () => {
+    const [brands, setBrands] = useState<BrandType[]>([]);
+
+    useEffect(() => {
+        setBrands(brandsCollection);
+    }, []);
+
+    return (
+        <>
+            <Navigation />
+            <div className="p-9">
+                <h1 className="font-serifpro font-bold text-5xl not-italic text-light-black">
+                    Brands
+                </h1>
+                <main className="mt-10 grid grid-cols-3 gap-x-20 gap-y-5">
+                    {
+                        brands &&
+                            brands.map((brand, idx) => {
+                                const {logo, title, subtitle, flag, place} = brand;
+
+                                return (
+                                    <div key={idx} className="">      
+                                        <Brand logo={logo} title={title} subtitle={subtitle} flag={flag} place={place} />
+                                    </div>
+                                );
+                            })
+                    }
+                </main>
+                <section className="bg-light-grey mt-20 flex">
+                <div className="p-6 ml-2 mr-5 mt-10">
+                    <h2 className="mb-4 font-serifpro font-bold text-5xl text-light-black">
+                        Have a brand you’d like to see on <span className="text-success">Lexir</span>?
+                    </h2>
+                    <p className="font-lato text-base font-normal">Lexir is always looking to connect with new exciting craft brands from around the world. If you have a brand in mind that you would like to see on Lexir, let us know.</p>
+                    <div className="mt-20">
+                        <Button>Suggest a Brand</Button>
+                    </div>
+                </div>
+                <div className="w-full h-full relative">
+                    <Image className="absolute" src={Cottonbro} alt="Cottonbro" layout="responsive" objectFit="fill" height={394} width={608}/>
+                </div>
+            </section>
+            </div>
+
+            <Footer />
+        </>
+    );
+}
+
+export default Brands;

src/pages/cart.tsx

@@ -0,0 +1,14 @@
+import Navigation from "./navigation";
+
+const Cart = () => {
+    return (
+        <>
+            <Navigation />
+            <h1 className="text-3xl font-bold">
+                Cart Page
+            </h1>
+        </>
+    );
+}
+
+export default Cart;

src/pages/index.tsx

@@ -1,25 +1,17 @@
 import Head from "next/head";
-import styles from "../styles/Home.module.css";
+
+import Brands from "./brands";
 
 export default function Home() {
   return (
-    <div className={styles.container}>
+    <>
       <Head>
         <title>Lexir Frontend Assessment!</title>
         <meta name="description" content="Lexir Frontend Assessment!" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Lexir Frontend Assessment!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{" "}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
-      </main>
-    </div>
+
+      <Brands />  
+    </>
   );
 }