diff --git a/src/components/contact/index.tsx b/marketing/src/components/contact/index.tsx
similarity index 100%
rename from src/components/contact/index.tsx
rename to marketing/src/components/contact/index.tsx
diff --git a/src/components/home/Banner.tsx b/marketing/src/components/home/Banner.tsx
similarity index 75%
rename from src/components/home/Banner.tsx
rename to marketing/src/components/home/Banner.tsx
index 7fb30393df..b5ee099d30 100644
--- a/src/components/home/Banner.tsx
+++ b/marketing/src/components/home/Banner.tsx
@@ -1,25 +1,21 @@
import React from "react"
-import Heading from "@theme/Heading"
import LinkButton from "../shared/LinkButton"
-import HeroImage from "@site/static/images/home/hero.svg"
-import {analyticsHandler} from "@site/src/utils"
-import {Theme, codeSandboxUrl} from "@site/src/constants"
-import {pageLinks} from "@site/src/constants/routes"
-import Link from "@docusaurus/Link"
+import {analyticsHandler} from "../../utils"
+import {Theme, codeSandboxUrl} from "../../constants"
+import {pageLinks} from "../../constants/routes"
+import Image from "../shared/Image"
+import HeroImage from "./HeroImage"
const Banner = (): JSX.Element => {
return (
-
+
The modern GraphQL runtime
-
+
Swiftly design and ship best-practice GraphQL backends atop existing data sources and APIs.
diff --git a/marketing/src/components/home/Graph.tsx b/marketing/src/components/home/Graph.tsx
new file mode 100644
index 0000000000..2ce25b96d0
--- /dev/null
+++ b/marketing/src/components/home/Graph.tsx
@@ -0,0 +1,80 @@
+import React from "react"
+
+import LinkButton from "../shared/LinkButton"
+import ChooseTailcall from "./ChooseTailcall"
+import GraphContainer from "./GraphContainer"
+
+import RequestVisual from "../../assets/animations/request-visual.json"
+import LatencyVisual from "../../assets/animations/latency-visual.json"
+import {analyticsHandler} from "../../utils"
+import {Theme, tailCallBenchmarkUrl} from "../../constants"
+const githubLogo = () => {
+ return (
+
+ )
+}
+
+const Graph = (): JSX.Element => {
+ return (
+
+
+
+
+ Platform made for performance.
+
+
+ analyticsHandler("Home Page", "Click", "View on Github")}
+ />
+
+
+
+ {/* Graphs */}
+
+
+
+
+ analyticsHandler("Home Page", "Click", "View on Github")}
+ />
+
+
+
+
+
+
+ )
+}
+
+export default Graph
diff --git a/src/components/home/GraphContainer.tsx b/marketing/src/components/home/GraphContainer.tsx
similarity index 72%
rename from src/components/home/GraphContainer.tsx
rename to marketing/src/components/home/GraphContainer.tsx
index be151f232c..8cabde0bc9 100644
--- a/src/components/home/GraphContainer.tsx
+++ b/marketing/src/components/home/GraphContainer.tsx
@@ -1,8 +1,8 @@
import React, {useEffect, useRef} from "react"
import CountUp from "react-countup"
import TrackVisibility from "react-on-screen"
-import {InteractivityProps, LottieRefCurrentProps} from "lottie-light-react"
-import LottieContainer from "./LottieContainer.tsxsrc/components/home/LottieContainer"
+import {InteractivityProps, LottieRefCurrentProps, useLottie, useLottieInteractivity} from "lottie-react"
+import LottieContainer from "./LottieContainer"
type GraphContainerProps = {
metricTitle: string
@@ -23,25 +23,6 @@ const GraphContainer = ({
duration,
start,
}: GraphContainerProps): JSX.Element => {
- const lottieRef = useRef(null)
-
- const interactivity = {
- mode: "scroll" as "scroll",
- actions: [
- {
- visibility: [0, 1],
- type: "loop" as "loop",
- frames: [0],
- },
- ],
- } as InteractivityProps
-
- useEffect(() => {
- setTimeout(() => {
- lottieRef.current?.pause()
- }, delay)
- }, [])
-
return (
@@ -72,7 +53,7 @@ const GraphContainer = ({
-
+
)
diff --git a/marketing/src/components/home/HeroImage.tsx b/marketing/src/components/home/HeroImage.tsx
new file mode 100644
index 0000000000..b9842dbb5b
--- /dev/null
+++ b/marketing/src/components/home/HeroImage.tsx
@@ -0,0 +1,3733 @@
+import React from "react"
+
+const HeroImage = () => (
+
+)
+
+export default HeroImage
diff --git a/src/components/home/TheProblem.tsx b/marketing/src/components/home/LegacyGateway.tsx
similarity index 51%
rename from src/components/home/TheProblem.tsx
rename to marketing/src/components/home/LegacyGateway.tsx
index 84fdcccb7d..3ee5feb8ce 100644
--- a/src/components/home/TheProblem.tsx
+++ b/marketing/src/components/home/LegacyGateway.tsx
@@ -1,9 +1,7 @@
import React from "react"
-import Heading from "@theme/Heading"
-
-import SolutionGraphic from "@site/static/animations/solution-graphic.json"
+import SolutionGraphic from "../../assets/animations/solution-graphic.json"
import SectionTitle from "../shared/SectionTitle"
-import LottieContainer from "./LottieContainer.tsxsrc/components/home/LottieContainer"
+import LottieContainer from "./LottieContainer"
const LegacyGateway = (): JSX.Element => {
return (
@@ -11,19 +9,18 @@ const LegacyGateway = (): JSX.Element => {
-
- REST APIs are
- not composable
-
+
+ Where traditional
+
+ gateways fail?
+
- API composition is pivotal for building rich user experiences, but REST APIs are not inherently composable,
- often leading to awkward, unmaintainable hand-written Backend for Frontends. On the other hand, GraphQL is a
- highly composable protocol, giving clients the power to express exactly what they need, and Tailcall makes
- GraphQL easy, secure, and fast.
+ A traditional API Gateway restricts operations to an API's route, method, or headers, and doesn't
+ allow modifications to the request and response bodies. This limitation constrains the operations that can
+ be performed on an API, ultimately compelling engineering teams to either intertwine orchestration logic
+ with business logic or to develop and maintain a separate layer of abstraction such as BFF (backend for
+ frontend).
