Lead capture banner (#2998)

Author: nlkluth

website/src/components/CalloutBanner.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import LearnMoreLink from "./LearnMoreLink";
+
+const CalloutBanner = ({ fullWidth = false }) => {
+  return (
+    <div
+      className={`rounded-xl bg-[#202020] mb-24 ${!fullWidth ? "w-[65%]" : ""} m-auto py-6 px-8 border-solid border-[6px] border-[#8F4438] outline outline-[6px] outline-[#FF684F]`}
+    >
+      <p className="m-0 text-[var(--ifm-color-primary)] text-xl font-bold">
+        Like this project? You&apos;ll love working with us.
+      </p>
+      <div className="flex flex-col sm:flex-row mt-2.5 items-end justify-between">
+        <p className="m-0 text-white text-sm mb-6 sm:mb-0">
+          Contact us to learn more about our full range of services and
+          offerings.
+        </p>
+        <LearnMoreLink className="text-white text-sm font-bold flex items-center justify-between min-w-[100px] gap-1.5 underline underline-offset-4 decoration-2 text-[var(--ifm-color-primary)] hover:text-white" />
+      </div>
+    </div>
+  );
+};
+
+export default CalloutBanner;

website/src/components/LearnMoreLink.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ComponentProps } from "react";
+import { FaArrowRight } from "react-icons/fa";
+
+export default function LearnMoreLink(
+  props: Omit<ComponentProps<"a">, "href">,
+) {
+  return (
+    <a
+      href="https://commerce.nearform.com/contact?lead_source_2_0=Open%20Source"
+      target="_blank"
+      rel="noreferrer"
+      {...props}
+    >
+      Learn More
+      <FaArrowRight height={40} width={40} scale={5} />
+    </a>
+  );
+}

website/src/components/SidebarLeadBanner.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import LearnMoreLink from "./LearnMoreLink";
+
+export default function SidebarLeadBanner() {
+  return (
+    <aside className="rounded-xl bg-[#f2f2f2] m-3 py-7 px-9 text-[#606770]">
+      <p className="text-base font-bold">
+        Like this project? You&apos;ll love working with us.
+      </p>
+      <p className="text-sm">
+        Contact us to learn more about our full range of services and offerings.
+      </p>
+      <LearnMoreLink className="text-[#606770] hover:text-[var(--ifm-color-primary)] text-sm font-bold flex items-center justify-end min-w-[100px] gap-1.5 underline underline-offset-4 decoration-2" />
+    </aside>
+  );
+}

website/src/css/custom.css

@@ -13,31 +13,31 @@ body {
 }
 
 @font-face {
-  font-family: 'Inter';
-  src: url('/font/InterRegular.woff2') format('woff2');
+  font-family: "Inter";
+  src: url("/font/InterRegular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Inter';
-  src: url('/font/InterMedium.woff2') format('woff2');
+  font-family: "Inter";
+  src: url("/font/InterMedium.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Inter';
-  src: url('/font/InterBold.woff2') format('woff2');
+  font-family: "Inter";
+  src: url("/font/InterBold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
 
 .hero-pattern {
-  background-image: url('/img/hero-background.svg');
+  background-image: url("/img/hero-background.svg");
 }
 
 :root {
@@ -57,7 +57,7 @@ body {
   --ifm-footer-padding-vertical: 1rem;
 }
 
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ifm-color-primary: #ff684f;
   --ifm-color-primary-dark: #ff4b2e;
   --ifm-color-primary-darker: #ff3d1d;
@@ -73,7 +73,7 @@ body {
 
 /* Nav */
 .header-github-link::before {
-  content: '';
+  content: "";
   width: 24px;
   height: 24px;
   display: flex;

website/src/pages/_components/landing-banner.tsx

@@ -1,23 +1,21 @@
 import React from "react";
-import { LinkButton } from "../../components/link-button";
-import { LandingDivider } from "./landing-divider";
+import LearnMoreLink from "../../components/LearnMoreLink";
 
-export const LandingBanner = ({
-  body,
-  cta,
-  heading,
-  showDivider,
-}: {
-  body: string;
-  cta: { link: string; text: string };
-  heading: string;
-  showDivider?: boolean;
-}) => (
-  <div className="flex flex-col text-left mx-16 lg:mx-32 xl:mx-64 my-8">
-    {showDivider && <LandingDivider />}
-
-    <h2 className="my-8 text-4xl font-semibold">{heading}</h2>
-    <p className="text-lg">{body}</p>
-    <LinkButton link={cta.link}>{cta.text}</LinkButton>
+export const LandingBanner = () => (
+  <div className="bg-[#4589FF] text-white py-7 px-5 sm:py-2 sm:px-4">
+    <div className="lg:max-w-[90%] flex flex-col sm:flex-row justify-between sm:items-center m-auto">
+      <div className="flex flex-col sm:flex-row gap-2.5">
+        <p className="m-0 text-sm font-bold">
+          Like this project? You&apos;ll love working with us.
+        </p>
+        <p className="m-0 text-sm">
+          Contact us to learn more{" "}
+          <span className="hidden lg:inline">
+            about our full range of services and offerings.
+          </span>
+        </p>
+      </div>
+      <LearnMoreLink className="text-white text-sm font-bold flex items-center justify-end gap-1.5 underline underline-offset-4 decoration-2 hover:text-white mt-2.5 sm:mt-0" />
+    </div>
   </div>
 );

website/src/pages/index.tsx

@@ -6,6 +6,7 @@ import { LandingFeaturedProjects } from "./_components/landing-featured-projects
 import { LandingFeatures } from "./_components/landing-features";
 import { LandingDemo } from "./_components/landing-demo";
 import { LandingShowcase } from "./_components/landing-showcase";
+import CalloutBanner from "../components/CalloutBanner";
 
 // eslint-disable-next-line no-undef
 export default function Home(): JSX.Element {
@@ -16,6 +17,7 @@ export default function Home(): JSX.Element {
       <LandingFeatures />
       <LandingShowcase />
       <LandingFeaturedProjects />
+      <CalloutBanner />
     </Layout>
   );
 }

website/src/theme/DocItem/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import OriginalDocItem from "@theme-original/DocItem";
+import CalloutBanner from "@site/src/components/CalloutBanner";
+
+export default function DocItem(props) {
+  return (
+    <>
+      <OriginalDocItem {...props} />
+      <div className="mt-20 min-[997px]:hidden">
+        <CalloutBanner fullWidth />
+      </div>
+    </>
+  );
+}

website/src/theme/DocSidebar/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import OriginalDocSidebar from "@theme-original/DocSidebar";
+import SidebarLeadBanner from "@site/src/components/SidebarLeadBanner";
+
+export default function DocSidebar(props) {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 overflow-x-hidden">
+        <OriginalDocSidebar {...props} />
+      </div>
+      <SidebarLeadBanner />
+    </div>
+  );
+}