diff --git a/package.json b/package.json
index c4281daeb9..5a22ba0fd6 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,9 @@
},
"dependencies": {
"@react-spring/types": "^9.7.3",
+ "@typeform/embed": "^4.8.1",
+ "@typeform/embed-react": "^3.15.0",
+ "local-storage": "^2.0.0",
"moment": "^2.29.4",
"universal-cookie": "^6.1.1",
"yarn": "^1.22.19"
diff --git a/packages/fakeyou.com/package.json b/packages/fakeyou.com/package.json
index 4346e671a5..51c3f24fdf 100644
--- a/packages/fakeyou.com/package.json
+++ b/packages/fakeyou.com/package.json
@@ -75,6 +75,7 @@
"react-select": "^5.7.0",
"react-share": "^4.4.1",
"react-twitch-embed": "^3.0.1",
+ "react-typeform-embed": "^1.0.8",
"react-wavesurfer.js": "^0.0.8",
"sass": "^1.57.1",
"swiper": "^11.0.5",
diff --git a/packages/fakeyou.com/src/components/common/TypeformButton/TypeformButton.tsx b/packages/fakeyou.com/src/components/common/TypeformButton/TypeformButton.tsx
new file mode 100644
index 0000000000..5958852c99
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TypeformButton/TypeformButton.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { PopupButton } from "@typeform/embed-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight, faPartyHorn } from "@fortawesome/pro-solid-svg-icons";
+import { get, set } from "local-storage";
+import Button from "../Button";
+
+interface TypeformButtonProps {
+ formId: string;
+ label: string;
+ labelSubmitted: string;
+}
+
+export default function TypeformButton({
+ formId,
+ label,
+ labelSubmitted,
+}: TypeformButtonProps) {
+ return (
+ <>
+ {!get("isSubmit") ? (
+ {
+ set("isSubmit", true);
+ console.log("Form submitted!");
+ }}
+ >
+ {label}
+
+
+ ) : (
+
+ )}
+ >
+ );
+}
diff --git a/packages/fakeyou.com/src/components/common/TypeformButton/index.tsx b/packages/fakeyou.com/src/components/common/TypeformButton/index.tsx
new file mode 100644
index 0000000000..64b36c8bc4
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TypeformButton/index.tsx
@@ -0,0 +1 @@
+export { default } from "./TypeformButton";
diff --git a/packages/fakeyou.com/src/components/common/TypeformWidget/TypeformContainer.scss b/packages/fakeyou.com/src/components/common/TypeformWidget/TypeformContainer.scss
new file mode 100644
index 0000000000..1b34d79010
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TypeformWidget/TypeformContainer.scss
@@ -0,0 +1,11 @@
+.typeformcontainer {
+ height: 50vh; // 50% of the viewport height
+
+ @media (min-width: 768px) { // Tablets and above
+ height: 60vh;
+ }
+
+ @media (min-width: 1024px) { // Desktops and above
+ height: 400px; // Fixed height for large screens
+ }
+}
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/common/TypeformWidget/TypeformWidget.tsx b/packages/fakeyou.com/src/components/common/TypeformWidget/TypeformWidget.tsx
new file mode 100644
index 0000000000..e1eaffc7dc
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TypeformWidget/TypeformWidget.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { Widget } from "@typeform/embed-react";
+import { get, set } from "local-storage";
+import "./TypeformContainer.scss";
+
+interface TypeformWidgetProps {
+ formId: string;
+}
+
+export default function TypeformWidget({ formId }: TypeformWidgetProps) {
+ return (
+ <>
+ {!get("isSubmit") ? (
+
+ {
+ set("isSubmit", true);
+ console.log("Form submitted!");
+ }}
+ hideHeaders
+ enableSandbox={false}
+ />
+
+ ) : null}
+ >
+ );
+}
diff --git a/packages/fakeyou.com/src/components/common/TypeformWidget/index.tsx b/packages/fakeyou.com/src/components/common/TypeformWidget/index.tsx
new file mode 100644
index 0000000000..a4e97e97d5
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TypeformWidget/index.tsx
@@ -0,0 +1 @@
+export { default } from "./TypeformWidget";
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx
index a221c716d1..708da7a754 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx
@@ -1,4 +1,4 @@
-import { Badge, Button, Panel } from "components/common";
+import { Badge, Panel } from "components/common";
import React, { useEffect, useRef, useState } from "react";
import "./VstSectionV2.scss";
import { Swiper, SwiperSlide } from "swiper/react";
@@ -9,11 +9,12 @@ import "swiper/css/thumbs";
import { Navigation, Thumbs } from "swiper/modules";
import { Swiper as SwiperType } from "swiper/types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
import {
faArrowDownLong,
- faArrowRight,
faArrowRightLong,
} from "@fortawesome/pro-solid-svg-icons";
+import TypeformButton from "components/common/TypeformButton";
// import { Link } from "react-router-dom";
interface VstSectionV2Props {}
@@ -117,12 +118,17 @@ export default function VstSectionV2(props: VstSectionV2Props) {
unique styles and effects to create visually captivating content.
- */}
+
diff --git a/yarn.lock b/yarn.lock
index 3d8233403e..f44c5ae1f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4484,6 +4484,7 @@ __metadata:
react-select: ^5.7.0
react-share: ^4.4.1
react-twitch-embed: ^3.0.1
+ react-typeform-embed: ^1.0.8
react-wavesurfer.js: ^0.0.8
sass: ^1.57.1
swiper: ^11.0.5
@@ -4591,10 +4592,13 @@ __metadata:
resolution: "@storyteller/root@workspace:."
dependencies:
"@react-spring/types": ^9.7.3
+ "@typeform/embed": ^4.8.1
+ "@typeform/embed-react": ^3.15.0
craco: ^0.0.3
cross-env: ^7.0.3
husky: ^8.0.3
lerna: ^4.0.0
+ local-storage: ^2.0.0
moment: ^2.29.4
prettier: ^3.1.0
pretty-quick: ^3.1.3
@@ -5033,6 +5037,32 @@ __metadata:
languageName: node
linkType: hard
+"@typeform/embed-react@npm:^3.15.0":
+ version: 3.15.0
+ resolution: "@typeform/embed-react@npm:3.15.0"
+ dependencies:
+ "@typeform/embed": 4.8.1
+ fast-deep-equal: ^3.1.3
+ peerDependencies:
+ react: ">=16.8.0"
+ checksum: d5e5d4b1cdfc128de2ce6c17ba648adbe98bfecc5a2c296fbedc8fb32da0c302e813baa6ce3ecc3de9dc84f36ccfd42250a4693f846d84ce2574e6fedcaa86e5
+ languageName: node
+ linkType: hard
+
+"@typeform/embed@npm:4.8.1, @typeform/embed@npm:^4.8.1":
+ version: 4.8.1
+ resolution: "@typeform/embed@npm:4.8.1"
+ checksum: 1e7ac3d0d95c1ea823160f1478a973f871550a4bab7de1501f557b1e18966ab5a740b6a913d9436b5ee59d0f25d707b66582a8c41dea195383cca3afb1955b23
+ languageName: node
+ linkType: hard
+
+"@typeform/embed@npm:^1.28.2":
+ version: 1.38.0
+ resolution: "@typeform/embed@npm:1.38.0"
+ checksum: 41115134e5cee28f5e031181b4525c7885d23707699cf183921110262717c7544bfd101428267410b812914c235687783e373ce98e37bdc447d72f8177663597
+ languageName: node
+ linkType: hard
+
"@types/aria-query@npm:^4.2.0":
version: 4.2.2
resolution: "@types/aria-query@npm:4.2.2"
@@ -14247,6 +14277,13 @@ __metadata:
languageName: node
linkType: hard
+"local-storage@npm:^2.0.0":
+ version: 2.0.0
+ resolution: "local-storage@npm:2.0.0"
+ checksum: 921f381cafc4c0cac263a87e9e11093adf0bfb13b3520107bb5065bbccf5e7d22eea81148a40bc10d9f44aba8a5afe0157183205714d0221e02e36cb8afaa70b
+ languageName: node
+ linkType: hard
+
"locate-path@npm:^2.0.0":
version: 2.0.0
resolution: "locate-path@npm:2.0.0"
@@ -18177,6 +18214,18 @@ __metadata:
languageName: node
linkType: hard
+"react-typeform-embed@npm:^1.0.8":
+ version: 1.0.8
+ resolution: "react-typeform-embed@npm:1.0.8"
+ dependencies:
+ "@typeform/embed": ^1.28.2
+ peerDependencies:
+ react: ^17.0.2
+ react-dom: ^17.0.2
+ checksum: f47ee0077046e282a482ef1a9d754ff255be65174e05b58f4c51c873ce8d771d1af98c5829f8860f2a33b0f4ebabcc4557e0f1e3b14b0d8bf3b23f460f1df18a
+ languageName: node
+ linkType: hard
+
"react-wavesurfer.js@npm:^0.0.5":
version: 0.0.5
resolution: "react-wavesurfer.js@npm:0.0.5"