redisign hero

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}

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>

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>

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(

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;

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