complete lexir-io-challange --> Done

package.json

@@ -11,13 +11,17 @@
   "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": {
     "@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/assets/index.js

@@ -0,0 +1,27 @@
+import navLogo from "./logo.png";
+import baldoriaLogo from "./baldoria-logo.png";
+import footerLogo from "./footer-logo.png";
+import product_1 from "./packshot-audemus-umami-gin.png";
+import product_2 from "./packshot-silent-pool-silent-pool-gin.png";
+import product_3 from "./stockholms-branneri-pink-gin-packshot.png";
+import product_4 from "./packshot-mr-gaston-brandy.png";
+import socilIcon_1 from "./socIcon-1.svg";
+import facebook from "./facebook.svg";
+import instagram from "./instagram.svg";
+import linkedin from "./linkedin.svg";
+
+const images = {
+  navLogo,
+  baldoriaLogo,
+  product_1,
+  product_2,
+  product_3,
+  product_4,
+  footerLogo,
+  socilIcon_1,
+  facebook,
+  instagram,
+  linkedin,
+};
+
+export default images;

src/components/BrandCard/BrandCard.jsx

@@ -0,0 +1,57 @@
+import Image from "next/image";
+import React from "react";
+import images from "../../assets";
+import { CardBoardBox, Location } from "../../constants/icons";
+
+const BrandCard = () => {
+  return (
+    <div className='w-[30%] h-1/2 flex flex-col items-center pt-5 pb-10 shadow-lg shadow-[#F2F2F2] ring-1 ring-[#F2F2F2]'>
+      {/* Brand-Logo */}
+      <Image src={images.baldoriaLogo} alt='baldoria_logo' />
+
+      {/* Brand-Name and Description */}
+      <div className='mt-10 w-80 mx-auto flex flex-col justify-center items-center'>
+        <h3 className='text-4xl font-bold font-source-serif mb-4'>
+          Baldoria Vermouth
+        </h3>
+        <p className='text-sm font-lato leading-6'>
+          Badoria rosso is a red vermouth that balances fresh, herby bitter
+          notes against. Kiss My Rhubarb takes its origins from an old
+          handwritten recipe from co-creators Niels’ and Wouters’ rebellious
+          grandparents.
+        </p>
+
+        <button className='text-[#1C8C64] text-center inline-block mt-6'>
+          Read More
+        </button>
+      </div>
+
+      {/* Location of the brand */}
+      <div className='mt-16 space-y-10 w-80'>
+        <div className='flex gap-3'>
+          <Location className='w-5 h-5' />
+          <span>
+            <p className='text-xs'>Location</p>
+            <p className='text-sm font-semibold text-[#595959]'>
+              London, United Kingdom
+            </p>
+          </span>
+        </div>
+
+        {/* Category of the product */}
+        <div className='flex gap-3'>
+          <CardBoardBox className='w-5 h-5' />
+          <span>
+            <p className='text-xs'>Product Categories</p>
+            <span className='flex justify-center items-center gap-2 mt-3 text-[#595959] font-semibold'>
+              <p className='text-xs py-1 px-5 bg-[#F9F9F9] rounded'>Gin</p>
+              <p className='text-xs py-1 px-5 bg-[#F9F9F9] rounded'>Vodka</p>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BrandCard;

src/components/Footer/Footer.jsx

@@ -0,0 +1,90 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import images from "../../assets";
+
+const Footer = () => {
+  return (
+    <div className='py-8 bg-[#2D2D2D] font-lato'>
+      <div className='w-[85%] mx-auto flex justify-between'>
+        {/* Footer Logo */}
+        <div>
+          <Image src={images.footerLogo} alt='footer_logo' />
+        </div>
+
+        {/* Footer links */}
+        <div className='flex justify-center gap-32'>
+          {/* Community Section */}
+          <div className='space-y-5'>
+            <p className='text-[#8F8F8F] uppercase'>community</p>
+            <span className='flex flex-col justify-center items-center gap-4 text-white'>
+              <Link href='#'>Lexir for Brands</Link>
+              <Link href='#'>Business Buyers</Link>
+              <Link href='#'>Sales Affiliates</Link>
+            </span>
+          </div>
+
+          {/* Platform Section */}
+          <div className='space-y-5'>
+            <p className='text-[#8F8F8F] uppercase'>Platform</p>
+            <span className='flex flex-col justify-center items-center gap-4 text-white'>
+              <Link href='#'>Resources</Link>
+              <Link href='#'>Pricing</Link>
+              <Link href='#'>Get Started</Link>
+            </span>
+          </div>
+
+          {/* Company Section */}
+          <div className='space-y-5'>
+            <p className='text-[#8F8F8F] uppercase'>Company</p>
+            <span className='flex flex-col justify-center items-center gap-4 text-white'>
+              <Link href='#'>About</Link>
+              <Link href='#'>Contact</Link>
+              <Link href='#'>Legal</Link>
+            </span>
+          </div>
+
+          {/* Lexir-Shop Section */}
+          <div className='space-y-5'>
+            <p className='text-[#8F8F8F] uppercase'>Lexir Shop</p>
+            <span className='flex flex-col justify-center items-center gap-4 text-white'>
+              <Link href='#'>Brands</Link>
+              <Link href='#'>Spirits</Link>
+              <Link href='#'>Wine</Link>
+              <Link href='#'>Blog</Link>
+            </span>
+          </div>
+        </div>
+
+        {/* Socila Media Section */}
+        <div className='flex justify-center gap-2'>
+          <a href='#'>
+            <Image src={images.socilIcon_1} alt='social_icon' />
+          </a>
+          <a href='#'>
+            <Image src={images.facebook} alt='social_icon' />
+          </a>
+          <a href='#'>
+            <Image src={images.instagram} alt='social_icon' />
+          </a>
+          <a href='#'>
+            <Image src={images.linkedin} alt='social_icon' />
+          </a>
+        </div>
+      </div>
+
+      {/* Copyright and privacy policy */}
+      <div className='w-[85%] mx-auto text-white flex justify-between items-center border-t pt-6 mt-10 border-[#8F8F8F]'>
+        <p>&copy; 2022 Lexir Inc.</p>
+        <div>
+          <span className='space-x-10'>
+            <Link href='#'>Privacy</Link>
+            <Link href='#'>Terms of service</Link>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

src/components/Layout/Layout.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Navbar from "../Navbar/Navbar";
+import Head from "next/head";
+import Footer from "../Footer/Footer";
+
+const Layout = ({ children }) => {
+  return (
+    <div>
+      <Head>
+        <title>Lexir Frontend Assessment!</title>
+        <meta name='description' content='Lexir Frontend Assessment!' />
+        <link rel='icon' href='/favicon.ico' />
+      </Head>
+
+      <Navbar />
+      {children}
+      <Footer />
+    </div>
+  );
+};
+
+export default Layout;

src/components/Navbar/Navbar.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import Link from "next/link";
+import images from "../../assets";
+import Image from "next/image";
+import { ShoppingBag, User } from "../../constants/icons";
+
+const Navbar = () => {
+  return (
+    <nav className='shadow-md shadow-[#F2F2F2]'>
+      <div className='w-[85%] mx-auto flex justify-between items-center h-[70px] font-lato font-semibold text-primary'>
+        {/* Navbar Logo */}
+
+        <Link href='/'>
+          <Image src={images.navLogo} alt='lexir_logo' />
+        </Link>
+
+        {/* Navbar Links */}
+        <ul className='uppercase flex justify-center items-center gap-8 text-xs'>
+          <li>
+            <Link href='#'>products</Link>
+          </li>
+          <li>
+            <Link href='#'>brands</Link>
+          </li>
+          <li>
+            <button className='uppercase flex justify-center items-center gap-1'>
+              <User className='w-5 h-5' /> hello, leandro
+            </button>
+          </li>
+          <li className='px-2'>
+            <button className='flex justify-center items-center uppercase gap-2'>
+              <span className='relative'>
+                <span className='w-3 h-3 flex justify-center items-center rounded-full bg-[#1C8C64] absolute text-[9px] text-white font-bold top-0 -right-1 ring-2 ring-white'>
+                  3
+                </span>
+                <ShoppingBag className='w-5 h-5' />
+              </span>
+              cart
+            </button>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/ProductCard/ProductCard.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Image from "next/image";
+import { Add } from "../../constants/icons";
+
+const ProductCard = ({ productData }) => {
+  const { productName, category, price, image } = productData;
+  return (
+    <div className='w-[200px] h-71 shadow-lg shadow-[#F2F2F2] font-lato'>
+      {/* Product Image */}
+      <div className='w-full h-3/4 flex justify-center items-center bg-[#F2F2F2] py-3'>
+        <Image src={image} alt={productName} height={200} />
+      </div>
+
+      {/* Product name and Price */}
+      <div className='flex justify-between items-center px-3 py-1.5'>
+        <h4 className='uppercase font-semibold text-primary'>{productName}</h4>
+        <p className='text-[#6B6B6B] font-semibold'>{price}</p>
+      </div>
+
+      {/* Product Category and Add to cart button */}
+      <div className='flex justify-between items-center px-3 py-1.5'>
+        <h4 className='uppercase font-semibold text-[#6B6B6B] text-sm'>
+          {category}
+        </h4>
+        <button className='p-1.5 bg-[#F2F2F2] rounded-md'>
+          <Add />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ProductCard;

src/components/ProductsSection/ProductsSection.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { dummyData } from "../../constants/dummy_data/dummy_data";
+import ProductCard from "../ProductCard/ProductCard";
+
+const ProductsSection = () => {
+  return (
+    <div className='flex-1 flex justify-center items-center gap-5 flex-wrap'>
+      {dummyData.map((item, i) => (
+        <ProductCard productData={item} key={i} />
+      ))}
+    </div>
+  );
+};
+
+export default ProductsSection;

src/components/index.js

@@ -0,0 +1,4 @@
+export { default as Navbar } from "./Navbar/Navbar";
+export { default as Layout } from "./Layout/Layout";
+export { default as BrandCard } from "./BrandCard/BrandCard";
+export { default as ProductsSection } from "./ProductsSection/ProductsSection";