Added page for Supporters (#5)

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.DS_Store

app/care/page.tsx

@@ -0,0 +1,104 @@
+import Image from "next/image"
+import Link from "next/link"
+import { notFound } from "next/navigation";
+
+export const metadata = {
+    title: "CARE - Open Healthcare Network",
+}
+
+const facilityFeatures = [
+    { name: "Assets" },
+    { name: "Locations" },
+    { name: "Beds" },
+    { name: "Resources" },
+    { name: "Resource Requests" },
+    { name: "Capacity Monitoring" },
+    { name: "Notice Board" },
+    { name: "Notifications" }
+]
+
+function FeatureTile(props: { to_left?: boolean, image: string, title: React.ReactNode, content: React.ReactNode }) {
+    const { to_left = false, image, title, content } = props;
+
+    return (
+        <div className={`flex ${to_left ? "flex-row-reverse" : "flex-row"} items-center gap-10`}>
+            <Image
+                alt="Facility Management"
+                src={image}
+                className="shadow-xl rounded-2xl"
+                width={600}
+                height={415}
+            />
+            <div className="w-[400px]">
+                <h3 className="text-3xl font-black">
+                    {title}
+                </h3>
+                <p className="text-slate-700 mt-4">
+                    {content}
+                </p>
+            </div>
+        </div>
+    )
+}
+
+export default function Page() {
+    return notFound()
+    return (
+        <div className="">
+            <div className="relative">
+                <video
+                    src="/backgrounds/bg.mp4"
+                    autoPlay
+                    loop
+                    muted
+                    playsInline
+                    className="absolute -z-20 inset-0 h-screen w-screen object-cover"
+                />
+                <div className="absolute inset-x-0 top-0 h-screen -z-10 bg-black/20" />
+                <div className="pt-[20vh]">
+                    <div className="text-center flex flex-col items-center">
+                        <div className="text-8xl font-black text-white/90">
+                            CARE
+                        </div>
+                        <div className="text-white/80 text-2xl w-3/4 mt-4">
+                            War ready EMR software, empowering thousands of ICU beds across India.<br /> All built on open source.
+                        </div>
+                        <div className="flex items-center gap-4 mt-6">
+                            <Link href="https://github.com/coronasafe/care_fe" className=" opacity-80 bg-white text-black px-4 py-2 rounded-full font-semibold hover:opacity-100 transition-all flex items-center" target="_blank">
+                                <Image src={"/logos/github-mark.svg"} alt="GitHub" width={20} height={20} className="mr-2" />
+                                Star on GitHub
+                            </Link>
+                            <Link href={"https://care.ohc.network"} className="text-white font-semibold flex opacity-80 hover:opacity-100 transition-all">
+                                View Demo
+                            </Link>
+                        </div>
+                        <Image src={"/features/care-desktop.png"} alt="" width={5000} height={5000} className="w-[80vw] mt-14 block" />
+                    </div>
+                </div>
+            </div>
+            <div className="bg-white text-black flex flex-col items-center justify-center p-20">
+                <h1 className="font-black text-4xl">
+                    Everything a Healthcare Facility needs, in one place.
+                </h1>
+                <div className="flex flex-col gap-20 mt-20">
+                    <FeatureTile
+                        image="/features/care-facility-overview.png"
+                        title="Real-time facility wide summarization, statistics, capacity monitoring and reporting to prevent any choke points"
+                        content="Glance over important statistics like bed availability, asset locations, active patients, staff capacity with the facility dashboard."
+                    />
+                    <FeatureTile
+                        to_left
+                        image="/features/care-asset-management.png"
+                        title="Manage assets and track their availability"
+                        content="CARE can store and maintain records of assets such as 5-para monitors, beds, and other medical equipment at any given time. No need to maintain paper trails for assets anymore."
+                    />
+                    <FeatureTile
+                        image="/features/care-location-management.png"
+                        title="See live information on ICUs, Wards, and other in-facility locations"
+                        content="Manage beds, middleware uptime, and monitor camera feeds"
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}

app/layout.tsx

@@ -0,0 +1,53 @@
+import Footer from "@/components/Footer";
+import Header from "@/components/header";
+import "@/styles/globals.css";
+
+export const metadata = {
+  title: "Open Healthcare Network: Transforming Healthcare with AI",
+  description:
+    "Open Healthcare Network leverages artificial intelligence to enhance healthcare services, improving access and quality of care for underserved communities in India.",
+  keywords:
+    "Open Healthcare Network, AI Healthcare, 10BedICU, Healthcare technology, AI in medicine, India healthcare innovation",
+  openGraph: {
+    title: "Open Healthcare Network: Transforming Healthcare with AI",
+    description:
+      "Discover how Open Healthcare Network uses AI to revolutionize healthcare, making advanced care accessible and efficient across India.",
+    url: "https://ohc.network",
+    type: "website",
+    images: [
+      {
+        url: "https://ohc.network/meta_cover.png",
+        width: 800,
+        height: 600,
+        alt: "Open Healthcare Network Cover Image",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Open Healthcare Network: Transforming Healthcare with AI",
+    description:
+      "Explore the impact of AI on healthcare with Open Healthcare Network, providing innovative solutions to enhance care delivery in India.",
+    images: ["https://ohc.network/meta_cover.png"],
+  },
+  author: "Open Healthcare Network",
+  verification: {
+    google: "Google_Site_Verification_Code",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Header />
+        {children}
+        <Footer />
+      </body>
+    </html>
+  )
+}

app/supporters/page.tsx

@@ -0,0 +1,81 @@
+import fs from "fs";
+import Image from "next/image";
+
+export const metadata = {
+    title: "Supporters - Open Healthcare Network"
+}
+
+export default function Page() {
+
+    const getImages = (directory: string) => {
+        const files = fs.readdirSync(directory).filter(f => f.endsWith("svg") || f.endsWith("png"));
+        files.sort((a, b) => {
+            const aIsNumber = !isNaN(Number(a[0]));
+            const bIsNumber = !isNaN(Number(b[0]));
+
+            if (aIsNumber && bIsNumber) {
+                return a.localeCompare(b, undefined, { numeric: true });
+            } else if (aIsNumber) {
+                return -1;
+            } else if (bIsNumber) {
+                return 1;
+            } else {
+                return a.localeCompare(b);
+            }
+        });
+
+        return files;
+    }
+
+    const technologyLogos = getImages("public/logos/technology")
+
+    const sections = [
+        {
+            name: "Technology",
+            description: "A diverse group of technology partners have contributed software technologies and tools that volunteers utilize to build, upgrade, and maintain Open Healthcare Network Products.",
+            logos: technologyLogos
+        }
+    ]
+
+    return (
+        <div>
+            <div
+                className="flex items-center justify-center px-10 py-20 md:px-20 md:py-40"
+                style={{
+                    background: "linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/backgrounds/coronasafe-people.jpeg')",
+                    backgroundPosition: "center",
+                    backgroundSize: "cover"
+                }}
+            >
+                <div className="text-4xl md:text-8xl font-black text-white/90">
+                    Supporters
+                </div>
+            </div>
+            <div className="px-4 md:px-20">
+                {sections.map((section, i) => (
+                    <div key={i} className="text-center my-10 md:my-20 flex flex-col items-center">
+                        <h3 className="text-2xl md:text-4xl font-black">
+                            {section.name}
+                        </h3>
+                        <p className="text-gray-700 max-w-[700px] mt-5">
+                            {section.description}
+                        </p>
+                        <div className="flex items-center justify-center gap-x-10 gap-y-6 flex-wrap mt-10">
+                            {technologyLogos.map((logo, i) => (
+                                <div key={i} className="w-[125px] h-[45px] md:w-[200px] md:h-[75px] transition-all">
+                                    <Image
+                                        src={"/logos/technology/" + logo}
+                                        alt="Logo"
+                                        width={200}
+                                        height={200}
+                                        className="h-full w-full object-contain"
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}

components/Footer.tsx

@@ -0,0 +1,53 @@
+export default function Footer() {
+    const footerNavigation = [
+        {
+            name: "GitHub",
+            href: "https://github.com/coronasafe",
+            icon: (props: any) => (
+                <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+                    <path
+                        fillRule="evenodd"
+                        d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            ),
+        },
+        {
+            name: "YouTube",
+            href: "https://www.youtube.com/@ohc.network",
+            icon: (props: any) => (
+                <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+                    <path
+                        fillRule="evenodd"
+                        d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            ),
+        },
+    ];
+    return (
+        <footer className="bg-white">
+            <div className="mx-auto mt-32 md:mt-56 max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
+                <div className="flex justify-center space-x-6 md:order-2">
+                    {footerNavigation.map((item) => (
+                        <a
+                            key={item.name}
+                            href={item.href}
+                            className="text-gray-400 hover:text-gray-500"
+                        >
+                            <span className="sr-only">{item.name}</span>
+                            <item.icon className="h-6 w-6" aria-hidden="true" />
+                        </a>
+                    ))}
+                </div>
+                <div className="mt-8 md:order-1 md:mt-0">
+                    <p className="text-center text-xs leading-5 text-gray-500">
+                        &copy; 2024 Open Healthcare Network. All rights reserved.
+                    </p>
+                </div>
+            </div>
+        </footer>
+    )
+}

components/LoadVideoPlayer.js

@@ -23,7 +23,6 @@ const LoadVideoPlayer = ({
             alt={altText}
             width={1920}
             height={1080}
-            layout="responsive"
             className="object-contain rounded-lg"
           />
         </div>