Amir Hossein Moghiseh 2025-02-24 17:02:00 +03:30
parent d788b8e18b
commit e39ea1b8bf
7 changed files with 63 additions and 46 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 299 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 321 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 321 KiB

After

Width:  |  Height:  |  Size: 298 KiB

View File

@ -12,6 +12,7 @@ import { usePathname, useRouter } from "next/navigation";
import logo from "../../assets/images/logo.png";
import { useLocale } from "next-intl";
import { ChevronDown } from "lucide-react";
const theme = 1;
@ -48,7 +49,7 @@ const Navbar = ({ items }) => {
useEffect(() => {
const handleScroll = () => {
const scrollTop = window.scrollY;
setIsScrolled(scrollTop > 0);
setIsScrolled(scrollTop > 96);
};
window.addEventListener("scroll", handleScroll);
@ -73,17 +74,37 @@ const Navbar = ({ items }) => {
{/* <div className="bg-sky-900 p-3 flex">
<p className="mb-0 text-white"> salam</p>
</div> */}
<div
className={` max-[1023px]:hidden lg:block tr03 ${isScrolled
? "fixed w-full !z-[1000] top-0 tr"
: "pt-10 xs:px-10 lg:px-5 xl:px-20 "
}`}
className={` max-[1023px]:hidden lg:block tr03 ${!isScrolled && " lg:px-5 xl:px-20 "} `}
>
<div className="mx-auto w-full flex justify-center ">
<Image src={`/images/logo-${locale}.png?v=1`} width={85} height={85} className="lg:w-auto" />
</div>
{isScrolled && (
<div className="w-full h-[76px]">
</div>
)}
<nav
className={` ${locale === "en" ? "rtl pl-1" : "ltr pr-1"} flex justify-between w-full items-center ${isScrolled ? " bg-gray-100 " : " rounded-2xl"
className={`${locale === "en" ? "rtl pl-1" : "ltr pr-1"} flex justify-between w-full items-center ${isScrolled ? " bg-gray-100 fixed top-0 z-50 rounded-b-3xl " : " rounded-2xl"
}
${theme == 1 ? "bg-gray-100 " : " "}`}
${theme == 1 ? "bg-gray-100 p-4" : " "}`}
>
{
isScrolled &&
(
<div className="relative rounded-lg flex flex-col items-center rounded-tl-2xl justify-center my-auto">
<Image
src={logo}
width={75} height={75}
alt="llc "
className="mx-auto object-contain"
/>
</div>
)
}
{/* <div className={`w-full ${locale === "en" ? "rtl" : "ltr"} px-4 py-4`}>
<div className="flex">
@ -95,29 +116,18 @@ const Navbar = ({ items }) => {
</div> */}
<div className={`w-full flex p-2 ${locale === "en" ? "ltr" : "rtl"} `}>
<div className="size-[75px] relative p-1 bg-white rounded-lg flex flex-col items-center rounded-tl-2xl justify-center my-auto">
<Image
src={logo}
fill
alt="llc "
className="mx-auto object-contain"
/>
</div>
{items.map((item, index) => (
<div
key={index}
className={` mx-2 px-2 w-fit text-sm p-7 ${1
? "bg-visa2-200 rounded-full !text-white text-shadow pb-1 relative"
: ""
} `}
className={`mx-2 px-2 w-fit text-sm bg-visa2-200 rounded-full !text-white text-shadow relative group`}
onMouseEnter={() => {
// setHoverItemNavbar(index);
setActiveStepNavbar(item.documentId);
}}
onMouseLeave={() => {
onMouseLeave={(e) => {
// setHoverItemNavbar(-1);
setActiveStepNavbar(null);
}}
@ -125,15 +135,15 @@ const Navbar = ({ items }) => {
>
<Link
href={`${item.link}`}
className={`text-base font-medium whitespace-nowrap text-black`}
className={`text-base font-medium whitespace-nowrap text-black py-1 px-4 inline-flex items-center gap-4 rounded-lg group-hover:bg-gray-200`}
>
{item.title}
{item.children.length > 0 && ""}
{item.children.length > 0 && <ChevronDown size={16}/>}
</Link>
{item.children.length > 0 && item.documentId == activeStepNavbar && (
<ul className="absolute left-0 mt-2 w-48 bg-white text-black rounded-lg shadow-lg z-50 overflow-hidden">
<ul className="absolute left-0 w-48 bg-white text-black rounded-lg shadow-lg z-50 overflow-hidden">
{
item.children.map((c, index) => (
@ -150,6 +160,7 @@ const Navbar = ({ items }) => {
</div>
))}
</div>
@ -286,7 +297,7 @@ const Navbar = ({ items }) => {
setResponsiveNavBarItemStep(index);
setActiveStepNavbar(e.documentId);
}else{
} else {
setClosNavbar(false)
router.push(e.link)
}

View File

@ -1,10 +1,13 @@
export default function ProductDescription({ description }) {
import { getMessages } from "next-intl/server"
export default async function ProductDescription({ description }) {
const t = await getMessages()
return (
<div>
{
description &&
<>
<h2 className="text-2xl font-bold mb-4">Product Description</h2>
<h2 className="text-2xl font-bold mb-4">{t.PDP.productDescription}</h2>
<div className="prose max-w-none">
<p className="content" dangerouslySetInnerHTML={{ __html: description }}></p>
</div>

View File

@ -1,9 +1,11 @@
import { getMessages } from "next-intl/server"
export default function ProductProperties({ properties }) {
export default async function ProductProperties({ properties }) {
const t = await getMessages()
return (
<div>
<h2 className="text-2xl font-bold mb-4">Product Specifications</h2>
<h2 className="text-2xl font-bold mb-4">{t.PDP.productSpecifications}</h2>
<dl className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
{properties.map((prop) => (
<div key={prop.id} className="border-t border-gray-200 pt-6">

View File

@ -7,21 +7,21 @@ const AboutUs = () => {
const t = useTranslations("HomePage.AboutUs")
const locale = useLocale()
return (
<div className=" min-h-[calc(100vh-108px)] flex flex-col items-center justify-center relative ">
<div className="max-w-screen-xl mx-auto">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" className="absolute left-0 top-0 bottom-0 -z-10 right-0">
<>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" className="absolute left-0 top-0 bottom-0 -z-10 right-0">
<pattern id="diagonalLines" width="10" height="10" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="10" stroke="#e2e8f0" stroke-width="1" />
</pattern>
<rect width="100%" height="100%" fill="url(#diagonalLines)" />
</svg>
<div className=" min-h-[calc(100vh-108px)] flex flex-col items-center justify-center relative -mt-16 -z-10 ">
<div className="max-w-screen-xl mx-auto">
<div className="xs:px-3 md:px-10 md:container md:mx-auto ">
<div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-5 items-center " dir={locale == "en" ? "rtl" : "ltr"} >
<div className="mx-auto">
<Image src={`/images/logo-${locale}.png?v=1`} width={350} height={350} className="xs:w-[200px] lg:w-auto" />
</div>
<div className=" gap-5 items-center " dir={locale == "en" ? "rtl" : "ltr"} >
<div className="text-left relative mb-10 col-span-2">
<h2 className={
`text-4xl font-bold relative z-10 xs:text-center lg:text-left ${locale === "en" ? "lg:text-left" : "lg:text-right"}`
@ -42,20 +42,21 @@ const AboutUs = () => {
</p>
{/*
<div className="flex gap-2 mx-auto mt-5 w-full justify-center lg:justify-end">
<button className="btn btn-primary text-base py-3 px-10 ">
{" "}
Export
</button>
<button className="btn btn-primary text-base p-3 px-10">
{" "}
Industrial
</button>
<button className="btn btn-primary text-base py-3 px-10 ">
{" "}
Export
</button>
<button className="btn btn-primary text-base p-3 px-10">
{" "}
Industrial
</button>
</div> */}
</div>
</div>
</div>
</div>
</div>
</>
);
};