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

15
app/globals.css
View File

@@ -29,7 +29,7 @@ body {
}
* {
transition: 0.1s ease-in-out all;
transition: 0.6s ease-in-out all;
font-family: "Roboto", sans-serif;
}
@@ -47,3 +47,16 @@ body {
.clip-button {
clip-path: polygon(16% 0, 100% 0, 84% 100%, 0% 100%);
}
/* footer ekxkavator icon animation */
@keyframes icon_animatsion_tool {
from{
box-shadow:none;
}to{
box-shadow: 0px 0px 15px 5px var(--secondary);
}
}
.icon_animation{
animation: icon_animatsion_tool 2s infinite alternate-reverse ;
}

2
app/page.tsx
View File

@@ -7,7 +7,7 @@ import Offer from "@/components/pageParts/offer";
import Faq from "@/components/pageParts/faq";
import Partners from "@/components/pageParts/partners";
import Map from "@/components/pageParts/map";
import Contact from "@/components/pageParts/contact/contact";
import Contact from "@/components/pageParts/contact";
import Footer from "@/components/nav_foot/footer";
export default function Home() {

3
assets/index.ts
View File

@@ -178,3 +178,6 @@ export {default as ToshCity } from './partners/tashkentcity.png';
// offer ekskavator image
export {default as Ekskavator_offer} from './excavator.png';
//footer icon image
export {default as Ekxkavator_vektor} from './excavator-vector.jpg';

142
components/nav_foot/footer.tsx
View File

@@ -1,16 +1,32 @@
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="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>
<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>
@@ -41,19 +57,121 @@ export default function Footer() {
</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 className=" py-5 text-white border-t-[1px] text-center border-gray-500">
<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 mt-20">
Ismoiljon Mirabdullayev © 2025. All rights reserved.
</div>
</div>
);
}