From 2ede158f59e8550cf5a4e4b88b3ecbb64ab0968d Mon Sep 17 00:00:00 2001
From: Rorry <lil.rorry@gmail.com>
Date: Thu, 2 Nov 2023 10:54:24 -0300
Subject: [PATCH] [SWA-198][INFRA] - Track click events on Landing page "Launch
 App" buttons (#130)

* infra(STK-198): apply click tracking to Launch App buttons
* infra(STK-198): update FAQ section structure to support QA abstraction and FA events
---
 packages/landing/.env.example                 |   1 +
 packages/landing/analytics/constants.ts       |  32 ++++
 packages/landing/analytics/index.ts           |   2 +
 packages/landing/analytics/types.ts           |  25 ++++
 packages/landing/app/layout.tsx               |  21 ++-
 packages/landing/app/page.tsx                 | 137 +-----------------
 .../components/QAndAAccordion/index.ts        |   1 -
 .../TryStacklyBanner/TryStacklyBanner.tsx     |  24 ---
 packages/landing/components/index.ts          |   3 +-
 .../landing/components/navbar/MobileMenu.tsx  |   9 +-
 packages/landing/components/navbar/Navbar.tsx |  15 +-
 .../landing/components/sections/FAQ/FAQ.tsx   |  37 +++++
 .../FAQ}/QAndAAccordion.tsx                   |  29 ++--
 .../components/sections/FAQ/constants.ts      |  70 +++++++++
 .../landing/components/sections/FAQ/index.ts  |   1 +
 .../sections/HeroBanner/HeroBanner.tsx        |  96 ++++++++++++
 .../components/sections/HeroBanner/index.ts   |   1 +
 .../TryStacklyBanner/TryStacklyBanner.tsx     |  50 +++++++
 .../{ => sections}/TryStacklyBanner/index.ts  |   0
 packages/landing/components/sections/index.ts |   3 +
 .../landing/contexts/AnalyticsContext.tsx     |  46 ++++++
 packages/landing/contexts/index.ts            |   1 +
 packages/landing/providers/Providers.tsx      |   9 ++
 packages/landing/providers/index.ts           |   1 +
 packages/landing/ui/buttons/ButtonLink.tsx    |   2 +
 packages/landing/ui/buttons/base.ts           |   2 +-
 26 files changed, 442 insertions(+), 176 deletions(-)
 create mode 100644 packages/landing/.env.example
 create mode 100644 packages/landing/analytics/constants.ts
 create mode 100644 packages/landing/analytics/index.ts
 create mode 100644 packages/landing/analytics/types.ts
 delete mode 100644 packages/landing/components/QAndAAccordion/index.ts
 delete mode 100644 packages/landing/components/TryStacklyBanner/TryStacklyBanner.tsx
 create mode 100644 packages/landing/components/sections/FAQ/FAQ.tsx
 rename packages/landing/components/{QAndAAccordion => sections/FAQ}/QAndAAccordion.tsx (70%)
 create mode 100644 packages/landing/components/sections/FAQ/constants.ts
 create mode 100644 packages/landing/components/sections/FAQ/index.ts
 create mode 100644 packages/landing/components/sections/HeroBanner/HeroBanner.tsx
 create mode 100644 packages/landing/components/sections/HeroBanner/index.ts
 create mode 100644 packages/landing/components/sections/TryStacklyBanner/TryStacklyBanner.tsx
 rename packages/landing/components/{ => sections}/TryStacklyBanner/index.ts (100%)
 create mode 100644 packages/landing/components/sections/index.ts
 create mode 100644 packages/landing/contexts/AnalyticsContext.tsx
 create mode 100644 packages/landing/contexts/index.ts
 create mode 100644 packages/landing/providers/Providers.tsx
 create mode 100644 packages/landing/providers/index.ts

diff --git a/packages/landing/.env.example b/packages/landing/.env.example
new file mode 100644
index 00000000..f712a32a
--- /dev/null
+++ b/packages/landing/.env.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_FATHOM_SITE_ID=
diff --git a/packages/landing/analytics/constants.ts b/packages/landing/analytics/constants.ts
new file mode 100644
index 00000000..4f4c7930
--- /dev/null
+++ b/packages/landing/analytics/constants.ts
@@ -0,0 +1,32 @@
+const LAUNCH_APP = "click/launch-app";
+const LAUNCH_APP_NAVBAR = `${LAUNCH_APP}-navbar`;
+const FAQ = "click/faq";
+const FAQ_WHAT_IS = `${FAQ}-what-is`;
+const FAQ_HOW = `${FAQ}-how`;
+
+export const EVENTS = {
+  NAVBAR: {
+    DESKTOP: {
+      LAUNCH_APP_CLICK: `${LAUNCH_APP_NAVBAR}-desktop`,
+    },
+    MOBILE: {
+      LAUNCH_APP_CLICK: `${LAUNCH_APP_NAVBAR}-mobile`,
+    },
+  },
+  SECTIONS: {
+    FAQ: {
+      HOW_CANCEL_STACK: `${FAQ_HOW}-cancel-stack`,
+      HOW_STACKLY_WORKS: `${FAQ_HOW}-stackly-works`,
+      WHAT_IS_STACKLY_CLICK: `${FAQ_WHAT_IS}-stackly`,
+      WHAT_IS_STACK_CLICK: `${FAQ_WHAT_IS}-stack`,
+      WHAT_IS_DCA: `${FAQ_WHAT_IS}-dca`,
+      WHY_TO_DCA: `${FAQ}-why-to-dca`,
+    },
+    HERO_BANNER: {
+      STACK_NOW_CLICK: `${LAUNCH_APP}-hero-banner`,
+    },
+    TRY_STACKLY_BANNER: {
+      TRY_STACKLY_NOW_CLICK: `${LAUNCH_APP}-try-stackly-banner`,
+    },
+  },
+};
diff --git a/packages/landing/analytics/index.ts b/packages/landing/analytics/index.ts
new file mode 100644
index 00000000..e6869b19
--- /dev/null
+++ b/packages/landing/analytics/index.ts
@@ -0,0 +1,2 @@
+export * from "./constants";
+export * from "./types";
diff --git a/packages/landing/analytics/types.ts b/packages/landing/analytics/types.ts
new file mode 100644
index 00000000..1fd3214c
--- /dev/null
+++ b/packages/landing/analytics/types.ts
@@ -0,0 +1,25 @@
+type PageViewOptions = {
+  referrer?: string;
+  url?: string;
+};
+
+export type EventName = string;
+
+export type EventOptions = {
+  _site_id?: string;
+  _value?: number;
+};
+
+export interface Fathom {
+  blockTrackingForMe: () => void;
+  enableTrackingForMe: () => void;
+  setSite: (siteId: string) => void;
+  trackEvent(eventId: string, opts?: EventOptions): void;
+  trackPageview: (opts?: PageViewOptions) => void;
+}
+
+declare global {
+  interface Window {
+    fathom: Fathom;
+  }
+}
diff --git a/packages/landing/app/layout.tsx b/packages/landing/app/layout.tsx
index 599ffcfd..aead01e2 100644
--- a/packages/landing/app/layout.tsx
+++ b/packages/landing/app/layout.tsx
@@ -1,8 +1,11 @@
-import { Metadata } from "next";
 import localFont from "next/font/local";
+import { Metadata } from "next";
+import Script from "next/script";
 
 import { Navbar } from "@/components";
+import { Providers } from "@/providers";
 import { STACKLY_LANDING_URL } from "@/constants";
+
 import "@/styles/global.css";
 
 const stabilGrotesk = localFont({
@@ -34,6 +37,8 @@ export const metadata: Metadata = {
     "Stackly is a simple, non-custodial tool that uses the CoW protocol to place recurring swaps based on DCA",
 };
 
+const siteId = process.env.NEXT_PUBLIC_FATHOM_SITE_ID;
+
 export default function RootLayout({
   children,
 }: {
@@ -42,8 +47,18 @@ export default function RootLayout({
   return (
     <html lang="en" className={stabilGrotesk.variable}>
       <body className="font-sans bg-surface-25 text-em-high">
-        <Navbar />
-        {children}
+        <Script
+          src="https://cdn.usefathom.com/script.js"
+          data-auto
+          data-site={siteId}
+          data-spa="hash"
+          defer
+        />
+
+        <Providers>
+          <Navbar />
+          {children}
+        </Providers>
       </body>
     </html>
   );
diff --git a/packages/landing/app/page.tsx b/packages/landing/app/page.tsx
index 9eaf8bd5..237fef4e 100644
--- a/packages/landing/app/page.tsx
+++ b/packages/landing/app/page.tsx
@@ -1,97 +1,21 @@
+import { PropsWithChildren } from "react";
+
 import Link from "next/link";
 import Image from "next/image";
+
+import { BodyText, ButtonLink, HeadingText, Icon } from "@/ui";
 import {
-  BodyText,
-  ButtonLink,
-  DisplayText,
-  HeadingText,
-  Icon,
-  TitleText,
-} from "@/ui";
-import {
-  STACKLY_APP_URL,
   STACKLY_DISCORD_URL,
   STACKLY_TWITTER_URL,
   SWAPR_URL,
 } from "@/constants";
 import { StacklyLogoIcon } from "@/public/assets";
-import { PropsWithChildren } from "react";
-import { QAndAAccordion, TryStacklyBanner } from "@/components";
+import { FAQ, HeroBanner, TryStacklyBanner } from "@/components";
 
 export default function Home() {
   return (
     <main>
-      <section className="px-6 pt-16 border-b border-gray-100 md:pt-20">
-        <div className="space-y-4 text-center md:space-y-6 ">
-          <DisplayText>DCA simplified</DisplayText>
-          <HeadingText className="!font-medium text-em-med max-w-2xl mx-auto">
-            Say goodbye to market timing and hello to effortless recurrent
-            swaps.
-          </HeadingText>
-        </div>
-        <ButtonLink
-          target="_blank"
-          href={STACKLY_APP_URL}
-          size="lg"
-          width="fit"
-          className="!py-4 mx-auto text-lg !px-16 md:!px-28 mt-8"
-        >
-          Stack now
-        </ButtonLink>
-        <div className="relative max-w-4xl mx-auto mt-12 mb-24 md:my-20">
-          <Link
-            passHref
-            href={STACKLY_APP_URL}
-            className="relative block mx-auto w-fit"
-          >
-            <div className="invisible sm:visible absolute w-[3px] h-[26px] bg-em-med bottom-[60px] left-[17px] animate-cursor-blink"></div>
-            <Image
-              className="mx-auto border shadow-xl hover:shadow-2xl rounded-2xl border-surface-50"
-              alt="amount widget"
-              src="/assets/images/landing-widget.png"
-              height={200}
-              width={512}
-            />
-          </Link>
-          <div className="absolute w-full -top-36 -z-10 h-[460px] md:bg-radial-gradient"></div>
-        </div>
-        <Link
-          href="https://ipfs.io/ipfs/QmUmmFkKvktZ14iA3237WuDrzNuhi4BMb4MoYMJHeFFbey"
-          target="_blank"
-        >
-          <div className="mx-auto flex items-center px-5 py-3 bg-primary-50 rounded-[20px] w-fit space-x-3 my-20 shadow-sm hover:shadow-md hover:bg-primary-75">
-            <Icon name="check" className="text-primary-600" />
-            <TitleText>Stackly has undergone an audit by Omega.</TitleText>
-            <Image
-              alt="omega team logo"
-              src="/assets/images/omega-team-logo.svg"
-              height={30}
-              width={30}
-            />
-          </div>
-        </Link>
-
-        {false && (
-          <div className="mx-auto flex items-center px-5 py-2 bg-black/5 rounded-[20px] w-fit space-x-6 mt-20">
-            <div className="flex items-center space-x-2">
-              <BodyText size={3} weight="medium" className="text-em-med">
-                Total Stacks created:
-              </BodyText>
-              <BodyText size={3} weight="bold">
-                732
-              </BodyText>
-            </div>
-            <div className="flex items-center space-x-2">
-              <BodyText size={3} weight="medium" className="text-em-med">
-                Total transactions:
-              </BodyText>
-              <BodyText size={3} weight="bold">
-                1232
-              </BodyText>
-            </div>
-          </div>
-        )}
-      </section>
+      <HeroBanner />
       <section
         className="py-20 bg-white border-b border-gray-100 md:py-32"
         id="how-it-works"
@@ -136,54 +60,7 @@ export default function Home() {
           </div>
         </div>
       </section>
-      <section className="px-6 py-12 md:py-32" id="faqs">
-        <div className="max-w-6xl mx-auto">
-          <div className="flex flex-col md:flex-row md:justify-between">
-            <HeadingText size={4} className="pb-10 md:pb-0">
-              Frequently asked questions
-            </HeadingText>
-            <div className="w-full max-w-lg space-y-4">
-              <QAndAAccordion question="What is Stackly?" startOpen>
-                Stackly is a simple non-custodial DCA app that makes it easy to
-                do recurring swaps of any token.
-              </QAndAAccordion>
-              <QAndAAccordion question="What is a stack?">
-                <p>
-                  We call it stack the creation of the recurrent order with the
-                  total amount that will be used to swap the choosen tokens on
-                  the choosen frequency (hourly, daily, etc).
-                </p>
-                <p>
-                  Example: A stack of WETH using 500WXDAI that will do recurrent
-                  swaps every day till the end of the week.
-                </p>
-              </QAndAAccordion>
-              <QAndAAccordion question="How does Stackly work?">
-                When you stack a token, stackly creates a contract for you with
-                the funds and uses CoW protocol to place recurring orders
-                (stacks) at the frequency you choose.
-              </QAndAAccordion>
-              <QAndAAccordion question="What is DCA?">
-                DCA stands for Dollar-Cost Averaging, which is an investment
-                strategy used in the financial markets. DCA involves regularly
-                investing a fixed amount of money at predetermined intervals,
-                regardless of the {"asset's"} price.
-              </QAndAAccordion>
-              <QAndAAccordion question="Why one should do DCA?">
-                Recurring swaps (aka DCA) remove the need to time the market,
-                neutralising the short term market volatility, and helps you
-                build a portfolio, distributed over a period of time.
-              </QAndAAccordion>
-              <QAndAAccordion question="Can I cancel my stacks?">
-                Yes. You can cancel your stacks anytime. Your funds will be
-                withdrawn immediately to your wallet. To do it, you have to
-                connect your wallet, go to your stacks, choose a stack, click
-                cancel and confirm transaction with your wallet.
-              </QAndAAccordion>
-            </div>
-          </div>
-        </div>
-      </section>
+      <FAQ />
       <section className="px-6 mx-auto mb-20 max-w-7xl lg:px-0 md:mb-32">
         <TryStacklyBanner />
       </section>
diff --git a/packages/landing/components/QAndAAccordion/index.ts b/packages/landing/components/QAndAAccordion/index.ts
deleted file mode 100644
index 0b95799f..00000000
--- a/packages/landing/components/QAndAAccordion/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./QAndAAccordion";
diff --git a/packages/landing/components/TryStacklyBanner/TryStacklyBanner.tsx b/packages/landing/components/TryStacklyBanner/TryStacklyBanner.tsx
deleted file mode 100644
index 42b7f231..00000000
--- a/packages/landing/components/TryStacklyBanner/TryStacklyBanner.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { STACKLY_APP_URL } from "@/constants";
-import { ButtonLink, HeadingText } from "@/ui";
-
-export const TryStacklyBanner = () => (
-  <div className="relative bg-green-folders bg-[bottom_0rem_right_-4.4rem] sm:bg-[bottom_0rem_right_-1.5rem] mx-auto md:bg-[length:63%] lg:bg-[length:65%] md:bg-[top_-2rem_right_-16rem] lg:bg-[top_-2rem_right_-12rem]  xl:bg-[top_-7rem_right_-6rem] bg-no-repeat shadow-lg p-6 pb-12 md:p-14 bg-primary-900 rounded-[20px] md:rounded-[40px] md:bg-coins">
-    <div className="z-20 max-w-xs md:max-w-xl">
-      <HeadingText className="text-white" size={3}>
-        {`Don't let market volatility scare you from investing in
-cryptocurrencies.`}
-      </HeadingText>
-      <HeadingText className="text-primary-300" size={3}>
-        Try Stackly today and start building your wealth with confidence.
-      </HeadingText>
-      <ButtonLink
-        size="lg"
-        href={STACKLY_APP_URL}
-        width="fit"
-        className="px-6 mt-8 md:px-8 md:mt-20"
-      >
-        Try Stackly Now
-      </ButtonLink>
-    </div>
-  </div>
-);
diff --git a/packages/landing/components/index.ts b/packages/landing/components/index.ts
index 6ec3f751..3b50ee65 100644
--- a/packages/landing/components/index.ts
+++ b/packages/landing/components/index.ts
@@ -1,3 +1,2 @@
 export * from "./navbar";
-export * from "./QAndAAccordion";
-export * from "./TryStacklyBanner";
+export * from "./sections";
diff --git a/packages/landing/components/navbar/MobileMenu.tsx b/packages/landing/components/navbar/MobileMenu.tsx
index d64b8062..f9e4090d 100644
--- a/packages/landing/components/navbar/MobileMenu.tsx
+++ b/packages/landing/components/navbar/MobileMenu.tsx
@@ -1,9 +1,13 @@
 "use client";
 
 import { useState } from "react";
+
 import Link from "next/link";
+
 import { Button, ButtonLink } from "@/ui";
+import { EVENTS } from "@/analytics";
 import { STACKLY_APP_URL } from "@/constants";
+import { useFathomAnalytics } from "@/contexts";
 
 export default function MobileMenu({
   passedThresholdHeight,
@@ -11,6 +15,7 @@ export default function MobileMenu({
   passedThresholdHeight: boolean;
 }) {
   const [isOpen, setIsOpen] = useState(false);
+  const { trackClick } = useFathomAnalytics();
 
   const toggle = () => setIsOpen(!isOpen);
 
@@ -20,7 +25,9 @@ export default function MobileMenu({
         target="_blank"
         variant={passedThresholdHeight ? "primary" : "secondary"}
         href={STACKLY_APP_URL}
-        onClick={toggle}
+        onClick={() => {
+          trackClick(EVENTS.NAVBAR.MOBILE.LAUNCH_APP_CLICK);
+        }}
       >
         Launch app
       </ButtonLink>
diff --git a/packages/landing/components/navbar/Navbar.tsx b/packages/landing/components/navbar/Navbar.tsx
index ebf38a12..b7de91b8 100644
--- a/packages/landing/components/navbar/Navbar.tsx
+++ b/packages/landing/components/navbar/Navbar.tsx
@@ -1,16 +1,22 @@
 "use client";
 
+import { useEffect, useState } from "react";
+
 import Link from "next/link";
-import MobileMenu from "./MobileMenu";
+
+import { EVENTS } from "@/analytics";
 import { ButtonLink } from "@/ui";
-import Logo from "./Logo";
 import { STACKLY_APP_URL } from "@/constants";
-import { useEffect, useRef, useState } from "react";
+import { useFathomAnalytics } from "@/contexts";
+
+import MobileMenu from "./MobileMenu";
+import Logo from "./Logo";
 
 const THRESHOLD_HEIGHT = 320;
 
 export function Navbar() {
   const [scrollYPos, setScrollYPos] = useState(0);
+  const { trackClick } = useFathomAnalytics();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -51,6 +57,9 @@ export function Navbar() {
             target="_blank"
             variant={passedThresholdHeight ? "primary" : "quaternary"}
             href={STACKLY_APP_URL}
+            onClick={() => {
+              trackClick(EVENTS.NAVBAR.DESKTOP.LAUNCH_APP_CLICK);
+            }}
           >
             Launch app
           </ButtonLink>
diff --git a/packages/landing/components/sections/FAQ/FAQ.tsx b/packages/landing/components/sections/FAQ/FAQ.tsx
new file mode 100644
index 00000000..305c2c72
--- /dev/null
+++ b/packages/landing/components/sections/FAQ/FAQ.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { HeadingText } from "@/ui";
+
+import { QAndAAccordion } from "./QAndAAccordion";
+import { FAQ_QUESTIONS_AND_ANSWERS, FaqQa } from "./constants";
+import { useFathomAnalytics } from "@/contexts";
+
+export const FAQ = () => {
+  const { trackClick } = useFathomAnalytics();
+
+  return (
+    <section className="px-6 py-12 md:py-32" id="faqs">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex flex-col md:flex-row md:justify-between">
+          <HeadingText size={4} className="pb-10 md:pb-0">
+            Frequently asked questions
+          </HeadingText>
+          <div className="w-full max-w-lg space-y-4">
+            {FAQ_QUESTIONS_AND_ANSWERS.map((faq: FaqQa, faqIndex: number) => (
+              <QAndAAccordion
+                key={faqIndex}
+                onClick={() => trackClick(faq.trackEventName)}
+                question={faq.question}
+                startOpen={faq.startOpen}
+              >
+                {faq.answers.map((answer: string, answerIndex: number) => (
+                  <p key={answerIndex}>{answer}</p>
+                ))}
+              </QAndAAccordion>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/packages/landing/components/QAndAAccordion/QAndAAccordion.tsx b/packages/landing/components/sections/FAQ/QAndAAccordion.tsx
similarity index 70%
rename from packages/landing/components/QAndAAccordion/QAndAAccordion.tsx
rename to packages/landing/components/sections/FAQ/QAndAAccordion.tsx
index 0156544e..0c2139a5 100644
--- a/packages/landing/components/QAndAAccordion/QAndAAccordion.tsx
+++ b/packages/landing/components/sections/FAQ/QAndAAccordion.tsx
@@ -1,17 +1,19 @@
 "use client";
 
-import { Icon } from "@/ui";
-import { cx } from "class-variance-authority";
 import { PropsWithChildren, useState } from "react";
 
+import { Icon } from "@/ui";
+
 interface QAndAAccordionProps extends PropsWithChildren {
+  onClick?: (args?: any) => void;
   question: string;
   startOpen?: boolean;
 }
 
 export const QAndAAccordion = ({
-  question,
   children,
+  onClick,
+  question,
   startOpen,
 }: QAndAAccordionProps) => {
   const [isOpen, setIsOpen] = useState(startOpen ?? false);
@@ -19,14 +21,19 @@ export const QAndAAccordion = ({
 
   return (
     <div
-      className={cx(
-        "px-6 py-3 space-y-4 bg-white border cursor-pointer rounded-xl hover:bg-surface-25",
-        {
-          "shadow-md": isOpen,
-          "shadow-sm": !isOpen,
-        }
-      )}
-      onClick={toggle}
+      className={`
+      bg-white hover:bg-surface-25
+      border
+      cursor-pointer
+      px-6 py-3
+      rounded-xl
+      space-y-4
+      ${isOpen ? "shadow-md" : "shadow-sm"}
+      `}
+      onClick={() => {
+        if (onClick && !isOpen) onClick();
+        toggle();
+      }}
     >
       <div className="flex items-center justify-between">
         <p className="text-lg font-semibold md:text-xl">{question}</p>
diff --git a/packages/landing/components/sections/FAQ/constants.ts b/packages/landing/components/sections/FAQ/constants.ts
new file mode 100644
index 00000000..d759a722
--- /dev/null
+++ b/packages/landing/components/sections/FAQ/constants.ts
@@ -0,0 +1,70 @@
+import { EVENTS } from "@/analytics";
+
+type FaqAnswers = string[];
+
+export interface FaqQa {
+  answers: FaqAnswers;
+  question: string;
+  startOpen?: boolean;
+  trackEventName: string;
+}
+
+export const FAQ_QUESTIONS_AND_ANSWERS: FaqQa[] = [
+  {
+    question: "What is Stackly?",
+    answers: [
+      `Stackly is a simple non-custodial DCA app that makes it easy to do recurring 
+      swaps of any token.`,
+    ],
+    startOpen: true,
+    trackEventName: EVENTS.SECTIONS.FAQ.WHAT_IS_STACKLY_CLICK,
+  },
+  {
+    question: "What is a stack?",
+    answers: [
+      `We call it stack the creation of the recurrent order with the total amount 
+      that will be used to swap the choosen tokens on the choosen frequency 
+      (hourly, daily, etc).`,
+      `Example: A stack of WETH using 500WXDAI that will do recurrent swaps every 
+      day till the end of the week.`,
+    ],
+    trackEventName: EVENTS.SECTIONS.FAQ.WHAT_IS_STACK_CLICK,
+  },
+  {
+    question: "How does Stackly work?",
+    answers: [
+      `When you stack a token, stackly creates a contract for you with the funds 
+      and uses CoW protocol to place recurring orders (stacks) at the frequency 
+      you choose.`,
+    ],
+    trackEventName: EVENTS.SECTIONS.FAQ.HOW_STACKLY_WORKS,
+  },
+  {
+    question: "What is DCA?",
+    answers: [
+      `DCA stands for Dollar-Cost Averaging, which is an investment strategy used 
+      in the financial markets. DCA involves regularly investing a fixed amount 
+      of money at predetermined intervals, regardless of the asset's price.`,
+    ],
+    trackEventName: EVENTS.SECTIONS.FAQ.WHAT_IS_DCA,
+  },
+  {
+    question: "Why one should do DCA?",
+    answers: [
+      `Recurring swaps (aka DCA) remove the need to time the market, neutralising 
+      the short term market volatility, and helps you build a portfolio, 
+      distributed over a period of time.`,
+    ],
+    trackEventName: EVENTS.SECTIONS.FAQ.WHY_TO_DCA,
+  },
+  {
+    question: "Can I cancel my stacks?",
+    answers: [
+      `Yes. You can cancel your stacks anytime. Your funds will be withdrawn 
+      immediately to your wallet. To do it, you have to connect your wallet, 
+      go to your stacks, choose a stack, click cancel and confirm transaction 
+      with your wallet.`,
+    ],
+    trackEventName: EVENTS.SECTIONS.FAQ.HOW_CANCEL_STACK,
+  },
+];
diff --git a/packages/landing/components/sections/FAQ/index.ts b/packages/landing/components/sections/FAQ/index.ts
new file mode 100644
index 00000000..0a2a51b3
--- /dev/null
+++ b/packages/landing/components/sections/FAQ/index.ts
@@ -0,0 +1 @@
+export * from "./FAQ";
diff --git a/packages/landing/components/sections/HeroBanner/HeroBanner.tsx b/packages/landing/components/sections/HeroBanner/HeroBanner.tsx
new file mode 100644
index 00000000..6f946bbf
--- /dev/null
+++ b/packages/landing/components/sections/HeroBanner/HeroBanner.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+
+import {
+  BodyText,
+  ButtonLink,
+  DisplayText,
+  HeadingText,
+  Icon,
+  TitleText,
+} from "@/ui";
+import { EVENTS } from "@/analytics/constants";
+import { STACKLY_APP_URL } from "@/constants";
+import { useFathomAnalytics } from "@/contexts";
+
+export const HeroBanner = () => {
+  const { trackClick } = useFathomAnalytics();
+
+  return (
+    <section className="px-6 pt-16 border-b border-gray-100 md:pt-20">
+      <div className="space-y-4 text-center md:space-y-6 ">
+        <DisplayText>DCA simplified</DisplayText>
+        <HeadingText className="!font-medium text-em-med max-w-2xl mx-auto">
+          Say goodbye to market timing and hello to effortless recurrent swaps.
+        </HeadingText>
+      </div>
+      <ButtonLink
+        target="_blank"
+        href={STACKLY_APP_URL}
+        size="lg"
+        width="fit"
+        className="!py-4 mx-auto text-lg !px-16 md:!px-28 mt-8"
+        onClick={() => {
+          trackClick(EVENTS.SECTIONS.HERO_BANNER.STACK_NOW_CLICK);
+        }}
+      >
+        Stack now
+      </ButtonLink>
+      <div className="relative max-w-4xl mx-auto mt-12 mb-24 md:my-20">
+        <Link
+          passHref
+          href={STACKLY_APP_URL}
+          className="relative block mx-auto w-fit"
+        >
+          <div className="invisible sm:visible absolute w-[3px] h-[26px] bg-em-med bottom-[60px] left-[17px] animate-cursor-blink"></div>
+          <Image
+            className="mx-auto border shadow-xl hover:shadow-2xl rounded-2xl border-surface-50"
+            alt="amount widget"
+            src="/assets/images/landing-widget.png"
+            height={200}
+            width={512}
+          />
+        </Link>
+        <div className="absolute w-full -top-36 -z-10 h-[460px] md:bg-radial-gradient"></div>
+      </div>
+      <Link
+        href="https://ipfs.io/ipfs/QmUmmFkKvktZ14iA3237WuDrzNuhi4BMb4MoYMJHeFFbey"
+        target="_blank"
+      >
+        <div className="mx-auto flex items-center px-5 py-3 bg-primary-50 rounded-[20px] w-fit space-x-3 my-20 shadow-sm hover:shadow-md hover:bg-primary-75">
+          <Icon name="check" className="text-primary-600" />
+          <TitleText>Stackly has undergone an audit by Omega.</TitleText>
+          <Image
+            alt="omega team logo"
+            src="/assets/images/omega-team-logo.svg"
+            height={30}
+            width={30}
+          />
+        </div>
+      </Link>
+
+      {false && (
+        <div className="mx-auto flex items-center px-5 py-2 bg-black/5 rounded-[20px] w-fit space-x-6 mt-20">
+          <div className="flex items-center space-x-2">
+            <BodyText size={3} weight="medium" className="text-em-med">
+              Total Stacks created:
+            </BodyText>
+            <BodyText size={3} weight="bold">
+              732
+            </BodyText>
+          </div>
+          <div className="flex items-center space-x-2">
+            <BodyText size={3} weight="medium" className="text-em-med">
+              Total transactions:
+            </BodyText>
+            <BodyText size={3} weight="bold">
+              1232
+            </BodyText>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};
diff --git a/packages/landing/components/sections/HeroBanner/index.ts b/packages/landing/components/sections/HeroBanner/index.ts
new file mode 100644
index 00000000..a414889d
--- /dev/null
+++ b/packages/landing/components/sections/HeroBanner/index.ts
@@ -0,0 +1 @@
+export * from "./HeroBanner";
diff --git a/packages/landing/components/sections/TryStacklyBanner/TryStacklyBanner.tsx b/packages/landing/components/sections/TryStacklyBanner/TryStacklyBanner.tsx
new file mode 100644
index 00000000..062c6ad9
--- /dev/null
+++ b/packages/landing/components/sections/TryStacklyBanner/TryStacklyBanner.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { EVENTS } from "@/analytics";
+import { ButtonLink, HeadingText } from "@/ui";
+import { STACKLY_APP_URL } from "@/constants";
+import { useFathomAnalytics } from "@/contexts";
+
+export const TryStacklyBanner = () => {
+  const { trackClick } = useFathomAnalytics();
+
+  return (
+    <div
+      className={`
+      bg-[bottom_0rem_right_-4.4rem] bg-no-repeat bg-green-folders bg-primary-900
+      sm:bg-[bottom_0rem_right_-1.5rem]
+      md:bg-[top_-2rem_right_-16rem] md:bg-[length:63%] md:bg-coins md:p-14 md:rounded-[40px] 
+      lg:bg-[top_-2rem_right_-12rem] lg:bg-[length:65%]
+      xl:bg-[top_-7rem_right_-6rem]
+      mx-auto 
+      p-6 pb-1
+      relative 
+      rounded-[20px]
+      shadow-lg
+      `}
+    >
+      <div className="z-20 max-w-xs md:max-w-xl">
+        <HeadingText className="text-white" size={3}>
+          {`Don't let market volatility scare you from investing in cryptocurrencies.`}
+        </HeadingText>
+        <HeadingText className="text-primary-300" size={3}>
+          Try Stackly today and start building your wealth with confidence.
+        </HeadingText>
+        <ButtonLink
+          target="_blank"
+          size="lg"
+          href={STACKLY_APP_URL}
+          width="fit"
+          className="px-6 mt-8 md:px-8 md:mt-20"
+          onClick={() => {
+            trackClick(
+              EVENTS.SECTIONS.TRY_STACKLY_BANNER.TRY_STACKLY_NOW_CLICK
+            );
+          }}
+        >
+          Try Stackly Now
+        </ButtonLink>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/landing/components/TryStacklyBanner/index.ts b/packages/landing/components/sections/TryStacklyBanner/index.ts
similarity index 100%
rename from packages/landing/components/TryStacklyBanner/index.ts
rename to packages/landing/components/sections/TryStacklyBanner/index.ts
diff --git a/packages/landing/components/sections/index.ts b/packages/landing/components/sections/index.ts
new file mode 100644
index 00000000..b6e68b98
--- /dev/null
+++ b/packages/landing/components/sections/index.ts
@@ -0,0 +1,3 @@
+export * from "./FAQ";
+export * from "./HeroBanner";
+export * from "./TryStacklyBanner";
diff --git a/packages/landing/contexts/AnalyticsContext.tsx b/packages/landing/contexts/AnalyticsContext.tsx
new file mode 100644
index 00000000..0d8f445c
--- /dev/null
+++ b/packages/landing/contexts/AnalyticsContext.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react";
+
+import { EventName, EventOptions } from "@/analytics";
+
+const siteId = process.env.NEXT_PUBLIC_FATHOM_SITE_ID;
+
+interface AnalyticsContextProps {
+  trackClick: (eventName: EventName, opts?: EventOptions) => void;
+}
+
+const AnalyticsContext = createContext<AnalyticsContextProps>({
+  trackClick: () => {
+    throw new Error("No AnalyticsContext available");
+  },
+});
+
+export const AnalyticsProvider = ({ children }: PropsWithChildren) => {
+  useEffect(() => {
+    if (!siteId) throw new Error("Site ID not set, skipping Fathom analytics");
+  }, []);
+
+  const analyticsContextValues = useMemo(
+    () => ({
+      trackClick: (eventName: EventName, opts?: EventOptions) => {
+        window.fathom.trackEvent(eventName, opts);
+      },
+    }),
+    []
+  );
+
+  return (
+    <AnalyticsContext.Provider value={analyticsContextValues}>
+      {children}
+    </AnalyticsContext.Provider>
+  );
+};
+
+export const useFathomAnalytics = () => useContext(AnalyticsContext);
diff --git a/packages/landing/contexts/index.ts b/packages/landing/contexts/index.ts
new file mode 100644
index 00000000..0309ed83
--- /dev/null
+++ b/packages/landing/contexts/index.ts
@@ -0,0 +1 @@
+export * from "./AnalyticsContext";
diff --git a/packages/landing/providers/Providers.tsx b/packages/landing/providers/Providers.tsx
new file mode 100644
index 00000000..c5f71539
--- /dev/null
+++ b/packages/landing/providers/Providers.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { PropsWithChildren } from "react";
+
+import { AnalyticsProvider } from "@/contexts";
+
+export const Providers = ({ children }: PropsWithChildren) => {
+  return <AnalyticsProvider>{children}</AnalyticsProvider>;
+};
diff --git a/packages/landing/providers/index.ts b/packages/landing/providers/index.ts
new file mode 100644
index 00000000..5dfd111b
--- /dev/null
+++ b/packages/landing/providers/index.ts
@@ -0,0 +1 @@
+export * from "./Providers";
diff --git a/packages/landing/ui/buttons/ButtonLink.tsx b/packages/landing/ui/buttons/ButtonLink.tsx
index fcdb9498..9b7e78e2 100644
--- a/packages/landing/ui/buttons/ButtonLink.tsx
+++ b/packages/landing/ui/buttons/ButtonLink.tsx
@@ -22,6 +22,7 @@ export function ButtonLink({
   iconLeft,
   iconRight,
   id,
+  onClick,
 }: ButtonLinkProps) {
   return (
     <Link
@@ -37,6 +38,7 @@ export function ButtonLink({
         active,
         className,
       })}
+      onClick={onClick}
     >
       {iconLeft && <Icon size={getIconSize(size)} name={iconLeft} />}
       {children && <div>{children}</div>}
diff --git a/packages/landing/ui/buttons/base.ts b/packages/landing/ui/buttons/base.ts
index d270753a..e8357650 100644
--- a/packages/landing/ui/buttons/base.ts
+++ b/packages/landing/ui/buttons/base.ts
@@ -84,7 +84,7 @@ export const buttonStyles = cva(
 export type SizeProps = "xs" | "sm" | "md" | "lg" | "icon";
 
 export interface ButtonBaseProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  extends ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
   children?: ReactNode;
   variant?: "primary" | "secondary" | "tertiary" | "quaternary";
   className?: string;