Compare commits
1 Commits
Author | SHA1 | Date |
---|---|---|
Hri7566 | a56e5dbbcb |
After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 5.1 MiB After Width: | Height: | Size: 5.1 MiB |
Before Width: | Height: | Size: 5.0 MiB After Width: | Height: | Size: 5.0 MiB |
Before Width: | Height: | Size: 5.6 MiB After Width: | Height: | Size: 5.6 MiB |
Before Width: | Height: | Size: 5.2 MiB After Width: | Height: | Size: 5.2 MiB |
Before Width: | Height: | Size: 4.5 MiB After Width: | Height: | Size: 4.5 MiB |
Before Width: | Height: | Size: 4.7 MiB After Width: | Height: | Size: 4.7 MiB |
Before Width: | Height: | Size: 4.6 MiB After Width: | Height: | Size: 4.6 MiB |
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 3.2 MiB |
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 3.2 MiB |
Before Width: | Height: | Size: 5.5 MiB After Width: | Height: | Size: 5.5 MiB |
Before Width: | Height: | Size: 6.0 MiB After Width: | Height: | Size: 6.0 MiB |
Before Width: | Height: | Size: 833 KiB After Width: | Height: | Size: 833 KiB |
Before Width: | Height: | Size: 789 KiB After Width: | Height: | Size: 789 KiB |
Before Width: | Height: | Size: 856 KiB After Width: | Height: | Size: 856 KiB |
Before Width: | Height: | Size: 741 KiB After Width: | Height: | Size: 741 KiB |
Before Width: | Height: | Size: 237 KiB After Width: | Height: | Size: 237 KiB |
Before Width: | Height: | Size: 244 KiB After Width: | Height: | Size: 244 KiB |
Before Width: | Height: | Size: 244 KiB After Width: | Height: | Size: 244 KiB |
Before Width: | Height: | Size: 332 KiB After Width: | Height: | Size: 332 KiB |
Before Width: | Height: | Size: 324 KiB After Width: | Height: | Size: 324 KiB |
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
Before Width: | Height: | Size: 830 KiB After Width: | Height: | Size: 830 KiB |
Before Width: | Height: | Size: 682 B After Width: | Height: | Size: 682 B |
Before Width: | Height: | Size: 3.5 MiB After Width: | Height: | Size: 3.5 MiB |
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB |
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
After Width: | Height: | Size: 7.6 KiB |
BIN
public/xcl.png
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 16 KiB |
|
@ -1,57 +0,0 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { ChangelogEntry } from "~/components/ChangelogEntry";
|
||||
|
||||
export interface LogEntry {
|
||||
content: string;
|
||||
data: {
|
||||
title: string;
|
||||
date: string;
|
||||
};
|
||||
isEmpty: boolean;
|
||||
excerpt: string;
|
||||
}
|
||||
|
||||
export const Changelog = () => {
|
||||
const [entries, setEntries] = useState([] as LogEntry[]);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
const getEmployees = () => {
|
||||
fetch("https://xnl.hri7566.info/api/changelog?n=5", {
|
||||
next: {
|
||||
revalidate: 60,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
res
|
||||
.json()
|
||||
.then((j: { logs: LogEntry[] }) => {
|
||||
setEntries(j.logs);
|
||||
setLoaded(true);
|
||||
})
|
||||
.catch((err) => console.error(err));
|
||||
})
|
||||
.catch((err) => console.error(err));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getEmployees();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <EmployeeDescription name="Test" position="test" /> */}
|
||||
{loaded ? (
|
||||
entries.map((entry, index) => (
|
||||
<ChangelogEntry
|
||||
title={entry.data.title}
|
||||
date={entry.data.date}
|
||||
content={entry.content}
|
||||
key={index}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<p>Loading...</p>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
|
@ -1,18 +0,0 @@
|
|||
export const ChangelogEntry = (
|
||||
props: {
|
||||
title: string;
|
||||
date: string;
|
||||
content: string;
|
||||
} = {
|
||||
title: "Title",
|
||||
date: "Date",
|
||||
content: "Content",
|
||||
}
|
||||
) => {
|
||||
return (
|
||||
<div className="m-3 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">
|
||||
<h3 className="text-2xl font-bold">{props.date}</h3>
|
||||
<div className="text-lg">{props.content}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -1,10 +0,0 @@
|
|||
import Link from "next/link";
|
||||
import { Logo } from "./Logo";
|
||||
|
||||
export const CornerLogo = () => {
|
||||
return (
|
||||
<Link className="absolute left-0 top-0 hidden sm:flex" href="/">
|
||||
<Logo />
|
||||
</Link>
|
||||
);
|
||||
};
|
|
@ -1,16 +0,0 @@
|
|||
export const EmployeeDescription = (
|
||||
props: {
|
||||
name: string;
|
||||
position: string;
|
||||
} = {
|
||||
name: "Title",
|
||||
position: "Text",
|
||||
}
|
||||
) => {
|
||||
return (
|
||||
<div className="m-3 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">
|
||||
<h3 className="text-2xl font-bold">{props.name}</h3>
|
||||
<div className="text-lg">{props.position}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -1,48 +0,0 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { EmployeeDescription } from "~/components/EmployeeDescription";
|
||||
|
||||
export const EmployeeList = () => {
|
||||
const [employees, setEmployees] = useState({} as Record<string, string>);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
const getEmployees = () => {
|
||||
fetch("https://xnl.hri7566.info/employment/", {
|
||||
next: {
|
||||
revalidate: 60,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
res
|
||||
.json()
|
||||
.then((j) => {
|
||||
setEmployees(j as Record<string, string>);
|
||||
setLoaded(true);
|
||||
})
|
||||
.catch((err) => console.error(err));
|
||||
})
|
||||
.catch((err) => console.error(err));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getEmployees();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <EmployeeDescription name="Test" position="test" /> */}
|
||||
{loaded ? (
|
||||
Object.keys(employees)
|
||||
.sort()
|
||||
.map((k) => (
|
||||
<EmployeeDescription
|
||||
name={k}
|
||||
position={employees[k] || "<no position>"}
|
||||
key={Object.keys(employees).indexOf(k)}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<p>Loading...</p>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
|
@ -1,26 +0,0 @@
|
|||
import Link from "next/link";
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
|
@ -1,9 +0,0 @@
|
|||
import Image from "next/image";
|
||||
|
||||
export const Logo = () => {
|
||||
return (
|
||||
<div id="logo">
|
||||
<Image src="/xcl.png" alt="XCL" width={209} height={105} />
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -1,12 +0,0 @@
|
|||
import { NavigationLink } from "./NavigationLink";
|
||||
|
||||
export const NavigationBar = () => {
|
||||
return (
|
||||
<div className="flex">
|
||||
<NavigationLink href="/" text="Home" />
|
||||
<NavigationLink href="/about" text="Our Mission" />
|
||||
<NavigationLink href="/team" text="Our Team" />
|
||||
<NavigationLink href="/changelog" text="Changelog" />
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -1,12 +0,0 @@
|
|||
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 transition-all hover:bg-white/10 hover:shadow-lg hover:backdrop-blur"
|
||||
>
|
||||
<h3 className="text-lg">{props.text}</h3>
|
||||
</Link>
|
||||
);
|
||||
};
|
|
@ -1,18 +0,0 @@
|
|||
import { type PropsWithChildren } from "react";
|
||||
|
||||
export const PageContentBox = (
|
||||
props: {
|
||||
title: string;
|
||||
} & PropsWithChildren
|
||||
) => {
|
||||
return (
|
||||
<div className="flex 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>
|
||||
);
|
||||
};
|
|
@ -1,33 +1,14 @@
|
|||
import Head from "next/head";
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
const bgs = [
|
||||
"/bg/webp/bg1.webp",
|
||||
"/bg/webp/bg2.webp",
|
||||
"/bg/webp/bg3.webp",
|
||||
"/bg/webp/bg4.webp",
|
||||
"/bg/webp/bg5.webp",
|
||||
"/bg/webp/bg6.webp",
|
||||
"/bg/webp/bg7.webp",
|
||||
"/bg/webp/bg8.webp",
|
||||
"/bg/webp/bg9.webp",
|
||||
];
|
||||
|
||||
const randomBg = bgs[Math.floor(Math.random() * bgs.length)] as string;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>XCL</title>
|
||||
<meta name="description" content="XCL homepage" />
|
||||
<link rel="icon" href="/favicon.svg" />
|
||||
</Head>
|
||||
<main
|
||||
className="bg-cover bg-center"
|
||||
style={{ backgroundImage: `url("${randomBg}")` }}
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
import Head from "next/head";
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>XCL</title>
|
||||
<meta name="description" content="XCL" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<main className="bg-cover bg-center">{children}</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
import { Logo } from "./Logo";
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<div className="sticky top-0 z-[100] mx-auto h-[4.5rem] w-full max-w-screen-xl border-b border-[#ffffff10] p-3 shadow-lg backdrop-blur-sm sm:h-24">
|
||||
<Logo />
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
import Image from "next/image";
|
||||
|
||||
export function Logo() {
|
||||
return <Image src="/xcl.png" width={160} height={116} alt="XCL Logo" />;
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
import { Logo } from "./Logo";
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<div className="sticky top-0 z-[100] mx-auto h-[4.5rem] w-full max-w-screen-xl border-b border-[#ffffff10] p-3 shadow-lg backdrop-blur-sm sm:h-24">
|
||||
<Logo />
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
import Image from "next/image";
|
||||
|
||||
export function Logo() {
|
||||
return <Image src="/xnl.png" width={175} height={116} alt="XNL Logo" />;
|
||||
}
|
|
@ -1,30 +0,0 @@
|
|||
import { NavigationBar } from "../components/NavigationBar";
|
||||
import { PageContentBox } from "~/components/PageContentBox";
|
||||
import { CornerLogo } from "~/components/CornerLogo";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<div className="bg-black/60">
|
||||
<div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
|
||||
<CornerLogo />
|
||||
<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">
|
||||
At XCL, we pioneer the convergence of innovation and imagination
|
||||
within SwichCraft. Driven by a passion for technological
|
||||
excellence, we are committed to pushing the boundaries of what is
|
||||
achievable with the given technologies of SwitchCraft. Our
|
||||
dedicated team of experts harnesses the power of creativity to
|
||||
deliver cutting-edge solutions tailored to the unique needs of our
|
||||
clients.
|
||||
</PageContentBox>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -1,25 +0,0 @@
|
|||
import { NavigationBar } from "../components/NavigationBar";
|
||||
import { PageContentBox } from "~/components/PageContentBox";
|
||||
import { CornerLogo } from "~/components/CornerLogo";
|
||||
import { Changelog as ChangelogComponent } from "~/components/Changelog";
|
||||
|
||||
export default function Changelog() {
|
||||
return (
|
||||
<div className="bg-black/60">
|
||||
<div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
|
||||
<CornerLogo />
|
||||
<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="Changelog">
|
||||
<ChangelogComponent />
|
||||
</PageContentBox>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -1,26 +1,9 @@
|
|||
import { Logo } from "../components/Logo";
|
||||
import { LinkButton } from "../components/LinkButton";
|
||||
import { NavigationBar } from "../components/NavigationBar";
|
||||
import { Header } from "~/components/xcl/Header";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<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">
|
||||
<LinkButton
|
||||
href="https://git.hri7566.info/xcl"
|
||||
title="Git →"
|
||||
text="Learn more about XCL."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex min-h-screen flex-col bg-stone-950">
|
||||
<Header />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,24 +0,0 @@
|
|||
import { NavigationBar } from "~/components/NavigationBar";
|
||||
import { PageContentBox } from "~/components/PageContentBox";
|
||||
import { EmployeeList } from "~/components/EmployeeList";
|
||||
import { CornerLogo } from "~/components/CornerLogo";
|
||||
|
||||
export default function Team() {
|
||||
return (
|
||||
<div className="bg-black/60">
|
||||
<div className="flex min-h-screen flex-col items-center justify-center bg-orange-800/40">
|
||||
<CornerLogo />
|
||||
<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">
|
||||
<PageContentBox title="Employees">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3">
|
||||
<EmployeeList />
|
||||
</div>
|
||||
</PageContentBox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
import { Header } from "~/components/xnl/Header";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-zinc-950">
|
||||
<Header />
|
||||
</div>
|
||||
);
|
||||
}
|