spestexnika
This commit is contained in:
Davron Chetin
28
components/nav_foot/header.tsx
Normal file
28
components/nav_foot/header.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { FaLocationDot } from "react-icons/fa6";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<div className="bg-primary py-3 flex items-center justify-around">
|
||||
{/* */}
|
||||
<div className="max-w-[1200px] w-full mx-auto flex items-center justify-between ">
|
||||
{/* */}
|
||||
<div>
|
||||
<a href="tel:+998332520000" className="hover:cursor-pointer text-white flex flex-wrap justify-center items-center max-w-[250px] w-full ">
|
||||
00 00 232 33 998+
|
||||
<span className="text-[#f2a01c] text-[20px]">
|
||||
<FaLocationDot />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
{/* */}
|
||||
<div className="flex flex-wrap justify-center items-center text-white max-w-[250px] w-full ">
|
||||
Uzbekistan , Tashkent
|
||||
<span className="text-[#f2a01c] text-[20px]">
|
||||
<FaLocationDot />
|
||||
</span>
|
||||
</div>
|
||||
{/* */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
103
components/nav_foot/navbar.css
Normal file
103
components/nav_foot/navbar.css
Normal file
@@ -0,0 +1,103 @@
|
||||
.nav_link_group_phone {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.Navbar_btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggler div {
|
||||
width: 1.5rem;
|
||||
height: 0.15rem;
|
||||
margin: 0.5rem;
|
||||
background: rgb(10, 131, 26);
|
||||
background-color: rgb(10, 131, 26);
|
||||
transition: 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.toggler .toggle_item2 {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.overflow{
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: rgba(66, 64, 64, 0.199);
|
||||
}
|
||||
|
||||
.overflow.active{
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav_link_group {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggler {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toggler.toggle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
/* animation toggle icon */
|
||||
.toggler.toggle .toggle_item1 {
|
||||
transform: rotate(-45deg) translate(-20px, 5px);
|
||||
}
|
||||
.toggler.toggle .toggle_item2 {
|
||||
opacity: 0;
|
||||
}
|
||||
.toggler.toggle .toggle_item3 {
|
||||
transform: rotate(45deg) translate(-20px, -5px);
|
||||
}
|
||||
|
||||
.nav_link_group_phone {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0vh;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
width: calc(50% + 100px);
|
||||
max-width: 100%;
|
||||
background-color: white;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
gap: 20px;
|
||||
padding: 0 10px 10px 10px;
|
||||
transform: translate(100%);
|
||||
transition: 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.overflow{
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 100vh;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
background-color: rgba(66, 64, 64, 0.199);
|
||||
}}
|
||||
|
||||
.active {
|
||||
transform: translate(0);
|
||||
}
|
||||
134
components/nav_foot/navbar.tsx
Normal file
134
components/nav_foot/navbar.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState } from "react";
|
||||
import i18n from "@/i18n";
|
||||
import { Link } from "react-scroll";
|
||||
import Text from "../text";
|
||||
import "./navbar.css";
|
||||
import { logoImg } from "@/assets";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Navbar() {
|
||||
// Togle variable
|
||||
const [toggle, setToggle] = useState(false);
|
||||
const [togglerIcon, setTogglerIcon] = useState("toggler");
|
||||
const [lang, setLang] = useState<"uz" | "ru">("uz");
|
||||
|
||||
const handleChangeLang = (lng: "uz" | "ru") => {
|
||||
setLang(lng);
|
||||
i18n.changeLanguage(lng);
|
||||
};
|
||||
|
||||
// change active toggler
|
||||
const changeToggler = () => {
|
||||
// for show up responsive navbar
|
||||
setToggle(!toggle);
|
||||
|
||||
// animation class for toggle icon
|
||||
togglerIcon === "toggler"
|
||||
? setTogglerIcon("toggler toggle")
|
||||
: setTogglerIcon("toggler");
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`w-[100%] mt-12 bg-white border-gray shadow-lg shadow-gray-200 fixed z-[1000] top-0`}
|
||||
>
|
||||
<div className="container max-w-[1200px] w-full mx-auto items-center justify-between ">
|
||||
<div
|
||||
className={`w-full flex justify-between items-center pb-[10px] pt-[10px]`}
|
||||
>
|
||||
<div
|
||||
className={`lg:w-auto flex justify-around items-center lg:gap-[10px] gap-[5px]`}
|
||||
>
|
||||
<div className="nav_link_group bg-white flex items-center lg:gap-[20px] md:gap-[8px]">
|
||||
<LinkGroup togle_func={changeToggler} />
|
||||
</div>
|
||||
|
||||
{/* change language part */}
|
||||
<div className="w-[110px] flex flex-col justify-center items-center rounded-[15px] "></div>
|
||||
|
||||
<div onClick={changeToggler} className={togglerIcon}>
|
||||
<div className="toggle_item1"></div>
|
||||
<div className="toggle_item2"></div>
|
||||
<div className="toggle_item3"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
toggle ? "nav_link_group_phone active" : "nav_link_group_phone"
|
||||
}
|
||||
>
|
||||
<div onClick={changeToggler} className={togglerIcon}>
|
||||
<div className="toggle_item1"></div>
|
||||
<div className="toggle_item2"></div>
|
||||
<div className="toggle_item3"></div>
|
||||
</div>
|
||||
<div className=" flex flex-col gap-[20px] pl-[30px] ">
|
||||
<LinkGroup togle_func={changeToggler} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link to="/" smooth={true} duration={500} offset={-200}>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<span className="max-[500px]:hidden flex text-2xl font-bold">
|
||||
SPES-TEXNIKA
|
||||
</span>
|
||||
<Image
|
||||
src={logoImg}
|
||||
alt="logo"
|
||||
className="logo_img"
|
||||
width={100}
|
||||
height={100}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={changeToggler}
|
||||
className={toggle ? "overflow active" : "overflow"}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LinkGroup({ togle_func }: { togle_func: () => void }) {
|
||||
return (
|
||||
<>
|
||||
<Link
|
||||
to="service"
|
||||
smooth={true}
|
||||
duration={500}
|
||||
offset={-200}
|
||||
onClick={togle_func}
|
||||
className={`lg:text-[25px] md:text-[16px] text-[25px] hover:cursor-pointer text-gray-500 hover:text-black`}
|
||||
>
|
||||
<Text txt="contact" />
|
||||
</Link>
|
||||
<Link
|
||||
to="about"
|
||||
smooth={true}
|
||||
duration={500}
|
||||
offset={-200}
|
||||
onClick={togle_func}
|
||||
className={`lg:text-[25px] md:text-[16px] text-[25px] hover:cursor-pointer text-gray-500 hover:text-black`}
|
||||
>
|
||||
<Text txt="news" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="home"
|
||||
smooth={true}
|
||||
duration={500}
|
||||
offset={-200}
|
||||
onClick={togle_func}
|
||||
className={`lg:text-[25px] md:text-[16px] text-[25px] hover:cursor-pointer text-gray-500 hover:text-black`}
|
||||
>
|
||||
<Text txt="products" />
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
}
|
||||
15
components/pageParts/products.tsx
Normal file
15
components/pageParts/products.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import Title from '../tools/title'
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
|
||||
export default function Products() {
|
||||
const {t} = useTranslation("common");
|
||||
return (
|
||||
<div>
|
||||
<Title text={t('pricing-h2')} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
6
components/text.tsx
Normal file
6
components/text.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function Text({txt}:{txt:string}) {
|
||||
const { t } = useTranslation();
|
||||
return <div>{t(txt)}</div>;
|
||||
}
|
||||
8
components/tools/title.tsx
Normal file
8
components/tools/title.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import { TitleType } from '@/types'
|
||||
import React from 'react'
|
||||
|
||||
export default function Title({text}:TitleType) {
|
||||
return (
|
||||
<div className='text-primary text-3xl ' >{text}</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user