diff --git a/One.svg b/One.svg
new file mode 100644
index 00000000..5f6023b5
--- /dev/null
+++ b/One.svg
@@ -0,0 +1,4 @@
+
diff --git a/Three.svg b/Three.svg
new file mode 100644
index 00000000..d7b09603
--- /dev/null
+++ b/Three.svg
@@ -0,0 +1,4 @@
+
diff --git a/Two.svg b/Two.svg
new file mode 100644
index 00000000..06831c1c
--- /dev/null
+++ b/Two.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/auth/registration/AddressField.tsx b/src/auth/registration/AddressField.tsx
index 6bea8c2b..d2adca8c 100644
--- a/src/auth/registration/AddressField.tsx
+++ b/src/auth/registration/AddressField.tsx
@@ -1,8 +1,12 @@
-import { Box, Divider, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
import { FormikTextField } from "form/FormikHelpers";
import { CountryPicker } from "components/Country/CountryPicker";
+import { MarginedDivider } from "auth/registration/MarginedDivider";
+import { useIsMobile } from "hooks/useIsMobile";
export function AddressField() {
+ const isMobile = useIsMobile();
+
return (
@@ -10,7 +14,7 @@ export function AddressField() {
finished here, your account setup is complete.
-
+
-
+
{error ? (
-
+
We encountered a problem creating your account.
-
+
Please reach out to
selfserve@brave.com
@@ -21,7 +25,7 @@ export function AdvertiserRegistered({ error }: Props) {
) : (
-
+
Thanks for your interest in Brave Ads! Our team will now carefully
review the provided information.
-
+
Once the review process is complete, we will send you an email to
notify you of the approval status and any further steps required.
-
+
In the meantime, check out our{" "}
-
+
advertiser resources
. If you have any questions, please reach out to{" "}
diff --git a/src/auth/registration/MarginedDivider.tsx b/src/auth/registration/MarginedDivider.tsx
new file mode 100644
index 00000000..4ca9c921
--- /dev/null
+++ b/src/auth/registration/MarginedDivider.tsx
@@ -0,0 +1,11 @@
+import { useIsMobile } from "hooks/useIsMobile";
+import { Divider } from "@mui/material";
+
+export function MarginedDivider() {
+ const isMobile = useIsMobile();
+ return (
+
+ );
+}
diff --git a/src/auth/registration/NameField.tsx b/src/auth/registration/NameField.tsx
index b500af85..bce9d986 100644
--- a/src/auth/registration/NameField.tsx
+++ b/src/auth/registration/NameField.tsx
@@ -1,5 +1,6 @@
-import { Box, Divider, Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
import { FormikTextField } from "form/FormikHelpers";
+import { MarginedDivider } from "auth/registration/MarginedDivider";
export function NameField() {
return (
@@ -9,7 +10,7 @@ export function NameField() {
setup with your account. First, we’ll need your info.
-
+
},
- { label: "Your business’s information", component: },
+ { label: `Your business's information`, component: },
];
return (
-
-
+
+
{steps[activeStep].label}
diff --git a/src/auth/registration/types.ts b/src/auth/registration/types.ts
index ec887b50..7eac0e34 100644
--- a/src/auth/registration/types.ts
+++ b/src/auth/registration/types.ts
@@ -31,3 +31,10 @@ export const initialValues: RegistrationForm = {
zipcode: "",
},
};
+
+export const GradientText = {
+ backgroundImage:
+ "linear-gradient(96.46deg, #FF2869 -4.13%, #930BFE 82.88%), linear-gradient(0deg, #111317, #111317);",
+ backgroundClip: "text",
+ color: "transparent",
+};
diff --git a/src/auth/views/LandingPage.tsx b/src/auth/views/LandingPage.tsx
index 5a9850e6..0b0605ce 100644
--- a/src/auth/views/LandingPage.tsx
+++ b/src/auth/views/LandingPage.tsx
@@ -4,16 +4,13 @@ import { Box, Button, Link, Stack, Typography } from "@mui/material";
import goals from "../../../images.svg";
import { useIsAuthenticated } from "auth/hooks/queries/useIsAuthenticated";
import { Link as RouterLink } from "react-router-dom";
-
-const GradientText = {
- backgroundImage:
- "linear-gradient(96.46deg, #FF2869 -4.13%, #930BFE 82.88%), linear-gradient(0deg, #111317, #111317);",
- backgroundClip: "text",
- color: "transparent",
-};
+import { useIsMobile } from "hooks/useIsMobile";
+import { GradientText } from "auth/registration/types";
+import { MobileAdsBenefits } from "auth/views/MobileAdsBenefits";
export function LandingPage() {
const isAuthenticated = useIsAuthenticated();
+ const isMobile = useIsMobile();
return (
@@ -24,30 +21,35 @@ export function LandingPage() {
spacing={10}
justifyContent="center"
>
-
-
-
+
+
+
Privacy-forward
{" "}
advertising made simple
-
+
Reach and convert new customers through premium advertising on the
Brave browser and search engine.
-
+ {isMobile && }
+
+
- 
+ {!isMobile && }
);
diff --git a/src/auth/views/MobileAdsBenefits.tsx b/src/auth/views/MobileAdsBenefits.tsx
new file mode 100644
index 00000000..3415cb46
--- /dev/null
+++ b/src/auth/views/MobileAdsBenefits.tsx
@@ -0,0 +1,73 @@
+import {
+ Avatar,
+ Box,
+ List,
+ ListItem,
+ ListItemAvatar,
+ ListItemText,
+ Typography,
+} from "@mui/material";
+
+export function MobileAdsBenefits() {
+ return (
+
+ Why Brave Ads?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const ItemText = (props: { primary: string; secondary: string }) => {
+ return (
+
+ );
+};
diff --git a/src/auth/views/components/AuthContainer.tsx b/src/auth/views/components/AuthContainer.tsx
index 07167df9..e865e50d 100644
--- a/src/auth/views/components/AuthContainer.tsx
+++ b/src/auth/views/components/AuthContainer.tsx
@@ -1,7 +1,8 @@
-import { Box, Card, CardContent } from "@mui/material";
+import { Box } from "@mui/material";
import { Background } from "components/Background/Background";
import { LandingPageAppBar } from "components/AppBar/LandingPageAppBar";
import { ReactNode } from "react";
+import { PaddedCardContainer } from "components/Card/PaddedCardContainer";
interface Props {
children?: ReactNode;
@@ -13,25 +14,9 @@ export function AuthContainer({ children, belowCard, aboveCard }: Props) {
return (
-
+
{aboveCard}
-
-
- {children}
-
-
+ {children}
{belowCard}
diff --git a/src/components/AppBar/LandingPageAppBar.tsx b/src/components/AppBar/LandingPageAppBar.tsx
index 99436d56..5555e2cd 100644
--- a/src/components/AppBar/LandingPageAppBar.tsx
+++ b/src/components/AppBar/LandingPageAppBar.tsx
@@ -2,7 +2,6 @@ import {
AppBar,
Box,
Button,
- CssBaseline,
Divider,
Link,
LinkProps,
@@ -15,16 +14,21 @@ import { Link as RouterLink, useRouteMatch } from "react-router-dom";
import { useIsAuthenticated } from "auth/hooks/queries/useIsAuthenticated";
import { useSignOut } from "auth/hooks/mutations/useSignOut";
import { SupportMenu } from "components/Drawer/MiniSideBar";
+import { useIsMobile } from "hooks/useIsMobile";
export function LandingPageAppBar() {
const match = useRouteMatch();
const isAuthenticated = useIsAuthenticated();
+ const isMobile = useIsMobile();
const links = [
{
component: isAuthenticated ? null : (
-
+
Get started
@@ -48,7 +52,6 @@ export function LandingPageAppBar() {
return (
-
-
-
+
+
- 
+
-
+
+
{links.map((l) => l.component)}
- {!match.url.includes("auth") && (
+ {!isMobile && !match.url.includes("auth") && (
)}
@@ -82,8 +96,14 @@ interface HelpProps {
}
function HelpLink({ label, props }: HelpProps) {
+ const isMobile = useIsMobile();
return (
-
+
{label}
);
diff --git a/src/components/Card/PaddedCardContainer.tsx b/src/components/Card/PaddedCardContainer.tsx
index 811943ac..93d4566d 100644
--- a/src/components/Card/PaddedCardContainer.tsx
+++ b/src/components/Card/PaddedCardContainer.tsx
@@ -1,12 +1,14 @@
import { Card, CardContent } from "@mui/material";
+import { useIsMobile } from "hooks/useIsMobile";
import { PropsWithChildren } from "react";
export function PaddedCardContainer({ children }: PropsWithChildren) {
+ const isMobile = useIsMobile();
return (
diff --git a/src/components/Drawer/MiniSideBar.tsx b/src/components/Drawer/MiniSideBar.tsx
index 01335fc1..dca5a68a 100644
--- a/src/components/Drawer/MiniSideBar.tsx
+++ b/src/components/Drawer/MiniSideBar.tsx
@@ -21,6 +21,7 @@ import HeadsetMicOutlinedIcon from "@mui/icons-material/HeadsetMicOutlined";
import InsertPhotoOutlinedIcon from "@mui/icons-material/InsertPhotoOutlined";
import LightbulbOutlinedIcon from "@mui/icons-material/LightbulbOutlined";
import PeopleOutlineOutlinedIcon from "@mui/icons-material/PeopleOutlineOutlined";
+import { useIsMobile } from "hooks/useIsMobile";
type RouteOption = {
label: string;
@@ -172,6 +173,7 @@ interface SupportProps {
export function SupportMenu({ usePlainLink }: SupportProps) {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
+ const isMobile = useIsMobile();
const handleClick = (
event: MouseEvent,
@@ -196,7 +198,7 @@ export function SupportMenu({ usePlainLink }: SupportProps) {
)}
{usePlainLink && (
{
+ const muiTheme = useTheme();
+ return useMediaQuery(muiTheme.breakpoints.down("sm"));
+};