3 files changed, 84 insertions, 0 deletions
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';