add donation link

s-kennedy · Jul 17, 2024 · 58924a7 · 58924a7
1 parent cbbed9c
commit 58924a7
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 40 deletions.
diff --git a/components/Footer.js b/components/Footer.js
@@ -7,42 +7,38 @@ const Footer = () => {
 
       <footer className={`w-full relative bg-slate-100 py-6`}>
         <div className="p-5 mx-auto">
-          <div className="md:grid grid-cols-3 md:gap-6">
+          <div className="md:grid grid-cols-2 md:gap-24">
             <div className="mb-4 basis-1/2">
-              <p className="font-body font-medium text-xl md:text-lg ">Support us</p>
+              <p className="font-body font-medium text-xl md:text-lg ">About Connected KW</p>
               <p className="">Connected KW is a volunteer-run project with the goal of creating an inclusive and comprehensive resource for families in Waterloo Region.</p>
-              {/*<p className="">You can help us to grow by supporting us on <a href="https://patreon.com/connectedkw?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink" className="hover:text-red">Patreon</a>.</p>*/}
-              <p className="">If your organization might be interested in a partnership or sponsorship please <a href="mailto:[email protected]" className="hover:text-red">reach out!</a></p>
+              <p className="">If your organization might be interested in a partnership please <a href="mailto:[email protected]" className="hover:text-red">reach out!</a></p>
+              <a
+                href="https://instagram.com/connectedkw"
+                rel="noopener noreferrer"
+                className="my-6 block"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="30" width="30" fill="currentColor">
+                  <path
+                    d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+                  />
+                </svg>
+              </a>
             </div>
 
-            <div className="mb-4 basis-1/2">
+            <div className="basis-1/2">
               <p className="font-body font-medium text-xl md:text-lg ">Get involved</p>
-              <p className="">Whether you want to add an event, write a blog post, or create an interactive map, we appreciate your contribution! <a href="https://cms.connectedkw.com/admin/register">Create an account</a> or email Shay at <a href="mailto:[email protected]" className="hover:text-red">[email protected]</a> for more information.</p>
-            </div>
-
-            <div className="mb-4 basis-1/2">
-              <p className="font-body font-medium text-xl md:text-lg ">Give feedback</p>
-              <p className="">Connected KW is a work in progress! If you have any feedback or suggestions you can contact Shay at <a href="mailto:[email protected]" className="hover:text-red">[email protected]</a>.</p>
-              <p> If you find a bug, please <a href="https://github.com/s-kennedy/connectedkw/issues" className="hover:text-red" target="_blank" rel="noreferrer">submit an issue</a>.</p>
+              <p className=""><a href="https://cms.connectedkw.com/admin/" target="_blank" rel="noreferrer">Submit an event</a></p>
+              <p className=""><a href="https://github.com/s-kennedy/connectedkw/issues" target="_blank" rel="noreferrer">Report a bug</a></p>
+              <p className=""><a href="https://buy.stripe.com/cN24hE161goQcZa8wx" target="_blank" rel="noreferrer">Make a donation</a></p>
+              <p className=""><a href="mailto:[email protected]" target="_blank" rel="noreferrer">Contact [email protected]</a></p>
+              <p className="my-6">
+                <a href="https://www.dreamsidedigital.com" className="hover:text-red order-1 sm:order-2 mb-4">
+                  Made by Dreamside Digital
+                </a>
+              </p>
             </div>
           </div>
 
-
-          <div className="flex justify-between">
-            <a
-              href="https://instagram.com/connectedkw"
-              rel="noopener noreferrer"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="30" width="30" fill="currentColor">
-                <path
-                  d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
-                />
-              </svg>
-            </a>
-            <a href="https://www.dreamsidedigital.com" className="hover:text-red">
-              Made by Dreamside Digital
-            </a>
-          </div>
         </div>
       </footer>
   )

diff --git a/components/Layout.js b/components/Layout.js
@@ -95,20 +95,21 @@ const Layout = ({
             <nav>
               <Link href="/events" className={`pb-1 text-black no-underline font-medium ${router.pathname.startsWith(`/events`) ? 'border-b-2 border-red' : ''}`}>
                 <span>{`Events`}</span>
-                <i className={`ml-1 fa-solid fa-calendar-day hidden sm:block`}></i>
+                <i className={`ml-1 fa-solid fa-calendar-day hidden sm:inline`}></i>
               </Link>
             </nav>
             <nav>
               <Link href="/articles" className={`pb-1 text-black no-underline font-medium ${router.pathname.startsWith(`/articles`) ? 'border-b-2 border-red' : ''}`}>
                 <span>{`Local info`}</span>
-                <i className={`ml-1 fa-solid fa-circle-info hidden sm:block`}></i>
+                <i className={`ml-1 fa-solid fa-circle-info hidden sm:inline`}></i>
               </Link>
             </nav>
             <nav>
-              <a href="https://cms.connectedkw.com/admin/" target="_blank" className="text-black no-underline font-medium" rel="noreferrer">
-                Account                
-                <i className={`ml-1 fa-solid fa-circle-user hidden sm:block`}></i>
-              </a></nav>
+              <a href="https://buy.stripe.com/cN24hE161goQcZa8wx" target="_blank" className="text-black no-underline font-medium" rel="noreferrer">
+                Support us                
+                <i className={`ml-1 fa-solid fa-circle-dollar-to-slot hidden sm:inline`}></i>
+              </a>
+            </nav>
           </div>
         </div>
       </header>

diff --git a/pages/events/index.js b/pages/events/index.js
@@ -78,8 +78,12 @@ export default function Events({ events=[], categories=[], tags=[], dataSources=
                 <p className="text-lg">{`You can add events to your calendar, subscribe to get them all, or bookmark this page so you'll always know what there is to do!`}</p>
                 <Link href="/events/calendar.ics" className="btn my-6">
                   <i className={`mr-2 fa-solid fa-calendar-day`}></i>
-                  Subscribe to the calendar (ICS)
+                  Get the calendar (ICS)
                 </Link>
+                <a href="https://cms.connectedkw.com/admin/" target="_blank" className="btn btn-yellow ml-2" rel="noreferrer">
+                  <i className={`mr-2 fa-solid fa-circle-user hidden sm:inline`}></i>
+                  Submit an event                
+                </a>
               </div>
             </div>
             <div className="hidden lg:flex max-h-[75vh] justify-center items-center relative p-12">

diff --git a/styles/globals.css b/styles/globals.css
@@ -225,23 +225,23 @@ article ul {
 
 @layer components {
   .btn {
-    @apply shadow text-black no-underline px-4 py-2 bg-red text-white inline-flex flex-nowrap items-center hover:bg-yellow hover:text-black hover:no-underline focus:no-underline transition-all duration-200;
+    @apply shadow text-black no-underline px-4 py-2 bg-red text-white inline-flex flex-nowrap items-center hover:bg-black hover:text-white hover:no-underline focus:no-underline transition-all duration-200;
   }
 
   .btn-red {
-    @apply bg-red hover:bg-yellow hover:text-black;
+    @apply bg-red;
   }
 
   .btn-yellow {
-    @apply bg-yellow text-black hover:bg-orange hover:text-black;
+    @apply bg-yellow text-black;
   }
 
   .btn-green {
-    @apply bg-green hover:bg-blue hover:text-black;
+    @apply bg-green;
   }
 
   .btn-blue {
-    @apply bg-blue hover:purple hover:text-black;
+    @apply bg-blue;
   }
 
   .btn-purple {