Add a background to the hero
This commit is contained in:
parent
4da56be833
commit
e38b9ff539
BIN
Frontend/public/media/background.jpg
Normal file
BIN
Frontend/public/media/background.jpg
Normal file
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 Hero from "@/components/landing/hero";
|
||||||
import StatisticCounters from "@/components/landing/statistic-counters";
|
import StatisticCounters from "@/components/landing/statistic-counters";
|
||||||
import { ReactElement } from "react";
|
import { ReactElement } from "react";
|
||||||
|
import Background from "../components/landing/background";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The landing page.
|
* The landing page.
|
||||||
@ -9,10 +10,18 @@ import { ReactElement } from "react";
|
|||||||
* @returns the page jsx
|
* @returns the page jsx
|
||||||
*/
|
*/
|
||||||
const LandingPage = (): ReactElement => (
|
const LandingPage = (): ReactElement => (
|
||||||
<main className="px-3">
|
<main className="flex flex-col gap-14">
|
||||||
|
{/* Hero */}
|
||||||
|
<div className="relative">
|
||||||
|
<Background />
|
||||||
<Hero />
|
<Hero />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="px-3">
|
||||||
<FeaturedContent />
|
<FeaturedContent />
|
||||||
<StatisticCounters />
|
<StatisticCounters />
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
export default LandingPage;
|
export default LandingPage;
|
||||||
|
18
Frontend/src/app/components/landing/background.tsx
Normal file
18
Frontend/src/app/components/landing/background.tsx
Normal file
@ -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;
|
Loading…
Reference in New Issue
Block a user