joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

For macOS too!

Browse Source
This commit is contained in:
Joshua Higgins
2024-10-16 11:30:22 -04:00
parent 6a72071525
commit 8116bfd43a
3 changed files with 35 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
package-lock.json generated
View File

@@ -37,6 +37,7 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.52.2",
"react-icons": "^5.3.0",
"react-markdown": "^9.0.1",
"react-spring": "^9.7.4",
"react-sticky-box": "^2.0.5",
@@ -17062,6 +17063,14 @@
"react": "^16.8.0 || ^17 || ^18 || ^19"
}
},
"node_modules/react-icons": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
"integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

1
package.json
View File

@@ -45,6 +45,7 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.52.2",
"react-icons": "^5.3.0",
"react-markdown": "^9.0.1",
"react-spring": "^9.7.4",
"react-sticky-box": "^2.0.5",

31
src/components/header.tsx
View File

@@ -8,10 +8,11 @@ import { AppWindow, AppWindowIcon, AppWindowMac, ChevronDown } from "lucide-reac
import CoolHeaderText from "./cool-header-text";
import Particles from "./ui/particles";
import confetti from "canvas-confetti";
import { FaApple } from "react-icons/fa";
const download = () => {
function download(link: string): void {
throwConfetti()
window.location.replace(`https://github.com/joshuafhiggins/realm-chat/releases/latest/download/Realm.exe`)
window.location.replace(link)
}
const throwConfetti = () => {
@@ -57,13 +58,31 @@ export default function Header() {
Collaborate, Communicate, Connect
<br className="hidden md:block" /> Because that's what you wanted and you deserve to own your content.
</p>
<div className="flex w-full flex-col justify-center md:flex-row">
<a >
<Button className="-translate-y-4 animate-fade-in gap-1 text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black" onClick={download}>
<span>Download Realm for </span>
<div className="flex w-full flex-col justify-center md:flex-col">
<a className="py-1">
<Button className="-translate-y-4 animate-fade-in gap-1 text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black" onClick={() => {
download("https://github.com/joshuafhiggins/realm-chat/releases/latest/download/Realm.exe")
}}>
<span>Download Realm for Windows </span>
<svg className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" xmlns="http://www.w3.org/2000/svg" width="64" height="64" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M.2 298.669L0 90.615l256.007-34.76v242.814H.201zM298.658 49.654L639.905-.012v298.681H298.657V49.654zM640 341.331l-.071 298.681L298.669 592V341.332h341.33zM255.983 586.543L.189 551.463v-210.18h255.794v245.26z"/></svg>
</Button>
</a>
<a className="py-1">
<Button className="-translate-y-4 animate-fade-in gap-1 text-white opacity-0 ease-in-out [--animation-delay:800ms] dark:text-black" onClick={() => {
download("https://github.com/joshuafhiggins/realm-chat/releases/latest/download/Realm.app")
}}>
<span>Download Realm for macOS (Apple Silicon) </span>
<FaApple className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" width="64" height="64" />
</Button>
</a>
<a className="py-1">
<Button className="-translate-y-4 animate-fade-in gap-1 text-white opacity-0 ease-in-out [--animation-delay:1000ms] dark:text-black" onClick={() => {
download("https://github.com/joshuafhiggins/realm-chat/releases/latest/download/Realm (Intel).app")
}}>
<span>Download Realm for macOS (Intel) </span>
<FaApple className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" width="64" height="64" />
</Button>
</a>
</div>
</section>
<Particles