metadata and titles
This commit is contained in:
Michael Freno
@@ -1,3 +1,4 @@
|
||||
import { Title, Meta } from "@solidjs/meta";
|
||||
import { A } from "@solidjs/router";
|
||||
import DownloadOnAppStore from "~/components/icons/DownloadOnAppStore";
|
||||
import GitHub from "~/components/icons/GitHub";
|
||||
@@ -21,147 +22,155 @@ export default function DownloadsPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="bg-base min-h-screen pt-[15vh] pb-12">
|
||||
<div class="text-text text-center text-3xl tracking-widest">
|
||||
Downloads
|
||||
</div>
|
||||
<>
|
||||
<Title>Downloads | Michael Freno</Title>
|
||||
<Meta
|
||||
name="description"
|
||||
content="Download Life and Lineage, Shapes with Abigail, and Cork for macOS. Available on iOS, Android, and macOS."
|
||||
/>
|
||||
|
||||
<div class="pt-12">
|
||||
<div class="text-text text-center text-xl tracking-wide">
|
||||
Life and Lineage
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-evenly md:mx-[25vw]">
|
||||
<div class="flex w-1/3 flex-col">
|
||||
<div class="text-center text-lg">Android (apk only)</div>
|
||||
<button
|
||||
onClick={() => download("lineage")}
|
||||
class="bg-blue mt-2 rounded-md px-4 py-2 text-base shadow-lg transition-all duration-200 ease-out hover:brightness-125 active:scale-95"
|
||||
>
|
||||
Download APK
|
||||
</button>
|
||||
<div class="mt-2 text-center text-sm italic">
|
||||
Note the android version is not well tested, and has performance
|
||||
issues.
|
||||
</div>
|
||||
<div class="rule-around">Or</div>
|
||||
|
||||
<div class="mx-auto italic">(Coming soon)</div>
|
||||
<button
|
||||
onClick={joinBetaPrompt}
|
||||
class="mx-auto transition-all duration-200 ease-out active:scale-95"
|
||||
>
|
||||
<img
|
||||
src="/google-play-badge.png"
|
||||
alt="google-play"
|
||||
width={180}
|
||||
height={60}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="text-center text-lg">iOS</div>
|
||||
<A
|
||||
class="my-auto transition-all duration-200 ease-out active:scale-95"
|
||||
href="https://apps.apple.com/us/app/life-and-lineage/id6737252442"
|
||||
>
|
||||
<DownloadOnAppStore size={50} />
|
||||
</A>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-12">
|
||||
<div class="text-center text-xl tracking-wide dark:text-white">
|
||||
Shapes with Abigail!
|
||||
<br />
|
||||
(apk and iOS)
|
||||
</div>
|
||||
|
||||
<div class="flex justify-evenly md:mx-[25vw]">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-center text-lg">Android</div>
|
||||
<button
|
||||
onClick={() => download("shapes-with-abigail")}
|
||||
class="bg-blue mt-2 rounded-md px-4 py-2 text-base shadow-lg transition-all duration-200 ease-out hover:brightness-125 active:scale-95"
|
||||
>
|
||||
Download APK
|
||||
</button>
|
||||
<div class="rule-around">Or</div>
|
||||
<div class="mx-auto italic">(Coming soon)</div>
|
||||
<button
|
||||
onClick={joinBetaPrompt}
|
||||
class="transition-all duration-200 ease-out active:scale-95"
|
||||
>
|
||||
<img
|
||||
src="/google-play-badge.png"
|
||||
alt="google-play"
|
||||
width={180}
|
||||
height={60}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="text-center text-lg">iOS</div>
|
||||
<A
|
||||
class="my-auto transition-all duration-200 ease-out active:scale-95"
|
||||
href="https://apps.apple.com/us/app/shapes-with-abigail/id6474561117"
|
||||
>
|
||||
<DownloadOnAppStore size={50} />
|
||||
</A>
|
||||
</div>
|
||||
<div class="bg-base min-h-screen pt-[15vh] pb-12">
|
||||
<div class="text-text text-center text-3xl tracking-widest">
|
||||
Downloads
|
||||
</div>
|
||||
|
||||
<div class="pt-12">
|
||||
<div class="text-text text-center text-xl tracking-wide">
|
||||
Cork
|
||||
Life and Lineage
|
||||
<br />
|
||||
(macOS 13 Ventura or later)
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
onClick={() => download("cork")}
|
||||
class="bg-blue my-2 rounded-md px-4 py-2 text-base shadow-lg transition-all duration-200 ease-out hover:brightness-125 active:scale-95"
|
||||
>
|
||||
Download app
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-center text-sm">
|
||||
Just unzip and drag into 'Applications' folder
|
||||
<div class="flex justify-evenly md:mx-[25vw]">
|
||||
<div class="flex w-1/3 flex-col">
|
||||
<div class="text-center text-lg">Android (apk only)</div>
|
||||
<button
|
||||
onClick={() => download("lineage")}
|
||||
class="bg-blue mt-2 rounded-md px-4 py-2 text-base shadow-lg transition-all duration-200 ease-out hover:brightness-125 active:scale-95"
|
||||
>
|
||||
Download APK
|
||||
</button>
|
||||
<div class="mt-2 text-center text-sm italic">
|
||||
Note the android version is not well tested, and has performance
|
||||
issues.
|
||||
</div>
|
||||
<div class="rule-around">Or</div>
|
||||
|
||||
<div class="mx-auto italic">(Coming soon)</div>
|
||||
<button
|
||||
onClick={joinBetaPrompt}
|
||||
class="mx-auto transition-all duration-200 ease-out active:scale-95"
|
||||
>
|
||||
<img
|
||||
src="/google-play-badge.png"
|
||||
alt="google-play"
|
||||
width={180}
|
||||
height={60}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="text-center text-lg">iOS</div>
|
||||
<A
|
||||
class="my-auto transition-all duration-200 ease-out active:scale-95"
|
||||
href="https://apps.apple.com/us/app/life-and-lineage/id6737252442"
|
||||
>
|
||||
<DownloadOnAppStore size={50} />
|
||||
</A>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="icons flex justify-center gap-4 pt-24 pb-6">
|
||||
<li>
|
||||
<A
|
||||
href="https://github.com/MikeFreno/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="shaker border-text inline-block rounded-full border transition-transform hover:scale-110"
|
||||
>
|
||||
<span class="m-auto block p-2">
|
||||
<GitHub height={24} width={24} fill={undefined} />
|
||||
</span>
|
||||
</A>
|
||||
</li>
|
||||
<li>
|
||||
<A
|
||||
href="https://www.linkedin.com/in/michael-freno-176001256/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="shaker border-text inline-block rounded-full border transition-transform hover:scale-110"
|
||||
>
|
||||
<span class="m-auto block rounded-md p-2">
|
||||
<LinkedIn height={24} width={24} fill={undefined} />
|
||||
</span>
|
||||
</A>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="pt-12">
|
||||
<div class="text-center text-xl tracking-wide dark:text-white">
|
||||
Shapes with Abigail!
|
||||
<br />
|
||||
(apk and iOS)
|
||||
</div>
|
||||
|
||||
<div class="flex justify-evenly md:mx-[25vw]">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-center text-lg">Android</div>
|
||||
<button
|
||||
onClick={() => download("shapes-with-abigail")}
|
||||
class="bg-blue mt-2 rounded-md px-4 py-2 text-base shadow-lg transition-all duration-200 ease-out hover:brightness-125 active:scale-95"
|
||||
>
|
||||
Download APK
|
||||
</button>
|
||||
<div class="rule-around">Or</div>
|
||||
<div class="mx-auto italic">(Coming soon)</div>
|
||||
<button
|
||||
onClick={joinBetaPrompt}
|
||||
class="transition-all duration-200 ease-out active:scale-95"
|
||||
>
|
||||
<img
|
||||
src="/google-play-badge.png"
|
||||
alt="google-play"
|
||||
width={180}
|
||||
height={60}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="text-center text-lg">iOS</div>
|
||||
<A
|
||||
class="my-auto transition-all duration-200 ease-out active:scale-95"
|
||||
href="https://apps.apple.com/us/app/shapes-with-abigail/id6474561117"
|
||||
>
|
||||
<DownloadOnAppStore size={50} />
|
||||
</A>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-12">
|
||||
<div class="text-text text-center text-xl tracking-wide">
|
||||
Cork
|
||||
<br />
|
||||
(macOS 13 Ventura or later)
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
onClick={() => download("cork")}
|
||||
class="bg-blue my-2 rounded-md px-4 py-2 text-base shadow-lg transition-all duration-200 ease-out hover:brightness-125 active:scale-95"
|
||||
>
|
||||
Download app
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-center text-sm">
|
||||
Just unzip and drag into 'Applications' folder
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="icons flex justify-center gap-4 pt-24 pb-6">
|
||||
<li>
|
||||
<A
|
||||
href="https://github.com/MikeFreno/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="shaker border-text inline-block rounded-full border transition-transform hover:scale-110"
|
||||
>
|
||||
<span class="m-auto block p-2">
|
||||
<GitHub height={24} width={24} fill={undefined} />
|
||||
</span>
|
||||
</A>
|
||||
</li>
|
||||
<li>
|
||||
<A
|
||||
href="https://www.linkedin.com/in/michael-freno-176001256/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="shaker border-text inline-block rounded-full border transition-transform hover:scale-110"
|
||||
>
|
||||
<span class="m-auto block rounded-md p-2">
|
||||
<LinkedIn height={24} width={24} fill={undefined} />
|
||||
</span>
|
||||
</A>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user