add bio page
This commit is contained in:
parent
30cb2003fe
commit
ea05d9bd8a
|
@ -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,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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,20 +0,0 @@
|
||||||
import Link from "next/link";
|
|
||||||
import { PropsWithChildren, useState } from "react";
|
|
||||||
|
|
||||||
export const LinkButton = (
|
|
||||||
props: {
|
|
||||||
title: string;
|
|
||||||
text: string;
|
|
||||||
} = {
|
|
||||||
title: "Title",
|
|
||||||
text: "Text",
|
|
||||||
}
|
|
||||||
) => {
|
|
||||||
const [isHovered, setIsHovered] = useState(false);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Link href="#"></Link>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
|
@ -3,7 +3,9 @@ import Head from "next/head";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { api } from "~/utils/api";
|
import { api } from "~/utils/api";
|
||||||
import { Logo } from "./components/Logo";
|
import { Logo } from "../components/Logo";
|
||||||
|
import { LinkButton } from "../components/LinkButton";
|
||||||
|
import { NavigationBar } from "../components/NavigationBar";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
|
@ -17,17 +19,17 @@ export default function Home() {
|
||||||
<main className="bg-[url(/bg.png)] bg-cover bg-center">
|
<main className="bg-[url(/bg.png)] bg-cover bg-center">
|
||||||
<div className="bg-black/60">
|
<div className="bg-black/60">
|
||||||
<div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
|
<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">
|
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
|
||||||
<Logo />
|
<Logo />
|
||||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-1 md:gap-8">
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-1 md:gap-8">
|
||||||
<Link
|
<LinkButton
|
||||||
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="https://github.com/experimental-celestial-laboratories"
|
href="https://github.com/experimental-celestial-laboratories"
|
||||||
target="_blank"
|
title="GitHub →"
|
||||||
>
|
text="Learn more about XCL."
|
||||||
<h3 className="text-2xl font-bold">GitHub →</h3>
|
/>
|
||||||
<div className="text-lg">Learn more about XCL.</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col items-center gap-2"></div>
|
<div className="flex flex-col items-center gap-2"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue