70 lines
4.4 KiB
JavaScript
70 lines
4.4 KiB
JavaScript
|
||
import React from 'react'
|
||
import Image from 'next/image';
|
||
import Link from 'next/link';
|
||
import { FaLinkedin, FaInstagram, FaFacebook } from "react-icons/fa";
|
||
import { CiHeart } from "react-icons/ci";
|
||
|
||
export default function Footer({ className = "" }) {
|
||
return (
|
||
<>
|
||
<footer className={`bg-gray-100 w-full p-6 md:p-8 lg:p-12 text-black-500 text-sm md:text-base transition-all ${className}`}>
|
||
<div>
|
||
{/* نیمه بالا */}
|
||
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12 border-b-2 border-gray-300 pb-8 md:pb-12'>
|
||
{/* بخش لوگو */}
|
||
<div className='space-y-4'>
|
||
<Image
|
||
src="/KafehJoo.svg"
|
||
alt="KafehJoo Logo Default"
|
||
width={57}
|
||
height={49.34}
|
||
className="hover:scale-110 transition-transform"
|
||
/>
|
||
<p className='text-sm md:text-base leading-relaxed'>ما عاشق کافهگردیایم! اینجا رو ساختیم تا هر کسی بتونه راحت کافههای شهرشو پیدا کنه، منو ببینه و تجربههاشو با بقیه به اشتراک بذاره</p>
|
||
</div>
|
||
{/* بخش لینکها */}
|
||
<div className='hidden md:block'>
|
||
<p className='font-bold mb-4 text-primary-500'>دسترسی سریع</p>
|
||
<ul className='space-y-2'>
|
||
<li><Link href="/" className='hover:text-primary-500 transition-colors'>خانه</Link></li>
|
||
<li><Link href="/blog" className='hover:text-primary-500 transition-colors'>بلاگ</Link></li>
|
||
<li><Link href="/contact_us" className='hover:text-primary-500 transition-colors'>تماس با ما</Link></li>
|
||
<li><Link href="/about_us" className='hover:text-primary-500 transition-colors'>دربارهی ما</Link></li>
|
||
</ul>
|
||
</div>
|
||
{/* بخش خبرنامه و شبکههای اجتماعی */}
|
||
<div className='space-y-4'>
|
||
<p className='font-bold text-primary-500'>خبرنامه</p>
|
||
<input
|
||
type="email"
|
||
placeholder='example@gmail.com'
|
||
className='rounded-lg bg-white border-2 border-gray-300 w-full text-right px-3 py-2 focus:border-primary-500 focus:outline-none transition-colors'
|
||
/>
|
||
<div className='flex flex-row-reverse gap-4 pt-2'>
|
||
<FaInstagram className='text-lg cursor-pointer hover:text-primary-500 hover:scale-125 transition-all' />
|
||
<FaFacebook className='text-lg cursor-pointer hover:text-primary-500 hover:scale-125 transition-all' />
|
||
<FaLinkedin className='text-lg cursor-pointer hover:text-primary-500 hover:scale-125 transition-all' />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* نیمه پایین */}
|
||
<div className='flex flex-col md:flex-row justify-between items-center gap-4 pt-6 md:pt-8 text-xs md:text-sm'>
|
||
<div className='flex flex-col md:flex-row justify-center items-center gap-4 md:gap-6'>
|
||
<Link href="/privacy" className='hover:text-primary-500 transition-colors'>حریم خصوصی</Link>
|
||
<p className='hidden md:block text-gray-400'>|</p>
|
||
<Link href="/terms" className='hover:text-primary-500 transition-colors'>قوانین و مقررات</Link>
|
||
</div>
|
||
<div className='flex justify-center items-center gap-1'>
|
||
<p>همه حقوق محفوظ است – 2025 CafeFinder</p>
|
||
<CiHeart className='text-primary-500' />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</>
|
||
)
|
||
}
|
||
|
||
|