Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Landing page refined #2998

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Landing page refined #2998

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0d5a66c
updated landing page for web only
LinaLam Nov 26, 2024
0cc5d22
changed anthropic to one-line
LinaLam Nov 26, 2024
09a0094
animation for cta
LinaLam Nov 26, 2024
7044251
added credit
LinaLam Nov 27, 2024
05e0a72
final changes
LinaLam Nov 27, 2024
d65f571
mobile change
LinaLam Dec 4, 2024
79781bf
changed '
LinaLam Dec 4, 2024
4413466
fixed apostrophe
LinaLam Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions bifrost/app/experiments/TwoBillion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const TwoBillion = ({ className }: { className?: string }) => (
width="1410.29"
height="311.979"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
colorInterpolationFilters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5" />
Expand All @@ -84,8 +84,8 @@ export const TwoBillion = ({ className }: { className?: string }) => (
y2="256.5"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.65" stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
<stop offset="0.65" stopColor="white" />
<stop offset="1" stopColor="white" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint1_linear_196_9728"
Expand All @@ -95,8 +95,8 @@ export const TwoBillion = ({ className }: { className?: string }) => (
y2="302.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
<stop stopColor="white" />
<stop offset="1" stopColor="white" stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint2_linear_196_9728"
Expand All @@ -106,8 +106,8 @@ export const TwoBillion = ({ className }: { className?: string }) => (
y2="142.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" stop-opacity="0.3" />
<stop offset="1" stop-color="white" stop-opacity="0" />
<stop stopColor="white" stopOpacity="0.3" />
<stop offset="1" stopColor="white" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
Expand Down
24 changes: 12 additions & 12 deletions bifrost/app/experiments/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ const LightPurple = ({ className }: { className?: string }) => (
width="1631"
height="1631"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
colorInterpolationFilters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
Expand Down Expand Up @@ -73,9 +73,9 @@ const Purple = ({ className }: { className?: string }) => (
width="1760.97"
height="1232.46"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
colorInterpolationFilters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
Expand Down Expand Up @@ -111,9 +111,9 @@ const Blue = ({ className }: { className?: string }) => (
width="1631"
height="1631"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
colorInterpolationFilters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
Expand Down Expand Up @@ -152,9 +152,9 @@ const Pink = ({ className }: { className?: string }) => (
width="1950.73"
height="1720.48"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
colorInterpolationFilters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
Expand Down Expand Up @@ -233,9 +233,9 @@ const LightPurpleBottom = ({ className }: { className?: string }) => (
width="1631"
height="1631"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
colorInterpolationFilters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
Expand Down Expand Up @@ -319,9 +319,9 @@ const PinkBottom = ({ className }: { className?: string }) => (
width="1697"
height="1546"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
colorInterpolationFilters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
Expand Down
45 changes: 28 additions & 17 deletions bifrost/components/home/CTA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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]"
)}
>
Expand All @@ -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>
Expand Down Expand Up @@ -98,19 +105,19 @@ const CTA = () => {
<LogoBox
imgSrc="/static/home/gemini.webp"
className={cn(
"w-[178px] h-[178px] 2xl:w-[220px] 2xl:h-[220px] absolute bottom-28 left-4 rotate-[-27deg] transition-all duration-1000",
"w-[135px] h-[135px] 2xl:w-[220px] 2xl:h-[220px] absolute 2xl:bottom-44 bottom-28 left-4 rotate-[-27deg] transition-all duration-1000",
isHovered &&
"w-[160px] h-[160px] 2xl:w-[200px] 2xl:h-[200px] left-1/2 translate-x-[-380px] 2xl:translate-x-[-600px] bottom-16 rotate-[-27deg]"
"w-[150px] h-[150px] 2xl:w-[200px] 2xl:h-[200px] left-1/2 translate-x-[-380px] 2xl:translate-x-[-600px] bottom-16 rotate-[-27deg]"
)}
innerClassName="bg-white"
/>

<LogoBox
imgSrc="/static/home/logo2.webp"
className={cn(
"w-[140px] h-[140px] 2xl:w-[180px] 2xl:h-[180px] absolute top-1/3 left-44 2xl:left-56 transition-all duration-1000",
"w-[115px] h-[115px] 2xl:w-[180px] 2xl:h-[180px] absolute top-1/3 left-44 2xl:left-56 transition-all duration-1000",
isHovered &&
"!left-1/2 translate-x-[-450px] 2xl:translate-x-[-550px] translate-y-[50px] rotate-[17deg]"
"!left-1/2 translate-x-[-450px] 2xl:translate-x-[-500px] translate-y-[50px] rotate-[36deg]"
)}
/>

Expand All @@ -127,46 +134,49 @@ const CTA = () => {
<LogoBox
imgSrc="/static/home/chatgpt.webp"
className={cn(
"w-[194px] h-[194px] 2xl:w-[240px] 2xl:h-[240px] absolute top-0 left-36 2xl:left-48 transition-all duration-1000",
isHovered && "!left-1/2 translate-x-[-470px] top-10 rotate-[-45deg]"
"w-[170px] h-[170px] 2xl:w-[240px] 2xl:h-[240px] absolute top-0 left-36 2xl:left-48 2xl:p-4 transition-all duration-1000 rounded-[1.9rem] p-3.5",
isHovered &&
"!left-1/2 translate-x-[-470px] top-10 2xl:p-4 rotate-[-45deg]"
)}
innerClassName="bg-[#0FA37F] rounded-3xl"
/>

<LogoBox
imgSrc="/static/home/togetherai.webp"
className={cn(
"w-[142px] h-[142px] 2xl:w-[180px] 2xl:h-[180px] absolute top-0 right-4 rotate-[40deg] transition-all duration-1000",
isHovered && "right-1/2 translate-x-[400px] rotate-[-3deg]"
"w-[124px] h-[124px] 2xl:w-[180px] 2xl:h-[180px] absolute top-0 right-4 rotate-[40deg] transition-all duration-1000",
isHovered &&
"right-1/2 translate-x-[400px] 2xl:translate-y-[70px] rotate-[-30deg]"
)}
innerClassName="rounded-3xl"
/>

<LogoBox
imgSrc="/static/home/anthropic.webp"
className={cn(
"w-[176px] h-[176px] 2xl:w-[220px] 2xl:h-[220px] absolute bottom-40 right-20 2xl:translate-x-[50px] translate-x-[50px] rotate-[15deg] transition-all duration-1000",
"w-[150px] h-[150px] 2xl:w-[220px] 2xl:h-[220px] absolute bottom-24 right-20 2xl:translate-x-[50px] translate-x-[50px] rotate-[15deg] transition-all duration-1000",
isHovered &&
"bottom-20 right-1/2 translate-x-[400px] 2xl:translate-x-[560px] rotate-[28deg]"
"bottom-20 right-1/2 translate-x-[400px] 2xl:translate-x-[600px] 2xl:translate-y-[-100px] rotate-[40deg]"
)}
innerClassName="bg-white p-4"
/>

<LogoBox
imgSrc="/static/home/groq.svg"
className={cn(
"w-[135px] h-[135px] 2xl:w-[160px] 2xl:h-[160px] absolute top-1/3 right-56 rotate-[43deg] transition-all duration-1000",
"w-[120px] h-[120px] 2xl:w-[160px] 2xl:h-[160px] absolute top-1/3 2xl:top-1/2 right-56 rotate-[43deg] transition-all duration-1000",
isHovered &&
"right-1/2 translate-x-[400px] 2xl:translate-x-[500px] translate-y-[-30px] rotate-[15deg]"
"right-1/2 translate-x-[400px] 2xl:translate-x-[500px] translate-y-[-40px] 2xl:translate-y-[-110px] rotate-[15deg]"
)}
innerClassName="bg-white p-2"
/>

<LogoBox
imgSrc="/static/home/logo3.webp"
className={cn(
"w-28 h-28 2xl:w-32 2xl:h-32 absolute top-10 right-56 rotate-[-16deg] transition-all duration-1000",
isHovered && "top-6 right-1/2 translate-x-[200px] rotate-[-76deg]"
"w-28 h-28 2xl:w-40 2xl:h-40 absolute top-10 2xl:top-40 right-56 rotate-[-16deg] transition-all duration-1000",
isHovered &&
"top-6 right-1/2 translate-x-[180px] translate-y-[-30px] rotate-[-76deg] 2xl:w-36 2xl:h-36"
)}
innerClassName="bg-white p-2"
/>
Expand All @@ -175,7 +185,8 @@ const CTA = () => {
imgSrc="/static/home/logo4.webp"
className={cn(
"w-28 h-28 2xl:w-32 2xl:h-32 absolute top-1/4 right-10 transition-all duration-1000",
isHovered && "right-1/2 translate-x-[550px] top-1/2 rotate-[-45deg]"
isHovered &&
"right-1/2 translate-x-[550px] top-1/2 2xl:top-1/4 rotate-[-45deg]"
)}
/>
</div>
Expand Down
19 changes: 10 additions & 9 deletions bifrost/components/home/Companies.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", 104, 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}>
Expand Down
18 changes: 10 additions & 8 deletions bifrost/components/home/Evaluate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import EvaluateSVG from "@/public/static/home/evaluate";
const Evaluate = () => {
const [isQuestionOpen, setIsQuestionOpen] = useState(false);
return (
<div className="w-full pr-4 sm:pr-16 md:pr-24 2xl:pr-40 max-w-[2000px] mx-auto pt-28">
<div className="w-full px-0 md:pr-24 2xl:pr-40 max-w-[2000px] mx-auto pt-28">
<div className="grid grid-cols-1 md:grid-cols-2">
<EvaluateSVG />
<div className="flex flex-col items-start md:items-end gap-3 md:gap-9 order-1 md:order-2 pl-4 md:pl-0">
<div className="flex flex-col items-start md:items-end gap-3 md:gap-9 order-1 md:order-2 px-4 sm:pr-0 sm:pl-16">
<div className="flex items-center gap-2.5">
<p className="text-base sm:text-xl">02</p>
<div className="text-base sm:text-lg font-medium text-slate-700">
Expand All @@ -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>
Expand Down Expand Up @@ -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)}
>
Expand All @@ -67,7 +67,9 @@ const Evaluate = () => {
"flex justify-between items-center transition-all duration-300"
)}
>
<p className="text-lg">What is online and offline evaluation?</p>
<p className="ext-sm sm:text-lg">
What is online and offline evaluation?
</p>
<div className="transition-transform duration-300">
{isQuestionOpen ? (
<XIcon className="h-4 w-4 rotate-0" />
Expand All @@ -85,10 +87,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
Expand Down
2 changes: 1 addition & 1 deletion bifrost/components/home/Experiment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions bifrost/components/home/FAQ.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ 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
Expand All @@ -45,6 +46,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?{" "}
Expand All @@ -60,6 +62,7 @@ const FAQ = () => {
Pricing Calculator.
</AccordionContent>
</AccordionItem>
<hr className="my-2 border-t border-slate-200" />
</Accordion>
</div>
</div>
Expand Down
Loading
Loading