Release new landing

apps/web/app/(landing)/home/CTAButtons.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from "@/components/Button";
 import { usePostHog } from "posthog-js/react";
+import { landingPageAnalytics } from "@/hooks/useAnalytics";
 
 export function CTAButtons() {
   const posthog = usePostHog();
@@ -12,9 +13,7 @@ export function CTAButtons() {
           size="2xl"
           color="blue"
           link={{ href: "/login" }}
-          onClick={() => {
-            posthog.capture("Clicked Get Started");
-          }}
+          onClick={() => landingPageAnalytics.getStartedClicked(posthog)}
         >
           Get Started for Free
         </Button>
@@ -24,9 +23,7 @@ export function CTAButtons() {
           size="2xl"
           color="transparent"
           link={{ href: "/sales", target: "_blank" }}
-          onClick={() => {
-            posthog.capture("Clicked talk to sales");
-          }}
+          onClick={() => landingPageAnalytics.talkToSalesClicked(posthog)}
         >
           Talk to sales
         </Button>

apps/web/app/(landing)/home/Header.tsx

@@ -27,6 +27,7 @@ import {
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu";
 import { EXTENSION_URL } from "@/utils/config";
+import { landingPageAnalytics } from "@/hooks/useAnalytics";
 
 const navigation = [
   { name: "Enterprise", href: "/enterprise" },
@@ -171,7 +172,7 @@ export function Header({ className }: { className?: string }) {
             <Link
               href="/login"
               onClick={() => {
-                posthog.capture("Clicked Log In", { position: "top-nav" });
+                landingPageAnalytics.logInClicked(posthog, "top-nav");
                 setMobileMenuOpen(false);
               }}
             >
@@ -182,7 +183,7 @@ export function Header({ className }: { className?: string }) {
             <Link
               href="/login"
               onClick={() => {
-                posthog.capture("Clicked Sign Up", { position: "top-nav" });
+                landingPageAnalytics.signUpClicked(posthog, "top-nav");
                 setMobileMenuOpen(false);
               }}
             >
@@ -268,7 +269,7 @@ export function Header({ className }: { className?: string }) {
                   href="/login"
                   className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
                   onClick={() => {
-                    posthog.capture("Clicked Log In", { position: "top-nav" });
+                    landingPageAnalytics.logInClicked(posthog, "top-nav");
                     setMobileMenuOpen(false);
                   }}
                 >

apps/web/app/(landing)/layout.tsx

@@ -1,6 +1,6 @@
 import { LemonScript } from "@/utils/scripts/lemon";
 
-export default async function AppLayout({
+export default async function LandingLayout({
   children,
 }: {
   children: React.ReactNode;

apps/web/app/(landing)/old-landing/page.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import { HeroHome } from "@/app/(landing)/home/Hero";
+import { BasicLayout } from "@/components/layouts/BasicLayout";
+import { FeaturesHome } from "@/app/(landing)/home/Features";
+import { Privacy } from "@/app/(landing)/home/Privacy";
+import { Testimonials } from "@/app/(landing)/home/Testimonials";
+import { PricingLazy } from "@/app/(app)/premium/PricingLazy";
+import { FAQs } from "@/app/(landing)/home/FAQs";
+import { CTA } from "@/app/(landing)/home/CTA";
+
+export const metadata: Metadata = { alternates: { canonical: "/" } };
+
+export default function Home() {
+  return (
+    <BasicLayout>
+      <HeroHome />
+      <FeaturesHome />
+      <Testimonials />
+      <PricingLazy className="pb-32" />
+      <Privacy />
+      <FAQs />
+      <CTA />
+    </BasicLayout>
+  );
+}

apps/web/app/(landing)/page.tsx

@@ -1,25 +1,33 @@
 import type { Metadata } from "next";
-import { HeroHome } from "@/app/(landing)/home/Hero";
-import { BasicLayout } from "@/components/layouts/BasicLayout";
-import { FeaturesHome } from "@/app/(landing)/home/Features";
-import { Privacy } from "@/app/(landing)/home/Privacy";
-import { Testimonials } from "@/app/(landing)/home/Testimonials";
-import { PricingLazy } from "@/app/(app)/premium/PricingLazy";
-import { FAQs } from "@/app/(landing)/home/FAQs";
-import { CTA } from "@/app/(landing)/home/CTA";
+import { BasicLayout } from "@/components/new-landing/common/BasicLayout";
+import { FAQs } from "@/components/new-landing/sections/FAQs";
+import { Testimonials } from "@/components/new-landing/sections/Testimonials";
+import { Hero } from "@/components/new-landing/sections/Hero";
+import { Pricing } from "@/components/new-landing/sections/Pricing";
+import { Awards } from "@/components/new-landing/sections/Awards";
+import { FinalCTA } from "@/components/new-landing/sections/FinalCTA";
+import { EverythingElseSection } from "@/components/new-landing/sections/EverythingElseSection";
+import { StartedInMinutes } from "@/components/new-landing/sections/StartedInMinutes";
+import { BulkUnsubscribe } from "@/components/new-landing/sections/BulkUnsubscribe";
+import { OrganizedInbox } from "@/components/new-landing/sections/OrganizedInbox";
+import { PreWrittenDrafts } from "@/components/new-landing/sections/PreWrittenDrafts";
 
 export const metadata: Metadata = { alternates: { canonical: "/" } };
 
-export default function Home() {
+export default function NewLanding() {
   return (
     <BasicLayout>
-      <HeroHome />
-      <FeaturesHome />
+      <Hero />
+      <OrganizedInbox />
+      <PreWrittenDrafts />
+      <StartedInMinutes />
+      <BulkUnsubscribe />
+      <EverythingElseSection />
+      <Awards />
+      <Pricing />
       <Testimonials />
-      <PricingLazy className="pb-32" />
-      <Privacy />
+      <FinalCTA />
       <FAQs />
-      <CTA />
     </BasicLayout>
   );
 }

apps/web/components/HeroVideoDialog.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useCallback } from "react";
 import Image from "next/image";
 import { Play } from "lucide-react";
 import { cn } from "@/utils";
@@ -11,6 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { landingPageAnalytics } from "@/hooks/useAnalytics";
 
 interface HeroVideoProps {
   videoSrc: string;
@@ -27,17 +27,13 @@ export default function HeroVideoDialog({
 }: HeroVideoProps) {
   const posthog = usePostHog();
 
-  const handleOpenVideo = useCallback(() => {
-    posthog.capture("Landing Page Video Clicked");
-  }, [posthog]);
-
   return (
     <Dialog>
       <div className={cn("relative", className)}>
         <DialogTrigger asChild>
           <button
             type="button"
-            onClick={handleOpenVideo}
+            onClick={() => landingPageAnalytics.videoClicked(posthog)}
             aria-label="Play video"
             className="group relative cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 rounded-xl"
           >

apps/web/components/new-landing/CallToAction.tsx

@@ -1,6 +1,11 @@
+"use client";
+
+import Link from "next/link";
+import { usePostHog } from "posthog-js/react";
 import { Button } from "@/components/new-landing/common/Button";
 import { Chat } from "@/components/new-landing/icons/Chat";
 import { cx } from "class-variance-authority";
+import { landingPageAnalytics } from "@/hooks/useAnalytics";
 
 interface CallToActionProps {
   text?: string;
@@ -11,22 +16,34 @@ interface CallToActionProps {
 export function CallToAction({
   text = "Get started",
   className,
-  includeSalesButton = true,
 }: CallToActionProps) {
+  const posthog = usePostHog();
+
   return (
     <div
       className={cx(
-        "flex justify-center",
-        includeSalesButton ? "items-center gap-4" : "",
+        "flex flex-col md:flex-row justify-center items-center gap-4",
         className,
       )}
     >
-      <Button size="xl">{text}</Button>
-      {includeSalesButton ? (
-        <Button variant="secondary-two" size="xl" icon={<Chat />}>
+      <Button size="xl" asChild>
+        <Link
+          href="/login"
+          onClick={() => landingPageAnalytics.getStartedClicked(posthog)}
+        >
+          <span className="relative z-10">{text}</span>
+        </Link>
+      </Button>
+      <Button variant="secondary-two" size="xl" asChild>
+        <Link
+          href="/sales"
+          target="_blank"
+          onClick={() => landingPageAnalytics.talkToSalesClicked(posthog)}
+        >
+          <Chat />
           Talk to sales
-        </Button>
-      ) : null}
+        </Link>
+      </Button>
     </div>
   );
 }

apps/web/components/new-landing/HeaderLinks.tsx

@@ -19,16 +19,10 @@ import {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu";
-import { EXTENSION_URL } from "@/utils/config";
 
 const navigation = [
   { name: "Enterprise", href: "/enterprise" },
   { name: "Open Source", href: "/github", target: "_blank" as const },
-  {
-    name: "Extension",
-    href: EXTENSION_URL,
-    target: "_blank" as const,
-  },
   { name: "Pricing", href: "/#pricing" },
 ];
 

apps/web/components/new-landing/LiquidGlassButton.tsx

@@ -36,7 +36,7 @@ export function LiquidGlassButton({
                 "inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5)",
             }}
           />
-          <div className="z-30 flex items-center justify-center rounded-full transition-all duration-300 ease-[cubic-bezier(0.175,0.885,0.32,2.2)] will-change-transform group-hover:scale-110">
+          <div className="z-30 flex items-center justify-center rounded-full transition-all duration-300 ease-back-out will-change-transform group-hover:scale-110">
             {children}
           </div>
         </div>

apps/web/components/new-landing/common/BasicLayout.tsx

@@ -6,7 +6,7 @@ const LAYOUT_CLASSNAME = "max-w-6xl mx-auto px-6 lg:px-8 xl:px-0";
 
 export function BasicLayout(props: { children: React.ReactNode }) {
   return (
-    <div>
+    <div className="font-geist">
       <Header className={LAYOUT_CLASSNAME} />
       <main className={cn("isolate", LAYOUT_CLASSNAME)}>{props.children}</main>
       <Footer className={LAYOUT_CLASSNAME} />