freemadeira · louro-ines · Apr 21, 2026 · Apr 30, 2026 · Apr 30, 2026
diff --git a/frontend/apps/website/src/app/business/page.tsx b/frontend/apps/website/src/app/business/page.tsx
@@ -0,0 +1,32 @@
+import {
+  BtcMap,
+  ContactSection,
+  MerchantDirectoryCTA,
+  MerchantInsightsBanner,
+  MerchantStats,
+} from '@/components/business';
+import { Contribute } from '@/components/home/Contribute';
+import { Hero } from '@/components/ui';
+import { Location, Store } from '@/components/ui/svgs';
+
+export default function Business() {
+  return (
+    <>
+      <Hero title="Business" image={Location} imageClassName="mx-auto w-75 sm:w-90" layout="tight">
+        Madeira’s community leads in local Bitcoin adoption with businesses embracing the global
+        currency
+      </Hero>
+      <MerchantDirectoryCTA />
+      <MerchantInsightsBanner
+        title="About 80% of merchants are holding onto their Sats, using Bitcoin as a store of value, and all merchants maintain full control over their Bitcoin."
+        image={() => (
+          <Store className="sm:absolute sm:right-4 sm:bottom-0 sm:h-[162px] lg:right-12 lg:h-full" />
+        )}
+      />
+      <MerchantStats />
+      <BtcMap />
+      <ContactSection />
+      <Contribute />
+    </>
+  );
+}
diff --git a/frontend/apps/website/src/app/layout.tsx b/frontend/apps/website/src/app/layout.tsx
@@ -22,7 +22,7 @@ export default function RootLayout({
   // useTheme();
 
   return (
-    <html lang="en" className={`${schibstedGrotesk.variable}`}>
+    <html lang="en" className={`${schibstedGrotesk.variable} scroll-smooth`}>
       <body className="flex min-h-dvh flex-col antialiased">
         <Header />
 

diff --git a/frontend/apps/website/src/assets/images/business-contact-section-image.png b/frontend/apps/website/src/assets/images/business-contact-section-image.png
diff --git a/frontend/apps/website/src/assets/images/merchant-directory-cta-image.png b/frontend/apps/website/src/assets/images/merchant-directory-cta-image.png
diff --git a/frontend/apps/website/src/components/business/BtcMap.tsx b/frontend/apps/website/src/components/business/BtcMap.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { useIsMobile } from '@/hooks';
+
+export function BtcMap(): React.ReactElement {
+  const isMobile = useIsMobile();
+
+  const src = isMobile
+    ? 'https://btcmap.org/map#10/32.72043/-16.98716'
+    : 'https://btcmap.org/map#11/32.76389/-16.97388';
+
+  return (
+    <div id="btc-map" className="mt-22 h-[700px] w-full overflow-hidden sm:mt-28">
+      <iframe
+        src={src}
+        className="h-full w-full"
+        loading="lazy"
+        title="BTC Map showing merchants in Madeira"
+      />
+    </div>
+  );
+}
diff --git a/frontend/apps/website/src/components/business/ContactSection.tsx b/frontend/apps/website/src/components/business/ContactSection.tsx
@@ -0,0 +1,31 @@
+import Image from 'next/image';
+import businessContactSectionImage from '@/assets/images/business-contact-section-image.png';
+import { Button, Container, Flex, Heading, Text } from '../ui/atoms';
+
+export function ContactSection(): React.ReactElement {
+  return (
+    <Container className="my-22 sm:mx-22 sm:my-28" size="tight">
+      <Flex stackOnMobile gap={12}>
+        <Flex direction="column" gap={10} className="w-full sm:w-1/2 sm:justify-center">
+          <Heading size="h5">Level up your business</Heading>
+          <Text>
+            Whether you’re looking to explore how AngelList works with other service providers or
+            become a preferred partner for the platform, please fill out the info below.
+          </Text>
+          <Button as="a" href="mailto:info@freemadeira.org">
+            Contact us
+          </Button>
+        </Flex>
+
+        <div className="relative w-fit">
+          <Image
+            src={businessContactSectionImage}
+            alt="Partnership"
+            className="object-cover"
+            sizes="(max-width: 605px) 100vw, 50vw" // TODO: Update this when breakpoints are corrected
+          />
+        </div>
+      </Flex>
+    </Container>
+  );
+}
diff --git a/frontend/apps/website/src/components/business/MerchantDirectoryCTA.tsx b/frontend/apps/website/src/components/business/MerchantDirectoryCTA.tsx
@@ -0,0 +1,36 @@
+import Image from 'next/image';
+import merchantDirectoryCtaImage from '@/assets/images/merchant-directory-cta-image.png';
+import { Container, DiscreetButton, Flex, Heading, Text } from '../ui/atoms';
+
+export function MerchantDirectoryCTA(): React.ReactElement {
+  return (
+    <Container className="mt-22 sm:mx-22 sm:mt-28" size="tight">
+      <Flex stackOnMobile gap={12}>
+        <div className="relative w-fit">
+          <Image
+            src={merchantDirectoryCtaImage}
+            alt="Partnership"
+            className="object-cover"
+            sizes="(max-width: 605px) 100vw, 50vw" // TODO: Update this when breakpoints are corrected
+          />
+        </div>
+
+        <Flex direction="column" gap={4} className="w-full sm:w-1/2 sm:justify-center">
+          <Heading size="h5" className="text-bridal-700">
+            In the past 6 months, we’ve onboarded over 100 businesses to BTC map, placing us among
+            the top 5 communities globally
+          </Heading>
+
+          <Text>
+            Madeira's growing Bitcoin economy is attracting Bitcoiners worldwide, inspiring others
+            to replicate it in their own communities. Merchant feedback has been positive, with more
+            businesses reaching out to adopt Bitcoin as payment. After onboarding, our team remains
+            available to support merchants with any questions on the payment system or Bitcoin.
+          </Text>
+
+          <DiscreetButton href="#btc-map">Check our business directory</DiscreetButton>
+        </Flex>
+      </Flex>
+    </Container>
+  );
+}
diff --git a/frontend/apps/website/src/components/business/MerchantInsightsBanner.tsx b/frontend/apps/website/src/components/business/MerchantInsightsBanner.tsx
@@ -0,0 +1,19 @@
+import { Flex, Heading, type SvgProps } from '../ui/atoms';
+
+interface Props {
+  title: string;
+  image: React.ComponentType<SvgProps>;
+}
+
+export const MerchantInsightsBanner: React.FC<Props> = ({ title, image: Illustration }) => {
+  return (
+    <div className="group relative mx-4 mt-22 flex-1 bg-bridal-700 px-4 pt-8 sm:mt-28 sm:p-7">
+      <Flex stackOnMobile direction="column">
+        <Heading size="h4" className="z-10 w-full pb-8 text-white sm:w-3/4 sm:p-22">
+          {title}
+        </Heading>
+        <Illustration />
+      </Flex>
+    </div>
+  );
+};
diff --git a/frontend/apps/website/src/components/business/MerchantStats.tsx b/frontend/apps/website/src/components/business/MerchantStats.tsx
@@ -0,0 +1,40 @@
+import { Button, Container, Flex, Grid, Heading, Text } from '../ui/atoms';
+
+export function MerchantStats(): React.ReactElement {
+  const stat = (number: number, symbol: string, description: string) => (
+    <Flex direction="column" gap={6}>
+      <Heading size="h1" className="border-b pb-3 text-bridal-700">
+        {number}
+        {symbol}
+      </Heading>
+      <Text>{description}</Text>
+    </Flex>
+  );
+
+  return (
+    <Container className="mt-22 sm:mx-22 sm:mt-28" size="tight">
+      <Flex stackOnMobile justifyContent="between" className="gap-18 sm:gap-0">
+        <Flex direction="column" gap={10} className="w-full sm:w-1/2 sm:justify-center">
+          <Heading size="h5">
+            After the initial onboarding, our team is always available to support you regarding any
+            questions about the payment system or Bitcoin.
+          </Heading>
+
+          <Text>
+            Do you have a business and want to start receiving payments? We’re more than happy to
+            help you with this process.
+          </Text>
+
+          <Button as="a" href="mailto:info@freemadeira.org">
+            Contact us
+          </Button>
+        </Flex>
+        <Grid cols={2} gap={10} className="w-full sm:w-2/5">
+          {stat(122, '+', 'businesses already using Bitcoin')}
+          {stat(15, '%', 'such as clinics and pharmacies')}
+          {stat(38, '%', 'bars and restaurants')}
+        </Grid>
+      </Flex>
+    </Container>
+  );
+}
diff --git a/frontend/apps/website/src/components/business/index.ts b/frontend/apps/website/src/components/business/index.ts
@@ -0,0 +1,5 @@
+export * from './BtcMap';
+export * from './ContactSection';
+export * from './MerchantDirectoryCTA';
+export * from './MerchantInsightsBanner';
+export * from './MerchantStats';
diff --git a/frontend/apps/website/src/components/footer/FooterMenu.tsx b/frontend/apps/website/src/components/footer/FooterMenu.tsx
@@ -10,6 +10,7 @@ export function FooterMenu(): React.ReactElement {
         </Link>
         <Link href="/team-and-advisory-board">Team & Advisory Board</Link>
         <Link href="/partnerships">Partnerships</Link>
+        <Link href="/business">Business</Link>
       </Flex>
 
       {/* <Flex direction="column" /> */}

diff --git a/frontend/apps/website/src/components/ui/atoms/Container.tsx b/frontend/apps/website/src/components/ui/atoms/Container.tsx
@@ -1,10 +1,10 @@
-import { type VariantProps, tv } from 'tailwind-variants';
-import { Flex, type FlexProps } from './Flex';
 import { twMerge } from 'tailwind-merge';
+import { tv, type VariantProps } from 'tailwind-variants';
+import { Flex, type FlexProps } from './Flex';
 
 // TODO: Rethink this component. It should stop expanding beyond the width of a 15" screen
 const containerVariants = tv({
-  base: 'flex mx-auto',
+  base: 'mx-auto flex',
   variants: {
     size: {
       normal: 'max-w-full',