Initial snapshot - OpenTelemetry demo 2.1.3 -f

57 files changed, 1851 insertions, 0 deletions

diff --git a/src/frontend/components/Ad/Ad.styled.ts b/src/frontend/components/Ad/Ad.styled.ts
new file mode 100644
index 0000000..2940e58
--- /dev/null
+++ b/src/frontend/components/Ad/Ad.styled.ts
@@ -0,0 +1,24 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+import RouterLink from 'next/link';
+
+export const Ad = styled.section`
+  position: relative;
+  background-color: ${({ theme }) => theme.colors.otelYellow};
+  font-size: ${({ theme }) => theme.sizes.dMedium};
+  text-align: center;
+  padding: 48px;
+
+  * {
+    color: ${({ theme }) => theme.colors.white};
+    margin: 0;
+    cursor: pointer;
+  }
+`;
+
+export const Link = styled(RouterLink)`
+  color: black;
+  text-decoration: none;
+`;
diff --git a/src/frontend/components/Ad/Ad.tsx b/src/frontend/components/Ad/Ad.tsx
new file mode 100644
index 0000000..6a5ae14
--- /dev/null
+++ b/src/frontend/components/Ad/Ad.tsx
@@ -0,0 +1,21 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { CypressFields } from '../../utils/enums/CypressFields';
+import { useAd } from '../../providers/Ad.provider';
+import * as S from './Ad.styled';
+
+const Ad = () => {
+  const { adList } = useAd();
+  const { text, redirectUrl } = adList[Math.floor(Math.random() * adList.length)] || { text: '', redirectUrl: '' };
+
+  return (
+    <S.Ad data-cy={CypressFields.Ad}>
+      <S.Link href={redirectUrl}>
+        <p>{text}</p>
+      </S.Link>
+    </S.Ad>
+  );
+};
+
+export default Ad;
diff --git a/src/frontend/components/Ad/index.ts b/src/frontend/components/Ad/index.ts
new file mode 100644
index 0000000..b64732f
--- /dev/null
+++ b/src/frontend/components/Ad/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './Ad';
diff --git a/src/frontend/components/Banner/Banner.styled.ts b/src/frontend/components/Banner/Banner.styled.ts
new file mode 100644
index 0000000..6aa7d62
--- /dev/null
+++ b/src/frontend/components/Banner/Banner.styled.ts
@@ -0,0 +1,59 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+import Button from '../Button';
+
+export const Banner = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    flex-direction: row-reverse;
+    padding-bottom: 38px;
+    background: ${({ theme }) => theme.colors.backgroundGray};
+  }
+`;
+
+export const BannerImg = styled.img.attrs({
+  src: '/images/Banner.png',
+})`
+  width: 100%;
+  height: auto;
+`;
+
+export const ImageContainer = styled.div`
+  ${({ theme }) => theme.breakpoints.desktop} {
+    min-width: 50%;
+  }
+`;
+
+export const TextContainer = styled.div`
+  padding: 20px;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+    width: 50%;
+    padding: 100px 160px 100px 100px;
+  }
+`;
+
+export const Title = styled.h1`
+  font-size: ${({ theme }) => theme.sizes.mxLarge};
+  font-weight: ${({ theme }) => theme.fonts.bold};
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    font-size: ${({ theme }) => theme.sizes.dxLarge};
+  }
+`;
+
+export const GoShoppingButton = styled(Button)`
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    width: auto;
+  }
+`;
diff --git a/src/frontend/components/Banner/Banner.tsx b/src/frontend/components/Banner/Banner.tsx
new file mode 100644
index 0000000..f2d75e2
--- /dev/null
+++ b/src/frontend/components/Banner/Banner.tsx
@@ -0,0 +1,21 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Link from 'next/link';
+import * as S from './Banner.styled';
+
+const Banner = () => {
+  return (
+    <S.Banner>
+      <S.ImageContainer>
+        <S.BannerImg />
+      </S.ImageContainer>
+      <S.TextContainer>
+        <S.Title>The best telescopes to see the world closer</S.Title>
+        <Link href="#hot-products"><S.GoShoppingButton>Go Shopping</S.GoShoppingButton></Link>
+      </S.TextContainer>
+    </S.Banner>
+  );
+};
+
+export default Banner;
diff --git a/src/frontend/components/Banner/index.ts b/src/frontend/components/Banner/index.ts
new file mode 100644
index 0000000..1d87266
--- /dev/null
+++ b/src/frontend/components/Banner/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './Banner';
diff --git a/src/frontend/components/Button/Button.tsx b/src/frontend/components/Button/Button.tsx
new file mode 100644
index 0000000..0807750
--- /dev/null
+++ b/src/frontend/components/Button/Button.tsx
@@ -0,0 +1,36 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled, { css } from 'styled-components';
+
+const Button = styled.button<{ $type?: 'primary' | 'secondary' | 'link' }>`
+  background-color: #5262a8;
+  color: white;
+  display: inline-block;
+  border: solid 1px #5262a8;
+  padding: 8px 16px;
+  outline: none;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 27px;
+  border-radius: 10px;
+  height: 62px;
+  cursor: pointer;
+
+  ${({ $type = 'primary' }) =>
+    $type === 'secondary' &&
+    css`
+      background: none;
+      color: #5262a8;
+    `};
+
+  ${({ $type = 'primary' }) =>
+    $type === 'link' &&
+    css`
+      background: none;
+      color: #5262a8;
+      border: none;
+    `};
+`;
+
+export default Button;
diff --git a/src/frontend/components/Button/index.ts b/src/frontend/components/Button/index.ts
new file mode 100644
index 0000000..0af447b
--- /dev/null
+++ b/src/frontend/components/Button/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './Button';
diff --git a/src/frontend/components/Cart/CartDetail.tsx b/src/frontend/components/Cart/CartDetail.tsx
new file mode 100644
index 0000000..4d777e4
--- /dev/null
+++ b/src/frontend/components/Cart/CartDetail.tsx
@@ -0,0 +1,81 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useRouter } from 'next/router';
+import { useCallback } from 'react';
+import CartItems from '../CartItems';
+import CheckoutForm from '../CheckoutForm';
+import { IFormData } from '../CheckoutForm/CheckoutForm';
+import SessionGateway from '../../gateways/Session.gateway';
+import { useCart } from '../../providers/Cart.provider';
+import { useCurrency } from '../../providers/Currency.provider';
+import * as S from '../../styles/Cart.styled';
+
+const { userId } = SessionGateway.getSession();
+
+const CartDetail = () => {
+  const {
+    cart: { items },
+    emptyCart,
+    placeOrder,
+  } = useCart();
+  const { selectedCurrency } = useCurrency();
+  const { push } = useRouter();
+
+  const onPlaceOrder = useCallback(
+    async ({
+      email,
+      state,
+      streetAddress,
+      country,
+      city,
+      zipCode,
+      creditCardCvv,
+      creditCardExpirationMonth,
+      creditCardExpirationYear,
+      creditCardNumber,
+    }: IFormData) => {
+      const order = await placeOrder({
+        userId,
+        email,
+        address: {
+          streetAddress,
+          state,
+          country,
+          city,
+          zipCode,
+        },
+        userCurrency: selectedCurrency,
+        creditCard: {
+          creditCardCvv,
+          creditCardExpirationMonth,
+          creditCardExpirationYear,
+          creditCardNumber,
+        },
+      });
+
+      push({
+        pathname: `/cart/checkout/${order.orderId}`,
+        query: { order: JSON.stringify(order) },
+      });
+    },
+    [placeOrder, push, selectedCurrency]
+  );
+
+  return (
+    <S.Container>
+      <div>
+        <S.Header>
+          <S.CarTitle>Shopping Cart</S.CarTitle>
+          <S.EmptyCartButton onClick={emptyCart} $type="link">
+            Empty Cart
+          </S.EmptyCartButton>
+        </S.Header>
+        <CartItems productList={items} />
+      </div>
+      <CheckoutForm onSubmit={onPlaceOrder} />
+    </S.Container>
+  );
+};
+
+export default CartDetail;
diff --git a/src/frontend/components/Cart/EmptyCart.tsx b/src/frontend/components/Cart/EmptyCart.tsx
new file mode 100644
index 0000000..70f403f
--- /dev/null
+++ b/src/frontend/components/Cart/EmptyCart.tsx
@@ -0,0 +1,23 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Link from 'next/link';
+import Button from '../Button';
+import * as S from '../../styles/Cart.styled';
+
+const EmptyCart = () => {
+  return (
+    <S.EmptyCartContainer>
+      <S.Title>Your shopping cart is empty!</S.Title>
+      <S.Subtitle>Items you add to your shopping cart will appear here.</S.Subtitle>
+
+      <S.ButtonContainer>
+        <Link href="/">
+          <Button type="submit">Continue Shopping</Button>
+        </Link>
+      </S.ButtonContainer>
+    </S.EmptyCartContainer>
+  );
+};
+
+export default EmptyCart;
diff --git a/src/frontend/components/CartDropdown/CartDropdown.styled.ts b/src/frontend/components/CartDropdown/CartDropdown.styled.ts
new file mode 100644
index 0000000..8820210
--- /dev/null
+++ b/src/frontend/components/CartDropdown/CartDropdown.styled.ts
@@ -0,0 +1,100 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Image from 'next/image';
+import styled from 'styled-components';
+import Button from '../Button';
+
+export const CartDropdown = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 24px;
+  background: ${({ theme }) => theme.colors.white};
+  z-index: 1000;
+  border-radius: 5px;
+  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    position: absolute;
+    width: 400px;
+    top: 95px;
+    right: 17px;
+    max-height: 650px;
+  }
+`;
+
+export const Title = styled.h5`
+  margin: 0px;
+  font-size: ${({ theme }) => theme.sizes.mxLarge};
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    font-size: ${({ theme }) => theme.sizes.dLarge};
+  }
+`;
+
+export const ItemList = styled.div`
+  ${({ theme }) => theme.breakpoints.desktop} {
+    max-height: 450px;
+    overflow-y: scroll;
+  }
+`;
+
+export const Item = styled.div`
+  display: grid;
+  grid-template-columns: 29% 59%;
+  gap: 2%;
+  padding: 25px 0;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.textLightGray};
+`;
+
+export const ItemImage = styled(Image).attrs({
+  width: '80',
+  height: '80',
+})`
+  border-radius: 5px;
+`;
+
+export const ItemName = styled.p`
+  margin: 0px;
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  font-weight: ${({ theme }) => theme.fonts.regular};
+`;
+
+export const ItemDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+export const ItemQuantity = styled(ItemName)`
+  font-size: ${({ theme }) => theme.sizes.mMedium};
+`;
+
+export const CartButton = styled(Button)``;
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    span {
+      display: none;
+    }
+  }
+`;
+
+export const EmptyCart = styled.h3`
+  margin: 0;
+  margin-top: 25px;
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  color: ${({ theme }) => theme.colors.textLightGray};
+`;
diff --git a/src/frontend/components/CartDropdown/CartDropdown.tsx b/src/frontend/components/CartDropdown/CartDropdown.tsx
new file mode 100644
index 0000000..cd0703e
--- /dev/null
+++ b/src/frontend/components/CartDropdown/CartDropdown.tsx
@@ -0,0 +1,65 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Link from 'next/link';
+import { useEffect, useRef } from 'react';
+import { CypressFields } from '../../utils/enums/CypressFields';
+import { IProductCartItem } from '../../types/Cart';
+import ProductPrice from '../ProductPrice';
+import * as S from './CartDropdown.styled';
+
+interface IProps {
+  isOpen: boolean;
+  onClose(): void;
+  productList: IProductCartItem[];
+}
+
+const CartDropdown = ({ productList, isOpen, onClose }: IProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: Event) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, onClose]);
+
+  return isOpen ? (
+    <S.CartDropdown ref={ref} data-cy={CypressFields.CartDropdown}>
+      <div>
+        <S.Header>
+          <S.Title>Shopping Cart</S.Title>
+          <span onClick={onClose}>Close</span>
+        </S.Header>
+        <S.ItemList>
+          {!productList.length && <S.EmptyCart>Your shopping cart is empty</S.EmptyCart>}
+          {productList.map(
+            ({ quantity, product: { name, picture, id, priceUsd = { nanos: 0, currencyCode: 'USD', units: 0 } } }) => (
+              <S.Item key={id} data-cy={CypressFields.CartDropdownItem}>
+                <S.ItemImage src={"/images/products/" + picture} alt={name} />
+                <S.ItemDetails>
+                  <S.ItemName>{name}</S.ItemName>
+                  <ProductPrice price={priceUsd} />
+                  <S.ItemQuantity>Quantity: {quantity}</S.ItemQuantity>
+                </S.ItemDetails>
+              </S.Item>
+            )
+          )}
+        </S.ItemList>
+      </div>
+      <Link href="/cart">
+        <S.CartButton data-cy={CypressFields.CartGoToShopping}>Go to Shopping Cart</S.CartButton>
+      </Link>
+    </S.CartDropdown>
+  ) : null;
+};
+
+export default CartDropdown;
diff --git a/src/frontend/components/CartDropdown/index.ts b/src/frontend/components/CartDropdown/index.ts
new file mode 100644
index 0000000..559fff3
--- /dev/null
+++ b/src/frontend/components/CartDropdown/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './CartDropdown';
diff --git a/src/frontend/components/CartIcon/CartIcon.styled.ts b/src/frontend/components/CartIcon/CartIcon.styled.ts
new file mode 100644
index 0000000..d76e4fd
--- /dev/null
+++ b/src/frontend/components/CartIcon/CartIcon.styled.ts
@@ -0,0 +1,39 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Image from 'next/image';
+import styled from 'styled-components';
+
+export const CartIcon = styled.a`
+  position: relative;
+  display: block;
+  margin-left: 25px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+
+export const Icon = styled(Image).attrs({
+  width: '24',
+  height: '24',
+})`
+  margin-bottom: 3px;
+`;
+
+export const ItemsCount = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 9px;
+  left: 15px;
+  width: 15px;
+  height: 15px;
+  font-size: ${({ theme }) => theme.sizes.nano};
+  border-radius: 50%;
+  border: 1px solid ${({ theme }) => theme.colors.white};
+  color: ${({ theme }) => theme.colors.white};
+  background: ${({ theme }) => theme.colors.otelRed};
+`;
diff --git a/src/frontend/components/CartIcon/CartIcon.tsx b/src/frontend/components/CartIcon/CartIcon.tsx
new file mode 100644
index 0000000..8ec128a
--- /dev/null
+++ b/src/frontend/components/CartIcon/CartIcon.tsx
@@ -0,0 +1,27 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+import { CypressFields } from '../../utils/enums/CypressFields';
+import { useCart } from '../../providers/Cart.provider';
+import CartDropdown from '../CartDropdown';
+import * as S from './CartIcon.styled';
+
+const CartIcon = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    cart: { items },
+  } = useCart();
+
+  return (
+    <>
+      <S.CartIcon data-cy={CypressFields.CartIcon} onClick={() => setIsOpen(true)}>
+        <S.Icon src="/icons/CartIcon.svg" alt="Cart icon" title="Cart" />
+        {!!items.length && <S.ItemsCount data-cy={CypressFields.CartItemCount}>{items.length}</S.ItemsCount>}
+      </S.CartIcon>
+      <CartDropdown productList={items} isOpen={isOpen} onClose={() => setIsOpen(false)} />
+    </>
+  );
+};
+
+export default CartIcon;
diff --git a/src/frontend/components/CartIcon/index.ts b/src/frontend/components/CartIcon/index.ts
new file mode 100644
index 0000000..ffb59cc
--- /dev/null
+++ b/src/frontend/components/CartIcon/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './CartIcon';
diff --git a/src/frontend/components/CartItems/CartItem.tsx b/src/frontend/components/CartItems/CartItem.tsx
new file mode 100644
index 0000000..e78bb7a
--- /dev/null
+++ b/src/frontend/components/CartItems/CartItem.tsx
@@ -0,0 +1,40 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Link from 'next/link';
+import { Product } from '../../protos/demo';
+import ProductPrice from '../ProductPrice';
+import * as S from './CartItems.styled';
+
+interface IProps {
+  product: Product;
+  quantity: number;
+}
+
+const CartItem = ({
+  product: { id, name, picture, priceUsd = { units: 0, nanos: 0, currencyCode: 'USD' } },
+  quantity,
+}: IProps) => {
+  return (
+    <S.CartItem>
+      <Link href={`/product/${id}`}>
+        <S.NameContainer>
+          <S.CartItemImage alt={name} src={"/images/products/" + picture} />
+          <p>{name}</p>
+        </S.NameContainer>
+      </Link>
+      <S.CartItemDetails>
+        <p>{quantity}</p>
+      </S.CartItemDetails>
+      <S.CartItemDetails>
+        <S.PriceContainer>
+          <p>
+            <ProductPrice price={priceUsd} />
+          </p>
+        </S.PriceContainer>
+      </S.CartItemDetails>
+    </S.CartItem>
+  );
+};
+
+export default CartItem;
diff --git a/src/frontend/components/CartItems/CartItems.styled.ts b/src/frontend/components/CartItems/CartItems.styled.ts
new file mode 100644
index 0000000..a1a5fbc
--- /dev/null
+++ b/src/frontend/components/CartItems/CartItems.styled.ts
@@ -0,0 +1,79 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const CartItems = styled.section`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const CardItemsHeader = styled.div`
+  display: grid;
+  grid-template-columns: 150px 100px auto;
+  gap: 24px;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    grid-template-columns: 1fr auto auto;
+  }
+`;
+
+export const CartItemImage = styled.img`
+  width: 100%;
+  height: auto;
+  border-radius: 5px;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    width: 120px;
+    height: 120px;
+  }
+`;
+
+export const CartItem = styled.div`
+  display: grid;
+  grid-template-columns: 150px 100px auto;
+  gap: 24px;
+  padding: 24px 0;
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.textLightGray};
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    grid-template-columns: 1fr auto auto;
+  }
+`;
+
+export const CartItemDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+export const NameContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-direction: column;
+  cursor: pointer;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    flex-direction: row;
+    gap: 24px;
+  }
+`;
+
+export const PriceContainer = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`;
+
+export const DataRow = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 24px 0;
+  gap: 24px;
+`;
+
+export const TotalText = styled.h3`
+  margin: 0;
+`;
diff --git a/src/frontend/components/CartItems/CartItems.tsx b/src/frontend/components/CartItems/CartItems.tsx
new file mode 100644
index 0000000..05e0279
--- /dev/null
+++ b/src/frontend/components/CartItems/CartItems.tsx
@@ -0,0 +1,82 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useMemo } from 'react';
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import ApiGateway from '../../gateways/Api.gateway';
+import { Address, Money } from '../../protos/demo';
+import { useCurrency } from '../../providers/Currency.provider';
+import { IProductCartItem } from '../../types/Cart';
+import ProductPrice from '../ProductPrice';
+import CartItem from './CartItem';
+import * as S from './CartItems.styled';
+
+interface IProps {
+  productList: IProductCartItem[];
+  shouldShowPrice?: boolean;
+}
+
+const CartItems = ({ productList, shouldShowPrice = true }: IProps) => {
+  const { selectedCurrency } = useCurrency();
+  const address: Address = {
+    streetAddress: '1600 Amphitheatre Parkway',
+    city: 'Mountain View',
+    state: 'CA',
+    country: 'United States',
+    zipCode: '94043',
+  };
+
+  const queryKey = ['shipping', productList, selectedCurrency, address];
+  const queryFn = () => ApiGateway.getShippingCost(productList, selectedCurrency, address);
+  const queryOptions: UseQueryOptions<Money, Error> = {
+    queryKey,
+    queryFn,
+  };
+  const { data: shippingConst = { units: 0, currencyCode: 'USD', nanos: 0 } } = useQuery(queryOptions);
+
+  const total = useMemo<Money>(() => {
+    const nanoSum =
+      productList.reduce((acc, { product: { priceUsd: { nanos = 0 } = {} } }) => acc + Number(nanos), 0) +
+        shippingConst?.nanos || 0;
+    const nanoExceed = Math.floor(nanoSum / 1000000000);
+
+    const unitSum =
+      productList.reduce((acc, { product: { priceUsd: { units = 0 } = {} } }) => acc + Number(units), 0) +
+        (shippingConst?.units || 0) + nanoExceed;
+
+    return {
+      units: unitSum,
+      currencyCode: selectedCurrency,
+      nanos: nanoSum % 1000000000,
+    };
+  }, [shippingConst?.units, shippingConst?.nanos, productList, selectedCurrency]);
+
+  return (
+    <S.CartItems>
+      <S.CardItemsHeader>
+        <label>Product</label>
+        <label>Quantity</label>
+        <label>Price</label>
+      </S.CardItemsHeader>
+      {productList.map(({ productId, product, quantity }) => (
+        <CartItem key={productId} product={product} quantity={quantity} />
+      ))}
+      {shouldShowPrice && (
+        <>
+          <S.DataRow>
+            <span>Shipping</span>
+            <ProductPrice price={shippingConst} />
+          </S.DataRow>
+          <S.DataRow>
+            <S.TotalText>Total</S.TotalText>
+            <S.TotalText>
+              <ProductPrice price={total} />
+            </S.TotalText>
+          </S.DataRow>
+        </>
+      )}
+    </S.CartItems>
+  );
+};
+
+export default CartItems;
diff --git a/src/frontend/components/CartItems/index.ts b/src/frontend/components/CartItems/index.ts
new file mode 100644
index 0000000..ad419fa
--- /dev/null
+++ b/src/frontend/components/CartItems/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './CartItems';
diff --git a/src/frontend/components/CheckoutForm/CheckoutForm.styled.ts b/src/frontend/components/CheckoutForm/CheckoutForm.styled.ts
new file mode 100644
index 0000000..c11ebc5
--- /dev/null
+++ b/src/frontend/components/CheckoutForm/CheckoutForm.styled.ts
@@ -0,0 +1,59 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+import Button from '../Button';
+
+export const CheckoutForm = styled.form``;
+
+export const StateRow = styled.div`
+  display: grid;
+  grid-template-columns: 35% 55%;
+  gap: 10%;
+`;
+
+export const Title = styled.h1`
+  margin: 0;
+  margin-bottom: 24px;
+`;
+
+export const CardRow = styled.div`
+  display: grid;
+  grid-template-columns: 35% 35% 20%;
+  gap: 5%;
+`;
+
+export const SubmitContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  flex-direction: column-reverse;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    flex-direction: row;
+    justify-content: end;
+    align-items: center;
+    margin-top: 67px;
+  }
+`;
+
+export const CartButton = styled(Button)`
+  padding: 16px 35px;
+  font-weight: ${({ theme }) => theme.fonts.regular};
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    width: inherit;
+  }
+`;
+
+export const EmptyCartButton = styled(Button)`
+  font-weight: ${({ theme }) => theme.fonts.regular};
+  color: ${({ theme }) => theme.colors.otelRed};
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    width: inherit;
+  }
+`;
diff --git a/src/frontend/components/CheckoutForm/CheckoutForm.tsx b/src/frontend/components/CheckoutForm/CheckoutForm.tsx
new file mode 100644
index 0000000..1c8e5c9
--- /dev/null
+++ b/src/frontend/components/CheckoutForm/CheckoutForm.tsx
@@ -0,0 +1,202 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Link from 'next/link';
+import { useCallback, useState } from 'react';
+import { CypressFields } from '../../utils/enums/CypressFields';
+import Input from '../Input';
+import * as S from './CheckoutForm.styled';
+
+const currentYear = new Date().getFullYear();
+const yearList = Array.from(new Array(20), (v, i) => i + currentYear);
+
+export interface IFormData {
+  email: string;
+  streetAddress: string;
+  city: string;
+  state: string;
+  country: string;
+  zipCode: string;
+  creditCardNumber: string;
+  creditCardCvv: number;
+  creditCardExpirationYear: number;
+  creditCardExpirationMonth: number;
+}
+
+interface IProps {
+  onSubmit(formData: IFormData): void;
+}
+
+const CheckoutForm = ({ onSubmit }: IProps) => {
+  const [
+    {
+      email,
+      streetAddress,
+      city,
+      state,
+      country,
+      zipCode,
+      creditCardCvv,
+      creditCardExpirationMonth,
+      creditCardExpirationYear,
+      creditCardNumber,
+    },
+    setFormData,
+  ] = useState<IFormData>({
+    email: 'someone@example.com',
+    streetAddress: '1600 Amphitheatre Parkway',
+    city: 'Mountain View',
+    state: 'CA',
+    country: 'United States',
+    zipCode: "94043",
+    creditCardNumber: '4432-8015-6152-0454',
+    creditCardCvv: 672,
+    creditCardExpirationYear: 2030,
+    creditCardExpirationMonth: 1,
+  });
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    setFormData(formData => ({
+      ...formData,
+      [e.target.name]: e.target.value,
+    }));
+  }, []);
+
+  return (
+    <S.CheckoutForm
+      onSubmit={(event: { preventDefault: () => void; }) => {
+        event.preventDefault();
+        onSubmit({
+          email,
+          streetAddress,
+          city,
+          state,
+          country,
+          zipCode,
+          creditCardCvv,
+          creditCardExpirationMonth,
+          creditCardExpirationYear,
+          creditCardNumber,
+        });
+      }}
+    >
+      <S.Title>Shipping Address</S.Title>
+
+      <Input
+        label="E-mail Address"
+        type="email"
+        id="email"
+        name="email"
+        value={email}
+        required
+        onChange={handleChange}
+      />
+      <Input
+        label="Street Address"
+        type="text"
+        name="streetAddress"
+        id="street_address"
+        value={streetAddress}
+        onChange={handleChange}
+        required
+      />
+      <Input
+        label="Zip Code"
+        type="text"
+        name="zipCode"
+        id="zip_code"
+        value={zipCode}
+        onChange={handleChange}
+        required
+      />
+      <Input label="City" type="text" name="city" id="city" value={city} required onChange={handleChange} />
+
+      <S.StateRow>
+        <Input label="State" type="text" name="state" id="state" value={state} required onChange={handleChange} />
+        <Input
+          label="Country"
+          type="text"
+          id="country"
+          placeholder="Country Name"
+          name="country"
+          value={country}
+          onChange={handleChange}
+          required
+        />
+      </S.StateRow>
+
+      <div>
+        <S.Title>Payment Method</S.Title>
+      </div>
+
+      <Input
+        type="text"
+        label="Credit Card Number"
+        id="credit_card_number"
+        name="creditCardNumber"
+        placeholder="0000-0000-0000-0000"
+        value={creditCardNumber}
+        onChange={handleChange}
+        required
+        pattern="\d{4}-\d{4}-\d{4}-\d{4}"
+      />
+
+      <S.CardRow>
+        <Input
+          label="Month"
+          name="creditCardExpirationMonth"
+          id="credit_card_expiration_month"
+          value={creditCardExpirationMonth}
+          onChange={handleChange}
+          type="select"
+        >
+          <option value="1">January</option>
+          <option value="2">February</option>
+          <option value="3">March</option>
+          <option value="4">April</option>
+          <option value="5">May</option>
+          <option value="6">June</option>
+          <option value="7">July</option>
+          <option value="8">August</option>
+          <option value="9">September</option>
+          <option value="10">October</option>
+          <option value="11">November</option>
+          <option value="12">January</option>
+        </Input>
+        <Input
+          label="Year"
+          name="creditCardExpirationYear"
+          id="credit_card_expiration_year"
+          value={creditCardExpirationYear}
+          onChange={handleChange}
+          type="select"
+        >
+          {yearList.map(year => (
+            <option value={year} key={year}>
+              {year}
+            </option>
+          ))}
+        </Input>
+        <Input
+          label="CVV"
+          type="password"
+          id="credit_card_cvv"
+          name="creditCardCvv"
+          value={creditCardCvv}
+          required
+          pattern="\d{3}"
+          onChange={handleChange}
+        />
+      </S.CardRow>
+
+      <S.SubmitContainer>
+        <Link href="/">
+          <S.CartButton $type="secondary">Continue Shopping</S.CartButton>
+        </Link>
+        <S.CartButton data-cy={CypressFields.CheckoutPlaceOrder} type="submit">Place Order</S.CartButton>
+      </S.SubmitContainer>
+    </S.CheckoutForm>
+  );
+};
+
+export default CheckoutForm;
diff --git a/src/frontend/components/CheckoutForm/index.ts b/src/frontend/components/CheckoutForm/index.ts
new file mode 100644
index 0000000..897f43b
--- /dev/null
+++ b/src/frontend/components/CheckoutForm/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './CheckoutForm';
diff --git a/src/frontend/components/CheckoutItem/CheckoutItem.styled.ts b/src/frontend/components/CheckoutItem/CheckoutItem.styled.ts
new file mode 100644
index 0000000..013250e
--- /dev/null
+++ b/src/frontend/components/CheckoutItem/CheckoutItem.styled.ts
@@ -0,0 +1,90 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Image from 'next/image';
+import styled from 'styled-components';
+
+export const CheckoutItem = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  padding: 25px;
+  border-radius: 5px;
+  border: 1px solid ${({ theme }) => theme.colors.lightBorderGray};
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    grid-template-columns: 40% 40% 1fr;
+  }
+`;
+
+export const ItemDetails = styled.div`
+  display: flex;
+  gap: 25px;
+  padding-bottom: 25px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.lightBorderGray};
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    padding-bottom: 0;
+    padding-right: 25px;
+    border-bottom: none;
+    border-right: 1px solid ${({ theme }) => theme.colors.lightBorderGray};
+  }
+`;
+
+export const Details = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  span,
+  p {
+    margin: 0;
+    font-weight: ${({ theme }) => theme.fonts.regular};
+  }
+`;
+
+export const ItemName = styled.h5`
+  margin: 0;
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+`;
+
+export const ShippingData = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 25px 0;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.lightBorderGray};
+
+  p {
+    margin: 0;
+    font-weight: ${({ theme }) => theme.fonts.light};
+  }
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    padding: 0 25px;
+    border-bottom: none;
+    border-right: 1px solid ${({ theme }) => theme.colors.lightBorderGray};
+  }
+`;
+
+export const Status = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 25px;
+  gap: 10px;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    padding-top: 0;
+  }
+`;
+
+export const ItemImage = styled(Image).attrs({
+  width: '80',
+  height: '80',
+})`
+  border-radius: 5px;
+`;
+
+export const SeeMore = styled.a`
+  color: ${({ theme }) => theme.colors.otelBlue};
+`;
diff --git a/src/frontend/components/CheckoutItem/CheckoutItem.tsx b/src/frontend/components/CheckoutItem/CheckoutItem.tsx
new file mode 100644
index 0000000..8fd0ecf
--- /dev/null
+++ b/src/frontend/components/CheckoutItem/CheckoutItem.tsx
@@ -0,0 +1,61 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Image from 'next/image';
+import { useState } from 'react';
+import { CypressFields } from '../../utils/enums/CypressFields';
+import { Address } from '../../protos/demo';
+import { IProductCheckoutItem } from '../../types/Cart';
+import ProductPrice from '../ProductPrice';
+import * as S from './CheckoutItem.styled';
+
+interface IProps {
+  checkoutItem: IProductCheckoutItem;
+  address: Address;
+}
+
+const CheckoutItem = ({
+  checkoutItem: {
+    item: {
+      quantity,
+      product: { picture, name },
+    },
+    cost = { currencyCode: 'USD', units: 0, nanos: 0 },
+  },
+  address: { streetAddress = '', city = '', state = '', zipCode = '', country = '' },
+}: IProps) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <S.CheckoutItem data-cy={CypressFields.CheckoutItem}>
+      <S.ItemDetails>
+        <S.ItemImage src={"/images/products/" + picture} alt={name}/>
+        <S.Details>
+          <S.ItemName>{name}</S.ItemName>
+          <p>Quantity: {quantity}</p>
+          <p>
+            Total: <ProductPrice price={cost} />
+          </p>
+        </S.Details>
+      </S.ItemDetails>
+      <S.ShippingData>
+        <S.ItemName>Shipping Data</S.ItemName>
+        <p>Street: {streetAddress}</p>
+        {!isCollapsed && <S.SeeMore onClick={() => setIsCollapsed(true)}>See More</S.SeeMore>}
+        {isCollapsed && (
+          <>
+            <p>City: {city}</p>
+            <p>State: {state}</p>
+            <p>Zip Code: {zipCode}</p>
+            <p>Country: {country}</p>
+          </>
+        )}
+      </S.ShippingData>
+      <S.Status>
+        <Image src="/icons/Check.svg" alt="check" height="14" width="16" /> <span>Done</span>
+      </S.Status>
+    </S.CheckoutItem>
+  );
+};
+
+export default CheckoutItem;
diff --git a/src/frontend/components/CheckoutItem/index.ts b/src/frontend/components/CheckoutItem/index.ts
new file mode 100644
index 0000000..f4c6b78
--- /dev/null
+++ b/src/frontend/components/CheckoutItem/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './CheckoutItem';
diff --git a/src/frontend/components/CurrencySwitcher/CurrencySwitcher.styled.ts b/src/frontend/components/CurrencySwitcher/CurrencySwitcher.styled.ts
new file mode 100644
index 0000000..6ea0669
--- /dev/null
+++ b/src/frontend/components/CurrencySwitcher/CurrencySwitcher.styled.ts
@@ -0,0 +1,65 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const CurrencySwitcher = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-left: 40px;
+  color: #605f64;
+
+  &::-webkit-input-placeholder,
+  &::-moz-placeholder,
+  :-ms-input-placeholder,
+  :-moz-placeholder {
+    font-size: 12px;
+    color: #605f64;
+  }
+`;
+
+export const SelectedConcurrency = styled.span`
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  text-align: center;
+  font-weight: ${({ theme }) => theme.fonts.regular};
+
+  position: relative;
+  left: 35px;
+  width: 20px;
+  display: inline-block;
+`;
+
+export const Arrow = styled.img.attrs({
+  src: '/icons/Chevron.svg',
+  alt: 'arrow',
+})`
+  position: absolute;
+  right: 15px;
+  width: 12px;
+  height: 17px;
+`;
+
+export const Select = styled.select`
+  -webkit-appearance: none;
+  -webkit-border-radius: 0px;
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  background: transparent;
+  font-weight: ${({ theme }) => theme.fonts.regular};
+  border: 1px solid ${({ theme }) => theme.colors.borderGray};
+  width: 130px;
+  height: 40px;
+  flex-shrink: 0;
+  padding: 1px 0 0 45px;
+  font-size: 16px;
+  border-radius: 10px;
+`;
diff --git a/src/frontend/components/CurrencySwitcher/CurrencySwitcher.tsx b/src/frontend/components/CurrencySwitcher/CurrencySwitcher.tsx
new file mode 100644
index 0000000..0e3b174
--- /dev/null
+++ b/src/frontend/components/CurrencySwitcher/CurrencySwitcher.tsx
@@ -0,0 +1,37 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useMemo } from 'react';
+import getSymbolFromCurrency from 'currency-symbol-map';
+import { useCurrency } from '../../providers/Currency.provider';
+import * as S from './CurrencySwitcher.styled';
+import { CypressFields } from '../../utils/enums/CypressFields';
+
+const CurrencySwitcher = () => {
+  const { currencyCodeList, setSelectedCurrency, selectedCurrency } = useCurrency();
+
+  const currencySymbol = useMemo(() => getSymbolFromCurrency(selectedCurrency), [selectedCurrency]);
+
+  return (
+    <S.CurrencySwitcher>
+      <S.Container>
+        <S.SelectedConcurrency>{currencySymbol}</S.SelectedConcurrency>
+        <S.Select
+          name="currency_code"
+          onChange={(event: { target: { value: string; }; }) => setSelectedCurrency(event.target.value)}
+          value={selectedCurrency}
+          data-cy={CypressFields.CurrencySwitcher}
+        >
+          {currencyCodeList.map(currencyCode => (
+            <option key={currencyCode} value={currencyCode}>
+              {currencyCode}
+            </option>
+          ))}
+        </S.Select>
+        <S.Arrow />
+      </S.Container>
+    </S.CurrencySwitcher>
+  );
+};
+
+export default CurrencySwitcher;
diff --git a/src/frontend/components/CurrencySwitcher/index.ts b/src/frontend/components/CurrencySwitcher/index.ts
new file mode 100644
index 0000000..3a0af9c
--- /dev/null
+++ b/src/frontend/components/CurrencySwitcher/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './CurrencySwitcher';
diff --git a/src/frontend/components/Footer/Footer.styled.ts b/src/frontend/components/Footer/Footer.styled.ts
new file mode 100644
index 0000000..513039b
--- /dev/null
+++ b/src/frontend/components/Footer/Footer.styled.ts
@@ -0,0 +1,16 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const Footer = styled.footer`
+  position: relative;
+  padding: 65px 9%;
+  background-color: ${({ theme }) => theme.colors.otelGray};
+
+  * {
+    color: ${({ theme }) => theme.colors.white};
+    font-size: ${({ theme }) => theme.sizes.dSmall};
+    font-weight: ${({ theme }) => theme.fonts.regular};
+  }
+`;
diff --git a/src/frontend/components/Footer/Footer.tsx b/src/frontend/components/Footer/Footer.tsx
new file mode 100644
index 0000000..8831271
--- /dev/null
+++ b/src/frontend/components/Footer/Footer.tsx
@@ -0,0 +1,37 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useState } from 'react';
+import * as S from './Footer.styled';
+import SessionGateway from '../../gateways/Session.gateway';
+import { CypressFields } from '../../utils/enums/CypressFields';
+import PlatformFlag from '../PlatformFlag';
+
+const currentYear = new Date().getFullYear();
+
+const { userId } = SessionGateway.getSession();
+
+const Footer = () => {
+  const [sessionId, setSessionId] = useState('');
+
+  useEffect(() => {
+    setSessionId(userId);
+  }, []);
+
+  return (
+    <S.Footer>
+      <div>
+        <p>This website is hosted for demo purpose only. It is not an actual shop.</p>
+        <p>
+          <span data-cy={CypressFields.SessionId}>session-id: {sessionId}</span>
+        </p>
+      </div>
+      <p>
+        @ {currentYear} OpenTelemetry (<a href="https://github.com/open-telemetry/opentelemetry-demo">Source Code</a>)
+      </p>
+      <PlatformFlag />
+    </S.Footer>
+  );
+};
+
+export default Footer;
diff --git a/src/frontend/components/Footer/index.ts b/src/frontend/components/Footer/index.ts
new file mode 100644
index 0000000..0961dac
--- /dev/null
+++ b/src/frontend/components/Footer/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './Footer';
diff --git a/src/frontend/components/Header/Header.styled.ts b/src/frontend/components/Header/Header.styled.ts
new file mode 100644
index 0000000..39d6240
--- /dev/null
+++ b/src/frontend/components/Header/Header.styled.ts
@@ -0,0 +1,55 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Link from 'next/link';
+import styled from 'styled-components';
+
+export const Header = styled.header`
+  background-color: #853b5c;
+  color: white;
+`;
+
+export const NavBar = styled.nav`
+  height: 80px;
+  background-color: white;
+  font-size: 15px;
+  color: #b4b2bb;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.textGray};
+  z-index: 1;
+  padding: 0;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    height: 100px;
+  }
+`;
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 20px;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    padding: 25px 100px;
+  }
+`;
+
+export const NavBarBrand = styled(Link)`
+  display: flex;
+  align-items: center;
+  padding: 0;
+`;
+
+export const BrandImg = styled.img.attrs({
+  src: '/images/opentelemetry-demo-logo.png',
+})`
+  width: 280px;
+  height: auto;
+`;
+
+export const Controls = styled.div`
+  display: flex;
+  height: 60px;
+`;
diff --git a/src/frontend/components/Header/Header.tsx b/src/frontend/components/Header/Header.tsx
new file mode 100644
index 0000000..857fc7b
--- /dev/null
+++ b/src/frontend/components/Header/Header.tsx
@@ -0,0 +1,26 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import CartIcon from '../CartIcon';
+import CurrencySwitcher from '../CurrencySwitcher';
+import * as S from './Header.styled';
+
+const Header = () => {
+  return (
+    <S.Header>
+      <S.NavBar>
+        <S.Container>
+          <S.NavBarBrand href="/">
+            <S.BrandImg />
+          </S.NavBarBrand>
+          <S.Controls>
+            <CurrencySwitcher />
+            <CartIcon />
+          </S.Controls>
+        </S.Container>
+      </S.NavBar>
+    </S.Header>
+  );
+};
+
+export default Header;
diff --git a/src/frontend/components/Header/index.ts b/src/frontend/components/Header/index.ts
new file mode 100644
index 0000000..4afb2c7
--- /dev/null
+++ b/src/frontend/components/Header/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export {default} from './Header';
diff --git a/src/frontend/components/Input/Input.styled.ts b/src/frontend/components/Input/Input.styled.ts
new file mode 100644
index 0000000..d2078d1
--- /dev/null
+++ b/src/frontend/components/Input/Input.styled.ts
@@ -0,0 +1,54 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const Input = styled.input`
+  width: -webkit-fill-available;
+  border: none;
+  padding: 16px;
+  outline: none;
+
+  font-weight: ${({ theme }) => theme.fonts.regular};
+  font-size: ${({ theme }) => theme.sizes.dMedium};
+
+  border-radius: 10px;
+  background: #f9f9f9;
+  border: 1px solid #cacaca;
+`;
+
+export const InputLabel = styled.p`
+  font-size: ${({ theme }) => theme.sizes.dMedium};
+  font-weight: ${({ theme }) => theme.fonts.semiBold};
+  margin: 0;
+  margin-bottom: 15px;
+`;
+
+export const Select = styled.select`
+  width: 100%;
+  border: none;
+
+  padding: 16px;
+  font-weight: ${({ theme }) => theme.fonts.regular};
+  font-size: ${({ theme }) => theme.sizes.dMedium};
+
+  border-radius: 10px;
+  background: #f9f9f9;
+  border: 1px solid #cacaca;
+`;
+
+export const InputRow = styled.div`
+  position: relative;
+  margin-bottom: 24px;
+`;
+
+export const Arrow = styled.img.attrs({
+  src: '/icons/Chevron.svg',
+  alt: 'arrow',
+})`
+  position: absolute;
+  right: 20px;
+  width: 10px;
+  height: 5px;
+  top: 64px;
+`;
diff --git a/src/frontend/components/Input/Input.tsx b/src/frontend/components/Input/Input.tsx
new file mode 100644
index 0000000..14782b0
--- /dev/null
+++ b/src/frontend/components/Input/Input.tsx
@@ -0,0 +1,31 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react';
+import * as S from './Input.styled';
+
+interface IProps extends InputHTMLAttributes<HTMLSelectElement | HTMLInputElement> {
+  type: HTMLInputTypeAttribute | 'select';
+  children?: React.ReactNode;
+  label: string;
+}
+
+const Input = ({ type, id = '', children, label, ...props }: IProps) => {
+  return (
+    <S.InputRow>
+      <S.InputLabel>{label}</S.InputLabel>
+      {type === 'select' ? (
+        <>
+          <S.Select id={id} {...props}>
+            {children}
+          </S.Select>
+          <S.Arrow />
+        </>
+      ) : (
+        <S.Input id={id} {...props} type={type} />
+      )}
+    </S.InputRow>
+  );
+};
+
+export default Input;
diff --git a/src/frontend/components/Input/index.ts b/src/frontend/components/Input/index.ts
new file mode 100644
index 0000000..f1d0923
--- /dev/null
+++ b/src/frontend/components/Input/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export {default} from './Input';
diff --git a/src/frontend/components/Layout/Layout.tsx b/src/frontend/components/Layout/Layout.tsx
new file mode 100644
index 0000000..f4e2da8
--- /dev/null
+++ b/src/frontend/components/Layout/Layout.tsx
@@ -0,0 +1,19 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Header from '../Header';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const Layout = ({ children }: IProps) => {
+  return (
+    <>
+      <Header />
+      <main>{children}</main>
+    </>
+  );
+};
+
+export default Layout;
diff --git a/src/frontend/components/Layout/index.ts b/src/frontend/components/Layout/index.ts
new file mode 100644
index 0000000..8812dad
--- /dev/null
+++ b/src/frontend/components/Layout/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export {default} from './Layout';
diff --git a/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts b/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts
new file mode 100644
index 0000000..3ac0733
--- /dev/null
+++ b/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts
@@ -0,0 +1,25 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const Block = styled.div`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100px;
+  height: 27px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: ${({ theme }) => theme.sizes.mSmall};
+  font-weight: ${({ theme }) => theme.fonts.regular};
+  color: ${({ theme }) => theme.colors.white};
+  background: ${({ theme }) => theme.colors.otelYellow};
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    width: 190px;
+    height: 50px;
+    font-size: ${({ theme }) => theme.sizes.dSmall};
+  }
+`;
diff --git a/src/frontend/components/PlatformFlag/PlatformFlag.tsx b/src/frontend/components/PlatformFlag/PlatformFlag.tsx
new file mode 100644
index 0000000..80a01ca
--- /dev/null
+++ b/src/frontend/components/PlatformFlag/PlatformFlag.tsx
@@ -0,0 +1,16 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import * as S from './PlatformFlag.styled';
+
+const { NEXT_PUBLIC_PLATFORM = 'local' } = typeof window !== 'undefined' ? window.ENV : {};
+
+const platform = NEXT_PUBLIC_PLATFORM;
+
+const PlatformFlag = () => {
+  return (
+    <S.Block>{platform}</S.Block>
+  );
+};
+
+export default PlatformFlag;
diff --git a/src/frontend/components/PlatformFlag/index.ts b/src/frontend/components/PlatformFlag/index.ts
new file mode 100644
index 0000000..ea744bb
--- /dev/null
+++ b/src/frontend/components/PlatformFlag/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './PlatformFlag';
diff --git a/src/frontend/components/ProductCard/ProductCard.styled.ts b/src/frontend/components/ProductCard/ProductCard.styled.ts
new file mode 100644
index 0000000..50d2f7a
--- /dev/null
+++ b/src/frontend/components/ProductCard/ProductCard.styled.ts
@@ -0,0 +1,36 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+import RouterLink from 'next/link';
+
+export const Link = styled(RouterLink)`
+  text-decoration: none;
+`;
+
+export const Image = styled.div<{ $src: string }>`
+  width: 100%;
+  height: 150px;
+  background: url(${({ $src }) => $src}) no-repeat center;
+  background-size: 100% auto;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    height: 300px;
+  }
+`;
+
+export const ProductCard = styled.div`
+  cursor: pointer;
+`;
+
+export const ProductName = styled.p`
+  margin: 0;
+  margin-top: 10px;
+  font-size: ${({ theme }) => theme.sizes.dSmall};
+`;
+
+export const ProductPrice = styled.p`
+  margin: 0;
+  font-size: ${({ theme }) => theme.sizes.dMedium};
+  font-weight: ${({ theme }) => theme.fonts.bold};
+`;
diff --git a/src/frontend/components/ProductCard/ProductCard.tsx b/src/frontend/components/ProductCard/ProductCard.tsx
new file mode 100644
index 0000000..0744e21
--- /dev/null
+++ b/src/frontend/components/ProductCard/ProductCard.tsx
@@ -0,0 +1,65 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { CypressFields } from '../../utils/enums/CypressFields';
+import { Product } from '../../protos/demo';
+import ProductPrice from '../ProductPrice';
+import * as S from './ProductCard.styled';
+import { useState, useEffect } from 'react';
+import { useNumberFlagValue } from '@openfeature/react-sdk';
+
+interface IProps {
+  product: Product;
+}
+
+async function getImageWithHeaders(requestInfo: Request) {
+  const res = await fetch(requestInfo);
+  return await res.blob();
+}
+
+const ProductCard = ({
+  product: {
+    id,
+    picture,
+    name,
+    priceUsd = {
+      currencyCode: 'USD',
+      units: 0,
+      nanos: 0,
+    },
+  },
+}: IProps) => {
+  const imageSlowLoad = useNumberFlagValue('imageSlowLoad', 0);
+  const [imageSrc, setImageSrc] = useState<string>('');
+
+  useEffect(() => {
+    const headers = new Headers();
+    headers.append('x-envoy-fault-delay-request', imageSlowLoad.toString());
+    headers.append('Cache-Control', 'no-cache')
+    const requestInit = {
+      method: "GET",
+      headers: headers
+    };
+    const image_url ='/images/products/' + picture
+    const requestInfo = new Request(image_url, requestInit);
+    getImageWithHeaders(requestInfo).then(blob => {
+      setImageSrc(URL.createObjectURL(blob));
+    });
+  }, [imageSlowLoad, picture]);
+
+  return (
+    <S.Link href={`/product/${id}`}>
+      <S.ProductCard data-cy={CypressFields.ProductCard}>
+        <S.Image $src={imageSrc} />
+        <div>
+          <S.ProductName>{name}</S.ProductName>
+          <S.ProductPrice>
+            <ProductPrice price={priceUsd} />
+          </S.ProductPrice>
+        </div>
+      </S.ProductCard>
+    </S.Link>
+  );
+};
+
+export default ProductCard;
diff --git a/src/frontend/components/ProductCard/index.ts b/src/frontend/components/ProductCard/index.ts
new file mode 100644
index 0000000..ba9de7a
--- /dev/null
+++ b/src/frontend/components/ProductCard/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './ProductCard';
diff --git a/src/frontend/components/ProductList/ProductList.styled.ts b/src/frontend/components/ProductList/ProductList.styled.ts
new file mode 100644
index 0000000..3776404
--- /dev/null
+++ b/src/frontend/components/ProductList/ProductList.styled.ts
@@ -0,0 +1,14 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const ProductList = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    grid-template-columns: repeat(3, auto);
+  }
+`;
diff --git a/src/frontend/components/ProductList/ProductList.tsx b/src/frontend/components/ProductList/ProductList.tsx
new file mode 100644
index 0000000..0546eae
--- /dev/null
+++ b/src/frontend/components/ProductList/ProductList.tsx
@@ -0,0 +1,23 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { CypressFields } from '../../utils/enums/CypressFields';
+import { Product } from '../../protos/demo';
+import ProductCard from '../ProductCard';
+import * as S from './ProductList.styled';
+
+interface IProps {
+  productList: Product[];
+}
+
+const ProductList = ({ productList }: IProps) => {
+  return (
+    <S.ProductList data-cy={CypressFields.ProductList}>
+      {productList.map(product => (
+        <ProductCard key={product.id} product={product} />
+      ))}
+    </S.ProductList>
+  );
+};
+
+export default ProductList;
diff --git a/src/frontend/components/ProductList/index.ts b/src/frontend/components/ProductList/index.ts
new file mode 100644
index 0000000..3ff921c
--- /dev/null
+++ b/src/frontend/components/ProductList/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './ProductList';
diff --git a/src/frontend/components/ProductPrice/ProductPrice.tsx b/src/frontend/components/ProductPrice/ProductPrice.tsx
new file mode 100644
index 0000000..8dc352a
--- /dev/null
+++ b/src/frontend/components/ProductPrice/ProductPrice.tsx
@@ -0,0 +1,31 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useMemo } from 'react';
+import getSymbolFromCurrency from 'currency-symbol-map';
+import { Money } from '../../protos/demo';
+import { useCurrency } from '../../providers/Currency.provider';
+import { CypressFields } from '../../utils/enums/CypressFields';
+
+interface IProps {
+  price: Money;
+}
+
+const ProductPrice = ({ price: { units, currencyCode, nanos } }: IProps) => {
+  const { selectedCurrency } = useCurrency();
+
+  const currencySymbol = useMemo(
+    () => getSymbolFromCurrency(currencyCode) || selectedCurrency,
+    [currencyCode, selectedCurrency]
+  );
+
+  const total = units + nanos / 1000000000;
+
+  return (
+    <span data-cy={CypressFields.ProductPrice}>
+      {currencySymbol} {total.toFixed(2)}
+    </span>
+  );
+};
+
+export default ProductPrice;
diff --git a/src/frontend/components/ProductPrice/index.ts b/src/frontend/components/ProductPrice/index.ts
new file mode 100644
index 0000000..7bbda4a
--- /dev/null
+++ b/src/frontend/components/ProductPrice/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './ProductPrice';
diff --git a/src/frontend/components/Recommendations/Recommendations.styled.ts b/src/frontend/components/Recommendations/Recommendations.styled.ts
new file mode 100644
index 0000000..1667be4
--- /dev/null
+++ b/src/frontend/components/Recommendations/Recommendations.styled.ts
@@ -0,0 +1,39 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const Recommendations = styled.section`
+  display: flex;
+  margin: 40px 0;
+  align-items: center;
+  flex-direction: column;
+`;
+
+export const ProductList = styled.div`
+  display: flex;
+  width: 100%;
+  padding: 0 20px;
+  flex-direction: column;
+  gap: 24px;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+`;
+
+export const TitleContainer = styled.div`
+  border-top: 1px dashed;
+  padding: 40px 0;
+  text-align: center;
+  width: 100%;
+`;
+
+export const Title = styled.h3`
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    font-size: ${({ theme }) => theme.sizes.dLarge};
+  }
+`;
diff --git a/src/frontend/components/Recommendations/Recommendations.tsx b/src/frontend/components/Recommendations/Recommendations.tsx
new file mode 100644
index 0000000..3a5d64f
--- /dev/null
+++ b/src/frontend/components/Recommendations/Recommendations.tsx
@@ -0,0 +1,26 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { CypressFields } from '../../utils/enums/CypressFields';
+import { useAd } from '../../providers/Ad.provider';
+import ProductCard from '../ProductCard';
+import * as S from './Recommendations.styled';
+
+const Recommendations = () => {
+  const { recommendedProductList } = useAd();
+
+  return (
+    <S.Recommendations data-cy={CypressFields.RecommendationList}>
+      <S.TitleContainer>
+        <S.Title>You May Also Like</S.Title>
+      </S.TitleContainer>
+      <S.ProductList>
+        {recommendedProductList.map(product => (
+          <ProductCard key={product.id} product={product} />
+        ))}
+      </S.ProductList>
+    </S.Recommendations>
+  );
+};
+
+export default Recommendations;
diff --git a/src/frontend/components/Recommendations/index.ts b/src/frontend/components/Recommendations/index.ts
new file mode 100644
index 0000000..625afa5
--- /dev/null
+++ b/src/frontend/components/Recommendations/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './Recommendations';
diff --git a/src/frontend/components/Select/Select.styled.ts b/src/frontend/components/Select/Select.styled.ts
new file mode 100644
index 0000000..319ee59
--- /dev/null
+++ b/src/frontend/components/Select/Select.styled.ts
@@ -0,0 +1,31 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const Select = styled.select`
+  width: 100%;
+  height: 45px;
+  border: 1px solid ${({ theme }) => theme.colors.borderGray};
+  padding: 10px 16px;
+  border-radius: 8px;
+  position: relative;
+  width: 100px;
+  cursor: pointer;
+`;
+
+export const SelectContainer = styled.div`
+  position: relative;
+  width: min-content;
+`;
+
+export const Arrow = styled.img.attrs({
+  src: '/icons/Chevron.svg',
+  alt: 'select',
+})`
+  position: absolute;
+  right: 25px;
+  top: 20px;
+  width: 10px;
+  height: 5px;
+`;
diff --git a/src/frontend/components/Select/Select.tsx b/src/frontend/components/Select/Select.tsx
new file mode 100644
index 0000000..a1f7e2a
--- /dev/null
+++ b/src/frontend/components/Select/Select.tsx
@@ -0,0 +1,20 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { InputHTMLAttributes } from 'react';
+import * as S from './Select.styled';
+
+interface IProps extends InputHTMLAttributes<HTMLSelectElement> {
+  children: React.ReactNode;
+}
+
+const Select = ({ children, ...props }: IProps) => {
+  return (
+    <S.SelectContainer>
+      <S.Select {...props}>{children}</S.Select>
+      <S.Arrow />
+    </S.SelectContainer>
+  );
+};
+
+export default Select;
diff --git a/src/frontend/components/Select/index.ts b/src/frontend/components/Select/index.ts
new file mode 100644
index 0000000..2f51fcd
--- /dev/null
+++ b/src/frontend/components/Select/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './Select';