soorya-carpet/resources/js/components/layout/Footer.tsx

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { about, artOfWeaving, contact, faq, home } from '@/routes';
import index from '@/routes/index/index';
import { useTranslations } from '@/utils/i18n';
import ns from '@asset/img/about/ns.gif';
import oko from '@asset/img/about/oko.gif';
import logo from '@asset/img/logo/soorya.png';
import { SiFacebook, SiInstagram } from '@icons-pack/react-simple-icons';
import { Link } from '@inertiajs/react';
import { MoveRight } from 'lucide-react';

export default function Footer() {
    const { t } = useTranslations();
    return (
        <footer className="bg-primary">
            <div className="mx-auto grid max-w-screen-2xl grid-cols-4 gap-8 px-12 py-8 max-md:grid-cols-1 max-md:grid-rows-4 max-md:px-6">
                <div className="flex flex-col gap-4">
                    <img src={logo} alt="Soorya Carpet Logo" className="w-32" />
                    <div className="flex flex-col gap-4 text-sm text-white">
                        <p>{t('footer.desc.title')}</p>
                        <ul>
                            <li>{t('footer.desc.company')}</li>
                            <li>{t('footer.desc.address')}</li>
                            <li>{t('footer.desc.phone')}</li>
                            <li>{t('footer.desc.email')}</li>
                        </ul>
                    </div>
                </div>
                <div className="flex flex-col gap-6">
                    <p className="text-lg font-medium text-white">Quick Link</p>
                    <ul className="flex flex-col gap-1 text-sm">
                        <li>
                            <Link href={home()} className="text-neutral-300">
                                {t('footer.links.home')}
                            </Link>
                        </li>
                        <li>
                            <Link href={contact()} className="text-neutral-300">
                                {t('footer.links.contact')}
                            </Link>
                        </li>
                        <li>
                            <Link href={about()} className="text-neutral-300">
                                {t('footer.links.about-us')}
                            </Link>
                        </li>
                        <li>
                            <Link
                                href={artOfWeaving()}
                                className="text-neutral-300"
                            >
                                {t('footer.links.art')}
                            </Link>
                        </li>
                        <li>
                            <Link
                                href={index.product()}
                                className="text-neutral-300"
                            >
                                {t('footer.links.products')}
                            </Link>
                        </li>
                        <li>
                            <Link href={home()} className="text-neutral-300">
                                {t('footer.links.bespoke')}
                            </Link>
                        </li>
                        <li>
                            <Link href={home()} className="text-neutral-300">
                                {t('footer.links.gallery')}
                            </Link>
                        </li>
                        <li>
                            <Link href={faq()} className="text-neutral-300">
                                {t('footer.links.faq')}
                            </Link>
                        </li>
                    </ul>
                </div>
                <div>
                    <p className="text-lg font-medium text-white">
                        Certifications & Trust Badges
                    </p>
                    <div className="grid grid-cols-3 gap-1">
                        <img
                            src={ns}
                            alt="NS Standard"
                            className="aspect-square object-cover object-center"
                        />
                        <img
                            src={oko}
                            alt="oko Standard"
                            className="object-cover object-center"
                        />
                    </div>
                </div>
                <div>
                    <div className="flex flex-col gap-6">
                        <form className="flex flex-col gap-2">
                            <Label className="text-lg font-medium text-white">
                                {t('footer.news.title')}
                            </Label>
                            <div className="flex items-center gap-2 max-sm:flex-col">
                                <Input
                                    id="newsletter"
                                    placeholder={t('footer.news.input')}
                                    className="bg-white"
                                />
                                <Button
                                    variant={'outline'}
                                    className="bg-transparent text-white max-sm:w-full"
                                >
                                    {t('footer.news.button')} <MoveRight />
                                </Button>
                            </div>
                        </form>
                        <div className="flex flex-col gap-2">
                            <p className="text-base font-medium text-white">
                                {t('footer.news.legal.title')}
                            </p>
                            <ul className="flex flex-col gap-1 text-sm text-neutral-300">
                                <li>
                                    <Link href="privacy-policy">
                                        {t('footer.news.legal.privacy')}
                                    </Link>
                                </li>
                                <li>
                                    <Link href="terms-and-condition">
                                        {t('footer.news.legal.terms')}
                                    </Link>
                                </li>
                                <li>
                                    <Link href={faq()}>
                                        {t('footer.news.legal.policy')}
                                    </Link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <hr className="mx-auto my-4 max-w-screen-2xl border-neutral-500 px-12" />
            <div className="max-auto flex max-w-screen-2xl items-center justify-between px-12 py-4 max-md:flex-col max-md:gap-4 max-md:px-6">
                <p className="text-xs text-white">
                    &copy; {new Date().getFullYear()} Soorya Carpet Industries.
                    All rights reserved.
                </p>
                <ul className="flex items-center gap-4">
                    <li>
                        <Link
                            href="https://www.facebook.com/sooryacarpet/?locale=ne_NP"
                            target="_blank"
                        >
                            <SiFacebook color="#d4d4d4" size={16} />
                        </Link>
                    </li>
                    <li>
                        <Link
                            href="https://www.instagram.com/kaleen_carpet/"
                            target="_blank"
                        >
                            <SiInstagram color="#d4d4d4" size={16} />
                        </Link>
                    </li>
                </ul>
            </div>
        </footer>
    );
}