From 96a9fe5e12c603317916c21491a820e04a50e7dd Mon Sep 17 00:00:00 2001 From: Lewis Carhart Date: Tue, 18 Feb 2025 13:18:53 +0000 Subject: [PATCH 1/2] style: homepage updates --- apps/web/src/app/(home)/page.tsx | 27 +++++----- apps/web/src/app/components/logo-header.tsx | 20 +++++++ apps/web/src/app/components/logo.tsx | 53 +++++++------------ apps/web/src/app/components/main-nav.tsx | 5 +- apps/web/src/app/components/waitlist-form.tsx | 21 ++++---- packages/ui/src/globals.css | 8 +-- 6 files changed, 68 insertions(+), 66 deletions(-) create mode 100644 apps/web/src/app/components/logo-header.tsx diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx index 3fbca1b046..60d5e387e3 100644 --- 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() {
- + -

- Get SOC 2, ISO 27001 and GDPR certified +

+ + Open Source Automation For SOC 2, ISO 27001 and GDPR +

-

+

- 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.

-

- Join our waitlist to help make 100,000 companies compliant by - 2032. -

@@ -47,7 +46,7 @@ export default function Home() { href="https://discord.gg/compai" className="flex items-center gap-2" > - Discord + Join us on Discord → diff --git a/apps/web/src/app/components/logo-header.tsx b/apps/web/src/app/components/logo-header.tsx new file mode 100644 index 0000000000..01b1bf9dfb --- /dev/null +++ b/apps/web/src/app/components/logo-header.tsx @@ -0,0 +1,20 @@ +import type * as React from "react"; + +const LogoHeader = (props: React.SVGProps) => ( + + + +); + +export default LogoHeader; diff --git a/apps/web/src/app/components/logo.tsx b/apps/web/src/app/components/logo.tsx index 694092a908..db9f76c5cb 100644 --- a/apps/web/src/app/components/logo.tsx +++ b/apps/web/src/app/components/logo.tsx @@ -1,37 +1,22 @@ "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, 'src' | 'alt' | 'width' | 'height'>) { - return ( -
- - -
- ); -} +const Logo = (props: React.SVGProps) => ( + + + +); + +export default Logo; diff --git a/apps/web/src/app/components/main-nav.tsx b/apps/web/src/app/components/main-nav.tsx index 049c4e26fe..6393f769ab 100644 --- 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 (
- - Comp AI + +
); diff --git a/apps/web/src/app/components/waitlist-form.tsx b/apps/web/src/app/components/waitlist-form.tsx index 2fb9996cec..8d33f82718 100644 --- 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 (
-

- Thanks, you're on the list! +

+ You're on the list! We'll be in touch soon!

- - Join us on Discord - -
); } @@ -70,7 +63,7 @@ export function WaitlistForm() {
- + )} /> @@ -96,7 +89,7 @@ export function WaitlistForm() { + +

+ Join our waitlist to help make 100,000 companies compliant by 2032. +

); } diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css index 730f220cb4..436ffa7bc4 100644 --- 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%; From ea8a1a42bf7d3e6c5e94db7e2c8983e1300c0010 Mon Sep 17 00:00:00 2001 From: Lewis Carhart Date: Tue, 18 Feb 2025 13:25:51 +0000 Subject: [PATCH 2/2] style: aria labels + role --- apps/web/src/app/components/logo-header.tsx | 1 + apps/web/src/app/components/logo.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/apps/web/src/app/components/logo-header.tsx b/apps/web/src/app/components/logo-header.tsx index 01b1bf9dfb..514e727196 100644 --- a/apps/web/src/app/components/logo-header.tsx +++ b/apps/web/src/app/components/logo-header.tsx @@ -7,6 +7,7 @@ const LogoHeader = (props: React.SVGProps) => ( viewBox="0 0 227 56" fill="currentColor" aria-label="Comp AI Logo" + role="img" xmlns="http://www.w3.org/2000/svg" {...props} > diff --git a/apps/web/src/app/components/logo.tsx b/apps/web/src/app/components/logo.tsx index db9f76c5cb..4540363b1b 100644 --- a/apps/web/src/app/components/logo.tsx +++ b/apps/web/src/app/components/logo.tsx @@ -8,6 +8,7 @@ const Logo = (props: React.SVGProps) => ( height={64} viewBox="0 0 64 64" fill="currentColor" + role="img" xmlns="http://www.w3.org/2000/svg" aria-label="Comp AI Logo" {...props}