Madeira page

frontend/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+*.tsbuildinfo
+.output/
+
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Misc
+.DS_Store
+*.pem

frontend/apps/website/src/app/about/page.tsx

@@ -7,7 +7,7 @@ import { NamasteB, Planet } from '@/components/ui/svgs';
 export default function About() {
   return (
     <>
-      <Hero title="A quest for freedom" buttonText="Join us" buttonHref="#" image={Planet}>
+      <Hero title="A quest for freedom" image={Planet}>
         FREE Madeira, founded in 2022, is a non-profit organisation dedicated to empowering
         individuals and businesses to take control of their financial future through education and
         Bitcoin adoption in Portugal, particularly in Madeira.

frontend/apps/website/src/app/madeira/page.tsx

@@ -0,0 +1,27 @@
+import { Contribute, Merchants } from "@/components/home";
+import { EmbracingBitcoin, MadeiraCarousel } from "@/components/madeira";
+import { Hero } from "@/components/ui";
+import { Madeira } from "@/components/ui/svgs";
+
+export default function About() {
+	return (
+		<>
+			<Hero
+				title="Madeira"
+				buttonText="Visit Madeira"
+				buttonHref="https://visitmadeira.com/en"
+				image={Madeira}
+			>
+				With a prime location, the Madeira Archipelago is situated in the
+				Atlantic Ocean, 1,000 kmaway from continental Europe and 700 km from
+				Morocco.
+			</Hero>
+			<MadeiraCarousel />
+			<EmbracingBitcoin />
+			<div className="my-22 sm:my-28">
+				<Merchants />
+			</div>
+			<Contribute />
+		</>
+	);
+}

frontend/apps/website/src/app/page.tsx

@@ -6,12 +6,7 @@ import { PortalHands } from '@/components/ui/svgs';
 export default function Home() {
   return (
     <>
-      <Hero
-        title="A Bitcoin community in the Atlantic"
-        buttonText="Join us"
-        buttonHref="#"
-        image={PortalHands}
-      >
+      <Hero title="A Bitcoin community in the Atlantic" image={PortalHands}>
         FREE Madeira is a non-profit organisation focused on education, community building, and
         supporting Bitcoin adoption during the transition to a new monetary paradigm.
       </Hero>

frontend/apps/website/src/assets/images/madeira-carousel/index.ts

@@ -0,0 +1,13 @@
+import type { StaticImageData } from 'next/image';
+
+import MadeiraMountainSea from './madeira-mountain-sea.jpg';
+import MadeiraMountainVillage from './madeira-mountain-village.jpg';
+import MadeiraRoad from './madeira-road.jpg';
+import MadeiraViewpoint from './madeira-viewpoint.jpg';
+
+export const pictures: Record<string, StaticImageData> = {
+  MadeiraMountainSea,
+  MadeiraRoad,
+  MadeiraViewpoint,
+  MadeiraMountainVillage,
+};

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="/madeira">Madeira</Link>
       </Flex>
 
       {/* <Flex direction="column" /> */}

frontend/apps/website/src/components/madeira/EmbracingBitcoin.tsx

@@ -0,0 +1,26 @@
+import { Container, Flex, Heading, Text } from "../ui/atoms";
+import { BitcoinCoin } from "../ui/svgs";
+
+export function EmbracingBitcoin(): React.ReactElement {
+	return (
+		<Container className="mt-22 sm:mt-28" size="tighter">
+			<Flex stackOnMobile gap={12} justifyContent="center" alignItems="center">
+				<Flex direction="column" gap={4} className="w-full sm:w-1/2">
+					<Heading size="h5">
+						On top of that, Madeira Island is embracing Bitcoin.
+					</Heading>
+
+					<Text size="lg">
+						Besides its strategic position and its governmental support for
+						technology companies and Bitcoin adoption, Madeira has a like-minded
+						Bitcoin Community. With more than 100 businesses accepting Bitcoin
+						and regular meetups, the island has become a Bitcoin world
+						reference.
+					</Text>
+				</Flex>
+
+				<BitcoinCoin className="w-2/3 sm:w-1/3" />
+			</Flex>
+		</Container>
+	);
+}

frontend/apps/website/src/components/madeira/MadeiraCarousel.tsx

@@ -0,0 +1,35 @@
+import { pictures } from '@/assets/images/madeira-carousel';
+import { Carousel, CarouselContent, CarouselControls } from '../ui';
+import { MadeiraCarouselItem } from './MadeiraCarouselItem';
+
+export const MadeiraCarousel: React.FC = () => {
+  return (
+    <Carousel title="Madeira">
+      <CarouselContent>
+        <MadeiraCarouselItem title="Discover Madeira" backgroundImage={pictures.MadeiraMountainSea}>
+          Natural settings, crystal-clear waters, centuries-old traditions,genuine flavours and a
+          warm welcome. Come and experience a unique archipelago where the calendar does not dictate
+          the season.
+        </MadeiraCarouselItem>
+        <MadeiraCarouselItem
+          title="Hidden Villages in the Mountains"
+          backgroundImage={pictures.MadeiraMountainVillage}
+        >
+          Nestled between lush valleys and misty peaks, Madeira’s hillside villages blend tradition,
+          nature, and quiet charm. Discover a slower rhythm of life shaped by the island’s dramatic
+          terrain.
+        </MadeiraCarouselItem>
+        <MadeiraCarouselItem title="Scenic Coastal Drives" backgroundImage={pictures.MadeiraRoad}>
+          Winding roads hug the cliffs, revealing breathtaking views of the Atlantic at every turn.
+          In Madeira, the journey is just as unforgettable as the destination.
+        </MadeiraCarouselItem>
+        <MadeiraCarouselItem title="Above the Clouds" backgroundImage={pictures.MadeiraViewpoint}>
+          Step into a world above the clouds, where rugged peaks and endless horizons create moments
+          of pure awe. Madeira’s viewpoints offer perspectives you won’t forget.
+        </MadeiraCarouselItem>
+      </CarouselContent>
+
+      <CarouselControls />
+    </Carousel>
+  );
+};

frontend/apps/website/src/components/madeira/MadeiraCarouselItem.tsx

@@ -0,0 +1,51 @@
+import Image, { type StaticImageData } from 'next/image';
+import { twJoin } from 'tailwind-merge';
+import { CarouselItem } from '../ui';
+import { Container, Flex, Heading } from '../ui/atoms';
+
+type Props = {
+  title: string;
+  backgroundImage: string | StaticImageData;
+  children: string;
+};
+
+export function MadeiraCarouselItem({ title, backgroundImage, children }: Props) {
+  return (
+    <CarouselItem>
+      <div className="relative h-screen w-full select-none pt-14 pb-10 text-white sm:mt-10 sm:pt-16 sm:pb-14">
+        <Image
+          src={backgroundImage}
+          alt={title}
+          fill
+          className="-z-10 object-cover"
+          sizes="100vw"
+        />
+
+        {/* Dark overlay */}
+        <div
+          className={twJoin(
+            '-z-10 absolute inset-0 bg-black/60 md:bg-transparent',
+            'md:bg-gradient-to-r md:from-black/60 md:via-black/50 md:to-black/20',
+            'dark:bg-black/70 dark:bg-none',
+          )}
+        />
+
+        <Container
+          direction="column"
+          gap={8}
+          className="relative z-10 h-full"
+          wrapperClasses="h-full"
+        >
+          <Flex
+            direction="column"
+            gap={6}
+            className="w-full grow md:w-4/5 lg:w-3/5"
+            justifyContent="center"
+          >
+            <Heading size="h4">{children}</Heading>
+          </Flex>
+        </Container>
+      </div>
+    </CarouselItem>
+  );
+}

frontend/apps/website/src/components/madeira/index.ts

@@ -0,0 +1,2 @@
+export * from "./EmbracingBitcoin";
+export * from "./MadeiraCarousel";

frontend/apps/website/src/components/ui/Hero.tsx

@@ -1,6 +1,6 @@
 import { twMerge } from 'tailwind-merge';
 import { tv, type VariantProps } from 'tailwind-variants';
-import { Container, Flex, Heading } from '@/components/ui/atoms';
+import { Button, Container, Flex, Heading, Link } from '@/components/ui/atoms';
 import type { Url } from '@/utils/types';
 
 const heroVariants = tv({
@@ -53,7 +53,11 @@ export const Hero: React.FC<HeroProps> = ({
           <Heading size="h6">{children}</Heading>
         </Flex>
 
-        {/* TODO: Add button */}
+        {buttonText && buttonHref && (
+          <Button as={Link} href={buttonHref}>
+            {buttonText}
+          </Button>
+        )}
       </Flex>
 
       <Illustration className={twMerge(image(), imageClassName)} />

frontend/apps/website/src/components/ui/atoms/CtaLink.tsx

@@ -1,8 +1,9 @@
 import { twMerge } from 'tailwind-merge';
+import type { Url } from '@/utils/types';
 import { Link } from './Link';
 
 interface CtaLinkProps {
-  href: string;
+  href: Url;
   underline?: boolean;
   className?: string;
   children: React.ReactNode;