@@ -1,6 +1,6 @@
11import Head from "next/head";
22import Link from "next/link";
3−import { useState } from "react";
3+import React, { useState, useEffect } from "react";
44import Container from "../components/Container";
55import SingleColumn from "../components/SingleColumn";
66import Header from "../components/Header";
@@ -14,6 +14,37 @@ import { contact } from "../lib/constants";
1414
1515export default function Home({ posts, events, openGrantsCount, toggleSearch }) {
1616 const [tab, setTab] = useState(0);
17+ const [heroButton, setHeroButton] = useState(<div />);
18+
19+ const detectOS = () => {
20+ const agent = window.navigator.appVersion;
21+ if (agent.includes("Win")) {
22+ return (
23+ <span className="button-lg type-ui mb-5 bg-ultraDeepWall text-white">
24+ Coming soon for Windows
25+ </span>
26+ );
27+ } else if (agent.includes("Mac")) {
28+ return (
29+ <a href="https://github.com/arthyn/port/releases/latest/download/Port.dmg">
30+ <button className="button-lg type-ui mb-5 bg-green text-white">
31+ Download For macOS
32+ </button>
33+ </a>
34+ );
35+ } else if (agent.includes("Linux")) {
36+ return (
37+ <code className="button-lg type-ui mb-5 bg-ultraDeepWall text-white">
38+ sudo snap install port
39+ </code>
40+ );
41+ }
42+ };
43+
44+ useEffect(() => {
45+ setHeroButton(detectOS());
46+ }, []);
47+
1748 return (
1849 <Container>
1950 <SingleColumn>
@@ -43,10 +74,13 @@ export default function Home({ posts, events, openGrantsCount, toggleSearch }) {
4374 Getting into Urbit is now as simple as installing an app on your
4475 computer.
4576 </p>
46− <button className="button-lg type-ui mb-5 bg-green text-white">
47− Download For Mac
48− </button>
49− <a className="type-ui text-gray">View on GitHub</a>
77+ {heroButton}
78+ <a
79+ href="https://github.com/arthyn/port"
80+ className="type-ui text-gray"
81+ >
82+ View on GitHub
83+ </a>
5084 </div>
5185 <div className="w-full hero-image-height hero-image mt-8" />
5286 </div>