Merge pull request #30 from Health-Informatics-UoN/add_about

Add README description and Footer with UoN logo

Author: vpnu

README.md

@@ -1,2 +1,13 @@
-# open-case-reports
-A user interface to query case reports with specific patient criteria.
+# Open Case Reports
+
+Open Case Reports filters and explores published clinical Case Reports.
+Enabling clinicians and researchers to filter through a dataset generated from over 118,000 open-access clinical case reports.
+
+Users can filter using structured OMOP clinical filters, including Conditions, Procedures, Drugs and Measurements. Matching results are linked directly to the original case report publications on PubMed, allowing rapid access to supporting clinical evidence.
+
+Key Features:
+- Explore clinical case reports using OMOP CDM concepts
+- Available concepts: OMOP CDM Condition, Procedure, and Drug exposure and Measurement.
+- Combine multiple filters to find relevant patient cases
+- Displays Titles, Descriptions and direct links to Case Reports on PubMed, using the [PMC OAI-PMH API](https://pmc.ncbi.nlm.nih.gov/tools/oai/)
+- Hosted at: https://opencasereports.com/

app/layout.tsx

@@ -1,6 +1,7 @@
 import { Geist, Geist_Mono } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 import "./globals.css";
+import Footer from "@/components/layout/Footer";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -23,6 +24,7 @@ export default function RootLayout({
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           {children}
         </ThemeProvider>
+        <Footer />
       </body>
     </html>
   );

app/page.tsx

@@ -3,7 +3,6 @@ import NotesSection from "@/components/NotesSection";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import DomainSelect from "@/components/DomainSelect";
 import { ModeToggle } from "@/components/mode-toggle";
-
 export default async function Page({
   searchParams,
 }: {
@@ -26,21 +25,19 @@ export default async function Page({
   const page = Math.max(1, parseInt(params.page ?? "1", 10) || 1);
   return (
     <div className="min-h-screen bg-muted/40 p-6">
-      <div className="mb-6">
-        <h1 className="text-3xl font-bold tracking-tight">Open Case Reports</h1>
-        <p className="text-muted-foreground">
-          Browse common terms and find associated Case Reports
-        </p>
-      </div>
-      <Card className="mb-6">
-        <CardHeader className="pb-3">
-          <CardTitle className="text-2xl">Filters</CardTitle>
+      <Card className="relative mb-6">
+        <CardHeader className="pb-0">
+          <CardTitle className="text-2xl">Open Case Reports</CardTitle>
         </CardHeader>
-
-        <CardContent>
+        <CardContent className="pt-0">
+          <p className="text-base text-muted-foreground">
+            Explore published clinical case reports that have been transformed
+            into the OMOP Common Data Model using a clinical NLP pipeline.
+            Select a domain to filter through concepts, and select one
+            or more concepts to view the associated case reports.
+          </p>
           <div className="flex items-center gap-4">
             <span className="text-lg font-medium ">Domain</span>
-
             <DomainSelect domain={domain} />
           </div>
           <div className="absolute top-4 right-4">

components/layout/Footer.tsx

@@ -0,0 +1,33 @@
+import Image from "next/image";
+
+export default function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer>
+      <div className="bg-background py-6 border-t border-border">
+        <div className="container mx-auto flex flex-col items-center gap-2">
+          <Image
+            src="/UoN-light.png"
+            alt="Organisation Logo"
+            width={150}
+            height={70}
+            priority
+            className="block h-auto w-auto dark:hidden"
+          />
+          <Image
+            src="/UoN-dark.png"
+            alt="Organisation Logo"
+            width={150}
+            height={70}
+            priority
+            className="hidden h-auto w-auto dark:block"
+          />
+          <p className="text-center text-sm text-foreground">
+            ©University of Nottingham {currentYear} | All rights reserved
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}