Roundup

src/app/about/page.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image';
 import { FaQuoteLeft } from "react-icons/fa6";
 import { AboutTimeline } from "./AboutTimeline";
 import { SectionContainer } from "@/components/SectionContainer";
-import PartnerSection from './PartnerSection';
+import PartnerSection from '@/components/PartnerSection';
 import { generateAboutMetadata } from "@/lib/seo";
 import TrackRecord from "./TrackRecord";
 

src/app/partner-with-us/page.tsx

@@ -1,28 +1,16 @@
 import { Hero } from "@/components/Hero";
-import TilePanel from '@/components/TilePanel';
 import { Button } from '@/components/Button'
 import Title from '@/components/Title'
 import Image from "next/image";
-import { supabase } from '@/lib/supabaseClient';
-import debugimg from "@/../public/images/debugimg.png"
 import { FaCircleCheck } from "react-icons/fa6";
+import partnership from "@/../public/images/Partnership image.png"
 import { generatePartnerMetadata } from '@/lib/seo';
-import { FaGlobe } from 'react-icons/fa';
+import PartnerSection from '@/components/PartnerSection';
 
 export const metadata = generatePartnerMetadata();
 
-console.log(debugimg)
-
-type Partner = {
-  name: string;
-  description?: string;
-  logo_url: string;
-  website?: string;
-};
-
 //Dummy data; todo: pull from actual database or hardcode it in
 
-// const partners = Array(6).fill({ name: "Partner X", desc: "Lorem Ipsum", logo: debugimg });
 const reasons = [
   "Open Innovation",
   "Lasting Impact",
@@ -31,65 +19,25 @@ const reasons = [
 ];
 
 export default async function PartnerWithUsPage() {
-  const { data, error } = await supabase
-    .from('partners')
-    .select('*');
-
-  if (error) {
-    return <p className="text-center text-red-500 py-4">Error: {error.message}</p>;
-  }
-
-  const partners: Partner[] = data ?? [];
-
-  const partnerTiles = partners.map((partner: Partner) => ({
-    name: partner.name,
-    desc: partner.description || '',
-    icon: partner.logo_url
-      ? (
-        <div className="flex items-center justify-center w-16 h-16">
-          <Image
-            src={partner.logo_url}
-            alt={partner.name}
-            width={64}
-            height={64}
-            className="max-w-16 max-h-16 object-contain"
-            unoptimized
-            style={{
-              objectFit: 'contain',
-              objectPosition: 'left'
-            }}
-          />
-        </div>
-      )
-      : <FaGlobe className="bg-color-03 rounded w-16 h-16 text-color-01 mt-1 p-4" />,
-    url: partner.website
-  }));
-
   return (
     <>
       <Hero title="Partner With Us" subtitle="Tech4R offers a platform to innovate at the intersection of technology and humanitarian aid. Join us to scale impact." />
-      <section className="flex-1 my-8">
+      <section className="flex-1 my-28">
         <div className="container flex mx-auto flex-col lg:flex-row px-4 md:px-8 lg:px-16 xl:px-20">
-          <Image
-            src="/images/partnership.jpg"
-            alt="Tech4R Partnership"
-            width={981}
-            height={550}
-            className="flex-1 rounded-2xl mx-auto"
-          />
+          <Image src={partnership} alt="ALT TEXT" height={550} className="flex-1 rounded-2xl mx-auto object-cover" />
           <div className="container mx-auto flex-1 p-12 m-6">
             <Title className="text-left">Why Partner with Tech4R?</Title>
+            <p className="text-neutral-03 p-4 mb-4">Tech4R is built on collaboration. Together with our partners, we bring diverse expertise and resources to support technology-driven disaster response and resilience. <b>UN Volunteers (UNV)</b> is our main partner, helping us connect skilled volunteers worldwide with meaningful opportunities to contribute to open-source digital solutions. Alongside UNV, we work with <b>Bridge to Türkiye Fund</b>, <b>ATÖLYE</b>, <b>EKA Creative Studio</b>, <b>LJUS</b>, and <b>HP LIFE</b>—each adding unique value, from mobilizing communities and advancing education to fostering innovation and entrepreneurship. As Tech4R grows, we are continuously expanding our partnerships to strengthen our global network and maximize impact.</p>
             <ul className="grid gap-4 grid-cols-2 place-items-center place-content-center text-neutral-03 p-4 mb-4">
               {reasons.map(e => (<li key={e} className="inline w-full"><FaCircleCheck className="text-color-01 inline align-sub mr-4" />{e}</li>))}
             </ul>
             <Button className="m-auto flex-none" href="/contact">Email us<span className="hidden md:inline">&nbsp;for Partnership Inquiries</span></Button>
           </div>
-
-        </div>
-        <div className="container mx-auto p-4 m-6 bg-neutral-01 rounded-3xl">
-          <TilePanel title="Host Organizations & Partners" tiles={partnerTiles} />
         </div>
       </section>
+      <section className="px-6 my-6 mx-auto overflow-hidden">
+        <PartnerSection />
+      </section>
     </>
   );
 }

src/app/volunteers/CarouselAssignments.tsx

@@ -12,12 +12,14 @@ async function AssignmentsCarousel() {
   }/**/
   return (
     <Carousel pages={1 + Math.floor((assignments.length - 1) / 6)} size={6} className="grid gap-4 grid-cols-1 md:grid-cols-3 place-items-center place-content-center">
-      {assignments.map((e, i) => (
-        <CI key={e.title} className="rounded-2xl bg-color-02 text-neutral-02 w-full p-4 m-3 contain-content">
-          <h5 className='text-white text-2xl font-bold'>{e.title}{i}</h5>
+      {assignments.map((e) => (
+        <CI key={e.title} className="rounded-2xl bg-color-02 text-neutral-02 w-full h-full p-4 m-3 grid contain-content">
+          <h5 className='text-white text-2xl font-bold'>{e.title}</h5>
           <p>{e.description}</p>
-          {/*Unused code from Figma:*/} <p>{e.id}</p> 
+          <div className='bottom-0 self-end'>
+          <p className='mt-4'>{e.id}</p> 
           <Button className="mt-4 flex-none" variant='white' href={e.apply_url}>Apply<span className="hidden md:inline">&nbsp;Now</span></Button>
+          </div>
         </CI>
       ))}
     </Carousel>

src/app/volunteers/CarouselTestimony.tsx

@@ -6,20 +6,20 @@ import { FaQuoteLeft } from "react-icons/fa6";
 //dummy data for testing purposes:
 //const testimony = Array(8).fill({ title: "Testimony", quote: "Lorem Ipsum etc etc etc.", name: "Person Person", vtitle: "Title", vsrc: "/images/debugimg.png" });
 async function TestimonyCarousel() {
-  const { data: testimony, error } = await supabase.from('testimonials').select('name, quote');
+  const { data: testimony, error } = await supabase.from('testimonials').select('name, quote, url');
   if (error) {
       console.error(error)
       return (<p>Failed to load</p>);
   }/**/
   return (
     <Carousel pages={1 + Math.floor((testimony.length - 1) / 6)} size={6} className="grid gap-4 grid-cols-1 md:grid-cols-3 place-items-center place-content-center">
       {testimony.map((e) => (
-        <CI key={e.name} className="rounded-2xl w-full p-4 m-3 contain-content bg-neutral-01">
-          <FaQuoteLeft className="text-color-01 text-5xl" />
+        <CI key={e.name} className="rounded-2xl w-full p-4 m-3 contain-content bg-neutral-01 h-full grid justify-items-start">
+          <FaQuoteLeft className="place-self-start text-color-01 text-5xl" />
           {/*Unused code from Figma design <h5 className='text-2xl font-bold'>{e.title}{i}</h5>*/}
-          <p className='text-neutral-03'>{e.quote}</p>
-          <div className="flex mt-4">
-            {/*Unused code from Figma design <Image alt={e.vname} src={e.vsrc} width={302} height={335} className='mr-4 h-12 w-12 rounded-full' />*/}
+          <p className="self-start text-neutral-03">{e.quote}</p>
+          <div className="flex mt-4 self-end bottom-0">
+            <img alt={e.name} src={`/images/volunteers/${e.url}`} width={302} height={335} className='mr-4 h-12 w-12 rounded-full' />
             <div>
               <h6 className='text-lg font-semibold leading-relaxed text-neutral-04'>{e.name}</h6>
               {/*Unused code from Figma design <p className='text-neutral-02 text-xs'>{e.vtitle}</p>*/}

src/app/volunteers/page.tsx

@@ -4,61 +4,22 @@ import Title from '@/components/Title'
 import VolunteerCarousel from './CarouselVolunteer'
 import TestimonyCarousel from './CarouselTestimony'
 import AssignmentsCarousel from './CarouselAssignments'
-import { FaScrewdriverWrench, FaListOl } from "react-icons/fa6";
+import { FaScrewdriverWrench, FaListOl, FaRegHandPointRight, FaClock, FaLanguage, FaHandshake } from "react-icons/fa6";
 import { generateVolunteersMetadata } from '@/lib/seo';
 
 export const metadata = generateVolunteersMetadata();
-// · Go to app.unv.org
 
-// · Create a free account or log in if you already have one.
-
-// · Fill in your profile details (skills, education, experience) – this helps us match you with assignments.
-//filling arrays with dummy data to test appearance
 const skills = [
-  { name: "Skill Name", desc: "Lorem Ipsum etc. 2 lines each", ico: FaScrewdriverWrench },
-  { name: "Skill Name", desc: "Lorem Ipsum etc. 2 lines each", ico: FaScrewdriverWrench },
-  { name: "Skill Name", desc: "Lorem Ipsum etc. 2 lines each", ico: FaScrewdriverWrench },
-  { name: "Skill Name", desc: "Lorem Ipsum etc. 2 lines each", ico: FaScrewdriverWrench },
-  { name: "Skill Name", desc: "Lorem Ipsum etc. 2 lines each", ico: FaScrewdriverWrench },
-  { name: "Skill Name", desc: "Lorem Ipsum etc. 2 lines each", ico: FaScrewdriverWrench }
-];
-const steps = [
-  {
-    name: "Sign up / Log in",
-    desc: [
-      "Go to app.unv.org",
-      "Create a free account or log in if you already have one.",
-      "Fill in your profile details (skills, education, experience) – this helps us match you with assignments.",
-    ],
-    ico: FaListOl
-  },
-  {
-    name: "Find Tech4R opportunities",
-    desc: [
-      "On your dashboard, select “Find Assignments”.",
-      "Use the filter “Type of Assignment → Online”.",
-      "Search for “Tech4R” in the keywords or scroll to see available postings."
-    ],
-    ico: FaListOl
-  },
-  {
-    name: "Apply",
-    desc: [
-      "Click on the assignment you’re interested in.",
-      "Read the description and requirements.",
-      "Hit “Apply” and submit a short motivation statement (why you’d like to join)."
-    ],
-    ico: FaListOl
-  },
-  {
-    name: "Selection & Start",
-    desc: [
-      "If selected, you’ll receive an email from UNV.",
-      "You’ll then collaborate with the Tech4R team entirely online.",
-      "At the end of your assignment, you’ll get an official UNV Certificate of Appreciation."
-    ],
-    ico: FaListOl
-  }
+  {name:"Time Commitment",desc:`5-7 hours/week.\nFlexible, remote.`,ico:FaClock},
+  {name:"Team Player",desc:"Team player in a multicultural environment.",ico:FaHandshake},
+  {name:"Good English",desc:"Other UN languages are a plus.",ico:FaLanguage},
+  {name:"Professional",desc:"Reliable, professional, and deadline-oriented.",ico:FaHandshake},
+  {name:"Passionate",desc:"Passion for technology & disaster resilience.",ico:FaScrewdriverWrench},
+  {name:"For Data Collectors",desc:"Experience with Excel/Sheets, research, attention to detail.",ico:FaScrewdriverWrench},
+  {name:"For Web Developers",desc:"Experience with HTML, CSS, JavaScript, UX/UI, Figma",ico:FaScrewdriverWrench},
+  {name:"For GIS volunteers",desc:"Experience with QGIS/ArcGIS, disaster mapping skills",ico:FaScrewdriverWrench},
+  {name:"For Communicators",desc:"Experience at writing, editing, translation, graphic design",ico:FaScrewdriverWrench},
+  {name:"For Automation",desc:"Experience with low-code/no-code tools, APIs, workflow automation",ico:FaScrewdriverWrench}
 ];
 
 export default function VolunteersPage() {
@@ -85,21 +46,48 @@ export default function VolunteersPage() {
           </ul>
         </div>
 
-        <div className="container mx-auto p-4 m-6">
+        <div className="container mx-auto p-4 m-6 text-center">
           <Title>How to Get Involved as a Volunteer</Title>
-          <ul className={`grid gap-4 grid-cols-1 md:grid-cols-${steps.length} place-items-center place-content-center`}>
-            {steps.map((step, idx) => (
-              <li key={`step${idx}`} className="rounded-2xl p-4 w-full m-3 contain-content bg-background border-1 border-neutral-500 border-opacity-20">
-                {(typeof step.ico == 'string') ? (<></>) : (<step.ico className="text-4xl m-auto text-color-01" />)}
-                <h5 className='text-2xl font-bold mt-6 text-center'>{step.name}</h5>
-                <ul className="list-disc ml-6 space-y-1">
-                  {step.desc.map((line, i) => (
-                    <li key={i}>{line}</li>
-                  ))}
-                </ul>
+          <p>All Tech4R volunteer opportunities are hosted on the <b>UNV Unified Volunteering Platform (UVP)</b>.</p>
+          <ul className={`grid gap-4 grid-cols-1 md:grid-cols-4 place-items-center place-content-center`}>
+              <li key={1} className="rounded-2xl p-4 w-full h-full m-3 contain-content text-center bg-background border-1 border-neutral-500 border-opacity-20">
+                <FaListOl className="text-4xl m-auto text-color-01"/>
+                <h5 className='text-2xl font-bold mt-6'>Step 1<br />Sign Up/Log In</h5>
+                <p className='text-neutral-03 text-left'><ul className='p-2 list-disc'>
+                  <li>Go to <a href='app.unv.org'>app.unv.org</a></li>
+                  <li>Create a free account or log in if you already have one</li>
+                  <li>Fill in your <b>profile details</b> (skills, education, experience) - this helps us match you with assignments</li>
+                </ul></p>
+              </li>
+              <li key={2} className="rounded-2xl p-4 w-full h-full m-3 contain-content text-center bg-background border-1 border-neutral-500 border-opacity-20">
+                <FaListOl className="text-4xl m-auto text-color-01"/>
+                <h5 className='text-2xl font-bold mt-6'>Step 2<br />Find Tech4R opportunities</h5>
+                <p className='text-neutral-03 text-left'><ul className='p-2 list-disc'>
+                  <li>On your dashboard, select “<b>Find Assignments</b>”</li>
+                  <li>Use the filter “<b>Type of Assignment → Online</b>”</li>
+                  <li>Search for “<b>Tech4R</b>” in the keywords or scroll to see available postings</li>
+                </ul></p>
+              </li>
+              <li key={3} className="rounded-2xl p-4 w-full h-full m-3 contain-content text-center bg-background border-1 border-neutral-500 border-opacity-20">
+                <FaListOl className="text-4xl m-auto text-color-01"/>
+                <h5 className='text-2xl font-bold mt-6'>Step 3<br />Apply</h5>
+                <p className='text-neutral-03 text-left'><ul className='p-2 list-disc'>
+                  <li>Click on the assignment you’re interested in</li>
+                  <li>Read the description and requirements</li>
+                  <li>Hit “<b>Apply</b>” and submit a short motivation statement (why you’d like to join)</li>
+                </ul></p>
+              </li>
+              <li key={4} className="rounded-2xl p-4 w-full h-full m-3 contain-content text-center bg-background border-1 border-neutral-500 border-opacity-20">
+                <FaListOl className="text-4xl m-auto text-color-01"/>
+                <h5 className='text-2xl font-bold mt-6'>Step 4<br />Selection & Start</h5>
+                <p className='text-neutral-03 text-left'><ul className='p-2 list-disc'>
+                  <li>If selected, you’ll receive an email from UNV</li>
+                  <li>You’ll then collaborate with the Tech4R team entirely online</li>
+                  <li>At the end of your assignment, you’ll get an official <b>UNV Certificate of Appreciation</b></li>
+                </ul></p>
               </li>
-            ))}
           </ul>
+          <p><FaRegHandPointRight className='inline'/> <b>Tip:</b> Assignments are competitive! Fill in your profile carefully and highlight relevant skills to increase your chances.</p>
         </div>
 
         <div className="container mx-auto p-4 m-6">
@@ -109,7 +97,7 @@ export default function VolunteersPage() {
 
         <div className="container grid items-center mx-auto p-4 m-6">
           <Title>Browse Volunteer Assignments in Ongoing Projects</Title>
-          <Button className="mx-auto mb-6 flex-none" href=""><span className="hidden md:inline">Become a&nbsp;</span>Volunteer</Button>
+          <Button className="mx-auto mb-6 flex-none" href="https://www.unv.org/"><span className="hidden md:inline">Become a&nbsp;</span>Volunteer</Button>
           <AssignmentsCarousel />
         </div>