Raeven goncalves product page1 lexir challenge

README.md

@@ -30,7 +30,7 @@ Once you have node.js installed, open up your OS's Terminal/Bash application, ch
 
 After all NPM packages installed successfully, the css pre-compile and serve processes will automatically be triggered (you can do that manually by running `yarn run dev`).
 
-- Whenever a change is detected in files inside the `/src` folder it will re-run the above related scripts and reload the page in the browser.
+-   Whenever a change is detected in files inside the `/src` folder it will re-run the above related scripts and reload the page in the browser.
 
 At this point you should be able to see a blank page in your browser.
 
@@ -46,37 +46,37 @@ If you experience problems during the setup please _STOP_ and send a message to
 
 ### Browsers it should work in and display correctly
 
-- Latest Chrome
+-   Latest Chrome
 
 ### Where should I place my files?
 
 We've got an initial folder and file structure in `src` prepared for you:
 
-- `pages/index.tsx` - File with prepared markup (needs your improvements)
-- `styles/` - inside this folder you can add styles, classes, mixins, variables, etc that will help you to implement the required design as fast as possible.
-- `components/` - inside this folder you should add all the JavaScript components needed to make your solution work as it should.
-- `assets/` - images and other assets to be used by this solution.
+-   `pages/index.tsx` - File with prepared markup (needs your improvements)
+-   `styles/` - inside this folder you can add styles, classes, mixins, variables, etc that will help you to implement the required design as fast as possible.
+-   `components/` - inside this folder you should add all the JavaScript components needed to make your solution work as it should.
+-   `assets/` - images and other assets to be used by this solution.
 
 Please keep and use this structure.
 
 ### Coding guidelines
 
 1.  HTML
 
-    - Make sure to add all needed HTML so that it fits the exercise requirements.
-    - Please use semantically correct HTML5 markup
+    -   Make sure to add all needed HTML so that it fits the exercise requirements.
+    -   Please use semantically correct HTML5 markup
 
 2.  JavaScript
 
-    - Please use Typescript, ReactJS is allowed
-    - We would like to see YOUR clean and modular JavaScript / Typescript code (while commented when needed).
-    - Use of recent JavaScript / Typescript features (eg: ES6, ES2016, ES2017) is highly encouraged as long as supported by latest chrome (so you shouldn't have to transpile / compile your JavaScript).
+    -   Please use Typescript, ReactJS is allowed
+    -   We would like to see YOUR clean and modular JavaScript / Typescript code (while commented when needed).
+    -   Use of recent JavaScript / Typescript features (eg: ES6, ES2016, ES2017) is highly encouraged as long as supported by latest chrome (so you shouldn't have to transpile / compile your JavaScript).
 
 3.  CSS
 
-    - We kindly ask you to use TAILWIND CSS
-    - Another frameworks are not allowed
-    - Only Pure CSS are not allowed
+    -   We kindly ask you to use TAILWIND CSS
+    -   Another frameworks are not allowed
+    -   Only Pure CSS are not allowed
 
 ### Can I use additional NPM packages?
 
@@ -89,23 +89,23 @@ Yes, as long as the points from the above section [Coding guidelines] are not vi
 1. Fork this repo
 2. Design to be developed: https://www.figma.com/file/G1uRC23QIVkKzLOif8MqHf/Tech-Assessment-V1.0.2
 3. Tailwind Implementation
-   - Please add to the existing project the Tailwind CSS framework to achieve the required design and planned behavior.
+    - Please add to the existing project the Tailwind CSS framework to achieve the required design and planned behavior.
 4. HTML markup
 
-   - Please add to the existing src/index.tsx file the semantic markup needed to achieve the required design and planned behavior.
-   - Depending on your implementation (regarding modularization/componentization) you may chose to have some components. If that's case (which is fine) we would still like you to add at least the base structural elements (eg: header, footer, etc) in the base index.tsx file and respective calls
+    - Please add to the existing src/index.tsx file the semantic markup needed to achieve the required design and planned behavior.
+    - Depending on your implementation (regarding modularization/componentization) you may chose to have some components. If that's case (which is fine) we would still like you to add at least the base structural elements (eg: header, footer, etc) in the base index.tsx file and respective calls
 
 5. App's dynamic behavior - please add the required Javascript / Typescript and styles so that:
-   - No required for Junior Developer
+    - No required for Junior Developer
 6. Pull Request to the main repository, deploy to vercel and share the link
 
 ### BONUS (Optional for Frontend Heroes)
 
 7.  Leave an empty file named "I AM A FRONTEND HERO" in the root folder.
 8.  App's dynamic behavior
 
-- Create a API call inside of the folder pages/api to get all products
-- Consume and handle data from the API using SSE
+-   Create a API call inside of the folder pages/api to get all products
+-   Consume and handle data from the API using SSE
 
 9. Pull Request to the main repository, deploy to vercel and share the link
 

package.json

@@ -11,13 +11,18 @@
   "dependencies": {
     "next": "12.2.5",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-icons": "^4.4.0"
   },
   "devDependencies": {
+    "@iconify/react": "^3.2.2",
     "@types/node": "^18.7.13",
     "@types/react": "^18.0.17",
+    "autoprefixer": "^10.4.8",
     "eslint": "8.23.0",
     "eslint-config-next": "12.2.5",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8",
     "typescript": "^4.8.2"
   }
 }

postcss.config.js

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

src/components/BrandSuggest.js

@@ -0,0 +1,37 @@
+import Image from "next/image";
+import BrandSuggestion from "../public/assets/brandSuggestion/brandSuggest.png";
+import BrandTitle from "../public/assets/brandSuggestion/brandTitle.png";
+// <div><Image src={BrandTitle} alt="suggestion title" /></div>
+const BrandSuggest = () => {
+    return (
+        <div className="flex justify-center w-[1280] h-[392px] font-main ">
+            <div className="flex w-[1280px] h-[392px] mx-[33px]  ">
+                <div className="flex  flex-col w-[606px] h-[392px] bg-rose-100  ">
+                    <div className="  flex flex-col w-[556px] h-[216px] mt-[50px] mr-[15px] mb-[28px] ml-[34px]  ">
+                        <p className="text-5xl font-title">
+                            Have a brand you'd like to see on{" "}
+                            <span className="text-green-800">Lexir</span>?
+                        </p>
+                        <div>
+                            <p className="mt-[23px]">
+                                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>
+                    </div>
+                    <button className=" w-[244px] h-[50px] ml-[34px] rounded-[5px] bg-black text-white hover:text-white hover:bg-rose-300 duration-100">
+                        {" "}
+                        Suggest a Brand
+                    </button>
+                </div>
+                <div className="flex w-[606px] h-[392px]  ">
+                    <Image src={BrandSuggestion} alt="brandsuggest" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BrandSuggest;

src/components/Footer.js

@@ -0,0 +1,115 @@
+import Image from "next/image";
+import logoWht from "../public/assets/footer/logoWht.png";
+import socials from "../public/assets/footer/social-media.png";
+import copyRight from "../public/assets/footer/copyright.png";
+
+const Footer = () => {
+    return (
+        <div className="flex justify-cemter w-full font-main">
+            <div className="flex flex-col items-center justify-center ml-[40px]  py-6 bg-[#2D2D2D] w-[1280px] h-[337px]">
+                <div className="flex flex-col items-center justify-between pt-[20px] py-[30px] w-[1219px] h-[257px]  border-b border-[#8F8F8F]">
+                    <div className="flex  items-start justify-between  py-[30px] pt-[0px] w-[1212px] h-[213px] ">
+                        <div id="logoWht" className=" cursor-pointer">
+                            {" "}
+                            <Image src={logoWht} className="" alt="logo" />
+                        </div>
+                        <div className=" flex flex-row text-white justify-between  pt-2 w-[733px]">
+                            <div
+                                id="community"
+                                className="flex flex-col items-start  space-y-4 "
+                            >
+                                <p className="text-[#8F8F8F] uppercase">
+                                    Community
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    Lexir for Brands
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    Business Buyers
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    Sales Affiliates
+                                </p>
+                            </div>
+                            <div
+                                id="platform"
+                                className="flex flex-col items-start space-y-4"
+                            >
+                                <p className="text-[#8F8F8F] uppercase">
+                                    Platform
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    Resources
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    Pricing
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    Get Started
+                                </p>
+                            </div>
+                            <div
+                                id="company"
+                                className="flex flex-col items-start space-y-4"
+                            >
+                                {" "}
+                                <p className="text-[#8F8F8F] uppercase">
+                                    Company
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    About
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    Contact
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    Legal
+                                </p>
+                            </div>
+                            <div
+                                id="shop"
+                                className="flex flex-col items-start space-y-4"
+                            >
+                                {" "}
+                                <p className="text-[#8F8F8F] uppercase">
+                                    Lexir shop
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    Brands
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    Spirits
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    Wine
+                                </p>
+                                <p className="hover:scale-105 duration-75 hover:text-rose-300 cursor-pointer">
+                                    Blog
+                                </p>
+                            </div>
+                        </div>
+                        <div
+                            id="socials"
+                            className="flex flex-row  items-start justify-end cursor-pointer"
+                        >
+                            <Image src={socials} alt="socals" />
+                        </div>
+                    </div>
+                </div>
+                <div className="flex flex-row items-center justify-between w-[1219px] pt h-[32px] mt-3">
+                    <div>
+                        <Image src={copyRight} alt="copyright" />
+                    </div>
+                    <div className="flex items-center ">
+                        <div className=" text-gray-500">Privacy</div>
+                        <div className="pl-[64px] text-gray-500">
+                            Terms of Service
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Footer;

src/components/Header.js

@@ -0,0 +1,49 @@
+import Image from "next/image";
+import Link from "next/link";
+import logoBlk from "../public/assets/header/logoBlk.png";
+import basket from "../public/assets/header/shopBasket.png";
+import avatar from "../public/assets/header/userAvatar.png";
+
+const Header = () => {
+    return (
+        <header className="flex w-full  shadow-lg shadow-rose-100 font-main  ">
+            <div
+                id="header__container"
+                className="flex justify-between items-center w-[1280px] h-[104px] ml-10 px-4 text-black bg-white "
+            >
+                <Link href="/">
+                    <div className="pl-[20px]">
+                        <Image className="ml-[34px]" src={logoBlk} alt="logo" />
+                    </div>
+                </Link>
+                <div className="flex flex-row items-center justify-between mr-[34px]">
+                    <Link href="/products">
+                        <div className="mr-10 cursor-pointer hover:text-rose-300  duration-100">
+                            PRODUCTS
+                        </div>
+                    </Link>
+                    <Link href="/brands">
+                        <div className="mr-10 hover:text-rose-300   duration-100">
+                            BRANDS
+                        </div>
+                    </Link>
+                    <Link href="/signIn">
+                        <div className="flex flex-row mr-10 hover:text-rose-300   duration-100 ">
+                            <Image src={avatar} alt="logo" />
+                            <span className="ml-[8px] ">SIGN IN</span>
+                        </div>
+                    </Link>
+                    <Link href="/cart">
+                        <div className="flex flex-row">
+                            <Image src={basket} alt="basket" className="" />
+                            <span className="ml-[8px] hover:text-rose-300   duration-100">
+                                CART
+                            </span>
+                        </div>
+                    </Link>
+                </div>
+            </div>
+        </header>
+    );
+};
+export default Header;

src/components/Layout.js

@@ -0,0 +1,14 @@
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+
+const Layout = ({ children }) => {
+    return (
+        <div>
+            <Header />
+            {children}
+            <Footer />
+        </div>
+    );
+};
+
+export default Layout;

src/components/Navbar.js

@@ -0,0 +1,57 @@
+import Image from "next/image";
+import houseIcon from "../public/assets/navbar/IconsHouse.png";
+import ChevronRightIcon from "../public/assets/navbar/IconsChevronRight.png";
+
+const Navbar = () => {
+    return (
+        <nav>
+            <div className="text-black w-full h-[64px] relative font-main ">
+                <div className=" flex absolute bottom-0 left-[34px]  h-5 w-[458px]">
+                    <div className="flex items-center justify-between  h-full w-[81px] mr-[14px]">
+                        <div className="pt-1">
+                            <Image src={houseIcon} alt="house icon" />
+                        </div>
+                        <div className=" hover:text-rose-300 duration-100 hover:scale-105 ">
+                            Home
+                        </div>
+                    </div>
+                    <div className="flex items-center justify-between  h-full w-[82px] mr-[14px]">
+                        <div className="pt-1">
+                            <Image
+                                src={ChevronRightIcon}
+                                alt="right arrow icon"
+                            />
+                        </div>
+                        <div className=" hover:text-rose-300 duration-100 hover:scale-105 ">
+                            Spirits
+                        </div>
+                    </div>
+                    <div className="flex items-center justify-between  h-full w-[94px] mr-[14px]">
+                        <div className="pt-1">
+                            <Image
+                                src={ChevronRightIcon}
+                                alt="right arrow icon"
+                            />
+                        </div>
+                        <div className=" hover:text-rose-300 duration-100 hover:scale-105 ">
+                            Kiss My
+                        </div>
+                    </div>
+                    <div className="flex items-center justify-between  h-full w-[158px]">
+                        <div className="pt-1">
+                            <Image
+                                src={ChevronRightIcon}
+                                alt="right arrow icon"
+                            />
+                        </div>
+                        <div className=" hover:text-rose-300 duration-100 hover:scale-105 ">
+                            Kiss My Rhubarb
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    );
+};
+
+export default Navbar;