Mathis
427fc265ec
Introduced two new components: Footer and Header. The Footer includes copyright and navigation links, while the Header contains the site's logo, title, and a theme selector.
33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
import {Copyright} from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
|
|
export function Footer() {
|
|
|
|
|
|
return (
|
|
<footer className={"flex flex-col-reverse md:flex-row justify-between gap-2 md:gap-1 items-center p-2 border-t-2 w-full"}>
|
|
<div className={"flex flex-row gap-1 items-center justify-center md:justify-start md:w-1/3 opacity-50"}>
|
|
<Copyright className={"w-4"}/>
|
|
<h4 className={"pr-2"}>Yidhra Studio</h4>
|
|
<p>All right reserved <em>2024</em></p>
|
|
</div>
|
|
<div className={"flex flex-col flex-wrap md:flex-row max-h-24 md:flex-nowrap gap-1 md:gap-2 items-center justify-evenly w-full md:w-1/3"}>
|
|
<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
|
|
<h3 className={"text-nowrap text-center"}>Data privacy</h3>
|
|
</Link>
|
|
<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
|
|
<h3 className={"text-nowrap text-center"}>Terms and conditions</h3>
|
|
</Link>
|
|
<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
|
|
<h3 className={"text-nowrap text-center"}>Legal notice</h3>
|
|
</Link>
|
|
<Link href={"#"} className={"p-1 hover:-translate-y-1.5 hover:text-primary w-1/2"}>
|
|
<h3 className={"text-nowrap text-center"}>Support Center</h3>
|
|
</Link>
|
|
</div>
|
|
<div className={"flex flex-row gap-1 items-center justify-center md:justify-end md:w-1/3"}>
|
|
</div>
|
|
</footer>
|
|
)
|
|
} |