first commit
This commit is contained in:
Samandar Turgunboyev
@@ -1,82 +1,114 @@
|
||||
import { PRODUCT_INFO } from '@/shared/constants/data';
|
||||
import { InstagramIcon, YoutubeIcon } from 'lucide-react';
|
||||
import { sections } from '../lib/data';
|
||||
import { ModeToggle } from '@/shared/ui/theme-toggle';
|
||||
import formatPhone from '@/shared/lib/formatPhone';
|
||||
import { categoryList } from '@/widgets/welcome/lib/data';
|
||||
import { Facebook, Instagram, Mail, Phone, Send, Twitter } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import { Fragment } from 'react';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<section className="py-32">
|
||||
<div className="custom-container">
|
||||
<div className="flex w-full flex-col items-center justify-between gap-10 text-center lg:flex-row lg:items-start lg:text-left">
|
||||
<div className="flex w-full flex-col items-center justify-between gap-6 lg:items-start">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-2 lg:justify-start">
|
||||
<a href="https://shadcnblocks.com">
|
||||
<img
|
||||
src={PRODUCT_INFO.logo}
|
||||
<section className="max-lg:py-9 py-12 z-50 w-full bg-slate-50 border-t border-slate-200">
|
||||
<div className="custom-container max-lg:hidden">
|
||||
<div className="flex w-full gap-10 flex-col items-center justify-between text-center lg:flex-row lg:items-start lg:text-left">
|
||||
<div className="flex w-fit flex-col items-center justify-between gap-4 lg:items-start mb-8 lg:mb-0">
|
||||
<div className="flex items-center gap-3 lg:justify-start">
|
||||
<div className="p-2 bg-blue-600 rounded-xl">
|
||||
<Image
|
||||
width={500}
|
||||
height={500}
|
||||
src={PRODUCT_INFO.logo || '/placeholder.svg'}
|
||||
alt={PRODUCT_INFO.name}
|
||||
title={PRODUCT_INFO.name}
|
||||
className="h-8"
|
||||
className="h-6 w-6 brightness-0 invert"
|
||||
/>
|
||||
</a>
|
||||
<h2 className="text-xl font-semibold">{PRODUCT_INFO.name}</h2>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
A collection of 100+ responsive HTML templates for your startup
|
||||
business or side project.
|
||||
</p>
|
||||
<ul className="flex items-center space-x-6 text-muted-foreground">
|
||||
<li className="font-medium hover:text-primary">
|
||||
<a href="#">
|
||||
<InstagramIcon className="size-6" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="font-medium hover:text-primary">
|
||||
<a href="#">
|
||||
<YoutubeIcon className="size-6" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="font-medium hover:text-primary">
|
||||
<a href="#">
|
||||
<InstagramIcon className="size-6" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="font-medium hover:text-primary">
|
||||
<a href="#">
|
||||
<InstagramIcon className="size-6" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ModeToggle />
|
||||
</div>
|
||||
<div className="grid w-full grid-cols-3 gap-6 lg:gap-20">
|
||||
{sections.map((section, sectionIdx) => (
|
||||
<div key={sectionIdx}>
|
||||
<h3 className="mb-6 font-bold">{section.title}</h3>
|
||||
<ul className="space-y-4 text-sm text-muted-foreground">
|
||||
{section.links.map((link, linkIdx) => (
|
||||
<li
|
||||
key={linkIdx}
|
||||
className="font-medium hover:text-primary"
|
||||
>
|
||||
<a href={link.href}>{link.name}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
<h2 className="text-xl font-bold text-slate-800">
|
||||
{PRODUCT_INFO.name}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-slate-600 max-w-xs leading-relaxed text-sm">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est,
|
||||
totam?
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid w-full grid-cols-1 md:grid-cols-3 gap-8 lg:gap-16">
|
||||
<div>
|
||||
<h3 className="mb-4 font-bold text-base text-black">
|
||||
Kategoriyalar
|
||||
</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
{categoryList.slice(0, 3).map((link) => (
|
||||
<Fragment key={link.name}>
|
||||
{link.subCategories.slice(0, 2).map((e, linkIdx) => (
|
||||
<li
|
||||
key={linkIdx}
|
||||
className="text-muted-foreground hover:text-blue-600 transition-colors cursor-pointer"
|
||||
>
|
||||
<a href={`/category/${link.name}/${e.name}`}>
|
||||
{e.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</Fragment>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="mb-4 font-bold text-base text-black">Sahifalar</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li className="text-muted-foreground hover:text-blue-600 transition-colors cursor-pointer">
|
||||
<a href={'#'}>Biz haqimizda</a>
|
||||
</li>
|
||||
<li className="text-muted-foreground hover:text-blue-600 transition-colors cursor-pointer">
|
||||
<a href={'#'}>Mahfiylik siyosati</a>
|
||||
</li>
|
||||
<li className="text-muted-foreground hover:text-blue-600 transition-colors cursor-pointer">
|
||||
<a href={'#'}>Savol va javoblar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="mb-4 font-bold text-base text-black">Aloqa</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li className="text-muted-foreground hover:text-blue-600 transition-colors cursor-pointer">
|
||||
<a href={'#'} className="flex items-center gap-2">
|
||||
<Send className="size-4" />
|
||||
<p>Telegram</p>
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-muted-foreground hover:text-blue-600 transition-colors cursor-pointer">
|
||||
<a href={'#'} className="flex items-center gap-2">
|
||||
<Instagram className="size-4" />
|
||||
<p>Instagram</p>
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-muted-foreground hover:text-blue-600 transition-colors cursor-pointer">
|
||||
<a href={'#'} className="flex items-center gap-2">
|
||||
<Facebook className="size-4" />
|
||||
<p>Facebook</p>
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-muted-foreground hover:text-blue-600 transition-colors cursor-pointer">
|
||||
<a href={'#'} className="flex items-center gap-2">
|
||||
<Twitter className="size-4" />
|
||||
<p>Twitter</p>
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-muted-foreground hover:text-blue-600 transition-colors cursor-pointer">
|
||||
<a href={'#'} className="flex items-center gap-2">
|
||||
<Mail className="size-4" />
|
||||
<p>e-mail</p>
|
||||
</a>
|
||||
</li>
|
||||
<li className="text-muted-foreground hover:text-blue-600 transition-colors cursor-pointer">
|
||||
<a href={'#'} className="flex items-center gap-2">
|
||||
<Phone className="size-4" />
|
||||
<p>{formatPhone('+998901234567')}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 flex flex-col justify-between gap-4 border-t pt-8 text-center text-sm font-medium text-muted-foreground lg:flex-row lg:items-center lg:text-left">
|
||||
<p>
|
||||
© {new Date().getFullYear()} {PRODUCT_INFO.creator}. All rights
|
||||
reserved.
|
||||
</p>
|
||||
<ul className="flex justify-center gap-4 lg:justify-start">
|
||||
<li className="hover:text-primary">
|
||||
<a href={PRODUCT_INFO.terms_of_use}>Terms and Conditions</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user