From 41ca38c841059afcf74321afebe1645e9a2e60f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Tue, 6 Feb 2024 22:26:31 +0100
Subject: [PATCH] update public web

---
 apps/public/src/app/carousel.tsx           |  63 +++--
 apps/public/src/app/copy.tsx               |  18 +-
 apps/public/src/app/hero.tsx               |  79 ++++++
 apps/public/src/app/join-waitlist.tsx      |  12 +-
 apps/public/src/app/layout.tsx             |  14 +-
 apps/public/src/app/page.tsx               | 293 ++++++++++-----------
 apps/public/src/app/section.tsx            | 149 +++++++----
 apps/public/src/app/widget.tsx             |  43 +++
 apps/public/src/components/ui/carousel.tsx | 186 +++++++------
 apps/public/src/styles/globals.css         |   2 +-
 apps/public/tailwind.config.js             |  31 +--
 11 files changed, 523 insertions(+), 367 deletions(-)
 create mode 100644 apps/public/src/app/hero.tsx
 create mode 100644 apps/public/src/app/widget.tsx

diff --git a/apps/public/src/app/carousel.tsx b/apps/public/src/app/carousel.tsx
index f26569d0..b01e3975 100644
--- a/apps/public/src/app/carousel.tsx
+++ b/apps/public/src/app/carousel.tsx
@@ -34,39 +34,36 @@ const images = [
   { title: 'The classic pie chart', url: '/demo/pie-min.png' },
 ];
 
-export function HomeCarousel() {
+export function PreviewCarousel() {
   return (
-    <div className="mx-auto max-w-6xl p-4">
-      <div className="relative">
-        <div className="rounded-lg w-full max-w-6xl aspect-video dashed absolute -left-5 -top-5"></div>
-        <Carousel
-          className="w-full"
-          opts={{ loop: true }}
-          plugins={[
-            Autoplay({
-              delay: 2000,
-            }),
-          ]}
-        >
-          <CarouselContent>
-            {images.map((item) => (
-              <CarouselItem key={item.url}>
-                <div className="aspect-video rounded-md overflow-hidden">
-                  <Image
-                    className="w-full h-full object-cover"
-                    src={item.url}
-                    width={1080}
-                    height={608}
-                    alt={item.title}
-                  />
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious className="hidden md:visible" />
-          <CarouselNext className="hidden md:visible" />
-        </Carousel>
-      </div>
-    </div>
+    <Carousel
+      className="w-full"
+      opts={{ loop: true }}
+      plugins={[
+        Autoplay({
+          delay: 2000,
+        }),
+      ]}
+    >
+      <CarouselContent>
+        {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">
+                <Image
+                  className="w-full h-full object-cover rounded-lg"
+                  src={item.url}
+                  width={1080}
+                  height={608}
+                  alt={item.title}
+                />
+              </div>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious className="hidden md:visible" />
+      <CarouselNext className="hidden md:visible" />
+    </Carousel>
   );
 }
diff --git a/apps/public/src/app/copy.tsx b/apps/public/src/app/copy.tsx
index 59f8c287..95fd7d82 100644
--- a/apps/public/src/app/copy.tsx
+++ b/apps/public/src/app/copy.tsx
@@ -25,7 +25,9 @@ export function Paragraph({ children, className }: Props) {
 
 export function Heading1({ children, className }: Props) {
   return (
-    <h1 className={cn('text-4xl md:text-6xl font-bold', className)}>
+    <h1
+      className={cn('text-5xl md:text-6xl font-bold text-slate-800', className)}
+    >
       {children}
     </h1>
   );
@@ -33,8 +35,20 @@ export function Heading1({ children, className }: Props) {
 
 export function Heading2({ children, className }: Props) {
   return (
-    <h2 className={cn('text-2xl md:text-4xl font-bold', className)}>
+    <h2
+      className={cn('text-4xl md:text-5xl font-bold text-slate-800', className)}
+    >
       {children}
     </h2>
   );
 }
+
+export function Heading3({ children, className }: Props) {
+  return (
+    <h3
+      className={cn('text-2xl md:text-3xl font-bold text-slate-800', className)}
+    >
+      {children}
+    </h3>
+  );
+}
diff --git a/apps/public/src/app/hero.tsx b/apps/public/src/app/hero.tsx
new file mode 100644
index 00000000..c04c0e9f
--- /dev/null
+++ b/apps/public/src/app/hero.tsx
@@ -0,0 +1,79 @@
+// background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0);
+//   background-size: 40px 40px;
+
+import { Logo } from '@/components/Logo';
+import {
+  BarChart2Icon,
+  CookieIcon,
+  Globe2Icon,
+  LayoutPanelTopIcon,
+  LockIcon,
+} from 'lucide-react';
+
+import { Heading1, Lead, Lead2 } from './copy';
+import { JoinWaitlist } from './join-waitlist';
+
+const features = [
+  {
+    title: 'Great overview',
+    icon: LayoutPanelTopIcon,
+  },
+  {
+    title: 'Beautiful charts',
+    icon: BarChart2Icon,
+  },
+  {
+    title: 'Privacy focused',
+    icon: LockIcon,
+  },
+  {
+    title: 'Open-source',
+    icon: Globe2Icon,
+  },
+  {
+    title: 'No cookies',
+    icon: CookieIcon,
+  },
+];
+
+export function Hero() {
+  return (
+    <div>
+      <div className="absolute top-0 left-0 right-0 py-6">
+        <div className="container">
+          <div className="flex justify-between">
+            <Logo />
+          </div>
+        </div>
+      </div>
+
+      <div
+        className="flex flex-col items-center w-full text-center text-blue-950 bg-[radial-gradient(circle_at_2px_2px,#D9DEF6_2px,transparent_0)]"
+        style={{
+          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%)]">
+          <Heading1 className="mb-4">
+            A 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.
+          </p>
+          <JoinWaitlist />
+          <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>
+  );
+}
diff --git a/apps/public/src/app/join-waitlist.tsx b/apps/public/src/app/join-waitlist.tsx
index 162cd5d8..90ff8051 100644
--- a/apps/public/src/app/join-waitlist.tsx
+++ b/apps/public/src/app/join-waitlist.tsx
@@ -10,8 +10,13 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { cn } from '@/utils/cn';
 
-export function JoinWaitlist() {
+interface JoinWaitlistProps {
+  className?: string;
+}
+
+export function JoinWaitlist({ className }: JoinWaitlistProps) {
   const [value, setValue] = useState('');
   const [open, setOpen] = useState(false);
 
@@ -59,7 +64,10 @@ export function JoinWaitlist() {
         <div className="relative w-full mb-8">
           <input
             placeholder="Enter your email"
-            className="border border-slate-100 rounded-md shadow-sm bg-white h-12 w-full px-4 outline-none focus:ring-1 ring-black"
+            className={cn(
+              'border border-slate-100 rounded-md shadow-sm bg-white h-12 w-full px-4 outline-none focus:ring-1 ring-black text-blue-darker',
+              className
+            )}
             value={value}
             onChange={(e) => setValue(e.target.value)}
           />
diff --git a/apps/public/src/app/layout.tsx b/apps/public/src/app/layout.tsx
index e2271db5..9f09c9f5 100644
--- a/apps/public/src/app/layout.tsx
+++ b/apps/public/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { cn } from '@/utils/cn';
 import '@/styles/globals.css';
 
 import type { Metadata } from 'next';
+import { Bricolage_Grotesque } from 'next/font/google';
 import Script from 'next/script';
 
 import { defaultMeta } from './meta';
@@ -14,6 +15,12 @@ export const metadata: Metadata = {
   },
 };
 
+const font = Bricolage_Grotesque({
+  display: 'swap',
+  subsets: ['latin'],
+  weights: [400, 700],
+});
+
 export default async function RootLayout({
   children,
 }: {
@@ -21,7 +28,12 @@ export default async function RootLayout({
 }) {
   return (
     <html lang="en" className="light">
-      <body className={cn('min-h-screen font-sans antialiased grainy')}>
+      <body
+        className={cn(
+          'min-h-screen antialiased grainy text-slate-600',
+          font.className
+        )}
+      >
         {children}
       </body>
       <Script
diff --git a/apps/public/src/app/page.tsx b/apps/public/src/app/page.tsx
index 672f8b9c..1a9e0205 100644
--- a/apps/public/src/app/page.tsx
+++ b/apps/public/src/app/page.tsx
@@ -1,169 +1,154 @@
 import { Logo } from '@/components/Logo';
-import { Button } from '@/components/ui/button';
-import type { LucideIcon } from 'lucide-react';
-import {
-  BarChart2,
-  BellIcon,
-  ClockIcon,
-  CloudIcon,
-  CompassIcon,
-  ConeIcon,
-  CookieIcon,
-  DollarSignIcon,
-  Globe2Icon,
-  KeyIcon,
-  LayoutPanelTopIcon,
-  LockIcon,
-  UserRoundSearchIcon,
-  UsersIcon,
-} from 'lucide-react';
+import Image from 'next/image';
 
-import { HomeCarousel } from './carousel';
-import { Heading1, Heading2, Lead, Lead2, Paragraph } from './copy';
+import { PreviewCarousel } from './carousel';
+import { Heading2, Lead2, Paragraph } from './copy';
+import { Hero } from './hero';
 import { JoinWaitlist } from './join-waitlist';
-import { Section, Sections } from './section';
-
-const features = [
-  {
-    title: 'Great overview',
-    icon: LayoutPanelTopIcon,
-  },
-  {
-    title: 'Beautiful charts',
-    icon: BarChart2,
-  },
-  {
-    title: 'Privacy focused',
-    icon: LockIcon,
-  },
-  {
-    title: 'Open-source',
-    icon: Globe2Icon,
-  },
-  {
-    title: 'No cookies',
-    icon: CookieIcon,
-  },
-  {
-    title: 'User journey',
-    icon: UsersIcon,
-  },
-];
+import { Sections } from './section';
 
 export default function Page() {
   return (
     <div>
-      <div className="max-w-6xl p-4 mx-auto absolute top-0 left-0 right-0 py-6">
-        <div className="flex justify-between">
-          <Logo />
-        </div>
+      <Hero />
+      <div className="bg-gradient-to-b from-blue-light to-[#FFFFFF] py-16 md:py-40 text-center">
+        <PreviewCarousel />
       </div>
-
-      <div className="flex flex-col items-center bg-gradient-to-br from-white via-white to-blue-200 w-full text-center text-blue-950">
-        <div className="py-20 pt-32 p-4 flex flex-col items-center max-w-3xl ">
-          <Heading1 className="mb-4 fancy-text">
-            A open-source
+      <div className="container">
+        <div className="mb-24">
+          <Heading2 className="md:text-5xl mb-2 leading-none">
+            Analytics should be easy
             <br />
-            alternative to Mixpanel
-          </Heading1>
-          <Lead className="mb-8">
-            Combine Mixpanel and Plausible and you get Openpanel. A simple
-            analytics tool that respects privacy.
-          </Lead>
-          <JoinWaitlist />
-          <div className="grid grid-cols-2 md:grid-cols-3 gap-8 mt-8">
-            {features.map(({ icon: Icon, title }) => (
-              <div className="flex gap-2 items-center justify-center">
-                <Icon />
-                {title}
+            and powerful
+          </Heading2>
+          <Lead2>
+            The power of Mixpanel, the ease of Plausible and nothing from Google
+            Analytics 😉
+          </Lead2>
+        </div>
+        <Sections />
+      </div>
+      <div className="container mt-40">
+        <div className="flex flex-col md:flex-row gap-8">
+          <div className="mb-4 md:w-1/2 flex-shrink-0 relative">
+            <Heading2>Another analytic tool? Really?</Heading2>
+            {/* <SirenIcon
+              strokeWidth={0.5}
+              size={300}
+              className="opacity-10 absolute -rotate-12 -left-20 -top-10"
+            /> */}
+          </div>
+          <div className="flex flex-col gap-4 max-w-3xl">
+            <h3 className="text-lg font-bold text-blue-dark">TL;DR</h3>
+            <Paragraph>
+              Our open-source analytic library fills a crucial gap by combining
+              the strengths of Mixpanel's powerful features with Plausible's
+              clear overview page. Motivated by the lack of an open-source
+              alternative to Mixpanel and inspired by Plausible's simplicity, we
+              aim to create an intuitive platform with predictable pricing. With
+              a single-tier pricing model and limits only on monthly event
+              counts, our goal is to democratize analytics, offering
+              unrestricted access to all features while ensuring affordability
+              and transparency for users of all project sizes.
+            </Paragraph>
+
+            <h3 className="text-lg font-bold text-blue-dark mt-12">The why</h3>
+            <Paragraph>
+              Our open-source analytic library emerged from a clear need within
+              the analytics community. While platforms like Mixpanel offer
+              powerful and user-friendly features, they lack a comprehensive
+              overview page akin to Plausible's, which succinctly summarizes
+              essential metrics. Recognizing this gap, we saw an opportunity to
+              combine the strengths of both platforms while addressing their
+              respective shortcomings.
+            </Paragraph>
+
+            <Paragraph>
+              One significant motivation behind our endeavor was the absence of
+              an open-source alternative to Mixpanel. We believe in the
+              importance of accessibility and transparency in analytics, which
+              led us to embark on creating a solution that anyone can freely use
+              and contribute to.
+            </Paragraph>
+
+            <Paragraph>
+              Inspired by Plausible's exemplary approach to simplicity and
+              clarity, we aim to build upon their foundation and further refine
+              the user experience. By harnessing the best practices demonstrated
+              by Plausible, we aspire to create an intuitive and streamlined
+              analytics platform that empowers users to derive actionable
+              insights effortlessly.
+            </Paragraph>
+
+            <Paragraph>
+              Our own experiences with traditional analytics platforms like
+              Mixpanel underscored another critical aspect driving our project:
+              the need for predictable pricing. As project owners ourselves, we
+              encountered the frustration of escalating costs as our user base
+              grew. Therefore, we are committed to offering a single-tier
+              pricing model that provides unlimited access to all features
+              without the fear of unexpected expenses.
+            </Paragraph>
+
+            <Paragraph>
+              In line with our commitment to fairness and accessibility, our
+              pricing model will only impose limits on the number of events
+              users can send each month. This approach, akin to Plausible's,
+              ensures that users have the freedom to explore and utilize our
+              platform to its fullest potential without arbitrary restrictions
+              on reports or user counts. Ultimately, our goal is to democratize
+              analytics by offering a reliable, transparent, and cost-effective
+              solution for projects of all sizes.
+            </Paragraph>
+          </div>
+        </div>
+      </div>
+
+      <footer className="bg-blue-darker text-white relative mt-40 relative">
+        <div className="inset-0 absolute h-full w-full bg-[radial-gradient(circle,rgba(255,255,255,0.2)_0%,rgba(255,255,255,0)_100%)]"></div>
+        <div className="relative container flex flex-col items-center text-center">
+          <div className="my-24">
+            <Heading2 className="text-white mb-2">Get early access</Heading2>
+            <Lead2>
+              Ready to set your analytics free? Get on our waitlist.
+            </Lead2>
+
+            <div className="mt-8">
+              <JoinWaitlist className="text-white bg-white/20 border-white/30 focus:ring-white" />
+            </div>
+          </div>
+
+          <div className="overflow-hidden rounded-xl">
+            <div className="p-3 bg-white/20">
+              <Image
+                src="/demo/overview-min.png"
+                width={1080}
+                height={608}
+                alt="Openpanel overview page"
+                className="w-full rounded-lg"
+              />
+            </div>
+          </div>
+        </div>
+        <div className="absolute bottom-0 left-0 right-0">
+          <div className="h-px w-full 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>
+          <div className="p-4 bg-blue-darker">
+            <div className="container">
+              <div className="flex justify-between items-center text-sm">
+                <Logo />
+                <a
+                  className="hover:underline"
+                  href="https://twitter.com/CarlLindesvard"
+                  target="_blank"
+                  rel="nofollow"
+                >
+                  Follow on X
+                </a>
               </div>
-            ))}
+            </div>
           </div>
         </div>
-      </div>
-      <Sections />
-      <div className="bg-blue-800 p-4 py-8 md:py-16 text-center">
-        <Heading2 className="text-slate-100 mb-4">
-          Get a feel how it looks
-        </Heading2>
-        <Lead className="text-slate-200 mb-16">
-          We've crafted a clean and intuitive interface because analytics should
-          <br />
-          be straightforward, unlike the complexity often associated with Google
-          Analytics. 😅
-        </Lead>
-        <HomeCarousel />
-      </div>
-      <div className="p-4 py-8 md:py-16 text-center flex flex-col items-center">
-        <Heading2 className="mb-4">Another analytic tool?</Heading2>
-        <div className="flex flex-col gap-4 max-w-3xl">
-          <Paragraph>
-            <strong>TL;DR</strong> Our open-source analytic library fills a
-            crucial gap by combining the strengths of Mixpanel's powerful
-            features with Plausible's clear overview page. Motivated by the lack
-            of an open-source alternative to Mixpanel and inspired by
-            Plausible's simplicity, we aim to create an intuitive platform with
-            predictable pricing. With a single-tier pricing model and limits
-            only on monthly event counts, our goal is to democratize analytics,
-            offering unrestricted access to all features while ensuring
-            affordability and transparency for users of all project sizes.
-          </Paragraph>
-
-          <div className="flex gap-2 w-full justify-center my-8">
-            <div className="rounded-full h-2 w-10 bg-blue-200"></div>
-            <div className="rounded-full h-2 w-10 bg-blue-400"></div>
-            <div className="rounded-full h-2 w-10 bg-blue-600"></div>
-            <div className="rounded-full h-2 w-10 bg-blue-800"></div>
-          </div>
-
-          <Paragraph>
-            Our open-source analytic library emerged from a clear need within
-            the analytics community. While platforms like Mixpanel offer
-            powerful and user-friendly features, they lack a comprehensive
-            overview page akin to Plausible's, which succinctly summarizes
-            essential metrics. Recognizing this gap, we saw an opportunity to
-            combine the strengths of both platforms while addressing their
-            respective shortcomings.
-          </Paragraph>
-
-          <Paragraph>
-            One significant motivation behind our endeavor was the absence of an
-            open-source alternative to Mixpanel. We believe in the importance of
-            accessibility and transparency in analytics, which led us to embark
-            on creating a solution that anyone can freely use and contribute to.
-          </Paragraph>
-
-          <Paragraph>
-            Inspired by Plausible's exemplary approach to simplicity and
-            clarity, we aim to build upon their foundation and further refine
-            the user experience. By harnessing the best practices demonstrated
-            by Plausible, we aspire to create an intuitive and streamlined
-            analytics platform that empowers users to derive actionable insights
-            effortlessly.
-          </Paragraph>
-
-          <Paragraph>
-            Our own experiences with traditional analytics platforms like
-            Mixpanel underscored another critical aspect driving our project:
-            the need for predictable pricing. As project owners ourselves, we
-            encountered the frustration of escalating costs as our user base
-            grew. Therefore, we are committed to offering a single-tier pricing
-            model that provides unlimited access to all features without the
-            fear of unexpected expenses.
-          </Paragraph>
-
-          <Paragraph>
-            In line with our commitment to fairness and accessibility, our
-            pricing model will only impose limits on the number of events users
-            can send each month. This approach, akin to Plausible's, ensures
-            that users have the freedom to explore and utilize our platform to
-            its fullest potential without arbitrary restrictions on reports or
-            user counts. Ultimately, our goal is to democratize analytics by
-            offering a reliable, transparent, and cost-effective solution for
-            projects of all sizes.
-          </Paragraph>
-        </div>
-      </div>
+      </footer>
     </div>
   );
 }
diff --git a/apps/public/src/app/section.tsx b/apps/public/src/app/section.tsx
index 7b443787..1b01da08 100644
--- a/apps/public/src/app/section.tsx
+++ b/apps/public/src/app/section.tsx
@@ -3,14 +3,41 @@
 import { cn } from '@/utils/cn';
 import type { LucideIcon, LucideProps } from 'lucide-react';
 import {
+  ArrowUpFromDotIcon,
+  BarChart2Icon,
   BellIcon,
+  BookmarkIcon,
+  CheckCircle,
   ClockIcon,
   CloudIcon,
+  CloudLightning,
+  CloudLightningIcon,
   CompassIcon,
   ConeIcon,
+  DatabaseIcon,
   DollarSignIcon,
+  DownloadIcon,
+  FileIcon,
+  FilterIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  HandCoinsIcon,
+  HandshakeIcon,
   KeyIcon,
+  PieChartIcon,
+  PointerIcon,
+  RouteIcon,
+  ServerIcon,
+  ShieldPlusIcon,
+  ShoppingCartIcon,
+  SquareUserRound,
+  StarIcon,
+  ThumbsUp,
+  ThumbsUpIcon,
+  TrendingUpIcon,
   UserRoundSearchIcon,
+  UsersIcon,
+  WebhookIcon,
 } from 'lucide-react';
 
 import {
@@ -25,6 +52,7 @@ import {
   Blob9,
 } from './blob';
 import { Heading2, Lead2 } from './copy';
+import { Widget } from './widget';
 
 interface SectionItem {
   title: string;
@@ -32,7 +60,8 @@ interface SectionItem {
   icon: LucideIcon;
   color: string;
   soon?: string;
-  blob: React.ComponentType<LucideProps>;
+  icons: LucideIcon[];
+  className: string;
 }
 
 const sections: SectionItem[] = [
@@ -42,7 +71,8 @@ const sections: SectionItem[] = [
       'Take control of your data privacy and ownership with our platform, ensuring full transparency and security.',
     icon: KeyIcon,
     color: '#2563EB',
-    blob: Blob1,
+    icons: [FolderIcon, DatabaseIcon, ShieldPlusIcon, KeyIcon],
+    className: 'bg-blue-light',
   },
   {
     title: 'Cloud or Self-Hosting',
@@ -50,7 +80,8 @@ const sections: SectionItem[] = [
       'Choose between the flexibility of cloud-based hosting or the autonomy of self-hosting to tailor your analytics infrastructure to your needs.',
     icon: CloudIcon,
     color: '#ff7557',
-    blob: Blob2,
+    icons: [CloudIcon, CheckCircle, ServerIcon, DownloadIcon],
+    className: '', // 'bg-[#ff7557]',
   },
   {
     title: 'Real-Time Events',
@@ -58,15 +89,17 @@ const sections: SectionItem[] = [
       'Stay up-to-date with real-time event tracking, enabling instant insights into user actions as they happen.',
     icon: ClockIcon,
     color: '#7fe1d8',
-    blob: Blob3,
+    icons: [CloudLightningIcon, ShoppingCartIcon, ArrowUpFromDotIcon],
+    className: '', // bg-[#7fe1d8]
   },
   {
-    title: 'Deep Dive into User Behavior',
+    title: 'Deep Dive into User Behaviors',
     description:
       "Gain profound insights into user behavior with comprehensive analytics tools, allowing you to understand your audience's actions and preferences.",
     icon: UserRoundSearchIcon,
     color: '#f8bc3c',
-    blob: Blob4,
+    icons: [UsersIcon, RouteIcon, BookmarkIcon],
+    className: 'bg-blue-dark', //'bg-[#f8bc3c]',
   },
   {
     title: 'Powerful Report Explorer',
@@ -74,7 +107,8 @@ const sections: SectionItem[] = [
       'Explore and analyze your data effortlessly with our powerful report explorer, simplifying the process of deriving meaningful insights.',
     icon: CompassIcon,
     color: '#b3596e',
-    blob: Blob5,
+    icons: [ThumbsUpIcon, TrendingUpIcon, PieChartIcon, BarChart2Icon],
+    className: 'bg-[#ff7557]',
   },
   {
     soon: 'Coming soon',
@@ -83,7 +117,8 @@ const sections: SectionItem[] = [
       'Track user conversion funnels seamlessly, providing valuable insights into user journey optimization.',
     icon: ConeIcon,
     color: '#72bef4',
-    blob: Blob6,
+    icons: [ConeIcon, FilterIcon],
+    className: '', //'bg-[#72bef4]',
   },
   {
     soon: 'Coming with our native app',
@@ -92,7 +127,8 @@ const sections: SectionItem[] = [
       'Stay informed about conversions, events, and peaks with our upcoming push notification tool, empowering you to monitor and respond to critical activities in real-time.',
     icon: BellIcon,
     color: '#ffb27a',
-    blob: Blob7,
+    icons: [WebhookIcon, BellIcon],
+    className: '', //'bg-[#ffb27a]',
   },
   {
     title: 'Cost-Effective Alternative to Mixpanel',
@@ -100,7 +136,8 @@ const sections: SectionItem[] = [
       'Enjoy the same powerful analytics capabilities as Mixpanel at a fraction of the cost, ensuring affordability without compromising on quality.',
     icon: DollarSignIcon,
     color: '#0f7ea0',
-    blob: Blob8,
+    icons: [DollarSignIcon, HandCoinsIcon, HandshakeIcon, StarIcon],
+    className: 'bg-[#3ba974]',
   },
   {
     soon: 'Something Plausible lacks',
@@ -113,61 +150,59 @@ const sections: SectionItem[] = [
       );
     }) as unknown as LucideIcon,
     color: '#3ba974',
-    blob: Blob9,
+    icons: [FolderIcon, DatabaseIcon, ShieldPlusIcon, KeyIcon],
+    className: 'bg-[#f8bc3c]',
   },
 ];
 
-interface SectionProps extends SectionItem {
-  reverse?: boolean;
-}
-export function Section({
-  title,
-  description,
-  icon: Icon,
-  blob: Blob,
-  color,
-  soon,
-  reverse,
-}: SectionProps) {
-  return (
-    <div key={title} className={'border-b border-border'}>
-      <div className="w-full max-w-6xl mx-auto px-4">
-        <div
-          className={cn(
-            'flex py-16 flex-col justify-center',
-            reverse ? 'md:flex-row' : 'md:flex-row-reverse'
-          )}
-        >
-          <div className="md:w-1/2 flex-shrink-0 justify-center items-center flex max-md:mb-8 overflow-hidden rounded-lg">
-            <div className="bg-slate-50 rounded-3xl">
-              <Blob
-                style={{ fill: color }}
-                className="w-[600px] opacity-20 transition-transform animate-[spin_60s_ease-in-out_infinite] -m-[100px]"
-              />
-            </div>
-            <Icon className="w-40 h-40 absolute" strokeWidth={2} />
-          </div>
-          <div className="justify-center flex-col flex">
-            {!!soon && (
-              <div className="rounded-full border border-border p-2 px-4 leading-none mb-4 self-start">
-                {soon}
-              </div>
-            )}
-            <Heading2 className="mb-4">{title}</Heading2>
-            <Lead2>{description}</Lead2>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+// To lazy to think now...
+function checkIndex(index: number) {
+  switch (index) {
+    case 0:
+    case 3:
+    case 4:
+    case 7:
+    case 8:
+    case 10:
+      return true;
+    default:
+      return false;
+  }
 }
 
 export function Sections() {
   return (
     <>
-      {sections.map((section, index) => (
-        <Section key={index} {...section} reverse={index % 2 === 1} />
-      ))}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-16">
+        {sections.map((section, i) => {
+          const even = checkIndex(i);
+
+          const offsets = even
+            ? [
+                '-top-10 -left-10 rotate-12',
+                'top-10 -rotate-12',
+                '-right-5',
+                '-right-10 -top-20',
+              ]
+            : ['-top-10 -left-20 rotate-12', 'top-10 -rotate-12', '-right-5'];
+
+          const className = even
+            ? cn('text-white [&_h3]:text-white col-span-2', section.className)
+            : cn('border border-border', section.className);
+
+          return (
+            <Widget
+              key={section.title}
+              title={section.title}
+              className={className}
+              icons={section.icons}
+              offsets={offsets}
+            >
+              <p>{section.description}</p>
+            </Widget>
+          );
+        })}
+      </div>
     </>
   );
 }
diff --git a/apps/public/src/app/widget.tsx b/apps/public/src/app/widget.tsx
new file mode 100644
index 00000000..5bedf7e3
--- /dev/null
+++ b/apps/public/src/app/widget.tsx
@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import { cn } from '@/utils/cn';
+import type { LucideIcon } from 'lucide-react';
+
+import { Heading3 } from './copy';
+
+interface WidgetProps {
+  title: string;
+  children: ReactNode;
+  className?: string;
+  icons: LucideIcon[];
+  offsets: string[];
+}
+
+export function Widget({
+  title,
+  children,
+  className,
+  icons,
+  offsets,
+}: WidgetProps) {
+  return (
+    <div
+      className={cn(
+        'p-10 rounded-xl relative overflow-hidden flex flex-col hover:scale-105 transition-all duration-300 ease-in-out bg-white hover:shadow min-h-[300px] max-md:col-span-3',
+        className
+      )}
+    >
+      <Heading3 className="mb-4">{title}</Heading3>
+      {children}
+      <div className="flex justify-between mt-auto">
+        {icons.map((Icon, i) => (
+          <Icon
+            key={i}
+            size={120}
+            className={cn('flex-shrink-0 opacity-10 relative', offsets?.[i])}
+            strokeWidth={1.5}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/public/src/components/ui/carousel.tsx b/apps/public/src/components/ui/carousel.tsx
index 80f28c1c..77b0ad67 100644
--- a/apps/public/src/components/ui/carousel.tsx
+++ b/apps/public/src/components/ui/carousel.tsx
@@ -1,43 +1,41 @@
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
+import * as React from 'react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/utils/cn';
+import useEmblaCarousel from 'embla-carousel-react';
+import type { UseEmblaCarouselType } from 'embla-carousel-react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
 
-import { cn } from "@/utils/cn"
-import { Button } from "@/components/ui/button"
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
 
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
+interface CarouselProps {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
 }
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+  const context = React.useContext(CarouselContext);
 
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error('useCarousel must be used within a <Carousel />');
   }
 
-  return context
+  return context;
 }
 
 const Carousel = React.forwardRef<
@@ -46,7 +44,7 @@ const Carousel = React.forwardRef<
 >(
   (
     {
-      orientation = "horizontal",
+      orientation = 'horizontal',
       opts,
       setApi,
       plugins,
@@ -59,64 +57,64 @@ const Carousel = React.forwardRef<
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
+        axis: orientation === 'horizontal' ? 'x' : 'y',
       },
       plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
 
     const onSelect = React.useCallback((api: CarouselApi) => {
       if (!api) {
-        return
+        return;
       }
 
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
 
     const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
+      api?.scrollPrev();
+    }, [api]);
 
     const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
+      api?.scrollNext();
+    }, [api]);
 
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault();
+          scrollNext();
         }
       },
       [scrollPrev, scrollNext]
-    )
+    );
 
     React.useEffect(() => {
       if (!api || !setApi) {
-        return
+        return;
       }
 
-      setApi(api)
-    }, [api, setApi])
+      setApi(api);
+    }, [api, setApi]);
 
     React.useEffect(() => {
       if (!api) {
-        return
+        return;
       }
 
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
+      onSelect(api);
+      api.on('reInit', onSelect);
+      api.on('select', onSelect);
 
       return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
+        api?.off('select', onSelect);
+      };
+    }, [api, onSelect]);
 
     return (
       <CarouselContext.Provider
@@ -125,7 +123,7 @@ const Carousel = React.forwardRef<
           api: api,
           opts,
           orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
           scrollPrev,
           scrollNext,
           canScrollPrev,
@@ -135,7 +133,7 @@ const Carousel = React.forwardRef<
         <div
           ref={ref}
           onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
+          className={cn('relative', className)}
           role="region"
           aria-roledescription="carousel"
           {...props}
@@ -143,38 +141,38 @@ const Carousel = React.forwardRef<
           {children}
         </div>
       </CarouselContext.Provider>
-    )
+    );
   }
-)
-Carousel.displayName = "Carousel"
+);
+Carousel.displayName = 'Carousel';
 
 const CarouselContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
+  const { carouselRef, orientation } = useCarousel();
 
   return (
     <div ref={carouselRef} className="overflow-hidden">
       <div
         ref={ref}
         className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
           className
         )}
         {...props}
       />
     </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
+  );
+});
+CarouselContent.displayName = 'CarouselContent';
 
 const CarouselItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
+  const { orientation } = useCarousel();
 
   return (
     <div
@@ -182,21 +180,21 @@ const CarouselItem = React.forwardRef<
       role="group"
       aria-roledescription="slide"
       className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
         className
       )}
       {...props}
     />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
+  );
+});
+CarouselItem.displayName = 'CarouselItem';
 
 const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
   return (
     <Button
@@ -204,10 +202,10 @@ const CarouselPrevious = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        'absolute  h-8 w-8 rounded-full',
+        orientation === 'horizontal'
+          ? '-left-12 top-1/2 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
         className
       )}
       disabled={!canScrollPrev}
@@ -217,15 +215,15 @@ const CarouselPrevious = React.forwardRef<
       <ArrowLeft className="h-4 w-4" />
       <span className="sr-only">Previous slide</span>
     </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
+  );
+});
+CarouselPrevious.displayName = 'CarouselPrevious';
 
 const CarouselNext = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
 
   return (
     <Button
@@ -233,10 +231,10 @@ const CarouselNext = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        'absolute h-8 w-8 rounded-full',
+        orientation === 'horizontal'
+          ? '-right-12 top-1/2 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
         className
       )}
       disabled={!canScrollNext}
@@ -246,9 +244,9 @@ const CarouselNext = React.forwardRef<
       <ArrowRight className="h-4 w-4" />
       <span className="sr-only">Next slide</span>
     </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
+  );
+});
+CarouselNext.displayName = 'CarouselNext';
 
 export {
   type CarouselApi,
@@ -257,4 +255,4 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-}
+};
diff --git a/apps/public/src/styles/globals.css b/apps/public/src/styles/globals.css
index eabe4e32..dd8639b1 100644
--- a/apps/public/src/styles/globals.css
+++ b/apps/public/src/styles/globals.css
@@ -73,7 +73,7 @@
 }
 
 .fancy-text {
-  @apply text-transparent inline-block bg-gradient-to-br from-blue-600 to-purple-900 bg-clip-text;
+  @apply text-transparent inline-block bg-gradient-to-br from-blue-200 to-blue-400 bg-clip-text;
 }
 
 strong {
diff --git a/apps/public/tailwind.config.js b/apps/public/tailwind.config.js
index fba13589..09defab9 100644
--- a/apps/public/tailwind.config.js
+++ b/apps/public/tailwind.config.js
@@ -1,22 +1,5 @@
-const colors = [
-  '#2563EB',
-  '#ff7557',
-  '#7fe1d8',
-  '#f8bc3c',
-  '#b3596e',
-  '#72bef4',
-  '#ffb27a',
-  '#0f7ea0',
-  '#3ba974',
-  '#febbb2',
-  '#cb80dc',
-  '#5cb7af',
-  '#7856ff',
-];
-
 /** @type {import('tailwindcss').Config} */
 const config = {
-  safelist: [...colors.map((color) => `chart-${color}`)],
   content: [
     './pages/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
@@ -24,8 +7,16 @@ const config = {
     './src/**/*.{ts,tsx}',
   ],
   theme: {
+    container: {
+      center: true,
+      padding: '1rem',
+    },
     extend: {
       colors: {
+        ['blue-light']: '#2C97FE',
+        ['blue-dark']: '#111F46',
+        ['blue-darker']: '#051030',
+
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
@@ -59,12 +50,6 @@ const config = {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
-        ...colors.reduce((acc, color, index) => {
-          return {
-            ...acc,
-            [`chart-${index}`]: color,
-          };
-        }, {}),
       },
       borderRadius: {
         lg: 'var(--radius)',