Add a background to the hero

This commit is contained in:
Braydon 2024-04-18 12:34:47 -04:00
parent 4da56be833
commit e38b9ff539
3 changed files with 31 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 293 KiB

@ -2,6 +2,7 @@ import FeaturedContent from "@/components/landing/featured-content";
import Hero from "@/components/landing/hero";
import StatisticCounters from "@/components/landing/statistic-counters";
import { ReactElement } from "react";
import Background from "../components/landing/background";
/**
* The landing page.
@ -9,10 +10,18 @@ import { ReactElement } from "react";
* @returns the page jsx
*/
const LandingPage = (): ReactElement => (
<main className="px-3">
<Hero />
<FeaturedContent />
<StatisticCounters />
<main className="flex flex-col gap-14">
{/* Hero */}
<div className="relative">
<Background />
<Hero />
</div>
{/* Content */}
<div className="px-3">
<FeaturedContent />
<StatisticCounters />
</div>
</main>
);
export default LandingPage;

@ -0,0 +1,18 @@
import { ReactElement } from "react";
import { cn } from "../../lib/utils";
/**
* The background component.
*
* @returns the background jsx
*/
const Background = (): ReactElement => (
<div
className={cn(
"before:absolute before:left-0 before:top-0 before:w-full before:h-full before:bg-black/65", // Dark Overlay
`absolute top-0 left-0 w-full h-full bg-[url("/media/background.jpg")] bg-cover bg-center -z-10`, // Background
"after:absolute after:left-0 after:bottom-0 after:w-full after:h-1 after:bg-border" // Bottom Border
)}
/>
);
export default Background;