Merge pull request #112 from OperationSpark/110-custom-fundraiser-page

110 custom fundraiser page

.vscode/settings.json

@@ -5,5 +5,8 @@
     "source.organizeImports": "explicit"
   },
   "files.insertFinalNewline": true,
-  "cSpell.words": ["ethnicities", "transformative"]
+  "cSpell.words": ["ethnicities", "noladevs", "transformative"],
+  "[dotenv]": {
+    "editor.defaultFormatter": "foxundermoon.shell-format"
+  }
 }

data/meta.json

@@ -21,5 +21,9 @@
   },
   "highschool": {
     "description": "Sign up to learn more about what high school programs we offer."
+  },
+  "noladevs": {
+    "description": "NolaDevs is teaming up with Operation Spark to host a fundraiser that supports current and future students with tuition and living stipends. Operation Spark provides intensive training in software development to individuals from diverse backgrounds, equipping them with the skills needed to pursue successful careers in the tech industry.",
+    "imageUrl": "/images/noladevs-fundraiser-meta.png"
   }
 }

next.config.js

@@ -8,6 +8,7 @@ const {
   FB_PIXEL_ID,
   HIGHSCHOOL_FORM_ACTIVE = 'false',
   HIGHSCHOOL_FORM_RESPONSES_NAME = '__TAB_NAME_NOT_SET__',
+
 } = process.env;
 
 const isHsFormActive = HIGHSCHOOL_FORM_ACTIVE?.toLowerCase() === 'true';
@@ -75,6 +76,11 @@ module.exports = (phase, { defaultConfig }) => {
           destination: '/programs/workforce/infoSession',
           permanent: true,
         },
+        {
+          source: `/noladevs`,
+          destination: '/getInvolved/noladevs',
+          permanent: false,
+        },
         /**
          * High School Application - `/programs/highschool/apply`
          * - When high school form is available, set env variable 'HIGHSCHOOL_FORM_ACTIVE' to 'true' otherwise 'false'

pages/_app.tsx

@@ -1,15 +1,15 @@
-import { useEffect, useState } from 'react';
-import dynamic from 'next/dynamic';
 import type { AppProps } from 'next/app';
+import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
 
-import { getStaticAsset } from '@this/pages-api/static/[asset]';
-import { IAlert } from '@this/data/types/bits';
 import { MainContainer } from '@this/components/layout';
-import theme from '@this/src/theme';
-import { ILogo, ISupporterFunderLogos } from '../data/types/logos';
-import Meta from '@this/src/components/Elements/Meta';
+import { IAlert } from '@this/data/types/bits';
 import { PixelRoot } from '@this/lib/pixel';
+import { getStaticAsset } from '@this/pages-api/static/[asset]';
+import Meta from '@this/src/components/Elements/Meta';
 import Notifications from '@this/src/components/Notifications';
+import theme from '@this/src/theme';
+import { ILogo, ISupporterFunderLogos } from '../data/types/logos';
 
 const Theme = dynamic(() => import('@this/src/theme/styled/Theme'));
 const Navbar = dynamic(() => import('@this/components/Navbar/Navbar'));

pages/getInvolved/index.tsx

@@ -66,6 +66,11 @@ const GetInvolved: NextPage = () => {
             }
           />
         </Content>
+        <Center className='dynamic-txt'>
+          <Link href='/noladevs' className='anchor dynamic-txt'>
+            NolaDevs/OpSpark Fundraiser
+          </Link>
+        </Center>
         <Content>
           <h2 className='dynamic-h1 primary-secondary text-center'>Give</h2>
           <div className='donation-methods'>

pages/getInvolved/noladevs.tsx

@@ -0,0 +1,133 @@
+import { NextPage } from 'next';
+import styled from 'styled-components';
+
+import { BgImg } from '@this/elements/index';
+import Content from '@this/layout/Content';
+import Main from '@this/layout/Main';
+import ShareOnFacebookButton from '@this/src/components/Elements/ShareButtons/ShareFacebook';
+import ShareOnLinkedinButton from '@this/src/components/Elements/ShareButtons/ShareLinkedin';
+import { Center } from '@this/src/components/layout/Center';
+import { nolaDevsFont } from '@this/src/fonts';
+
+const GetInvolved: NextPage = () => {
+  return (
+    <Main style={{ paddingTop: 0 }}>
+      <GetInvolvedStyles>
+        <BgImg
+          src='/images/display/noladevs-opspark-fundraiser.webp'
+          height='30rem'
+          overlay={{ position: 'center center', blur: 0, opacity: 0 }}
+        />
+
+        <Content>
+          <h2 className='noladevs dynamic-h1 primary-secondary text-center'>
+            <span className={nolaDevsFont.className}>About this fundraiser</span>
+          </h2>
+          <div className='share-buttons'>
+            <ShareOnLinkedinButton
+              url={'https://www.operationspark.org/getInvolved/noladevs'}
+              title={'NOLADevs Fundraiser'}
+              summary={
+                'NOLADevs is teaming up with Operation Spark to host a fundraiser that supports current and future students with tuition and living stipends.'
+              }
+              source={'Operation Spark'}
+            />
+            <ShareOnFacebookButton url={'https://www.operationspark.org/getInvolved/noladevs'} />
+          </div>
+          <div className='about-fundraiser'>
+            <p className='dynamic-txt'>
+              NolaDevs is teaming up with Operation Spark to host a fundraiser that supports current
+              and future students with tuition and living stipends. Operation Spark provides
+              intensive training in software development to individuals from diverse backgrounds,
+              equipping them with the skills needed to pursue successful careers in the tech
+              industry.
+            </p>
+
+            <p className='dynamic-txt'>
+              This fundraiser aims to alleviate financial barriers that students may face while
+              attending our immersive program. By providing tuition assistance and living stipends,
+              Operation Spark ensures that talented individuals who may not have the means to afford
+              the program can still participate and benefit from the transformative learning
+              experience
+            </p>
+          </div>
+
+          <Center>
+            <div className='iframe-wrapper' onClick={(e) => e.stopPropagation()}>
+              <div className='overlay-cover'></div>
+              <iframe
+                src='https://commitchange.com/nonprofits/3745/donate?offsite=t&amp;origin=https://operationspark.org/#!/donate'
+                width='400px'
+                height='500px'
+              ></iframe>
+            </div>
+          </Center>
+        </Content>
+      </GetInvolvedStyles>
+    </Main>
+  );
+};
+
+export default GetInvolved;
+
+const GetInvolvedStyles = styled.div`
+  .share-buttons {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 0;
+  }
+  .noladevs {
+    font-family: var(--font-noladevs);
+  }
+  a.primary-secondary:hover {
+    text-decoration: underline;
+  }
+  .image-header {
+    display: flex;
+    align-items: flex-end;
+    height: 100%;
+  }
+
+  .about-fundraiser {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    gap: 1rem;
+    p {
+      max-width: 600px;
+    }
+  }
+
+  .iframe-wrapper {
+    margin: 1rem;
+    position: relative;
+    border-radius: 0.5rem;
+    width: fit-content;
+
+    .overlay-cover {
+      user-select: none;
+      position: absolute;
+      z-index: 1;
+      top: 1rem;
+      right: 0.25rem;
+      width: 2rem;
+      height: 2rem;
+      /* Hardcoded colors are determined by the background of the inverted commit change form (iframe) */
+      background: ${({ theme }) =>
+        theme.isLightMode ? 'rgba(251, 251, 251, 1.00)' : 'rgba(29, 29, 29, 1.00)'};
+    }
+    iframe {
+      user-select: none;
+      max-width: 100%;
+      filter: ${({ theme }) =>
+        theme.isLightMode
+          ? 'invert(0) hue-rotate(-240deg) drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.5))'
+          : 'invert(0.9) grayscale(100%) drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.8))'};
+    }
+  }
+`;

src/components/Elements/BgImg.tsx

@@ -1,5 +1,5 @@
+import Image from 'next/legacy/image';
 import { ReactNode, useEffect, useRef, useState } from 'react';
-import Image from "next/legacy/image";
 import styled, { DefaultTheme } from 'styled-components';
 
 import rgbDataURL from '@this/src/helpers/rgbDataURL';
@@ -8,6 +8,7 @@ type TImgOverlay = {
   bg?: string;
   opacity?: number;
   blur?: number;
+  position?: 'center center' | 'top center' | 'bottom center';
 };
 
 interface BgImageProps {
@@ -39,7 +40,7 @@ const BgImg = ({ src, height = '40rem', className, children, overlay }: BgImageP
           src={src}
           layout='fill'
           objectFit='cover'
-          objectPosition='top center'
+          objectPosition={overlay?.position ?? 'top center'}
           placeholder='blur'
           blurDataURL={rgbDataURL(134, 0, 241)}
           loading={inView ? 'eager' : 'lazy'}
@@ -91,6 +92,9 @@ const ImgOverlay = styled.div<TImgOverlay>`
   position: absolute;
   width: 100%;
   height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+
   z-index: 0;
   -webkit-user-drag: none;
   @media print {

src/components/Elements/Meta.tsx

@@ -20,14 +20,16 @@ const formatRouteTitle = (str: string) => {
 const Meta = () => {
   const { pathname } = useRouter();
   const route = formatRouteTitle(pathname);
+
   const metaData = meta[route.toLowerCase().replaceAll(' ', '_')] || {};
   const defaultMeta = meta.defaultMeta || {};
+  const allMeta = { ...defaultMeta, ...metaData };
 
-  const hostname = defaultMeta.host ?? 'https://operationspark.org';
-  const description = metaData.description ?? defaultMeta.description;
-  const title = metaData.title ?? `${route ? route + ' | ' : ''}${defaultMeta.title}`;
-  const imageUrl = hostname + (metaData.imageUrl ?? defaultMeta.imageUrl);
-  const favicon = metaData.favicon ?? defaultMeta.favicon ?? '/favicon.ico';
+  const hostname = allMeta.host ?? 'https://operationspark.org';
+  const description = metaData.description ?? allMeta.description;
+  const title = metaData.title ?? `${route ? route + ' | ' : ''}${allMeta.title}`;
+  const imageUrl = hostname + (metaData.imageUrl ?? allMeta.imageUrl);
+  const favicon = metaData.favicon ?? allMeta.favicon ?? '/favicon.ico';
 
   return (
     <Head>

src/components/Elements/ShareButtons/ShareFacebook.tsx

@@ -0,0 +1,39 @@
+import { motion } from 'framer-motion';
+import { FC } from 'react';
+import styled from 'styled-components';
+
+import { FaFacebookSquare, FaShare } from 'react-icons/fa';
+
+// import { , FaTwitter, FaInstagram, FaGithub, FaLinkedin } from 'react-icons/fa';
+
+type ShareOnFacebookButtonProps = {
+  url: string;
+};
+
+const ShareOnFacebookButton: FC<ShareOnFacebookButtonProps> = ({ url }) => {
+  const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
+  return (
+    <ShareOnFacebookStyles href={facebookUrl} target='_blank' title='Share on Facebook'>
+      <FaFacebookSquare size={20} />
+      <span>Share </span>
+      <FaShare size={20} />
+    </ShareOnFacebookStyles>
+  );
+};
+
+const ShareOnFacebookStyles = styled(motion.a)`
+  background: ${({ theme }) => theme.primary[theme.isLightMode ? 700 : 300]};
+  color: ${({ theme }) => theme.bg};
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.25rem;
+  gap: 0.4rem;
+  :hover {
+    background: ${({ theme }) => theme.primary[theme.isLightMode ? 400 : 200]};
+  }
+`;
+
+export default ShareOnFacebookButton;

src/components/Elements/ShareButtons/ShareLinkedin.tsx

@@ -0,0 +1,42 @@
+import { motion } from 'framer-motion';
+import { FC } from 'react';
+import styled from 'styled-components';
+
+import { FaLinkedin, FaShare } from 'react-icons/fa';
+
+// import { FaFacebookSquare, FaTwitter, FaInstagram, FaGithub, FaLinkedin } from 'react-icons/fa';
+
+type ShareOnLinkedinButtonProps = {
+  url: string;
+  title: string;
+  summary: string;
+  source: string;
+};
+
+const ShareOnLinkedinButton: FC<ShareOnLinkedinButtonProps> = ({ url }) => {
+  const linkedinUrl = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(url)}`;
+  return (
+    <ShareOnLinkedinStyles href={linkedinUrl} target='_blank' title='Share on LinkedIn'>
+      <FaLinkedin size={20} />
+      <span>Share </span>
+      <FaShare size={20} />
+    </ShareOnLinkedinStyles>
+  );
+};
+
+const ShareOnLinkedinStyles = styled(motion.a)`
+  background: ${({ theme }) => theme.primary[theme.isLightMode ? 700 : 300]};
+  color: ${({ theme }) => theme.bg};
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.25rem;
+  gap: 0.4rem;
+  :hover {
+    background: ${({ theme }) => theme.primary[theme.isLightMode ? 400 : 200]};
+  }
+`;
+
+export default ShareOnLinkedinButton;

src/fonts.ts

@@ -0,0 +1,7 @@
+import localFont from 'next/font/local';
+
+export const nolaDevsFont = localFont({
+  src: '../public/fonts/Saucer.ttf',
+  variable: '--font-noladevs',
+  weight: 'lighter',
+});