done landing page
This commit is contained in:
198
components/shared/Footer.tsx
Normal file
198
components/shared/Footer.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
"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;
|
||||
Reference in New Issue
Block a user