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

Jump to bottom

feat: update website content #8

Merged
merged 2 commits into from
Feb 18, 2024
Merged

feat: update website content #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc70606
feat(website): add balancer for text information
pyadav Feb 17, 2024
85cd875
chore(website): update website content
pyadav Feb 18, 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
5 changes: 5 additions & 0 deletions frontend/apps/website/app/(default)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import AOS from "aos";
import "aos/dist/aos.css";
import Footer from "components/footer";
import Header from "components/header";
import { Spotlight } from "components/spotlight";
import { useEffect } from "react";

export default function DefaultLayout({
Expand All @@ -23,6 +24,10 @@ export default function DefaultLayout({
return (
<>
<Header />
<Spotlight
className="-top-40 left-0 lg:left-[25rem] lg:-top-[4rem]"
fill="white"
/>
<main className="grow">{children}</main>
<Footer />
</>
Expand Down
10 changes: 6 additions & 4 deletions frontend/apps/website/app/(default)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import CTA from "components/cta";
import FeaturesAPIGateway from "components/features/gateway";
import FeaturesUniversalAPI from "components/features/universal-api";
import AIGateway from "components/features/ai-gateway";
import AIRouter from "components/features/ai-router";
import Hero from "components/hero";
import { TiltedDashboard } from "components/tilt";

export default function Page(): JSX.Element {
return (
<>
<Hero />
<FeaturesUniversalAPI />
<FeaturesAPIGateway />
<TiltedDashboard />
<AIRouter />
<AIGateway />
<CTA />
</>
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/apps/website/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<body
className={`${outfit.className} antialiased bg-slate-900 text-slate-100 tracking-tight`}
className={`${outfit.className} antialiased bg-[#101010] text-neutral-100 tracking-tight`}
>
<div className="flex flex-col min-h-screen overflow-hidden">
<Providers>{children}</Providers>
Expand Down
54 changes: 54 additions & 0 deletions frontend/apps/website/components/bento-grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { cn } from "lib/utils";

export const BentoGrid = ({
className,
children,
}: {
className?: string;
children?: React.ReactNode;
}) => {
return (
<div
className={cn(
"grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto ",
className,
)}
>
{children}
</div>
);
};

export const BentoGridItem = ({
className,
title,
description,
header,
icon,
}: {
className?: string;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
header?: React.ReactNode;
icon?: React.ReactNode;
}) => {
return (
<div
className={cn(
"row-span-1 rounded-xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/[0.2] bg-white border border-transparent justify-between flex flex-col space-y-4",
className,
)}
>
{header}
<div className="group-hover/bento:translate-x-2 transition duration-200">
{icon}
<div className="font-sans font-bold text-neutral-600 dark:text-neutral-200 mb-2 mt-2">
{title}
</div>
<div className="font-sans font-normal text-neutral-600 text-xs dark:text-neutral-300">
{description}
</div>
</div>
</div>
);
};
127 changes: 127 additions & 0 deletions frontend/apps/website/components/card-hover-effect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "lib/utils";
import Link from "next/link";
import React, { useState } from "react";

export const HoverEffect = ({
items,
className,
}: {
items: {
title: string;
description: React.ReactNode;
link?: string;
}[];
className?: string;
}) => {
let [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

return (
<div
className={cn(
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 py-10",
className,
)}
>
{items.map((item, idx) => {
const component = (
<>
<AnimatePresence>
{hoveredIndex === idx && (
<motion.span
className="absolute inset-0 h-full w-full bg-neutral-200 dark:bg-neutral-800/[0.20] block rounded-3xl"
layoutId="hoverBackground"
initial={{ opacity: 0 }}
animate={{
opacity: 1,
transition: { duration: 0.15 },
}}
exit={{
opacity: 0,
transition: { duration: 0.15, delay: 0.2 },
}}
/>
)}
</AnimatePresence>
<Card>
<CardTitle>{item.title}</CardTitle>
<CardDescription>{item.description}</CardDescription>
</Card>
</>
);
return item.link ? (
<Link
href={item?.link}
key={item?.title}
className="relative group block p-2 h-full w-full"
onMouseEnter={() => setHoveredIndex(idx)}
onMouseLeave={() => setHoveredIndex(null)}
>
{component}
</Link>
) : (
<div
key={item?.title}
className="relative group block p-2 h-full w-full"
onMouseEnter={() => setHoveredIndex(idx)}
onMouseLeave={() => setHoveredIndex(null)}
>
{component}
</div>
);
})}
</div>
);
};

export const Card = ({
className,
children,
}: {
className?: string;
children: React.ReactNode;
}) => {
return (
<div
className={cn(
"rounded-2xl h-full w-full p-4 overflow-hidden bg-black border border-transparent dark:border-white/[0.2] group-hover:border-slate-700 relative z-20",
className,
)}
>
<div className="relative z-50">
<div className="p-4">{children}</div>
</div>
</div>
);
};
export const CardTitle = ({
className,
children,
}: {
className?: string;
children: React.ReactNode;
}) => {
return (
<h4 className={cn("text-zinc-100 font-bold tracking-wide mt-4", className)}>
{children}
</h4>
);
};
export const CardDescription = ({
className,
children,
}: {
className?: string;
children: React.ReactNode;
}) => {
return (
<div
className={cn(
"mt-8 text-zinc-400 tracking-wide leading-relaxed text-sm",
className,
)}
>
{children}
</div>
);
};
19 changes: 10 additions & 9 deletions frontend/apps/website/components/cta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import Balance from "react-wrap-balancer";

export default function CTA() {
return (
<section>
Expand All @@ -7,8 +9,7 @@ export default function CTA() {
className="absolute flex items-center justify-center top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 pointer-events-none -z-10 w-1/3 aspect-square"
aria-hidden="true"
>
<div className="absolute inset-0 translate-z-0 bg-violet-500 rounded-full blur-[120px] opacity-70" />
<div className="absolute w-1/4 h-1/4 translate-z-0 bg-violet-400 rounded-full blur-[40px]" />
<div className="absolute inset-0 translate-z-0 bg-neutral-500 rounded-full blur-[120px] opacity-10" />
</div>

<div className="max-w-3xl mx-auto text-center">
Expand All @@ -17,14 +18,14 @@ export default function CTA() {
playgrounds
</span>
</div>
<h2 className="text-3xl md:text-6xl font-bold bg-clip-text !leading-tight text-transparent bg-gradient-to-r from-slate-200/60 via-violet-200 to-slate-200/60 mb-4">
AI workflows
<h2 className="text-4xl md:text-6xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 bg-opacity-50 mb-4 !leading-tight">
LLM Playground
</h2>
<p className="text-sm sm:text-xl text-slate-400 tracking-wide mb-8 antialiased leading-snug">
Use AI studio to create, experiment, deploy and scale LLM powered
workflows using the latest AI models like GPT-4-turbo, DALL·E 3
and Claude 2
</p>
<Balance className="text-base text-neutral-300 mb-8 tracking-wide">
If you are experimenting with LLMs, getting started with them can
be cumbersome. We provides playground studio to play with and to
make decision to use in a production-ready.
</Balance>
<div>
<a
className="btn text-slate-900 bg-gradient-to-r from-white/80 via-white to-white/80 hover:bg-white transition duration-150 ease-in-out group"
Expand Down
96 changes: 96 additions & 0 deletions frontend/apps/website/components/features/ai-gateway.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
"use client";
import { HoverEffect } from "components/card-hover-effect";
import Particles from "components/particles";
import Balance from "react-wrap-balancer";
export const projects = [
{
title: "Observability",
description: (
<div>
<div className="text-sm mb-2">
<b>Logging</b>: Keep track of all requests for monitoring and
debugging.
</div>
<span className="text-sm">
<b>Requests Tracing</b>: Understand the journey of each request for
optimization.
</span>
</div>
),
},
{
title: "Usage monitoring",
description: "Track and analyze usage, requests, tokens, cache, and more.",
},
{
title: "Performance monitoring",
description:
"Understand how much users, requests and models are costing you.",
},
{
title: "LLM optimization",
description: "Easily add remote cache, rate limits, and auto retries.",
},
{
title: "API key Managment",
description:
"Keep your primary credentials away. Can be easily revoked or renewed for better access control",
},
];

export default function AIGateway() {
return (
<section className="relative">
<div className="absolute left-1/2 -translate-x-1/2 top-0 -z-10 w-80 h-80 -mt-24 -ml-32">
<Particles
className="absolute inset-0 -z-10"
quantity={6}
staticity={30}
/>
</div>

<div
className="absolute top-0 -translate-y-1/4 left-1/2 -translate-x-1/2 blur-2xl opacity-50 pointer-events-none -z-10"
aria-hidden="true"
>
<svg xmlns="http://www.w3.org/2000/svg" width="434" height="427">
<defs>
<linearGradient
id="bs3-a"
x1="19.609%"
x2="50%"
y1="14.544%"
y2="100%"
>
<stop offset="0%" stopColor="#6366F1" />
<stop offset="100%" stopColor="#6366F1" stopOpacity="0" />
</linearGradient>
</defs>
<path
fill="url(#bs3-a)"
fillRule="evenodd"
d="m410 0 461 369-284 58z"
transform="matrix(1 0 0 -1 -410 427)"
/>
</svg>
</div>
<div className="max-w-6xl mx-auto px-4 sm:px-6 ">
<div className="pt-16 md:pt-32 md:pb-32">
<div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
<h2 className="text-4xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 bg-opacity-50 pb-3 mb-4">
AI Gateway
</h2>
<Balance className="text-base text-neutral-300 mb-8 tracking-wide">
Missing studio AI gateway allow you gain visibility, control and
insights about API Application uses. Track all your LLM requests
transparently and conveys the insights needed to make data-driven
decisions.
</Balance>
</div>

<HoverEffect items={projects} />
</div>
</div>
</section>
);
}
Loading