You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
5.3 KiB
TypeScript
136 lines
5.3 KiB
TypeScript
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { useTheme } from "next-themes";
|
|
import Link from "next/link";
|
|
import Image from "next/future/image";
|
|
import { NextPageWithLayout } from "./_app";
|
|
import { ReactElement } from "react";
|
|
import onyxDark from "../public/demos/onyx-dark.png";
|
|
import onyxLight from "../public/demos/onyx-light.png";
|
|
import timeshiftSnapshots from "../public/demos/timeshift-snapshots.png"
|
|
import AmePreview from "../components/AmePreview";
|
|
import HomeSection from "../components/HomeSection";
|
|
import { useRouter } from "next/router";
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
|
|
import { GetStaticProps } from "next";
|
|
import { useTranslation } from "next-i18next";
|
|
|
|
export const getStaticProps: GetStaticProps = async ({ locale }) => {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations(locale!, ['common', 'footer', 'home'])),
|
|
},
|
|
};
|
|
}
|
|
|
|
const Home: NextPageWithLayout = () => {
|
|
const { resolvedTheme } = useTheme();
|
|
const { locale } = useRouter()
|
|
|
|
const { t: common } = useTranslation("common")
|
|
const { t } = useTranslation("home")
|
|
|
|
return (
|
|
<>
|
|
<section>
|
|
<div className="flex-col items-center justify-center px-4 pt-36 flex text-center md:px-8 md:pb-32 lg:pt-44">
|
|
<h1 className="mb-4 text-4xl font-extrabold leading-none tracking-tight text-ctp-text md:text-5xl lg:text-6xl">
|
|
{common("header")}
|
|
</h1>
|
|
<p className="mb-6 text-lg font-normal text-ctp-subtext1 sm:px-16 lg:text-xl xl:px-48">
|
|
{common("subtitle")}
|
|
</p>
|
|
|
|
<div className="w-full flex gap-2 justify-center flex-wrap">
|
|
<a
|
|
className="inline-flex w-full items-center justify-center rounded-lg bg-ctp-mauve py-3 px-5 text-center text-base font-medium text-ctp-base no-underline focus:ring-4 sm:w-fit"
|
|
href="https://github.com/crystal-linux/iso/releases/latest"
|
|
>
|
|
{common("generics.download")}
|
|
</a>
|
|
|
|
<Link href="/docs/crystal-linux/getting-started">
|
|
<a className="inline-flex w-full items-center justify-center gap-2 rounded-lg py-3 px-5 text-center text-base font-medium text-ctp-text no-underline focus:ring-4 sm:w-fit">
|
|
{common("generics.getting_started")}
|
|
<FontAwesomeIcon icon={faArrowRight} />
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<HomeSection className="">
|
|
<div className="basis-1/4">
|
|
<p className="mt-8 font-semibold text-ctp-maroon"></p>
|
|
<p className="mt-4 text-3xl font-extrabold tracking-tight text-ctp-text sm:text-4xl">
|
|
Onyx built-in
|
|
</p>
|
|
<p className="mt-4 max-w-3xl text-ctp-subtext1">
|
|
Install Crystal with it{"'"}s in-house desktop experience, a custom
|
|
GNOME session with a familiar layout. Or choose your favourite!
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex basis-3/4 justify-center">
|
|
<Image
|
|
src={resolvedTheme === "dark" ? onyxDark : onyxLight}
|
|
className="rounded-xl shadow-lg shadow-ctp-crust"
|
|
alt="demo of the onyx desktop environment"
|
|
/>
|
|
</div>
|
|
</HomeSection>
|
|
|
|
<HomeSection>
|
|
<div>
|
|
<p className="mt-8 font-semibold text-ctp-rosewater">Buttery</p>
|
|
<p className="mt-4 text-3xl font-extrabold tracking-tight text-ctp-text sm:text-4xl">
|
|
Automatic Backups
|
|
</p>
|
|
<p className="mt-4 max-w-3xl space-y-6 text-ctp-subtext1">
|
|
Backup & Restore your system. Easily boot into Btrfs snapshots.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex basis-3/4 justify-center">
|
|
<Image
|
|
src={timeshiftSnapshots}
|
|
className="rounded-xl shadow-lg shadow-ctp-crust"
|
|
alt="a screenshot showing timeshift, a graphical snapshot tool. 5 snapshots are shown in the window."
|
|
/>
|
|
</div>
|
|
</HomeSection>
|
|
|
|
<HomeSection className="pb-16 md:pb-28">
|
|
<div className="basis-1/4">
|
|
<p className="mt-8 font-semibold text-ctp-mauve">Rusty Quartz?</p>
|
|
<p className="mt-4 text-3xl font-extrabold tracking-tight text-ctp-text sm:text-4xl">
|
|
Amethyst
|
|
</p>
|
|
<p className="mt-4 max-w-3xl text-ctp-subtext1">
|
|
Amethyst is a fast, efficient and lightweight AUR helper and Pacman
|
|
wrapper. Made for Crystal, compatible with any Arch-based Linux
|
|
distribution.
|
|
</p>
|
|
|
|
<Link href="/docs/amethyst/getting-started">
|
|
<a className="inline-flex mt-4 w-full items-center border border-ctp-mantle bg-ctp-surface0 justify-center gap-2 rounded-full py-2 px-4 text-center text-base font-medium text-ctp-text no-underline focus:ring-4 sm:w-fit">
|
|
Learn more
|
|
<FontAwesomeIcon icon={faArrowRight} />
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex basis-3/4 justify-center">
|
|
<AmePreview />
|
|
</div>
|
|
</HomeSection>
|
|
</>
|
|
);
|
|
};
|
|
|
|
Home.getLayout = function getLayout(page: ReactElement) {
|
|
return <main className="flex flex-col items-center">{page}</main>;
|
|
};
|
|
|
|
export default Home;
|