xcl
/
xcl-website
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add bio page

This commit is contained in:
Hri7566 2023-08-04 02:45:56 -04:00
parent 30cb2003fe
commit ea05d9bd8a
8 changed files with 123 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/LinkButton.tsx Normal file
View File

@ -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
src/pages/components/Logo.tsx → src/components/Logo.tsx
View File

10
src/components/NavigationBar.tsx Normal file
View File

@ -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>
);
};

12
src/components/NavigationLink.tsx Normal file
View File

@ -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>
);
};

18
src/components/PageContentBox.tsx Normal file
View File

@ -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>
);
};

46
src/pages/about.tsx Normal file
View File

@ -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>
</>
);
}

20
src/pages/components/LinkButton.tsx
View File

@ -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>
);
};

18
src/pages/index.tsx
View File

@ -3,7 +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 { Logo } from "../components/Logo";
import { LinkButton } from "../components/LinkButton";
import { NavigationBar } from "../components/NavigationBar";
export default function Home() {
return (
@ -17,17 +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">
<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>