From 0381d60d90c14a1f442cd7a5877d8e314c1019ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Thu, 15 Feb 2024 09:45:03 +0100
Subject: [PATCH] redisign hero

---
 apps/public/src/app/carousel.tsx      |  2 +-
 apps/public/src/app/copy.tsx          |  2 +-
 apps/public/src/app/hero.tsx          | 20 ++++++++++++++------
 apps/public/src/app/join-waitlist.tsx |  2 +-
 apps/public/src/app/layout.tsx        |  2 +-
 apps/public/src/app/page.tsx          | 13 +++++++++----
 6 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/apps/public/src/app/carousel.tsx b/apps/public/src/app/carousel.tsx
index b01e3975..8d677d72 100644
--- a/apps/public/src/app/carousel.tsx
+++ b/apps/public/src/app/carousel.tsx
@@ -49,7 +49,7 @@ export function PreviewCarousel() {
         {images.map((item) => (
           <CarouselItem key={item.url} className="flex-[0_0_80%] pl-8">
             <div className="aspect-video">
-              <div className="p-3 bg-white/20 rounded-xl overflow-hidden">
+              <div className="p-3 rounded-xl overflow-hidden bg-gradient-to-b from-blue-100/50 to-white/50">
                 <Image
                   className="w-full h-full object-cover rounded-lg"
                   src={item.url}
diff --git a/apps/public/src/app/copy.tsx b/apps/public/src/app/copy.tsx
index 95fd7d82..826c8fc3 100644
--- a/apps/public/src/app/copy.tsx
+++ b/apps/public/src/app/copy.tsx
@@ -26,7 +26,7 @@ export function Paragraph({ children, className }: Props) {
 export function Heading1({ children, className }: Props) {
   return (
     <h1
-      className={cn('text-5xl md:text-6xl font-bold text-slate-800', className)}
+      className={cn('text-4xl md:text-5xl font-bold text-slate-800', className)}
     >
       {children}
     </h1>
diff --git a/apps/public/src/app/hero.tsx b/apps/public/src/app/hero.tsx
index ab829ae2..cfbb61b0 100644
--- a/apps/public/src/app/hero.tsx
+++ b/apps/public/src/app/hero.tsx
@@ -36,7 +36,7 @@ const features = [
   },
 ];
 
-export function Hero() {
+export function Hero({ waitlistCount }: { waitlistCount: number }) {
   return (
     <div>
       <div className="absolute top-0 left-0 right-0 py-6">
@@ -53,25 +53,33 @@ export function Hero() {
           backgroundSize: '70px 70px',
         }}
       >
-        <div className="py-20 pt-32 p-4 flex flex-col items-center max-w-3xl bg-[radial-gradient(circle,rgba(255,255,255,0.7)_0%,rgba(255,255,255,0.7)_50%,rgba(255,255,255,0)_100%)]">
+        <div className="py-32 p-4 flex flex-col items-center max-w-3xl bg-[radial-gradient(circle,rgba(255,255,255,0.7)_0%,rgba(255,255,255,0.7)_50%,rgba(255,255,255,0)_100%)]">
           <Heading1 className="mb-4">
             An open-source
             <br />
             alternative to Mixpanel
           </Heading1>
           <p className="mb-8">
-            Combine Mixpanel and Plausible and you get Openpanel. A simple
-            analytics tool that respects privacy.
+            Mixpanel + Plausible ={' '}
+            <strong className="text-blue-600">Openpanel!</strong> A simple
+            analytics tool that your wallet can afford.
           </p>
           <JoinWaitlist />
-          <div className="flex flex-wrap gap-10 mt-8 max-w-xl justify-center">
+          <div className="mt-4 text-sm">
+            <p>Get ahead of the curve and join our waiting list{' - '}</p>
+            <p>
+              there are already{' '}
+              <strong>{waitlistCount} savvy individuals on board!</strong> 🎉
+            </p>
+          </div>
+          {/* <div className="flex flex-wrap gap-10 mt-8 max-w-xl justify-center">
             {features.map(({ icon: Icon, title }) => (
               <div className="flex gap-2 items-center justify-center">
                 <Icon className="text-blue-light  " />
                 {title}
               </div>
             ))}
-          </div>
+          </div> */}
         </div>
       </div>
     </div>
diff --git a/apps/public/src/app/join-waitlist.tsx b/apps/public/src/app/join-waitlist.tsx
index 90ff8051..9efc7e7e 100644
--- a/apps/public/src/app/join-waitlist.tsx
+++ b/apps/public/src/app/join-waitlist.tsx
@@ -61,7 +61,7 @@ export function JoinWaitlist({ className }: JoinWaitlistProps) {
           });
         }}
       >
-        <div className="relative w-full mb-8">
+        <div className="relative w-full">
           <input
             placeholder="Enter your email"
             className={cn(
diff --git a/apps/public/src/app/layout.tsx b/apps/public/src/app/layout.tsx
index 9f09c9f5..bf95927a 100644
--- a/apps/public/src/app/layout.tsx
+++ b/apps/public/src/app/layout.tsx
@@ -21,7 +21,7 @@ const font = Bricolage_Grotesque({
   weights: [400, 700],
 });
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
diff --git a/apps/public/src/app/page.tsx b/apps/public/src/app/page.tsx
index 1a9e0205..161fe2c6 100644
--- a/apps/public/src/app/page.tsx
+++ b/apps/public/src/app/page.tsx
@@ -1,18 +1,23 @@
 import { Logo } from '@/components/Logo';
 import Image from 'next/image';
 
+import { db } from '@mixan/db';
+
 import { PreviewCarousel } from './carousel';
 import { Heading2, Lead2, Paragraph } from './copy';
 import { Hero } from './hero';
 import { JoinWaitlist } from './join-waitlist';
 import { Sections } from './section';
 
-export default function Page() {
+export default async function Page() {
+  const waitlistCount = await db.waitlist.count();
   return (
     <div>
-      <Hero />
-      <div className="bg-gradient-to-b from-blue-light to-[#FFFFFF] py-16 md:py-40 text-center">
-        <PreviewCarousel />
+      <Hero waitlistCount={waitlistCount} />
+      <div className="bg-gradient-to-b from-blue-light to-[#FFFFFF] pb-16 text-center">
+        <div className="relative -top-20">
+          <PreviewCarousel />
+        </div>
       </div>
       <div className="container">
         <div className="mb-24">