3 files changed, 117 insertions, 0 deletions
diff --git a/src/pages/FindOpportunities.js b/src/pages/FindOpportunities.js
new file mode 100644
index 0000000..dab7647
--- /dev/null
+++ b/src/pages/FindOpportunities.js
@@ -0,0 +1,71 @@
+import React, { useContext } from 'react';
+import { AuthContext } from '../providers/AuthContext';
+import GridLayout from '../layouts/GridLayout';
+import { CalendarIcon, MapPinIcon, BuildingOfficeIcon } from "@heroicons/react/24/outline";
+
+
+const FindOpportunities = () => {
+    const { user } = useContext(AuthContext);
+
+    const fakePosting = {
+        id: '69420',
+        name: 'Team Rocket',
+        location: 'Annapolis, MD',
+        title: 'Need Help Battling Mega Bidoof!',
+        description: "Mega Bidoof is crazy hard to battle. He's so big and strong and mega, and named Bidoof.",
+        date_posted: '04/23/2024',
+        date_scheduled: '05/01/2024',
+        time_scheduled: 'Flexible',
+        skills: ['Catch', 'Throw', 'Battle']
+    }
+
+    return (
+        <>
+            {!user ? (
+                <h1>tuna tees here</h1>
+            ) : (
+                <GridLayout>
+                    <>
+                        <div className="flex w-full flex-col px-4 md:px-16">
+                            <div className="max-w-2xl text-2xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white pb-2"> Search for Opportunities </div>
+                            <ul className="">
+                                <div className="flex flex-row flex-grow-1 max-h-32 gap-2 p-2 flex-no-wrap border border-indigo-100 rounded-lg shadow-lg">
+
+                                {/*Photo section*/}
+                                <div className="max-md:hidden max-w-32 flex justify-center items-center">
+                                    <div className="h-16 w-16 bg-indigo-100"></div>
+                                </div>
+
+                                {/*Middle section*/}
+                                <div className="flex flex-grow flex-col text-nowrap overflow-x-clip">
+                                    <div className="text-md font-semibold"> {fakePosting.title} </div>
+                                    <div className="text-xs text-nowrap overflow-ellipsis text-gray-500">{fakePosting.description} </div>
+                                    <div className="text-[.6rem] text-nowrap grid md:grid-cols-3 sm:grid-cols-1 content-evenly">
+                                        <div className="inline-flex col-span-1 items-center text-gray-500 gap-0.5"> <BuildingOfficeIcon className="h-4 w-4 text-indigo-500"/> {fakePosting.name} </div>
+                                        <div className="inline-flex items-center text-gray-500 gap-0.5"><CalendarIcon className="h-4 w-4 text-indigo-500"/> {fakePosting.date_posted} </div>
+                                        <div className="inline-flex items-center text-gray-500 gap-0.5"> <MapPinIcon className="h-4 w-4 text-indigo-500"/> {fakePosting.location} </div>
+                                    </div>
+                                    <div className="flex gap-1 text-indigo-500 text-[.6rem] mt-1 ">
+                                        <li className="border w-12 text-center border-indigo-300 rounded-lg shadow-lg"> {fakePosting.skills[0]} </li>
+                                        <li className="border w-12 text-center border-indigo-300 rounded-lg shadow-lg"> {fakePosting.skills[1]} </li>
+                                        <li className="border w-12 text-center border-indigo-300 rounded-lg shadow-lg"> {fakePosting.skills[2]} </li>
+                                    </div>
+                                </div>
+
+                                {/*Apply section*/}
+                                <div className="max-w-64 justify-center flex flex-col">
+                                    <button className="bg-indigo-500 text-white rounded-md focus:bg-indigo-600 focus:outline-none">Apply</button>
+                                    <div className="inline-flex text-nowrap text-[.5rem] text-gray-500 ">Posted: {fakePosting.date_posted} </div>
+                                </div>
+
+                                </div>
+                            </ul>
+                        </div>
+                    </>
+                </GridLayout>
+            )}
+        </>
+    );
+};
+
+export default FindOpportunities;
+\ No newline at end of file
diff --git a/src/pages/Messages.js b/src/pages/Messages.js
new file mode 100644
index 0000000..b6aed5f
--- /dev/null
+++ b/src/pages/Messages.js
@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { AuthContext } from '../providers/AuthContext';
+import GridLayout from '../layouts/GridLayout';
+
+const Messages = () => {
+    const { user } = useContext(AuthContext);
+
+    return (
+        <>
+            {!user ? (
+                <h1>you got a DM from Barak Obamna</h1>
+            ) : (
+                <GridLayout>
+                    <>
+                    you got a DM from Barak Obamna
+                    </>
+                </GridLayout>
+            )}
+        </>
+    );
+};
+
+export default Messages;
+\ No newline at end of file
diff --git a/src/pages/RecruitVolunteers.js b/src/pages/RecruitVolunteers.js
new file mode 100644
index 0000000..c637656
--- /dev/null
+++ b/src/pages/RecruitVolunteers.js
@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { AuthContext } from '../providers/AuthContext';
+import GridLayout from '../layouts/GridLayout';
+
+const RecruitVolunteers = () => {
+    const { user } = useContext(AuthContext);
+
+    return (
+        <>
+            {!user ? (
+                <h1>uncle sam want u</h1>
+            ) : (
+                <GridLayout>
+                    <>
+                    uncle sam want u
+                    </>
+                </GridLayout>
+            )}
+        </>
+    );
+};
+
+export default RecruitVolunteers;
+\ No newline at end of file