openSenseMap · freds-dev · Mar 22, 2023 · Mar 13, 2023 · Mar 17, 2023 · Mar 17, 2023
diff --git a/app/components/landing/features.tsx b/app/components/landing/features.tsx
@@ -0,0 +1,58 @@
+const features = [
+  {
+    title: "API for all",
+    description:
+      "Die wahrscheinlich größte offene Plattform für Umwelt- und Sensordaten weltweit ermöglicht es allen Menschen kostenfrei auf umfangreiche Daten zuzugreifen, diese zu analysieren. Typography",
+    icon: "/landing/api.svg",
+  },
+  {
+    title: "Open data",
+    description:
+      "Die wahrscheinlich größte offene Plattform für Umwelt- und Sensordaten weltweit ermöglicht es allen Menschen kostenfrei auf umfangreiche Daten zuzugreifen, diese zu analysieren. Typography",
+    icon: "/landing/open-cardboard-box.png",
+  },
+  {
+    title: "Free access",
+    description:
+      "Die wahrscheinlich größte offene Plattform für Umwelt- und Sensordaten weltweit ermöglicht es allen Menschen kostenfrei auf umfangreiche Daten zuzugreifen, diese zu analysieren. Typography",
+    icon: "/landing/free.svg",
+  },
+  {
+    title: "Free registration",
+    description:
+      "Die wahrscheinlich größte offene Plattform für Umwelt- und Sensordaten weltweit ermöglicht es allen Menschen kostenfrei auf umfangreiche Daten zuzugreifen, diese zu analysieren. Typography",
+    icon: "/landing/tasks.svg",
+  },
+];
+
+export default function Features() {
+  return (
+    <div id="features" className="flex h-full items-center justify-center">
+      <div className="w-5/6">
+        <div className="flex items-center justify-center pb-10">
+          <p className="font-serif text-6xl font-black text-green-100 subpixel-antialiased dark:text-green-200">
+            Features
+          </p>
+        </div>
+        <div className="flex">
+          {features.map((feature, index) => {
+            return (
+              <div
+                key={index}
+                className="flex items-center flex-col justify-center rounded-2xl border-4 border-solid border-green-100 p-4 text-gray-300 dark:border-green-200 dark:text-gray-100 md:m-4"
+              >
+                <div className="pb-4 font-serif text-2xl font-extrabold text-green-100 subpixel-antialiased dark:text-green-200">
+                  {feature.title}
+                </div>
+                <div className="text-center text-lg">{feature.description}</div>
+                <div className="pt-4">
+                  <img src={feature.icon} alt="api_svg" />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/landing/footer.tsx b/app/components/landing/footer.tsx
@@ -0,0 +1,62 @@
+import { Link } from "@remix-run/react";
+
+export default function Footer() {
+  return (
+    <footer className="w-full p-4 text-gray-300 dark:text-gray-100 sm:p-6 lg:text-lg bg-white dark:bg-black">
+      <hr className="my-6 border-gray-300 dark:border-gray-100 sm:mx-auto lg:my-8" />
+      <div className="sm:flex sm:items-center sm:justify-between">
+        <div className="mt-4 flex w-full items-center space-x-6 sm:mt-0 sm:justify-center">
+          <div className="flex w-1/2 justify-around">
+            <Link target="_blank" rel="noreferrer" to={"mailto:info@opensenselab.org"}>Kontakt</Link>
+            <Link target="_blank" rel="noreferrer" to={"/impressum"}>Impressum</Link>
+            <Link target="_blank" rel="noreferrer" to={"https://pad.opensenselab.org"}>Hedgedoc</Link>
+            <Link target="_blank" rel="noreferrer" to={"https://chat.opensenselab.org"}>Mattermost</Link>
+          </div>
+          <div className="flex w-1/2 justify-end">
+            <a href="https://www.instagram.com/opensenselab/" target="_blank" className="px-8 hover:text-green-100 dark:hover:text-green-200">
+              <svg
+                className="h-10 w-10"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              <span className="sr-only">Instagram page</span>
+            </a>
+            <a href="https://twitter.com/openSenseLab" target="_blank" className="px-8 hover:text-green-100 dark:hover:text-green-200">
+              <svg
+                className="h-10 w-10"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+              </svg>
+              <span className="sr-only">Twitter page</span>
+            </a>
+            <a href="https://github.com/opensenselab" target="_blank" className="px-8 hover:text-green-100 dark:hover:text-green-200">
+              <svg
+                className="h-10 w-10"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <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>
+              <span className="sr-only">GitHub account</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/app/components/landing/header.tsx b/app/components/landing/header.tsx
@@ -0,0 +1,110 @@
+import { Link } from "@remix-run/react";
+import { Theme, useTheme } from "~/utils/themeProvider";
+import { SunIcon, MoonIcon } from "@heroicons/react/24/solid";
+
+const links = [
+  {
+    name: "Explore",
+    link: "/explore",
+  },
+  {
+    name: "Features",
+    link: "#features",
+  },
+  {
+    name: "Tools",
+    link: "#tools",
+  },
+  {
+    name: "Use Cases",
+    link: "#useCases",
+  },
+  {
+    name: "Partners",
+    link: "#partners",
+  },
+];
+
+export default function Header() {
+  const [theme, setTheme] = useTheme();
+  const toggleTheme = () => {
+    setTheme((prevTheme) =>
+      prevTheme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT
+    );
+  };
+
+  return (
+    <nav className="absolute top-0 z-50 w-full bg-white px-2 py-2.5 shadow-md shadow-headerBorder dark:bg-black sm:px-4">
+      <div className="container z-50 mx-auto flex flex-wrap items-center justify-between font-serif">
+        <div className="flex">
+          <Link to="/" className="flex items-center pr-10">
+            <img src="/logo.png" className="mr-3 h-6 sm:h-9" alt="osem Logo" />
+            <span className="self-center whitespace-nowrap text-xl font-semibold text-green-100 dark:text-green-200">
+              openSenseMap
+            </span>
+          </Link>
+          <div
+            className="hidden w-full items-center justify-between text-lg font-bold text-gray-400 dark:text-gray-300 md:order-1 md:flex md:w-auto"
+            id="navbar-cta"
+          >
+            <ul className="mt-4 flex flex-col rounded-lg p-4 md:mt-0 md:flex-row md:space-x-8 md:text-sm md:font-medium">
+              {links.map((item, index) => {
+                return (
+                  <li key={index}>
+                    <Link
+                      to={item.link}
+                      className="block rounded py-2 pl-3 pr-4 md:p-0 md:hover:text-green-100 dark:md:hover:text-green-200"
+                    >
+                      {item.name}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+        <div className="flex items-center justify-center md:order-2">
+          <div className="flex items-center justify-center pr-8">
+            <button onClick={toggleTheme}>
+              {theme === "light" ? (
+                <MoonIcon className="h-6 w-6 text-gray-300 lg:h-8 lg:w-8" />
+              ) : (
+                <SunIcon className="h-6 w-6 text-gray-400 lg:h-8 lg:w-8" />
+              )}
+            </button>
+          </div>
+          <button
+            type="button"
+            className="rounded-lg border-l-2 border-t-2 border-r-4 border-b-4 border-green-100 p-2 text-center text-sm font-medium text-black dark:border-green-200 dark:bg-green-200"
+          >
+            <Link to="/explore" rel="intent">
+              Donate
+            </Link>
+          </button>
+          <button
+            data-collapse-toggle="navbar-cta"
+            type="button"
+            className="text-gray-500 inline-flex items-center rounded-lg p-2 text-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 md:hidden"
+            aria-controls="navbar-cta"
+            aria-expanded="false"
+          >
+            <span className="sr-only">Open main menu</span>
+            <svg
+              className="h-6 w-6"
+              aria-hidden="true"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/app/components/landing/partners.tsx b/app/components/landing/partners.tsx
@@ -0,0 +1,89 @@
+const partners = [
+  {
+    name: "Partner 1",
+    logo: "/landing/logo_ifgi_long.png",
+  },
+  {
+    name: "Partner 2",
+    logo: "/landing/logo_ifgi_long.png",
+  },
+  {
+    name: "Partner 3",
+    logo: "/landing/logo_ifgi_long.png",
+  },
+  {
+    name: "Partner 4",
+    logo: "/landing/logo_ifgi_long.png",
+  },
+  {
+    name: "Partner 5",
+    logo: "/landing/logo_ifgi_long.png",
+  },
+  {
+    name: "Partner 6",
+    logo: "/landing/sensebox_wort_logo.png",
+  },
+  {
+    name: "Partner 7",
+    logo: "/landing/sensebox_wort_logo.png",
+  },
+  {
+    name: "Partner 8",
+    logo: "/landing/sensebox_wort_logo.png",
+  },
+  {
+    name: "Partner 9",
+    logo: "/landing/sensebox_wort_logo.png",
+  },
+  {
+    name: "Partner 10",
+    logo: "/landing/sensebox_wort_logo.png",
+  },
+  {
+    name: "Partner 11",
+    logo: "/landing/logo_ifgi_long.png",
+  },
+  {
+    name: "Partner 12",
+    logo: "/landing/logo_ifgi_long.png",
+  },
+  {
+    name: "Partner 13",
+    logo: "/landing/logo_ifgi_long.png",
+  },
+  {
+    name: "Partner 14",
+    logo: "/landing/logo_ifgi_long.png",
+  },
+  {
+    name: "Partner 15",
+    logo: "/landing/logo_ifgi_long.png",
+  },
+];
+
+export default function Partners() {
+  return (
+    <div id="partners" className="flex h-full min-h-full items-center justify-center text-gray-300 text-xl dark:text-gray-100">
+      <div className="flex w-5/6 flex-col">
+        <div className="flex items-center justify-center pb-10">
+          <p className="font-serif text-6xl font-black text-blue-100 subpixel-antialiased dark:text-blue-200">
+            Partners
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center justify-center">
+          {partners.map((partner, index) => {
+            return (
+              <div key={index} className="w-1/5 p-8">
+                <img src={partner.logo} alt={partner.name}></img>
+              </div>
+            );
+          })}
+        </div>
+        <div className="flex flex-col items-center justify-center">
+          <p>hosted by</p>
+          <img src="/landing/openSenseLab_logo.png" alt="openSenseLab Logo"></img>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/landing/preview.tsx b/app/components/landing/preview.tsx
@@ -0,0 +1,39 @@
+import { Link } from "@remix-run/react";
+
+export default function Preview() {
+  return (
+    <div className="h-full items-center md:justify-between md:flex">
+      <div className="md:basis-2/3 flex flex-col">
+        <p className="pl-10 font-serif text-6xl font-black text-green-100 subpixel-antialiased dark:text-green-200">
+          openSenseMap
+        </p>
+        <div className="w-3/4 pl-10 pt-6 font-sans text-lg text-gray-300 dark:text-gray-100 xl:text-2xl self-end">
+          <p className="text-gray-500 font-extrabold">
+            Die offene Plattform für Umweltdaten
+          </p>
+          <p className="pt-2">
+            Die wahrscheinlich größte offene Plattform für Umwelt- und
+            Sensordaten weltweit ermöglicht es allen Menschen kostenfrei auf
+            umfangreiche Daten zuzugreifen, diese zu analysieren und eigene
+            Messungen zu veröffentlichen. Dadurch ist ein einzigartiger
+            Datensatz mit Echtzeitdaten überall auf der Welt entstanden, der
+            nachprüfbare lokale wie globale Fakten zu Umweltphänomenen wie dem
+            Klimawandel liefert.
+          </p>
+          <Link to="/explore" prefetch="intent">
+            <button className="mt-2 rounded-lg border-l-4 border-t-4 border-b-8 border-r-8 border-solid border-green-100 p-1 text-gray-300 dark:border-green-200 dark:bg-green-200 dark:text-black">
+              access OSEM
+            </button>
+          </Link>
+        </div>
+      </div>
+      <div className="hidden md:block">
+        <img
+          src="/landing/screenshot_osem.png"
+          alt="osem_screenshot"
+          className="h-full rounded-l-full"
+        />
+      </div>
+    </div>
+  );
+}