diff --git a/frontend/apps/website/src/app/business/page.tsx b/frontend/apps/website/src/app/business/page.tsx
new file mode 100644
index 0000000..a5370c2
--- /dev/null
+++ 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 (
+ <>
+
+ Madeira’s community leads in local Bitcoin adoption with businesses embracing the global
+ currency
+
+
+ (
+
+ )}
+ />
+
+
+
+
+
+ );
+}
diff --git a/frontend/apps/website/src/app/layout.tsx b/frontend/apps/website/src/app/layout.tsx
index 57a65c7..bef6227 100644
--- 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 (
-
+
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
new file mode 100644
index 0000000..54c1311
Binary files /dev/null and b/frontend/apps/website/src/assets/images/business-contact-section-image.png differ
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
new file mode 100644
index 0000000..3d82173
Binary files /dev/null and b/frontend/apps/website/src/assets/images/merchant-directory-cta-image.png differ
diff --git a/frontend/apps/website/src/components/business/BtcMap.tsx b/frontend/apps/website/src/components/business/BtcMap.tsx
new file mode 100644
index 0000000..cc7f24b
--- /dev/null
+++ 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 (
+
+
+
+ );
+}
diff --git a/frontend/apps/website/src/components/business/ContactSection.tsx b/frontend/apps/website/src/components/business/ContactSection.tsx
new file mode 100644
index 0000000..a3eb5ce
--- /dev/null
+++ 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 (
+
+
+
+ Level up your business
+
+ 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.
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/apps/website/src/components/business/MerchantDirectoryCTA.tsx b/frontend/apps/website/src/components/business/MerchantDirectoryCTA.tsx
new file mode 100644
index 0000000..89085f6
--- /dev/null
+++ 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 (
+
+
+
+
+
+
+
+
+ In the past 6 months, we’ve onboarded over 100 businesses to BTC map, placing us among
+ the top 5 communities globally
+
+
+
+ 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.
+
+
+ Check our business directory
+
+
+
+ );
+}
diff --git a/frontend/apps/website/src/components/business/MerchantInsightsBanner.tsx b/frontend/apps/website/src/components/business/MerchantInsightsBanner.tsx
new file mode 100644
index 0000000..0d62030
--- /dev/null
+++ 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;
+}
+
+export const MerchantInsightsBanner: React.FC = ({ title, image: Illustration }) => {
+ return (
+
+
+
+ {title}
+
+
+
+
+ );
+};
diff --git a/frontend/apps/website/src/components/business/MerchantStats.tsx b/frontend/apps/website/src/components/business/MerchantStats.tsx
new file mode 100644
index 0000000..b1e5d5a
--- /dev/null
+++ 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) => (
+
+
+ {number}
+ {symbol}
+
+ {description}
+
+ );
+
+ return (
+
+
+
+
+ After the initial onboarding, our team is always available to support you regarding any
+ questions about the payment system or Bitcoin.
+
+
+
+ Do you have a business and want to start receiving payments? We’re more than happy to
+ help you with this process.
+
+
+
+
+
+ {stat(122, '+', 'businesses already using Bitcoin')}
+ {stat(15, '%', 'such as clinics and pharmacies')}
+ {stat(38, '%', 'bars and restaurants')}
+
+
+
+ );
+}
diff --git a/frontend/apps/website/src/components/business/index.ts b/frontend/apps/website/src/components/business/index.ts
new file mode 100644
index 0000000..75b9c86
--- /dev/null
+++ 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
index ac09ed4..3aa3ead 100644
--- 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 {
Team & Advisory Board
Partnerships
+ Business
{/* */}
diff --git a/frontend/apps/website/src/components/ui/atoms/Container.tsx b/frontend/apps/website/src/components/ui/atoms/Container.tsx
index d758deb..020797b 100644
--- 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',
diff --git a/frontend/apps/website/src/components/ui/svgs/Location.tsx b/frontend/apps/website/src/components/ui/svgs/Location.tsx
new file mode 100644
index 0000000..641879f
--- /dev/null
+++ b/frontend/apps/website/src/components/ui/svgs/Location.tsx
@@ -0,0 +1,278 @@
+'use client';
+
+import { useDarkMode } from '@/hooks';
+
+type Props = {
+ className?: string;
+};
+
+export function Location({ className }: Props): React.ReactElement {
+ const darkMode = useDarkMode();
+
+ if (darkMode) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+}
diff --git a/frontend/apps/website/src/components/ui/svgs/Store.tsx b/frontend/apps/website/src/components/ui/svgs/Store.tsx
new file mode 100644
index 0000000..c094384
--- /dev/null
+++ b/frontend/apps/website/src/components/ui/svgs/Store.tsx
@@ -0,0 +1,76 @@
+import { Svg } from '../atoms';
+
+type Props = {
+ className?: string;
+};
+
+export const Store: React.FC = ({ className }) => {
+ return (
+
+ );
+};
diff --git a/frontend/apps/website/src/components/ui/svgs/index.ts b/frontend/apps/website/src/components/ui/svgs/index.ts
index 6e447d9..7aa7f1a 100644
--- a/frontend/apps/website/src/components/ui/svgs/index.ts
+++ b/frontend/apps/website/src/components/ui/svgs/index.ts
@@ -5,6 +5,7 @@ export * from './FemaleAvatar';
export * from './FingerTouch';
export * from './HandCoin';
export * from './HighFive';
+export * from './Location';
export * from './LogoHorizontal';
export * from './MaleAvatar';
export * from './NamasteB';
@@ -12,4 +13,5 @@ export * from './Newspaper';
export * from './OrangeFile';
export * from './Planet';
export * from './PortalHands';
+export * from './Store';
export * from './X';
diff --git a/frontend/apps/website/src/data/header.ts b/frontend/apps/website/src/data/header.ts
index 9bbbdc8..236d560 100644
--- a/frontend/apps/website/src/data/header.ts
+++ b/frontend/apps/website/src/data/header.ts
@@ -28,10 +28,10 @@ export const menuItems: HeaderMenuItem[] = [
name: 'Team & Advisory Board',
href: '/team-and-advisory-board',
},
- // {
- // name: 'Business',
- // href: '#',
- // },
+ {
+ name: 'Business',
+ href: '/business',
+ },
{
name: 'Partnerships',
href: '/partnerships',
diff --git a/frontend/apps/website/src/hooks/index.ts b/frontend/apps/website/src/hooks/index.ts
index a8cdd4e..378f750 100644
--- a/frontend/apps/website/src/hooks/index.ts
+++ b/frontend/apps/website/src/hooks/index.ts
@@ -1 +1,2 @@
export * from './useDarkMode';
+export * from './useIsMobile';
diff --git a/frontend/apps/website/src/hooks/useIsMobile.ts b/frontend/apps/website/src/hooks/useIsMobile.ts
new file mode 100644
index 0000000..a5aa2f3
--- /dev/null
+++ b/frontend/apps/website/src/hooks/useIsMobile.ts
@@ -0,0 +1,20 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useIsMobile(breakpoint = 640) {
+ const [isMobile, setIsMobile] = useState(false);
+
+ useEffect(() => {
+ const media = window.matchMedia(`(max-width: ${breakpoint}px)`);
+
+ const update = () => setIsMobile(media.matches);
+
+ update();
+ media.addEventListener('change', update);
+
+ return () => media.removeEventListener('change', update);
+ }, [breakpoint]);
+
+ return isMobile;
+}