1 files changed, 48 insertions, 0 deletions
diff --git a/src/frontend/pages/index.tsx b/src/frontend/pages/index.tsx
new file mode 100755
index 0000000..6ec2007
--- /dev/null
+++ b/src/frontend/pages/index.tsx
@@ -0,0 +1,48 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { NextPage } from 'next';
+import Head from 'next/head';
+import Footer from '../components/Footer';
+import Layout from '../components/Layout';
+import ProductList from '../components/ProductList';
+import * as S from '../styles/Home.styled';
+import { useQuery } from '@tanstack/react-query';
+import ApiGateway from '../gateways/Api.gateway';
+import Banner from '../components/Banner';
+import { CypressFields } from '../utils/enums/CypressFields';
+import { useCurrency } from '../providers/Currency.provider';
+
+const Home: NextPage = () => {
+  const { selectedCurrency } = useCurrency();
+  const { data: productList = [] } = useQuery({
+    queryKey: ['products', selectedCurrency],
+    queryFn: () => ApiGateway.listProducts(selectedCurrency),
+  });
+
+  return (
+    <Layout>
+      <Head>
+        <title>Otel Demo - Home</title>
+      </Head>
+      <S.Home data-cy={CypressFields.HomePage}>
+        <Banner />
+        <S.Container>
+          <S.Row>
+            <S.Content>
+              <S.HotProducts>
+                <S.HotProductsTitle data-cy={CypressFields.HotProducts} id="hot-products">
+                  Hot Products
+                </S.HotProductsTitle>
+                <ProductList productList={productList} />
+              </S.HotProducts>
+            </S.Content>
+          </S.Row>
+        </S.Container>
+        <Footer />
+      </S.Home>
+    </Layout>
+  );
+};
+
+export default Home;