landing page chanegs (#3132)

bifrost/components/home/CTA.tsx

@@ -7,6 +7,7 @@ import LogoBox from "./LogoBox";
 import { useState } from "react";
 import { ISLAND_WIDTH } from "@/lib/utils";
 import Image from "next/image";
+import { ChevronRight as ChevronRightIcon } from "lucide-react";
 
 const CTA = () => {
   const [isHovered, setIsHovered] = useState(false);
@@ -46,7 +47,7 @@ const CTA = () => {
           <div className="flex flex-wrap gap-x-3 gap-y-1 items-center justify-center ">
             <div
               className={cn(
-                "bg-[#E7F6FD] border-2 border-brand rounded-xl py-2 px-7 text-brand transition-transform duration-1000",
+                "bg-[#E7F6FD] border-[3px] border-brand rounded-xl py-2 xl:py-4 px-7 text-brand transition-transform duration-1000",
                 "rotate-[-3deg]"
               )}
             >
@@ -59,11 +60,17 @@ const CTA = () => {
         <Link href="https://us.helicone.ai/signup" className="z-[10]">
           <Button
             size="lg"
-            className="text-base md:text-[40px] py-[10px] md:py-12 px-4 md:px-6 bg-brand hover:bg-brand/90 text-white font-normal rounded-lg md:rounded-2xl z-[10]"
+            className="md:gap-3 text-base md:text-[40px] py-[18px] md:py-12 px-4 md:px-12 bg-brand hover:bg-brand/100 text-white font-normal rounded-lg md:rounded-2xl z-[10]"
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
           >
             Try Helicone for free
+            {isHovered && (
+              <ChevronRightIcon
+                className="md:w-12 w-5 md:h-12 h-5"
+                strokeWidth={2.5}
+              />
+            )}
           </Button>
         </Link>
       </div>

bifrost/components/home/Companies.tsx

@@ -6,17 +6,18 @@ const Companies = () => {
   return (
     <div className="bg-[#f2f9fc] pb-12">
       <div className={cn(ISLAND_WIDTH, "flex flex-col gap-4 ")}>
-        <ul className="grid grid-cols-4 lg:grid-cols-8 gap-8 md:gap-12 px-4 md:px-8 grayscale opacity-40 items-center">
+        {/* <ul className="grid grid-cols-4 lg:grid-cols-8 gap-8 md:gap-12 px-2 md:px-8 grayscale opacity-40 items-center"> */}
+        <ul className="grid grid-cols-4 lg:grid-cols-8 gap-2 lg:gap-8 px-2 md:px-8 grayscale opacity-40 items-center">
           {(
             [
-              ["/static/qawolf.webp", "qawolf", 99, 33],
-              ["/static/sunrun.webp", "sunrun", 83, 33],
-              ["/static/filevine.webp", "filevine", 81, 33],
-              ["/static/slate.webp", "slate", 65, 33],
-              ["/static/mintlify.svg", "mintlify", 94, 33],
-              ["/static/upenn.webp", "upenn", 83, 33],
-              ["/static/togetherai.webp", "togetherai", 106, 33],
-              ["/static/swiss.webp", "swiss red cross", 150, 33],
+              ["/static/togetherai.webp", "togetherai", 169, 53],
+              ["/static/qawolf.webp", "qawolf", 157, 53],
+              ["/static/sunrun.webp", "sunrun", 132, 53],
+              ["/static/filevine.webp", "filevine", 130, 53],
+              ["/static/slate.webp", "slate", 92, 53],
+              ["/static/mintlify.svg", "mintlify", 150, 53],
+              ["/static/upenn.webp", "upenn", 132, 53],
+              ["/static/swiss.webp", "swiss red cross", 240, 53],
             ] as const
           ).map((src, index) => (
             <li className="flex items-center justify-center p-2" key={index}>

bifrost/components/home/Evaluate.tsx

@@ -24,7 +24,7 @@ const Evaluate = () => {
               <span className="text-brand">Prevent regression</span> and improve
               quality over-time
             </h2>
-            <p className="text-lg max-w-[520px]">
+            <p className="text-lg max-w-[520px] text-landing-description font-light leading-relaxed">
               Monitor performance in real-time and catch regressions
               pre-deployment with LLM-as-a-judge or custom evals
             </p>
@@ -58,7 +58,7 @@ const Evaluate = () => {
           <div
             className={cn(
               "bg-slate-50 border border-slate-200 px-6 py-3 cursor-pointer max-w-[550px] transition-all duration-300 ease-in-out",
-              isQuestionOpen ? "rounded-2xl" : "rounded-[100px]"
+              isQuestionOpen ? "rounded-2xl" : "rounded-[24px]"
             )}
             onClick={() => setIsQuestionOpen(!isQuestionOpen)}
           >
@@ -85,10 +85,10 @@ const Evaluate = () => {
               )}
             >
               <div className="overflow-hidden">
-                <p className="text-lg text-[#ACB3BA]">
+                <p className="text-sm sm:text-lg font-light text-gray-400">
                   Online evaluation tests systems in real-time using live data
-                  and actual user interactions. It’s useful to capture dynamic
-                  real-world scenarios. <br />
+                  and actual user interactions. It&apos;s useful to capture
+                  dynamic real-world scenarios. <br />
                   <br />
                   In contrast, offline evaluation occurs in controlled,
                   simulated environments using previous requests or synthetic

bifrost/components/home/Experiment.tsx

@@ -321,7 +321,7 @@ const Experiment = () => {
                 Push <span className="text-brand">high-quality</span> prompt
                 changes to production
               </h2>
-              <p className="text-lg max-w-[520px]">
+              <p className="text-lg max-w-[520px] text-landing-description font-light leading-relaxed">
                 Tune your prompts and justify your iterations with quantifiable
                 data, not just “vibes”.
               </p>

bifrost/components/home/FAQ.tsx

@@ -28,6 +28,8 @@ const FAQ = () => {
               limiting, API key management.
             </AccordionContent>
           </AccordionItem>
+          <hr className="my-2 border-t border-slate-200" />
+
           <AccordionItem value="item-2" className="border-b-0">
             <AccordionTrigger className="text-slate-500 text-base sm:text-lg font-medium text-left">
               I don&apos;t want to use Helicone&apos;s Proxy, can I still use
@@ -45,6 +47,7 @@ const FAQ = () => {
               infrastructure.
             </AccordionContent>
           </AccordionItem>
+          <hr className="my-2 border-t border-slate-200" />
           <AccordionItem value="item-3" className="border-b-0">
             <AccordionTrigger className="text-slate-500 text-base sm:text-lg font-medium text-left">
               How do you calculate the cost of LLM requests?{" "}
@@ -60,6 +63,7 @@ const FAQ = () => {
               Pricing Calculator.
             </AccordionContent>
           </AccordionItem>
+          <hr className="my-2 border-t border-slate-200" />
         </Accordion>
       </div>
     </div>

bifrost/components/home/LLMLifecycle.tsx

@@ -2412,7 +2412,7 @@ const LLMLifecycle = () => {
             Designed for the{" "}
             <span className="text-brand">entire LLM lifecycle</span>
           </h2>
-          <p className="text-lg sm:text-xl max-w-[400px] leading-relaxed text-wrap">
+          <p className="text-lg sm:text-xl max-w-[440px] text-wrap font-light leading-relaxed text-landing-description">
             The CI workflow to take your LLM application from MVP to production,
             and from production to perfection.
           </p>

bifrost/components/home/Log.tsx

@@ -16,7 +16,7 @@ const Log = () => {
             <h2 className="font-semibold text-4xl sm:text-5xl leading-[120%] max-w-[600px] text-wrap text-black">
               Dive deep into each trace and debug your agent with ease
             </h2>
-            <p className="text-lg max-w-[520px]">
+            <p className="text-lg max-w-[520px] text-landing-description font-light leading-relaxed">
               Visualize your multi-step LLM interactions, log requests in
               real-time and pinpoint root cause of errors.
             </p>

bifrost/components/home/OpenSource.tsx

@@ -194,7 +194,7 @@ const OpenSource = async () => {
           <h2 className="font-semibold text-4xl sm:text-5xl leading-[120%]  text-black">
             Proudly <span className="text-brand">open-source</span>
           </h2>
-          <p className="text-base sm:text-xl">
+          <p className="text-lg sm:text-xl font-light leading-relaxed text-landing-description">
             We value transparency and we believe in the power of community.
           </p>
         </div>
@@ -284,9 +284,9 @@ const OpenSource = async () => {
         <Link
           href="/llm-cost"
           target="_blank"
-          className="col-span-1 md:col-span-4 p-6 bg-slate-50 rounded-xl border border-slate-200 flex justify-between relative hover:bg-slate-100"
+          className="col-span-1 md:col-span-4 px-6 pt-6 pb-2 sm:pb-6 bg-slate-50 rounded-xl border border-slate-200 flex flex-col sm:flex-row items-center sm:items-stretch gap-y-8 justify-between relative hover:bg-slate-100"
         >
-          <div className="flex flex-col gap-10">
+          <div className="flex flex-col gap-4 sm:gap-10">
             <div className="flex flex-col gap-2">
               <p className="text-sm text-slate-500">Built by Helicone</p>
               <div className="flex items-center gap-2">

bifrost/components/home/Production.tsx

@@ -18,7 +18,7 @@ const Production = () => {
             Turn complexity and abstraction to{" "}
             <span className="text-brand">actionable insights</span>
           </h2>
-          <p className="text-base sm:text-lg max-w-[520px]">
+          <p className="text-lg max-w-[520px] text-landing-description font-light leading-relaxed">
             Unified insights across all providers to quickly detect
             hallucinations, abuse and performance issues.
           </p>

bifrost/components/home/Prototype.tsx

@@ -104,7 +104,15 @@ const PrototypeSidebar = ({
                   >
                     <div className="flex items-center">
                       <HomeIcon className="mr-2 h-4 w-4" />
-                      Dashboard
+                      <div className="relative">
+                        Dashboard
+                        {openedPage !== "dashboard" && (
+                          <>
+                            <div className="absolute w-1.5 h-1.5 bg-[#32ACEB] rounded-full top-[1px] right-[-9px]"></div>
+                            <div className="absolute w-1.5 h-1.5 bg-[#32ACEB] rounded-full top-[1px] right-[-9px] animate-ping"></div>
+                          </>
+                        )}
+                      </div>
                     </div>
                   </div>
                   <div
@@ -122,8 +130,12 @@ const PrototypeSidebar = ({
                       <TableCellsIcon className="mr-2 h-4 w-4" />
                       <div className="relative">
                         Requests
-                        <div className="absolute w-1.5 h-1.5 bg-[#32ACEB] rounded-full top-[1px] right-[-9px]"></div>
-                        <div className="absolute w-1.5 h-1.5 bg-[#32ACEB] rounded-full top-[1px] right-[-9px] animate-ping"></div>
+                        {openedPage !== "requests" && (
+                          <>
+                            <div className="absolute w-1.5 h-1.5 bg-[#32ACEB] rounded-full top-[1px] right-[-9px]"></div>
+                            <div className="absolute w-1.5 h-1.5 bg-[#32ACEB] rounded-full top-[1px] right-[-9px] animate-ping"></div>
+                          </>
+                        )}
                       </div>
                     </div>
                   </div>
@@ -148,8 +160,12 @@ const PrototypeSidebar = ({
                       <ListTreeIcon className="mr-2 h-4 w-4" />
                       <div className="relative">
                         Sessions
-                        <div className="absolute w-1.5 h-1.5 bg-[#32ACEB] rounded-full top-[1px] right-[-9px]"></div>
-                        <div className="absolute w-1.5 h-1.5 bg-[#32ACEB] rounded-full top-[1px] right-[-9px] animate-ping"></div>
+                        {openedPage !== "sessions" && (
+                          <>
+                            <div className="absolute w-1.5 h-1.5 bg-[#32ACEB] rounded-full top-[1px] right-[-9px]"></div>
+                            <div className="absolute w-1.5 h-1.5 bg-[#32ACEB] rounded-full top-[1px] right-[-9px] animate-ping"></div>
+                          </>
+                        )}
                       </div>
                     </div>
                   </div>

bifrost/components/home/Quote.tsx

@@ -5,32 +5,32 @@ const Quote = () => {
   return (
     <div className="bg-[#f2f9fc] pt-12 pb-20 lg:pb-48 lg:px-16">
       <div className={cn(ISLAND_WIDTH)}>
-        <div className="flex flex-col gap-y-9 lg:flex-row justify-between items-start lg:items-end">
-          <h2 className="text-2xl md:text-[40px] tracking-tight leading-normal md:leading-[52px] font-semibold text-[#ACB3BA] lg:max-w-[780px] text-wrap mr-20">
+        <div className="flex flex-col gap-y-8 lg:flex-row justify-between items-start lg:items-end">
+          <h2 className="text-2xl md:text-[40px] tracking-tight leading-normal md:leading-[52px] font-semibold text-[#ACB3BA] w-full lg:max-w-[780px] text-wrap lg:mr-20">
             The ability to test prompt variations on production traffic without
             touching a line of code is magical.{" "}
             <span className="text-black">
-              It feels like we’re cheating; it’s just that good!
+              It feels like we&apos;re cheating; it&apos;s just that good!
             </span>
           </h2>
-          <div className="flex flex-col gap-3">
+          <div className="flex items-end gap-6">
             <img
-              src="/static/qawolf.webp"
-              alt="qawolf"
-              className="w-20 sm:w-36"
+              src="/static/home/nishantshukla.webp"
+              alt="nishant shukla"
+              className="w-12 h-12"
             />
-            <div className="flex items-center gap-6">
+            <div className="flex flex-col gap-2">
               <img
-                src="/static/home/nishantshukla.webp"
-                alt="nishant shukla"
-                className="w-12 h-12"
+                src="/static/qawolf.webp"
+                alt="qawolf"
+                className="w-32 pb-2"
               />
-              <div className="flex flex-col gap-1">
-                <h4 className="text-[13px] sm:text-xl font-medium">
-                  Nishant Shukla
-                </h4>
-                <p className="text-[11px] sm:text-lg">Sr. Director of AI</p>
-              </div>
+              <h4 className="text-[17px] sm:text-xl font-medium whitespace-nowrap">
+                Nishant Shukla
+              </h4>
+              <p className="text-[15px] sm:text-lg w-auto">
+                Sr. Director of AI
+              </p>
             </div>
           </div>
         </div>

bifrost/components/home/Quote2.tsx

@@ -18,8 +18,8 @@ const Quote2 = () => {
 
       <div
         className={cn(
-          "bg-slate-50 border border-slate-200 px-6 py-3 cursor-pointer max-w-[750px] transition-all duration-300 ease-in-out",
-          isQuestionOpen ? "rounded-2xl" : "rounded-[100px]"
+          "bg-slate-50 border border-slate-200 px-6 py-3 cursor-pointer max-w-[750px] transition-all duration-300 ease-in-out align-text-top",
+          isQuestionOpen ? "rounded-2xl" : "rounded-[24px]"
         )}
         onClick={() => setIsQuestionOpen(!isQuestionOpen)}
       >
@@ -29,7 +29,7 @@ const Quote2 = () => {
           )}
         >
           <p className="text-sm sm:text-lg">
-            What if I don’t want Helicone to be in my critical path.{" "}
+            What if I don&apos;t want Helicone to be in my critical path?
           </p>
           <div className="transition-transform duration-300">
             {isQuestionOpen ? (
@@ -48,7 +48,7 @@ const Quote2 = () => {
           )}
         >
           <div className="overflow-hidden">
-            <p className="text-sm sm:text-lg text-[#ACB3BA]">
+            <p className="text-sm sm:text-lg font-light text-gray-400">
               There are two ways to interface with Helicone - Proxy and Async.
               You can integrate with Helicone using the async integration to
               ensure zero propagation delay, or choose proxy for the simplest

bifrost/components/home/Quote3.tsx

@@ -6,28 +6,29 @@ const Quote3 = () => {
     <div className="bg-white sm:bg-gradient-to-b sm:from-white sm:to-[#F2F9FC] pt-10 pb-20 sm:pb-40">
       <div className={cn(ISLAND_WIDTH)}>
         <div className="flex flex-col gap-y-9 lg:flex-row justify-between items-start lg:items-end">
-          <h2 className="text-2xl md:text-[40px] tracking-tight leading-normal md:leading-[52px] font-semibold text-[#ACB3BA] lg:max-w-[780px] text-wrap mr-20">
-            {" "}
+          <h2 className="text-2xl md:text-[40px] tracking-tight leading-normal md:leading-[52px] font-semibold text-[#ACB3BA] w-full lg:max-w-[780px] text-wrap mr-20">
             Thank you for an{" "}
             <span className="text-black">
               excellent observability platform!
             </span>{" "}
-            . I pretty much use it for all my AI apps now.
+            I pretty much use it for all my AI apps now.
           </h2>
-          <div className="flex flex-col gap-3">
-            <img src="/static/togetherai.webp" alt="qawolf" className="w-36" />
-            <div className="flex items-center gap-6">
+          <div className="flex items-end gap-6">
+            <img
+              src="/static/home/hassan.webp"
+              alt="Hassan El Mghari"
+              className="w-12 h-12"
+            />
+            <div className="flex flex-col gap-2">
               <img
-                src="/static/home/hassan.webp"
-                alt="Hassan El Mghari"
-                className="w-12 h-12"
+                src="/static/togetherai.webp"
+                alt="qawolf"
+                className="w-28 pb-2"
               />
-              <div className="flex flex-col gap-1">
-                <h4 className="text-[13px] sm:text-xl font-medium">
-                  Hassan El Mghari
-                </h4>
-                <p className="text-[11px] sm:text-lg">Devrel Lead</p>
-              </div>
+              <h4 className="text-[17px] sm:text-xl font-medium whitespace-nowrap">
+                Hassan El Mghari
+              </h4>
+              <p className="text-[15px] sm:text-lg w-auto">DevRel Lead</p>
             </div>
           </div>
         </div>

bifrost/components/home/Stats.tsx

@@ -62,7 +62,7 @@ const Stats = ({
           <span
             ref={elementRef}
             className={cn(
-              "inline-block bg-[#E7F6FD] border-[3px] border-brand rounded-xl py-2 px-7 text-brand translate-y-[-10px] transition-transform duration-500 text-nowrap",
+              "inline-block bg-[#E7F6FD] border-[3px] border-brand rounded-xl py-1 px-5 text-brand translate-y-[-10px] transition-transform duration-500 text-nowrap",
               isVisible ? "rotate-[-3deg]" : "rotate-[0  deg]"
             )}
           >