Davron/spestexnika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

footer

Browse Source
This commit is contained in:
Davron Chetin
2025-10-09 10:14:01 +05:00
parent 9c9d5dbc2c
commit 18890c0049
4 changed files with 176 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
components/nav_foot/footer.tsx
View File

@@ -1,59 +1,177 @@
import Image from "next/image";
import Text from "../text";
import { FaFacebookF , FaTwitter , FaLinkedinIn , FaTelegramPlane } from "react-icons/fa";
import {
FaFacebookF,
FaTwitter,
FaLinkedinIn,
FaTelegramPlane,
FaPhone,
FaInstagram,
FaTelegram,
} from "react-icons/fa";
import { Ekxkavator_vektor, logoImg } from "@/assets";
import { FaLocationDot } from "react-icons/fa6";
export default function Footer() {
return (
<div dir="ltr" className="bg-primary">
<div className="max-w-[1200px] w-full mx-auto pt-10 ">
<div></div>
<div className="flex items-center justify-between my-4 mt-10">
<div className="flex flex-col items-start gap-4 ">
<div className="text-white text-xl font-semibold">
<Text txt="subscribe" />
<div className="flex items-start justify-around">
<div>
{/* logo */}
<div className="flex items-center gap-4">
<Image src={logoImg} alt="logo image" width={100} height={100} />
<p className="text-white text-2xl font-bold">SPES-TEXNIKA</p>
</div>
<div className=" flex items-center justify-center gap-2">
<a
href=""
className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
>
<FaFacebookF />
</a>
<a
href=""
className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
>
<FaTwitter />
</a>
<a
href=""
className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
>
<FaLinkedinIn />
</a>
<a
href=""
className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
>
<FaTelegramPlane />
</a>
<p className="leading-[28px] text-white text-xl max-w-[430px] w-full mt-8">
<Text txt="footer-p" />
</p>
<div className="flex flex-col items-start gap-4 mt-10 ">
<div className="text-white text-xl font-semibold">
<Text txt="subscribe" />
</div>
<div className=" flex items-center justify-center gap-2">
<a
href=""
className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
>
<FaFacebookF />
</a>
<a
href=""
className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
>
<FaTwitter />
</a>
<a
href=""
className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
>
<FaLinkedinIn />
</a>
<a
href=""
className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
>
<FaTelegramPlane />
</a>
</div>
</div>
</div>
<div>
<div className="flex flex-col gap-5">
<div className="text-white text-2xl font-bold">
<Text txt="links" />
</div>
<p className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer ">
<span className="w-[10px] h-[10px] bg-secondary rounded-[50%] "></span>
<Text txt="products" />
</p>
<p className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer ">
<span className="w-[10px] h-[10px] bg-secondary rounded-[50%] "></span>
<Text txt="news" />
</p>
<p className="flex items-center gap-2 text-white hover:text-secondary hover:cursor-pointer ">
<span className="w-[10px] h-[10px] bg-secondary rounded-[50%] "></span>
<Text txt="contact" />
</p>
</div>
<div className="flex flex-col justify-start">
<div className="text-white text-2xl font-bold">
<Text txt="contact-info" />
</div>
<div className="flex items-center gap-4 my-3">
<span className="bg-secondary p-3 text-xl text-white ">
<FaPhone />
</span>
<div className="flex flex-col gap-2">
<p className="hover:cursor-pointer hover:text-secondary text-white">
+998 33 252 00 00
</p>
<p className="hover:cursor-pointer hover:text-secondary text-white">
+998 33 805 55 55
</p>
</div>
</div>
<div className="flex items-center gap-4 my-3">
<span className="bg-secondary p-3 text-xl text-white ">
<FaLocationDot />
</span>
<div className="flex flex-col gap-2">
<p className="hover:cursor-pointer hover:text-secondary text-white">
Yakkasaroy,
</p>
<p className="hover:cursor-pointer hover:text-secondary text-white">
Toshkent
</p>
</div>
</div>
</div>
<div className="group flex flex-col items-end justify-end pt-15">
<div className="group relative">
<div
className="
flex gap-1 items-center text-white text-xl
opacity-0 translate-x-8 pointer-events-none
group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto
transition-all duration-1000 ease-in-out delay-800 hover:cursor-pointer
"
>
<p className="bg-[#0e76a8] p-2 rounded-[8px]">Telegram</p>
<span className="rounded-full p-2 bg-[#0e76a8] ml-2">
<FaTelegram />
</span>
</div>
</div>
</div>
<div className="group relative my-2 ">
<div
className="
flex gap-1 items-center text-white text-xl
opacity-0 translate-x-6 pointer-events-none
group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto
transition-all duration-500 ease-in-out delay-600 hover:cursor-pointer
"
>
<p className="bg-[#00900c] p-2 rounded-[8px] bg-linear-to-tr from-[#feda75] via-[#cc2980] to-[#9a2eba] ">
Instagram
</p>
<span className="bg-linear-to-tr from-[#feda75] via-[#cc2980] to-[#9a2eba] rounded-[50%] p-2 ">
<FaInstagram />
</span>
</div>
</div>
<div className="group relative">
<div
className="
flex gap-1 items-center text-white text-xl
opacity-0 translate-x-2 pointer-events-none
group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto
transition-all duration-100 ease-in-out delay-200 hover:cursor-pointer
"
>
<p className="bg-[#00900c] p-2 rounded-[8px]">Phone</p>
<span className="rounded-[50%] p-2 bg-[#00900c] ">
<FaPhone />
</span>
</div>
</div>
<Image
src={Ekxkavator_vektor}
width={90}
height={90}
className="mt-3 hover:cursor-pointer icon_animation rounded-[50%] object-cover"
alt="icon image"
/>
</div>
</div>
</div>
<div className=" py-5 text-white border-t-[1px] text-center border-gray-500">
<div className=" py-5 text-white border-t-[1px] text-center border-gray-500 mt-20">
Ismoiljon Mirabdullayev © 2025. All rights reserved.
</div>
</div>
);
}