feature request 948: set up donation page

src/app/(content-pages)/donate/DonatePage.tsx

@@ -0,0 +1,44 @@
+import { ThemeButtonLink } from '@/components/ThemeButton';
+import { ArrowUpRight } from '@phosphor-icons/react';
+import Image from 'next/image';
+import imageTransformProperty from '@/images/transform-a-property.png';
+
+export default function SupportPage() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
+      <div>
+        <h1 className="heading-3xl font-bold mb-6">
+          Support Clean & Green Philly
+        </h1>
+        <p>
+          Help us catalyze transformative investment in Philadelphia&#39;s
+          vacant properties. Your donation supports us in promoting data-driven
+          efforts to improve quality of life across Philadelphia through
+          strategic, place-based interventions.
+        </p>
+        <p className="mt-4">Thank you for supporting Clean & Green Philly!</p>
+        <ThemeButtonLink
+          className="text-white inline-flex mt-4"
+          href="https://fnd.us/clean-and-green-philly/pay"
+          target="_blank"
+          rel="noopener noreferrer"
+          color="primary"
+          label="Donate Now"
+          endContent={<ArrowUpRight aria-hidden="true" />}
+          aria-label="Open donation page in a new tab"
+        />
+      </div>
+      <div className="flex justify-center items-center">
+        <div className="relative w-7/12 pb-[105%]">
+          <Image
+            src={imageTransformProperty}
+            alt="Transform a property in Philadelphia"
+            className="object-cover object-center rounded-lg"
+            fill
+            sizes="(max-width: 768px) 58vw, 29vw"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(content-pages)/donate/layout.tsx

@@ -0,0 +1,16 @@
+import { generateMetadata } from '@/utilities/generateMetaData';
+
+const title = 'Donate';
+const description = 'Donate to support Clean & Green Philly';
+const url = '/donate';
+
+export const metadata = generateMetadata({
+  title,
+  description,
+  url,
+});
+
+const DonateLayout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+export default DonateLayout;

src/app/(content-pages)/donate/page.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { NextUIProvider } from '@nextui-org/react';
+import { FC } from 'react';
+import DonatePage from './DonatePage';
+
+const Donate: FC = () => {
+  return (
+    <NextUIProvider>
+      <DonatePage />
+    </NextUIProvider>
+  );
+};
+
+export default Donate;

src/components/Header.tsx

@@ -1,5 +1,5 @@
 import { Navbar, NavbarBrand, NavbarContent } from '@nextui-org/react';
-import { PiBinoculars, PiKey, PiTree, PiInfo } from 'react-icons/pi';
+import { PiBinoculars, PiKey, PiTree, PiInfo, PiHeart } from 'react-icons/pi';
 import Image from 'next/image';
 import Link from 'next/link';
 import IconLink from './IconLink';
@@ -65,6 +65,11 @@ const Header = () => (
             text="About"
             href="/about"
           />
+          <IconLink
+            icon={<PiHeart className="h-6 w-6" />}
+            text="Donate"
+            href="/donate"
+          />
         </ul>
       </NavbarContent>
     </Navbar>

src/components/MobileNav.tsx

@@ -8,7 +8,14 @@ import {
   NavbarMenu,
   NavbarMenuToggle,
 } from '@nextui-org/react';
-import { PiBinoculars, PiKey, PiTree, PiInfo, PiList } from 'react-icons/pi';
+import {
+  PiBinoculars,
+  PiKey,
+  PiTree,
+  PiInfo,
+  PiList,
+  PiHeart,
+} from 'react-icons/pi';
 import Image from 'next/image';
 import React, { FC } from 'react';
 import IconLink from './IconLink';
@@ -74,6 +81,11 @@ const MobileNav: FC = () => {
           text="About"
           href="/about"
         />
+        <IconLink
+          icon={<PiHeart className="h-6 w-6" />}
+          text="Donate"
+          href="/donate"
+        />
       </NavbarMenu>
     </Navbar>
   );