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

Merge pull request #1 from experimental-celestial-laboratories/bio-page 

Bio page
This commit is contained in:
Hri7566 2023-08-04 12:47:37 -04:00 committed by GitHub
parent 713f72820e ea05d9bd8a
commit e3efe0756e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 133 additions and 10 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>
);
};

9
src/components/Logo.tsx Normal file
View File

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

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

21
src/pages/index.tsx
View File

@ -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>