Get a better style down
This commit is contained in:
parent
0072dc0362
commit
d29004f673
Binary file not shown.
@ -11,6 +11,7 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.1.3",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@radix-ui/react-tooltip": "^1.0.7",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import Navbar from "@/components/navbar";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import config from "@/config";
|
||||
import { cn } from "@/lib/utils";
|
||||
import ThemeProvider from "@/provider/theme-provider";
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import PlausibleProvider from "next-plausible";
|
||||
@ -31,7 +32,7 @@ const RootLayout = ({
|
||||
}>): JSX.Element => {
|
||||
const analyticsDomain: string | undefined = config.analyticsDomain;
|
||||
return (
|
||||
<html lang="en" className={`scroll-smooth ${notoSans.className}`}>
|
||||
<html lang="en" className={cn("scroll-smooth", notoSans.className)}>
|
||||
<head>
|
||||
{analyticsDomain && (
|
||||
<PlausibleProvider
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import Hero from "@/components/landing/hero";
|
||||
|
||||
/**
|
||||
* The home page of the site.
|
||||
* The landing page of the site.
|
||||
*
|
||||
* @returns the home page jsx
|
||||
* @returns the landing page jsx
|
||||
*/
|
||||
const HomePage = (): JSX.Element => (
|
||||
<main className="flex justify-center items-center h-screen">
|
||||
<span>Hello World</span>
|
||||
const LandingPage = (): JSX.Element => (
|
||||
<main>
|
||||
<Hero />
|
||||
</main>
|
||||
);
|
||||
export default HomePage;
|
||||
export default LandingPage;
|
||||
|
||||
18
Frontend/src/app/components/landing/hero.tsx
Normal file
18
Frontend/src/app/components/landing/hero.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import config from "@/config";
|
||||
import { minecrafter } from "@/font/fonts";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Hero = (): JSX.Element => (
|
||||
<div className="flex flex-col gap-4 justify-center items-center h-screen">
|
||||
{/* Title */}
|
||||
<h1
|
||||
className={cn("text-5xl text-minecraft-green-3", minecrafter.className)}
|
||||
>
|
||||
{config.siteName}
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<h2 className="text-xl">{config.metadata.description}</h2>
|
||||
</div>
|
||||
);
|
||||
export default Hero;
|
||||
35
Frontend/src/app/components/minecraft-button.tsx
Normal file
35
Frontend/src/app/components/minecraft-button.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* A Minecraft styled button.
|
||||
*
|
||||
* @returns the button jsx
|
||||
*/
|
||||
const MinecraftButton = ({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: Readonly<{
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}>): JSX.Element => (
|
||||
<Button
|
||||
className={cn(
|
||||
"before:absolute before:-inset-x-5 before:rotate-90 before:w-9 before:h-1 before:bg-minecraft-green-1", // Left Green Bar
|
||||
"after:absolute after:inset-x-[91.5%] after:rotate-90 after:w-9 after:h-1 after:bg-minecraft-green-1", // Right Green Bar
|
||||
"relative h-11 px-5 bg-minecraft-green-2 hover:opacity-85 hover:bg-minecraft-green-2 rounded-none tracking-wide font-semibold uppercase transition-all transform-gpu", // Styling
|
||||
className
|
||||
)}
|
||||
variant="ghost"
|
||||
style={{
|
||||
// Above and below the button shadow
|
||||
boxShadow:
|
||||
"inset 0 -4px 0 hsl(var(--minecraft-green-1)), inset 0 4px 0 hsl(var(--minecraft-green-3));",
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Button>
|
||||
);
|
||||
export default MinecraftButton;
|
||||
@ -1,41 +1,57 @@
|
||||
import MinecraftButton from "@/components/minecraft-button";
|
||||
import config from "@/config";
|
||||
import localFont from "next/font/local";
|
||||
import { minecrafter } from "@/font/fonts";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { StarIcon } from "@heroicons/react/24/outline";
|
||||
import Link from "next/link";
|
||||
|
||||
/**
|
||||
* The title font to use to brand the site.
|
||||
*/
|
||||
const minecrafter = localFont({
|
||||
src: "../font/Minecrafter.ttf",
|
||||
});
|
||||
|
||||
/**
|
||||
* The navbar for the site.
|
||||
*
|
||||
* @returns the navbar jsx
|
||||
*/
|
||||
const Navbar = () => (
|
||||
<nav className="fixed inset-x-0 h-16 px-10 flex justify-between items-center bg-navbar-background uppercase">
|
||||
{/* Links */}
|
||||
<div className={`relative flex gap-5`}>
|
||||
{Object.entries(config.navbarLinks).map((link, index) => (
|
||||
<Link key={index} href={link[1]}>
|
||||
{link[0]}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Site Branding */}
|
||||
<div>
|
||||
const Navbar = (): JSX.Element => (
|
||||
<nav className="fixed inset-x-0 flex h-16 px-12 justify-between items-center bg-navbar-background">
|
||||
{/* Left */}
|
||||
<div className="flex gap-16 items-center">
|
||||
{/* App Branding */}
|
||||
<Link
|
||||
className={`text-3xl text-minecraft-green-1 ${minecrafter.className}`}
|
||||
className={cn(
|
||||
"text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
|
||||
minecrafter.className
|
||||
)}
|
||||
href="/"
|
||||
>
|
||||
{config.siteName}
|
||||
</Link>
|
||||
|
||||
{/* Links */}
|
||||
<div className="flex gap-7">
|
||||
{Object.entries(config.navbarLinks).map((link, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
className="font-semibold uppercase hover:text-minecraft-green-4 transition-all transform-gpu"
|
||||
href={link[1]}
|
||||
>
|
||||
{link[0]}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>Three</div>
|
||||
{/* Social Buttons */}
|
||||
<div>
|
||||
{/* Star on Github <3 */}
|
||||
<MinecraftButton>
|
||||
<Link
|
||||
className="flex gap-1.5 items-center"
|
||||
href="https://github.com/Rainnny7/RESTfulMC"
|
||||
>
|
||||
<StarIcon width={22} height={22} />
|
||||
<span>Star on GitHub</span>
|
||||
</Link>
|
||||
</MinecraftButton>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
export default Navbar;
|
||||
|
||||
8
Frontend/src/app/font/fonts.ts
Normal file
8
Frontend/src/app/font/fonts.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import localFont from "next/font/local";
|
||||
|
||||
/**
|
||||
* The title font to use to brand the site.
|
||||
*/
|
||||
export const minecrafter = localFont({
|
||||
src: "../font/Minecrafter.ttf",
|
||||
});
|
||||
@ -37,8 +37,11 @@
|
||||
/* Navbar */
|
||||
--navbar-background: 0 0% 7%;
|
||||
|
||||
/* Minecraft Colors */
|
||||
--minecraft-green-1: 104 51% 43%;
|
||||
/* Minecraft Colors (Dark -> Light) */
|
||||
--minecraft-green-1: 108 56% 25%;
|
||||
--minecraft-green-2: 107 55% 34%;
|
||||
--minecraft-green-3: 104 51% 43%;
|
||||
--minecraft-green-4: 103 50% 53%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -51,6 +51,9 @@ const config = {
|
||||
// Custom Colors
|
||||
"navbar-background": "hsl(var(--navbar-background))",
|
||||
"minecraft-green-1": "hsl(var(--minecraft-green-1))",
|
||||
"minecraft-green-2": "hsl(var(--minecraft-green-2))",
|
||||
"minecraft-green-3": "hsl(var(--minecraft-green-3))",
|
||||
"minecraft-green-4": "hsl(var(--minecraft-green-4))",
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user