improve talk to us (#2295)

* improve talk to us

* push

* url state

* spacing

* menu and nits

* push

* nit

* prettier

Author: marcklingen

components/CalComScheduleDemo.tsx

@@ -1,29 +1,21 @@
 import Cal, { getCalApi } from "@calcom/embed-react";
 import { useEffect } from "react";
 
-export function ScheduleDemo({
-  className,
-  region,
-}: {
-  className?: string;
-  region: "us" | "eu";
-}) {
+export function ScheduleDemo({ className }: { className?: string }) {
   useEffect(() => {
     (async function () {
       const cal = await getCalApi();
       cal("ui", {
         styles: { branding: { brandColor: "#000000" } },
-        hideEventTypeDetails: false,
+        hideEventTypeDetails: true,
         layout: "month_view",
       });
     })();
   }, []);
 
-  const calLink = region === "us" ? "team/langfuse/intro" : "team/langfuse/intro-eu";
-
   return (
     <Cal
-      calLink={calLink}
+      calLink="team/langfuse/intro"
       className={className}
       style={{ width: "100%", height: "100%", overflow: "scroll" }}
       config={{ layout: "month_view" }}

components/GitHubBadge.tsx

@@ -4,7 +4,7 @@ import IconGithub from "./icons/github";
 export const GithubMenuBadge = () => (
   <a
     href="https://github.com/langfuse/langfuse"
-    className="group h-8 flex shrink-0 flex-row items-center rounded border border-primary/10 overflow-hidden transition-opacity"
+    className="hidden sm:flex group h-8 shrink-0 flex-row items-center rounded border border-primary/10 overflow-hidden transition-opacity"
     target="_blank"
     rel="nofollow noreferrer"
     title="GitHub Repository"

components/HiringBadge.tsx

@@ -21,16 +21,12 @@ export function HiringBadge() {
       onBlur={() => setIsHovered(false)}
       style={{ width: "max-content" }}
     >
-      <span className={cn(isHovered && "invisible")}>Hiring in Berlin and SF</span>
-      <span
-        className={cn(
-          "absolute",
-          !isHovered && "invisible"
-        )}
-      >
+      <span className={cn(isHovered && "invisible")}>
+        Hiring in Berlin and SF
+      </span>
+      <span className={cn("absolute", !isHovered && "invisible")}>
         Looking for 🐐s!
       </span>
     </Link>
   );
 }
-

components/credibilitySentence.tsx

@@ -0,0 +1,23 @@
+import { getGitHubStars } from "@/lib/github-stars";
+import { DOCKER_PULLS, SDK_INSTALLS_PER_MONTH } from "./home/Usage";
+
+export const CredibilitySentence = () => {
+  return (
+    <p className="mt-6">
+      Langfuse is the most widely adopted LLM Engineering platform with over{" "}
+      <strong className="font-semibold">
+        {getGitHubStars().toLocaleString()} GitHub stars
+      </strong>
+      ,{" "}
+      <strong className="font-semibold">
+        {(SDK_INSTALLS_PER_MONTH / 1_000_000).toFixed(1)}M+ SDK installs per
+        month
+      </strong>
+      , and{" "}
+      <strong className="font-semibold">
+        {(DOCKER_PULLS / 1_000_000).toFixed(0)}M+ Docker pulls
+      </strong>
+      . Selected customers who built great LLM applications with Langfuse:
+    </p>
+  );
+};

components/home/Hero.tsx

@@ -36,8 +36,11 @@ export function Hero() {
         </span>
 
         <div className="flex gap-4 flex-wrap items-center justify-center my-4">
-          <Button size="lg" variant="cta" asChild>
-            <Link href="/demo">Try Example Project</Link>
+          <Button variant="cta" size="lg" asChild>
+            <Link href="https://cloud.langfuse.com">Sign up</Link>
+          </Button>
+          <Button size="lg" variant="secondary" asChild>
+            <Link href="/talk-to-us">Get Demo</Link>
           </Button>
           <Button variant="secondary" size="lg" asChild>
             <Link href="/docs">View docs</Link>

components/home/Usage.tsx

@@ -4,11 +4,19 @@ import { EnterpriseLogoGrid } from "@/components/shared/EnterpriseLogoGrid";
 import { getGitHubStars } from "@/lib/github-stars";
 import { cn } from "@/lib/utils";
 
+// Export usage stats constants
+export const SDK_INSTALLS_PER_MONTH = 14_800_000;
+export const DOCKER_PULLS = 6_000_000;
+
 export const Usage = ({ noPadding = false }: { noPadding?: boolean }) => {
   const stats = [
-    { name: "SDK installs / month", value: 14_800_000, showPlus: true },
+    {
+      name: "SDK installs / month",
+      value: SDK_INSTALLS_PER_MONTH,
+      showPlus: true,
+    },
     { name: "GitHub stars", value: getGitHubStars(), showPlus: false },
-    { name: "Docker pulls", value: 6_000_000, showPlus: true },
+    { name: "Docker pulls", value: DOCKER_PULLS, showPlus: true },
   ];
 
   return (

components/inkeep/InkeepSearchBar.tsx

@@ -22,7 +22,7 @@ export default function InkeepSearchBar() {
             key: "1",
             type: "style",
             value: css`
-              @media (max-width: 33em) {
+              @media (max-width: 1400px) {
                 .ikp-search-bar__button {
                   padding-inline: 7px;
                 }