Celine - Delivery Page

package.json

@@ -22,6 +22,7 @@
     "dotenv": "^16.3.1",
     "eslint-config-next": "13.5.2",
     "next": "^13.5.4",
+    "next-google-fonts": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "react-feather": "^2.0.10",

src/app/checkout/styles.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const CheckoutButton = styled.button`
+  width: 100px;
+  height: 50px;
+`;
+
+export default CheckoutButton;

src/app/delivery/page.tsx

@@ -1,7 +1,67 @@
+'use client';
+
+import React from 'react';
+import BackButton from '../../components/BackButton';
+import { GlobalStyle } from '../../styles/components';
+import {
+  DeliveryContainer,
+  OrderContainer,
+  OrderSummary,
+  OrderSummaryText,
+  OrderButton,
+  InformationContainer,
+  InformationText,
+  PublicSans700Text,
+  ItemText,
+  QtyText,
+  QuantityText,
+  ItemQuantityContainer,
+  ItemQuantityRow,
+  TotalContainer,
+  NavBarMovedUP,
+} from './styles';
+
 export default function App() {
   return (
     <main>
-      <div> Delivery </div>
+      <GlobalStyle />
+
+      <NavBarMovedUP />
+      <BackButton />
+      <DeliveryContainer>
+        <InformationContainer>
+          <PublicSans700Text style={{ marginBottom: '38px', fontSize: '40px' }}>
+            Shipping
+          </PublicSans700Text>
+          <PublicSans700Text>Name</PublicSans700Text>
+          <InformationText>Ethan Auyeung</InformationText>
+          <PublicSans700Text>Address</PublicSans700Text>
+          <InformationText>123 Telegraph Ave</InformationText>
+        </InformationContainer>
+        <OrderContainer>
+          <OrderSummary>
+            <OrderSummaryText>Order Summary</OrderSummaryText>
+            <QtyText>Qty.</QtyText>
+            <ItemQuantityContainer>
+              <ItemQuantityRow>
+                <ItemText>Plush Toy</ItemText>
+                <QuantityText>1</QuantityText>
+              </ItemQuantityRow>
+              <ItemQuantityRow>
+                <ItemText>Item C</ItemText>
+                <QuantityText>2</QuantityText>
+              </ItemQuantityRow>
+            </ItemQuantityContainer>
+            <TotalContainer>
+              <ItemQuantityRow style={{ marginTop: '23px' }}>
+                <ItemText>Order Total</ItemText>
+                <QuantityText>3</QuantityText>
+              </ItemQuantityRow>
+            </TotalContainer>
+          </OrderSummary>
+          <OrderButton>Place Order</OrderButton>
+        </OrderContainer>
+      </DeliveryContainer>
     </main>
   );
 }

src/app/delivery/styles.ts

@@ -0,0 +1,142 @@
+import styled from 'styled-components';
+import NavBar from '../../components/NavBar';
+import COLORS from '../../styles/colors';
+
+export const DeliveryContainer = styled.div`
+  margin-left: 80px;
+  margin-right: 80px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const PublicSans700Text = styled.div`
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+`;
+
+export const OrderSummaryText = styled.div`
+  margin-top: 27px;
+  margin-left: 30px;
+  text-align: left;
+  width: 285px;
+  height: 35px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  font-size: 30px;
+`;
+
+export const QtyText = styled.div`
+  margin-top: 30px;
+  margin-right: 20px;
+  margin-bottom: 5px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-align: right;
+`;
+
+export const ItemText = styled.div`
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+export const QuantityText = styled.div`
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-align: right;
+`;
+
+export const InformationContainer = styled.div`
+  width: 730px;
+  height: 400px;
+`;
+
+export const InformationText = styled.div`
+  width: 730px;
+  height: 50px;
+  border-radius: 4px;
+  margin-top: 14px;
+  margin-bottom: 14px;
+  border: 1px solid ${COLORS.neutralGrey};
+  background: ${COLORS.lightGrey};
+  display: flex; /* Use flexbox */
+  align-items: center; /* Center vertically */
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding-left: 20px;
+`;
+
+export const OrderContainer = styled.div`
+  margin-top: 50px;
+  width: 350px;
+  height: 450px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const OrderSummary = styled.div`
+  width: 350px;
+  height: 360px;
+  border-radius: 8px;
+  background: ${COLORS.white};
+  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.15);
+  align-items: center;
+`;
+
+export const ItemQuantityContainer = styled.div`
+  margin-top: 100px
+  width: 300px;
+  height: 152px;
+  display: flex;
+  flex-direction: column;
+  // use overflow-y if we want to implement scroll bar
+  overflow-y: auto;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const ItemQuantityRow = styled.div`
+  width: 285px;
+  height: 25px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30px;
+`;
+
+export const TotalContainer = styled.div`
+  width: 350px;
+  height: 75px;
+  border-top: 1px solid black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const OrderButton = styled.button`
+  margin-top: 26px;
+  width: 350px;
+  height: 50px;
+  flex-shrink: 0;
+  align-items: center;
+  background: ${COLORS.navy};
+  border-radius: 8px;
+  color: ${COLORS.white};
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+`;
+
+export const NavBarMovedUP = styled(NavBar)`
+  position: static;
+`;

src/app/storefront/styles.ts

@@ -25,6 +25,7 @@ export const StickyHeader = styled.div`
 `;
 
 export const Button = styled.button<props>`
+  // position: sticky;
   background-color: ${props => (props.isClicked ? '#00507f' : '#C7E1FF')};
   border-radius: 50%;
   width: 50px;
@@ -60,7 +61,7 @@ export const ButtonsContainer = styled.div`
   margin-left: 400px;
   margin-right: 400px;
   width: 600px;
-  height: 230px;
+  height: 200px;
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -69,6 +70,7 @@ export const ButtonsContainer = styled.div`
   z-index: 1100;
   transform: translate(0px, -30px);
 `;
+
 export const NavButton = styled.button`
   margin-top: 30px;
   margin-right: 25px;

src/components/BackButton.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { BackDiv } from '../styles/components';
+
+export default function BackButton() {
+  return (
+    <Link href="/storefront">
+      <BackDiv>
+        <Image
+          src="/images/Arrow_Left_MD.png"
+          alt="Back Arrow"
+          width={23}
+          height={23}
+        />
+        <p>Back</p>
+      </BackDiv>
+    </Link>
+  );
+}

src/styles/components.tsx

@@ -4,9 +4,12 @@ import { User, ShoppingCart } from 'react-feather';
 import COLORS from './colors';
 
 export const GlobalStyle = createGlobalStyle`
+  @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;700&display=swap'); 
+
   body {
     background: white;
     color:black;
+    font-family: 'Public Sans', sans-serif;
   }
   span{
 
@@ -73,6 +76,17 @@ export const ButtonsDiv = styled.div`
   padding-top: 15px;
 `;
 
+export const BackDiv = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: black;
+  background-color: transparent;
+  border: transparent;
+  margin-left: 80px;
+  margin-top: 55px;
+`;
+
 export const LocationDiv = styled.div`
   display: flex;
   flex-direction: column;

src/styles/fonts.tsx

@@ -1,15 +1,12 @@
 import styled from 'styled-components';
 
 export const Heading1 = styled.div`
-  font-family: public-sans;
   font-size: 40px;
   font-style: normal;
-  font-weight: 700;
   line-height: normal;
 `;
 
 export const Heading4 = styled.div`
-  font-family: public-sans;
   font-size: 15px;
   font-style: normal;
   font-weight: 400;