chore(website): update website content

missingstudio · Feb 11, 2024 · 2da5f9e · 2da5f9e
1 parent 0169299
commit 2da5f9e
Show file tree

Hide file tree

Showing 41 changed files with 1,661 additions and 166 deletions.
diff --git a/frontend/apps/website/app/(default)/layout.tsx 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 (
+    <>
+      <Header />
+      <main className="grow">{children}</main>
+      <Footer />
+    </>
+  );
+}
diff --git a/frontend/apps/website/app/(default)/page.tsx 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 (
+    <>
+      <Hero />
+      <FeaturesUniversalAPI />
+      <FeaturesAPIGateway />
+      <CTA />
+    </>
+  );
+}
diff --git 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 (
     <html lang="en" suppressHydrationWarning>
-      <body className={opensans.className}>
-        <MilkeyWay />
-        <Providers>{children}</Providers>
+      <body
+        className={`${opensans.className} antialiased bg-slate-900 text-slate-100 tracking-tight`}
+      >
+        <div className="flex flex-col min-h-screen overflow-hidden">
+          <Providers>{children}</Providers>
+        </div>
       </body>
     </html>
   );

diff --git a/frontend/apps/website/app/page.module.css b/frontend/apps/website/app/page.module.css
diff --git a/frontend/apps/website/app/page.tsx b/frontend/apps/website/app/page.tsx
diff --git 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 (
-    <motion.header
-      initial={{
-        opacity: 0,
-        transform: "translateY(-50px)",
-      }}
-      animate={{
-        opacity: 1,
-        transform: "translateY(0px)",
-      }}
-      className="container z-40 bg-background py-8"
-    >
-      <div className="container flex h-8 items-center ">
-        <div className="flex gap-6 md:gap-10 w-full justify-between">
-          <Link href="/" className="items-center space-x-2 md:flex">
-            <Image priority src={logo} height={24} alt="missing studio logo" />
-          </Link>
-          <Button variant="alternative" className="!p-0">
-            <a
-              target="_blank"
-              href="https://github.com/missingstudio/studio"
-              className="px-5 py-2"
-            >
-              <Text size={2} bold>
-                Try AI Studio
-              </Text>
-            </a>
-          </Button>
+    <header className="absolute w-full z-30">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="flex items-center justify-between h-16 md:h-20">
+          <div className="shrink-0 mr-4">
+            <Logo />
+          </div>
+
+          <nav className="flex grow">
+            <ul className="flex grow justify-end flex-wrap items-center">
+              <li className="ml-6">
+                <Link
+                  className="btn-sm text-slate-300 hover:text-white transition duration-150 ease-in-out w-full group [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] relative before:absolute before:inset-0 before:bg-slate-800/30 before:rounded-full before:pointer-events-none"
+                  target="_blank"
+                  href="https://github.com/missingstudio/studio"
+                >
+                  <span className="relative inline-flex items-center">
+                    AI Studio
+                  </span>
+                </Link>
+              </li>
+            </ul>
+          </nav>
         </div>
       </div>
-    </motion.header>
+    </header>
   );
-};
+}
diff --git 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 (
-    <AnimatePresence>
-      <section className="space-y-6 pt-6 md:pt-10 lg:pt-32">
-        <div className="container flex max-w-[64rem] flex-col items-center gap-8 text-center">
-          <div className="flex flex-col gap-2 items-center">
-            <motion.h1
-              className={`font-extrabold font-heading text-3xl sm:text-4xl md:text-5xl lg:text-6xl ${mavenpro.className} ${styles.heading} ${styles.headergradient}`}
-              initial={{ opacity: 0, top: 20 }}
-              animate={{ opacity: 1, top: 0 }}
-              transition={{ duration: 0.8, ease: "easeOut" }}
+    <section>
+      <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
+        <MilkeyWay />
+        <div className="pt-32 pb-16 md:pt-52 md:pb-32">
+          <div className="max-w-3xl mx-auto text-center">
+            <div className="mb-6" data-aos="fade-down">
+              <span className="relative inline-flex items-center font-bold uppercase">
+                AI Studio for Enterprise
+              </span>
+            </div>
+            <h1
+              className="h1 bg-clip-text text-transparent bg-gradient-to-r from-slate-200/60 via-slate-200 to-slate-200/60 pb-4"
+              data-aos="fade-down"
             >
-              A Open Source <br />
-              For Enterprise AI studio
-            </motion.h1>
-            <motion.p
-              className="max-w-[42rem] leading-normal text-muted-foreground sm:text-lg sm:leading-8"
-              initial={{ opacity: 0, top: 20 }}
-              animate={{ opacity: 1, top: 0 }}
-              transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
+              An Open-source <br />
+              Enterprise AI Studio
+            </h1>
+            <p
+              className="text-lg text-slate-300 mb-8"
+              data-aos="fade-down"
+              data-aos-delay="200"
             >
-              A Robust Open Source AI studio with Universal API for inferencing
-              100+ LLMs(OpenAI, Azure, Anthropic, HuggingFace, Replicate, Stable
-              Diffusion).
-            </motion.p>
+              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
+            </p>
+            <div
+              className="max-w-xs mx-auto sm:max-w-none sm:inline-flex sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4"
+              data-aos="fade-down"
+              data-aos-delay="400"
+            >
+              <div>
+                <a
+                  className="btn text-slate-200 hover:text-white bg-slate-900 bg-opacity-25 hover:bg-opacity-30 w-full transition duration-150 ease-in-out"
+                  href="https://docs.missing.studio"
+                  target="_blank"
+                >
+                  <svg
+                    className="shrink-0 fill-slate-300 mr-3"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                  >
+                    <path d="m1.999 0 1 2-1 2 2-1 2 1-1-2 1-2-2 1zM11.999 0l1 2-1 2 2-1 2 1-1-2 1-2-2 1zM11.999 10l1 2-1 2 2-1 2 1-1-2 1-2-2 1zM6.292 7.586l2.646-2.647L11.06 7.06 8.413 9.707zM0 13.878l5.586-5.586 2.122 2.121L2.12 16z" />
+                  </svg>
+                  <span>Read the docs</span>
+                </a>
+              </div>
+              <div>
+                <a
+                  className="btn text-slate-900 bg-gradient-to-r from-white/80 via-white to-white/80 hover:bg-white w-full transition duration-150 ease-in-out group"
+                  href="https://github.com/missingstudio/studio"
+                  target="_blank"
+                >
+                  Checkout AI Studio
+                </a>
+              </div>
+            </div>
           </div>
-
-          <motion.div
-            className="flex justify-center"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 1.2, delay: 0.2, ease: "easeOut" }}
-          >
-            <Button variant="alternative" className="!p-0">
-              <a
-                target="_blank"
-                href="https://github.com/missingstudio/studio"
-                className="px-5 py-2"
-              >
-                <Text size={2} bold>
-                  We're Open Source
-                </Text>
-              </a>
-            </Button>
-          </motion.div>
         </div>
-      </section>
-    </AnimatePresence>
+      </div>
+    </section>
   );
 }
diff --git a/frontend/apps/website/components/clients.tsx b/frontend/apps/website/components/clients.tsx
@@ -0,0 +1,36 @@
+"use client";
+import Image from "next/image";
+import Marquee from "react-fast-marquee";
+import Client01 from "~/public/images/client-01.svg";
+
+import Particles from "./particles";
+export default function Clients() {
+  return (
+    <section>
+      <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="absolute inset-0 max-w-6xl mx-auto px-4 sm:px-6">
+          <Particles className="absolute inset-0 -z-10" quantity={5} />
+        </div>
+
+        <div className="py-12 md:py-16">
+          <Marquee
+            direction={"left"}
+            speed={30}
+            gradient={true}
+            gradientColor="#0d1424"
+            gradientWidth="100px"
+            autoFill
+          >
+            <Image
+              src={Client01}
+              alt="Client 01"
+              width={110}
+              height={21}
+              className="mx-8"
+            />
+          </Marquee>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/apps/website/components/cta.tsx b/frontend/apps/website/components/cta.tsx
@@ -0,0 +1,41 @@
+export default function CTA() {
+  return (
+    <section>
+      <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="relative px-8 py-12 md:py-20 rounded-[3rem] overflow-hidden">
+          <div
+            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>
+
+          <div className="max-w-3xl mx-auto text-center">
+            <div>
+              <div className="inline-flex font-medium bg-clip-text text-transparent bg-gradient-to-r from-violet-500 to-violet-200 pb-3">
+                playgorund
+              </div>
+            </div>
+            <h2 className="h2 bg-clip-text text-transparent bg-gradient-to-r from-slate-200/60 via-slate-200 to-slate-200/60 pb-4">
+              AI workflows
+            </h2>
+            <p className="text-lg text-slate-400 mb-8">
+              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
+            </p>
+            <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"
+                href="https://github.com/missingstudio/studio"
+              >
+                Get Started{" "}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}