soheilkhaledabadi/rahavard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Menu,Lang,Image): fix bug menu and change lang and set images

Browse Source
This commit is contained in:
soheil khaledabadi
2026-05-22 13:35:28 +03:30
parent 7d30e4f180
commit 4d995a61af
11 changed files with 176 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@@ -1,4 +1,4 @@
NEXT_PUBLIC_API_BASE_URL=https://cms.soheilkhaledabadi.ir NEXT_PUBLIC_API_BASE_URL=https://cms.rahavardmgp.com/
NEXT_PUBLIC_IMAGE_HOSTNAME=axicon-portal.iran.liara.run NEXT_PUBLIC_IMAGE_HOSTNAME=axicon-portal.iran.liara.run
ARVAN_NAMESPACE=docker.arvancloud.ir ARVAN_NAMESPACE=docker.arvancloud.ir
IMAGE_TAG=latest IMAGE_TAG=latest

2
.env.example
View File

@@ -1,5 +1,5 @@
# API base URL (backend CMS) # API base URL (backend CMS)
NEXT_PUBLIC_API_BASE_URL=https://your-api-domain.com NEXT_PUBLIC_API_BASE_URL=https://cms.rahavardmgp.com/
# Hostname of the image server returned by the API (for Next.js Image optimization) # Hostname of the image server returned by the API (for Next.js Image optimization)
NEXT_PUBLIC_IMAGE_HOSTNAME=your-image-cdn-domain.com NEXT_PUBLIC_IMAGE_HOSTNAME=your-image-cdn-domain.com

4
app/[lang]/layout.js
View File

@@ -48,7 +48,9 @@ export const metadata = {
} }
export const dynamic = 'force-dynamic'; export const dynamic = 'force-dynamic';
export default function RootLayout({ params: { lang }, children }) { export default async function RootLayout({ params, children }) {
const { lang } = await params
return ( return (
<html lang={lang} dir={lang === "fa" ? "rtl" : "ltr"} className={dana.className + " scroll-smooth"}> <html lang={lang} dir={lang === "fa" ? "rtl" : "ltr"} className={dana.className + " scroll-smooth"}>
<body className="flex flex-col relative h-full w-full max-w-screen"> <body className="flex flex-col relative h-full w-full max-w-screen">

3
app/[lang]/page.js
View File

@@ -6,7 +6,8 @@ import Production from '@/components/Production'
import About from '@/components/About' import About from '@/components/About'
import BlogPosts from '@/components/BlogPosts' import BlogPosts from '@/components/BlogPosts'
export default async function Home({ params: { lang } }) { export default async function Home({ params }) {
const { lang } = await params
return ( return (
<main className="flex flex-col w-full h-full bg-bg-1 scroll-x-hidden" > <main className="flex flex-col w-full h-full bg-bg-1 scroll-x-hidden" >

10
components/About.js
View File

@@ -1,9 +1,7 @@
import PicSmall from '../public/PicSmall.png'
import Avatars from '../public/Avatars.png'
import Image from 'next/image' import Image from 'next/image'
import PicAbout from '../public/PicAbout.png' import PicAbout from '../public/PicAbout.png'
import Link from 'next/link' import Link from 'next/link'
import { aboutImages } from '@/lib/localImages'
async function getData(id) { async function getData(id) {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/content/index/${id}`) const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/content/index/${id}`)
@@ -27,7 +25,7 @@ export default async function About({lang}) {
return( return(
<div className='grid lg:grid-cols-3 grid-cols-1 grid-rows-3 gap-2 font-[5] my-16 mx-8 lg:mx-28'> <div id="about" className='grid scroll-mt-28 lg:grid-cols-3 grid-cols-1 grid-rows-3 gap-2 font-[5] my-16 mx-8 lg:mx-28'>
<div className='flex justify-between items-center p-8'> <div className='flex justify-between items-center p-8'>
<div className='flex flex-col w-full'> <div className='flex flex-col w-full'>
<span>{ data.aboutSuper?.[0]?.body || '' }</span> <span>{ data.aboutSuper?.[0]?.body || '' }</span>
@@ -64,7 +62,7 @@ export default async function About({lang}) {
</p> </p>
<Image alt="" src={PicAbout} className=''/> <Image alt="" src={PicAbout} className=''/>
</div> </div>
<Image alt="" src={ data.about1Image?.[0]?.body || '' } width={800} height={800} className='row-span-3 h-full w-full object-cover rounded-xl'/> <Image alt="" src={aboutImages.primary} width={800} height={800} className='row-span-3 h-full min-h-80 w-full object-cover rounded-xl'/>
<div className='row-span-2 flex flex-col justify-between py-10 px-8 bg-zinc-100 rounded-xl h-full'> <div className='row-span-2 flex flex-col justify-between py-10 px-8 bg-zinc-100 rounded-xl h-full'>
<span className='font-[4] text-xl'>{ data.about2Head?.[0]?.body || '' }</span> <span className='font-[4] text-xl'>{ data.about2Head?.[0]?.body || '' }</span>
@@ -79,7 +77,7 @@ export default async function About({lang}) {
</div> </div>
</Link> </Link>
</div> </div>
<Image alt="" src={ data.about2Image?.[0]?.body || '' } width={800} height={800} className='max-h-48 object-cover rounded-xl w-full h-full'/> <Image alt="" src={aboutImages.secondary} width={800} height={800} className='max-h-56 min-h-48 object-cover rounded-xl w-full h-full'/>
</div> </div>
) )

148
components/Header.js Executable file → Normal file
View File

@@ -1,48 +1,112 @@
import Link from 'next/link'; "use client"
export default function Header(){ import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useState } from 'react'
const locales = ['fa', 'en']
function getLocalizedPath(pathname, nextLocale) {
const parts = pathname.split('/').filter(Boolean)
if (locales.includes(parts[0])) {
parts[0] = nextLocale
return `/${parts.join('/')}`
}
return `/${nextLocale}${pathname === '/' ? '' : pathname}`
}
function MenuIcon({ open }) {
return ( return (
<div className="grid grid-cols-3 px-8 lg:px-32 items-center h-[104px] text-sm lg:text-md"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<button> {open ? (
<div className="flex font-[5] text-lg justify-self-start"> <path d="M6 6L18 18M18 6L6 18" stroke="#18181B" strokeWidth="1.8" strokeLinecap="round" />
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> ) : (
<path d="M21.5385 7.75H10.4615C10.2092 7.75 10 7.41 10 7C10 6.59 10.2092 6.25 10.4615 6.25H21.5385C21.7908 6.25 22 6.59 22 7C22 7.41 21.7908 7.75 21.5385 7.75Z" fill="#18181B"/> <>
<path d="M21 12.75H3C2.59 12.75 2.25 12.41 2.25 12C2.25 11.59 2.59 11.25 3 11.25H21C21.41 11.25 21.75 11.59 21.75 12C21.75 12.41 21.41 12.75 21 12.75Z" fill="#18181B"/> <path d="M21.5385 7.75H10.4615C10.2092 7.75 10 7.41 10 7C10 6.59 10.2092 6.25 10.4615 6.25H21.5385C21.7908 6.25 22 6.59 22 7C22 7.41 21.7908 7.75 21.5385 7.75Z" fill="#18181B"/>
<path d="M13.5385 17.75H2.46154C2.20923 17.75 2 17.41 2 17C2 16.59 2.20923 16.25 2.46154 16.25H13.5385C13.7908 16.25 14 16.59 14 17C14 17.41 13.7908 17.75 13.5385 17.75Z" fill="#18181B"/> <path d="M21 12.75H3C2.59 12.75 2.25 12.41 2.25 12C2.25 11.59 2.59 11.25 3 11.25H21C21.41 11.25 21.75 11.59 21.75 12C21.75 12.41 21.41 12.75 21 12.75Z" fill="#18181B"/>
</svg> <path d="M13.5385 17.75H2.46154C2.20923 17.75 2 17.41 2 17C2 16.59 2.20923 16.25 2.46154 16.25H13.5385C13.7908 16.25 14 16.59 14 17C14 17.41 13.7908 17.75 13.5385 17.75Z" fill="#18181B"/>
<span className="pr-1 hidden md:flex"> منو</span> </>
</div> )}
</button> </svg>
<Link href="/" className="justify-self-center">
<svg width="56" height="72" viewBox="0 0 56 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_213_1191)">
<path d="M25.6219 57.416C25.4534 57.2834 25.3432 57.2091 25.2478 57.1187C24.3521 56.2787 23.3188 55.684 22.1493 55.3074C19.8983 54.5814 17.6125 53.9335 15.5126 52.8098C6.72028 48.1045 1.52317 40.8422 0.361095 30.92C-0.57674 22.9094 1.73625 15.7635 6.98664 9.64959C11.3066 4.61848 16.8036 1.48782 23.3523 0.418668C31.9576 -0.984987 39.6845 1.1397 46.3187 6.81007C51.5963 11.3221 54.7183 17.1052 55.7144 23.9884C57.6632 37.4588 49.4729 50.425 36.4708 54.5108C35.5714 54.7933 34.6757 55.0918 33.78 55.3879C32.7046 55.7435 31.7655 56.327 30.9367 57.0951C30.8277 57.1955 30.715 57.2909 30.5601 57.4284C30.5192 57.2723 30.4771 57.1856 30.4783 57.1013C30.5143 55.3384 30.4437 53.5631 30.6196 51.8138C30.8897 49.1279 32.1025 46.8372 34.086 45.0098C35.6903 43.5318 37.3331 42.0873 39.0378 40.7295C48.3121 33.3445 47.3866 18.8644 37.2253 12.7406C29.2865 7.95604 19.0967 10.0473 13.7993 17.5475C8.44357 25.1319 10.178 35.5299 17.6386 41.1556C19.5328 42.5841 21.2982 44.2244 22.9323 45.9489C24.8105 47.9311 25.6046 50.4473 25.6764 53.1703C25.7099 54.4241 25.6863 55.6791 25.6839 56.9328C25.6839 57.0654 25.6517 57.1967 25.6232 57.416H25.6219Z" fill="#18181B"/>
<path className="fill-red-700" d="M28.0664 40.6827C20.8834 40.6666 15.0135 34.8303 15.0519 27.6807C15.0904 20.2796 21.1175 14.5968 28.3006 14.6736C35.2916 14.748 41.1242 20.6314 41.1118 27.7054C41.0982 34.8587 35.2272 40.7001 28.0664 40.6827Z" fill="#18181B"/>
<path d="M14.2574 69.1917C14.5919 69.9586 14.9128 70.635 15.1742 71.3325C15.2473 71.527 15.3848 71.8776 14.9599 71.9569C14.3503 72.0709 14.1273 71.9681 14.0319 71.5406C13.7371 70.2126 12.8191 69.4655 11.4575 69.463C8.42352 69.4581 5.38825 69.4705 2.35423 69.4507C1.91195 69.4482 1.78682 69.5931 1.80788 70.0069C1.8339 70.5161 1.80788 71.029 1.81408 71.5394C1.81779 71.8169 1.73727 71.9594 1.42011 71.9681C0.624749 71.9916 0.624749 72.0052 0.624749 71.1987C0.624749 69.4804 0.635899 67.7621 0.617316 66.0437C0.61236 65.6176 0.749877 65.4924 1.17481 65.4937C5.138 65.5085 9.10119 65.5011 13.0644 65.5036C14.11 65.5036 14.8595 66.009 15.1407 66.8874C15.417 67.7472 15.1122 68.5438 14.2661 69.1831C14.2289 69.2103 14.1942 69.2413 14.2562 69.1905L14.2574 69.1917ZM7.70497 68.3196C8.40122 68.3196 9.09871 68.3196 9.79496 68.3196C10.8319 68.3196 11.8701 68.3196 12.907 68.3196C13.6751 68.3196 14.0555 68.0445 14.0629 67.4932C14.0703 66.937 13.6851 66.6471 12.9306 66.6433C12.7757 66.6433 12.6209 66.6433 12.466 66.6433C9.29197 66.6433 6.11796 66.6433 2.94518 66.6433C1.80169 66.6433 1.81779 66.6433 1.80788 67.772C1.80417 68.1944 1.93673 68.3332 2.36414 68.3282C4.14442 68.3084 5.92469 68.3196 7.70497 68.3196Z" fill="#18181B"/>
<path d="M47.5191 65.5035C49.4852 65.5035 51.4513 65.4997 53.4162 65.5047C54.6291 65.5084 55.5384 66.3744 55.526 67.5005C55.5136 68.6118 54.6179 69.4555 53.4249 69.458C49.8333 69.4629 46.2431 69.4679 42.6515 69.4505C42.1944 69.4481 42.0556 69.5893 42.0841 70.0303C42.1163 70.5395 42.0767 71.0524 42.094 71.5616C42.1101 72.0448 41.7744 71.9556 41.4907 71.9617C41.2107 71.9679 40.9258 72.0138 40.9282 71.569C40.9394 69.681 40.9394 67.7917 40.9282 65.9036C40.9258 65.5109 41.1463 65.501 41.4362 65.501C43.4642 65.5059 45.4923 65.5035 47.5191 65.5047V65.5035ZM47.9775 68.3194C48.2711 68.3194 48.5647 68.3194 48.8596 68.3194C50.376 68.3194 51.8911 68.3244 53.4075 68.3157C54.0369 68.312 54.3924 67.9329 54.3305 67.3692C54.2772 66.8922 53.944 66.6457 53.322 66.6457C49.9498 66.6432 46.5776 66.6445 43.2066 66.6445C42.0804 66.6445 42.099 66.6445 42.0829 67.7805C42.0767 68.2141 42.2216 68.3331 42.6416 68.3293C44.4207 68.3095 46.1997 68.3207 47.9775 68.3207V68.3194Z" fill="#18181B"/>
<path d="M24.9478 68.8802C25.7952 67.9226 26.6216 67.0615 27.3575 66.1287C27.8258 65.5352 28.4006 65.7235 28.963 65.7235C29.0287 65.7235 29.1489 65.923 29.1501 66.0308C29.1625 67.8891 29.16 69.7462 29.1588 71.6045C29.1588 72.105 28.771 71.9241 28.5133 71.9539C28.2148 71.9898 28.0079 71.9279 28.0116 71.5451C28.024 70.3062 28.0153 69.0685 28.0153 67.8296C28.0153 67.6636 28.0153 67.4976 28.0153 67.3328C27.9769 67.313 27.9373 67.2932 27.8988 67.2746C26.935 68.3624 25.9724 69.4501 24.9528 70.6023C23.9456 69.4674 22.9792 68.3785 22.0117 67.2895C21.972 67.3006 21.9336 67.313 21.894 67.3242C21.894 67.484 21.894 67.645 21.894 67.8049C21.894 69.0276 21.8766 70.2517 21.9014 71.4744C21.9101 71.9279 21.6908 71.9737 21.3303 71.965C20.9834 71.9564 20.7009 71.9799 20.7071 71.4769C20.7294 69.7127 20.7245 67.9473 20.7096 66.1819C20.7059 65.7867 20.8669 65.7136 21.2312 65.6827C21.8779 65.6294 22.3264 65.8375 22.7352 66.3529C23.4153 67.2102 24.1735 68.0043 24.9491 68.8815L24.9478 68.8802Z" fill="#18181B"/>
<path d="M34.7488 66.9679C34.7488 68.0185 34.7699 69.0368 34.7426 70.0527C34.7166 71.0426 33.9485 71.8367 32.9673 71.9482C32.0505 72.0523 31.1065 71.4415 30.8612 70.5532C30.8129 70.3786 30.8228 70.0924 30.9306 69.992C31.1201 69.8161 31.8313 69.9784 31.9328 70.1543C32.2847 70.7663 32.5956 70.9361 33.0528 70.7663C33.4852 70.6053 33.6561 70.2014 33.5583 69.5535C33.199 69.5535 32.8286 69.6043 32.4767 69.5435C31.5054 69.3775 30.8463 68.5004 30.9219 67.5403C30.9962 66.59 31.8003 65.8182 32.7728 65.7922C33.4839 65.7736 34.1963 65.7972 34.9074 65.7835C35.2159 65.7773 35.4352 65.8306 35.393 66.206C35.3584 66.5095 35.5516 66.9468 34.9656 66.927C34.8789 66.9245 34.7909 66.9592 34.7488 66.9679ZM32.8211 68.4756C33.2176 68.4868 33.5917 68.1151 33.5967 67.7026C33.6016 67.2937 33.2882 66.9543 32.8843 66.932C32.4445 66.9084 32.11 67.2194 32.0988 67.6629C32.0877 68.1015 32.4098 68.4632 32.8211 68.4756Z" fill="#18181B"/>
<path d="M17.9047 71.1848C18.2417 71.1278 18.3706 71.2492 18.3767 71.5812C18.3842 71.9925 18.1327 71.9603 17.8589 71.9702C17.5715 71.9801 17.4377 71.8959 17.4327 71.5812C17.4278 71.2058 17.6074 71.1216 17.906 71.1835L17.9047 71.1848Z" fill="#18181B"/>
<path d="M37.6365 71.1815C37.9599 71.1257 38.0689 71.2682 38.0738 71.5916C38.0813 72.0103 37.8137 71.9558 37.5473 71.9707C37.25 71.9868 37.1385 71.8777 37.1298 71.5742C37.1187 71.1815 37.3367 71.1443 37.6365 71.1815Z" fill="#18181B"/>
</g>
<defs>
<clipPath id="clip0_213_1191">
<rect width="56" height="72" fill="white"/>
</clipPath>
</defs>
</svg>
</Link>
<div className="text-sm lg:text-lg flex justify-self-end">
<Link href="/en" >
English
</Link>
<span className="sm:mx-2">/</span>
<Link href="/fa">
فارسی
</Link>
</div>
</div>
) )
} }
function Logo() {
return (
<svg width="56" height="72" viewBox="0 0 56 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_213_1191)">
<path d="M25.6219 57.416C25.4534 57.2834 25.3432 57.2091 25.2478 57.1187C24.3521 56.2787 23.3188 55.684 22.1493 55.3074C19.8983 54.5814 17.6125 53.9335 15.5126 52.8098C6.72028 48.1045 1.52317 40.8422 0.361095 30.92C-0.57674 22.9094 1.73625 15.7635 6.98664 9.64959C11.3066 4.61848 16.8036 1.48782 23.3523 0.418668C31.9576 -0.984987 39.6845 1.1397 46.3187 6.81007C51.5963 11.3221 54.7183 17.1052 55.7144 23.9884C57.6632 37.4588 49.4729 50.425 36.4708 54.5108C35.5714 54.7933 34.6757 55.0918 33.78 55.3879C32.7046 55.7435 31.7655 56.327 30.9367 57.0951C30.8277 57.1955 30.715 57.2909 30.5601 57.4284C30.5192 57.2723 30.4771 57.1856 30.4783 57.1013C30.5143 55.3384 30.4437 53.5631 30.6196 51.8138C30.8897 49.1279 32.1025 46.8372 34.086 45.0098C35.6903 43.5318 37.3331 42.0873 39.0378 40.7295C48.3121 33.3445 47.3866 18.8644 37.2253 12.7406C29.2865 7.95604 19.0967 10.0473 13.7993 17.5475C8.44357 25.1319 10.178 35.5299 17.6386 41.1556C19.5328 42.5841 21.2982 44.2244 22.9323 45.9489C24.8105 47.9311 25.6046 50.4473 25.6764 53.1703C25.7099 54.4241 25.6863 55.6791 25.6839 56.9328C25.6839 57.0654 25.6517 57.1967 25.6232 57.416H25.6219Z" fill="#18181B"/>
<path className="fill-red-700" d="M28.0664 40.6827C20.8834 40.6666 15.0135 34.8303 15.0519 27.6807C15.0904 20.2796 21.1175 14.5968 28.3006 14.6736C35.2916 14.748 41.1242 20.6314 41.1118 27.7054C41.0982 34.8587 35.2272 40.7001 28.0664 40.6827Z" fill="#18181B"/>
<path d="M14.2574 69.1917C14.5919 69.9586 14.9128 70.635 15.1742 71.3325C15.2473 71.527 15.3848 71.8776 14.9599 71.9569C14.3503 72.0709 14.1273 71.9681 14.0319 71.5406C13.7371 70.2126 12.8191 69.4655 11.4575 69.463C8.42352 69.4581 5.38825 69.4705 2.35423 69.4507C1.91195 69.4482 1.78682 69.5931 1.80788 70.0069C1.8339 70.5161 1.80788 71.029 1.81408 71.5394C1.81779 71.8169 1.73727 71.9594 1.42011 71.9681C0.624749 71.9916 0.624749 72.0052 0.624749 71.1987C0.624749 69.4804 0.635899 67.7621 0.617316 66.0437C0.61236 65.6176 0.749877 65.4924 1.17481 65.4937C5.138 65.5085 9.10119 65.5011 13.0644 65.5036C14.11 65.5036 14.8595 66.009 15.1407 66.8874C15.417 67.7472 15.1122 68.5438 14.2661 69.1831C14.2289 69.2103 14.1942 69.2413 14.2562 69.1905L14.2574 69.1917ZM7.70497 68.3196C8.40122 68.3196 9.09871 68.3196 9.79496 68.3196C10.8319 68.3196 11.8701 68.3196 12.907 68.3196C13.6751 68.3196 14.0555 68.0445 14.0629 67.4932C14.0703 66.937 13.6851 66.6471 12.9306 66.6433C12.7757 66.6433 12.6209 66.6433 12.466 66.6433C9.29197 66.6433 6.11796 66.6433 2.94518 66.6433C1.80169 66.6433 1.81779 66.6433 1.80788 67.772C1.80417 68.1944 1.93673 68.3332 2.36414 68.3282C4.14442 68.3084 5.92469 68.3196 7.70497 68.3196Z" fill="#18181B"/>
</g>
<defs>
<clipPath id="clip0_213_1191">
<rect width="56" height="72" fill="white"/>
</clipPath>
</defs>
</svg>
)
}
export default function Header({ lang = 'fa' }){
const pathname = usePathname()
const [isOpen, setIsOpen] = useState(false)
const isFa = lang === 'fa'
const basePath = `/${lang}`
const items = [
{ href: `${basePath}#about`, label: isFa ? 'درباره ما' : 'About' },
{ href: `${basePath}#products`, label: isFa ? 'محصولات' : 'Products' },
{ href: `${basePath}#production`, label: isFa ? 'تجهیزات' : 'Equipment' },
{ href: `${basePath}/management`, label: isFa ? 'مدیریت' : 'Management' },
]
return (
<header className="sticky top-0 z-50 bg-bg-1/95 backdrop-blur">
<div className="relative grid h-[104px] grid-cols-3 items-center px-6 text-sm lg:px-32 lg:text-md">
<button
type="button"
onClick={() => setIsOpen((open) => !open)}
className="flex w-fit items-center font-[5] text-lg justify-self-start rounded px-2 py-2"
aria-expanded={isOpen}
aria-label={isFa ? 'باز کردن منو' : 'Open menu'}
>
<MenuIcon open={isOpen} />
<span className="pr-1 hidden md:flex">{isFa ? 'منو' : 'Menu'}</span>
</button>
<Link href={basePath} className="justify-self-center" onClick={() => setIsOpen(false)}>
<Logo />
</Link>
<div className="flex items-center gap-2 justify-self-end text-sm lg:text-lg">
<Link href={getLocalizedPath(pathname, 'en')} className={lang === 'en' ? 'font-[4] text-red-700' : 'text-zinc-500'}>
English
</Link>
<span className="text-zinc-300">/</span>
<Link href={getLocalizedPath(pathname, 'fa')} className={lang === 'fa' ? 'font-[4] text-red-700' : 'text-zinc-500'}>
فارسی
</Link>
</div>
</div>
{isOpen && (
<div className="absolute inset-x-0 top-[104px] border-y border-zinc-200 bg-white shadow-lg">
<nav className="mx-auto flex max-w-5xl flex-col gap-1 px-6 py-4 font-[5] text-zinc-900 md:flex-row md:items-center md:justify-center md:gap-8">
{items.map((item) => (
<Link
key={item.href}
href={item.href}
onClick={() => setIsOpen(false)}
className="rounded px-3 py-3 hover:bg-zinc-100 md:py-2"
>
{item.label}
</Link>
))}
</nav>
</div>
)}
</header>
)
}

11
components/ProductCard.js
View File

@@ -1,14 +1,13 @@
import Image from 'next/image' import Image from 'next/image'
import productpic from '../public/productpic.webp'
export default function ProductCard({ image, desc }) { export default function ProductCard({ image, desc }) {
return ( return (
<div className="bg-red-950 w-fit flex flex-col mx-2 sm:mx-4" style={{boxShadow : "0px 32px 40px 0px rgba(0, 0, 0, 0.16)"}}> <div className="flex w-[230px] shrink-0 flex-col overflow-hidden rounded-lg bg-red-950 sm:w-[270px] lg:w-[300px]" style={{boxShadow : "0px 32px 40px 0px rgba(0, 0, 0, 0.16)"}}>
<div className="flex justify-center rounded-t-2xl w-full bg-white"> <div className="flex aspect-square w-full items-center justify-center bg-white p-4">
<Image alt="" src={image} width={500} height={500} className="object-cover object-center"/> <Image alt="" src={image} width={500} height={500} className="h-full w-full object-contain object-center"/>
</div> </div>
<div className="bg-red-950 text-white text-sm sm:text-md p-4 sm:p-8"> <div className="flex min-h-24 items-center bg-red-950 p-4 text-sm text-white sm:p-6 sm:text-md">
<p>{ desc }</p> <p className="line-clamp-3">{ desc }</p>
</div> </div>
</div> </div>
) )

47
components/Production.js
View File

@@ -1,7 +1,6 @@
import Image from 'next/image' import Image from 'next/image'
import { equipmentImages } from '@/lib/localImages'
import CategoryImage from '../public/img.png'
async function getData(id) { async function getData(id) {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/content/index/${id}`) const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/content/index/${id}`)
@@ -24,7 +23,7 @@ export default async function Production({ lang }){
} }
return( return(
<div className=" flex flex-col h-fit py-16"> <div id="production" className="flex h-fit scroll-mt-28 flex-col py-16">
<div className='flex flex-col lg:flex-row items-center justify-between font-[5] lg:mx-28 pb-12 lg:py-20 px-4'> <div className='flex flex-col lg:flex-row items-center justify-between font-[5] lg:mx-28 pb-12 lg:py-20 px-4'>
<div className='flex flex-col'> <div className='flex flex-col'>
<span className=''>{ data.equipmentSuper?.[0]?.body || '' }</span> <span className=''>{ data.equipmentSuper?.[0]?.body || '' }</span>
@@ -63,34 +62,34 @@ export default async function Production({ lang }){
{ data.equipmentDesc?.[0]?.body || '' } { data.equipmentDesc?.[0]?.body || '' }
</p> </p>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-2 bg-zinc-100 font-[5]"> <div className="grid grid-cols-1 bg-zinc-100 font-[5] lg:grid-cols-2">
<div className="flex w-full"> <div className="flex min-h-[220px] w-full overflow-hidden">
<Image alt="" src={ data.equipment3Image?.[0]?.body || '' } width={500} height={500} className="object-cover aspect-square w-1/2"/> <Image alt="" src={equipmentImages[0]} width={500} height={500} className="min-h-[220px] w-1/2 object-cover"/>
<div className="flex flex-col justify-center lg:p-10 sm:p-4 md:p-8 p-2 text-sm sm:text-base"> <div className="flex w-1/2 flex-col justify-center p-4 text-sm sm:p-6 sm:text-base lg:p-10">
<span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title?.[0]?.body || '' }</span> <span className="pb-4 font-[4] text-xl text-black-1 lg:text-2xl"> { data.equipment3Title?.[0]?.body || '' }</span>
<p classname="font-[5] text- text-black-1">{ data.equipment3Desc?.[0]?.body || '' }</p> <p className="font-[5] text-black-1">{ data.equipment3Desc?.[0]?.body || '' }</p>
</div> </div>
</div> </div>
<div className="flex w-full flex-row-reverse lg:flex-row"> <div className="flex min-h-[220px] w-full flex-row-reverse overflow-hidden lg:flex-row">
<Image alt="" src={ data.equipment3Image?.[1]?.body || '' } width={500} height={500} className="object-cover aspect-square w-1/2"/> <Image alt="" src={equipmentImages[1]} width={500} height={500} className="min-h-[220px] w-1/2 object-cover"/>
<div className="flex flex-col justify-center lg:p-10 sm:p-4 md:p-8 p-2 text-sm sm:text-base"> <div className="flex w-1/2 flex-col justify-center p-4 text-sm sm:p-6 sm:text-base lg:p-10">
<span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title?.[1]?.body || '' }</span> <span className="pb-4 font-[4] text-xl text-black-1 lg:text-2xl"> { data.equipment3Title?.[1]?.body || '' }</span>
<p classname="font-[5] text- text-black-1">{ data.equipment3Desc?.[1]?.body || '' }</p> <p className="font-[5] text-black-1">{ data.equipment3Desc?.[1]?.body || '' }</p>
</div> </div>
</div> </div>
<div className="flex w-full flex-row-reverse lg:flex-row"> <div className="flex min-h-[220px] w-full flex-row-reverse overflow-hidden lg:flex-row">
<div className="flex flex-col justify-center lg:p-10 sm:p-4 md:p-8 p-2 text-sm sm:text-base"> <div className="flex w-1/2 flex-col justify-center p-4 text-sm sm:p-6 sm:text-base lg:p-10">
<span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title?.[2]?.body || '' }</span> <span className="pb-4 font-[4] text-xl text-black-1 lg:text-2xl"> { data.equipment3Title?.[2]?.body || '' }</span>
<p classname="font-[5] text- text-black-1">{ data.equipment3Desc?.[2]?.body || '' }</p> <p className="font-[5] text-black-1">{ data.equipment3Desc?.[2]?.body || '' }</p>
</div> </div>
<Image alt="" src={ data.equipment3Image?.[2]?.body || '' } width={500} height={500} className="object-cover aspect-square w-1/2"/> <Image alt="" src={equipmentImages[2]} width={500} height={500} className="min-h-[220px] w-1/2 object-cover"/>
</div> </div>
<div className="flex w-full"> <div className="flex min-h-[220px] w-full overflow-hidden">
<div className="flex flex-col justify-center lg:p-10 sm:p-4 md:p-8 p-2 text-sm sm:text-base"> <div className="flex w-1/2 flex-col justify-center p-4 text-sm sm:p-6 sm:text-base lg:p-10">
<span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title?.[3]?.body || '' }</span> <span className="pb-4 font-[4] text-xl text-black-1 lg:text-2xl"> { data.equipment3Title?.[3]?.body || '' }</span>
<p classname="font-[5] text- text-black-1">{ data.equipment3Desc?.[3]?.body || '' }</p> <p className="font-[5] text-black-1">{ data.equipment3Desc?.[3]?.body || '' }</p>
</div> </div>
<Image alt="" src={ data.equipment3Image?.[3]?.body || '' } width={500} height={500} className="object-cover aspect-square w-1/2"/> <Image alt="" src={equipmentImages[3]} width={500} height={500} className="min-h-[220px] w-1/2 object-cover"/>
</div> </div>
</div> </div>

13
components/Products.js
View File

@@ -1,6 +1,7 @@
import Image from 'next/image' import Image from 'next/image'
import productbg from '../public/productbg.webp' import productbg from '../public/productbg.webp'
import ProductCard from '@/components/ProductCard' import ProductCard from '@/components/ProductCard'
import { productImages } from '@/lib/localImages'
async function getData(id) { async function getData(id) {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/content/index/${id}`) const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/content/index/${id}`)
@@ -22,18 +23,18 @@ export default async function Products({ lang }){
} }
return( return(
<div className="relative flex flex-col"> <div id="products" className="relative flex scroll-mt-28 flex-col overflow-hidden">
<Image alt="" src={productbg} className="absolute top-0 w-full object-cover h-[500px] md:h-96 lg:h-fit"/> <Image alt="" src={productbg} className="absolute top-0 h-full min-h-[560px] w-full object-cover"/>
<div className="flex flex-col z-10 text-white font-[5] pt-8 lg:pt-16 w-full items-center "> <div className="flex flex-col z-10 text-white font-[5] pt-8 lg:pt-16 w-full items-center ">
<span>{data.productsSuper?.[0]?.body || ''}</span> <span>{data.productsSuper?.[0]?.body || ''}</span>
<span className="font-[4] text-3xl lg:text-4xl pt-4">{data.productsHead?.[0]?.body || ''}</span> <span className="font-[4] text-3xl lg:text-4xl pt-4">{data.productsHead?.[0]?.body || ''}</span>
<p className="max-w-4xl text-center pt-6 px-8 text-sm sm:text-md lg:pt-12">{data.productsDesc?.[0]?.body || ''}</p> <p className="max-w-4xl text-center pt-6 px-8 text-sm sm:text-md lg:pt-12">{data.productsDesc?.[0]?.body || ''}</p>
</div> </div>
<div className="flex justify-center z-10 py-16 overflow-x-scroll"> <div className="z-10 flex gap-4 overflow-x-auto px-6 py-16 sm:px-10 lg:flex-wrap lg:justify-center lg:gap-6 lg:px-28">
{ {
data.productImages?.map((image, index) => ( productImages.map((image, index) => (
<ProductCard key={index} image={image?.body || ''} desc={data.productDescs?.[index]?.body || ''} /> <ProductCard key={image} image={image} desc={data.productDescs?.[index]?.body || ''} />
)) || [] ))
} }
</div> </div>
</div> </div>

20
lib/localImages.js Normal file
View File

@@ -0,0 +1,20 @@
export const aboutImages = {
primary: "/images/about-production.jpg",
secondary: "/images/about-magnesium-rock.jpg",
}
export const productImages = [
"/images/product-ingot-stack.jpg",
"/images/product-plates.jpg",
"/images/product-anode-bars.jpg",
"/images/product-cnc-parts.jpg",
"/images/product-machined-anodes.jpg",
"/images/product-sacrificial-anodes.jpg",
]
export const equipmentImages = [
"/images/equipment-furnace.jpg",
"/images/equipment-electrotherm-line.jpg",
"/images/equipment-casting-machine.jpg",
"/images/equipment-press-machine.jpg",
]

4
middleware.js
View File

@@ -40,8 +40,8 @@ export function middleware(request) {
export const config = { export const config = {
matcher: [ matcher: [
// Skip all internal paths (_next) // Skip internal Next.js paths and public files.
'/((?!_next).*)', '/((?!_next|.*\\..*).*)',
// Optional: only run on root (/) URL // Optional: only run on root (/) URL
// '/' // '/'
], ],