diff --git a/app/onboarding/preferences/page.tsx b/app/onboarding/preferences/page.tsx
index f02e143..cf002b0 100644
--- a/app/onboarding/preferences/page.tsx
+++ b/app/onboarding/preferences/page.tsx
@@ -10,6 +10,7 @@ import {
InlineContainer,
Input,
Rectangle,
+ StyledLink,
Title,
} from '../styles';
@@ -40,11 +41,13 @@ export default function Onboarding() {
Genre
-
-
- Continue
-
-
+
+
+
+ Continue
+
+
+
);
diff --git a/app/onboarding/review/page.tsx b/app/onboarding/review/page.tsx
new file mode 100644
index 0000000..25bb658
--- /dev/null
+++ b/app/onboarding/review/page.tsx
@@ -0,0 +1,59 @@
+import Link from 'next/link';
+import Back from '@/public/images/back.svg';
+import { Background, InlineContainer, Rectangle, StyledLink } from '../styles';
+import {
+ ConfirmButton,
+ ConfirmText,
+ Image,
+ Line,
+ ReviewContainer,
+ SmallText,
+ Title,
+} from './styles';
+
+export default function Review() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Did we get everything?
+ First Name
+ Lorem Ipsum
+ Last Name
+ Lorem Ipsum
+ Phone Number
+ Lorem Ipsum
+
+
+
+ Facility Type
+ Lorem Ipsum
+ Preferred Location
+ Lorem Ipsum
+ Audience
+ Lorem Ipsum
+ Preferred Equipment
+ Lorem Ipsum
+ Type of Act
+ Lorem Ipsum
+ Genre
+ Lorem Ipsum
+
+
+
+ Confirm
+
+
+
+
+
+ );
+}
diff --git a/app/onboarding/review/styles.ts b/app/onboarding/review/styles.ts
new file mode 100644
index 0000000..a3cad9c
--- /dev/null
+++ b/app/onboarding/review/styles.ts
@@ -0,0 +1,73 @@
+'use client';
+
+import NextImage from 'next/image';
+import styled from 'styled-components';
+import { Sans } from '@/styles/fonts';
+import COLORS from '../../../styles/colors';
+
+export const Image = styled(NextImage)`
+ width: 20px;
+ height: 20px;
+ margin-top: 1rem;
+`;
+
+export const Title = styled.h1`
+ font-size: 24px;
+ text-align: start;
+ color: ${COLORS.gray11};
+ margin-top: 0;
+ font-weight: 500;
+ margin-bottom: 28px;
+`;
+
+export const ReviewContainer = styled.main`
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ display: flex;
+ padding: 32px 32px 32px 32px;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ background: #fefdfc;
+ border-radius: 16px;
+ box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
+`;
+
+export const SmallText = styled.text`
+ color: #515151;
+ font-size: 14px;
+ line-height: normal;
+ margin-bottom: 28px;
+`;
+
+export const Line = styled.main`
+ width: 362px;
+ height: 2px;
+ color: black;
+ background: linear-gradient(
+ 90deg,
+ rgba(184, 184, 184, 0) 0%,
+ #b8b8b8 50%,
+ rgba(184, 184, 184, 0) 100%
+ );
+ margin-bottom: 28px;
+`;
+
+export const ConfirmButton = styled.button`
+ display: flex;
+ width: 100%;
+ padding: 12px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 8px;
+ background: ${COLORS.gray12};
+ border-style: solid;
+ border-color: ${COLORS.gray12};
+ cursor: pointer;
+`;
+
+export const ConfirmText = styled.text`
+ ${Sans.style}
+ color: white;
+ font-size: 14px;
+`;
diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts
index 8468a97..a83ecbe 100644
--- a/app/onboarding/styles.ts
+++ b/app/onboarding/styles.ts
@@ -111,4 +111,5 @@ export const ContinueText = styled.text`
export const StyledLink = styled(Link)`
text-decoration: none;
+ width: 100%;
`;
diff --git a/app/onboarding/yay/page.tsx b/app/onboarding/yay/page.tsx
new file mode 100644
index 0000000..4cb2ac7
--- /dev/null
+++ b/app/onboarding/yay/page.tsx
@@ -0,0 +1,30 @@
+/* eslint-disable react/no-unescaped-entities */
+import { Background } from '../styles';
+import {
+ Circle,
+ ContinueButton,
+ ContinueText,
+ InlineContainer,
+ ReviewContainer,
+ Title,
+} from './styles';
+
+export default function Onboarding() {
+ return (
+
+
+
+
+ You're all set!
+
+ Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore.
+
+
+ Continue
+
+
+
+
+ );
+}
diff --git a/app/onboarding/yay/styles.ts b/app/onboarding/yay/styles.ts
new file mode 100644
index 0000000..27a8875
--- /dev/null
+++ b/app/onboarding/yay/styles.ts
@@ -0,0 +1,68 @@
+'use client';
+
+import styled from 'styled-components';
+import { Sans } from '@/styles/fonts';
+import COLORS from '../../../styles/colors';
+
+export const Title = styled.h1`
+ font-size: 24px;
+ text-align: start;
+ color: ${COLORS.gray11};
+ font-weight: 500;
+`;
+
+export const InlineContainer = styled.main`
+ width: 25%;
+ flex-direction: column;
+ margin-top: 2%;
+ margin-bottom: 2%;
+ @media (max-width: 1200px) {
+ width: 30%;
+ }
+ @media (max-width: 768px) {
+ width: 55%;
+ }
+`;
+
+export const Circle = styled.main`
+ width: 85px;
+ height: 85px;
+ flex-shrink: 0;
+ background-color: #f7c1bd;
+ border-radius: 100%;
+ position: relative;
+ top: 60px;
+ z-index: 1;
+`;
+
+export const ReviewContainer = styled.main`
+ position: relative; /* This makes the Circle position relative to this container */
+ display: flex;
+ padding: 60px 32px 32px 32px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: start;
+ gap: 20px;
+ border-radius: 16px;
+ background: var(--bread-1, #fefdfc);
+ box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
+`;
+
+export const ContinueButton = styled.button`
+ display: flex;
+ padding: 12px 16px;
+ justify-content: center;
+ align-items: center;
+ align-self: stretch;
+ border-radius: 99999px;
+ background: var(--gray-12, #202020);
+ border-style: solid;
+ border-color: ${COLORS.gray12};
+ cursor: pointer;
+`;
+
+export const ContinueText = styled.text`
+ ${Sans.style}
+ color: white;
+ font-size: 14px;
+`;