Merge pull request #19 from cssgunc/mel-GEN-107-landing-page

Created landing page and sidebar for resource tab

compass/app/auth/forgot_password/page.tsx

@@ -1,11 +1,10 @@
 // pages/forgot-password.tsx
 "use client";
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import Input from '@/components/Input';
 import Button from '@/components/Button';
 import InlineLink from '@/components/InlineLink';
-import Paper from '@/components/auth/Paper';
 import ErrorBanner from '@/components/auth/ErrorBanner';
 
 

compass/app/auth/layout.tsx

@@ -1,6 +1,6 @@
 
 import Paper from '@/components/auth/Paper';
- 
+
 
 export default function RootLayout({
   // Layouts must accept a children prop.
@@ -11,12 +11,12 @@ export default function RootLayout({
 }) {
   return (
     <Paper>
-                <form  className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
+      <form className="mb-0 m-auto mt-6 space-y-4 border border-gray-200 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
-            {children}
+        {children}
-         </form>
+      </form>
-         <p className="text-center mt-6 text-gray-500 text-xs">
+      <p className="text-center mt-6 text-gray-500 text-xs">
-                    &copy; 2024 Compass Center
+        &copy; 2024 Compass Center
-                </p>
+      </p>
-         </Paper>
+    </Paper>
   )
 }

compass/app/auth/login/page.tsx

@@ -4,7 +4,6 @@
 import Button from '@/components/Button';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
-import Paper from '@/components/auth/Paper';
 import Image from 'next/image';
 import { useState } from "react";
 import PasswordInput from '@/components/auth/PasswordInput';

compass/app/auth/new_password/page.tsx

@@ -2,8 +2,6 @@
 "use client";
 import { useState, useEffect } from 'react'; 
 import Button from '@/components/Button';
-
-import Paper from '@/components/auth/Paper';
 import PasswordInput from '@/components/auth/PasswordInput';
 import ErrorBanner from '@/components/auth/ErrorBanner';
 

compass/app/layout.tsx

@@ -1,9 +1,5 @@
 import '../styles/globals.css';
-import { Metadata } from 'next'
+
- 
-export const metadata: Metadata = {
-  title: 'Login',
-}
 
 export default function RootLayout({
   // Layouts must accept a children prop.

compass/app/resource/layout.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import Sidebar from '@/components/resource/Sidebar';
+import React, { useState } from 'react';
+import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
+
+export default function RootLayout({
+
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+    return (
+        <div className="flex-row">
+            {/* button to open sidebar */}
+            <button
+                onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+                className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
+                aria-label={'Open sidebar'}
+            >
+                {!isSidebarOpen &&
+                    <ChevronDoubleRightIcon className="h-5 w-5" /> // Icon for closing the sidebar
+                }
+            </button>
+            {/* sidebar  */}
+            <div className={`absolute inset-y-0 left-0 transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} w-64 transition duration-300 ease-in-out`}>
+                <Sidebar setIsSidebarOpen={setIsSidebarOpen} />
+            </div>
+            {/* page ui  */}
+            <div className={`flex-1 transition duration-300 ease-in-out ${isSidebarOpen ? 'ml-64' : 'ml-0'}`}>
+                {children}
+            </div>
+        </div>
+    )
+}

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 { BookOpenIcon, BookmarkIcon, ClipboardIcon } from "@heroicons/react/24/solid";
+import Image from 'next/image';
+
+export default function Page() {
+    return (
+        <div className="min-h-screen flex flex-col">
+            {/* icon + title  */}
+            <div className="pt-16 px-8 pb-4 flex-grow">
+                <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 flex-grow border-t border-gray-200 bg-gray-50">
+                {/* link to different pages  */}
+                <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>
+                {/* search bar */}
+                <LandingSearchBar />
+            </div>
+        </div>
+    )
+}

compass/components/auth/Paper.tsx

@@ -6,7 +6,7 @@ interface PageInterface {
 
 const Paper: React.FC<PageInterface> = ({ children }) => {
     return (
-        <div className="w-full min-h-screen px-4 py-16 bg-gray-100 sm:px-6 lg:px-8">
+        <div className="w-full min-h-screen px-4 py-16 bg-gray-50 sm:px-6 lg:px-8">
             {children}
         </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 bg-purple-50 rounded-sm">
+      <span className="text-sm text-gray-800">{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 hover:bg-gray-50 shadow rounded-md p-4">
+      <span className="h-5 text-purple-700 w-5">
+        {icon}
+      </span>
+      <span className="text-sm text-gray-800 font-semibold">{text}</span>
+    </div>
+  );
+};
+
+export default Card;

compass/components/resource/LandingSearchBar.tsx

@@ -0,0 +1,48 @@
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid"
+import React, { useState } from 'react';
+import Image from 'next/image';
+
+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">
+      {/* searchbar  */}
+      <div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
+        <div className="flex-grow">
+          <input
+            className="sm:text-sm text-gray-800 w-full px-6 py-3 rounded-md focus:outline-none"
+            type="text"
+            placeholder="Search..."
+            value={searchTerm}
+            onChange={handleSearchChange}
+          />
+        </div>
+        {/* input  */}
+        {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>
+      {/* search results, for now since it's empty this is the default screen  */}
+      <div className="flex flex-col pt-16 space-y-2 justify-center items-center">
+        <Image alt="Landing illustration" src="/landing_illustration.png" width={250} height={250} />
+        <h2 className="font-medium text-medium text-gray-800">Need to find something? Use the links or the search bar above to get your results.</h2>
+      </div>
+    </div>
+  );
+};

compass/components/resource/Sidebar.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { HomeIcon, ChevronDoubleLeftIcon, BookmarkIcon, ClipboardIcon, BookOpenIcon } from '@heroicons/react/24/solid';
+import { SidebarItem } from './SidebarItem';
+
+interface SidebarProps {
+  setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ setIsSidebarOpen }) => {
+  return (
+    <div className="w-64 h-full border border-gray-200 bg-gray-50 px-4">
+      {/* button to close sidebar  */}
+      <div className="flex justify-end">
+        <button
+          onClick={() => setIsSidebarOpen(false)}
+          className="py-2 text-gray-500 hover:text-gray-800"
+          aria-label="Close sidebar"
+        >
+          <ChevronDoubleLeftIcon className="h-5 w-5" />
+        </button>
+      </div>
+      <div className="flex flex-col space-y-8">
+
+      {/* user + logout button  */}
+        <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
+
+          <div className="flex flex-col items-start space-y-2">
+            <div className="flex flex-col">
+              <span className="text-sm font-semibold text-gray-800">Compass Center</span>
+              <span className="text-xs text-gray-500">cssgunc@gmail.com</span>
+            </div>
+            <button className="text-red-600 text-xs hover:underline mt-1">Sign out</button>
+          </div>
+        </div>
+        {/* navigation menu  */}
+        <div className="flex flex-col space-y-2">
+          <h4 className="text-xs font-semibold text-gray-500">Pages</h4>
+          <nav className="flex flex-col">
+          <SidebarItem icon={<HomeIcon  />} text="Home" />
+            <SidebarItem icon={<BookmarkIcon  />} text="Resources" />
+            <SidebarItem icon={<ClipboardIcon />} text="Services" />
+            <SidebarItem icon={<BookOpenIcon  />} text="Training Manuals" />
+          </nav>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default Sidebar;

compass/components/resource/SidebarItem.tsx

@@ -0,0 +1,16 @@
+
+interface SidebarItemProps {
+  icon: React.ReactElement;
+  text: string;
+}
+
+export const SidebarItem: React.FC<SidebarItemProps> = ({ icon, text }) => {
+  return (
+    <a href="#" className="flex items-center p-2 space-x-2 hover:bg-gray-200 rounded-md">
+      <span className="h-5 text-gray-500 w-5">
+      {icon}
+      </span>
+      <span className="flex-grow font-medium text-xs text-gray-500">{text}</span>
+    </a>
+  );
+};

compass/next.config.js

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    images: {
+        domains: ['notioly.com']
+      },
+}
 
 module.exports = nextConfig

compass/styles/globals.css

@@ -36,12 +36,61 @@
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
-    src: url('/fonts/Inter-Regular.ttf') format('ttf'),
+    src: url('/fonts/Inter-Regular.ttf') format('truetype');
-    url('/fonts/Inter-Bold.ttf') format('ttf'),
+}
-    url('/fonts/Inter-Black.ttf') format('ttf'),
+
-    url('/fonts/Inter-ExtraBold.ttf') format('ttf'),
+/* Inter-Bold */
-    url('/fonts/Inter-ExtraLight.ttf') format('ttf'),
+@font-face {
-    url('/fonts/Inter-Medium.ttf') format('ttf'),
+    font-family: 'Inter';
-    url('/fonts/Inter-SemiBold.ttf') format('ttf'),
+    font-style: normal;
-    url('/fonts/Inter-Thin.ttf') format('ttf');
+    font-weight: 700;
-  }
+    src: url('/fonts/Inter-Bold.ttf') format('truetype');
+}
+
+/* Inter-Black */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 900;
+    src: url('/fonts/Inter-Black.ttf') format('truetype');
+}
+
+/* Inter-ExtraBold */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 800;
+    src: url('/fonts/Inter-ExtraBold.ttf') format('truetype');
+}
+
+/* Inter-ExtraLight */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200;
+    src: url('/fonts/Inter-ExtraLight.ttf') format('truetype');
+}
+
+/* Inter-Medium */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    src: url('/fonts/Inter-Medium.ttf') format('truetype');
+}
+
+/* Inter-SemiBold */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
+}
+
+/* Inter-Thin */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100;
+    src: url('/fonts/Inter-Thin.ttf') format('truetype');
+}

compass/tailwind.config.ts

@@ -13,8 +13,11 @@ const config: Config = {
         'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
       fontFamily: {
-        sans: ['Inter', 'sans-serif'],
+        'sans': ['Inter', 'sans-serif'], // Add 'Inter' to the fontFamily theme
       },
+      fontWeight: {
+        'medium': 500, // Ensure medium is correctly set to 500
+      }
     },
   },
   plugins: [],