199 lines
8.7 KiB
TypeScript
199 lines
8.7 KiB
TypeScript
"use client";
|
||
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
|
||
const Footer = () => {
|
||
const companyLinks = [
|
||
{ label: "Home", href: "/#home" },
|
||
{ label: "About Us", href: "/#about" },
|
||
{ label: "Product", href: "/#product" },
|
||
{ label: "Benefits", href: "/#benefits" },
|
||
{ label: "How it works", href: "/#how-it-works" },
|
||
{ label: "Use Cases", href: "/#use-cases" },
|
||
{ label: "Privacy Policy", href: "/privacy" },
|
||
];
|
||
|
||
const socialLinks = [
|
||
{ label: "LinkedIn", href: "https://linkedin.com", icon: "linkedin" },
|
||
{ label: "X", href: "https://x.com", icon: "x" },
|
||
{ label: "Facebook", href: "https://facebook.com", icon: "facebook" },
|
||
{ label: "Instagram", href: "https://instagram.com", icon: "instagram" },
|
||
];
|
||
|
||
return (
|
||
<footer className="bg-brand relative w-full text-white">
|
||
<Image
|
||
src="/images/png/grainy.png"
|
||
width={800}
|
||
height={900}
|
||
alt="Munich City with trees and sensor on it"
|
||
className="absolute top-0 left-0 h-full w-full rounded-2xl object-cover opacity-30 mix-blend-soft-light"
|
||
/>
|
||
<div className="tab:px-4 relative z-20 mx-auto max-w-[1420px] pt-16 sm:px-2.5 lg:px-6">
|
||
<div className="tab:flex-row tab:gap-5 flex items-center justify-between sm:flex-col sm:gap-8 md:gap-0">
|
||
{/* Left: Logo, Description, Contact */}
|
||
<div className="flex w-full flex-col gap-1">
|
||
<div className="mb-4 flex items-center gap-2">
|
||
<Image
|
||
src="/images/svg/whispering-logo.svg"
|
||
alt="Whispering Trees"
|
||
width={280}
|
||
height={68}
|
||
className="h-[68px] w-[280px] object-contain"
|
||
/>
|
||
</div>
|
||
|
||
<p className="font-mium-reg text-b-3-16 leading-b3 tab:mb-6 max-w-xl tracking-[-0.5px] text-white">
|
||
FalktronTrees is redefining urban forestry through IoT and AI —
|
||
turning trees into living data sources for healthier, more
|
||
sustainable cities. Together, we’re shaping a greener, smarter
|
||
future.
|
||
</p>
|
||
|
||
<div className="tab:flex-col tab:mb-3 tab:gap-5 mt-6! flex items-start sm:mb-6 sm:flex-col sm:gap-2 md:flex-row">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-b-3-16 font-mium-reg flex items-center gap-1 font-normal tracking-[-0.5px] text-white">
|
||
<Image
|
||
width={20}
|
||
height={20}
|
||
src="/images/svg/proicons_call.svg"
|
||
className="h-5 w-5 object-cover"
|
||
alt="Call"
|
||
/>
|
||
Call us:
|
||
</span>
|
||
<a
|
||
href="tel:+492511234567"
|
||
className="text-b-3-16 font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
|
||
>
|
||
+49 251 1234567
|
||
</a>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-b-3-16 font-mium-reg flex items-center gap-1 font-normal tracking-[-0.5px] text-white">
|
||
<Image
|
||
width={20}
|
||
height={20}
|
||
src="/images/svg/mage_email.svg"
|
||
className="h-5 w-5 object-cover"
|
||
alt="email"
|
||
/>
|
||
Email:
|
||
</span>
|
||
<a
|
||
href="mailto:info@falktrontrees.com"
|
||
className="text-b-3-16 font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
|
||
>
|
||
info@falktrontrees.com
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* <Button text="Contact Us" /> */}
|
||
</div>
|
||
|
||
{/* Right: Links */}
|
||
<div className="tab:w-max sm:w-full">
|
||
<div className="grid grid-cols-2 gap-8 md:grid-cols-2">
|
||
{/* Company Links */}
|
||
<div className="min-w-[180px]">
|
||
<h3 className="text-b-1-20 font-switzer mb-5 font-medium text-white">
|
||
Company
|
||
</h3>
|
||
<ul className="space-y-1.5">
|
||
{companyLinks.map((link) => {
|
||
// ← current route
|
||
const isHash = link.href.startsWith("/#"); // ← internal hash
|
||
const targetId = link.href.replace("/#", "");
|
||
return (
|
||
<li key={link.label}>
|
||
{isHash ? (
|
||
<a
|
||
href={link.href}
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
const section = document.getElementById(targetId);
|
||
if (section) {
|
||
const yOffset = -80;
|
||
const y =
|
||
section.getBoundingClientRect().top +
|
||
window.pageYOffset +
|
||
yOffset;
|
||
window.scrollTo({ top: y, behavior: "smooth" });
|
||
}
|
||
}}
|
||
className="text-b-3-16 group font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
|
||
>
|
||
<span className="relative block overflow-hidden">
|
||
<span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
|
||
{link.label}
|
||
</span>
|
||
<span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
|
||
{link.label}
|
||
</span>
|
||
</span>
|
||
</a>
|
||
) : (
|
||
<Link
|
||
href={link.href}
|
||
className="text-b-3-16 group font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
|
||
>
|
||
<span className="relative block overflow-hidden">
|
||
<span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
|
||
{link.label}
|
||
</span>
|
||
<span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
|
||
{link.label}
|
||
</span>
|
||
</span>
|
||
</Link>
|
||
)}
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Social Links */}
|
||
<div>
|
||
<h3 className="text-b-1-20 font-switzer mb-5 font-medium text-white">
|
||
Social Links
|
||
</h3>
|
||
<ul className="space-y-1.5">
|
||
{socialLinks.map((link) => (
|
||
<li key={link.label}>
|
||
<a
|
||
href={link.href}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-b-3-16 group font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
|
||
>
|
||
<span className="relative block overflow-hidden">
|
||
<span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
|
||
{link.label}
|
||
</span>
|
||
<span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
|
||
{link.label}
|
||
</span>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom Bar */}
|
||
<div className="font-switzer text-b-2-17 mt-12 border-t border-white/10 pt-6 pb-6 text-center font-normal text-white">
|
||
© {new Date().getFullYear()} Whispering Trees. All rights reserved.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
};
|
||
|
||
export default Footer;
|