diff --git a/web/app/components/Header/index.tsx b/web/app/components/Header/index.tsx
index e4c014b9e..b98f92769 100644
--- a/web/app/components/Header/index.tsx
+++ b/web/app/components/Header/index.tsx
@@ -115,7 +115,7 @@ const getCallsToAction = (t: typeof i18nextT) => [
   },
 ]
 
-const SolutionsMenu = () => {
+const SolutionsMenu = ({ inverted }: { inverted?: boolean }) => {
   const { t } = useTranslation('common')
   const solutions = getSolutions(t)
   const ctas = getCallsToAction(t)
@@ -148,7 +148,10 @@ const SolutionsMenu = () => {
     >
       <button
         type='button'
-        className='underline-animate inline-flex items-center gap-x-1 text-base leading-6 font-semibold text-slate-800 focus:outline-hidden dark:text-white'
+        className={cn(
+          'underline-animate inline-flex items-center gap-x-1 text-base leading-6 font-semibold focus:outline-hidden',
+          inverted ? 'text-white' : 'text-slate-800 dark:text-white',
+        )}
       >
         <span>{t('header.solutions.title')}</span>
         <CaretDownIcon
@@ -270,9 +273,11 @@ const SolutionsMenu = () => {
 const ProfileMenu = ({
   logoutHandler,
   openFeedback,
+  inverted,
 }: {
   logoutHandler: () => void
   openFeedback: () => void
+  inverted?: boolean
 }) => {
   const { user } = useAuth()
   const {
@@ -285,7 +290,12 @@ const ProfileMenu = ({
       {({ open }) => (
         <>
           <div>
-            <MenuButton className='underline-animate flex items-center justify-center text-base leading-6 font-semibold text-slate-800 focus:outline-hidden dark:text-white'>
+            <MenuButton
+              className={cn(
+                'underline-animate flex items-center justify-center text-base leading-6 font-semibold focus:outline-hidden',
+                inverted ? 'text-white' : 'text-slate-800 dark:text-white',
+              )}
+            >
               <span>{t('common.account')}</span>
               <CaretDownIcon
                 className={cx(
@@ -469,18 +479,29 @@ const ProfileMenu = ({
   )
 }
 
-const Separator = () => (
-  <svg viewBox='0 0 2 2' className='h-0.5 w-0.5 flex-none fill-gray-400'>
+const Separator = ({ inverted }: { inverted?: boolean }) => (
+  <svg
+    viewBox='0 0 2 2'
+    className={cn(
+      'h-0.5 w-0.5 flex-none',
+      inverted ? 'fill-white/70' : 'fill-gray-400',
+    )}
+  >
     <circle cx={1} cy={1} r={1} />
   </svg>
 )
 
-const CommunityLinks = () => {
+const CommunityLinks = ({ inverted }: { inverted?: boolean }) => {
   return (
     <span className='flex items-center gap-2'>
       <a
         href={DISCORD_URL}
-        className='inline-flex items-center rounded-md p-1 text-indigo-600 transition-colors hover:text-indigo-500 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-slate-900/60 dark:text-indigo-400 dark:hover:text-indigo-100 dark:focus-visible:ring-slate-300/60'
+        className={cn(
+          'inline-flex items-center rounded-md p-1 transition-colors focus:outline-hidden focus-visible:ring-2',
+          inverted
+            ? 'text-white/85 hover:text-white focus-visible:ring-white/70'
+            : 'text-indigo-600 hover:text-indigo-500 focus-visible:ring-slate-900/60 dark:text-indigo-400 dark:hover:text-indigo-100 dark:focus-visible:ring-slate-300/60',
+        )}
         target='_blank'
         rel='noreferrer noopener'
       >
@@ -493,7 +514,12 @@ const CommunityLinks = () => {
       </a>
       <a
         href={GITHUB_URL}
-        className='inline-flex items-center rounded-md p-1 text-slate-700 transition-colors hover:text-slate-500 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-slate-900/60 dark:text-gray-200 dark:hover:text-white dark:focus-visible:ring-slate-300/60'
+        className={cn(
+          'inline-flex items-center rounded-md p-1 transition-colors focus:outline-hidden focus-visible:ring-2',
+          inverted
+            ? 'text-white/85 hover:text-white focus-visible:ring-white/70'
+            : 'text-slate-700 hover:text-slate-500 focus-visible:ring-slate-900/60 dark:text-gray-200 dark:hover:text-white dark:focus-visible:ring-slate-300/60',
+        )}
         target='_blank'
         rel='noreferrer noopener'
       >
@@ -513,11 +539,13 @@ const AuthedHeader = ({
   colourBackground,
   openMenu,
   openFeedback,
+  inverted,
 }: {
   logoutHandler: () => void
   colourBackground: boolean
   openMenu: () => void
   openFeedback: () => void
+  inverted?: boolean
 }) => {
   const { t } = useTranslation('common')
 
@@ -533,16 +561,19 @@ const AuthedHeader = ({
           <div className='flex items-center'>
             {/* Logo */}
             <Link to={routes.main}>
-              <SwetrixLogo />
+              <SwetrixLogo theme={inverted ? 'dark' : undefined} />
             </Link>
 
             <div className='ml-10 hidden gap-4 space-x-1 lg:flex'>
               {!isSelfhosted && !isDisableMarketingPages ? (
-                <SolutionsMenu />
+                <SolutionsMenu inverted={inverted} />
               ) : null}
               <a
                 href={DOCS_URL}
-                className='underline-animate text-base leading-6 font-semibold text-slate-800 focus:outline-hidden dark:text-white'
+                className={cn(
+                  'underline-animate text-base leading-6 font-semibold focus:outline-hidden',
+                  inverted ? 'text-white' : 'text-slate-800 dark:text-white',
+                )}
                 target='_blank'
                 rel='noreferrer noopener'
               >
@@ -550,24 +581,33 @@ const AuthedHeader = ({
               </a>
               <Link
                 to={routes.dashboard}
-                className='underline-animate text-base leading-6 font-semibold text-slate-800 focus:outline-hidden dark:text-white'
+                className={cn(
+                  'underline-animate text-base leading-6 font-semibold focus:outline-hidden',
+                  inverted ? 'text-white' : 'text-slate-800 dark:text-white',
+                )}
               >
                 {t('common.dashboard')}
               </Link>
             </div>
           </div>
           <div className='ml-1 hidden flex-wrap items-center justify-center space-y-1 space-x-2 sm:space-y-0 lg:ml-10 lg:flex lg:space-x-2'>
-            <CommunityLinks />
+            <CommunityLinks inverted={inverted} />
             <ProfileMenu
               logoutHandler={logoutHandler}
               openFeedback={openFeedback}
+              inverted={inverted}
             />
           </div>
           <div className='flex items-center justify-center space-x-3 lg:hidden'>
             <button
               type='button'
               onClick={openMenu}
-              className='rounded-md p-1 text-slate-700 transition-colors hover:bg-gray-400/20 hover:text-slate-600 dark:text-gray-200 dark:hover:bg-slate-700/50 dark:hover:text-gray-300'
+              className={cn(
+                'rounded-md p-1 transition-colors hover:bg-gray-400/20 dark:hover:bg-slate-700/50',
+                inverted
+                  ? 'text-white hover:text-white'
+                  : 'text-slate-700 hover:text-slate-600 dark:text-gray-200 dark:hover:text-gray-300',
+              )}
               aria-label={t('common.openMenu')}
             >
               <ListIcon className='h-8 w-8 flex-none' aria-hidden='true' />
@@ -583,10 +623,12 @@ const NotAuthedHeader = ({
   colourBackground,
   refPage,
   openMenu,
+  inverted,
 }: {
   colourBackground: boolean
   refPage?: boolean
   openMenu: () => void
+  inverted?: boolean
 }) => {
   const { t } = useTranslation('common')
 
@@ -602,22 +644,27 @@ const NotAuthedHeader = ({
           <div className='flex items-center'>
             {/* Logo */}
             {refPage ? (
-              <SwetrixLogo />
+              <SwetrixLogo theme={inverted ? 'dark' : undefined} />
             ) : (
               <Link to={routes.main}>
-                <SwetrixLogo />
+                <SwetrixLogo theme={inverted ? 'dark' : undefined} />
               </Link>
             )}
 
             {!refPage ? (
               <div className='ml-10 hidden items-center gap-4 space-x-1 lg:flex'>
                 {!isSelfhosted && !isDisableMarketingPages ? (
-                  <SolutionsMenu />
+                  <SolutionsMenu inverted={inverted} />
                 ) : null}
                 {!isSelfhosted && !isDisableMarketingPages ? (
                   <Link
                     to={`${routes.main}#pricing`}
-                    className='underline-animate text-base leading-6 font-semibold text-slate-800 focus:outline-hidden dark:text-white'
+                    className={cn(
+                      'underline-animate text-base leading-6 font-semibold focus:outline-hidden',
+                      inverted
+                        ? 'text-white'
+                        : 'text-slate-800 dark:text-white',
+                    )}
                     key='Pricing'
                   >
                     {t('common.pricing')}
@@ -625,13 +672,16 @@ const NotAuthedHeader = ({
                 ) : null}
                 <a
                   href={DOCS_URL}
-                  className='underline-animate text-base leading-6 font-semibold text-slate-800 focus:outline-hidden dark:text-white'
+                  className={cn(
+                    'underline-animate text-base leading-6 font-semibold focus:outline-hidden',
+                    inverted ? 'text-white' : 'text-slate-800 dark:text-white',
+                  )}
                   target='_blank'
                   rel='noreferrer noopener'
                 >
                   {t('common.docs')}
                 </a>
-                <CommunityLinks />
+                <CommunityLinks inverted={inverted} />
               </div>
             ) : null}
           </div>
@@ -640,14 +690,20 @@ const NotAuthedHeader = ({
               <>
                 <Link
                   to={routes.signin}
-                  className='underline-animate flex items-center text-base leading-6 font-semibold text-slate-800 dark:text-white'
+                  className={cn(
+                    'underline-animate flex items-center text-base leading-6 font-semibold',
+                    inverted ? 'text-white' : 'text-slate-800 dark:text-white',
+                  )}
                 >
                   {t('auth.common.signin')}
                 </Link>
-                <Separator />
+                <Separator inverted={inverted} />
                 <Link
                   to={routes.signup}
-                  className='underline-animate flex items-center text-base leading-6 font-semibold text-slate-800 dark:text-white'
+                  className={cn(
+                    'underline-animate flex items-center text-base leading-6 font-semibold',
+                    inverted ? 'text-white' : 'text-slate-800 dark:text-white',
+                  )}
                 >
                   {isSelfhosted ? t('header.signUp') : t('header.startForFree')}
                   <ArrowRightIcon className='mt-[1px] ml-1 size-4' />
@@ -659,7 +715,12 @@ const NotAuthedHeader = ({
             <button
               type='button'
               onClick={openMenu}
-              className='rounded-md p-1 text-slate-700 transition-colors hover:bg-gray-400/20 hover:text-slate-600 dark:text-gray-200 dark:hover:bg-slate-700/50 dark:hover:text-gray-300'
+              className={cn(
+                'rounded-md p-1 transition-colors hover:bg-gray-400/20 dark:hover:bg-slate-700/50',
+                inverted
+                  ? 'text-white hover:text-white'
+                  : 'text-slate-700 hover:text-slate-600 dark:text-gray-200 dark:hover:text-gray-300',
+              )}
               aria-label={t('common.openMenu')}
             >
               <ListIcon className='h-8 w-8 flex-none' aria-hidden='true' />
@@ -674,9 +735,10 @@ const NotAuthedHeader = ({
 interface HeaderProps {
   refPage?: boolean
   transparent?: boolean
+  inverted?: boolean
 }
 
-const Header = ({ refPage, transparent }: HeaderProps) => {
+const Header = ({ refPage, transparent, inverted }: HeaderProps) => {
   const { t } = useTranslation('common')
   const { isAuthenticated, logout } = useAuth()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@@ -710,12 +772,14 @@ const Header = ({ refPage, transparent }: HeaderProps) => {
           colourBackground={!transparent}
           openMenu={openMenu}
           openFeedback={openFeedback}
+          inverted={inverted}
         />
       ) : (
         <NotAuthedHeader
           colourBackground={!transparent}
           refPage={refPage}
           openMenu={openMenu}
+          inverted={inverted}
         />
       )}
 
diff --git a/web/app/components/marketing/DitchGoogle.tsx b/web/app/components/marketing/DitchGoogle.tsx
index 3dced280d..eebe68eb2 100644
--- a/web/app/components/marketing/DitchGoogle.tsx
+++ b/web/app/components/marketing/DitchGoogle.tsx
@@ -1,73 +1,80 @@
-import { ArrowRightIcon, CheckIcon } from '@phosphor-icons/react'
+import { ArrowRightIcon, CheckCircleIcon } from '@phosphor-icons/react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link } from '~/ui/Link'
 import { Text } from '~/ui/Text'
 
 import routes from '~/utils/routes'
 
+const TRUST_KEYS = ['main.freeToTry', 'main.easyToUse', 'main.privacyFirst']
+
 export const DitchGoogle = () => {
   const { t } = useTranslation('common')
 
   return (
     <div className='relative mx-auto max-w-7xl px-2 pt-10 pb-20 lg:px-8'>
-      <div className='relative mx-auto max-w-7xl overflow-hidden rounded-4xl p-1 text-center sm:p-2 lg:p-3'>
-        <div aria-hidden className='pointer-events-none absolute inset-0'>
-          <div className='absolute inset-0 rounded-4xl bg-linear-115 from-red-500/50 to-orange-300/30 sm:bg-linear-145 dark:from-red-500/40 dark:to-slate-800/50' />
+      <section className='relative isolate overflow-hidden rounded-4xl bg-slate-950 px-5 py-10 ring-1 ring-black/5 sm:px-8 sm:py-14 lg:px-12 lg:py-18 dark:ring-white/10'>
+        <div aria-hidden className='pointer-events-none absolute inset-0 -z-10'>
+          <picture className='absolute inset-0 block'>
+            <source srcSet='/assets/hero-background.avif' type='image/avif' />
+            <img
+              alt=''
+              className='size-full object-cover object-center opacity-80 saturate-125'
+              src='/assets/hero-background.webp'
+              loading='lazy'
+            />
+          </picture>
+          <div className='absolute inset-0 bg-slate-950/65' />
+          <div className='absolute inset-0 bg-radial-[at_50%_38%] from-red-950/20 via-slate-950/20 to-slate-950/85' />
         </div>
-        <div className='rounded-xl p-8 backdrop-blur-xl sm:p-12 lg:p-16'>
-          <div className='mx-auto max-w-4xl'>
-            <Text
-              as='h2'
-              size='4xl'
-              weight='bold'
-              tracking='tight'
-              className='mb-6 sm:text-5xl lg:text-6xl'
-            >
-              <Trans
-                t={t}
-                i18nKey='main.timeToDitchGoogleAnalytics'
-                components={{
-                  colour: <span className='text-red-600 dark:text-red-400' />,
-                }}
-              />
-            </Text>
-            <Text
-              as='p'
-              size='xl'
-              colour='secondary'
-              className='mx-auto mb-10 max-w-2xl leading-relaxed'
+
+        <div className='relative mx-auto flex max-w-5xl flex-col items-center text-center'>
+          <Text
+            as='h2'
+            size='4xl'
+            weight='bold'
+            tracking='tight'
+            colour='primary'
+            className='dark max-w-5xl sm:text-5xl lg:text-6xl'
+          >
+            <Trans
+              t={t}
+              i18nKey='main.timeToDitchGoogleAnalytics'
+              components={{
+                colour: <span className='text-red-400' />,
+              }}
+            />
+          </Text>
+          <Text
+            as='p'
+            size='lg'
+            colour='secondary'
+            className='dark mt-6 max-w-3xl leading-8'
+          >
+            {t('main.whyDitch')}
+          </Text>
+          <div className='mt-9 flex w-full flex-col justify-center gap-3 sm:w-auto sm:flex-row sm:items-center'>
+            <Link
+              to={routes.signup}
+              className='inline-flex h-12 items-center justify-center rounded-md bg-white px-5 text-slate-950 ring-1 ring-white/30 transition-colors hover:bg-gray-100'
+              aria-label={t('titles.signup')}
             >
-              {t('main.whyDitch')}
-            </Text>
-            <div className='mb-8 flex flex-col items-center justify-center gap-4 sm:flex-row'>
-              <Link
-                to={routes.signup}
-                className='flex items-center justify-center rounded-md border-2 border-slate-900 bg-slate-900 px-6 py-4 text-white transition-all hover:bg-transparent hover:text-slate-900 dark:border-slate-50 dark:bg-gray-50 dark:text-slate-900 dark:hover:text-gray-50'
-                aria-label={t('titles.signup')}
-              >
-                <span className='mr-1 text-center text-base font-semibold'>
-                  {t('main.startAXDayFreeTrial', { amount: 14 })}
-                </span>
-                <ArrowRightIcon className='mt-[1px] h-4 w-5' />
-              </Link>
-            </div>
-            <div className='flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm text-slate-900 dark:text-slate-200'>
-              <div className='flex items-center'>
-                <CheckIcon className='mr-1 size-4' />
-                {t('main.freeToTry')}
-              </div>
-              <div className='flex items-center'>
-                <CheckIcon className='mr-1 size-4' />
-                {t('main.easyToUse')}
-              </div>
-              <div className='flex items-center'>
-                <CheckIcon className='mr-1 size-4' />
-                {t('main.privacyFirst')}
+              <span className='text-center text-base font-semibold'>
+                {t('main.startAXDayFreeTrial', { amount: 14 })}
+              </span>
+              <ArrowRightIcon className='mt-[1px] ml-1 h-4 w-5' />
+            </Link>
+          </div>
+
+          <div className='mt-7 flex flex-wrap justify-center gap-x-6 gap-y-3 text-sm text-gray-200'>
+            {TRUST_KEYS.map((key) => (
+              <div key={key} className='flex items-center gap-2'>
+                <CheckCircleIcon className='size-4 text-gray-50' />
+                {t(key)}
               </div>
-            </div>
+            ))}
           </div>
         </div>
-      </div>
+      </section>
     </div>
   )
 }
diff --git a/web/app/components/marketing/FeaturesGrid.tsx b/web/app/components/marketing/FeaturesGrid.tsx
index 0b7e24180..95c769d98 100644
--- a/web/app/components/marketing/FeaturesGrid.tsx
+++ b/web/app/components/marketing/FeaturesGrid.tsx
@@ -45,7 +45,7 @@ const DashboardMockup = () => (
         <Text
           size='xxs'
           weight='semibold'
-          colour='muted'
+          colour='secondary'
           tracking='wide'
           className='uppercase'
         >
@@ -103,7 +103,7 @@ const DashboardMockup = () => (
       </svg>
       <div className='mt-1 flex justify-between'>
         {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((d) => (
-          <Text key={d} size='xxs' colour='muted'>
+          <Text key={d} size='xxs' colour='secondary'>
             {d}
           </Text>
         ))}
@@ -116,10 +116,10 @@ const DashboardMockup = () => (
         Events
       </Text>
       <div className='mt-2 mb-1.5 flex items-center justify-between px-1'>
-        <Text size='xxs' weight='medium' colour='muted'>
+        <Text size='xxs' weight='medium' colour='secondary'>
           Event
         </Text>
-        <Text size='xxs' weight='medium' colour='muted'>
+        <Text size='xxs' weight='medium' colour='secondary'>
           Quantity
         </Text>
       </div>
@@ -136,7 +136,7 @@ const DashboardMockup = () => (
             className='relative flex items-center justify-between rounded-sm px-1 py-1.5'
           >
             <div
-              className='absolute inset-0 rounded-sm bg-blue-50 dark:bg-blue-900/10'
+              className='absolute inset-0 rounded-sm bg-blue-50 dark:bg-blue-900/30'
               style={{ width: `${barW}%` }}
             />
             <Text size='xs' className='relative z-10'>
@@ -146,10 +146,10 @@ const DashboardMockup = () => (
               <Text size='xs' weight='medium'>
                 {count}
               </Text>
-              <Text size='xs' colour='muted' className='mx-1.5'>
+              <Text size='xs' colour='secondary' className='mx-1.5'>
                 |
               </Text>
-              <Text size='xs' colour='muted'>
+              <Text size='xs' colour='secondary'>
                 {pct}%
               </Text>
             </span>
@@ -168,7 +168,7 @@ const DashboardMockup = () => (
           { label: 'Bounce rate', value: '42%', up: false },
         ].map(({ label, value, up }) => (
           <div key={label} className='flex items-center justify-between'>
-            <Text size='xs' colour='muted'>
+            <Text size='xs' colour='secondary'>
               {label}
             </Text>
             <div className='flex items-center gap-1.5'>
@@ -195,10 +195,10 @@ const DashboardMockup = () => (
         Pages
       </Text>
       <div className='mb-1 flex items-center justify-between px-1'>
-        <Text size='xs' weight='medium' colour='muted'>
+        <Text size='xs' weight='medium' colour='secondary'>
           Page
         </Text>
-        <Text size='xs' weight='medium' colour='muted'>
+        <Text size='xs' weight='medium' colour='secondary'>
           Visitors
         </Text>
       </div>
diff --git a/web/app/components/marketing/LogoCloud.tsx b/web/app/components/marketing/LogoCloud.tsx
index 2524041f3..858c7f141 100644
--- a/web/app/components/marketing/LogoCloud.tsx
+++ b/web/app/components/marketing/LogoCloud.tsx
@@ -58,24 +58,46 @@ const LOGOS: ImageLogo[] = [
   },
 ]
 
-export const LogoCloud = () => {
+type LogoCloudVariant = 'old' | 'new'
+
+interface LogoCloudProps {
+  variant?: LogoCloudVariant
+}
+
+export const LogoCloud = ({ variant = 'new' }: LogoCloudProps) => {
   const { t } = useTranslation('common')
   const { theme } = useTheme()
+  const isNewVariant = variant === 'new'
 
   return (
-    <section className='rounded-b-4xl bg-gray-100/80 pt-14 pb-16 dark:bg-slate-900/50'>
+    <section
+      className={cn(
+        'rounded-b-4xl pt-14 pb-16',
+        isNewVariant
+          ? 'mx-2 -mt-px bg-slate-950 ring-1 ring-black/5 dark:ring-white/10'
+          : 'bg-gray-100/80 dark:bg-slate-900/50',
+      )}
+    >
       <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
         <Text
           as='p'
           size='xs'
           weight='semibold'
-          colour='muted'
-          className='text-center tracking-[0.18em] uppercase'
+          colour={isNewVariant ? 'inherit' : 'muted'}
+          className={cn(
+            'text-center tracking-[0.18em] uppercase',
+            isNewVariant && 'text-gray-200',
+          )}
         >
           {t('main.logoCloud.title')}
         </Text>
 
-        <ul className='mx-auto mt-10 grid max-w-5xl grid-cols-2 items-center justify-items-center gap-x-8 gap-y-10 sm:grid-cols-3 sm:gap-x-12 lg:max-w-6xl lg:grid-cols-6 lg:gap-x-8'>
+        <ul
+          className={cn(
+            'mx-auto mt-10 grid grid-cols-2 items-center justify-items-center gap-x-8 gap-y-10 sm:grid-cols-3 sm:gap-x-12 lg:max-w-6xl lg:grid-cols-6 lg:gap-x-8',
+            isNewVariant ? 'max-w-6xl' : 'max-w-5xl',
+          )}
+        >
           {LOGOS.map((logo) => (
             <li
               key={logo.name}
@@ -83,12 +105,21 @@ export const LogoCloud = () => {
             >
               <img
                 alt={logo.name}
-                src={logo.dark && theme === 'dark' ? logo.dark : logo.light}
+                src={
+                  isNewVariant
+                    ? (logo.dark ?? logo.light)
+                    : logo.dark && theme === 'dark'
+                      ? logo.dark
+                      : logo.light
+                }
                 loading='lazy'
                 className={cn(
                   'w-auto max-w-[180px] object-contain',
                   logo.heightClass,
-                  !logo.dark && 'dark:brightness-0 dark:invert',
+                  !logo.dark &&
+                    (isNewVariant
+                      ? 'brightness-0 invert'
+                      : 'dark:brightness-0 dark:invert'),
                 )}
               />
             </li>
diff --git a/web/app/routes/_index.tsx b/web/app/routes/_index.tsx
index da1a1b6aa..df647c4a7 100644
--- a/web/app/routes/_index.tsx
+++ b/web/app/routes/_index.tsx
@@ -23,6 +23,7 @@ import FAQ from '~/components/marketing/FAQ'
 import Integrations from '~/components/marketing/Integrations'
 import MarketingPricing from '~/components/pricing/MarketingPricing'
 import useBreakpoint from '~/hooks/useBreakpoint'
+import Button from '~/ui/Button'
 import {
   LIVE_DEMO_URL,
   isSelfhosted,
@@ -39,6 +40,7 @@ import { FeaturesGrid } from '~/components/marketing/FeaturesGrid'
 import { LogoCloud } from '~/components/marketing/LogoCloud'
 import { WhySwitch } from '~/components/marketing/WhySwitch'
 import { Text } from '~/ui/Text'
+import { getExperimentVariant } from '~/utils/analytics.server'
 
 export const meta: MetaFunction = () => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -56,19 +58,43 @@ export const sitemap: SitemapFunction = () => ({
   exclude: isSelfhosted || isDisableMarketingPages,
 })
 
+const DEFAULT_LANDING_HERO_EXPERIMENT_ID = 'landing-page-hero-redesign'
+const OLD_LANDING_HERO_VARIANT = 'old'
+const NEW_LANDING_HERO_VARIANT = 'new'
+
+type LandingHeroVariant =
+  | typeof OLD_LANDING_HERO_VARIANT
+  | typeof NEW_LANDING_HERO_VARIANT
+
+const getLandingHeroVariant = (variant: string | null): LandingHeroVariant => {
+  return variant === NEW_LANDING_HERO_VARIANT
+    ? NEW_LANDING_HERO_VARIANT
+    : OLD_LANDING_HERO_VARIANT
+}
+
 export async function loader({ request }: LoaderFunctionArgs) {
   if (isSelfhosted || isDisableMarketingPages) {
     return redirect('/login', 302)
   }
 
-  const [metainfoResult, stats] = await Promise.all([
-    serverFetch<Metainfo>(request, 'user/metainfo', { skipAuth: true }),
-    getGeneralStats(request),
-  ])
+  const landingHeroExperimentId =
+    process.env.LANDING_HERO_EXPERIMENT_ID || DEFAULT_LANDING_HERO_EXPERIMENT_ID
+
+  const [metainfoResult, stats, landingHeroExperimentVariant] =
+    await Promise.all([
+      serverFetch<Metainfo>(request, 'user/metainfo', { skipAuth: true }),
+      getGeneralStats(request),
+      getExperimentVariant(
+        request,
+        landingHeroExperimentId,
+        OLD_LANDING_HERO_VARIANT,
+      ),
+    ])
 
   return {
     metainfo: metainfoResult.data ?? DEFAULT_METAINFO,
     stats,
+    landingHeroVariant: getLandingHeroVariant(landingHeroExperimentVariant),
   }
 }
 
@@ -131,7 +157,7 @@ export const FeedbackDual = () => {
                 <Text as='p' size='base' weight='medium' colour='primary'>
                   Alex Bowles
                 </Text>
-                <Text as='p' size='base' colour='muted'>
+                <Text as='p' size='base' colour='secondary'>
                   Co-founder of Casterlabs
                 </Text>
               </div>
@@ -177,7 +203,7 @@ export const FeedbackDual = () => {
                 <Text as='p' size='base' weight='medium' colour='primary'>
                   Alper Alkan
                 </Text>
-                <Text as='p' size='base' colour='muted'>
+                <Text as='p' size='base' colour='secondary'>
                   Co-founder of Phalcode
                 </Text>
               </div>
@@ -270,7 +296,7 @@ const Testimonials = ({
   )
 }
 
-const LiveDemoPreview = () => {
+const OldLiveDemoPreview = () => {
   const { t } = useTranslation('common')
   const { theme } = useTheme()
   const {
@@ -291,8 +317,6 @@ const LiveDemoPreview = () => {
           className='relative h-auto w-full'
           width={2328}
           height={1666}
-          // eslint-disable-next-line react/no-unknown-property
-          fetchPriority='high'
           alt='Swetrix Analytics dashboard'
         />
         <div className='absolute inset-0 flex items-center justify-center bg-slate-900/20 opacity-100 backdrop-blur-[1px] transition-opacity duration-200'>
@@ -349,9 +373,59 @@ const LiveDemoPreview = () => {
   )
 }
 
-const Hero = () => {
+const NewLiveDemoPreview = () => {
+  const { theme } = useTheme()
+  const {
+    i18n: { language },
+  } = useTranslation('common')
+
+  const isUpToLg = !useBreakpoint('lg')
+
+  if (isUpToLg) {
+    return (
+      <div className='relative z-20 mx-auto mt-10 overflow-hidden rounded-2xl bg-white/80 p-1.5 shadow-2xl ring-1 shadow-slate-950/20 ring-white/40 backdrop-blur-md dark:bg-slate-950/80 dark:ring-white/10'>
+        <img
+          src={
+            theme === 'dark'
+              ? '/assets/screenshot_dark.png'
+              : '/assets/screenshot_light.png'
+          }
+          className='relative h-auto w-full rounded-xl'
+          width={2328}
+          height={1666}
+          alt='Swetrix Analytics dashboard'
+        />
+      </div>
+    )
+  }
+
+  const localisedDemoPath = localisePath('/projects/STEzHcB1rALV', language)
+
+  return (
+    <div
+      className='relative z-20 mx-auto mt-12 w-full max-w-[1480px] overflow-hidden rounded-2xl bg-white/90 p-2 shadow-2xl ring-1 shadow-slate-950/25 ring-white/40 backdrop-blur-xl dark:bg-slate-950/90 dark:ring-white/10'
+      style={{
+        transform: 'translateZ(0)',
+        WebkitTransform: 'translateZ(0)',
+        willChange: 'transform',
+        contain: 'paint',
+        WebkitMaskImage: '-webkit-radial-gradient(white, black)',
+      }}
+    >
+      <div className='relative h-[580px] overflow-hidden rounded-xl bg-slate-950 lg:h-[640px] xl:h-[700px]'>
+        <iframe
+          src={`https://swetrix.com${localisedDemoPath}?tab=traffic&theme=${theme}&embedded=true`}
+          className='size-full rounded-xl'
+          title='Swetrix Analytics Live Demo'
+          loading='eager'
+        />
+      </div>
+    </div>
+  )
+}
+
+const OldHero = ({ stats }: { stats: Stats | null }) => {
   const { t } = useTranslation('common')
-  const { stats } = useLoaderData<typeof loader>()
 
   return (
     <div className='relative isolate bg-gray-100/80 pt-2 dark:bg-slate-900/50'>
@@ -419,7 +493,7 @@ const Hero = () => {
                 <div className='h-[240px] w-full rounded-2xl bg-slate-800/10 ring-1 ring-black/5 sm:h-[320px] md:h-[580px] lg:h-[640px] xl:h-[700px] dark:bg-slate-800/20 dark:ring-white/10' />
               }
             >
-              {() => <LiveDemoPreview />}
+              {() => <OldLiveDemoPreview />}
             </ClientOnly>
           </div>
           <Testimonials className='mt-8 lg:hidden' stats={stats} />
@@ -429,6 +503,112 @@ const Hero = () => {
   )
 }
 
+const NewHero = ({ stats }: { stats: Stats | null }) => {
+  const { t } = useTranslation('common')
+
+  return (
+    <div className='relative isolate overflow-hidden bg-gray-50 pt-2 dark:bg-slate-950'>
+      <div className='relative mx-2 overflow-hidden rounded-t-4xl bg-slate-950 shadow-2xl ring-1 shadow-slate-950/20 ring-black/5 dark:ring-white/10'>
+        <div aria-hidden className='pointer-events-none absolute inset-0'>
+          <picture className='absolute inset-0 block'>
+            <source srcSet='/assets/hero-background.avif' type='image/avif' />
+            <img
+              alt=''
+              className='size-full object-cover object-center opacity-95 saturate-125'
+              src='/assets/hero-background.webp'
+            />
+          </picture>
+          <div className='absolute inset-0 bg-slate-950/50' />
+          <div className='absolute inset-0 bg-radial-[at_50%_0%] from-indigo-300/30 via-slate-950/10 to-slate-950/80' />
+          <div className='absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-b from-transparent to-slate-950' />
+        </div>
+        <Header transparent inverted />
+        <section className='relative z-10 mx-auto flex max-w-[1500px] flex-col items-center px-4 pt-14 pb-6 sm:px-6 sm:pt-16 lg:px-8 lg:pt-20'>
+          <div className='flex w-full flex-col items-center'>
+            <Text
+              as='h1'
+              weight='semibold'
+              className='mx-auto max-w-6xl text-center [font-family:Geist,ui-sans-serif,system-ui,sans-serif] text-5xl leading-[0.98] text-balance text-white sm:text-6xl lg:text-7xl xl:text-8xl'
+            >
+              {t('main.slogan')}
+            </Text>
+            <Text
+              as='p'
+              size='lg'
+              className='mx-auto mt-5 max-w-3xl text-center leading-8 text-gray-50'
+            >
+              {t('main.description')}
+            </Text>
+            <div className='mt-8 flex w-full flex-col items-stretch justify-center gap-3 sm:w-auto sm:flex-row sm:items-center'>
+              <Link
+                to={routesPath.signup}
+                className='inline-flex h-12 items-center justify-center rounded-md bg-white px-5 text-slate-950 shadow-lg ring-1 shadow-slate-950/20 ring-white/30 transition-colors hover:bg-gray-100'
+                aria-label={t('titles.signup')}
+              >
+                <span className='text-center text-base font-semibold'>
+                  {t('main.startAXDayFreeTrial', { amount: 14 })}
+                </span>
+                <ArrowRightIcon className='mt-[1px] ml-1 h-4 w-5' />
+              </Link>
+              <Button
+                to={LIVE_DEMO_URL}
+                linkProps={{
+                  target: '_blank',
+                  rel: 'noopener noreferrer',
+                }}
+                variant='secondary'
+                size='xl'
+                className='h-12 border-white/25 bg-white/10 px-5 text-base font-semibold text-white shadow-none ring-white/25 backdrop-blur-md hover:bg-white/20 dark:border-white/25 dark:bg-white/10 dark:text-white dark:hover:bg-white/20'
+                aria-label={`${t('main.seeLiveDemo')} (opens in a new tab)`}
+              >
+                {t('common.liveDemo')}
+              </Button>
+            </div>
+            <div className='mt-8 flex max-w-4xl flex-wrap justify-center gap-x-16 gap-y-3 text-gray-50'>
+              <div className='flex items-center gap-2 text-sm whitespace-nowrap'>
+                <GaugeIcon className='size-5 shrink-0' />
+                <span>{t('main.heroBenefits.quickSetup')}</span>
+              </div>
+              <div className='flex items-center gap-2 text-sm whitespace-nowrap'>
+                <CookieIcon className='size-5 shrink-0' />
+                <span>{t('main.heroBenefits.cookieless')}</span>
+              </div>
+              <div className='flex items-center gap-2 text-sm whitespace-nowrap'>
+                <StarIcon className='size-5 shrink-0' />
+                <span>{t('main.heroBenefits.realTimeDashboard')}</span>
+              </div>
+              <div className='flex items-center gap-2 text-sm whitespace-nowrap'>
+                <GithubLogoIcon className='size-5 shrink-0' />
+                <span>{t('main.heroBenefits.openSource')}</span>
+              </div>
+            </div>
+            <Testimonials className='dark mt-8' stats={stats} />
+          </div>
+          <div className='w-full'>
+            <ClientOnly
+              fallback={
+                <div className='mx-auto mt-12 h-[580px] w-full max-w-[1480px] rounded-2xl bg-white/10 ring-1 ring-white/20 backdrop-blur-xl lg:h-[640px] xl:h-[700px]' />
+              }
+            >
+              {() => <NewLiveDemoPreview />}
+            </ClientOnly>
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}
+
+const Hero = ({ variant }: { variant: LandingHeroVariant }) => {
+  const { stats } = useLoaderData<typeof loader>()
+
+  if (variant === NEW_LANDING_HERO_VARIANT) {
+    return <NewHero stats={stats} />
+  }
+
+  return <OldHero stats={stats} />
+}
+
 const SOFTWARE_APPLICATION_JSONLD = {
   '@context': 'https://schema.org',
   '@type': 'SoftwareApplication',
@@ -472,14 +652,14 @@ const SOFTWARE_APPLICATION_JSONLD = {
 }
 
 export default function Index() {
-  const { metainfo } = useLoaderData<typeof loader>()
+  const { landingHeroVariant, metainfo } = useLoaderData<typeof loader>()
 
   return (
     <div className='overflow-hidden'>
       <main className='bg-gray-50 dark:bg-slate-950'>
-        <Hero />
+        <Hero variant={landingHeroVariant} />
 
-        <LogoCloud />
+        <LogoCloud variant={landingHeroVariant} />
 
         <FeaturesGrid />
 
diff --git a/web/app/utils/analytics.ts b/web/app/utils/analytics.ts
index d60e747c3..accff97ba 100644
--- a/web/app/utils/analytics.ts
+++ b/web/app/utils/analytics.ts
@@ -9,69 +9,69 @@ const SWETRIX_API_PROXY_PATH = '/_internal_data_inngest_proxy'
 const isIframe = isBrowser ? window.self !== window.top : false
 
 const REFS_TO_IGNORE = [
-  /https:\/\/swetrix.com\/projects\/(?!new$)[^/]+$/i,
-  /https:\/\/swetrix.com\/projects\/settings/i,
-  /https:\/\/swetrix.com\/verify/i,
-  /https:\/\/swetrix.com\/password-reset/i,
-  /https:\/\/swetrix.com\/change-email/i,
-  /https:\/\/swetrix.com\/share/i,
-  /https:\/\/swetrix.com\/captchas\/(?!new$)[^/]+$/i,
-  /https:\/\/swetrix.com\/captchas\/settings/i,
-  /https:\/\/swetrix.com\/organisations\/[^/]+/i,
-  /https:\/\/swetrix.com\/signup\/invitation\/[^/]+/i,
+  /https:\/\/swetrix.com\/(?:[^/]+\/)?projects\/(?!new$)[^/]+$/i,
+  /https:\/\/swetrix.com\/(?:[^/]+\/)?projects\/settings/i,
+  /https:\/\/swetrix.com\/(?:[^/]+\/)?verify/i,
+  /https:\/\/swetrix.com\/(?:[^/]+\/)?password-reset/i,
+  /https:\/\/swetrix.com\/(?:[^/]+\/)?change-email/i,
+  /https:\/\/swetrix.com\/(?:[^/]+\/)?share/i,
+  /https:\/\/swetrix.com\/(?:[^/]+\/)?captchas\/(?!new$)[^/]+$/i,
+  /https:\/\/swetrix.com\/(?:[^/]+\/)?captchas\/settings/i,
+  /https:\/\/swetrix.com\/(?:[^/]+\/)?organisations\/[^/]+/i,
+  /https:\/\/swetrix.com\/(?:[^/]+\/)?signup\/invitation\/[^/]+/i,
 ]
 
 const PATHS_REPLACEMENT_MAP = [
   {
-    regex: /^\/projects\/(?!new$)[^/]+$/i,
+    regex: /^\/(?:[^/]+\/)?projects\/(?!new$)[^/]+$/i,
     replacement: '/projects/[id]',
   },
   {
-    regex: /^\/projects\/settings/i,
+    regex: /^\/(?:[^/]+\/)?projects\/settings/i,
     replacement: '/projects/settings/[id]',
   },
   {
-    regex: /^\/verify/i,
+    regex: /^\/(?:[^/]+\/)?verify/i,
     replacement: '/verify/[token]',
   },
   {
-    regex: /^\/password-reset/i,
+    regex: /^\/(?:[^/]+\/)?password-reset/i,
     replacement: '/password-reset/[token]',
   },
   {
-    regex: /^\/change-email/i,
+    regex: /^\/(?:[^/]+\/)?change-email/i,
     replacement: '/change-email/[token]',
   },
   {
-    regex: /^\/reports-unsubscribe/i,
+    regex: /^\/(?:[^/]+\/)?reports-unsubscribe/i,
     replacement: '/reports-unsubscribe/[token]',
   },
   {
-    regex: /^\/share/i,
+    regex: /^\/(?:[^/]+\/)?share/i,
     replacement: '/share/[token]',
   },
   {
-    regex: /\/projects\/([^/]+)\/alerts\/create/i,
+    regex: /^\/(?:[^/]+\/)?projects\/([^/]+)\/alerts\/create/i,
     replacement: '/projects/[id]/alerts/create',
   },
   {
-    regex: /\/projects\/([^/]+)\/subscribers\/invite/i,
+    regex: /^\/(?:[^/]+\/)?projects\/([^/]+)\/subscribers\/invite/i,
     replacement: '/projects/[id]/subscribers/invite',
   },
   {
-    regex: /\/projects\/([^/]+)\/alerts\/settings/i,
+    regex: /^\/(?:[^/]+\/)?projects\/([^/]+)\/alerts\/settings/i,
     replacement: '/projects/[id]/alerts/settings/[alert]',
   },
   {
-    regex: /\/projects\/([^/]+)\/password/i,
+    regex: /^\/(?:[^/]+\/)?projects\/([^/]+)\/password/i,
     replacement: '/projects/[id]/password',
   },
   {
-    regex: /^\/organisations\/[^/]+/i,
+    regex: /^\/(?:[^/]+\/)?organisations\/[^/]+/i,
     replacement: '/organisations/[id]',
   },
   {
-    regex: /^\/signup\/invitation\/[^/]+/i,
+    regex: /^\/(?:[^/]+\/)?signup\/invitation\/[^/]+/i,
     replacement: '/signup/invitation/[id]',
   },
 ]
diff --git a/web/app/utils/renderCtaHtml.ts b/web/app/utils/renderCtaHtml.ts
index 91f9ff327..a18f54c36 100644
--- a/web/app/utils/renderCtaHtml.ts
+++ b/web/app/utils/renderCtaHtml.ts
@@ -1,55 +1,57 @@
 import routes from './routes'
 
-/**
- * Renders the "Time to Switch" CTA component as static HTML
- * This is used in blog posts via the ::CTA:TIME_TO_SWITCH:: placeholder
- */
-const checkIconSvg = `<svg class="mr-1 size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`
+const checkIconSvg = `<svg class="size-4 text-gray-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20"/><path d="m9 12 2 2 4-4"/></svg>`
 
-const arrowRightSvg = `<svg class="mt-[1px] h-4 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" /></svg>`
+const arrowRightSvg = `<svg class="mt-[1px] ml-1 h-4 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" /></svg>`
 
-/**
- * Renders the "Time to Switch" CTA component as static HTML
- * This is used in blog posts via the ::CTA:TIME_TO_SWITCH:: placeholder
- */
-export function renderTimeToSwitchCta(): string {
+type ForestCtaOptions = {
+  titleHtml: string
+  description: string
+  ctaLabel: string
+  trustItems: string[]
+}
+
+function renderForestCtaHtml({
+  titleHtml,
+  description,
+  ctaLabel,
+  trustItems,
+}: ForestCtaOptions): string {
   return `
 <div class="not-prose relative mx-auto my-10 max-w-4xl px-2 lg:px-0">
-  <div class="relative mx-auto overflow-hidden rounded-3xl p-1 text-center sm:p-2 lg:p-3">
-    <div aria-hidden="true" class="pointer-events-none absolute inset-0">
-      <div class="absolute inset-0 rounded-4xl bg-linear-115 from-red-500/50 to-orange-300/30 sm:bg-linear-145 dark:from-red-500/40 dark:to-slate-800/50"></div>
+  <div class="relative isolate overflow-hidden rounded-4xl bg-slate-950 px-5 py-10 ring-1 ring-black/5 sm:px-8 sm:py-14 lg:px-12 lg:py-18 dark:ring-white/10">
+    <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
+      <img alt="" class="absolute inset-0 size-full object-cover object-center opacity-80 saturate-125" src="/assets/hero-background.webp" loading="lazy" />
+      <div class="absolute inset-0 bg-slate-950/65"></div>
+      <div class="absolute inset-0 bg-radial-[at_50%_38%] from-red-950/20 via-slate-950/20 to-slate-950/85"></div>
     </div>
-    <div class="rounded-xl p-8 backdrop-blur-xl sm:p-10 lg:p-12">
-      <div class="mx-auto max-w-3xl">
-        <h2 class="mb-4 text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl lg:text-5xl dark:text-white">
-          The web analytics your site deserves.
-        </h2>
-        <p class="mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-slate-800 dark:text-slate-200">
-          Tired of bloated dashboards, privacy concerns, and data you can't trust? Switch to Swetrix and get simple, powerful analytics that respects your users.
-        </p>
-        <div class="mb-6 flex flex-col items-center justify-center gap-4 sm:flex-row">
-          <a
-            href="${routes.signup}"
-            class="flex items-center justify-center rounded-md border-2 border-slate-900 bg-slate-900 px-6 py-3 text-white transition-all hover:bg-transparent hover:text-slate-900 dark:border-slate-50 dark:bg-gray-50 dark:text-slate-900 dark:hover:bg-transparent dark:hover:text-gray-50"
-          >
-            <span class="mr-1 text-center text-base font-semibold">Start your free trial</span>
-            ${arrowRightSvg}
-          </a>
-        </div>
-        <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 text-sm text-slate-800 dark:text-slate-200">
-          <div class="flex items-center">
-            ${checkIconSvg}
-            Cancel anytime
-          </div>
-          <div class="flex items-center">
-            ${checkIconSvg}
-            5 minute setup
-          </div>
-          <div class="flex items-center">
-            ${checkIconSvg}
-            GDPR compliant
-          </div>
-        </div>
+
+    <div class="relative mx-auto flex max-w-5xl flex-col items-center text-center">
+      <h2 class="max-w-5xl text-3xl font-bold tracking-tight text-gray-50 sm:text-4xl lg:text-5xl">
+        ${titleHtml}
+      </h2>
+      <p class="mt-6 max-w-3xl text-lg leading-8 text-gray-200">
+        ${description}
+      </p>
+      <div class="mt-9 flex w-full flex-col justify-center gap-3 sm:w-auto sm:flex-row sm:items-center">
+        <a
+          href="${routes.signup}"
+          class="inline-flex h-12 items-center justify-center rounded-md bg-white px-5 text-slate-950 ring-1 ring-white/30 transition-colors hover:bg-gray-100"
+        >
+          <span class="text-center text-base font-semibold">${ctaLabel}</span>
+          ${arrowRightSvg}
+        </a>
+      </div>
+
+      <div class="mt-7 flex flex-wrap justify-center gap-x-6 gap-y-3 text-sm text-gray-200">
+        ${trustItems
+          .map(
+            (item) => `<div class="flex items-center gap-2">
+          ${checkIconSvg}
+          ${item}
+        </div>`,
+          )
+          .join('')}
       </div>
     </div>
   </div>
@@ -57,51 +59,23 @@ export function renderTimeToSwitchCta(): string {
 `
 }
 
-/**
- * Renders the "Ditch Google Analytics" CTA component as static HTML
- * This is used in blog posts via the ::CTA:TIME_TO_DITCH_GOOGLE:: placeholder
- */
+export function renderTimeToSwitchCta(): string {
+  return renderForestCtaHtml({
+    titleHtml: 'The web analytics your site deserves.',
+    description:
+      "Tired of bloated dashboards, privacy concerns, and data you can't trust? Switch to Swetrix and get simple, powerful analytics that respects your users.",
+    ctaLabel: 'Start your free trial',
+    trustItems: ['Cancel anytime', '5 minute setup', 'GDPR compliant'],
+  })
+}
+
 export function renderDitchGoogleCta(): string {
-  return `
-<div class="not-prose relative mx-auto my-10 max-w-4xl px-2 lg:px-0">
-  <div class="relative mx-auto overflow-hidden rounded-3xl p-1 text-center sm:p-2 lg:p-3">
-    <div aria-hidden="true" class="pointer-events-none absolute inset-0">
-      <div class="absolute inset-0 rounded-4xl bg-linear-115 from-red-500/50 to-orange-300/30 sm:bg-linear-145 dark:from-red-500/40 dark:to-orange-300/20"></div>
-    </div>
-    <div class="rounded-xl p-8 backdrop-blur-xl sm:p-10 lg:p-12">
-      <div class="mx-auto max-w-3xl">
-        <h2 class="mb-4 text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl lg:text-5xl dark:text-white">
-          Time to <span class="bg-gradient-to-r from-red-600 to-orange-600 bg-clip-text text-transparent">ditch</span> Google Analytics
-        </h2>
-        <p class="mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-slate-800 dark:text-slate-200">
-          Google Analytics is overkill for most site owners. Swetrix is a simple, privacy-focused alternative that's easy to use and doesn't require cookie consent banners.
-        </p>
-        <div class="mb-6 flex flex-col items-center justify-center gap-4 sm:flex-row">
-          <a
-            href="${routes.signup}"
-            class="flex items-center justify-center rounded-md border-2 border-slate-900 bg-slate-900 px-6 py-3 text-white transition-all hover:bg-transparent hover:text-slate-900 dark:border-slate-50 dark:bg-gray-50 dark:text-slate-900 dark:hover:bg-transparent dark:hover:text-gray-50"
-          >
-            <span class="mr-1 text-center text-base font-semibold">Start a 14-day free trial</span>
-            ${arrowRightSvg}
-          </a>
-        </div>
-        <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 text-sm text-slate-800 dark:text-slate-200">
-          <div class="flex items-center">
-            ${checkIconSvg}
-            Free to try
-          </div>
-          <div class="flex items-center">
-            ${checkIconSvg}
-            Easy to use
-          </div>
-          <div class="flex items-center">
-            ${checkIconSvg}
-            Privacy-first
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`
+  return renderForestCtaHtml({
+    titleHtml:
+      'Time to <span class="text-red-400">ditch</span> Google Analytics',
+    description:
+      "Google Analytics is overkill for most site owners. Swetrix is a simple, privacy-focused alternative that's easy to use and doesn't require cookie consent banners.",
+    ctaLabel: 'Start a 14-day free trial',
+    trustItems: ['Free to try', 'Easy to use', 'Privacy-first'],
+  })
 }
diff --git a/web/knip.jsonc b/web/knip.jsonc
index 7dcfc7be4..50e55bf64 100644
--- a/web/knip.jsonc
+++ b/web/knip.jsonc
@@ -4,11 +4,11 @@
     "@tailwindcss/forms",
     "@tailwindcss/typography",
     "tailwindcss",
-    "@swetrix/node",
-  ],
-  "ignore": [
-    "./app/utils/analytics.server.ts",
+    // "@swetrix/node",
   ],
+  // "ignore": [
+  //   "./app/utils/analytics.server.ts",
+  // ],
   "project": ["./app/**/*.{js,ts,tsx,jsx,cjs}"],
   "paths": {
     "~/*": ["./app/*"],
diff --git a/web/public/assets/hero-background.avif b/web/public/assets/hero-background.avif
new file mode 100644
index 000000000..6ac44de31
Binary files /dev/null and b/web/public/assets/hero-background.avif differ
diff --git a/web/public/assets/hero-background.webp b/web/public/assets/hero-background.webp
new file mode 100644
index 000000000..d87770817
Binary files /dev/null and b/web/public/assets/hero-background.webp differ
diff --git a/web/public/locales/en.json b/web/public/locales/en.json
index c14040982..7c9cd2708 100644
--- a/web/public/locales/en.json
+++ b/web/public/locales/en.json
@@ -80,7 +80,7 @@
     "pricing": "Pricing",
     "loading": "Loading...",
     "accountSettings": "Account settings",
-    "liveDemo": "Live demo",
+    "liveDemo": "View live demo",
     "dashboard": "Dashboard",
     "logout": "Logout",
     "save": "Save",
@@ -603,7 +603,7 @@
       ]
     },
     "slogan": "Turn traffic into insights",
-    "description": "Get all the insights you need about your users and website visitors without the hassle of showing cookie banners. Experience intuitive, easy-to-use and GDPR-compliant web analytics without invading the privacy of your visitors.",
+    "description": "Swetrix is a privacy-first Google Analytics alternative that helps you understand visitors, traffic sources and website performance with simple, cookieless, GDPR-compliant insights - no cookie banners or invasive tracking.",
     "understandTheirUsers": "<0>{{amount}}</0> people understand their users",
     "startAXDayFreeTrial": "Start a {{amount}}-day free trial",
     "metric": "Metric",
@@ -613,7 +613,8 @@
       "dataOwnership": "100% data ownership",
       "openSource": "Open-source",
       "selfHostable": "Self-hostable",
-      "quickSetup": "Quick setup"
+      "quickSetup": "Quick setup",
+      "realTimeDashboard": "Real-time dashboard"
     },
     "integrations": {
       "title": "Works with the tools you already use",