brand (Helicone#511)

mintlify-onboarding · Jun 23, 2023 · 641bd17 · 641bd17
1 parent d3ac96c
commit 641bd17
Show file tree

Hide file tree

Showing 13 changed files with 77 additions and 964 deletions.
diff --git a/web/components/shared/metaData.tsx b/web/components/shared/metaData.tsx
@@ -11,11 +11,11 @@ const MetaData = (props: MetaDataProps) => {
   return (
     <>
       <Head>
-        <title>{`${title} | Helicone - Observability for Generative AI`}</title>
+        <title>{`${title} | Helicone - Monitoring for Generative AI`}</title>
         <link rel="icon" href="/assets/landing/helicone-mobile.webp" />
         <meta
           property="og:title"
-          content="Helicone | Observability for Generative AI"
+          content="Helicone | Monitoring for Generative AI"
         />
         <meta
           property="og:description"

diff --git a/web/components/templates/demo/demoPage.tsx b/web/components/templates/demo/demoPage.tsx
diff --git a/web/components/templates/home/homePage.tsx b/web/components/templates/home/homePage.tsx
@@ -159,7 +159,79 @@ export default function HomePage() {
   return (
     <div className="flex-col w-full">
       <NavBarV2 />
-      <div className="bg-gray-50 overflow-hidden">
+      <div className="relative isolate overflow-hidden bg-white">
+        <div className="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-24 border-r border-l border-gray-300 border-dashed">
+          <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl lg:flex-shrink-0 lg:pt-8">
+            <div className="mt-24 sm:mt-32 lg:mt-16">
+              <a
+                href="https://www.ycombinator.com/launches/I73-helicone-open-source-observability-platform-for-generative-ai"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex space-x-6"
+              >
+                <span className="rounded-full bg-orange-600/10 px-3 py-1 text-sm font-semibold leading-6 text-orange-600 ring-1 ring-inset ring-orange-600/10">
+                  Backed by Y Combinator
+                </span>
+              </a>
+            </div>
+            <h1 className="mt-10 text-4xl sm:leading-tight font-bold tracking-tight text-gray-900 sm:text-5xl">
+              Open-Source{" "}
+              <span className="bg-gradient-to-r from-sky-500 via-pink-500 to-violet-500 bg-[length:100%_4px] pb-1 bg-no-repeat bg-bottom">
+                Monitoring
+              </span>{" "}
+              <p>for Generative AI</p>
+            </h1>
+            <p className="mt-6 text-lg leading-8 text-gray-600">
+              Hundreds of organizations leverage Helicone to make their
+              Large-Language Model operations more efficient.
+            </p>
+            <div className="flex flex-row gap-8 mt-10">
+              <OnboardingButton title={"Get Started"} />
+              {demoLoading ? (
+                <button className="flex flex-row underline underline-offset-2 font-semibold text-gray-900 items-center">
+                  <ArrowPathIcon className="w-4 h-4 mr-1.5 animate-spin" />
+                  Logging In...
+                </button>
+              ) : (
+                <button
+                  onClick={() => {
+                    setDemoLoading(true);
+                    supabaseClient.auth.signOut().then(() => {
+                      supabaseClient.auth
+                        .signInWithPassword({
+                          email: DEMO_EMAIL,
+                          password: "valyrdemo",
+                        })
+                        .then((res) => {
+                          router.push("/demo").then(() => {
+                            setDemoLoading(false);
+                          });
+                        });
+                    });
+                  }}
+                  className="underline underline-offset-2 font-semibold text-gray-900"
+                >
+                  View Demo
+                </button>
+              )}
+            </div>
+          </div>
+          <div className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32">
+            <div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
+              <div className="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
+                <img
+                  src="/assets/landing/preview.webp"
+                  alt="App screenshot"
+                  width={2432}
+                  height={1442}
+                  className="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* <div className="bg-gray-50 overflow-hidden">
         <div className="px-8 grid grid-cols-4 h-full max-w-7xl mx-auto border-r border-l border-gray-300 border-dashed w-full items-center justify-center">
           <div className="col-start-1 col-span-4 md:col-span-2 space-y-12 h-[80vh] justify-center flex flex-col">
             <Link
@@ -171,7 +243,7 @@ export default function HomePage() {
               Backed by Y Combinator
             </Link>
             <div className="text-5xl sm:text-6xl lg:text-7xl leading-none font-bold text-gray-900 text-left space-y-2">
-              <p>Tooling for</p>
+              <p>Monitoring for</p>
               <span className="bg-gradient-to-r from-sky-500 via-pink-500 to-violet-500 bg-[length:100%_7px] pb-2 bg-no-repeat bg-bottom">
                 Generative AI
               </span>
@@ -224,68 +296,8 @@ export default function HomePage() {
               </div>
             </div>
           </div>
-
-          <div className="col-span-4 grid grid-cols-4 gap-8 pb-32">
-            {/* <img
-              className="col-span-1 max-h-12 w-full object-contain md:col-span-1"
-              src="https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg"
-              alt="Transistor"
-              width={158}
-              height={48}
-            />
-            <img
-              className="col-span-1 max-h-12 w-full object-contain md:col-span-1"
-              src="https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg"
-              alt="Transistor"
-              width={158}
-              height={48}
-            />
-            <img
-              className="col-span-1 max-h-12 w-full object-contain md:col-span-1"
-              src="https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg"
-              alt="Transistor"
-              width={158}
-              height={48}
-            />
-            <img
-              className="col-span-1 max-h-12 w-full object-contain md:col-span-1"
-              src="https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg"
-              alt="Transistor"
-              width={158}
-              height={48}
-            />
-            <img
-              className="col-span-1 max-h-12 w-full object-contain md:col-span-1"
-              src="https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg"
-              alt="Transistor"
-              width={158}
-              height={48}
-            />
-
-            <img
-              className="col-span-1 max-h-12 w-full object-contain md:col-span-1"
-              src="https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg"
-              alt="Transistor"
-              width={158}
-              height={48}
-            />
-            <img
-              className="col-span-1 max-h-12 w-full object-contain md:col-span-1"
-              src="https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg"
-              alt="Transistor"
-              width={158}
-              height={48}
-            />
-            <img
-              className="col-span-1 max-h-12 w-full object-contain md:col-span-1"
-              src="https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg"
-              alt="Transistor"
-              width={158}
-              height={48}
-            /> */}
-          </div>
         </div>
-      </div>
+      </div> */}
       <div className="bg-gray-100">
         <div className="px-8 pb-24 relative grid grid-cols-4 h-full max-w-7xl mx-auto border-r border-l border-gray-300 border-dashed w-full items-center justify-center">
           <div className="flex flex-col col-span-4 md:col-span-2 space-y-8 py-32 md:pr-32">

diff --git a/web/components/templates/onboarding/ConfirmEmail.tsx b/web/components/templates/onboarding/ConfirmEmail.tsx