diff --git a/frontend/apps/website/app/(default)/layout.tsx b/frontend/apps/website/app/(default)/layout.tsx
new file mode 100644
index 0000000..af6f71e
--- /dev/null
+++ b/frontend/apps/website/app/(default)/layout.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import AOS from "aos";
+import "aos/dist/aos.css";
+import { useEffect } from "react";
+import Footer from "~/components/footer";
+import Header from "~/components/header";
+
+export default function DefaultLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ useEffect(() => {
+ AOS.init({
+ once: true,
+ disable: "phone",
+ duration: 1000,
+ easing: "ease-out-cubic",
+ });
+ });
+
+ return (
+ <>
+
+ {children}
+
+ >
+ );
+}
diff --git a/frontend/apps/website/app/(default)/page.tsx b/frontend/apps/website/app/(default)/page.tsx
new file mode 100644
index 0000000..62ba916
--- /dev/null
+++ b/frontend/apps/website/app/(default)/page.tsx
@@ -0,0 +1,15 @@
+import CTA from "~/components/cta";
+import FeaturesAPIGateway from "~/components/features/gateway";
+import FeaturesUniversalAPI from "~/components/features/universal-api";
+import Hero from "~/components/hero";
+
+export default function Page(): JSX.Element {
+ return (
+ <>
+
+
+
+
+ >
+ );
+}
diff --git a/frontend/apps/website/app/layout.tsx b/frontend/apps/website/app/layout.tsx
index 51ff541..5265ccd 100644
--- a/frontend/apps/website/app/layout.tsx
+++ b/frontend/apps/website/app/layout.tsx
@@ -1,7 +1,6 @@
import type { Metadata } from "next";
-import { MilkeyWay } from "~/components/MilkyWay";
-import { opensans } from "../styles/fonts";
-import "../styles/globals.css";
+import { opensans } from "~/styles/fonts";
+import "~/styles/globals.css";
import { Providers } from "./providers";
export const metadata: Metadata = {
@@ -17,9 +16,12 @@ export default function RootLayout({
}): JSX.Element {
return (
-
-
- {children}
+
+
+ {children}
+
);
diff --git a/frontend/apps/website/app/page.module.css b/frontend/apps/website/app/page.module.css
deleted file mode 100644
index 195649a..0000000
--- a/frontend/apps/website/app/page.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.main {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 1rem;
- min-height: 100vh;
-}
\ No newline at end of file
diff --git a/frontend/apps/website/app/page.tsx b/frontend/apps/website/app/page.tsx
deleted file mode 100644
index 3793319..0000000
--- a/frontend/apps/website/app/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Header } from "../components/Header";
-import Hero from "../components/Hero";
-import styles from "./page.module.css";
-
-export default function Page(): JSX.Element {
- return (
-
-
-
-
- );
-}
diff --git a/frontend/apps/website/components/Header.tsx b/frontend/apps/website/components/Header.tsx
index 31efaf8..38c0547 100644
--- a/frontend/apps/website/components/Header.tsx
+++ b/frontend/apps/website/components/Header.tsx
@@ -1,43 +1,32 @@
-"use client";
-
-import { Button } from "@missingstudio/ui/button";
-import { Text } from "@missingstudio/ui/text";
-import { motion } from "framer-motion";
-import Image from "next/image";
import Link from "next/link";
-import logo from "~/public/mstudio_light.svg";
+import Logo from "./logo";
-export const Header = () => {
+export default function Header() {
return (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
+
);
-};
+}
diff --git a/frontend/apps/website/components/Hero/index.tsx b/frontend/apps/website/components/Hero/index.tsx
index 51feded..de24419 100644
--- a/frontend/apps/website/components/Hero/index.tsx
+++ b/frontend/apps/website/components/Hero/index.tsx
@@ -1,60 +1,68 @@
-"use client";
+import { MilkeyWay } from "../milkway";
-import { Button } from "@missingstudio/ui/button";
-import { Text } from "@missingstudio/ui/text";
-import { AnimatePresence, motion } from "framer-motion";
-import { Maven_Pro } from "next/font/google";
-import styles from "./hero.module.css";
-
-const mavenpro = Maven_Pro({ subsets: ["latin"], variable: "--font-maven" });
-
-export default function Page() {
+export default function Hero() {
return (
-
-
-
-
-
+
+
+
+
+
+
+ AI Studio for Enterprise
+
+
+
- A Open Source
- For Enterprise AI studio
-
-
+ Enterprise AI Studio
+
+
- A Robust Open Source AI studio with Universal API for inferencing
- 100+ LLMs(OpenAI, Azure, Anthropic, HuggingFace, Replicate, Stable
- Diffusion).
-
+ An open-source AI Studio for rapid development and robust
+ deployment of generative AI applications that seamlessly
+ integrates with top providers like OpenAI, Anthropic, and more
+
+ Use LLM 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
+
+
+ );
+}
diff --git a/frontend/apps/website/components/features/gateway.tsx b/frontend/apps/website/components/features/gateway.tsx
new file mode 100644
index 0000000..6a5eb03
--- /dev/null
+++ b/frontend/apps/website/components/features/gateway.tsx
@@ -0,0 +1,138 @@
+import Highlighter, { HighlighterItem } from "~/components/highlighter";
+import Particles from "~/components/particles";
+
+export default function Features() {
+ return (
+
+
+
+
+
+
+
+
+
+ AI Gateway
+
+
+ Missing studio AI Gateway allow you gain visibility, control and
+ insights about API Application uses. It allow you control how your
+ application scales with features such as caching, rate limiting,
+ as well as request retries, model fallback, and more
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Analytics for LLMs
+
+
+ Understand your costs per users and models for any
+ provider — plus, caching and rate limiting out of
+ the box.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Usage monitoring
+
+
+ Track and analyze usage, requests, tokens, cache, and more.
+
+
+
+
+
+
+
Cost analytics
+
+
+ Understand how much users, requests and models are costing you.
+
+
+
+
+
+
LLM optimization
+
+
+ Easily add remote cache, rate limits, and auto retries.
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/apps/website/components/features/llmops.tsx b/frontend/apps/website/components/features/llmops.tsx
new file mode 100644
index 0000000..11cc658
--- /dev/null
+++ b/frontend/apps/website/components/features/llmops.tsx
@@ -0,0 +1,73 @@
+import Image from "next/image";
+import Highlighter, { HighlighterItem } from "~/components/highlighter";
+import FeatureImg04 from "~/public/images/feature-image-04.png";
+
+export default function Features() {
+ return (
+
+
+
+
+
+
+
+
+
+ More than a login box
+
+
+ There are many variations available, but the majority have
+ suffered alteration in some form, by injected humour, or
+ randomised words which don't look even slightly believable.
+
+ Many desktop publishing packages and web page editors now use
+ lorem ipsum as their default model text, and a search will uncover
+ many web sites still in their infancy.
+
+
+
+
+
+
+
+ API Authorization
+
+
+
+
+
+
+
Discussions
+
+
+ Login box must find the right balance for the user
+ convenience, privacy and security.
+
+
+
+
+
+
+
Team views
+
+
+ Login box must find the right balance for the user
+ convenience, privacy and security.
+
+
+
+
+
+
+ Powerful search
+
+
+
+ Login box must find the right balance for the user
+ convenience, privacy and security.
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/apps/website/components/features/universal-api.tsx b/frontend/apps/website/components/features/universal-api.tsx
new file mode 100644
index 0000000..3356ce6
--- /dev/null
+++ b/frontend/apps/website/components/features/universal-api.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useState } from "react";
+
+import { Transition } from "@headlessui/react";
+import Particles from "~/components/particles";
+
+export default function Features() {
+ const [tab, setTab] = useState(1);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Universal API
+
+
+
+ Universal API for providers
+
+
+ Familiar with spending hundreds of hours with multiple
+ providers to get things right. Try our universal API for
+ seamless integration with 100+ providers like OpenAI,
+ Anthropic, Cohere, and more.
+
+ );
+}
diff --git a/frontend/apps/website/components/testimonials.tsx b/frontend/apps/website/components/testimonials.tsx
new file mode 100644
index 0000000..8992c77
--- /dev/null
+++ b/frontend/apps/website/components/testimonials.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { Transition } from "@headlessui/react";
+import Image, { StaticImageData } from "next/image";
+import { useEffect, useRef, useState } from "react";
+import Particles from "~/components/particles";
+
+import TestimonialImg01 from "~/public/images/testimonial-01.jpg";
+import TestimonialImg02 from "~/public/images/testimonial-02.jpg";
+import TestimonialImg03 from "~/public/images/testimonial-03.jpg";
+
+export default function Testimonials() {
+ const [active, setActive] = useState(0);
+ const [autorotate, setAutorotate] = useState(true);
+ const [autorotateTiming] = useState(7000);
+
+ interface Item {
+ img: StaticImageData;
+ quote: string;
+ name: string;
+ role: string;
+ }
+
+ const items: Item[] = [
+ {
+ img: TestimonialImg01,
+ quote:
+ "The ability to capture responses is a game-changer. If a user gets tired of the sign up and leaves, that data is still persisted. Additionally, it's great to be able to select between formats.ture responses is a game-changer.",
+ name: "Jessie J",
+ role: "Ltd Head of Product",
+ },
+ {
+ img: TestimonialImg02,
+ quote:
+ "I have been using this product for a few weeks now and I am blown away by the results. My skin looks visibly brighter and smoother, and I have received so many compliments on my complexion.",
+ name: "Mark Luk",
+ role: "Spark Founder & CEO",
+ },
+ {
+ img: TestimonialImg03,
+ quote:
+ "As a busy professional, I don't have a lot of time to devote to working out. But with this fitness program, I have seen amazing results in just a few short weeks. The workouts are efficient and effective.",
+ name: "Jeff Kahl",
+ role: "Appy Product Lead",
+ },
+ ];
+
+ const testimonials = useRef(null);
+
+ useEffect(() => {
+ if (!autorotate) return;
+ const interval = setInterval(() => {
+ setActive(active + 1 === items.length ? 0 : (active) => active + 1);
+ }, autorotateTiming);
+ return () => clearInterval(interval);
+ }, [active, autorotate]);
+
+ const heightFix = () => {
+ if (testimonials.current && testimonials.current.parentElement)
+ testimonials.current.parentElement.style.height = `${testimonials.current.clientHeight}px`;
+ };
+
+ useEffect(() => {
+ heightFix();
+ }, []);
+
+ return (
+
+