From fce95240e31f732e706d8b288b525a4b0d2fb00c Mon Sep 17 00:00:00 2001
From: nlebovits <nissim.lebovits@vanderbilt.edu>
Date: Thu, 17 Oct 2024 21:35:18 -0400
Subject: [PATCH 1/2] skip precommit

---
 src/app/(content-pages)/donate/DonatePage.tsx | 44 +++++++++++++++++++
 src/app/(content-pages)/donate/layout.tsx     | 16 +++++++
 src/app/(content-pages)/donate/page.tsx       | 15 +++++++
 src/components/Header.tsx                     |  7 ++-
 4 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(content-pages)/donate/DonatePage.tsx
 create mode 100644 src/app/(content-pages)/donate/layout.tsx
 create mode 100644 src/app/(content-pages)/donate/page.tsx

diff --git a/src/app/(content-pages)/donate/DonatePage.tsx b/src/app/(content-pages)/donate/DonatePage.tsx
new file mode 100644
index 00000000..0527c574
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/(content-pages)/donate/layout.tsx b/src/app/(content-pages)/donate/layout.tsx
new file mode 100644
index 00000000..a13ddbed
--- /dev/null
+++ b/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;
diff --git a/src/app/(content-pages)/donate/page.tsx b/src/app/(content-pages)/donate/page.tsx
new file mode 100644
index 00000000..1f7750cf
--- /dev/null
+++ b/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;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 1b42dac7..3b336c07 100644
--- a/src/components/Header.tsx
+++ b/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>

From 5db39fbd6180182205c704cd5e1f91c60c63a55d Mon Sep 17 00:00:00 2001
From: nlebovits <nissim.lebovits@vanderbilt.edu>
Date: Thu, 17 Oct 2024 22:06:38 -0400
Subject: [PATCH 2/2] add donate to mobile header

---
 src/components/MobileNav.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
index 293c5c90..122fe205 100644
--- a/src/components/MobileNav.tsx
+++ b/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>
   );