More landing page content

This commit is contained in:
Braydon 2024-04-15 23:24:50 -04:00
parent 061b7df8b1
commit 7958fb3c21
5 changed files with 66 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 384 KiB

@ -1,3 +1,4 @@
import FeaturedContent from "@/components/landing/featured-content";
import Hero from "@/components/landing/hero"; import Hero from "@/components/landing/hero";
/** /**
@ -8,6 +9,7 @@ import Hero from "@/components/landing/hero";
const LandingPage = (): JSX.Element => ( const LandingPage = (): JSX.Element => (
<main> <main>
<Hero /> <Hero />
<FeaturedContent />
</main> </main>
); );
export default LandingPage; export default LandingPage;

@ -0,0 +1,62 @@
import { minecrafter } from "@/font/fonts";
import { cn } from "@/lib/utils";
import Link from "next/link";
const FeaturedContent = (): JSX.Element => (
<div className="-translate-y-40 flex justify-center items-center">
<div className="grid grid-cols-2 gap-5">
<FeaturedItem
name="Player Lookup"
description="Id dolore elit mollit adipisicing adipisicing."
image="/media/test.avif"
href="/player"
/>
<FeaturedItem
name="Player Lookup"
description="Id dolore elit mollit adipisicing adipisicing."
image="/media/test.avif"
href="/player"
/>
<FeaturedItem
name="Player Lookup"
description="Id dolore elit mollit adipisicing adipisicing."
image="/media/test.avif"
href="/player"
/>
<FeaturedItem
name="Player Lookup"
description="Id dolore elit mollit adipisicing adipisicing."
image="/media/test.avif"
href="/player"
/>
</div>
</div>
);
const FeaturedItem = ({
name,
description,
image,
href,
}: {
name: string;
description: string;
image: string;
href: string;
}): JSX.Element => (
<Link
className={
"w-[19rem] h-80 flex flex-col justify-center items-center bg-[url('/media/featured/server.png')] bg-cover rounded-3xl text-center backdrop-blur-md hover:scale-[.99] transition-all transform-gpu"
}
href={href}
>
<h1
className={cn("text-3xl font-semibold text-white", minecrafter.className)}
>
{name}
</h1>
<h2 className="text-md max-w-[15rem]">{description}</h2>
</Link>
);
export default FeaturedContent;

@ -3,7 +3,7 @@ import { minecrafter } from "@/font/fonts";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
const Hero = (): JSX.Element => ( const Hero = (): JSX.Element => (
<div className="flex flex-col gap-4 justify-center items-center h-screen"> <div className="h-[85vh] flex flex-col gap-4 justify-center items-center pointer-events-none">
{/* Title */} {/* Title */}
<h1 <h1
className={cn("text-5xl text-minecraft-green-3", minecrafter.className)} className={cn("text-5xl text-minecraft-green-3", minecrafter.className)}

@ -14,7 +14,7 @@ import Link from "next/link";
const Navbar = (): JSX.Element => ( const Navbar = (): JSX.Element => (
<nav className="fixed inset-x-0 flex h-16 px-12 justify-center sm:justify-between items-center bg-navbar-background"> <nav className="fixed inset-x-0 flex h-16 px-12 justify-center sm:justify-between items-center bg-navbar-background">
{/* Left */} {/* Left */}
<div className="flex gap-7 xs:gap-16 items-center"> <div className="flex gap-7 lg:gap-12 items-center transition-all transform-gpu">
{/* App Branding */} {/* App Branding */}
<Link <Link
className={cn( className={cn(