svrjs-nextjs-website/components/shared/Footer.tsx

97 lines
3.8 KiB
TypeScript
Raw Normal View History

2024-06-15 20:04:12 +02:00
import Image from "next/image";
2024-06-15 20:37:01 +02:00
import Link from "next/link";
2024-06-15 18:41:36 +02:00
import React from "react";
2024-06-15 20:04:12 +02:00
import Iconss from "../ui/icons";
2024-06-15 20:37:01 +02:00
import { FOOTERLINKS } from "@/constants";
2024-06-15 18:41:36 +02:00
const Footer = () => {
2024-06-15 20:04:12 +02:00
return (
2024-06-16 16:13:40 +02:00
<>
2024-06-16 16:22:49 +02:00
<footer className="flex flex-col w-full transition-all bg-zinc-100 text-black dark:bg-[#0308033b] border-t dark:text-white">
<div className="px-6 md:px-16 lg:px-32 py-10 w-full mx-auto max-w-screen-2xl">
2024-06-22 11:23:31 +02:00
<div className="flex flex-col lg:flex-row justify-between max-lg:items-start max-md:items-center items-center mb-6 ">
2024-06-16 16:22:49 +02:00
<div className="flex items-center mb-6 lg:mb-0">
<Image
src="/logo.svg"
alt="logo"
width={200}
height={80}
className="dark:block hidden"
/>
<Image
src="/logodark.svg"
alt="logo"
width={200}
height={80}
className="dark:hidden block"
/>
2024-06-16 16:13:40 +02:00
</div>
2024-06-17 08:45:07 +02:00
<div className="flex flex-col items-center md:items-start md:flex-row justify-between w-full lg:w-auto space-y-6 md:space-y-0 md:space-x-8 xl:space-x-16">
2024-06-16 16:22:49 +02:00
<div className="flex flex-col items-center md:items-start">
2024-06-17 08:38:46 +02:00
<div className="text-2xl font-light text-primary">
2024-06-16 16:22:49 +02:00
Other Pages
2024-06-17 08:38:46 +02:00
</div>
2024-06-16 16:22:49 +02:00
{FOOTERLINKS.otherPages.map((link) => (
2024-06-17 08:37:44 +02:00
<span key={link.href}>
2024-06-16 16:22:49 +02:00
<Link
href={link.href}
2024-06-22 11:36:23 +02:00
className="text-base font-light dark:hover:text-green-100/70 hover:text-green-500 hover:underline"
2024-06-16 16:22:49 +02:00
>
{link.label}
</Link>
2024-06-17 08:37:44 +02:00
</span>
2024-06-16 16:22:49 +02:00
))}
</div>
<div className="flex flex-col items-center md:items-start">
<h1 className="text-2xl font-light text-primary">Resources</h1>
{FOOTERLINKS.plans.map((link) => (
2024-06-17 08:37:44 +02:00
<span key={link.href}>
2024-06-16 16:22:49 +02:00
<Link
href={link.href}
2024-06-22 11:36:23 +02:00
className="text-base font-light dark:hover:text-green-100/70 hover:text-green-500 hover:underline"
2024-06-16 16:22:49 +02:00
>
{link.label}
</Link>
2024-06-17 08:37:44 +02:00
</span>
2024-06-16 16:22:49 +02:00
))}
</div>
<div className="flex flex-col items-center md:items-start">
2024-06-17 08:38:46 +02:00
<div className="text-2xl font-light text-primary">Social</div>
2024-06-16 16:22:49 +02:00
<p className="text-base font-light">
{FOOTERLINKS.social.supportText}
</p>
<div className="flex space-x-1 py-3">
<Iconss />
</div>
2024-06-16 16:13:40 +02:00
</div>
2024-06-16 13:42:05 +02:00
</div>
2024-06-15 20:04:12 +02:00
</div>
2024-06-16 16:22:49 +02:00
<div className="border-t mb-6 border-gray-300 dark:border-white/30"></div>
<div className="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0 px-4">
2024-06-17 08:37:44 +02:00
<span className="text-sm font-light">
2024-06-16 16:22:49 +02:00
Designed and Developed by{" "}
<Link
href={FOOTERLINKS.footerBottom.designedBy.href}
className="text-primary font-semibold"
>
{FOOTERLINKS.footerBottom.designedBy.label}
</Link>
2024-06-17 08:37:44 +02:00
</span>
<span className="text-sm font-light">
2024-06-16 16:22:49 +02:00
All Rights Reserved{" "}
<Link
href={FOOTERLINKS.footerBottom.rightsReserved.href}
className="text-primary font-semibold"
>
{FOOTERLINKS.footerBottom.rightsReserved.label}
</Link>
2024-06-17 08:37:44 +02:00
</span>
2024-06-16 16:22:49 +02:00
</div>
2024-06-16 16:13:40 +02:00
</div>
</footer>
</>
2024-06-15 20:04:12 +02:00
);
2024-06-15 18:41:36 +02:00
};
export default Footer;