diff --git a/.gitignore b/.gitignore index fd3dbb5..e05df08 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,5 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +.DS_Store \ No newline at end of file diff --git a/app/care/page.tsx b/app/care/page.tsx new file mode 100644 index 0000000..d2ccce1 --- /dev/null +++ b/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 ( +
+ Facility Management +
+

+ {title} +

+

+ {content} +

+
+
+ ) +} + +export default function Page() { + return notFound() + return ( +
+
+
+ ) +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..f68e23f --- /dev/null +++ b/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 ( + + +
+ {children} +
diff --git a/components/header.tsx b/components/header.tsx new file mode 100644 index 0000000..e09f605 --- /dev/null +++ b/components/header.tsx @@ -0,0 +1,249 @@ +"use client"; + +import Image from "next/image"; +import { ReactNode, useEffect, useRef, useState } from "react"; +import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; +import Link from "next/link"; +import { usePathname, useRouter } from "next/navigation"; + + +export default function Header(props: { + fixed?: boolean +}) { + + const { fixed } = props; + + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + const [scrolled, setScrolled] = useState(false); + const path = usePathname(); + const router = useRouter(); + const [showDropdown, setShowDropdown] = useState(null); + const [dropDownData, setDropDownData] = useState(null); + const [outDropdownData, setOutDropdownData] = useState(null); + const [dropDownHeight, setDropDownHeight] = useState(0); + + const triangleRef = useRef(null); // SVGSVG? :D + + const productsItems = [ + { + name: "CARE", + description: "War ready EMR software, empowering thousands of ICU beds across India. All built on open source.", + image: "/features/care-desktop.png", + href: "/care" + }, + { + name: "Ayushma", + description: "AI powered chatbot to assist doctors and nurses in managing patient care.", + image: "/features/care-desktop.png", + href: "/ayushma" + }, + { + name: "Leaderboard", + description: "Tracking the progress of open source contributors and rewarding them for their contributions.", + image: "/features/care-desktop.png", + href: "/leaderboard" + } + ] + + const communityItems = [ + { + name: "Github", + description: "Contribute to our open source projects on Github.", + image: "/dropdownicons/github.webp", + href: "https://github.com/coronasafe" + }, + { + name: "Slack", + description: "Join our Slack community to connect with other contributors.", + image: "/dropdownicons/slack.jpg", + href: "https://slack.ohc.network/" + } + ] + + type DropDownItem = { + name: string, + description: string, + image: string, + href: string + } + + type NavigationItem = { + content: ReactNode + } & ( + | { type: "link", href: string } + | { type: "section", id: string, page: string } + | { type: "button", onClick: () => void } + | { type: "dropdown", items: DropDownItem[] } + ) + + const navigation: NavigationItem[] = [ + //{ type: "dropdown", content: "Products", items: productsItems }, + { type: "dropdown", content: "Community", items: communityItems }, + { type: "link", content: "Supporters", href: "/supporters" }, + { type: "section", content: "Contact", id: "contact", page: "/" }, + { type: "link", content: Github, href: "https://github.com/coronasafe" } + ]; + + useEffect(() => { + const handleScroll = () => setScrolled(window.scrollY > 200) + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + useEffect(() => { + const nav = navigation[(showDropdown || 0) - 1]; + const items = nav?.type === "dropdown" ? nav.items : []; + setOutDropdownData(dropDownData); + setDropDownData(items); + }, [showDropdown]); + + useEffect(() => { + const onMouseMove = (e: MouseEvent) => { + const target = e.target as Element; + if (!target.closest(".nav-button") && !target.closest(".nav-dropdown") && target !== triangleRef.current) setShowDropdown(null); + } + window.addEventListener("mousemove", onMouseMove); + return () => window.removeEventListener("mousemove", onMouseMove); + }, []); + + useEffect(() => { + setDropDownHeight(document.querySelector(".dropdown-animate-in")?.clientHeight || 0); + }, [dropDownData]) + + const NavigationItemRender = (props: { item: NavigationItem, onHover?: (hoverstate: boolean, leftOffset: number) => void }) => { + + const { item, onHover } = props; + + const className = "font-black md:font-semibold md:hover:text-white/100 transition-all px-3 flex items-center md:justify-center h-full" + + const itemRef = useRef(null); + + switch (item.type) { + case "link": + return ( + + {item.content} + + ) + case "section": + return ( + { + e.preventDefault(); + e.stopPropagation(); + if (path === item.page) { + document.getElementById(item.id)?.scrollIntoView({ behavior: "smooth" }); + } else { + router.push(item.page + "#" + item.id); + } + }} + > + {item.content} + + ) + case "button": + return ( + + ) + case "dropdown": + return ( + + ) + } + } + + const DropDownRender = (props: { items: DropDownItem[], className?: string }) => { + const { items, className } = props; + return ( +
+ {items?.map((item, i) => ( + + {item.name} +
+ {item.name} +
+

+ {item.description} +

+ + ))} +
+ ) + } + + return ( + + ) +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5c69753..90f8f90 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,8 @@ }, "devDependencies": { "@tailwindcss/forms": "^0.5.7", + "@types/node": "22.0.0", + "@types/react": "18.3.3", "eslint": "^8", "eslint-config-next": "14.2.3", "postcss": "^8", @@ -697,6 +699,31 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "node_modules/@types/node": { + "version": "22.0.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.0.0.tgz", + "integrity": "sha512-VT7KSYudcPOzP5Q0wfbowyNLaVR8QWUdw+088uFWwfvpY6uCWaXpqV6ieLAu9WBcnTa7H4Z5RLK8I5t2FuOcqw==", + "dev": true, + "dependencies": { + "undici-types": "~6.11.1" + } + }, + "node_modules/@types/prop-types": { + "version": "15.7.12", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", + "dev": true + }, + "node_modules/@types/react": { + "version": "18.3.3", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", + "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@typescript-eslint/parser": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz", @@ -1372,6 +1399,12 @@ "node": ">=4" } }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -4818,6 +4851,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/undici-types": { + "version": "6.11.1", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.11.1.tgz", + "integrity": "sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==", + "dev": true + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/package.json b/package.json index 4ca4751..6a53735 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,8 @@ }, "devDependencies": { "@tailwindcss/forms": "^0.5.7", + "@types/node": "22.0.0", + "@types/react": "18.3.3", "eslint": "^8", "eslint-config-next": "14.2.3", "postcss": "^8", diff --git a/pages/api/hello.js b/pages/api/hello.js deleted file mode 100644 index aee21e9..0000000 --- a/pages/api/hello.js +++ /dev/null @@ -1,5 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction - -export default function handler(req, res) { - res.status(200).json({ name: "John Doe" }); -} diff --git a/pages/index.js b/pages/index.js index 9aa738e..c2aef53 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,8 +1,7 @@ /* eslint-disable @next/next/no-img-element */ import { useState } from "react"; -import { Dialog, DialogPanel } from "@headlessui/react"; -import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; + import { ArrowPathIcon, ChevronRightIcon, @@ -17,77 +16,8 @@ import { OpenAIHero } from "@/components/OpenAIHero"; import Head from "next/head"; import Link from "next/link"; import CommitLayout from "@/components/Commit/CommitLayout"; - -const navigation = [ - { name: "Product", href: "#product" }, - { name: "AI Features", href: "#ai_features" }, - { name: "Deployments", href: "#deployments" }, - { name: "Contact", href: "#contact" }, -]; - -const footerNavigation = [ - // { - // name: 'Facebook', - // href: '#', - // icon: (props) => ( - // - // - // - // ), - // }, - // { - // name: 'Instagram', - // href: '#', - // icon: (props) => ( - // - // - // - // ), - // }, - // { - // name: 'X', - // href: '#', - // icon: (props) => ( - // - // - // - // ), - // }, - { - name: "GitHub", - href: "https://github.com/coronasafe", - icon: (props) => ( - - - - ), - }, - { - name: "YouTube", - href: "https://www.youtube.com/@ohc.network", - icon: (props) => ( - - - - ), - }, -]; +import Header from "@/components/header"; +import Footer from "@/components/Footer"; const primaryFeatures = [ { @@ -216,7 +146,6 @@ const aiTools = [ ]; export default function Home() { - const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [banner, setBanner] = useState({ message: "ohc.network @ GitHub Constellation ", href: "https://githubconstellation.com/schedule/supercharging-development-open-healthcare-network-leverages-ai-breakthrough-efficiency", @@ -228,88 +157,7 @@ export default function Home() { Open Healthcare Network: Transforming Healthcare with AI {/* Header */} -
- - -
- -
- - Open Healthcare Network - - - -
-
-
-
- {navigation.map((item) => ( - - {item.name} - - ))} -
-
-
- -
-
+
{/* Hero */}
{/* Hero section */} @@ -931,28 +779,28 @@ export default function Home() { id="contact" aria-label="Join Our Open Healthcare Network Slack Community" > -
-
-
+
+
+
-

+

Join our Community

-

+

Connect, collaborate, and create change with like-minded innovators in our Slack community, dedicated to advancing healthcare through technology.

-

+

Become a Member of Our Community{" "}

Start Collaborating 🎉 @@ -962,29 +810,7 @@ export default function Home() {
- - {/* Footer */} -
-
-
- {footerNavigation.map((item) => ( - - {item.name} - - ))} -
-
-

- © 2024 Open Healthcare Network. All rights reserved. -

-
-
-
+