Skip to content

Commit 95fdf57

Browse files
author
Praveen Yadav
authored
Feat redesign page (#8)
* feat(website): add balancer for text information * chore(website): update website content
1 parent 01dd4c4 commit 95fdf57

27 files changed

+1128
-529
lines changed

‎frontend/apps/website/app/(default)/layout.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import AOS from "aos";
44
import "aos/dist/aos.css";
55
import Footer from "components/footer";
66
import Header from "components/header";
7+
import { Spotlight } from "components/spotlight";
78
import { useEffect } from "react";
89

910
export default function DefaultLayout({
@@ -23,6 +24,10 @@ export default function DefaultLayout({
2324
return (
2425
<>
2526
<Header />
27+
<Spotlight
28+
className="-top-40 left-0 lg:left-[25rem] lg:-top-[4rem]"
29+
fill="white"
30+
/>
2631
<main className="grow">{children}</main>
2732
<Footer />
2833
</>

‎frontend/apps/website/app/(default)/page.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import CTA from "components/cta";
2-
import FeaturesAPIGateway from "components/features/gateway";
3-
import FeaturesUniversalAPI from "components/features/universal-api";
2+
import AIGateway from "components/features/ai-gateway";
3+
import AIRouter from "components/features/ai-router";
44
import Hero from "components/hero";
5+
import { TiltedDashboard } from "components/tilt";
56

67
export default function Page(): JSX.Element {
78
return (
89
<>
910
<Hero />
10-
<FeaturesUniversalAPI />
11-
<FeaturesAPIGateway />
11+
<TiltedDashboard />
12+
<AIRouter />
13+
<AIGateway />
1214
<CTA />
1315
</>
1416
);

‎frontend/apps/website/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function RootLayout({
1717
return (
1818
<html lang="en" suppressHydrationWarning>
1919
<body
20-
className={`${outfit.className} antialiased bg-slate-900 text-slate-100 tracking-tight`}
20+
className={`${outfit.className} antialiased bg-[#101010] text-neutral-100 tracking-tight`}
2121
>
2222
<div className="flex flex-col min-h-screen overflow-hidden">
2323
<Providers>{children}</Providers>

‎frontend/apps/website/components/bento-grid.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { cn } from "lib/utils";
2+
3+
export const BentoGrid = ({
4+
className,
5+
children,
6+
}: {
7+
className?: string;
8+
children?: React.ReactNode;
9+
}) => {
10+
return (
11+
<div
12+
className={cn(
13+
"grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto ",
14+
className,
15+
)}
16+
>
17+
{children}
18+
</div>
19+
);
20+
};
21+
22+
export const BentoGridItem = ({
23+
className,
24+
title,
25+
description,
26+
header,
27+
icon,
28+
}: {
29+
className?: string;
30+
title?: string | React.ReactNode;
31+
description?: string | React.ReactNode;
32+
header?: React.ReactNode;
33+
icon?: React.ReactNode;
34+
}) => {
35+
return (
36+
<div
37+
className={cn(
38+
"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",
39+
className,
40+
)}
41+
>
42+
{header}
43+
<div className="group-hover/bento:translate-x-2 transition duration-200">
44+
{icon}
45+
<div className="font-sans font-bold text-neutral-600 dark:text-neutral-200 mb-2 mt-2">
46+
{title}
47+
</div>
48+
<div className="font-sans font-normal text-neutral-600 text-xs dark:text-neutral-300">
49+
{description}
50+
</div>
51+
</div>
52+
</div>
53+
);
54+
};

‎frontend/apps/website/components/card-hover-effect.tsx‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import { AnimatePresence, motion } from "framer-motion";
2+
import { cn } from "lib/utils";
3+
import Link from "next/link";
4+
import React, { useState } from "react";
5+
6+
export const HoverEffect = ({
7+
items,
8+
className,
9+
}: {
10+
items: {
11+
title: string;
12+
description: React.ReactNode;
13+
link?: string;
14+
}[];
15+
className?: string;
16+
}) => {
17+
let [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
18+
19+
return (
20+
<div
21+
className={cn(
22+
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 py-10",
23+
className,
24+
)}
25+
>
26+
{items.map((item, idx) => {
27+
const component = (
28+
<>
29+
<AnimatePresence>
30+
{hoveredIndex === idx && (
31+
<motion.span
32+
className="absolute inset-0 h-full w-full bg-neutral-200 dark:bg-neutral-800/[0.20] block rounded-3xl"
33+
layoutId="hoverBackground"
34+
initial={{ opacity: 0 }}
35+
animate={{
36+
opacity: 1,
37+
transition: { duration: 0.15 },
38+
}}
39+
exit={{
40+
opacity: 0,
41+
transition: { duration: 0.15, delay: 0.2 },
42+
}}
43+
/>
44+
)}
45+
</AnimatePresence>
46+
<Card>
47+
<CardTitle>{item.title}</CardTitle>
48+
<CardDescription>{item.description}</CardDescription>
49+
</Card>
50+
</>
51+
);
52+
return item.link ? (
53+
<Link
54+
href={item?.link}
55+
key={item?.title}
56+
className="relative group block p-2 h-full w-full"
57+
onMouseEnter={() => setHoveredIndex(idx)}
58+
onMouseLeave={() => setHoveredIndex(null)}
59+
>
60+
{component}
61+
</Link>
62+
) : (
63+
<div
64+
key={item?.title}
65+
className="relative group block p-2 h-full w-full"
66+
onMouseEnter={() => setHoveredIndex(idx)}
67+
onMouseLeave={() => setHoveredIndex(null)}
68+
>
69+
{component}
70+
</div>
71+
);
72+
})}
73+
</div>
74+
);
75+
};
76+
77+
export const Card = ({
78+
className,
79+
children,
80+
}: {
81+
className?: string;
82+
children: React.ReactNode;
83+
}) => {
84+
return (
85+
<div
86+
className={cn(
87+
"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",
88+
className,
89+
)}
90+
>
91+
<div className="relative z-50">
92+
<div className="p-4">{children}</div>
93+
</div>
94+
</div>
95+
);
96+
};
97+
export const CardTitle = ({
98+
className,
99+
children,
100+
}: {
101+
className?: string;
102+
children: React.ReactNode;
103+
}) => {
104+
return (
105+
<h4 className={cn("text-zinc-100 font-bold tracking-wide mt-4", className)}>
106+
{children}
107+
</h4>
108+
);
109+
};
110+
export const CardDescription = ({
111+
className,
112+
children,
113+
}: {
114+
className?: string;
115+
children: React.ReactNode;
116+
}) => {
117+
return (
118+
<div
119+
className={cn(
120+
"mt-8 text-zinc-400 tracking-wide leading-relaxed text-sm",
121+
className,
122+
)}
123+
>
124+
{children}
125+
</div>
126+
);
127+
};

‎frontend/apps/website/components/cta.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import Balance from "react-wrap-balancer";
2+
13
export default function CTA() {
24
return (
35
<section>
@@ -7,8 +9,7 @@ export default function CTA() {
79
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"
810
aria-hidden="true"
911
>
10-
<div className="absolute inset-0 translate-z-0 bg-violet-500 rounded-full blur-[120px] opacity-70" />
11-
<div className="absolute w-1/4 h-1/4 translate-z-0 bg-violet-400 rounded-full blur-[40px]" />
12+
<div className="absolute inset-0 translate-z-0 bg-neutral-500 rounded-full blur-[120px] opacity-10" />
1213
</div>
1314

1415
<div className="max-w-3xl mx-auto text-center">
@@ -17,14 +18,14 @@ export default function CTA() {
1718
playgrounds
1819
</span>
1920
</div>
20-
<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">
21-
AI workflows
21+
<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">
22+
LLM Playground
2223
</h2>
23-
<p className="text-sm sm:text-xl text-slate-400 tracking-wide mb-8 antialiased leading-snug">
24-
Use AI studio to create, experiment, deploy and scale LLM powered
25-
workflows using the latest AI models like GPT-4-turbo, DALL·E 3
26-
and Claude 2
27-
</p>
24+
<Balance className="text-base text-neutral-300 mb-8 tracking-wide">
25+
If you are experimenting with LLMs, getting started with them can
26+
be cumbersome. We provides playground studio to play with and to
27+
make decision to use in a production-ready.
28+
</Balance>
2829
<div>
2930
<a
3031
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"

‎frontend/apps/website/components/features/ai-gateway.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
"use client";
2+
import { HoverEffect } from "components/card-hover-effect";
3+
import Particles from "components/particles";
4+
import Balance from "react-wrap-balancer";
5+
export const projects = [
6+
{
7+
title: "Observability",
8+
description: (
9+
<div>
10+
<div className="text-sm mb-2">
11+
<b>Logging</b>: Keep track of all requests for monitoring and
12+
debugging.
13+
</div>
14+
<span className="text-sm">
15+
<b>Requests Tracing</b>: Understand the journey of each request for
16+
optimization.
17+
</span>
18+
</div>
19+
),
20+
},
21+
{
22+
title: "Usage monitoring",
23+
description: "Track and analyze usage, requests, tokens, cache, and more.",
24+
},
25+
{
26+
title: "Performance monitoring",
27+
description:
28+
"Understand how much users, requests and models are costing you.",
29+
},
30+
{
31+
title: "LLM optimization",
32+
description: "Easily add remote cache, rate limits, and auto retries.",
33+
},
34+
{
35+
title: "API key Managment",
36+
description:
37+
"Keep your primary credentials away. Can be easily revoked or renewed for better access control",
38+
},
39+
];
40+
41+
export default function AIGateway() {
42+
return (
43+
<section className="relative">
44+
<div className="absolute left-1/2 -translate-x-1/2 top-0 -z-10 w-80 h-80 -mt-24 -ml-32">
45+
<Particles
46+
className="absolute inset-0 -z-10"
47+
quantity={6}
48+
staticity={30}
49+
/>
50+
</div>
51+
52+
<div
53+
className="absolute top-0 -translate-y-1/4 left-1/2 -translate-x-1/2 blur-2xl opacity-50 pointer-events-none -z-10"
54+
aria-hidden="true"
55+
>
56+
<svg xmlns="http://www.w3.org/2000/svg" width="434" height="427">
57+
<defs>
58+
<linearGradient
59+
id="bs3-a"
60+
x1="19.609%"
61+
x2="50%"
62+
y1="14.544%"
63+
y2="100%"
64+
>
65+
<stop offset="0%" stopColor="#6366F1" />
66+
<stop offset="100%" stopColor="#6366F1" stopOpacity="0" />
67+
</linearGradient>
68+
</defs>
69+
<path
70+
fill="url(#bs3-a)"
71+
fillRule="evenodd"
72+
d="m410 0 461 369-284 58z"
73+
transform="matrix(1 0 0 -1 -410 427)"
74+
/>
75+
</svg>
76+
</div>
77+
<div className="max-w-6xl mx-auto px-4 sm:px-6 ">
78+
<div className="pt-16 md:pt-32 md:pb-32">
79+
<div className="max-w-3xl mx-auto text-center pb-12 md:pb-20">
80+
<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">
81+
AI Gateway
82+
</h2>
83+
<Balance className="text-base text-neutral-300 mb-8 tracking-wide">
84+
Missing studio AI gateway allow you gain visibility, control and
85+
insights about API Application uses. Track all your LLM requests
86+
transparently and conveys the insights needed to make data-driven
87+
decisions.
88+
</Balance>
89+
</div>
90+
91+
<HoverEffect items={projects} />
92+
</div>
93+
</div>
94+
</section>
95+
);
96+
}

0 commit comments

Comments
 (0)