mobile navbar and main icons

frontend/.prettierrc

@@ -0,0 +1,9 @@
+{
+    "printWidth": 80,
+    "bracketSpacing": true,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "useTabs": false
+  }

frontend/components/Navbar/MobileNav.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  CogIcon,
+  GalleryIcon,
+  HomeIcon,
+  PlusCircleIcon,
+  UserIcon,
+} from '../icons';
+
+export default function MobileNav() {
+  return (
+    <div className="bg-figma-500 h-16 w-full fixed bottom-0 px-5 rounded-t-2xl">
+      <div className="flex justify-between self-center">
+        <HomeIcon className="w-7 h-7 self-center" />
+        <GalleryIcon className="w-7 h-7 self-center" />
+        <PlusCircleIcon className="w-14 h-14 fill-figma-100 text-figma-200" />
+        <UserIcon className="w-7 h-7 self-center" />
+        <CogIcon className="w-7 h-7 self-center" />
+      </div>
+    </div>
+  );
+}

frontend/components/SearchBar.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SearchIcon } from './icons';
+
+export default function SearchBar() {
+  return (
+    <div className="flex justify-center w-full">
+      <div className="relative flex flex-wrap items-stretch w-full mb-4">
+        <input
+          type="search"
+          className=" h-11 rounded px-6 w-3/4 border-2 border-figma-300 text-figma-400 font-medium"
+          placeholder="Search artwork"
+        />
+        <button className="inline-block px-1 py-2 border-2 border-figma-100 text-figma-100 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out w-1/4">
+          Search
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/components/icons/CogIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default function CogIcon({
+  className,
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+  );
+}

frontend/components/icons/CashIcon.tsx → frontend/components/icons/GalleryIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function CashIcon({
+export default function GalleryIcon({
   className,
   ...props
 }: React.SVGProps<SVGSVGElement>) {
@@ -12,12 +12,12 @@ export default function CashIcon({
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
+      strokeWidth={2}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={2}
-        d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
+        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
       />
     </svg>
   );

frontend/components/icons/CheckIcon.tsx → frontend/components/icons/HomeIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function CheckIcon({
+export default function HomeIcon({
   className,
   ...props
 }: React.SVGProps<SVGSVGElement>) {
@@ -12,12 +12,12 @@ export default function CheckIcon({
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
+      strokeWidth={2}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={2}
-        d="M5 13l4 4L19 7"
+        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
       />
     </svg>
   );

frontend/components/icons/BackIcon.tsx → frontend/components/icons/PlusCircleIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function BackIcon({
+export default function PlusCircleIcon({
   className,
   ...props
 }: React.SVGProps<SVGSVGElement>) {
@@ -12,12 +12,12 @@ export default function BackIcon({
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
+      strokeWidth={2}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={2}
-        d="M15 19l-7-7 7-7"
+        d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
       />
     </svg>
   );

frontend/components/icons/SearchIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+function SearchIcon({ className, ...props }: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+      />
+    </svg>
+  );
+}
+
+export default SearchIcon;

frontend/components/icons/CheckCircleIcon.tsx → frontend/components/icons/UserIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function CheckCircleIcon({
+export default function UserIcon({
   className,
   ...props
 }: React.SVGProps<SVGSVGElement>) {
@@ -12,12 +12,12 @@ export default function CheckCircleIcon({
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
+      strokeWidth={2}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={2}
-        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
       />
     </svg>
   );

frontend/components/icons/index.tsx

@@ -1,31 +1,8 @@
-import EditIcon from './EditIcon';
-import BackIcon from './BackIcon';
-import CheckIcon from './CheckIcon';
-import TrashIcon from './TrashIcon';
-import UploadIcon from './UploadIcon';
-import CloseIcon from './CloseIcon';
-import PageIcon from './PageIcon';
-import CopyIcon from './CopyIcon';
-import StarIcon from './StarIcon';
-import LogOutIcon from './LogOutIcon';
-import LoginIcon from './LoginIcon';
-import TruckIcon from './TruckIcon';
-import TagIcon from './TagIcon';
-import HeartIcon from './HeartIcon';
+import HomeIcon from './HomeIcon';
+import GalleryIcon from './GalleryIcon';
+import PlusCircleIcon from './PlusCircleIcon';
+import UserIcon from './UserIcon';
+import CogIcon from './CogIcon';
+import SearchIcon from './SearchIcon';
 
-export {
-  EditIcon,
-  BackIcon,
-  CheckIcon,
-  TrashIcon,
-  UploadIcon,
-  CloseIcon,
-  PageIcon,
-  CopyIcon,
-  StarIcon,
-  LogOutIcon,
-  LoginIcon,
-  TruckIcon,
-  TagIcon,
-  HeartIcon,
-};
+export { HomeIcon, GalleryIcon, PlusCircleIcon, UserIcon, CogIcon, SearchIcon };

frontend/pages/app/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import MobileNav from '../../components/Navbar/MobileNav';
+import SearchBar from '../../components/SearchBar';
+
+export default function Landing() {
+  return (
+    <div className="min-h-screen min-w-full p-4">
+      <div className="">
+        <h1 className="font-bold; text-xl ml-12">Welcome</h1>
+        <img src="/logo.png" alt="logo" className="w-36" />
+      </div>
+      <div className="mt-6">
+        <SearchBar />
+      </div>
+      <div>
+        <MobileNav />
+      </div>
+    </div>
+  );
+}

frontend/tailwind.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
     './context/**/*.{js,jsx,ts,tsx}',
   ],
   theme: {
@@ -14,7 +14,7 @@ module.exports = {
     extend: {
       colors: {
         primary: {
-           50: '#4C5564',
+          50: '#4C5564',
           100: '#787878',
           200: '#5E5E5E',
           300: '#454545',
@@ -29,12 +29,18 @@ module.exports = {
           500: '#15F974',
         },
         test: {
-          50: '#232f35'
-        }
+          50: '#232f35',
+        },
+        figma: {
+          100: '#473EA8',
+          200: '#F9F9F9',
+          300: '#F2F2F2',
+          400: '#333333',
+          500: '#FEFEFE',
+          600: '#828282',
+        },
       },
     },
   },
-  plugins: [
-    require('tailwind-scrollbar-hide')
-  ],
-}
+  plugins: [require('tailwind-scrollbar-hide')],
+};