Gro 19/open beta (#83)

* Modify billing page

* wip

* Add other colors for feature cards

* Add examples to website

* Add install section

* wip

* Improve spacing at top of website

* Add content to FAQ Accordion

* Add more content to the FAQ

* Add pricing section

* Finish of Pricing page

* Improve copy in FAQ

* Change CTA text

* Modify mobile styling

* Fix broken app build issue by setting 'use client' on Accordion

.floe/config.json

@@ -6,7 +6,7 @@
   },
   "rulesets": {
     "docs": {
-      "include": ["apps/web/pages/docs/**/*.{md,mdx}"],
+      "include": ["apps/web/**/*.{md,mdx}"],
       "rules": {
         "spelling-and-grammar": "warn",
         "docs-style": "warn"

apps/app/src/app/(authenticated)/[workspace]/billing/page.tsx

@@ -46,19 +46,19 @@ export default async function Billing({
     : null;
   const freeTierFeature = [
     "25K Pro tokens",
-    "500K Basic tokens",
+    "250 Basic tokens",
     "Slack support",
   ];
 
   const proTierFeature = [
-    `2M Pro tokens`,
-    "10M Basic tokens",
+    `1M Pro tokens`,
+    "2M Basic tokens",
     "Priority support",
     "Higher rate limits",
   ];
 
   const customTierFeature = [
-    "Option to bring your own key",
+    "Option to bring your own OpenAI key",
     "Custom token limits",
     "White-glove onboarding support",
     "Dedicated support channel",
@@ -195,7 +195,7 @@ export default async function Billing({
                 </form>
               )}
               <p className="mt-10 text-sm font-semibold leading-6 text-zinc-900">
-                Features for professionals and small teams.
+                For professionals and small teams.
               </p>
               <ul className="mt-6 space-y-3 text-sm leading-6 text-zinc-600">
                 {proTierFeature.map((feature) => (
@@ -260,7 +260,7 @@ export default async function Billing({
               </Link>
             )}
             <p className="mt-10 text-sm font-semibold leading-6 text-zinc-900">
-              Features for large teams and enterprises.
+              For large teams and enterprises.
             </p>
             <ul className="mt-6 space-y-3 text-sm leading-6 text-zinc-600">
               {customTierFeature.map((feature) => (

apps/app/src/app/signin/form.tsx

@@ -1,10 +1,9 @@
 "use client";
 import { useState } from "react";
 import { signIn } from "next-auth/react";
-import { Button, Input } from "@floe/ui";
+import { Button, Input, Spinner } from "@floe/ui";
 import Image from "next/image";
 import type { FormEvent } from "react";
-import { Spinner } from "@floe/ui";
 import { useSearchParams } from "next/navigation";
 import logo from "public/logo.png";
 

apps/web/components/home/feature-card.tsx

@@ -0,0 +1,41 @@
+import { Pill } from "@floe/ui";
+
+const colors = {
+  amber: "from-amber-500 bg-amber-400",
+  rose: "from-rose-500 bg-rose-400",
+  indigo: "from-indigo-500 bg-indigo-400",
+  emerald: "from-emerald-500 bg-emerald-400",
+  purple: "from-purple-500 bg-purple-400",
+};
+
+export function FeatureCard({
+  pillText,
+  title,
+  description,
+  color,
+  children,
+}: {
+  pillText: string;
+  title: string;
+  description: string;
+  color: keyof typeof colors;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      className={`relative ${colors[color]} z-10 px-10 py-8 -mx-10 text-center rounded-lg shadow-lg md:mx-auto md:w-2/3 bg-gradient-to-t after:absolute after:bg-noise after:inset-0 after:opacity-60 after:-z-10`}
+    >
+      <Pill color="black" text={pillText} />
+      <h3 className="mt-3 mb-3 text-4xl sm:text-5xl font-garamond">{title}</h3>
+      <p className="mb-8 text-lg sm:text-xl text-zinc-700">
+        {description.split("\\n").map((line, i) => (
+          <span key={i}>
+            {line}
+            <br />
+          </span>
+        ))}
+      </p>
+      {children}
+    </div>
+  );
+}