trycompai · carhartlewis · Feb 18, 2025 · Feb 18, 2025 · Feb 18, 2025
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
@@ -3,12 +3,12 @@ import { Button } from "@bubba/ui/button";
 import type { Metadata } from "next";
 import Link from "next/link";
 import Balancer from "react-wrap-balancer";
-import { Logo } from "../components/logo";
+import Logo from "../components/logo";
 
 export const metadata: Metadata = {
-  title: "Comp AI - SOC 2, ISO 27001 and GDPR compliance",
+  title: "Comp AI - Get SOC 2, ISO 27001 and GDPR compliant",
   description:
-    "The first open-source compliance automation platform that cuts your security certification time by 50%",
+    "The open-source compliance automation platform for SOC 2, ISO 27001, GDPR and more.",
   alternates: {
     canonical: "https://trycomp.ai",
   },
@@ -19,25 +19,24 @@ export default function Home() {
     <section className="w-full">
       <div className="container mx-auto px-4 py-16 md:py-24">
         <div className="flex flex-col items-center text-center space-y-6">
-          <Logo width={64} height={64} className="h-16 w-16" />
+          <Logo />
 
-          <h1 className="text-4xl md:text-5xl font-bold leading-tight tracking-tighter lg:leading-[1.1] max-w-[800px] mx-auto bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent">
-            <Balancer>Get SOC 2, ISO 27001 and GDPR certified</Balancer>
+          <h1 className="max-w-[800px] text-4xl md:text-5xl font-semibold leading-tight tracking-tighter lg:leading-[1.1] mx-auto">
+            <Balancer>
+              Open Source Automation For SOC 2, ISO 27001 and GDPR
+            </Balancer>
           </h1>
 
-          <p className="text-lg md:text-xl font-light text-muted-foreground mt-6 max-w-[600px] mx-auto">
+          <p className="text-lg md:text-xl font-light text-muted-foreground mt-6 mx-auto max-w-[800px]">
             <Balancer>
-              The only open-source compliance automation platform that does
-              everything you need to get certified, fast.
+              We're launching the first open-source compliance automation
+              platform that does everything you need to achieve and maintain
+              compliance with frameworks like SOC 2, ISO 27001, GDPR and more.
             </Balancer>
           </p>
 
           <div className="mt-10 w-full max-w-md">
             <WaitlistForm />
-            <p className="text-xs text-muted-foreground mt-2 text-center">
-              Join our waitlist to help make 100,000 companies compliant by
-              2032.
-            </p>
           </div>
 
           <div className="mt-12 w-full max-w-[800px]">
@@ -47,7 +46,7 @@ export default function Home() {
                   href="https://discord.gg/compai"
                   className="flex items-center gap-2"
                 >
-                  Discord
+                  Join us on Discord
                   <span>→</span>
                 </Link>
               </Button>

diff --git a/apps/web/src/app/components/logo-header.tsx b/apps/web/src/app/components/logo-header.tsx
@@ -0,0 +1,21 @@
+import type * as React from "react";
+
+const LogoHeader = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width={227}
+    height={56}
+    viewBox="0 0 227 56"
+    fill="currentColor"
+    aria-label="Comp AI Logo"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="m41 13.333-1.632-1.173-10.783-7.741a1 1 0 0 0-1.166 0L2.417 22.366a1 1 0 0 0-.417.812v9.641a1 1 0 0 0 .417.813l25.002 17.95a1 1 0 0 0 1.166 0l24.998-17.95a1 1 0 0 0 .417-.813v-9.64a1 1 0 0 0-.417-.813zM27.419 9.118a1 1 0 0 1 1.166 0l6.379 4.579a1 1 0 0 1 0 1.625l-3.026 2.17a.64.64 0 0 1-.743-.001l-2.61-1.873a1 1 0 0 0-1.166 0l-8.685 6.235a1 1 0 0 0 0 1.625l2.432 1.745 3.272 2.353 2.98 2.139a1 1 0 0 0 1.167 0l8.685-6.24a1 1 0 0 0 0-1.624l-2.058-1.48a.328.328 0 0 1 0-.532l3.575-2.564a1 1 0 0 1 1.166 0l6.376 4.578a1 1 0 0 1 0 1.625l-3.027 2.173-14.715 10.566a1 1 0 0 1-1.166 0l-7.51-5.392-3.273-2.347-3.935-2.825-3.026-2.173a1 1 0 0 1 0-1.625zM81.75 40.504q-4.536 0-7.728-2.1-3.192-2.142-4.83-5.67-1.596-3.57-1.596-7.854t1.596-7.812q1.638-3.57 4.83-5.67 3.192-2.142 7.728-2.142 3.486 0 6.174 1.344 2.73 1.344 4.41 3.696 1.722 2.352 2.268 5.334H91.83q-.588-3.444-3.36-5.586-2.73-2.142-6.72-2.142-3.696 0-6.258 1.722-2.52 1.722-3.78 4.662t-1.26 6.594 1.26 6.594 3.78 4.662q2.562 1.722 6.258 1.722 2.814 0 5.04-1.092 2.226-1.134 3.57-3.108 1.386-1.974 1.68-4.494h2.772q-.42 3.234-2.142 5.838-1.68 2.562-4.494 4.032-2.772 1.47-6.426 1.47m26.571 0q-3.108 0-5.46-1.47-2.31-1.47-3.612-4.074-1.26-2.604-1.26-5.88t1.26-5.88q1.302-2.604 3.612-4.074 2.352-1.47 5.46-1.47t5.418 1.47q2.352 1.47 3.612 4.074 1.302 2.604 1.302 5.88t-1.302 5.88q-1.26 2.604-3.612 4.074-2.31 1.47-5.418 1.47m0-2.478q3.654 0 5.628-2.436 1.974-2.478 1.974-6.51t-1.974-6.468q-1.974-2.478-5.628-2.478t-5.628 2.478q-1.974 2.436-1.974 6.468t1.974 6.51q1.974 2.436 5.628 2.436m14.176-19.866h2.478v3.822q1.008-2.016 2.814-3.15 1.848-1.176 4.578-1.176 3.192 0 4.956 1.47 1.764 1.428 2.394 3.696.924-2.394 2.814-3.78 1.932-1.386 4.956-1.386 4.158 0 5.922 2.352 1.764 2.31 1.764 5.334V40h-2.604V25.552q0-2.478-1.47-3.948t-4.284-1.47q-2.184 0-4.494 1.512-2.268 1.47-2.268 6.006V40h-2.604V25.552q0-2.478-1.47-3.948t-4.284-1.47q-2.016 0-4.2 1.302t-2.52 5.166V40h-2.478zm40.132 0v4.956q1.806-5.46 8.022-5.46 4.41 0 6.972 3.024t2.562 8.4-2.562 8.4-6.972 3.024q-3.15 0-5.04-1.176-1.89-1.218-2.814-3.528v12.6h-2.646V18.16zm-.042 10.92q0 4.284 1.932 6.594t5.418 2.31q3.612 0 5.544-2.31 1.974-2.31 1.974-6.594t-1.974-6.594q-1.932-2.31-5.544-2.31-3.486 0-5.418 2.31t-1.932 6.594m48.684 1.806h-14.826L193.127 40h-3.108l11.256-30.24h5.124L217.571 40h-2.982zm-.966-2.646-6.468-17.682-6.426 17.682zM221.19 9.76h2.73V40h-2.73z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default LogoHeader;
diff --git a/apps/web/src/app/components/logo.tsx b/apps/web/src/app/components/logo.tsx
@@ -1,37 +1,23 @@
 "use client";
 
-import Image from "next/image";
+import type * as React from "react";
 
-export function Logo({
-  className,
-  width = 64,
-  height = 64,
-  alt = "Comp Logo",
-  ...props
-}: {
-  className?: string;
-  width?: number;
-  height?: number;
-  alt?: string;
-} & Omit<React.ComponentProps<typeof Image>, 'src' | 'alt' | 'width' | 'height'>) {
-  return (
-    <div role="img" aria-label={alt}>
-      <Image
-        src="/comp-logo-black.png"
-        alt=""
-        width={width}
-        height={height}
-        className={`${className} dark:hidden`}
-        {...props}
-      />
-      <Image
-        src="/comp-logo-white.png"
-        alt=""
-        width={width}
-        height={height}
-        className={`${className} hidden dark:block`}
-        {...props}
-      />
-    </div>
-  );
-}
+const Logo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width={64}
+    height={64}
+    viewBox="0 0 64 64"
+    fill="currentColor"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-label="Comp AI Logo"
+    {...props}
+  >
+    <path
+      d="m46.857 15.238 -1.865 -1.341 -12.323 -8.847a1.143 1.143 0 0 0 -1.333 0L2.762 25.561a1.143 1.143 0 0 0 -0.477 0.928v11.018a1.143 1.143 0 0 0 0.477 0.929l28.574 20.514a1.143 1.143 0 0 0 1.333 0l28.569 -20.514a1.143 1.143 0 0 0 0.477 -0.929v-11.017a1.143 1.143 0 0 0 -0.477 -0.929zM31.336 10.421a1.143 1.143 0 0 1 1.333 0l7.29 5.233a1.143 1.143 0 0 1 0 1.857l-3.458 2.48a0.731 0.731 0 0 1 -0.849 -0.001l-2.983 -2.141a1.143 1.143 0 0 0 -1.333 0l-9.926 7.126a1.143 1.143 0 0 0 0 1.857l2.779 1.994 3.739 2.689 3.406 2.445a1.143 1.143 0 0 0 1.334 0l9.926 -7.131a1.143 1.143 0 0 0 0 -1.856l-2.352 -1.691a0.375 0.375 0 0 1 0 -0.608l4.086 -2.93a1.143 1.143 0 0 1 1.333 0l7.287 5.232a1.143 1.143 0 0 1 0 1.857l-3.459 2.483 -16.817 12.075a1.143 1.143 0 0 1 -1.333 0l-8.583 -6.162 -3.741 -2.682 -4.497 -3.229 -3.458 -2.483a1.143 1.143 0 0 1 0 -1.857z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Logo;
diff --git a/apps/web/src/app/components/main-nav.tsx b/apps/web/src/app/components/main-nav.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import Link from "next/link";
+import LogoHeader from "./logo-header";
 
 export function MainNav() {
   return (
     <div className="mr-4 flex">
-      <Link href="/" className="mr-4 flex items-center gap-2 lg:mr-6">
-        <span className="font-bold lg:inline-block">Comp AI</span>
+      <Link href="/" className="flex items-center gap-2">
+        <LogoHeader className="w-24 h-24" />
       </Link>
     </div>
   );

diff --git a/apps/web/src/app/components/waitlist-form.tsx b/apps/web/src/app/components/waitlist-form.tsx
@@ -52,16 +52,9 @@ export function WaitlistForm() {
   if (isSent) {
     return (
       <div className="flex flex-col items-center space-y-4 p-4 rounded-lg">
-        <p className="text-lg font-medium text-center">
-          Thanks, you're on the list!
+        <p className="text-md mt-2 text-center">
+          You're on the list! We'll be in touch soon!
         </p>
-        <Link
-          href="https://discord.gg/compai"
-          className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary/10 hover:bg-primary/20 transition-colors text-primary"
-        >
-          Join us on Discord
-          <span aria-hidden="true">→</span>
-        </Link>
       </div>
     );
   }
@@ -70,7 +63,7 @@ export function WaitlistForm() {
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="relative flex flex-col sm:flex-row gap-2"
+        className="flex flex-col sm:flex-row gap-2"
       >
         <FormField
           control={form.control}
@@ -88,15 +81,15 @@ export function WaitlistForm() {
                   aria-label="Email address"
                 />
               </FormControl>
-              <FormMessage className="text-sm" />
+              <FormMessage />
             </FormItem>
           )}
         />
 
         <Button
           type="submit"
           variant="action"
-          disabled={waitlistAction.isExecuting || !form.formState.isValid}
+          disabled={waitlistAction.isExecuting}
         >
           {waitlistAction.isExecuting ? (
             <span className="flex items-center gap-2">
@@ -111,6 +104,10 @@ export function WaitlistForm() {
           )}
         </Button>
       </form>
+
+      <p className="text-xs text-muted-foreground mt-2 text-center">
+        Join our waitlist to help make 100,000 companies compliant by 2032.
+      </p>
     </Form>
   );
 }
diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
@@ -14,8 +14,8 @@
     --primary-foreground: 0 0% 100%;
     --secondary: 0 0% 88%;
     --secondary-foreground: 240 3% 10%;
-    --muted: 240 3% 37%;
-    --muted-foreground: 240 5% 65%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
     --accent: 0 0% 88%;
     --accent-foreground: 240 3% 10%;
     --destructive: 0 84% 60%;
@@ -57,8 +57,8 @@
     --primary-foreground: 240 3% 10%;
     --secondary: 240 3% 37%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 240 3% 37%;
-    --muted-foreground: 240 5% 65%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
     --accent: 240 3% 37%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 84% 60%;