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; font-family: "Roboto", sans-serif;
} }
@@ -47,3 +47,16 @@ body {
.clip-button { .clip-button {
clip-path: polygon(16% 0, 100% 0, 84% 100%, 0% 100%); 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 Faq from "@/components/pageParts/faq";
import Partners from "@/components/pageParts/partners"; import Partners from "@/components/pageParts/partners";
import Map from "@/components/pageParts/map"; 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"; import Footer from "@/components/nav_foot/footer";
export default function Home() { 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 // offer ekskavator image
export {default as Ekskavator_offer} from './excavator.png'; export {default as Ekskavator_offer} from './excavator.png';
//footer icon image
export {default as Ekxkavator_vektor} from './excavator-vector.jpg';

194
components/nav_foot/footer.tsx
View File

@@ -1,59 +1,177 @@
import Image from "next/image";
import Text from "../text"; 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() { export default function Footer() {
return ( return (
<div dir="ltr" className="bg-primary"> <div dir="ltr" className="bg-primary">
<div className="max-w-[1200px] w-full mx-auto pt-10 "> <div className="max-w-[1200px] w-full mx-auto pt-10 ">
<div className="flex items-start justify-around">
<div></div> <div>
{/* logo */}
<div className="flex items-center justify-between my-4 mt-10"> <div className="flex items-center gap-4">
<div className="flex flex-col items-start gap-4 "> <Image src={logoImg} alt="logo image" width={100} height={100} />
<div className="text-white text-xl font-semibold"> <p className="text-white text-2xl font-bold">SPES-TEXNIKA</p>
<Text txt="subscribe" />
</div> </div>
<div className=" flex items-center justify-center gap-2"> <p className="leading-[28px] text-white text-xl max-w-[430px] w-full mt-8">
<a <Text txt="footer-p" />
href="" </p>
className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer " <div className="flex flex-col items-start gap-4 mt-10 ">
> <div className="text-white text-xl font-semibold">
<FaFacebookF /> <Text txt="subscribe" />
</a> </div>
<a <div className=" flex items-center justify-center gap-2">
href="" <a
className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer " href=""
> className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
<FaTwitter /> >
</a> <FaFacebookF />
<a </a>
href="" <a
className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer " href=""
> className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
<FaLinkedinIn /> >
</a> <FaTwitter />
<a </a>
href="" <a
className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer " href=""
> className="rounded-[50] hover:bg-secondary bg-gray-500 p-3 text-white hover:cursor-pointer "
<FaTelegramPlane /> >
</a> <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>
<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> <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>
<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. Ismoiljon Mirabdullayev © 2025. All rights reserved.
</div> </div>
</div> </div>
); );
} }