Merge pull request #1 from experimental-celestial-laboratories/bio-page
Bio page
This commit is contained in:
commit
e3efe0756e
|
@ -0,0 +1,27 @@
|
|||
import Link from "next/link";
|
||||
import { PropsWithChildren, useState } from "react";
|
||||
|
||||
export const LinkButton = (
|
||||
props: {
|
||||
title: string;
|
||||
text: string;
|
||||
href: string;
|
||||
} = {
|
||||
title: "Title",
|
||||
text: "Text",
|
||||
href: "#",
|
||||
}
|
||||
) => {
|
||||
return (
|
||||
<div>
|
||||
<Link
|
||||
className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white shadow-lg backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-2xl hover:backdrop-blur"
|
||||
href={props.href}
|
||||
target="_blank"
|
||||
>
|
||||
<h3 className="text-2xl font-bold">{props.title}</h3>
|
||||
<div className="text-lg">{props.text}</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -0,0 +1,9 @@
|
|||
import Image from "next/image";
|
||||
|
||||
export const Logo = () => {
|
||||
return (
|
||||
<div id="logo">
|
||||
<Image src="/xcl.png" alt="XCL" width={209} height={105} />
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -0,0 +1,10 @@
|
|||
import { NavigationLink } from "./NavigationLink";
|
||||
|
||||
export const NavigationBar = () => {
|
||||
return (
|
||||
<div className="flex">
|
||||
<NavigationLink href="/" text="Home" />
|
||||
<NavigationLink href="/about" text="Our Mission" />
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -0,0 +1,12 @@
|
|||
import Link from "next/link";
|
||||
|
||||
export const NavigationLink = (props: { href: string; text: string }) => {
|
||||
return (
|
||||
<Link
|
||||
href={props.href}
|
||||
className="m-2 flex max-w-xs cursor-pointer flex-col gap-4 rounded-xl p-4 text-white backdrop-blur-sm transition-all hover:bg-white/10 hover:shadow-lg hover:backdrop-blur"
|
||||
>
|
||||
<h3 className="text-lg">{props.text}</h3>
|
||||
</Link>
|
||||
);
|
||||
};
|
|
@ -0,0 +1,18 @@
|
|||
import { PropsWithChildren } from "react";
|
||||
|
||||
export const PageContentBox = (
|
||||
props: {
|
||||
title: string;
|
||||
} & PropsWithChildren
|
||||
) => {
|
||||
return (
|
||||
<div className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white shadow-lg backdrop-blur-sm">
|
||||
{props.title ? (
|
||||
<h3 className="text-2xl font-bold">{props.title}</h3>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -0,0 +1,46 @@
|
|||
import { signIn, signOut, useSession } from "next-auth/react";
|
||||
import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { api } from "~/utils/api";
|
||||
import { Logo } from "../components/Logo";
|
||||
import { LinkButton } from "../components/LinkButton";
|
||||
import { NavigationBar } from "../components/NavigationBar";
|
||||
import { PageContentBox } from "~/components/PageContentBox";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>XCL</title>
|
||||
<meta name="description" content="XCL homepage" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
{/* <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#993800] to-[#250e00]"> */}
|
||||
<main className="bg-[url(/bg.png)] bg-cover bg-center">
|
||||
<div className="bg-black/60">
|
||||
<div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
|
||||
<Link className="absolute left-0 top-0" href="/">
|
||||
<Logo />
|
||||
</Link>
|
||||
<div className="absolute right-0 top-0">
|
||||
<NavigationBar />
|
||||
</div>
|
||||
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-1 md:gap-8">
|
||||
<PageContentBox title="Our Mission">
|
||||
Here at XCL, we strive to make the SwitchCraft 3 server as
|
||||
unbearable as possible. While these noobs at SpaceTech are
|
||||
feeding cookies to parrots, we build space stations not only
|
||||
for the astronauts, but also for the olympians and war heroes
|
||||
of our time.
|
||||
</PageContentBox>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -3,6 +3,9 @@ import Head from "next/head";
|
|||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { api } from "~/utils/api";
|
||||
import { Logo } from "../components/Logo";
|
||||
import { LinkButton } from "../components/LinkButton";
|
||||
import { NavigationBar } from "../components/NavigationBar";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
|
@ -16,19 +19,17 @@ export default function Home() {
|
|||
<main className="bg-[url(/bg.png)] bg-cover bg-center">
|
||||
<div className="bg-black/60">
|
||||
<div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
|
||||
<div className="absolute right-0 top-0">
|
||||
<NavigationBar />
|
||||
</div>
|
||||
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
|
||||
<h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
|
||||
<Image src="/xcl.png" alt="XCL" width={209} height={105} />
|
||||
</h1>
|
||||
<Logo />
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-1 md:gap-8">
|
||||
<Link
|
||||
className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white shadow-lg backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-2xl hover:backdrop-blur"
|
||||
<LinkButton
|
||||
href="https://github.com/experimental-celestial-laboratories"
|
||||
target="_blank"
|
||||
>
|
||||
<h3 className="text-2xl font-bold">GitHub →</h3>
|
||||
<div className="text-lg">Learn more about XCL.</div>
|
||||
</Link>
|
||||
title="GitHub →"
|
||||
text="Learn more about XCL."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2"></div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue