From 9add26189b2a7bf0704e691363406f4a4617ba93 Mon Sep 17 00:00:00 2001
From: Stanislav Holts <stanislav.holts@bigcommerce.com>
Date: Mon, 26 Feb 2024 22:57:11 +0200
Subject: [PATCH 1/3] refactor(landing): replace landing by thre subscription
 version

---
 .../ConfigureWidget/ConfigureWidgetButton.tsx |  15 --
 .../ConfigureWidgetCloseButton.tsx            |  49 ----
 .../ConfigureWidgetContext.tsx                |  25 --
 .../ConfigureWidget/ConfigureWidgetFrame.tsx  |  84 -------
 .../ConfigureWidget/close-button.svg          |   3 -
 apps/landing/src/components/Input.tsx         |   2 +-
 apps/landing/src/components/Video/Video.tsx   |   2 +-
 .../src/globalStyles/sliderOverrides.ts       |  22 +-
 apps/landing/src/locales/extractLocale.ts     |  15 ++
 apps/landing/src/locales/index.ts             |   4 +
 apps/landing/src/locales/locales.ts           |   8 +
 apps/landing/src/locales/translate.ts         |  10 +
 apps/landing/src/locales/translations.ts      | 121 ++++++++++
 apps/landing/src/pages/+Page.tsx              |  29 ++-
 apps/landing/src/renderer/+config.h.ts        |   2 +-
 apps/landing/src/renderer/+onBeforeRoute.ts   |  13 ++
 .../landing/src/renderer/+onPrerenderStart.ts |  20 ++
 apps/landing/src/renderer/+onRenderHtml.tsx   |  40 +---
 apps/landing/src/renderer/LocaleText.tsx      |  17 ++
 apps/landing/src/renderer/fonts.ts            |  14 +-
 apps/landing/src/renderer/types.ts            |   8 +
 apps/landing/src/sections/AddWidget.tsx       |  71 ------
 apps/landing/src/sections/Cases.tsx           |  95 --------
 apps/landing/src/sections/Charities.tsx       | 176 --------------
 apps/landing/src/sections/Contacts.tsx        |  90 +++-----
 apps/landing/src/sections/DocsPanel.tsx       |  48 ++++
 apps/landing/src/sections/Faq.tsx             | 147 +++++++++---
 apps/landing/src/sections/HelpIsImportant.tsx |  76 +++++++
 apps/landing/src/sections/Home.tsx            |  86 +++++--
 apps/landing/src/sections/HowItWorks.tsx      |  87 -------
 apps/landing/src/sections/Impact.tsx          | 110 +++++++++
 apps/landing/src/sections/LogoPanel.tsx       |  80 +++++--
 apps/landing/src/sections/Needs.tsx           |  83 +++++++
 apps/landing/src/sections/Stats.tsx           |  16 +-
 apps/landing/src/sections/Subscriptions.tsx   | 215 ++++++++++++++++++
 apps/landing/src/sections/Support.tsx         | 122 ----------
 apps/landing/src/sections/Team.tsx            | 139 -----------
 apps/landing/src/sections/index.ts            |  11 +-
 apps/landing/vite.config.ts                   |   1 -
 .../src/renderer/+onRenderHtml.tsx            |   4 -
 40 files changed, 1076 insertions(+), 1084 deletions(-)
 delete mode 100644 apps/landing/src/components/ConfigureWidget/ConfigureWidgetButton.tsx
 delete mode 100644 apps/landing/src/components/ConfigureWidget/ConfigureWidgetCloseButton.tsx
 delete mode 100644 apps/landing/src/components/ConfigureWidget/ConfigureWidgetContext.tsx
 delete mode 100644 apps/landing/src/components/ConfigureWidget/ConfigureWidgetFrame.tsx
 delete mode 100644 apps/landing/src/components/ConfigureWidget/close-button.svg
 create mode 100644 apps/landing/src/locales/extractLocale.ts
 create mode 100644 apps/landing/src/locales/index.ts
 create mode 100644 apps/landing/src/locales/locales.ts
 create mode 100644 apps/landing/src/locales/translate.ts
 create mode 100644 apps/landing/src/locales/translations.ts
 create mode 100644 apps/landing/src/renderer/+onBeforeRoute.ts
 create mode 100644 apps/landing/src/renderer/+onPrerenderStart.ts
 create mode 100644 apps/landing/src/renderer/LocaleText.tsx
 delete mode 100644 apps/landing/src/sections/AddWidget.tsx
 delete mode 100644 apps/landing/src/sections/Cases.tsx
 delete mode 100644 apps/landing/src/sections/Charities.tsx
 create mode 100644 apps/landing/src/sections/DocsPanel.tsx
 create mode 100644 apps/landing/src/sections/HelpIsImportant.tsx
 delete mode 100644 apps/landing/src/sections/HowItWorks.tsx
 create mode 100644 apps/landing/src/sections/Impact.tsx
 create mode 100644 apps/landing/src/sections/Needs.tsx
 create mode 100644 apps/landing/src/sections/Subscriptions.tsx
 delete mode 100644 apps/landing/src/sections/Support.tsx
 delete mode 100644 apps/landing/src/sections/Team.tsx

diff --git a/apps/landing/src/components/ConfigureWidget/ConfigureWidgetButton.tsx b/apps/landing/src/components/ConfigureWidget/ConfigureWidgetButton.tsx
deleted file mode 100644
index 49645770..00000000
--- a/apps/landing/src/components/ConfigureWidget/ConfigureWidgetButton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Button } from '../Button';
-
-import { ConfigureWidgetContext } from './ConfigureWidgetContext';
-
-export default function ConfigureWidgetButton() {
-  return (
-    <ConfigureWidgetContext.Consumer>
-      {({ setWidgetOpen }) => (
-        <Button onClick={() => setWidgetOpen(true)} variant="light">
-          Create Widget
-        </Button>
-      )}
-    </ConfigureWidgetContext.Consumer>
-  );
-}
diff --git a/apps/landing/src/components/ConfigureWidget/ConfigureWidgetCloseButton.tsx b/apps/landing/src/components/ConfigureWidget/ConfigureWidgetCloseButton.tsx
deleted file mode 100644
index 9c71261b..00000000
--- a/apps/landing/src/components/ConfigureWidget/ConfigureWidgetCloseButton.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import styled from 'styled-components';
-
-import { breakpoints } from '../../helpers';
-
-import CloseSVG from './close-button.svg';
-import { ConfigureWidgetContext } from './ConfigureWidgetContext';
-
-const CloseButton = styled.a`
-  position: fixed;
-  right: 1rem;
-  top: 4.5rem;
-  z-index: 11001;
-  cursor: pointer;
-  height: 2rem;
-  width: 2rem;
-
-  & img {
-    height: 100%;
-    width: 100%;
-  }
-
-  ${breakpoints.tablet} and (orientation: portrait) {
-    top: calc(10% + 4.5rem);
-    right: 4rem;
-    height: 2.5rem;
-    width: 2.5rem;
-  }
-
-  ${breakpoints.desktop} {
-    top: calc(10% + 4.5rem);
-    right: 4rem;
-    height: 2.5rem;
-    width: 2.5rem;
-  }
-`;
-
-export default function ConfigureWidgetCloseButton() {
-  return (
-    <ConfigureWidgetContext.Consumer>
-      {({ setWidgetOpen, widgetOpen }) =>
-        widgetOpen ? (
-          <CloseButton onClick={() => setWidgetOpen(false)}>
-            <img alt="Close Button" src={CloseSVG} />
-          </CloseButton>
-        ) : null
-      }
-    </ConfigureWidgetContext.Consumer>
-  );
-}
diff --git a/apps/landing/src/components/ConfigureWidget/ConfigureWidgetContext.tsx b/apps/landing/src/components/ConfigureWidget/ConfigureWidgetContext.tsx
deleted file mode 100644
index d614bbc3..00000000
--- a/apps/landing/src/components/ConfigureWidget/ConfigureWidgetContext.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { createContext, ReactNode, useState } from 'react';
-
-export const ConfigureWidgetContext = createContext<{
-  widgetOpen: boolean;
-  setWidgetOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}>({
-  widgetOpen: false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setWidgetOpen: () => {},
-});
-
-export function ConfigureWidgetProvider({ children }: { children: ReactNode }) {
-  const [widgetOpen, setWidgetOpen] = useState(false);
-
-  return (
-    <ConfigureWidgetContext.Provider
-      value={{
-        widgetOpen,
-        setWidgetOpen,
-      }}
-    >
-      {children}
-    </ConfigureWidgetContext.Provider>
-  );
-}
diff --git a/apps/landing/src/components/ConfigureWidget/ConfigureWidgetFrame.tsx b/apps/landing/src/components/ConfigureWidget/ConfigureWidgetFrame.tsx
deleted file mode 100644
index eebce2d0..00000000
--- a/apps/landing/src/components/ConfigureWidget/ConfigureWidgetFrame.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ReactNode, useEffect, useRef } from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
-
-import { breakpoints } from '../../helpers';
-
-import ConfigureWidgetCloseButton from './ConfigureWidgetCloseButton';
-import { ConfigureWidgetContext } from './ConfigureWidgetContext';
-
-const IFrame = styled.iframe`
-  flex: 1 0 auto;
-  background: #fff;
-  width: 100vw;
-  height: 100vh;
-  z-index: 11000;
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  ${breakpoints.tablet} and (orientation: portrait) {
-    height: 80vh;
-    top: 10%;
-  }
-
-  ${breakpoints.desktop} {
-    height: 80vh;
-    top: 10%;
-  }
-`;
-
-const IframeOverlay = styled.div`
-  display: block;
-  height: 100vh;
-  width: 100vw;
-  z-index: 10050;
-  background: rgba(0, 0, 0, 0.3);
-  position: fixed;
-  left: 0;
-  top: 0;
-`;
-
-function WidgetWrapper() {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-
-  useEffect(() => {
-    if (iframeRef.current !== null) {
-      iframeRef.current.scrollIntoView({
-        behavior: 'auto',
-        block: 'center',
-        inline: 'center',
-      });
-    }
-  }, [iframeRef]);
-
-  return (
-    <>
-      <IframeOverlay />
-      <ConfigureWidgetCloseButton />
-      <IFrame
-        frameBorder="0"
-        ref={iframeRef}
-        src="/dashboard/?token=universal.installer.stand-with-ukraine"
-      />
-    </>
-  );
-}
-
-export default function ConfigureWidgetFrame({ children }: { children: ReactNode }) {
-  return (
-    <ConfigureWidgetContext.Consumer>
-      {({ widgetOpen }) => (
-        <>
-          {widgetOpen ? <WidgetWrapper /> : children}
-          <IframeGlobalStyle frameOpen={widgetOpen} />
-        </>
-      )}
-    </ConfigureWidgetContext.Consumer>
-  );
-}
-
-const IframeGlobalStyle = createGlobalStyle<{ frameOpen: boolean }>`
-    body {
-        // overflow: ${({ frameOpen }) => (frameOpen ? 'hidden' : 'unset')};
-    }
-`;
diff --git a/apps/landing/src/components/ConfigureWidget/close-button.svg b/apps/landing/src/components/ConfigureWidget/close-button.svg
deleted file mode 100644
index 89f458f6..00000000
--- a/apps/landing/src/components/ConfigureWidget/close-button.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.625 3.01875L23.9813 0.375L13.5 10.8563L3.01875 0.375L0.375 3.01875L10.8563 13.5L0.375 23.9813L3.01875 26.625L13.5 16.1437L23.9813 26.625L26.625 23.9813L16.1437 13.5L26.625 3.01875Z" fill="black" fill-opacity="0.54"/>
-</svg>
diff --git a/apps/landing/src/components/Input.tsx b/apps/landing/src/components/Input.tsx
index 3ddd881e..fa25ca1c 100644
--- a/apps/landing/src/components/Input.tsx
+++ b/apps/landing/src/components/Input.tsx
@@ -54,7 +54,7 @@ const StyledError = styled.div`
   padding: 0.5rem 0;
 `;
 
-const StyledContainer = styled.div`
+export const StyledContainer = styled.div`
   margin-bottom: 4rem;
   padding-top: 1rem;
   position: relative;
diff --git a/apps/landing/src/components/Video/Video.tsx b/apps/landing/src/components/Video/Video.tsx
index 27646a20..2fe0c10d 100644
--- a/apps/landing/src/components/Video/Video.tsx
+++ b/apps/landing/src/components/Video/Video.tsx
@@ -103,7 +103,7 @@ export const Video = ({ sources: rawSources, poster }: VideoProps) => {
     () =>
       rawSources.map((source) => ({
         ...source,
-        url: `${import.meta.env.BASE_URL}/${source.url}`,
+        url: source.url,
       })),
     [rawSources],
   );
diff --git a/apps/landing/src/globalStyles/sliderOverrides.ts b/apps/landing/src/globalStyles/sliderOverrides.ts
index 54ce53a8..94d02291 100644
--- a/apps/landing/src/globalStyles/sliderOverrides.ts
+++ b/apps/landing/src/globalStyles/sliderOverrides.ts
@@ -1,21 +1,15 @@
 import { createGlobalStyle } from 'styled-components';
 
-import { breakpoints } from '../helpers';
-
 export const SliderOverrides = createGlobalStyle`
     .swiper {
-        &.swiper-vertical {
-            height: 58rem;
-            
-            ${breakpoints.desktop} {
-                height: 41rem;
-            }
-        }
+        background-color: #edeff3;
+    }
+
+    .swiper-button-next, .swiper-button-prev {
+        color: #fff !important;
     }
-    
-    .swiper-horizontal {
-        padding-bottom: 4rem !important;
-        
-        & > .swiper-pagination-bullets { bottom: 0 !important; }
+
+    .swiper-pagination-bullet-active {
+        background-color: #fff !important;
     }
 `;
diff --git a/apps/landing/src/locales/extractLocale.ts b/apps/landing/src/locales/extractLocale.ts
new file mode 100644
index 00000000..df4151cf
--- /dev/null
+++ b/apps/landing/src/locales/extractLocale.ts
@@ -0,0 +1,15 @@
+import { defaultLocale, locales } from './locales';
+
+export const extractLocale = (
+  urlPathname: string,
+): { locale: string; urlWithoutLocale: string } => {
+  const urlPaths = urlPathname.split('/').filter(Boolean);
+
+  if (Object.values(locales).includes(urlPaths[0])) {
+    const [locale, ...paths] = urlPaths;
+
+    return { locale, urlWithoutLocale: `/${paths.join('/')}` };
+  }
+
+  return { locale: defaultLocale, urlWithoutLocale: urlPathname };
+};
diff --git a/apps/landing/src/locales/index.ts b/apps/landing/src/locales/index.ts
new file mode 100644
index 00000000..c4657393
--- /dev/null
+++ b/apps/landing/src/locales/index.ts
@@ -0,0 +1,4 @@
+export * from './extractLocale';
+export * from './locales';
+export * from './translate';
+export * from './translations';
diff --git a/apps/landing/src/locales/locales.ts b/apps/landing/src/locales/locales.ts
new file mode 100644
index 00000000..781d1cbc
--- /dev/null
+++ b/apps/landing/src/locales/locales.ts
@@ -0,0 +1,8 @@
+export const locales = { en: 'en-US', ua: 'uk-UA' };
+
+export const langs = Object.entries(locales).reduce<Record<string, string>>(
+  (acc, [lang, locale]) => ({ ...acc, [locale]: lang }),
+  {},
+);
+
+export const defaultLocale = locales.en;
diff --git a/apps/landing/src/locales/translate.ts b/apps/landing/src/locales/translate.ts
new file mode 100644
index 00000000..3cd9e943
--- /dev/null
+++ b/apps/landing/src/locales/translate.ts
@@ -0,0 +1,10 @@
+import { defaultLocale } from './locales';
+import { translations } from './translations';
+
+export const translate = (text: string, locale: string) => {
+  if (locale === defaultLocale) {
+    return text;
+  }
+
+  return translations[text]?.[locale] ?? text;
+};
diff --git a/apps/landing/src/locales/translations.ts b/apps/landing/src/locales/translations.ts
new file mode 100644
index 00000000..4ffb497e
--- /dev/null
+++ b/apps/landing/src/locales/translations.ts
@@ -0,0 +1,121 @@
+export const translations: Record<string, Record<string, string>> = {
+  'Support BigCommerce colleagues defending Ukraine': {
+    'uk-UA': 'Підтримайте наших колег з BigCommerce, які захищають Україну в лавах ЗСУ',
+  },
+  "Our colleagues from Kyiv office are defending Ukraine on a frontline. Let's help them to stay safe!":
+    {
+      'uk-UA':
+        'Наші колеги з київського офісу долучились до лав Збройних Сил і стали на захист Украіни.',
+    },
+  'Denis Matveev. Product designer (MSF, Localization), officer in Ukraine army': {
+    'uk-UA': 'Денис Матвєєв. Дизайнер (MSF, Localization), військовослужбовець ЗСУ',
+  },
+  'Andrii Hurzhiy. Senior Engineer (MSF, Catalog), officer in Ukraine army': {
+    'uk-UA': 'Андрій Гуржий. Інженер (MSF, Catalog), військовослужбовець ЗСУ',
+  },
+  'Petro Donin. Senior Engineer (Inventory), officer in Ukraine army': {
+    'uk-UA': 'Петро, Донін, Інженер, (Inventory), військовослужбовець ЗСУ',
+  },
+  'Ostap Ivanishyn. Senior Engineer (Payments), officer in Ukraine army': {
+    'uk-UA': 'Остап Інванішин, Інженер (Payments), військовослужбовець ЗСУ',
+  },
+  Donate: {
+    'uk-UA': 'Підтримати',
+  },
+  'Why your help is important': {
+    'uk-UA': 'Чому підтримка важлива',
+  },
+  'War in Ukraine is still going.': { 'uk-UA': 'Війна в україні триває.' },
+  'THE needs are growing every day. Government is unable to fulfil all of them and rely on volunteers to help.':
+    { 'uk-UA': 'І кількість потреб зростає кожен день.' },
+  "let's help by supporting people we know and love, our colleagues.": {
+    'uk-UA': 'Давайте допоможемо підтримуючи тих, кого ми знаємо і любимо – наших колег.',
+  },
+  'Field is required': {
+    'uk-UA': "Це поле є обов'язковим",
+  },
+  'Please use correct email address': {
+    'uk-UA': 'Будь ласка використовуйте правильну пошту',
+  },
+  'Contact us': {
+    'uk-UA': 'Напишіть нам',
+  },
+  'We appreciate you taking the time to help us improve the application so we are able to continue raising awareness, and generating support for our comrades in Ukraine.':
+    {
+      'uk-UA':
+        "Будемо вдячні за вашу допомогу з підтримки наших колег в BigCommerce які захищають Україну в лавах ЗСУ. Якщо у вас є питання або потрібна допомога – зв'яжіться з нами заповнивши форму або пишіть на email.",
+    },
+  'Our emails:': { 'uk-UA': 'Наші імейли:' },
+  'Contact form': { 'uk-UA': 'Напишіть нам' },
+  'Thank you for your submission': { 'uk-UA': 'Дякуюємо за ваше повідомлення' },
+  Reset: { 'uk-UA': 'Скинути' },
+  'Describe your question below': { 'uk-UA': 'Опишіть своє питання' },
+  'First and Last name': { 'uk-UA': "Ім'я та Прізвище" },
+  Email: { 'uk-UA': 'Email' },
+  'Your question or comment': { 'uk-UA': 'Ваше питання або коментар' },
+  Submit: { 'uk-UA': 'Надіслати' },
+  'Your impact': { 'uk-UA': 'Ваш вклад' },
+  "In the past 2 years, with your help we've handed over essential supplies at almost $100,000": {
+    'uk-UA':
+      'За минулі 2 роки, з вашою підтримкою ми допомогли Збройним силам України на майже 4,000,000 грн',
+  },
+  'Pickup trucks': { 'uk-UA': 'Транспорт' },
+  'Drones & batteries': { 'uk-UA': 'Дрони і батареї до них' },
+  'Mini excavator': { 'uk-UA': 'Міні екскаватор' },
+  Powerstations: { 'uk-UA': 'Генератори' },
+  'Starlink kits': { 'uk-UA': 'Starlink набори' },
+  'Active headphones': { 'uk-UA': 'Активні наушники' },
+  'Night vision monoculars': { 'uk-UA': 'Прилади нічного бачення' },
+  Laptops: { 'uk-UA': 'Ноутбуки' },
+  Monitors: { 'uk-UA': 'Монітори' },
+  'Hertz analyzer': { 'uk-UA': 'Аналізатор частот' },
+  'Sleeping bags': { 'uk-UA': 'Спальні мішки' },
+  'Medical tourniquets': { 'uk-UA': 'Турнікети' },
+  'Thermal vision cameras': { 'uk-UA': 'Камери з тепловізором' },
+  'Body armors': { 'uk-UA': 'Броня і плити' },
+  FAQ: { 'uk-UA': 'Запитання й відповіді' },
+  'Many more...': { 'uk-UA': 'та багато іншого...' },
+  'What are the constant needs': { 'uk-UA': 'Напрямки підтримки' },
+  "There's a constant need in transport, protection and medical supplies. And our focus is in making sure we can provide help fast.":
+    {
+      'uk-UA':
+        'Транспорт, засоби захисту та медичні товари – це постійні потребі. Наш фокус – надання регулярної та прогнозованої підтримки. ',
+    },
+  Transport: { 'uk-UA': 'Транспорт' },
+  'Transport is essential to survive and transport people and ammunition. Cars get damaged every day and require either maintenance or full replacement.':
+    {
+      'uk-UA':
+        'Транспорт необхідний для перевезення людей та обладлення. Автівки виходять з ладу та потребують або постійного ремонту, або повної заміни.',
+    },
+  'Radio protection tools': { 'uk-UA': 'Засоби радіо захисту' },
+  'Anti drone protection is #1 request today, in addition to body armor, night vision, Starlink kits and powerstations for stable connection, drones with thermal vision.':
+    {
+      'uk-UA':
+        'Засоби РЕБ для захисту проти дронів – це  потреба №1. Потреба є також в розвідувальних дронах, приладах нічного бачення, Starlink та генераторах для стабільного зв’язку.',
+    },
+  'Medical supplies': { 'uk-UA': 'Медичні товари' },
+  'Medical tourniquets, medical bandage, medical kits and medicines, body warmers and sleeping bags.':
+    {
+      'uk-UA':
+        'Турнікети, бандажі, аптечки, грілки для тіла, спальні мішки – це постійні потреби, яких ніколи не бувє забагато, бо це рятує життя.',
+    },
+  subscribers: { 'uk-UA': 'донатера' },
+  countries: { 'uk-UA': 'країн' },
+  'monthly support': { 'uk-UA': 'щомісячної підтримки' },
+  'Subscription that saves lives': { 'uk-UA': 'Підтримка, що рятує життя' },
+  'Monthly support would provide the ability to help systematically and quickly. However, we would appreciate one time donation as well':
+    { 'uk-UA': 'Щомісячна підтримка дасть нам змогу допомагати регулярно і прогнозовано' },
+  Support: { 'uk-UA': 'Підтримати' },
+  '* If you are subscribed, but want to cancel subscription': {
+    'uk-UA': '* ви можете відмовитись від підписки в будь який момент, натиснувши',
+  },
+  'click here': { 'uk-UA': 'СЮДИ' },
+  '1 time donation': { 'uk-UA': 'Разовий донат' },
+  Custom: { 'uk-UA': 'Інша сума' },
+  'per month': { 'uk-UA': '/ місяць' },
+  'Enter donation amount': { 'uk-UA': 'Введіть бажану суму' },
+  'Enter subscription amount': { 'uk-UA': 'Введіть бажану суму' },
+  Proceed: {
+    'uk-UA': 'Продовжити',
+  },
+};
diff --git a/apps/landing/src/pages/+Page.tsx b/apps/landing/src/pages/+Page.tsx
index 461fea5b..cb838b34 100644
--- a/apps/landing/src/pages/+Page.tsx
+++ b/apps/landing/src/pages/+Page.tsx
@@ -1,35 +1,32 @@
-import { ConfigureWidgetProvider } from '../components/ConfigureWidget/ConfigureWidgetContext';
 import {
-  AddWidget,
-  Cases,
-  Charities,
   Contacts,
-  Faq,
+  HelpIsImportant,
   Home,
-  HowItWorks,
+  Impact,
   LogoPanel,
+  Needs,
   Stats,
-  Support,
-  Team,
+  Subscriptions,
 } from '../sections';
+import { DocsPanel } from '../sections/DocsPanel';
+import { Faq } from '../sections/Faq';
 
 export { Page };
 
 function Page() {
   return (
-    <ConfigureWidgetProvider>
+    <>
       <LogoPanel isFixed />
       <Home />
-      <HowItWorks />
+      <HelpIsImportant />
+      <Needs />
+      <Subscriptions />
+      <Impact />
       <Stats />
-      <Cases />
-      <AddWidget />
-      <Charities />
-      <Team />
-      <Support />
       <Faq />
       <Contacts />
       <LogoPanel />
-    </ConfigureWidgetProvider>
+      <DocsPanel />
+    </>
   );
 }
diff --git a/apps/landing/src/renderer/+config.h.ts b/apps/landing/src/renderer/+config.h.ts
index 34abc726..02f2dcd9 100644
--- a/apps/landing/src/renderer/+config.h.ts
+++ b/apps/landing/src/renderer/+config.h.ts
@@ -1,7 +1,7 @@
 import type { Config } from 'vike/types';
 
 export default {
-  passToClient: ['pageProps', 'documentProps', 'someAsyncProps'],
+  passToClient: ['pageProps', 'documentProps', 'someAsyncProps', 'locale'],
   clientRouting: true,
   hydrationCanBeAborted: true,
 } satisfies Config;
diff --git a/apps/landing/src/renderer/+onBeforeRoute.ts b/apps/landing/src/renderer/+onBeforeRoute.ts
new file mode 100644
index 00000000..f487d086
--- /dev/null
+++ b/apps/landing/src/renderer/+onBeforeRoute.ts
@@ -0,0 +1,13 @@
+import { extractLocale } from '../locales';
+
+export default onBeforeRoute;
+
+import { PageContext } from './types';
+
+function onBeforeRoute(pageContext: PageContext) {
+  const { urlWithoutLocale, locale } = extractLocale(pageContext.urlPathname);
+
+  return {
+    pageContext: { locale, urlLogical: urlWithoutLocale },
+  };
+}
diff --git a/apps/landing/src/renderer/+onPrerenderStart.ts b/apps/landing/src/renderer/+onPrerenderStart.ts
new file mode 100644
index 00000000..f96a82e7
--- /dev/null
+++ b/apps/landing/src/renderer/+onPrerenderStart.ts
@@ -0,0 +1,20 @@
+export default onPrerenderStart;
+
+import { defaultLocale, locales } from '../locales';
+
+import { PageContext, PrerenderContext } from './types';
+
+function onPrerenderStart(prerenderContext: PrerenderContext) {
+  const pageContexts: PageContext[] = [];
+
+  for (const pageContext of prerenderContext.pageContexts) {
+    for (const locale of Object.values(locales)) {
+      const urlOriginal =
+        locale === defaultLocale ? pageContext.urlOriginal : `/${locale}${pageContext.urlOriginal}`;
+
+      pageContexts.push({ ...pageContext, locale, urlOriginal });
+    }
+  }
+
+  return { prerenderContext: { pageContexts } };
+}
diff --git a/apps/landing/src/renderer/+onRenderHtml.tsx b/apps/landing/src/renderer/+onRenderHtml.tsx
index b5202680..c00910ad 100644
--- a/apps/landing/src/renderer/+onRenderHtml.tsx
+++ b/apps/landing/src/renderer/+onRenderHtml.tsx
@@ -1,11 +1,11 @@
 import { renderToString } from 'react-dom/server';
 import { ServerStyleSheet } from 'styled-components';
+import SwiperNavigationCss from 'swiper/css/navigation?raw';
 import SwiperPaginationCss from 'swiper/css/pagination?raw';
 import SwiperCss from 'swiper/css?raw';
 import { dangerouslySkipEscape, escapeInject } from 'vike/server';
 
-import HomeImagePlaceholderSrc from '../../public/assets/images/home-placeholder.webp';
-import HomeImageSrc from '../../public/assets/images/home.webp';
+import { langs } from '../locales';
 
 import { Fonts } from './fonts';
 import { getPageTitle } from './getPageTitle';
@@ -17,25 +17,25 @@ export { render as onRenderHtml };
 const BASE_URL = `https://standwithukraineapp.com`;
 const metaTags = `
     <meta name="title" content="Stand with Ukraine">
-    <meta name="description" content="Help Ukraine by adding an easy widget to your website that allows your visitors to easily donate via verified charities.">
+    <meta name="description" content="Support BigCommerce colleagues defending Ukraine! Our colleagues from Kyiv office are defending Ukraine on a frontline. Let's help them to stay safe!">
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website">
     <meta property="og:url" content="${BASE_URL}">
     <meta property="og:title" content="Stand with Ukraine">
-    <meta property="og:description" content="Help Ukraine by adding an easy widget to your website that allows your visitors to easily donate via verified charities.">
-    <meta property="og:image" content="${BASE_URL}/landing/assets/images/home.png">
+    <meta property="og:description" content="Support BigCommerce colleagues defending Ukraine! Our colleagues from Kyiv office are defending Ukraine on a frontline. Let's help them to stay safe!">
+    <meta property="og:image" content="${BASE_URL}/assets/subscription/images/home.png">
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image">
     <meta property="twitter:url" content="${BASE_URL}">
     <meta property="twitter:title" content="Stand with Ukraine">
-    <meta property="twitter:description" content="Help Ukraine by adding an easy widget to your website that allows your visitors to easily donate via verified charities.">
-    <meta property="twitter:image" content="${BASE_URL}/landing/assets/images/home.png">
+    <meta property="twitter:description" content="Support BigCommerce colleagues defending Ukraine! Our colleagues from Kyiv office are defending Ukraine on a frontline. Let's help them to stay safe!">
+    <meta property="twitter:image" content="${BASE_URL}/assets/subscription/images/home.png">
 `;
 
 async function render(pageContext: PageContextServer) {
-  const { Page, pageProps } = pageContext;
+  const { locale, Page, pageProps } = pageContext;
 
   const sheet = new ServerStyleSheet();
   const pageHtml = renderToString(
@@ -51,37 +51,21 @@ async function render(pageContext: PageContextServer) {
 
   const documentHtml = escapeInject`
 <!DOCTYPE html>
-<html lang="en">
+<html lang="${langs[locale] ?? 'en'}">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preload" href="${HomeImagePlaceholderSrc}" as="image">
-    <link rel="icon" href="${import.meta.env.BASE_URL}/favicon.ico" />
-    <link rel="apple-touch-icon" href="${import.meta.env.BASE_URL}/logo192.png" />
+    <link rel="icon" href="favicon.ico" />
+    <link rel="apple-touch-icon" href="logo192.png" />
     ${dangerouslySkipEscape(sheet.getStyleTags())}
     ${dangerouslySkipEscape(`<style>${SwiperCss}${SwiperPaginationCss}</style>`)}
-    <link rel="preload" href="${HomeImageSrc}" as="image">
-    <link rel="preload" href="${BASE_URL}/widget/style.css" as="style" />
+    ${dangerouslySkipEscape(`<style>${SwiperCss}${SwiperNavigationCss}</style>`)}
     <title>${title}</title>
     ${dangerouslySkipEscape(metaTags)}
   </head>
   
   <body>
     <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
-    <script>
-      window.SWU_CONFIG = {
-        "style": "blue",
-        "placement": "bottom-right",
-        "charity_selections": [
-          "razom",
-          "unicef",
-          "mira-action"
-        ],
-        "modal_title": "Help the people of Ukraine!",
-        "modal_body": "With each day, the war in Ukraine worsens at an alarming pace. Millions of civilians have lost their homes and many more are without basic necessities like food, water, and health care. Consider donating to one of the charities below and join us in showing support for Ukraine. All charities are trusted, non-profit organizations dedicated to Ukrainian relief efforts. It takes less than a minute."
-      };
-    </script>
-    <script defer src="${BASE_URL}/widget/index.js"></script>
   </body>
 </html>
     `;
diff --git a/apps/landing/src/renderer/LocaleText.tsx b/apps/landing/src/renderer/LocaleText.tsx
new file mode 100644
index 00000000..aafb28f5
--- /dev/null
+++ b/apps/landing/src/renderer/LocaleText.tsx
@@ -0,0 +1,17 @@
+export { LocaleText };
+
+import { PropsWithChildren } from 'react';
+
+import { translate } from '../locales';
+
+import { usePageContext } from './usePageContext';
+
+function LocaleText({ children }: PropsWithChildren) {
+  const { locale } = usePageContext();
+
+  if (typeof children === 'string' && locale) {
+    return <>{translate(children, locale)}</>;
+  }
+
+  return <>{children}</>;
+}
diff --git a/apps/landing/src/renderer/fonts.ts b/apps/landing/src/renderer/fonts.ts
index 7ad5ed8b..426da327 100644
--- a/apps/landing/src/renderer/fonts.ts
+++ b/apps/landing/src/renderer/fonts.ts
@@ -15,7 +15,7 @@ export const Fonts = createGlobalStyle`
   @font-face {
     font-family: 'Gotham';
     src: url(${generateFontUrlFromBase64(GothamLightBase64)}) format('woff2'),
-         url('${import.meta.env.BASE_URL}/fonts/gotham/woff/Gotham-Light_Web.woff') format('woff');
+         url('/fonts/gotham/woff/Gotham-Light_Web.woff') format('woff');
     font-display: swap;
     font-weight: 300;
     font-style: normal;
@@ -24,7 +24,7 @@ export const Fonts = createGlobalStyle`
   @font-face {
     font-family: 'Gotham';
     src: url(${generateFontUrlFromBase64(GothamBookLightBase64)}) format('woff2'),
-         url('${import.meta.env.BASE_URL}/fonts/gotham/woff/Gotham-Book_Web.woff') format('woff');
+         url('/fonts/gotham/woff/Gotham-Book_Web.woff') format('woff');
     font-display: swap;
     font-weight: 400;
     font-style: normal;
@@ -33,7 +33,7 @@ export const Fonts = createGlobalStyle`
   @font-face {
     font-family: 'Gotham';
     src: url(${generateFontUrlFromBase64(GothamMediumBase64)}) format('woff2'),
-         url('${import.meta.env.BASE_URL}/fonts/gotham/woff/Gotham-Medium_Web.woff') format('woff');
+         url('/fonts/gotham/woff/Gotham-Medium_Web.woff') format('woff');
     font-display: swap;
     font-weight: 500;
     font-style: normal;
@@ -42,7 +42,7 @@ export const Fonts = createGlobalStyle`
   @font-face {
     font-family: 'Gotham';
     src: url(${generateFontUrlFromBase64(GothamBoldBase64)}) format('woff2'),
-         url('${import.meta.env.BASE_URL}/fonts/gotham/woff/Gotham-Bold_Web.woff') format('woff');
+         url('/fonts/gotham/woff/Gotham-Bold_Web.woff') format('woff');
     font-display: swap;
     font-weight: 700;
     font-style: normal;
@@ -51,7 +51,7 @@ export const Fonts = createGlobalStyle`
   @font-face {
     font-family: 'Gotham';
     src: url(${generateFontUrlFromBase64(GothamBlackBase64)}) format('woff2'),
-         url('${import.meta.env.BASE_URL}/fonts/gotham/woff/Gotham-Black_Web.woff') format('woff');
+         url('/fonts/gotham/woff/Gotham-Black_Web.woff') format('woff');
     font-display: swap;
     font-weight: 800;
     font-style: normal;
@@ -60,9 +60,7 @@ export const Fonts = createGlobalStyle`
   @font-face {
     font-family: 'Gotham Cond';
     src:url(${generateFontUrlFromBase64(GothamCondBase64)}) format('woff2'),
-        url('${
-          import.meta.env.BASE_URL
-        }/fonts/gotham/woff/GothamCond-Bold_Web.woff') format('woff');
+        url('/fonts/gotham/woff/GothamCond-Bold_Web.woff') format('woff');
     font-display: swap;
     font-weight: 600;
     font-style: normal;
diff --git a/apps/landing/src/renderer/types.ts b/apps/landing/src/renderer/types.ts
index 243f1452..35457ceb 100644
--- a/apps/landing/src/renderer/types.ts
+++ b/apps/landing/src/renderer/types.ts
@@ -2,8 +2,10 @@ export type { PageContextServer };
 export type { PageContextClient };
 export type { PageContext };
 export type { PageProps };
+export type { PrerenderContext };
 
 import type {
+  OnPrerenderStartSync as VKOnPrerenderStartSync,
   PageContextClient as VKPageContextClient,
   PageContextServer as VKPageContextServer,
 } from 'vike/types';
@@ -13,6 +15,7 @@ type PageProps = Record<string, unknown>;
 
 export interface PageContextCustom {
   Page: Page;
+  locale: string;
   pageProps?: PageProps;
   exports: {
     documentProps?: {
@@ -28,3 +31,8 @@ type PageContextServer = VKPageContextServer<Page> & PageContextCustom;
 type PageContextClient = VKPageContextClient<Page> & PageContextCustom;
 
 type PageContext = PageContextClient | PageContextServer;
+
+type PrerenderContext = Omit<
+  ReturnType<VKOnPrerenderStartSync>['prerenderContext'],
+  'pageContexts'
+> & { pageContexts: PageContext[] };
diff --git a/apps/landing/src/sections/AddWidget.tsx b/apps/landing/src/sections/AddWidget.tsx
deleted file mode 100644
index a7d667dc..00000000
--- a/apps/landing/src/sections/AddWidget.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import styled from 'styled-components';
-
-import { ButtonLink, Container, H2, H3, Item, Paragraph, Section } from '../components';
-import ConfigureWidgetButton from '../components/ConfigureWidget/ConfigureWidgetButton';
-import ConfigureWidgetFrame from '../components/ConfigureWidget/ConfigureWidgetFrame';
-import { breakpoints } from '../helpers';
-
-const StyledItem = styled.div`
-  background: #000;
-  padding: 3rem 1.5rem;
-
-  ${ButtonLink} {
-    background-image: linear-gradient(to bottom right, #ffd500 50%, #fff 0);
-  }
-
-  ${breakpoints.desktop} {
-    padding: 5rem 4rem;
-  }
-`;
-
-const StyledParagraph = styled(Paragraph)`
-  margin-bottom: 3rem;
-
-  ${breakpoints.desktop} {
-    margin-bottom: 6rem;
-  }
-`;
-
-const StyledDescription = styled(Paragraph)`
-  min-height: 4.2rem;
-`;
-
-export const AddWidget = () => (
-  <ConfigureWidgetFrame>
-    <Section background="primary" id="add-widget">
-      <H2 color="light" margin="0 0 3rem" textAlign="center">
-        Add widget
-      </H2>
-      <StyledParagraph color="light" margin="0 0 6rem" size={2} textAlign="center" weight={300}>
-        Please select your platform to quickly add widget to your site
-      </StyledParagraph>
-      <Container>
-        <Item flexBasis="50%" flexGrow={1}>
-          <StyledItem>
-            <H3 color="light">BigCommerce</H3>
-            <StyledDescription color="light" margin="0 0 3rem">
-              You will be redirected to BigСommerce app store with all detailed information.
-            </StyledDescription>
-            <ButtonLink
-              href="https://www.bigcommerce.com/apps/stand-with-ukraine/"
-              rel="noreferrer"
-              target="_blank"
-              variant="light"
-            >
-              Select
-            </ButtonLink>
-          </StyledItem>
-        </Item>
-        <Item flexBasis="50%" flexGrow={1}>
-          <StyledItem>
-            <H3 color="light">All other platforms</H3>
-            <StyledDescription color="light" margin="0 0 3rem">
-              Design your custom widget right here in less than 2 minutes.
-            </StyledDescription>
-            <ConfigureWidgetButton />
-          </StyledItem>
-        </Item>
-      </Container>
-    </Section>
-  </ConfigureWidgetFrame>
-);
diff --git a/apps/landing/src/sections/Cases.tsx b/apps/landing/src/sections/Cases.tsx
deleted file mode 100644
index 888348af..00000000
--- a/apps/landing/src/sections/Cases.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import styled from 'styled-components';
-
-import BarnmansionScreenshot from '../../public/assets/images/barnmansion.webp';
-import BenchandchiselScreenshot from '../../public/assets/images/benchandchisel.webp';
-import MybeautymartScreenshot from '../../public/assets/images/mybeautymart.webp';
-import { Container, H2, Item, Section } from '../components';
-import { breakpoints } from '../helpers';
-
-const StyledPreview = styled.a`
-  position: relative;
-  display: block;
-  margin-bottom: 1rem;
-  padding-bottom: 56.25%;
-  overflow: hidden;
-  box-shadow: 0 1.5rem 1.8rem rgb(27 25 34 / 13%);
-
-  img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    object-fit: cover;
-    width: 100%;
-    transition: transform 0.3s ease;
-  }
-
-  &:hover {
-    + a {
-      color: #0d52ff;
-    }
-  }
-
-  ${breakpoints.desktop} {
-    margin-bottom: 3rem;
-  }
-`;
-
-const StyledLink = styled.a`
-  color: #121118;
-  display: inline-block;
-  font-size: 2rem;
-  font-weight: 500;
-  text-decoration: none;
-  transition: color 0.2s ease;
-
-  &:hover {
-    color: #0d52ff;
-  }
-`;
-
-export const Cases = () => (
-  <Section id="cases">
-    <H2 margin="0 0 6rem" textAlign="center">
-      Brands showing their support
-    </H2>
-    <Container>
-      <Item flexGrow={1}>
-        <StyledPreview href="https://barnmansion.com/" target="_blank">
-          <img
-            alt="barnmansion.com screenshot"
-            className="lazyload"
-            data-src={BarnmansionScreenshot}
-          />
-        </StyledPreview>
-        <StyledLink href="https://barnmansion.com/" target="_blank">
-          barnmansion.com
-        </StyledLink>
-      </Item>
-      <Item flexGrow={1}>
-        <StyledPreview href="https://mybeautymart.com/" target="_blank">
-          <img
-            alt="mybeautymart.com screenshot"
-            className="lazyload"
-            data-src={MybeautymartScreenshot}
-          />
-        </StyledPreview>
-        <StyledLink href="https://mybeautymart.com/" target="_blank">
-          mybeautymart.com
-        </StyledLink>
-      </Item>
-      <Item flexGrow={1}>
-        <StyledPreview href="https://benchandchisel.com/" target="_blank">
-          <img
-            alt="benchandchisel.com screenshot"
-            className="lazyload"
-            data-src={BenchandchiselScreenshot}
-          />
-        </StyledPreview>
-        <StyledLink href="https://benchandchisel.com/" target="_blank">
-          benchandchisel.com
-        </StyledLink>
-      </Item>
-    </Container>
-  </Section>
-);
diff --git a/apps/landing/src/sections/Charities.tsx b/apps/landing/src/sections/Charities.tsx
deleted file mode 100644
index 8eeb413b..00000000
--- a/apps/landing/src/sections/Charities.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { Charity } from 'config/types';
-import styled from 'styled-components';
-import { A11y, Autoplay, Pagination } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/react';
-
-import ArrowSVG from '../../public/assets/images/arrow.svg';
-import MiraActionSrc from '../../public/assets/images/mira-action.webp';
-import NewUkraineSrc from '../../public/assets/images/new-ukraine.webp';
-import RazomSrc from '../../public/assets/images/razom.webp';
-import UnicefSrc from '../../public/assets/images/unicef.webp';
-import { Container, H1, H5, Item, Paragraph, Section } from '../components';
-import { breakpoints } from '../helpers';
-
-const charities = [
-  {
-    id: 'razom',
-    logoProps: {
-      alt: 'Razom logo',
-      src: RazomSrc,
-    },
-    name: 'Razom',
-    description:
-      'Razom, which means “together” in Ukrainian is providing critical humanitarian aid and recovery devices for Ukrainian people. We are focused on delivering medicine items, hospital supplies, and tech enabled emergency response supplies that facilitate the delivery of this aid. We send on average more than 70 pallets of aid to Ukraine each week. In the first month of the war, we shipped over 218 tons of supplies.',
-    donationLink: 'https://www.razomforukraine.org/',
-  },
-  {
-    id: 'unicef',
-    logoProps: {
-      alt: 'UNICEF logo',
-      src: UnicefSrc,
-    },
-    name: 'UNICEF',
-    description:
-      'UNICEF is providing life-saving help to children inside Ukraine and in neighboring countries. This includes: \n- Providing lifesaving supplies such as water and hygiene kits, medicines, warm clothes and blanket \n- First-aid kits, surgical kits, and oxygen concentrators to those affected by the violence.',
-    donationLink: 'https://help.unicef.org/ukraine-emergency',
-  },
-  {
-    id: 'mira-action',
-    logoProps: {
-      alt: 'Mira Action logo',
-      src: MiraActionSrc,
-    },
-    name: 'Mira Action',
-    description:
-      'Mira Action is a California-based non-profit organization buying and delivering ambulances, medicines, and humanitarian supplies to Ukraine hospitals. We are a team of 20+ volunteers located in California, Poland, and Ukraine running logistics and delivery supply routes and working with hospitals in Central and Eastern Ukraine.',
-    donationLink: 'https://miraaction.org/',
-  },
-  {
-    id: 'new-ukraine',
-    logoProps: {
-      alt: 'New Ukraine logo',
-      src: NewUkraineSrc,
-    },
-    name: 'New Ukraine',
-    description:
-      "Nova Ukraine is a registered nonprofit organization dedicated to providing humanitarian aid to Ukraine and raising awareness about Ukraine in the United States as well as in the rest of the world. Through your generous donations, we fund a variety of efforts to help the people of Ukraine and to strengthen Ukraine's democratic society.",
-    donationLink: 'https://novaukraine.org/',
-  },
-];
-
-const StyledPreview = styled.div`
-  align-items: center;
-  background-color: #edeff3;
-  display: flex;
-  height: 17.5rem;
-  justify-content: center;
-
-  img {
-    height: 6.4rem;
-    object-fit: contain;
-    width: 6.4rem;
-  }
-`;
-
-const StyledContent = styled.div`
-  background-color: #121118;
-  padding: 5rem 4rem;
-
-  ${Paragraph} {
-    line-height: 2.5rem;
-  }
-`;
-
-const StyledLink = styled.a`
-  align-items: center;
-  color: #fff;
-  display: inline-flex;
-  font-size: 1.5rem;
-  letter-spacing: 0.1rem;
-  text-decoration: none;
-  text-transform: uppercase;
-  transition: color 0.3s ease;
-
-  img {
-    height: 1.2rem;
-    margin-left: 1.2rem;
-    width: 2rem;
-    transition: transform 0.3s ease;
-  }
-
-  &:hover {
-    color: #03eada;
-
-    img {
-      transform: translateX(50%);
-    }
-  }
-`;
-
-const StyledParagraph = styled(Paragraph)`
-  display: -webkit-box;
-  -webkit-line-clamp: 5;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-`;
-
-const StyledH1 = styled(H1)`
-  margin-bottom: 2rem;
-
-  ${breakpoints.desktop} {
-    margin-bottom: 6rem;
-  }
-`;
-
-export const CharityElement = ({ logoProps, name, description, donationLink }: Charity) => (
-  <Item flexBasis="33%">
-    <StyledPreview>
-      <img alt={logoProps.alt} className="lazyload" data-src={logoProps.src} />
-    </StyledPreview>
-    <StyledContent>
-      <H5 color="light">{name}</H5>
-      <StyledParagraph color="light" margin="0 0 3rem" weight={300}>
-        {description}
-      </StyledParagraph>
-      <StyledLink href={donationLink} rel="noreferrer" target="_blank">
-        Learn more
-        <img alt="arrow icon" className="lazyload" data-src={ArrowSVG} />
-      </StyledLink>
-    </StyledContent>
-  </Item>
-);
-
-export const Charities = () => (
-  <Section id="charities">
-    <StyledH1 margin="0 0 6rem" textAlign="center">
-      Charities
-    </StyledH1>
-    <Container flexDirection="row">
-      <Swiper
-        autoplay={{ delay: 5000 }}
-        breakpoints={{
-          320: {
-            slidesPerView: 1,
-          },
-          720: {
-            slidesPerView: 2,
-          },
-          1024: {
-            slidesPerView: 3,
-          },
-        }}
-        modules={[Autoplay, A11y, Pagination]}
-        pagination={{
-          clickable: true,
-        }}
-        spaceBetween={30}
-      >
-        {charities.map((charity, idx) => (
-          <SwiperSlide key={idx}>
-            <CharityElement {...charity} />
-          </SwiperSlide>
-        ))}
-      </Swiper>
-    </Container>
-  </Section>
-);
diff --git a/apps/landing/src/sections/Contacts.tsx b/apps/landing/src/sections/Contacts.tsx
index 9ed2a8db..f8451fd6 100644
--- a/apps/landing/src/sections/Contacts.tsx
+++ b/apps/landing/src/sections/Contacts.tsx
@@ -1,7 +1,6 @@
 import { ChangeEvent, FormEvent, useCallback, useState } from 'react';
 import styled from 'styled-components';
 
-import OpenInNewWindowSVG from '../../public/assets/images/open-in-new-window.svg';
 import {
   Button,
   Container,
@@ -14,6 +13,9 @@ import {
   Textarea,
 } from '../components';
 import { breakpoints } from '../helpers';
+import { translate } from '../locales';
+import { LocaleText } from '../renderer/LocaleText';
+import { usePageContext } from '../renderer/usePageContext';
 
 const StyledForm = styled(Item)`
   background-color: #fff;
@@ -39,39 +41,6 @@ const StyledParagraph = styled(Paragraph)`
   line-height: 2.7rem;
 `;
 
-const StyledLink = styled.a`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  color: #fff;
-  font-size: 1.7rem;
-  font-weight: 100;
-  line-height: 2.7rem;
-  margin-bottom: 2rem;
-  text-decoration: none;
-
-  img {
-    width: 1.5rem;
-    height: 1.5rem;
-    margin-left: 0.5rem;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 1px;
-    bottom: 0;
-    left: 0;
-    transition: 0.3s ease width;
-    background-color: #fff;
-  }
-
-  &:hover::after {
-    width: 100%;
-  }
-`;
-
 const isEmpty = (value: string) => value.length === 0;
 
 const isCorrectEmail = (email: string) =>
@@ -163,26 +132,23 @@ const useForm = () => {
 export const Contacts = () => {
   const { errors, isDirty, isSubmitted, isDisabled, data, resetForm, handleChange, handleSubmit } =
     useForm();
+  const { locale } = usePageContext();
 
   return (
     <Section background="primary" id="contacts">
       <Container>
         <Item flexBasis="50%">
-          <H2 color="light">Contact us</H2>
+          <H2 color="light">
+            <LocaleText>Contact us</LocaleText>
+          </H2>
           <StyledParagraph color="light" size={1.7}>
-            We appreciate you taking the time to help us improve the application so we are able to
-            continue raising awareness, and generating support for our comrades in Ukraine.
+            <LocaleText>
+              We appreciate you taking the time to help us improve the application so we are able to
+              continue raising awareness, and generating support for our comrades in Ukraine.
+            </LocaleText>
           </StyledParagraph>
-          <StyledLink
-            href="https://docs.google.com/forms/d/e/1FAIpQLSdjibRgptwc7j_AMQ54qes93nfyxhXrzYSNnsmf2_7hs6gClw/viewform"
-            rel="noreferrer"
-            target="_blank"
-          >
-            Get support
-            <img alt="External link icon" className="lazyload" data-src={OpenInNewWindowSVG} />
-          </StyledLink>
           <StyledParagraph color="light" size={1.7}>
-            Our emails:
+            <LocaleText>Our emails:</LocaleText>
             <br />
             bohdan.hodzenko@bigcommerce.com
             <br />
@@ -190,47 +156,57 @@ export const Contacts = () => {
           </StyledParagraph>
         </Item>
         <StyledForm flexBasis="50%">
-          <H4>Contact form</H4>
+          <H4>
+            <LocaleText>Contact form</LocaleText>
+          </H4>
           {isSubmitted ? (
             <>
               <Paragraph color="gray" margin="0 0 3rem">
-                Thank you for your submission
+                <LocaleText>Thank you for your submission</LocaleText>
               </Paragraph>
-              <Button onClick={resetForm}>Reset</Button>
+              <Button onClick={resetForm}>
+                <LocaleText>Reset</LocaleText>
+              </Button>
             </>
           ) : (
             <>
               <Paragraph color="gray" margin="0 0 3rem">
-                Describe your question below
+                <LocaleText>Describe your question below</LocaleText>
               </Paragraph>
               <form onSubmit={handleSubmit}>
                 <Input
-                  error={isDirty.name ? errors.name : undefined}
+                  error={isDirty.name ? errors.name && translate(errors.name, locale) : undefined}
                   id="name"
-                  label="First and Last name"
+                  label={translate('First and Last name', locale)}
                   onChange={handleChange}
                   required
                   value={data.name}
                 />
                 <Input
-                  error={isDirty.email ? errors.email : undefined}
+                  error={
+                    isDirty.email ? errors.email && translate(errors.email, locale) : undefined
+                  }
                   id="email"
-                  label="Email"
+                  label={translate('Email', locale)}
                   onChange={handleChange}
                   required
                   value={data.email}
                 />
                 <Textarea
-                  error={isDirty.message ? errors.message : undefined}
+                  error={
+                    isDirty.message
+                      ? errors.message && translate(errors.message, locale)
+                      : undefined
+                  }
                   id="message"
-                  label="Your question or comment"
+                  label={translate('Your question or comment', locale)}
                   onChange={handleChange}
                   required
                   rows={10}
                   value={data.message}
                 />
                 <Button disabled={isDisabled} type="submit">
-                  Submit
+                  <LocaleText>Submit</LocaleText>
                 </Button>
               </form>
             </>
diff --git a/apps/landing/src/sections/DocsPanel.tsx b/apps/landing/src/sections/DocsPanel.tsx
new file mode 100644
index 00000000..4eb8b7c9
--- /dev/null
+++ b/apps/landing/src/sections/DocsPanel.tsx
@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+
+import { usePageContext } from '../renderer/usePageContext';
+
+const Wrapper = styled.div`
+  display: flex;
+  z-index: 10;
+  flex-direction: column;
+  padding: 1rem 0 2rem 0;
+  width: 100%;
+  position: relative;
+  text-align: center;
+  a {
+    color: #0f0f0f;
+    text-decoration: none;
+  }
+`;
+
+interface DocLinks {
+  [key: string]: {
+    href: string;
+    content: string;
+  };
+}
+
+const docLinks: DocLinks = {
+  'en-US': {
+    href: '/assets/docs/Public offer to make a voluntary charitable donation.pdf',
+    content: 'Public offer to make a voluntary charitable donation',
+  },
+  'uk-UA': {
+    href: '/assets/docs/Публічна оферта про надання добровільної благодійної пожертви.pdf',
+    content: 'Публічна оферта про надання добровільної благодійної пожертви',
+  },
+};
+
+export const DocsPanel = () => {
+  const { locale } = usePageContext();
+  const link = docLinks[locale] || docLinks.en;
+
+  return (
+    <Wrapper>
+      <a href={link.href} rel="noreferrer" target="_blank" title={link.content}>
+        {link.content}
+      </a>
+    </Wrapper>
+  );
+};
diff --git a/apps/landing/src/sections/Faq.tsx b/apps/landing/src/sections/Faq.tsx
index 6389dc95..d3ff8809 100644
--- a/apps/landing/src/sections/Faq.tsx
+++ b/apps/landing/src/sections/Faq.tsx
@@ -3,30 +3,107 @@ import styled, { css } from 'styled-components';
 
 import { Container, H1, Item, Paragraph, Section } from '../components';
 import { breakpoints } from '../helpers';
+import { LocaleText } from '../renderer/LocaleText';
+import { usePageContext } from '../renderer/usePageContext';
 
 interface QuestionProps {
   question: string;
   answer: string;
 }
 
-const QUESTIONS = [
-  {
-    question: "I'm not seeing a widget / changes to the widget are not applied.",
-    answer:
-      "Hold shift+R to refresh the storefront page, new script often isn't loaded on a background even after a minute. If it didn’t help, please try to remove a widget and re-apply again. If it still does not work notify us via ”Get support”.",
-  },
-  {
-    question:
-      'Can I add a charity organization myself instead of choosing from the predefined list?',
-    answer:
-      'We have included the list of vetted charity organizations, confirmed with our team in Ukraine to make sure that the donation would get to the people in need. The list includes organizations that are providing only humanitarian help.',
-  },
-  {
-    question: 'Can I select page(s) to display the widget?',
-    answer:
-      'Selecting pages is not supported at this point, however you could select the location. By default widget is going to show up on the following pages: Home, Add Wishlist, Blog List, Blog Post, Brand Pages, All Brands Page, Cart, Category, Product Compare, Contact Form, Product, Search, All Wishlist, Wish List, 404 page.',
-  },
-];
+// Define types
+interface QUESTIONS {
+  [key: string]: Array<{
+    question: string;
+    answer: string;
+  }>;
+}
+
+const QUESTIONS: QUESTIONS = {
+  'en-US': [
+    {
+      question: 'What this initiative is about and who are we supporting?',
+      answer:
+        'This initiative is targeted to support our BigCommerce colleagues who are fighting for the freedom of Ukraine as a part of the Ukrainian Armed Forces.',
+    },
+    {
+      question: 'What is the target amount of donations we want to aim for?',
+      answer:
+        'Our goal is to be able to gather at least $6,000 every month to be able to provide constant support for our colleagues on a frontline.  We are planning to buy transport, protection and medical supplies on a regular basis.  We always aim for more, so the more donations we are able to collect the more help we will be able to provide.',
+    },
+    {
+      question: 'How long do we think this initiative would last?',
+      answer:
+        'The ability to subscribe for regular support will be active till 24.02.2025 with a possibility to be extended if needed. We are planning to support our colleagues as long as the war is going up to the victory day. Or up to the time when they are going to discontinue their service. Subscription is 100% optional and you can unsubscribe any time by reach out to us via contact us form or by clicking <a href="https://docs.google.com/forms/d/e/1FAIpQLScF3VX6Q1GctTWHBzCdKQllsTISdutgT-8KDU3OKySgRbHzBA/viewform">here</a>.',
+    },
+    {
+      question:
+        'In case if the amount of donations is more than the needs, how those funds are going to be used?',
+      answer:
+        'BigCommerce Ukraine is providing help not only to our colleagues defending Ukraine in the Armed Forces, but also to help in rebuilding civilian infrastructure damaged as a cause of russian aggression, as well as helping kids who suffered from this aggression.<br>' +
+        'In case there are any funds left on top of what we need to support our colleagues, those funds would be used to help in rebuilding civilian infrastructure and helping kids and families in need.',
+    },
+    {
+      question: 'How to track how the funds are being used?',
+      answer:
+        'We are posting monthly updates in internal #kyiv slack channel. Please join to be up to date with how your support is being used.',
+    },
+    {
+      question: 'Who can join this initiative and donate?',
+      answer:
+        'At this point we are opening up this donation options for all our colleagues at BigCommerce in Ukraine, US, UK, Mexico, Australia and EU.',
+    },
+    {
+      question: 'Can I make a one time payment directly to the charity org account?',
+      answer:
+        'Yes, you can make one time donation using the One time donation options near the subscription options or use the following bank account:<br>' +
+        'Charity Org “United Ukrainian Support”<br>' +
+        'IBAN: UA373052990000026009036803457<br>' +
+        'JSC CB "PRIVATBANK"<br>',
+    },
+  ],
+  'uk-UA': [
+    {
+      question: 'На кого націлений цей проект і куди підуть кошти?',
+      answer:
+        'Цей проект має на меті допомогу нашим колегам з компанії “БігКоммерс Україна”, які після 24 лютого 2022 року доєднались до захисту України в лавах Збройних Сил.',
+    },
+    {
+      question: 'Яка цільова сума збору?',
+      answer:
+        'Наша мета мати змогу швидко і прогрозовано закривати потреби наших колег, які захищають Україну в лавах ЗСУ. Для цієї мені нам потрібно мати змогу щомісячно збирати від 220 000 грн для швидкої закупівлі транспортних засобів, засобів РЕБ, дронів, засобів зв’язку, генераторів і медичних товарів. Цільова сума в 220 000 грн це мінімум, який дозволить покрити поточні потреби, при цьому ми не обмежуємось цією сумою і, за умови, збору більшої суми будемо розподіляти кошти на покриття додаткових потреб, наприклад щомісячних витрат з обслуговування авто, засобів зв’язку.',
+    },
+    {
+      question: 'Скільки часу триватиме підписка на донати?',
+      answer:
+        'Можливість підписатись на регулярну підтримку буде активною до 24.02.2025 з можливістю продовження строку дії в разі потреби. Ми плануємо підтримувати наших колег до тих пір, допоки це буде необхідно, тобто до закінчення війни або до їх звільнення з лав Збройних Сил України. Цей проект дає змогу допомоги на добровільній основі, тому відмовитись від підтримки можна в будь який момент відправивши запит через <a href="https://forms.gle/gENoxXGFx1EPNokR6">цю форму</a>.',
+    },
+    {
+      question: 'Що буде з залишками коштів, у разі якщо зібрана сума перевищує поточні потреби?',
+      answer:
+        'Компанія “БігКоммерс Україна” допомагає не тільки нашим колегам в складі Збройних Сил України, але також реалізовує інші благодійні ініціативи з допомоги у відбудові цивільної інфраструктури, а також щодо допомоги дітям, які постраждали від наслідків збройної агресії росіїї проти України. У разі, якщо на рахунку благодійного фонду буде надлишок коштів – ці кошти будуть витрачені на благодійні ініціативи з допомоги у відбудові цивільної інфраструктури або на допомогу дітям постраждалим від війни.',
+    },
+    {
+      question: 'Як отримати звіт про те, на що були витрачені кошти?',
+      answer:
+        'Ми публікуємо регулярні щомісячні звіти про усі купівлі у внутрішньому чаті компанії. Кожен бажаючий може долучитись до каналу #kyiv у внутрішньому мессенджері для перегляду детальної інформації щодо закупівель і зібраних коштів.',
+    },
+    {
+      question: 'Хто може долучитись до підтримки?',
+      answer:
+        'Наразі ми залучаємо до підтримки наших колег тільки співробітників компанії BigCommerce в Україні, Британії, США, Австралії, Мексиці та країнах ЄС.',
+    },
+    {
+      question: 'Чи можу я зробити одноразовий донат на реквізити фонду?',
+      answer:
+        'Так, одноразовий донат можна зробити скориставшись опцією поруч з підпискою або за реквізитами фонду:<br>БФ “ОБ’ЄДНАНА УКРАЇНСЬКА ПІДТРИМКА”<br />' +
+        'р/р: UA373052990000026009036803457 <br>' +
+        'АТ КБ "ПРИВАТБАНК" <br>' +
+        'МФО 305299 <br>' +
+        'ЄДРПОУ 44726193',
+    },
+  ],
+};
 
 const StyledQuestion = styled.div`
   border-top: 1px solid #d1d7e0;
@@ -116,7 +193,7 @@ const Question = ({ question, answer }: QuestionProps) => {
       {isOpen && (
         <StyledAnswer>
           <Paragraph margin="0" weight={300}>
-            {answer}
+            <div dangerouslySetInnerHTML={{ __html: answer }} />
           </Paragraph>
         </StyledAnswer>
       )}
@@ -124,17 +201,21 @@ const Question = ({ question, answer }: QuestionProps) => {
   );
 };
 
-export const Faq = () => (
-  <Section id="faq">
-    <StyledH1 margin="0 0 6rem" textAlign="center">
-      FAQ
-    </StyledH1>
-    <Container>
-      <Item flexGrow={1}>
-        {QUESTIONS.map((question, key) => (
-          <Question key={key} {...question} />
-        ))}
-      </Item>
-    </Container>
-  </Section>
-);
+export const Faq = () => {
+  const { locale } = usePageContext();
+
+  return (
+    <Section id="faq">
+      <StyledH1 margin="0 0 6rem" textAlign="center">
+        <LocaleText>FAQ</LocaleText>
+      </StyledH1>
+      <Container>
+        <Item flexGrow={1}>
+          {(QUESTIONS[locale] || QUESTIONS.en).map((qa, key) => (
+            <Question key={key} {...qa} />
+          ))}
+        </Item>
+      </Container>
+    </Section>
+  );
+};
diff --git a/apps/landing/src/sections/HelpIsImportant.tsx b/apps/landing/src/sections/HelpIsImportant.tsx
new file mode 100644
index 00000000..60cdd4f8
--- /dev/null
+++ b/apps/landing/src/sections/HelpIsImportant.tsx
@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+
+import ENVideo from '../../public/assets/subscription/videos/EN.mp4';
+import VideoThumbnail from '../../public/assets/subscription/videos/thumb.png';
+import UAVideo from '../../public/assets/subscription/videos/UA.mp4';
+import { Container, H2, Item, Paragraph, Section, Video } from '../components';
+import { breakpoints } from '../helpers';
+import { defaultLocale } from '../locales';
+import { LocaleText } from '../renderer/LocaleText';
+import { usePageContext } from '../renderer/usePageContext';
+
+const StyledItem = styled(Item)`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledContainer = styled(Container)`
+  gap: 7.6rem;
+
+  ${Item} {
+    width: 100%;
+
+    ${breakpoints.desktop} {
+      width: auto;
+    }
+  }
+`;
+
+const StyledParagraph = styled(Paragraph)`
+  font-size: 1.7rem;
+  text-transform: uppercase;
+`;
+
+export const HelpIsImportant = () => {
+  const { locale } = usePageContext();
+
+  const videoUrl = locale === defaultLocale ? ENVideo : UAVideo;
+
+  return (
+    <Section background="gray" id="how-it-works">
+      <H2 margin="0 0 6rem" textAlign="center">
+        <LocaleText>Why your help is important</LocaleText>
+      </H2>
+      <StyledContainer alignItems="center">
+        <Item flexBasis="67%">
+          <Video
+            poster={VideoThumbnail}
+            sources={[
+              {
+                url: videoUrl,
+                type: 'video/mp4',
+              },
+            ]}
+          />
+        </Item>
+        <StyledItem flexBasis="33%">
+          <StyledParagraph>
+            <LocaleText>War in Ukraine is still going.</LocaleText>
+          </StyledParagraph>
+          <StyledParagraph>
+            <LocaleText>
+              THE needs are growing every day. Government is unable to fulfil all of them and rely
+              on volunteers to help.
+            </LocaleText>
+          </StyledParagraph>
+          <StyledParagraph margin="0">
+            <LocaleText>
+              let's help by supporting people we know and love, our colleagues.
+            </LocaleText>
+          </StyledParagraph>
+        </StyledItem>
+      </StyledContainer>
+    </Section>
+  );
+};
diff --git a/apps/landing/src/sections/Home.tsx b/apps/landing/src/sections/Home.tsx
index a93dfca8..7ebf163b 100644
--- a/apps/landing/src/sections/Home.tsx
+++ b/apps/landing/src/sections/Home.tsx
@@ -1,10 +1,13 @@
 import { DetailedHTMLProps, ImgHTMLAttributes, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import HomeImagePlaceholderSrc from '../../public/assets/images/home-placeholder.webp';
-import HomeImageSrc from '../../public/assets/images/home.webp';
+import AndriiSrc from '../../public/assets/subscription/images/andrii.png';
+import DenisSrc from '../../public/assets/subscription/images/denis.png';
+import OstapSrc from '../../public/assets/subscription/images/ostap.png';
+import PetroSrc from '../../public/assets/subscription/images/petro.png';
 import { ButtonLink, Container, H1, Item, Paragraph, Section } from '../components';
 import { breakpoints } from '../helpers';
+import { LocaleText } from '../renderer/LocaleText';
 
 const StyledSection = styled(Section)`
   padding-top: 3rem !important;
@@ -16,11 +19,8 @@ const StyledSection = styled(Section)`
   }
 `;
 
-const HomeImage = styled.img`
-  max-height: 40rem;
-  width: auto;
-  height: auto;
-  max-width: 100%;
+const StyledImage = styled.img`
+  margin-bottom: 1rem;
 
   &.loading {
     filter: blur(10px);
@@ -33,6 +33,10 @@ const HomeImage = styled.img`
   }
 `;
 
+const StyledItem = styled(Item)`
+  flex-basis: calc(50% - 1.5rem);
+`;
+
 const ButtonsContainer = styled.div`
   display: flex;
   gap: 2rem;
@@ -48,6 +52,12 @@ const ButtonsContainer = styled.div`
   }
 `;
 
+const Small = styled(Paragraph)`
+  font-size: 1.2rem;
+  font-weight: 300;
+  margin-bottom: 2rem;
+`;
+
 const waitForIdle = (cb: () => void) => {
   if (window.requestIdleCallback !== undefined) {
     requestIdleCallback(cb);
@@ -64,7 +74,7 @@ const ProgressiveImg = ({
   ImgHTMLAttributes<HTMLImageElement>,
   HTMLImageElement
 >) => {
-  const [imgSrc, setImgSrc] = useState(placeholderSrc || src);
+  const [imgSrc, setImgSrc] = useState(placeholderSrc ?? src);
 
   useEffect(() => {
     waitForIdle(() => {
@@ -81,10 +91,10 @@ const ProgressiveImg = ({
   }, [src]);
 
   return (
-    <HomeImage
+    <StyledImage
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       {...{ src: imgSrc, ...(props as any) }}
-      alt={props.alt || ''}
+      alt={props.alt ?? ''}
       className={placeholderSrc && imgSrc === placeholderSrc ? 'loading' : 'loaded'}
     />
   );
@@ -94,26 +104,56 @@ export const Home = () => (
   <StyledSection background="primary" id="home">
     <Container alignItems="center" justifyContent="center">
       <Item flexBasis="50%">
-        <H1 color="light">Calling all businesses: Support Ukraine with your online store</H1>
+        <H1 color="light">
+          <LocaleText>Support BigCommerce colleagues defending Ukraine</LocaleText>
+        </H1>
         <Paragraph color="light" margin="0 0 3rem" size={2} weight={300}>
-          The Stand with Ukraine widget provides your site visitors verified and simple way to
-          donate to organizations in Ukraine
+          <LocaleText>
+            Our colleagues from Kyiv office are defending Ukraine on a frontline. Let's help them to
+            stay safe!
+          </LocaleText>
         </Paragraph>
         <ButtonsContainer>
-          <ButtonLink href="#add-widget" variant="light">
-            Add widget
+          <ButtonLink href="#subscriptions" variant="light">
+            <LocaleText>Donate</LocaleText>
           </ButtonLink>
-          <ButtonLink href="#how-it-works">How it works</ButtonLink>
         </ButtonsContainer>
       </Item>
       <Item flexBasis="50%">
-        <ProgressiveImg
-          alt="stand with ukraine"
-          height={400}
-          placeholderSrc={HomeImagePlaceholderSrc}
-          src={HomeImageSrc}
-          width={547}
-        />
+        <Container flexDirection="row" flexWrap="wrap">
+          <StyledItem>
+            <ProgressiveImg alt="Denis photo" src={DenisSrc} />
+            <Small color="light">
+              <LocaleText>
+                Denis Matveev. Product designer (MSF, Localization), officer in Ukraine army
+              </LocaleText>
+            </Small>
+          </StyledItem>
+          <StyledItem>
+            <ProgressiveImg alt="Andrii photo" src={AndriiSrc} />
+            <Small color="light">
+              <LocaleText>
+                Andrii Hurzhiy. Senior Engineer (MSF, Catalog), officer in Ukraine army
+              </LocaleText>
+            </Small>
+          </StyledItem>
+          <StyledItem>
+            <ProgressiveImg alt="Petro photo" src={PetroSrc} />
+            <Small color="light">
+              <LocaleText>
+                Petro Donin. Senior Engineer (Inventory), officer in Ukraine army
+              </LocaleText>
+            </Small>
+          </StyledItem>
+          <StyledItem>
+            <ProgressiveImg alt="Ostap photo" src={OstapSrc} />
+            <Small color="light">
+              <LocaleText>
+                Ostap Ivanishyn. Senior Engineer (Payments), officer in Ukraine army
+              </LocaleText>
+            </Small>
+          </StyledItem>
+        </Container>
       </Item>
     </Container>
   </StyledSection>
diff --git a/apps/landing/src/sections/HowItWorks.tsx b/apps/landing/src/sections/HowItWorks.tsx
deleted file mode 100644
index 91fadab8..00000000
--- a/apps/landing/src/sections/HowItWorks.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import styled from 'styled-components';
-
-import VideoThumbnail from '../../public/assets/videos/how-to/thumbnail.webp';
-import { ButtonLink, Container, H2, Item, Section, Video } from '../components';
-
-const StyledOl = styled.ol`
-  flex-grow: 1;
-  margin: 0 0 2rem;
-  padding: 0;
-  counter-reset: count;
-
-  li {
-    position: relative;
-    counter-increment: count;
-    font-size: 1.7rem;
-    min-height: 7.1rem;
-    list-style-type: none;
-    line-height: 2.7rem;
-    margin-bottom: 4rem;
-    padding-left: 5rem;
-    text-transform: uppercase;
-
-    &::before {
-      content: counter(count);
-      position: absolute;
-      top: 0;
-      left: 0;
-      font-size: 9.2rem;
-      font-family: 'Gotham Cond';
-      font-weight: bold;
-      line-height: 7.2rem;
-      vertical-align: text-top;
-    }
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-`;
-
-const StyledItem = styled(Item)`
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-`;
-
-const StyledContainer = styled(Container)`
-  gap: 7.6rem;
-`;
-
-export const HowItWorks = () => (
-  <Section background="gray" id="how-it-works">
-    <H2 margin="0 0 6rem" textAlign="center">
-      How it works
-    </H2>
-    <StyledContainer>
-      <Item flexBasis="67%">
-        <Video
-          poster={VideoThumbnail}
-          sources={[
-            {
-              url: 'assets/videos/how-to/1080p.webm',
-              type: 'video/webm',
-            },
-            {
-              url: 'assets/videos/how-to/1080p.mp4',
-              type: 'video/mp4',
-            },
-          ]}
-        />
-      </Item>
-      <StyledItem flexBasis="33%">
-        <StyledOl>
-          <li>Quickly choose your widget design and layout</li>
-          <li>Copy widget code to your website</li>
-          <li>
-            Widget will appear on your storefront for customers to donate to the charity of their
-            choice
-          </li>
-        </StyledOl>
-        <ButtonLink href="#add-widget" variant="dark">
-          Add widget
-        </ButtonLink>
-      </StyledItem>
-    </StyledContainer>
-  </Section>
-);
diff --git a/apps/landing/src/sections/Impact.tsx b/apps/landing/src/sections/Impact.tsx
new file mode 100644
index 00000000..eb90dd97
--- /dev/null
+++ b/apps/landing/src/sections/Impact.tsx
@@ -0,0 +1,110 @@
+import styled from 'styled-components';
+import { A11y, Autoplay, Navigation, Pagination } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import { Container, H2, Item, Paragraph, Section } from '../components';
+import { breakpoints } from '../helpers';
+import { LocaleText } from '../renderer/LocaleText';
+
+const images = import.meta.glob<string>('../../public/assets/subscription/images/carousel/*.jpg', {
+  eager: true,
+  import: 'default',
+});
+
+const tags = [
+  'Pickup trucks',
+  'Drones & batteries',
+  'Mini excavator',
+  'Powerstations',
+  'Starlink kits',
+  'Active headphones',
+  'Night vision monoculars',
+  'Laptops',
+  'Monitors',
+  'Hertz analyzer',
+  'Sleeping bags',
+  'Medical tourniquets',
+  'Thermal vision cameras',
+  'Body armors',
+  'Many more...',
+];
+
+const SubTitle = styled(Paragraph)`
+  font-weight: 300;
+`;
+
+const Image = styled.img`
+  height: 40rem;
+  object-fit: contain;
+  width: 100%;
+`;
+
+const Tags = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  margin: 0;
+  line-height: 2.6rem;
+  padding: 0;
+  white-space: nowrap;
+
+  li {
+    background-color: #dbe3fe;
+    border-radius: 0.5rem;
+    color: #4c4b58;
+    list-style-type: none;
+    padding: 0.2rem 1rem;
+  }
+`;
+
+const StyledItem = styled(Item)`
+  width: 100%;
+
+  ${breakpoints.desktop} {
+    width: 50%;
+  }
+`;
+
+export const Impact = () => {
+  return (
+    <Section>
+      <H2 textAlign="center">
+        <LocaleText>Your impact</LocaleText>
+      </H2>
+      <SubTitle color="#313440" margin="0 0 6rem" size={2} textAlign="center">
+        <LocaleText>
+          In the past 2 years, with your help we've handed over essential supplies at almost
+          $100,000
+        </LocaleText>
+      </SubTitle>
+      <Container alignItems="center">
+        <Item flexBasis="50%">
+          <Tags>
+            {tags.map((tag, i) => (
+              <li key={i}>
+                <LocaleText>{tag}</LocaleText>
+              </li>
+            ))}
+          </Tags>
+        </Item>
+        <StyledItem flexBasis="50%">
+          <Swiper
+            autoplay={{ delay: 1000 }}
+            loop={true}
+            modules={[Autoplay, A11y, Navigation, Pagination]}
+            navigation={true}
+            pagination={{
+              clickable: true,
+            }}
+          >
+            {Object.values(images).map((src, i) => (
+              <SwiperSlide key={i}>
+                <Image alt={`slide #${i}`} src={src} />
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </StyledItem>
+      </Container>
+    </Section>
+  );
+};
diff --git a/apps/landing/src/sections/LogoPanel.tsx b/apps/landing/src/sections/LogoPanel.tsx
index 5d34b96e..d7491954 100644
--- a/apps/landing/src/sections/LogoPanel.tsx
+++ b/apps/landing/src/sections/LogoPanel.tsx
@@ -1,9 +1,12 @@
 import styled, { css } from 'styled-components';
 
 import BCLogo from '../../public/assets/images/bc-logo.svg';
-import SWULogo from '../../public/assets/images/swu-logo.svg';
+import SWULogoUA from '../../public/assets/subscription/images/swu-logo-ua.svg';
+import SWULogo from '../../public/assets/subscription/images/swu-logo.svg';
 import { Item, Section } from '../components';
 import { breakpoints } from '../helpers';
+import { locales } from '../locales';
+import { usePageContext } from '../renderer/usePageContext';
 
 interface Props {
   isFixed?: boolean;
@@ -58,6 +61,7 @@ const Wrapper = styled.div<{ isFixed: boolean }>`
   z-index: 10;
   flex-direction: column;
   width: 100%;
+  position: relative;
 
   ${({ isFixed }) =>
     isFixed &&
@@ -68,19 +72,61 @@ const Wrapper = styled.div<{ isFixed: boolean }>`
     `}
 `;
 
-export const LogoPanel = ({ isFixed = false }: Props) => (
-  <Wrapper isFixed={isFixed}>
-    <StyledSection alignItems="center" display="flex" paddingY={2}>
-      <Item display="flex" justifyContent="flex-end">
-        <a href="https://www.bigcommerce.com/" rel="noreferrer" target="_blank">
-          <img alt="Bigcommerce logo" src={BCLogo} />
-        </a>
-      </Item>
-      <Item display="flex" flexGrow={1} justifyContent="flex-start">
-        <a href="#">
-          <img alt="Stand with ukraine logo" src={SWULogo} />
-        </a>
-      </Item>
-    </StyledSection>
-  </Wrapper>
-);
+const LangNav = styled.div`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 1.5rem;
+`;
+
+const LangLink = styled.a<{ isActive: boolean }>`
+  display: block;
+  padding: 0.5rem;
+  color: #121118;
+  font-weight: ${({ isActive }) => (isActive ? 'bold' : '300')};
+  text-decoration: none;
+
+  ${({ isActive }) =>
+    isActive &&
+    css`
+      cursor: default;
+      pointer-events: none;
+    `}
+`;
+
+const links = [
+  { href: `/`, locale: locales.en, content: 'EN' },
+  { href: `/${locales.ua}`, locale: locales.ua, content: 'UA' },
+];
+
+export const LogoPanel = ({ isFixed = false }: Props) => {
+  const { locale: currentLocale } = usePageContext();
+
+  const swuLogo = currentLocale === locales.en ? SWULogo : SWULogoUA;
+
+  return (
+    <Wrapper isFixed={isFixed}>
+      <StyledSection alignItems="center" display="flex" paddingY={2}>
+        <Item display="flex" justifyContent="flex-end">
+          <a href="https://www.bigcommerce.com/" rel="noreferrer" target="_blank">
+            <img alt="Bigcommerce logo" src={BCLogo} />
+          </a>
+        </Item>
+        <Item display="flex" flexGrow={1} justifyContent="flex-start">
+          <a href="#">
+            <img alt="Stand with ukraine logo" src={swuLogo} />
+          </a>
+        </Item>
+      </StyledSection>
+      <LangNav>
+        {links.map(({ href, locale, content }) => (
+          <LangLink href={href} isActive={locale === currentLocale} key={content}>
+            {content}
+          </LangLink>
+        ))}
+      </LangNav>
+    </Wrapper>
+  );
+};
diff --git a/apps/landing/src/sections/Needs.tsx b/apps/landing/src/sections/Needs.tsx
new file mode 100644
index 00000000..3cc30364
--- /dev/null
+++ b/apps/landing/src/sections/Needs.tsx
@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+
+import MedicalSuppliesSrc from '../../public/assets/subscription/images/medical-supplies.jpg';
+import RadioProtectionToolsSrc from '../../public/assets/subscription/images/radio-protection-tools.jpg';
+import TransportSrc from '../../public/assets/subscription/images/transport.jpg';
+import { Container, H2, Item, Paragraph, Section } from '../components';
+import { breakpoints } from '../helpers';
+import { LocaleText } from '../renderer/LocaleText';
+
+const SubTitle = styled(Paragraph)`
+  font-weight: 300;
+`;
+
+const Small = styled(Paragraph)`
+  font-size: 1.6rem;
+  font-weight: 300;
+`;
+
+const CardTitle = styled(Paragraph)`
+  font-size: 2rem;
+  margin-bottom: 1rem;
+`;
+
+const StyledImage = styled.img`
+  display: block;
+  margin: 0 auto 3rem;
+
+  ${breakpoints.tablet} {
+    margin: 0 0 3rem;
+  }
+`;
+
+export const Needs = () => (
+  <Section>
+    <H2 textAlign="center">
+      <LocaleText>What are the constant needs</LocaleText>
+    </H2>
+    <SubTitle color="#313440" margin="0 0 6rem" size={2} textAlign="center">
+      <LocaleText>
+        There's a constant need in transport, protection and medical supplies. And our focus is in
+        making sure we can provide help fast.
+      </LocaleText>
+    </SubTitle>
+    <Container>
+      <Item flexBasis="33%">
+        <StyledImage alt="transport" className="lazyload" data-src={TransportSrc} />
+        <CardTitle>
+          <LocaleText>Transport</LocaleText>
+        </CardTitle>
+        <Small color="#6D6E7A">
+          <LocaleText>
+            Transport is essential to survive and transport people and ammunition. Cars get damaged
+            every day and require either maintenance or full replacement.
+          </LocaleText>
+        </Small>
+      </Item>
+      <Item flexBasis="33%">
+        <StyledImage alt="transport" className="lazyload" data-src={RadioProtectionToolsSrc} />
+        <CardTitle>
+          <LocaleText>Radio protection tools</LocaleText>
+        </CardTitle>
+        <Small color="#6D6E7A">
+          <LocaleText>
+            Anti drone protection is #1 request today, in addition to body armor, night vision,
+            Starlink kits and powerstations for stable connection, drones with thermal vision.
+          </LocaleText>
+        </Small>
+      </Item>
+      <Item flexBasis="33%">
+        <StyledImage alt="transport" className="lazyload" data-src={MedicalSuppliesSrc} />
+        <CardTitle>
+          <LocaleText>Medical supplies</LocaleText>
+        </CardTitle>
+        <Small color="#6D6E7A">
+          <LocaleText>
+            Medical tourniquets, medical bandage, medical kits and medicines, body warmers and
+            sleeping bags.
+          </LocaleText>
+        </Small>
+      </Item>
+    </Container>
+  </Section>
+);
diff --git a/apps/landing/src/sections/Stats.tsx b/apps/landing/src/sections/Stats.tsx
index 38505c2e..7516beaa 100644
--- a/apps/landing/src/sections/Stats.tsx
+++ b/apps/landing/src/sections/Stats.tsx
@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 import { Container, H2, Section } from '../components';
 import { breakpoints } from '../helpers';
+import { LocaleText } from '../renderer/LocaleText';
 
 const StyledList = styled.ul`
   color: #fff;
@@ -11,6 +12,7 @@ const StyledList = styled.ul`
   justify-content: space-between;
   margin: 0;
   padding: 0;
+  width: 100%;
 
   strong {
     display: block;
@@ -45,21 +47,21 @@ const StyledList = styled.ul`
 export const Stats = () => (
   <Section background="dark" id="stats">
     <H2 color="light" margin="0 0 6rem" textAlign="center">
-      Why it is important
+      #TEAMONAMISSION
     </H2>
     <Container>
       <StyledList>
         <li>
-          <strong>{'>600 000'}</strong>
-          houses were destroyed
+          <strong>57</strong>
+          <LocaleText>subscribers</LocaleText>
         </li>
         <li>
-          <strong>{'>90%'}</strong>
-          of Ukrainians have electricity and water outages everyday
+          <strong>7</strong>
+          <LocaleText>countries</LocaleText>
         </li>
         <li>
-          <strong>{'>8 000 000'}</strong>
-          people had to leave their homes
+          <strong>{'>$5000'}</strong>
+          <LocaleText>monthly support</LocaleText>
         </li>
       </StyledList>
     </Container>
diff --git a/apps/landing/src/sections/Subscriptions.tsx b/apps/landing/src/sections/Subscriptions.tsx
new file mode 100644
index 00000000..c490c8f6
--- /dev/null
+++ b/apps/landing/src/sections/Subscriptions.tsx
@@ -0,0 +1,215 @@
+import { useState } from 'react';
+import styled, { css } from 'styled-components';
+
+import {
+  ButtonLink,
+  Container,
+  H2,
+  H3,
+  Item,
+  Paragraph,
+  Section,
+  StyledContainer,
+} from '../components';
+import { breakpoints } from '../helpers';
+import { locales } from '../locales';
+import { LocaleText } from '../renderer/LocaleText';
+import { usePageContext } from '../renderer/usePageContext';
+
+export interface SubscriptionItem {
+  title: string;
+  description?: string;
+  url: string;
+}
+
+const usdItems: SubscriptionItem[] = [
+  { title: '25 USD', description: 'per month', url: 'https://pay.fondy.eu/s/fMnXeFNi' },
+  { title: '50 USD', description: 'per month', url: 'https://pay.fondy.eu/s/JaJY6jTzVRu' },
+  { title: '75 USD', description: 'per month', url: 'https://pay.fondy.eu/s/QEW5xP' },
+  { title: '100 USD', description: 'per month', url: 'https://pay.fondy.eu/s/Fn9TS9Bwf2qLD' },
+  { title: 'Custom', description: 'per month', url: 'https://pay.fondy.eu/s/QWY431oLDuJ' },
+  { title: '1 time donation', url: 'https://pay.fondy.eu/s/0jCTyK' },
+];
+
+const eurItems: SubscriptionItem[] = [
+  { title: '25 EUR', description: 'per month', url: 'https://pay.fondy.eu/s/BxiJkCmB9cceDpX' },
+  { title: '50 EUR', description: 'per month', url: 'https://pay.fondy.eu/s/k4o6lBt9PpeT6na' },
+  { title: '75 EUR', description: 'per month', url: 'https://pay.fondy.eu/s/v8BGL6vhdwB' },
+  { title: '100 EUR', description: 'per month', url: 'https://pay.fondy.eu/s/9fKHsjAM' },
+  { title: 'Custom', description: 'per month', url: 'https://pay.fondy.eu/s/9vsr' },
+  { title: '1 time donation', url: 'https://pay.fondy.eu/s/EUeK2h9ELybe' },
+];
+
+const uahItems: SubscriptionItem[] = [
+  { title: '2000 грн', description: '/ місяць', url: 'https://pay.fondy.eu/s/rcGjT0nI' },
+  { title: '3000 грн', description: '/ місяць', url: 'https://pay.fondy.eu/s/F2beCPBCuF' },
+  { title: '4000 грн', description: '/ місяць', url: 'https://pay.fondy.eu/s/wDFTuOZAUcnh' },
+  { title: '5000 грн', description: '/ місяць', url: 'https://pay.fondy.eu/s/BQUQW8tB6ecI9t8v' },
+  { title: 'Інша сума', description: '/ місяць', url: 'https://pay.fondy.eu/s/9vsr' },
+  { title: 'Разовий донат', url: 'https://pay.fondy.eu/s/XWujPPC' },
+];
+
+const StyledParagraph = styled(Paragraph)`
+  margin-bottom: 3rem;
+  line-height: 1.6;
+
+  ${breakpoints.desktop} {
+    margin-bottom: 6rem;
+  }
+`;
+
+const Tabs = styled.div`
+  display: flex;
+  flex-grow: 1;
+  margin-bottom: 6rem;
+`;
+
+const TabButton = styled.button<{ isActive?: boolean }>`
+  color: #fff;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-bottom: 1px solid #fff;
+  display: block;
+  flex-grow: 1;
+  font-size: 3.4rem;
+  overflow: hidden;
+  padding: 0 1rem 1rem;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+
+  ${({ isActive }) =>
+    isActive &&
+    css`
+      cursor: default;
+    `}
+
+  &::after {
+    content: '';
+    background-color: #fff;
+    height: 1rem;
+    left: 0;
+    position: absolute;
+    top: 100%;
+    transition: transform 0.3s ease;
+    width: 100%;
+
+    ${({ isActive }) =>
+      isActive &&
+      css`
+        transform: translateY(-0.5rem);
+      `}
+  }
+
+  &:hover::after {
+    transform: ${({ isActive }) => (isActive ? 'translateY(-0.5rem)' : 'translateY(-1rem)')};
+  }
+`;
+
+const StyledItem = styled.div<{ hasDescription: boolean }>`
+  background: #000;
+  padding: 3rem 1.5rem;
+  text-align: center;
+
+  ${Paragraph} {
+    margin-bottom: 3rem;
+  }
+
+  ${ButtonLink} {
+    max-width: 50rem;
+    width: 100%;
+  }
+
+  ${breakpoints.desktop} {
+    padding: 5rem 4rem;
+  }
+
+  label {
+    color: #fff;
+  }
+
+  ${StyledContainer} {
+    margin-bottom: 2rem;
+    margin-top: -1rem;
+  }
+
+  input {
+    color: #fff;
+    background-color: transparent;
+    border-bottom-color: #fff;
+  }
+`;
+
+const Note = styled(Paragraph)`
+  margin-top: 6rem;
+  text-transform: uppercase;
+
+  a {
+    color: #fff;
+  }
+`;
+
+export const Subscriptions = () => {
+  const { locale } = usePageContext();
+  const [activeTab, setActiveTab] = useState<'usd' | 'eur'>('usd');
+
+  const items = locale === locales.en ? (activeTab === 'usd' ? usdItems : eurItems) : uahItems;
+
+  return (
+    <Section background="blue" id="subscriptions">
+      <H2 color="light" margin="0 0 3rem" textAlign="center">
+        <LocaleText>Subscription that saves lives</LocaleText>
+      </H2>
+      <StyledParagraph color="light" margin="0 0 6rem" size={2} textAlign="center" weight={300}>
+        <LocaleText>
+          Monthly support would provide the ability to help systematically and quickly. However, we
+          would appreciate one time donation as well
+        </LocaleText>
+      </StyledParagraph>
+      {locale === locales.en && (
+        <Container>
+          <Tabs>
+            <TabButton isActive={activeTab === 'usd'} onClick={() => setActiveTab('usd')}>
+              usd
+            </TabButton>
+            <TabButton isActive={activeTab === 'eur'} onClick={() => setActiveTab('eur')}>
+              eur
+            </TabButton>
+          </Tabs>
+        </Container>
+      )}
+      <Container flexWrap="wrap">
+        {items.map(({ title, description, url }, key) => (
+          <Item flexBasis="31%" key={key}>
+            <StyledItem hasDescription={!!description} key={key}>
+              <H3 color="light" margin={description ? '0' : '0 0 5rem'}>
+                <LocaleText>{title}</LocaleText>
+              </H3>
+              {!!description && (
+                <Paragraph color="light">
+                  <LocaleText>{description}</LocaleText>
+                </Paragraph>
+              )}
+              <ButtonLink href={url} rel="noreferrer" target="_blank" variant="light">
+                <LocaleText>Support</LocaleText>
+              </ButtonLink>
+            </StyledItem>
+          </Item>
+        ))}
+      </Container>
+      <Container>
+        <Note color="light">
+          <LocaleText>* If you are subscribed, but want to cancel subscription</LocaleText>{' '}
+          <a
+            href="https://docs.google.com/forms/d/e/1FAIpQLScF3VX6Q1GctTWHBzCdKQllsTISdutgT-8KDU3OKySgRbHzBA/viewform"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <LocaleText>click here</LocaleText>
+          </a>
+        </Note>
+      </Container>
+    </Section>
+  );
+};
diff --git a/apps/landing/src/sections/Support.tsx b/apps/landing/src/sections/Support.tsx
deleted file mode 100644
index f15155c3..00000000
--- a/apps/landing/src/sections/Support.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import styled from 'styled-components';
-
-import { ButtonLink, Container, H2, H3, Item, Paragraph, Section } from '../components';
-import { breakpoints } from '../helpers';
-
-const StyledParagraph = styled(Paragraph)`
-  margin-bottom: 3rem;
-  line-height: 1.6;
-
-  ${breakpoints.desktop} {
-    margin-bottom: 6rem;
-  }
-`;
-
-const StyledItem = styled.div`
-  background: #000;
-  padding: 3rem 1.5rem;
-  text-align: center;
-
-  ${H3} {
-    margin-bottom: 0;
-  }
-
-  ${Paragraph} {
-    margin-bottom: 3rem;
-  }
-
-  ${ButtonLink} {
-    background-image: linear-gradient(to bottom right, #ffd500 50%, #fff 0);
-    max-width: 50rem;
-    width: 100%;
-  }
-
-  ${breakpoints.desktop} {
-    padding: 5rem 4rem;
-  }
-`;
-
-export const Support = () => (
-  <Section background="blue" id="support">
-    <H2 color="light" margin="0 0 3rem" textAlign="center">
-      Support our colleagues
-    </H2>
-    <StyledParagraph color="light" margin="0 0 6rem" size={2} textAlign="center" weight={300}>
-      Select an option to support our BigCommerce colleagues defending Ukraine on a regular basis!
-      <br />
-      You can cancel your support any time by sending a message via Contact us form below.
-    </StyledParagraph>
-    <Container flexWrap="wrap">
-      <Item flexBasis="31%">
-        <StyledItem>
-          <H3 color="light">2000 UAH</H3>
-          <Paragraph color="light">per month</Paragraph>
-          <ButtonLink
-            href="https://pay.fondy.eu/s/rcGjT0nI"
-            rel="noreferrer"
-            target="_blank"
-            variant="light"
-          >
-            Support
-          </ButtonLink>
-        </StyledItem>
-      </Item>
-      <Item flexBasis="31%">
-        <StyledItem>
-          <H3 color="light">3000 UAH</H3>
-          <Paragraph color="light">per month</Paragraph>
-          <ButtonLink
-            href="https://pay.fondy.eu/s/F2beCPBCuF"
-            rel="noreferrer"
-            target="_blank"
-            variant="light"
-          >
-            Support
-          </ButtonLink>
-        </StyledItem>
-      </Item>
-      <Item flexBasis="31%">
-        <StyledItem>
-          <H3 color="light">4000 UAH</H3>
-          <Paragraph color="light">per month</Paragraph>
-          <ButtonLink
-            href="https://pay.fondy.eu/s/wDFTuOZAUcnh"
-            rel="noreferrer"
-            target="_blank"
-            variant="light"
-          >
-            Support
-          </ButtonLink>
-        </StyledItem>
-      </Item>
-      <Item flexBasis="31%">
-        <StyledItem>
-          <H3 color="light">5000 UAH</H3>
-          <Paragraph color="light">per month</Paragraph>
-          <ButtonLink
-            href="https://pay.fondy.eu/s/BQUQW8tB6ecI9t8v"
-            rel="noreferrer"
-            target="_blank"
-            variant="light"
-          >
-            Support
-          </ButtonLink>
-        </StyledItem>
-      </Item>
-      <Item flexBasis="31%">
-        <StyledItem>
-          <H3 color="light">Custom</H3>
-          <Paragraph color="light">per month</Paragraph>
-          <ButtonLink
-            href="https://pay.fondy.eu/s/4lEyTDf3yFEC"
-            rel="noreferrer"
-            target="_blank"
-            variant="light"
-          >
-            Support
-          </ButtonLink>
-        </StyledItem>
-      </Item>
-    </Container>
-  </Section>
-);
diff --git a/apps/landing/src/sections/Team.tsx b/apps/landing/src/sections/Team.tsx
deleted file mode 100644
index d97f6488..00000000
--- a/apps/landing/src/sections/Team.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import styled from 'styled-components';
-import { A11y, Autoplay, Pagination } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/react';
-
-import VideoThumbnail from '../../public/assets/videos/team/thumbnail.webp';
-import { Container, H1, Item, Paragraph, Section, Video } from '../components';
-import { breakpoints } from '../helpers';
-
-const StyledItem = styled.div`
-  align-items: center;
-  display: flex;
-  gap: 2rem;
-`;
-
-const StyledPhoto = styled.img`
-  height: 6.7rem;
-  object-fit: cover;
-  width: 6.7rem;
-`;
-
-const StyledH1 = styled(H1)`
-  margin-bottom: 3rem;
-
-  ${breakpoints.desktop} {
-    margin-bottom: 6rem;
-  }
-`;
-
-interface TeamMember {
-  photo: string;
-  name: string;
-  title: string;
-}
-
-const TeamList: TeamMember[] = [
-  {
-    photo: 'assets/images/team/Bohdan.webp',
-    name: 'Bohdan Hodzenko',
-    title: 'Product manager/designer',
-  },
-  {
-    photo: 'assets/images/team/Micah.webp',
-    name: 'Micah Thomas',
-    title: 'Full stack engineer',
-  },
-  {
-    photo: 'assets/images/team/Stanislav.webp',
-    name: 'Stanislav Holts',
-    title: 'Front end engineer',
-  },
-  {
-    photo: 'assets/images/team/John.webp',
-    name: 'John McCann',
-    title: 'Strategy',
-  },
-  {
-    photo: 'assets/images/team/Anastasiia.webp',
-    name: 'Anastasiia Zvierieva',
-    title: 'QA Engineer',
-  },
-  {
-    photo: 'assets/images/team/Kristina.webp',
-    name: 'Kristina Pototska',
-    title: 'Product manager',
-  },
-  {
-    photo: 'assets/images/team/Max.webp',
-    name: 'Max Kiely',
-    title: 'Marketer',
-  },
-];
-
-export const Member = ({ photo, name, title }: TeamMember) => (
-  <StyledItem>
-    <StyledPhoto
-      alt={name}
-      className="lazyload"
-      data-src={`${import.meta.env.BASE_URL}/${photo}`}
-    />
-    <Item>
-      <Paragraph margin="0 0 0.5rem" size={2}>
-        <strong>{name}</strong>
-      </Paragraph>
-      <Paragraph color="gray" margin="0" size={1.7}>
-        {title}
-      </Paragraph>
-    </Item>
-  </StyledItem>
-);
-
-export const Team = () => (
-  <Section background="gray" id="team">
-    <StyledH1 margin="0 0 6rem" textAlign="center">
-      Our team
-    </StyledH1>
-    <Container>
-      <Item flexBasis="67%">
-        <Video
-          poster={VideoThumbnail}
-          sources={[
-            {
-              url: 'assets/videos/team/1080p.webm',
-              type: 'video/webm',
-            },
-            {
-              url: 'assets/videos/team/1080p.mp4',
-              type: 'video/mp4',
-            },
-          ]}
-        />
-      </Item>
-      <Item flexBasis="33%">
-        <Swiper
-          autoplay={{ delay: 5000 }}
-          breakpoints={{
-            320: {
-              slidesPerView: 7,
-            },
-            960: {
-              slidesPerView: 5,
-            },
-          }}
-          direction="vertical"
-          modules={[Autoplay, A11y, Pagination]}
-          pagination={{
-            clickable: true,
-          }}
-          spaceBetween={10}
-        >
-          {TeamList.map((member, idx) => (
-            <SwiperSlide key={idx}>
-              <Member {...member} />
-            </SwiperSlide>
-          ))}
-        </Swiper>
-      </Item>
-    </Container>
-  </Section>
-);
diff --git a/apps/landing/src/sections/index.ts b/apps/landing/src/sections/index.ts
index d8410a1d..cec73f8c 100644
--- a/apps/landing/src/sections/index.ts
+++ b/apps/landing/src/sections/index.ts
@@ -1,11 +1,8 @@
 export * from './LogoPanel';
 export * from './Home';
-export * from './HowItWorks';
+export * from './HelpIsImportant';
 export * from './Stats';
-export * from './Cases';
-export * from './AddWidget';
-export * from './Charities';
-export * from './Team';
-export * from './Faq';
 export * from './Contacts';
-export * from './Support';
+export * from './Needs';
+export * from './Subscriptions';
+export * from './Impact';
diff --git a/apps/landing/vite.config.ts b/apps/landing/vite.config.ts
index 66798ea9..4906d094 100644
--- a/apps/landing/vite.config.ts
+++ b/apps/landing/vite.config.ts
@@ -6,7 +6,6 @@ import { ssr } from 'vike/plugin';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), svgLoader(), ssr({ prerender: true })],
-  base: '/landing',
   server: {
     proxy: {
       '/api': 'http://localhost:9000',
diff --git a/apps/subscription/src/renderer/+onRenderHtml.tsx b/apps/subscription/src/renderer/+onRenderHtml.tsx
index 945e14c4..2bd4262f 100644
--- a/apps/subscription/src/renderer/+onRenderHtml.tsx
+++ b/apps/subscription/src/renderer/+onRenderHtml.tsx
@@ -5,8 +5,6 @@ import SwiperPaginationCss from 'swiper/css/pagination?raw';
 import SwiperCss from 'swiper/css?raw';
 import { dangerouslySkipEscape, escapeInject } from 'vike/server';
 
-import HomeImagePlaceholderSrc from '../../public/assets/images/home-placeholder.webp';
-import HomeImageSrc from '../../public/assets/images/home.webp';
 import { langs } from '../locales';
 
 import { Fonts } from './fonts';
@@ -57,13 +55,11 @@ async function render(pageContext: PageContextServer) {
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preload" href="${HomeImagePlaceholderSrc}" as="image">
     <link rel="icon" href="favicon.ico" />
     <link rel="apple-touch-icon" href="logo192.png" />
     ${dangerouslySkipEscape(sheet.getStyleTags())}
     ${dangerouslySkipEscape(`<style>${SwiperCss}${SwiperPaginationCss}</style>`)}
     ${dangerouslySkipEscape(`<style>${SwiperCss}${SwiperNavigationCss}</style>`)}
-    <link rel="preload" href="${HomeImageSrc}" as="image">
     <title>${title}</title>
     ${dangerouslySkipEscape(metaTags)}
   </head>

From e25483d09a8c9308a115f45c54cf8f44c7821fb6 Mon Sep 17 00:00:00 2001
From: Stanislav Holts <stanislav.holts@bigcommerce.com>
Date: Mon, 26 Feb 2024 23:19:21 +0200
Subject: [PATCH 2/3] refactor(landing): replace landing by thre subscription
 version

---
 apps/landing/src/renderer/+onRenderHtml.tsx | 8 ++++----
 apps/landing/vite.config.ts                 | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/landing/src/renderer/+onRenderHtml.tsx b/apps/landing/src/renderer/+onRenderHtml.tsx
index c00910ad..b07917e4 100644
--- a/apps/landing/src/renderer/+onRenderHtml.tsx
+++ b/apps/landing/src/renderer/+onRenderHtml.tsx
@@ -24,14 +24,14 @@ const metaTags = `
     <meta property="og:url" content="${BASE_URL}">
     <meta property="og:title" content="Stand with Ukraine">
     <meta property="og:description" content="Support BigCommerce colleagues defending Ukraine! Our colleagues from Kyiv office are defending Ukraine on a frontline. Let's help them to stay safe!">
-    <meta property="og:image" content="${BASE_URL}/assets/subscription/images/home.png">
+    <meta property="og:image" content="${BASE_URL}/landing/assets/subscription/images/home.png">
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image">
     <meta property="twitter:url" content="${BASE_URL}">
     <meta property="twitter:title" content="Stand with Ukraine">
     <meta property="twitter:description" content="Support BigCommerce colleagues defending Ukraine! Our colleagues from Kyiv office are defending Ukraine on a frontline. Let's help them to stay safe!">
-    <meta property="twitter:image" content="${BASE_URL}/assets/subscription/images/home.png">
+    <meta property="twitter:image" content="${BASE_URL}/landing/assets/subscription/images/home.png">
 `;
 
 async function render(pageContext: PageContextServer) {
@@ -55,8 +55,8 @@ async function render(pageContext: PageContextServer) {
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="favicon.ico" />
-    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="icon" href="${import.meta.env.BASE_URL}/favicon.ico" />
+    <link rel="apple-touch-icon" href="${import.meta.env.BASE_URL}/logo192.png" />
     ${dangerouslySkipEscape(sheet.getStyleTags())}
     ${dangerouslySkipEscape(`<style>${SwiperCss}${SwiperPaginationCss}</style>`)}
     ${dangerouslySkipEscape(`<style>${SwiperCss}${SwiperNavigationCss}</style>`)}
diff --git a/apps/landing/vite.config.ts b/apps/landing/vite.config.ts
index 4906d094..66798ea9 100644
--- a/apps/landing/vite.config.ts
+++ b/apps/landing/vite.config.ts
@@ -6,6 +6,7 @@ import { ssr } from 'vike/plugin';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), svgLoader(), ssr({ prerender: true })],
+  base: '/landing',
   server: {
     proxy: {
       '/api': 'http://localhost:9000',

From 22027bfb49df206aa59f3b8d28770a0c3c914d10 Mon Sep 17 00:00:00 2001
From: Micah Thomas <micah.thomas@bigcommerce.com>
Date: Mon, 26 Feb 2024 14:45:15 -0700
Subject: [PATCH 3/3] fix: use base url for the localization route

---
 apps/landing/src/sections/LogoPanel.tsx      | 4 ++--
 apps/subscription/src/sections/LogoPanel.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/landing/src/sections/LogoPanel.tsx b/apps/landing/src/sections/LogoPanel.tsx
index d7491954..097dd2be 100644
--- a/apps/landing/src/sections/LogoPanel.tsx
+++ b/apps/landing/src/sections/LogoPanel.tsx
@@ -97,8 +97,8 @@ const LangLink = styled.a<{ isActive: boolean }>`
 `;
 
 const links = [
-  { href: `/`, locale: locales.en, content: 'EN' },
-  { href: `/${locales.ua}`, locale: locales.ua, content: 'UA' },
+  { href: `${import.meta.env.BASE_URL}/`, locale: locales.en, content: 'EN' },
+  { href: `${import.meta.env.BASE_URL}/${locales.ua}`, locale: locales.ua, content: 'UA' },
 ];
 
 export const LogoPanel = ({ isFixed = false }: Props) => {
diff --git a/apps/subscription/src/sections/LogoPanel.tsx b/apps/subscription/src/sections/LogoPanel.tsx
index d7491954..097dd2be 100644
--- a/apps/subscription/src/sections/LogoPanel.tsx
+++ b/apps/subscription/src/sections/LogoPanel.tsx
@@ -97,8 +97,8 @@ const LangLink = styled.a<{ isActive: boolean }>`
 `;
 
 const links = [
-  { href: `/`, locale: locales.en, content: 'EN' },
-  { href: `/${locales.ua}`, locale: locales.ua, content: 'UA' },
+  { href: `${import.meta.env.BASE_URL}/`, locale: locales.en, content: 'EN' },
+  { href: `${import.meta.env.BASE_URL}/${locales.ua}`, locale: locales.ua, content: 'UA' },
 ];
 
 export const LogoPanel = ({ isFixed = false }: Props) => {