Add Openness Section

components/Button.jsx

@@ -1,42 +1,42 @@
-import Link from 'next/link'
-import clsx from 'clsx'
+import Link from "next/link";
+import clsx from "clsx";
 
 const baseStyles = {
   solid:
-    'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold outline-2 outline-offset-2 transition-colors',
+    "inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold outline-2 outline-offset-2 transition-colors",
   outline:
-    'inline-flex justify-center rounded-lg border py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-sm outline-2 outline-offset-2 transition-colors',
-}
+    "inline-flex justify-center rounded-lg border py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-sm outline-2 outline-offset-2 transition-colors",
+};
 
 const variantStyles = {
   solid: {
-    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
+    cyan: "relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors",
     white:
-      'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
-    gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
+      "bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70",
+    gray: "bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80",
   },
   outline: {
-    gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+    gray: "border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80",
   },
-}
+};
 
 export function Button({ className, ...props }) {
-  props.variant ??= 'solid'
-  props.color ??= 'gray'
+  props.variant ??= "solid";
+  props.color ??= "gray";
 
   className = clsx(
     baseStyles[props.variant],
-    props.variant === 'outline'
+    props.variant === "outline"
       ? variantStyles.outline[props.color]
-      : props.variant === 'solid'
-        ? variantStyles.solid[props.color]
-        : undefined,
-    className,
-  )
+      : props.variant === "solid"
+      ? variantStyles.solid[props.color]
+      : undefined,
+    className
+  );
 
-  return typeof props.href === 'undefined' ? (
+  return typeof props.href === "undefined" ? (
     <button className={className} {...props} />
   ) : (
     <Link className={className} {...props} />
-  )
+  );
 }

components/Commit/Button.jsx

@@ -0,0 +1,30 @@
+import Link from 'next/link'
+import clsx from 'clsx'
+
+function ButtonInner({ arrow = false, children }) {
+  return (
+    <>
+      <span className="absolute inset-0 rounded-md bg-gradient-to-b from-white/80 to-white opacity-10 transition-opacity group-hover:opacity-15" />
+      <span className="absolute inset-0 rounded-md opacity-7.5 shadow-[inset_0_1px_1px_white] transition-opacity group-hover:opacity-10" />
+      {children} {arrow ? <span aria-hidden="true">&rarr;</span> : null}
+    </>
+  )
+}
+
+export function Button({ className, arrow, children, ...props }) {
+  className = clsx(
+    className,
+    'group relative isolate flex-none rounded-md py-1.5 text-[0.8125rem]/6 font-semibold text-white',
+    arrow ? 'pl-2.5 pr-[calc(9/16*1rem)]' : 'px-2.5',
+  )
+
+  return typeof props.href === 'undefined' ? (
+    <button className={className} {...props}>
+      <ButtonInner arrow={arrow}>{children}</ButtonInner>
+    </button>
+  ) : (
+    <Link className={className} {...props}>
+      <ButtonInner arrow={arrow}>{children}</ButtonInner>
+    </Link>
+  )
+}

components/Commit/CommitLayout.jsx

@@ -0,0 +1,85 @@
+import { useId } from "react";
+
+import { Intro, IntroFooter } from "@/components/Commit/Intro";
+import { StarField } from "@/components/Commit/StarField";
+import { ThemeToggle } from "@/components/Commit/ThemeToggle";
+
+function Timeline() {
+  let id = useId();
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-50 overflow-hidden   ">
+      <svg
+        className="absolute left-[max(0px,calc(50%-18.125rem))] top-0 h-full w-1.5     "
+        aria-hidden="true"
+      >
+        <defs>
+          <pattern id={id} width="6" height="8" patternUnits="userSpaceOnUse">
+            <path
+              d="M0 0H6M0 8H6"
+              className="/10 stroke-white/10"
+              fill="none"
+            />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill={`url(#${id})`} />
+      </svg>
+    </div>
+  );
+}
+
+function Glow() {
+  let id = useId();
+
+  return (
+    <div className="inset-0 -z-10 overflow-hidden bg-gray-950  ">
+      <svg
+        className="absolute -bottom-48 left-[-40%] h-[80rem] w-[180%]      "
+        aria-hidden="true"
+      >
+        <defs>
+          <radialGradient id={`${id}-mobile`} cy="100%">
+            <stop offset="0%" stopColor="rgba(56, 189, 248, 0.3)" />
+            <stop offset="53.95%" stopColor="rgba(0, 71, 255, 0.09)" />
+            <stop offset="100%" stopColor="rgba(10, 14, 23, 0)" />
+          </radialGradient>
+        </defs>
+        <rect
+          width="100%"
+          height="100%"
+          fill={`url(#${id}-mobile)`}
+          className=""
+        />
+      </svg>
+      <div className="absolute inset-x-0 bottom-0 right-0 h-px bg-white mix-blend-overlay    " />
+    </div>
+  );
+}
+
+function FixedSidebar({ main, footer }) {
+  return (
+    <div className="relative flex-none overflow-hidden px-6      ">
+      <Glow />
+      <div className="relative flex w-full      ">
+        <div className=":flex-1 :pt-6      mx-auto max-w-lg">
+          <div className="pb-16 pt-20 sm:pb-20 sm:pt-32 ">
+            <div className="relative">
+              <StarField className="-right-44 top-14" />
+              {main}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function CommitLayout({ children }) {
+  return (
+    <div className="py-20">
+      <div className="flex min-h-full flex-col bg-white dark:bg-gray-950">
+        <FixedSidebar main={<Intro />} footer={<IntroFooter />} />
+      </div>
+    </div>
+  );
+}

components/Commit/FormattedDate.jsx

@@ -0,0 +1,16 @@
+const dateFormatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  timeZone: 'UTC',
+})
+
+export function FormattedDate({ date, ...props }) {
+  date = typeof date === 'string' ? new Date(date) : date
+
+  return (
+    <time dateTime={date.toISOString()} {...props}>
+      {dateFormatter.format(date)}
+    </time>
+  )
+}

components/Commit/IconLink.jsx

@@ -0,0 +1,25 @@
+import Link from 'next/link'
+import clsx from 'clsx'
+
+export function IconLink({
+  children,
+  className,
+  compact = false,
+  icon: Icon,
+  ...props
+}) {
+  return (
+    <Link
+      {...props}
+      className={clsx(
+        className,
+        'group relative isolate flex items-center rounded-lg px-2 py-0.5 text-[0.8125rem]/6 font-medium text-white/30 transition-colors hover:text-sky-300',
+        compact ? 'gap-x-2' : 'gap-x-3',
+      )}
+    >
+      <span className="absolute inset-0 -z-10 scale-75 rounded-lg bg-white/5 opacity-0 transition group-hover:scale-100 group-hover:opacity-100" />
+      {Icon && <Icon className="h-4 w-4 flex-none" />}
+      <span className="self-baseline text-white">{children}</span>
+    </Link>
+  )
+}

components/Commit/Intro.jsx

@@ -0,0 +1,95 @@
+import Link from "next/link";
+
+import { IconLink } from "@/components/Commit/IconLink";
+import Image from "next/image";
+
+function BookIcon(props) {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" {...props}>
+      <path d="M7 3.41a1 1 0 0 0-.668-.943L2.275 1.039a.987.987 0 0 0-.877.166c-.25.192-.398.493-.398.812V12.2c0 .454.296.853.725.977l3.948 1.365A1 1 0 0 0 7 13.596V3.41ZM9 13.596a1 1 0 0 0 1.327.946l3.948-1.365c.429-.124.725-.523.725-.977V2.017c0-.32-.147-.62-.398-.812a.987.987 0 0 0-.877-.166L9.668 2.467A1 1 0 0 0 9 3.41v10.186Z" />
+    </svg>
+  );
+}
+
+function GitHubIcon(props) {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" {...props}>
+      <path d="M8 .198a8 8 0 0 0-8 8 7.999 7.999 0 0 0 5.47 7.59c.4.076.547-.172.547-.384 0-.19-.007-.694-.01-1.36-2.226.482-2.695-1.074-2.695-1.074-.364-.923-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.224 1.873.87 2.33.666.072-.518.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.954 0-.873.31-1.586.823-2.146-.09-.202-.36-1.016.07-2.118 0 0 .67-.214 2.2.82a7.67 7.67 0 0 1 2-.27 7.67 7.67 0 0 1 2 .27c1.52-1.034 2.19-.82 2.19-.82.43 1.102.16 1.916.08 2.118.51.56.82 1.273.82 2.146 0 3.074-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38A7.972 7.972 0 0 0 16 8.199a8 8 0 0 0-8-8Z" />
+    </svg>
+  );
+}
+
+function FeedIcon(props) {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.5 3a.5.5 0 0 1 .5-.5h.5c5.523 0 10 4.477 10 10v.5a.5.5 0 0 1-.5.5h-.5a.5.5 0 0 1-.5-.5v-.5A8.5 8.5 0 0 0 3.5 4H3a.5.5 0 0 1-.5-.5V3Zm0 4.5A.5.5 0 0 1 3 7h.5A5.5 5.5 0 0 1 9 12.5v.5a.5.5 0 0 1-.5.5H8a.5.5 0 0 1-.5-.5v-.5a4 4 0 0 0-4-4H3a.5.5 0 0 1-.5-.5v-.5Zm0 5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
+      />
+    </svg>
+  );
+}
+
+function XIcon(props) {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" {...props}>
+      <path d="M9.51762 6.77491L15.3459 0H13.9648L8.90409 5.88256L4.86212 0H0.200195L6.31244 8.89547L0.200195 16H1.58139L6.92562 9.78782L11.1942 16H15.8562L9.51728 6.77491H9.51762ZM7.62588 8.97384L7.00658 8.08805L2.07905 1.03974H4.20049L8.17706 6.72795L8.79636 7.61374L13.9654 15.0075H11.844L7.62588 8.97418V8.97384Z" />
+    </svg>
+  );
+}
+
+export function Intro() {
+  return (
+    <>
+      <div>
+        <Link href="/">
+          <Image
+            src="/ohc_logo_white.png"
+            alt="Open Healthcare Network"
+            width={160}
+            height={40}
+            priority
+          />
+        </Link>
+      </div>
+      <h1 className="mt-14 font-display text-4xl/tight font-light text-white">
+        Committed to <span className="text-sky-300">Openness</span> from Day One
+      </h1>
+      <p className="mt-4 text-sm/6 text-gray-300">
+        At Open Healthcare Network, we’ve been open source since our inception.
+        We are proud to say that all our projects are released under the MIT
+        License, ensuring that they remain free and accessible for everyone to
+        use, modify, and distribute. Our commitment to open source is rooted in
+        our belief in the power of community-driven development.
+        <br />
+        <br />
+        Our projects are not just open in terms of accessibility; they are
+        actively managed and evolved by a vibrant community of developers and
+        healthcare professionals from around the globe. This community focus
+        ensures that our tools are continuously improved and remain at the
+        cutting edge of technology and healthcare needs.
+      </p>
+      <div className="mt-8 flex flex-wrap justify-center gap-x-1 gap-y-3 sm:gap-x-2 ">
+        <IconLink
+          href="https://github.com/coronasafe/care_fe/"
+          icon={GitHubIcon}
+          className="flex-none px-4"
+        >
+          Star us on GitHub
+        </IconLink>
+      </div>
+    </>
+  );
+}
+
+export function IntroFooter() {
+  return (
+    <p className="flex items-baseline gap-x-2 text-[0.8125rem]/6 text-gray-500">
+      Brought to you by{" "}
+      <IconLink href="#" icon={XIcon} compact>
+        Joe Davola
+      </IconLink>
+    </p>
+  );
+}

components/Commit/Logo.jsx

@@ -0,0 +1,47 @@
+import { useId } from 'react'
+
+export function Logo(props) {
+  let id = useId()
+
+  return (
+    <svg viewBox="0 0 140 32" fill="none" aria-hidden="true" {...props}>
+      <title>Commit</title>
+      <mask id={`${id}-m`} fill="#fff">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M31.75 18h-8.13a8 8 0 01-15.5 0H0a16 16 0 0031.75 0zm0-4h-8.13a8 8 0 00-15.5 0H0a16 16 0 0131.75 0z"
+        />
+      </mask>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M31.75 18h-8.13a8 8 0 01-15.5 0H0a16 16 0 0031.75 0zm0-4h-8.13a8 8 0 00-15.5 0H0a16 16 0 0131.75 0z"
+        fill={`url(#${id}-g)`}
+      />
+      <path
+        d="M31.75 18l1 .12.13-1.12h-1.13v1zm-8.13 0v-1h-.77l-.2.75.97.25zm-15.5 0l.98-.25-.2-.75h-.77v1zM0 18v-1h-1.13l.14 1.12L0 18zm23.62-4l-.96.25.19.75h.77v-1zm8.13 0v1h1.13l-.14-1.12-.99.12zM8.13 14v1h.77l.2-.75-.97-.25zM0 14l-1-.12-.13 1.12H0v-1zm31.75 3h-8.13v2h8.13v-2zm-9.1.75A7 7 0 0115.89 23v2a9 9 0 008.71-6.75l-1.93-.5zM15.89 23a7 7 0 01-6.78-5.25l-1.94.5A9 9 0 0015.88 25v-2zm-7.75-6H0v2h8.13v-2zm7.75 14A15 15 0 01.99 17.88l-1.98.24A17 17 0 0015.88 33v-2zm14.88-13.12A15 15 0 0115.88 31v2a17 17 0 0016.86-14.88l-1.98-.24zM23.62 15h8.13v-2h-8.13v2zm-7.74-6a7 7 0 016.78 5.25l1.93-.5A9 9 0 0015.88 7v2zM9.1 14.25A7 7 0 0115.88 9V7a9 9 0 00-8.72 6.75l1.94.5zM0 15h8.13v-2H0v2zm1-.88A15 15 0 0115.87 1v-2A17 17 0 00-1 13.88l1.98.24zM15.87 1a15 15 0 0114.88 13.12l1.98-.24A17 17 0 0015.88-1v2z"
+        fill="#fff"
+        fillOpacity={0.2}
+        mask={`url(#${id}-m)`}
+      />
+      <path
+        d="M52.42 24.24c4.5 0 7.83-2.54 8.26-6.36h-4.37c-.33 1.63-1.94 2.69-3.89 2.69-2.7 0-4.46-1.66-4.46-5.33 0-3.65 1.75-5.3 4.46-5.3 2.02 0 3.5 1.1 3.9 2.66h4.36c-.43-3.8-3.7-6.34-8.26-6.34-5.32 0-8.88 3.24-8.88 8.98 0 5.76 3.56 9 8.88 9zm16.35 0c4.18 0 6.56-2.71 6.56-6.72 0-4.25-2.62-6.72-6.56-6.72-4.17 0-6.57 2.71-6.57 6.72 0 4.25 2.64 6.72 6.57 6.72zm0-3.29c-1.5 0-2.47-1.05-2.47-3.43 0-2.4.99-3.46 2.47-3.46 1.5 0 2.48 1.06 2.48 3.46s-.99 3.43-2.48 3.43zm8.6 3.05h4.06v-7.27c0-1.35.8-2.64 2.33-2.64 1.42 0 2 .96 2 2.93V24h4.07v-7.27c0-1.35.8-2.64 2.3-2.64 1.42 0 2.02.96 2.02 2.93V24h4.06v-7.87c0-3.87-1.94-5.33-4.4-5.33-1.91 0-3.57.94-4.14 2.8h-.2c-.7-2.06-2.3-2.8-4.05-2.8-1.68 0-3.2.84-3.8 2.47h-.19l-.12-2.23h-3.93V24zm23.5 0h4.05v-7.27c0-1.35.8-2.64 2.33-2.64 1.41 0 1.99.96 1.99 2.93V24h4.08v-7.27c0-1.35.8-2.64 2.3-2.64 1.42 0 2.02.96 2.02 2.93V24h4.05v-7.87c0-3.87-1.94-5.33-4.39-5.33-1.92 0-3.57.94-4.15 2.8h-.2c-.69-2.06-2.3-2.8-4.05-2.8-1.68 0-3.19.84-3.79 2.47h-.2l-.11-2.23h-3.94V24zm23.48-14.47h4.05V6.5h-4.05v3.03zm0 14.47h4.05V11.04h-4.05V24zm11.45 0h2.95v-3.26h-1.51c-.63 0-.99-.17-.99-.9V14.3h2.5v-3.26h-2.5v-3.8l-4.05.37v3.43h-2.23v3.26h2.23v6.3c0 2.06.72 3.4 3.6 3.4z"
+        fill="#fff"
+      />
+      <defs>
+        <linearGradient
+          id={`${id}-g`}
+          x1={15.88}
+          y1={0}
+          x2={15.88}
+          y2={32}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#AAE4FF" />
+          <stop offset={1} stopColor="#38BDF8" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}

components/Commit/SignUpForm.jsx

@@ -0,0 +1,29 @@
+import { useId } from "react";
+
+import { Button } from "@/components/Commit/Button";
+
+export function SignUpForm() {
+  let id = useId();
+
+  return (
+    <form className="relative isolate mt-8 flex items-center pr-1">
+      <label htmlFor={id} className="sr-only">
+        Email address
+      </label>
+      <input
+        required
+        type="email"
+        autoComplete="email"
+        name="email"
+        id={id}
+        placeholder="Email address"
+        className="peer w-0 flex-auto bg-transparent px-4 py-2.5 text-base text-white placeholder:text-gray-500 focus:outline-none sm:text-[0.8125rem]/6"
+      />
+      <Button type="submit" arrow>
+        Get updates
+      </Button>
+      <div className="absolute inset-0 -z-10 rounded-lg transition peer-focus:ring-4 peer-focus:ring-sky-300/15" />
+      <div className="absolute inset-0 -z-10 rounded-lg bg-white/2.5 ring-1 ring-white/15 transition peer-focus:ring-sky-300" />
+    </form>
+  );
+}