feat: New design and optimization
This commit is contained in:
@@ -1,28 +1,30 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { about, artOfWeaving, contact, faq, home, product } from '@/routes';
|
||||
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>
|
||||
A beautiful home deserves beautiful carpets Since
|
||||
1974, crafting the finest handmade Nepalese carpets
|
||||
</p>
|
||||
<p>{t('footer.desc.title')}</p>
|
||||
<ul>
|
||||
<li>Soorya Carpet Industries</li>
|
||||
<li>Address: Thapathali, Kathmandu</li>
|
||||
<li>Phone: [+977-1] 4780923, 4783003</li>
|
||||
<li>Email: sooryacarpets@gmail.com</li>
|
||||
<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>
|
||||
@@ -31,17 +33,17 @@ export default function Footer() {
|
||||
<ul className="flex flex-col gap-1 text-sm">
|
||||
<li>
|
||||
<Link href={home()} className="text-neutral-300">
|
||||
Home
|
||||
{t('footer.links.home')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={contact()} className="text-neutral-300">
|
||||
Contact US
|
||||
{t('footer.links.contact')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={about()} className="text-neutral-300">
|
||||
About Us
|
||||
{t('footer.links.about-us')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
@@ -49,27 +51,30 @@ export default function Footer() {
|
||||
href={artOfWeaving()}
|
||||
className="text-neutral-300"
|
||||
>
|
||||
Art of Weaving
|
||||
{t('footer.links.art')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={product()} className="text-neutral-300">
|
||||
Products
|
||||
<Link
|
||||
href={index.product()}
|
||||
className="text-neutral-300"
|
||||
>
|
||||
{t('footer.links.products')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={home()} className="text-neutral-300">
|
||||
Bespoke Design
|
||||
{t('footer.links.bespoke')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={home()} className="text-neutral-300">
|
||||
Design Gallery / E-Catalog
|
||||
{t('footer.links.gallery')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={faq()} className="text-neutral-300">
|
||||
FAQ
|
||||
{t('footer.links.faq')}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -78,46 +83,57 @@ export default function Footer() {
|
||||
<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">
|
||||
Newsletter/Updates
|
||||
{t('footer.news.title')}
|
||||
</Label>
|
||||
<div className="flex items-center gap-2 max-sm:flex-col">
|
||||
<Input
|
||||
id="newsletter"
|
||||
placeholder="Email Address"
|
||||
placeholder={t('footer.news.input')}
|
||||
className="bg-white"
|
||||
/>
|
||||
<Button
|
||||
variant={'outline'}
|
||||
className="bg-transparent text-white max-sm:w-full"
|
||||
>
|
||||
Subscribe <MoveRight />
|
||||
{t('footer.news.button')} <MoveRight />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className="text-base font-medium text-white">
|
||||
Legal
|
||||
{t('footer.news.legal.title')}
|
||||
</p>
|
||||
<ul className="flex flex-col gap-1 text-sm text-neutral-300">
|
||||
<li>
|
||||
<Link href="privacy-policy">
|
||||
Privacy Policy
|
||||
{t('footer.news.legal.privacy')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="terms-and-condition">
|
||||
Terms & Conditions Return
|
||||
{t('footer.news.legal.terms')}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={faq()}>
|
||||
Policy (from FAQ)Privacy Policy (from
|
||||
FAQ)
|
||||
{t('footer.news.legal.policy')}
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user