88 lines
4.0 KiB
TypeScript
88 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
import { Instagram, MessageCircle, Linkedin } from 'lucide-react'
|
|
import { useContent } from '@/components/layout/content-provider'
|
|
|
|
export default function Footer5() {
|
|
const content = useContent()
|
|
const { footer } = content.navigation
|
|
const logoAlt = footer.logoAlt
|
|
const logoUrl = content.images.logo
|
|
|
|
return (
|
|
<footer className="m-1 rounded-3xl border border-border dark:border-primary/20 bg-card">
|
|
<div className="mx-auto max-w-5xl px-5 py-8">
|
|
<div className="flex flex-wrap items-center justify-between gap-4 border-b pb-6">
|
|
<Link
|
|
href="/"
|
|
aria-label="go home"
|
|
className="flex items-center cursor-pointer">
|
|
<Image
|
|
src={logoUrl}
|
|
alt={logoAlt}
|
|
width={150}
|
|
height={50}
|
|
className="mx-auto h-10 w-auto object-contain object-center md:h-12"
|
|
/>
|
|
</Link>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-sm text-muted-foreground" dir="rtl">{footer.socialLabel}</span>
|
|
<Link
|
|
href="#"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Instagram"
|
|
className="text-muted-foreground transition-colors hover:text-primary dark:hover:text-primary">
|
|
<Instagram className="size-5" />
|
|
</Link>
|
|
<Link
|
|
href="#"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Telegram"
|
|
className="text-muted-foreground transition-colors hover:text-primary dark:hover:text-primary">
|
|
<MessageCircle className="size-5" />
|
|
</Link>
|
|
<Link
|
|
href="#"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="LinkedIn"
|
|
className="text-muted-foreground transition-colors hover:text-primary dark:hover:text-primary">
|
|
<Linkedin className="size-5" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 flex flex-wrap items-center justify-center gap-6">
|
|
{footer.links.map((link, index) => (
|
|
<Link
|
|
key={index}
|
|
href={link.href}
|
|
className="text-sm text-muted-foreground hover:text-primary transition-colors duration-150">
|
|
{link.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="mt-6 flex flex-col items-center justify-center gap-2 text-center sm:flex-row sm:gap-4">
|
|
{footer.phoneNumber && footer.phoneHref && (
|
|
<a
|
|
href={footer.phoneHref}
|
|
className="text-sm text-muted-foreground hover:text-primary transition-colors duration-150"
|
|
dir="ltr">
|
|
{footer.phoneLabel && <span className="ms-1">{footer.phoneLabel}</span>}
|
|
{footer.phoneNumber}
|
|
</a>
|
|
)}
|
|
<p className="text-sm text-muted-foreground">
|
|
{footer.copyright}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|
|
|