First commit
This commit is contained in:
247
components/views/Home/Footer.tsx
Normal file
247
components/views/Home/Footer.tsx
Normal file
@@ -0,0 +1,247 @@
|
||||
"use client";
|
||||
|
||||
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
|
||||
import { useTheme } from "@/hooks/useTheme";
|
||||
import {
|
||||
Sparkles,
|
||||
Github,
|
||||
Twitter,
|
||||
Linkedin,
|
||||
Mail,
|
||||
ArrowRight,
|
||||
Sun,
|
||||
Moon,
|
||||
} from "lucide-react";
|
||||
|
||||
// Footer Link Component
|
||||
function FooterLink({
|
||||
href,
|
||||
children,
|
||||
}: {
|
||||
href: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
className="group flex items-center gap-1 text-sm text-slate-400 hover:text-white transition-colors duration-200"
|
||||
>
|
||||
<span>{children}</span>
|
||||
<ArrowRight className="w-3 h-3 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
// Social Icon Component
|
||||
function SocialIcon({
|
||||
icon: Icon,
|
||||
href,
|
||||
label,
|
||||
}: {
|
||||
icon: React.ElementType;
|
||||
href: string;
|
||||
label: string;
|
||||
}) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={label}
|
||||
className="w-10 h-10 rounded-full bg-white/5 backdrop-blur-sm border border-white/10 flex items-center justify-center text-white/70 hover:bg-white/10 hover:text-white hover:scale-110 transition-all duration-200"
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export function Footer() {
|
||||
const { ref, isVisible } = useScrollAnimation<HTMLElement>({
|
||||
threshold: 0.1,
|
||||
});
|
||||
const { theme, toggleTheme, mounted } = useTheme();
|
||||
|
||||
const productLinks = [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "API Access", href: "#" },
|
||||
{ label: "Updates", href: "#" },
|
||||
];
|
||||
|
||||
const resourceLinks = [
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Guides", href: "#" },
|
||||
{ label: "FAQ", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
];
|
||||
|
||||
const legalLinks = [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Security", href: "#" },
|
||||
{ label: "GDPR", href: "#" },
|
||||
];
|
||||
|
||||
return (
|
||||
<footer
|
||||
id="footer"
|
||||
ref={ref}
|
||||
className="relative bg-slate-900 dark:bg-slate-950 pt-16 pb-8 px-4 sm:px-6 lg:px-8"
|
||||
>
|
||||
{/* Top Gradient Line */}
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent" />
|
||||
|
||||
<div
|
||||
className="max-w-7xl mx-auto"
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "translateY(0)" : "translateY(30px)",
|
||||
transition: "all 0.6s ease-out",
|
||||
}}
|
||||
>
|
||||
{/* Main Footer Content */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 lg:gap-8 mb-12">
|
||||
{/* Brand Column */}
|
||||
<div className="lg:col-span-4">
|
||||
{/* Logo */}
|
||||
<a href="#" className="inline-flex items-center gap-2 group mb-4">
|
||||
<div className="relative">
|
||||
<Sparkles className="w-8 h-8 text-blue-500 transition-transform duration-300 group-hover:rotate-12" />
|
||||
<div className="absolute inset-0 bg-blue-500/30 blur-lg rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
</div>
|
||||
<span className="text-2xl font-bold gradient-text">
|
||||
Smart-Admin Copilot
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<p className="text-sm text-slate-400 mb-2">
|
||||
AI-powered contract intelligence
|
||||
</p>
|
||||
<p className="text-sm text-slate-500 leading-relaxed max-w-xs mb-6">
|
||||
Transform your contract management with cutting-edge AI and
|
||||
blockchain technology. Built for banking, financial services, and
|
||||
insurance.
|
||||
</p>
|
||||
|
||||
{/* Social Icons */}
|
||||
<div className="flex items-center gap-3">
|
||||
<SocialIcon
|
||||
icon={Github}
|
||||
href="https://github.com"
|
||||
label="GitHub"
|
||||
/>
|
||||
<SocialIcon
|
||||
icon={Twitter}
|
||||
href="https://twitter.com"
|
||||
label="Twitter"
|
||||
/>
|
||||
<SocialIcon
|
||||
icon={Linkedin}
|
||||
href="https://linkedin.com"
|
||||
label="LinkedIn"
|
||||
/>
|
||||
<SocialIcon
|
||||
icon={Mail}
|
||||
href="mailto:contact@smartadmin.com"
|
||||
label="Email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product Links */}
|
||||
<div className="lg:col-span-2 lg:col-start-6">
|
||||
<h3 className="text-white font-semibold mb-4">Product</h3>
|
||||
<ul className="space-y-3">
|
||||
{productLinks.map((link) => (
|
||||
<li key={link.label}>
|
||||
<FooterLink href={link.href}>{link.label}</FooterLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Resources Links */}
|
||||
<div className="lg:col-span-2">
|
||||
<h3 className="text-white font-semibold mb-4">Resources</h3>
|
||||
<ul className="space-y-3">
|
||||
{resourceLinks.map((link) => (
|
||||
<li key={link.label}>
|
||||
<FooterLink href={link.href}>{link.label}</FooterLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Legal Links */}
|
||||
<div className="lg:col-span-2">
|
||||
<h3 className="text-white font-semibold mb-4">Legal</h3>
|
||||
<ul className="space-y-3">
|
||||
{legalLinks.map((link) => (
|
||||
<li key={link.label}>
|
||||
<FooterLink href={link.href}>{link.label}</FooterLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="h-px bg-slate-800 mb-8" />
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
{/* Copyright */}
|
||||
<p className="text-sm text-slate-500">
|
||||
© 2024 Smart-Admin Copilot. All rights reserved.
|
||||
</p>
|
||||
|
||||
{/* Right Side */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Language Selector */}
|
||||
<button className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-sm text-slate-400 hover:text-white hover:bg-white/10 transition-all duration-200">
|
||||
<span className="text-lg">🇬🇧</span>
|
||||
<span>English</span>
|
||||
</button>
|
||||
|
||||
{/* Theme Toggle */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-sm text-slate-400 hover:text-white hover:bg-white/10 transition-all duration-200"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
{mounted ? (
|
||||
theme === "light" ? (
|
||||
<>
|
||||
<Sun className="w-4 h-4" />
|
||||
<span>Light</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Moon className="w-4 h-4" />
|
||||
<span>Dark</span>
|
||||
</>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<Sun className="w-4 h-4" />
|
||||
<span>Theme</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Made With Love */}
|
||||
<div className="mt-8 text-center">
|
||||
<p className="text-xs text-slate-600">
|
||||
Made with <span className="text-red-500">♥</span> for your PFE
|
||||
project
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user