frontend/app/components/landing/integrations.tsx at 152e123af08d536de98745420fbc90f1822ece02 · openSenseMap/frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import { ArrowUpDown, RadioTower, Unplug } from "lucide-react";

export default function Integrations() {
  return (
    <section
      id="integrations-section"
      className="flex justify-between mx-32 gap-10 border-t border-gray-200 py-20"
    >
      <div id="left" className="w-1/2 flex flex-col gap-10">
        <div id="title" className="text-2xl font-semibold">
          Integrations
          <div id="description" className="text-lg font-medium">
            We support different data communication protocols and offer specific
            integrations for them.
          </div>
        </div>
        <img src="/integration.svg" alt="" className="w-1/2 h-1/2" />
      </div>
      <div id="right" className="w-1/2">
        <div className="grid grid-cols-2 gap-4">
          <div className="flex flex-col border-2 rounded-sm px-4 py-2 text-lg">
            <a
              href="https://docs.opensensemap.org/"
              rel="noopener noreferrer"
              target="_blank"
              className="flex items-center gap-3"
            >
              <ArrowUpDown className="h-4 w-4 mr-2" />
              HTTP API
            </a>
          </div>
          <div className="flex flex-col border-2 rounded-sm px-4 py-2 text-lg">
            <a
              href="https://tutorials.opensensemap.org/integrations/integrations-mqtt/"
              rel="noopener noreferrer"
              target="_blank"
              className="flex items-center gap-3"
            >
              <Unplug className="h-4 w-4 mr-2" />
              MQTT
            </a>
          </div>
          <div className="flex flex-col border-2 rounded-sm px-4 py-2 text-lg">
            <a
              href="https://tutorials.opensensemap.org/integrations/integrations-ttnv3/"
              rel="noopener noreferrer"
              target="_blank"
              className="flex items-center gap-3"
            >
              <RadioTower className="h-4 w-4 mr-2" />
              TTN v3 (LoRa WAN)
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}