fixed prettier and eslint issues

package.json

@@ -12,6 +12,9 @@
     "prettier:fix": "npx prettier --write ."
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@supabase/supabase-js": "^2.37.0",
     "@types/node": "20.6.3",
     "@types/react": "18.2.22",

src/app/storefront/page.tsx

@@ -1,7 +1,30 @@
-export default function Storefront() {
+'use client';
+
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faShoppingCart, faUser } from '@fortawesome/free-solid-svg-icons';
+import { GlobalStyle, Button } from './styles';
+
+function handleCheckoutClick() {
+  window.location.href = '/checkout';
+}
+
+function handleProfileClick() {
+  window.location.href = '/profileScreen';
+}
+
+export default function App() {
   return (
     <main>
-      <div>storefront</div>
+      <GlobalStyle />
+      <Button onClick={handleCheckoutClick}>
+        <FontAwesomeIcon icon={faShoppingCart} />
+        <div>Cart</div>
+      </Button>
+      <Button onClick={handleProfileClick}>
+        <FontAwesomeIcon icon={faUser} />
+        <div>Profile</div>
+      </Button>
     </main>
   );
 }

src/app/storefront/styles.ts

@@ -0,0 +1,23 @@
+import styled, { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    background:white;
+  }
+`;
+
+export const Button = styled.button`
+  margin: 10px;
+  color: black;
+  text-align: center;
+  font-family: sans-serif;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  width: 50px;
+  height: 50px;
+  background: transparent;
+  border: transparent;
+  float: right;
+`;