diff --git a/workspaces/website/src/blocks/HomepageHero.tsx b/workspaces/website/src/blocks/HomepageHero.tsx
index fc8b342037..c41912a5ef 100644
--- a/workspaces/website/src/blocks/HomepageHero.tsx
+++ b/workspaces/website/src/blocks/HomepageHero.tsx
@@ -2,151 +2,160 @@ import { Box, Flex, Img, Stack } from "@chakra-ui/react";
import { Button } from "@ui/Button";
import { Heading } from "@ui/Typography/Heading";
import { Text } from "@ui/Typography/Text";
+import { Intro } from "./Intro";
+import ProvisionsPopup from "@ui/ProvisionsPopup/ProvisionsPopup";
type Props = {
readonly seo: {
heroText: string;
};
};
-import { Intro } from "./Intro";
export const HomepageHero = ({ seo }: Props) => {
return (
-
-
- 
-
+ <>
+
- 
-
+
+
+
+
+
+
-
-
-
-
-
-
- Starknet
-
-
- {seo.heroText}
-
+
-
-
-
-
-
-
- 
-
+ {seo.heroText}
+
+
+
+
+
+
+
+
+
+
+
-
+
);
};
diff --git a/workspaces/website/src/components/ProvisionsPopup/ArrowRight/ArrowRight.tsx b/workspaces/website/src/components/ProvisionsPopup/ArrowRight/ArrowRight.tsx
new file mode 100644
index 0000000000..5812612fda
--- /dev/null
+++ b/workspaces/website/src/components/ProvisionsPopup/ArrowRight/ArrowRight.tsx
@@ -0,0 +1,20 @@
+const ArrowRight = () => {
+ return (
+
+ );
+};
+
+export default ArrowRight;
diff --git a/workspaces/website/src/components/ProvisionsPopup/CloseIcon/CloseIcon.tsx b/workspaces/website/src/components/ProvisionsPopup/CloseIcon/CloseIcon.tsx
new file mode 100644
index 0000000000..63f4279afb
--- /dev/null
+++ b/workspaces/website/src/components/ProvisionsPopup/CloseIcon/CloseIcon.tsx
@@ -0,0 +1,28 @@
+const CloseIcon = () => {
+ return (
+
+ );
+};
+
+export default CloseIcon;
diff --git a/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx
new file mode 100644
index 0000000000..4376417cbc
--- /dev/null
+++ b/workspaces/website/src/components/ProvisionsPopup/ProvisionsPopup.tsx
@@ -0,0 +1,125 @@
+import { Box, Image, Icon, Fade, IconButton } from "@chakra-ui/react";
+import Background from "./popup-background.png";
+import Logo from "./popup-text.svg";
+import { useState } from "react";
+import CloseIcon from "./CloseIcon/CloseIcon";
+import ArrowRight from "./ArrowRight/ArrowRight";
+import { Button } from "@ui/Button";
+
+const ProvisionsPopup = () => {
+ const [isOpen, setIsOpen] = useState(true);
+
+ const toggleModal = () => setIsOpen((prevState) => !prevState);
+
+ const gtmEvent = (event: string) => window?.dataLayer.push({ event });
+ const gtmEventClickReadMore = () => gtmEvent("Provisions popup click");
+ const gtmEventClickClose = () => gtmEvent("Provisions popup close");
+
+ const onClose = (event: React.MouseEvent) => {
+ event.stopPropagation();
+ gtmEventClickClose();
+ toggleModal();
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ProvisionsPopup;
diff --git a/workspaces/website/src/components/ProvisionsPopup/popup-background.png b/workspaces/website/src/components/ProvisionsPopup/popup-background.png
new file mode 100644
index 0000000000..6e64d452d1
Binary files /dev/null and b/workspaces/website/src/components/ProvisionsPopup/popup-background.png differ
diff --git a/workspaces/website/src/components/ProvisionsPopup/popup-text.svg b/workspaces/website/src/components/ProvisionsPopup/popup-text.svg
new file mode 100644
index 0000000000..7451995c29
--- /dev/null
+++ b/workspaces/website/src/components/ProvisionsPopup/popup-text.svg
@@ -0,0 +1,50 @@
+
\ No newline at end of file
diff --git a/workspaces/website/src/renderer/_default.page.server.tsx b/workspaces/website/src/renderer/_default.page.server.tsx
index 34df2ba97f..8a16c7c072 100644
--- a/workspaces/website/src/renderer/_default.page.server.tsx
+++ b/workspaces/website/src/renderer/_default.page.server.tsx
@@ -17,6 +17,13 @@ export const passToClient = [
"data",
"seo",
];
+declare global {
+ interface Window {
+ dataLayer: {
+ event: string;
+ }[];
+ }
+}
export async function onBeforeRender(pageContext: PageContextServer) {
return {
@@ -41,29 +48,34 @@ export async function render(pageContext: PageContextServer) {
});
const GOOGLE_TAG_ID = "G-WY42TERK5P";
- const pageSeo = (pageProps?.data ?? pageProps?.roadmapPost ?? pageProps?.tutorial) as SeoType
+ const pageSeo = (pageProps?.data ??
+ pageProps?.roadmapPost ??
+ pageProps?.tutorial) as SeoType;
const documentProps =
- pageContext.documentProps ?? pageContext.exports.documentProps
+ pageContext.documentProps ?? pageContext.exports.documentProps;
// @ts-ignore
- const isGeoRegulationsPage = pageProps?.data?.slug === 'provisions-geo-regulations';
+ const isGeoRegulationsPage =
+ pageProps?.data?.slug === "provisions-geo-regulations";
- const title = isGeoRegulationsPage ? pageSeo?.seoTitle as string : (
- documentProps?.title ?? pageSeo?.seoTitle
- ? `${documentProps?.title ?? pageSeo?.seoTitle} - Starknet`
- : "Starknet"
- );
+ const title = isGeoRegulationsPage
+ ? (pageSeo?.seoTitle as string)
+ : documentProps?.title ?? pageSeo?.seoTitle
+ ? `${documentProps?.title ?? pageSeo?.seoTitle} - Starknet`
+ : "Starknet";
- const description = isGeoRegulationsPage ? pageSeo?.seoDescription as string : (
- documentProps?.description ?? pageSeo?.seoDescription as string ??
- "Starknet is the secure scaling technology bringing Ethereum’s benefits to the world."
- );
+ const description = isGeoRegulationsPage
+ ? (pageSeo?.seoDescription as string)
+ : documentProps?.description ??
+ (pageSeo?.seoDescription as string) ??
+ "Starknet is the secure scaling technology bringing Ethereum’s benefits to the world.";
- const image = isGeoRegulationsPage ? `${import.meta.env.VITE_SITE_URL}/assets/provisions.png?v2` :
- documentProps?.image ??
- `${import.meta.env.VITE_SITE_URL}/assets/share/generic_landing.png`;
+ const image = isGeoRegulationsPage
+ ? `${import.meta.env.VITE_SITE_URL}/assets/provisions.png?v2`
+ : documentProps?.image ??
+ `${import.meta.env.VITE_SITE_URL}/assets/share/generic_landing.png`;
- const focusKeywords = pageSeo?.seoFocusKeywords as string[]
+ const focusKeywords = pageSeo?.seoFocusKeywords as string[];
const documentHtml = escapeInject`
@@ -75,7 +87,7 @@ export async function render(pageContext: PageContextServer) {
${title}
-
+
@@ -102,9 +114,13 @@ export async function render(pageContext: PageContextServer) {
@@ -128,9 +144,13 @@ export async function render(pageContext: PageContextServer) {
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
- ${pageSeo?.seoCanonicalUrl ? `
+ ${
+ pageSeo?.seoCanonicalUrl
+ ? `
- `: ''}
+ `
+ : ""
+ }
${stream}