Searchbar, Callout, Card, Layout

compass/app/resource/page.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import Callout from "@/components/resource/Callout";
+import Card from "@/components/resource/Card";
+import { LandingSearchBar } from "@/components/resource/LandingSearchBar";
+import { Icons } from "@/utils/constants";
+import { BookOpenIcon, BookmarkIcon, ClipboardIcon } from "@heroicons/react/24/solid";
+import Image from 'next/image';
+
+export default function Page() {
+    return (
+        <>
+        <div className="pt-16 px-8 pb-8">
+            <div className="mb-4 flex items-center space-x-4">
+                    <Image
+                        src="/logo.png"
+                        alt='Compass Center logo.'
+                        width={25}
+                        height={25}
+                    />
+                <h1 className='font-bold text-2xl text-purple-800'>Compass Center Advocate Landing Page</h1>
+            </div>
+            <Callout>
+                Welcome! Below you will find a list of resources for the Compass Center's trained advocates. These materials serve to virtually provide a collection of advocacy, resource, and hotline manuals and information. 
+                <b> If you are an advocate looking for the contact information of a particular Compass Center employee, please directly contact your staff back-up or the person in charge of your training.</b>
+            </Callout>
+            </div>
+            <div className="p-8 min-h-screen border-t border-gray-200 bg-gray-50">
+            <div className="grid grid-cols-3 gap-6  pb-6">
+            <Card icon={<BookmarkIcon />} text="Resources" />
+            <Card icon={<ClipboardIcon />} text="Services" />
+            <Card icon={<BookOpenIcon />} text="Training Manuals" />
+            </div>
+                
+                <LandingSearchBar />
+            </div>
+            </>
+    )
+}

compass/components/resource/Callout.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+interface CalloutProps {
+  children: ReactNode;
+}
+
+const Callout = ({ children }: CalloutProps) => {
+  return (
+    <div className="p-4 mb-4 flex items-center border-gray-300 bg-gray-100 rounded-lg">
+      <span className="text-sm text-gray-700">{children}</span>
+    </div>
+  );
+};
+
+export default Callout;

compass/components/resource/Card.tsx

@@ -0,0 +1,20 @@
+import React, {ReactNode} from "react";
+
+
+interface TagProps {
+  text: string;
+  icon: React.ReactNode;
+}
+
+const Card: React.FC<TagProps> = ({ text, icon }) => {
+  return (
+    <div className="flex flex-row space-x-2 items-start justify-start border border-gray-200 bg-white shadow rounded-md p-4">
+      <span className="h-5 w-5 text-gray-700">
+        {icon}
+      </span>
+      <span className="text-sm font-semibold text-gray-700">{text}</span>
+    </div>
+  );
+};
+
+export default Card;

compass/components/resource/LandingSearchBar.tsx

@@ -0,0 +1,41 @@
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid"
+import React, { useState } from 'react';
+
+export const LandingSearchBar: React.FC = () => {
+    const [searchTerm, setSearchTerm] = useState('');
+  
+    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchTerm(event.target.value);
+    };
+  
+    const clearSearch = () => {
+      setSearchTerm('');
+    };
+  
+    return (
+      <div className="max-w mx-auto">
+        <div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
+          <div className="flex-grow">
+            <input
+              className="sm:text-sm w-full px-6 py-3 rounded-md focus:outline-none"
+              type="text"
+              placeholder="Search..."
+              value={searchTerm}
+              onChange={handleSearchChange}
+            />
+          </div>
+          {searchTerm && (
+            <button
+              onClick={clearSearch}
+            >
+              <XMarkIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
+            </button>
+          )}
+          <div className="p-3">
+            <MagnifyingGlassIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
+          </div>
+        </div>
+        
+      </div>
+    );
+  };