ahasani/pasargad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add title and description in head , responsive home page

Browse Source
This commit is contained in:
zahravaziri
2025-06-11 17:13:51 +03:30
parent ab37893d1b
commit 594643816a
18 changed files with 166 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/project1.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

public/images/project2.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

public/images/project3.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

public/images/project4.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

src/app/[locale]/about-us/page.tsx
+17 -7
View File
@@ -4,6 +4,7 @@ import AboutTopInfo from '@/components/pages/about/TopInfo';
import { IPageParams } from '@/models/layout'; import { IPageParams } from '@/models/layout';
import { setRequestLocale } from 'next-intl/server'; import { setRequestLocale } from 'next-intl/server';
import { getTranslations } from 'next-intl/server'; import { getTranslations } from 'next-intl/server';
import Head from 'next/head';
export default async function AboutUs({ export default async function AboutUs({
params, params,
@@ -18,12 +19,21 @@ export default async function AboutUs({
const t = await getTranslations({ locale }); const t = await getTranslations({ locale });
return ( return (
<main className="flex flex-col items-center justify-between"> <>
<InnerPageBanner <Head>
title={t('pages_about_title')} <title>درباره کارخانه آجرپزی پاسارگاد</title>
imageSrc={images.aboutBanner.src} <meta
/> name="description"
<AboutTopInfo /> content="معرفی کارخانه آجرپزی پاسارگاد، تاریخچه، چشم‌انداز، ظرفیت تولید و تیم متخصص ما."
</main> />
</Head>
<main className="flex flex-col items-center justify-between">
<InnerPageBanner
title={t('pages_about_title')}
imageSrc={images.aboutBanner.src}
/>
<AboutTopInfo />
</main>
</>
); );
} }
src/app/[locale]/blog/page.tsx
+17 -7
View File
@@ -3,19 +3,29 @@ import InnerPageBanner from '@/components/layout/innerPages/banner';
import PostsGrid from '@/components/pages/blog/PostsGrid'; import PostsGrid from '@/components/pages/blog/PostsGrid';
import { IPageParams } from '@/models/layout'; import { IPageParams } from '@/models/layout';
import { getTranslations } from 'next-intl/server'; import { getTranslations } from 'next-intl/server';
import Head from 'next/head';
export default async function Blog({ params }: { params: IPageParams }) { export default async function Blog({ params }: { params: IPageParams }) {
const paramsData = await params; const paramsData = await params;
const t = await getTranslations({ locale: paramsData.locale }); const t = await getTranslations({ locale: paramsData.locale });
return ( return (
<main className="flex flex-col items-center justify-between"> <>
<InnerPageBanner <Head>
title={t('pages_blog_title')} <title>مقالات آموزشی درباره آجر و ساخت‌وساز - پاسارگاد</title>
imageSrc={images.blogBanner.src} <meta
/> name="description"
content="مطالب تخصصی درباره آجر، نحوه انتخاب و کاربرد انواع آجر در ساختمان‌سازی و معماری."
/>
</Head>
<main className="flex flex-col items-center justify-between">
<InnerPageBanner
title={t('pages_blog_title')}
imageSrc={images.blogBanner.src}
/>
<PostsGrid /> <PostsGrid />
</main> </main>
</>
); );
} }
src/app/[locale]/contact-us/page.tsx
+35 -25
View File
@@ -6,6 +6,7 @@ import TouchUs from '@/components/pages/contact/TouchUs';
import Image from 'next/image'; import Image from 'next/image';
import { getTranslations } from 'next-intl/server'; import { getTranslations } from 'next-intl/server';
import { IPageParams } from '@/models/layout'; import { IPageParams } from '@/models/layout';
import Head from 'next/head';
export default async function Contact({ params }: { params: IPageParams }) { export default async function Contact({ params }: { params: IPageParams }) {
const { locale } = await params; const { locale } = await params;
@@ -13,33 +14,42 @@ export default async function Contact({ params }: { params: IPageParams }) {
const t = await getTranslations({ locale }); const t = await getTranslations({ locale });
return ( return (
<main className="flex flex-col items-center justify-between"> <>
<InnerPageBanner <Head>
title={t('pages_contact_title')} <title>تماس با کارخانه آجرپزی پاسارگاد</title>
imageSrc={images.blogBanner.src} <meta
/> name="description"
content="راه‌های ارتباطی با کارخانه آجرپزی پاسارگاد شامل شماره تلفن، آدرس، نقشه و فرم تماس آنلاین."
/>
</Head>
<main className="flex flex-col items-center justify-between">
<InnerPageBanner
title={t('pages_contact_title')}
imageSrc={images.blogBanner.src}
/>
<div className="relative flex w-full flex-col bg-gray-200 pt-4 md:pt-28"> <div className="relative flex w-full flex-col bg-gray-200 pt-4 md:pt-28">
<div className="absolute inset-x-0 inset-y-64 z-2 flex items-end justify-start"> <div className="absolute inset-x-0 inset-y-64 z-2 flex items-end justify-start">
<div className="max-md:hidden md:w-1/2"> <div className="max-md:hidden md:w-1/2">
<Image <Image
alt="footer-bg" alt="footer-bg"
src={images.factoryVector} src={images.factoryVector}
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />
</div>
</div>
<div className="container mx-auto flex w-full flex-col items-stretch overflow-hidden rounded-lg md:flex-row">
<TouchUs />
<ContactForm />
</div>
<div className="mt-4 w-full md:mt-28">
<div className="h-64 w-full overflow-hidden rounded-lg bg-gray-200">
<ContactMap />
</div>
</div> </div>
</div> </div>
<div className="container mx-auto flex w-full flex-col items-stretch overflow-hidden rounded-lg md:flex-row"> </main>
<TouchUs /> </>
<ContactForm />
</div>
<div className="mt-4 w-full md:mt-28">
<div className="h-64 w-full overflow-hidden rounded-lg bg-gray-200">
<ContactMap />
</div>
</div>
</div>
</main>
); );
} }
src/app/[locale]/layout.tsx
+8
View File
@@ -4,6 +4,7 @@ import 'leaflet/dist/leaflet.css';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import { NextIntlClientProvider } from 'next-intl'; import { NextIntlClientProvider } from 'next-intl';
import type { IPageParams } from '@/models/layout.d'; import type { IPageParams } from '@/models/layout.d';
import Head from 'next/head';
export default async function RootLayout({ export default async function RootLayout({
children, children,
@@ -26,6 +27,13 @@ export default async function RootLayout({
return ( return (
<html lang={locale} dir={locale === 'fa' ? 'rtl' : 'ltr'}> <html lang={locale} dir={locale === 'fa' ? 'rtl' : 'ltr'}>
<Head>
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:site_name" content="کارخانه آجرپزی پاسارگاد" />
<meta name="author" content="پاسارگاد" />
<link rel="icon" href="/favicon.ico" />
</Head>
<body className={`min-h-svh w-full overflow-x-hidden ${fontClass}`}> <body className={`min-h-svh w-full overflow-x-hidden ${fontClass}`}>
<NextIntlClientProvider locale={locale} messages={messages}> <NextIntlClientProvider locale={locale} messages={messages}>
{children} {children}
src/app/[locale]/page.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export default async function Home({ params }: { params: IPageParams }) {
<AboutTopInfo /> <AboutTopInfo />
<HomePageProducts locale={locale} /> <HomePageProducts locale={locale} />
<HomePageProjects locale={locale} /> <HomePageProjects locale={locale} />
<HomeStorySection className="my-24" /> <HomeStorySection className="my-24 max-lg:my-12" />
</main> </main>
); );
} }
src/app/[locale]/projects/page.tsx
+19 -17
View File
@@ -6,6 +6,7 @@ import ProjectsGridView from '@/components/pages/project/projectGridView';
import { IPageParams } from '@/models/layout'; import { IPageParams } from '@/models/layout';
import { getProjects } from '@/services/projects'; import { getProjects } from '@/services/projects';
import { getTranslations } from 'next-intl/server'; import { getTranslations } from 'next-intl/server';
import Head from 'next/head';
export default async function ProjectsPage({ export default async function ProjectsPage({
params, params,
@@ -17,22 +18,23 @@ export default async function ProjectsPage({
const projects: IProjectCardProps[] = await getProjects(); const projects: IProjectCardProps[] = await getProjects();
console.log(projects, 'proj'); console.log(projects, 'proj');
return ( return (
<main> <>
<InnerPageBanner <Head>
title={t('pages_projects_title')} <title>پروژه‌های اجراشده با آجر پاسارگاد</title>
imageSrc={images.aboutBanner.src} <meta
/> name="description"
<div className="container-fluid mx-auto my-24"> content="نمونه پروژه‌های موفق اجراشده با آجرهای باکیفیت کارخانه آجرپزی پاسارگاد در سراسر کشور."
<ProjectsGridView /> />
{/* <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3"> </Head>
{projects?.map((project, index) => ( <main>
<> <InnerPageBanner
yyy {project.title} title={t('pages_projects_title')}
<ProjectsGrid key={index} {...project} /> imageSrc={images.aboutBanner.src}
</> />
))} <div className="container-fluid mx-auto my-24">
</div> */} <ProjectsGridView />
</div> </div>
</main> </main>
</>
); );
} }
src/app/api/projects/data.ts
+13 -13
View File
@@ -5,7 +5,6 @@ export interface IProjectCardProps {
title: string; title: string;
fa_title?: string; fa_title?: string;
imageSrc: string; imageSrc: string;
link: string;
} }
export const projects = [ export const projects = [
@@ -13,42 +12,43 @@ export const projects = [
id:'1', id:'1',
title: 'Sustainable Practices Reducing Waste in Industrial Production', title: 'Sustainable Practices Reducing Waste in Industrial Production',
fa_title: 'روش‌های پایدار برای کاهش ضایعات در تولید صنعتی', fa_title: 'روش‌های پایدار برای کاهش ضایعات در تولید صنعتی',
imageSrc: images.projectImg_1.src, imageSrc: `/images/project1.jpeg`,
link: '#',
}, },
{ {
id:'2', id:'2',
title: 'Advanced Robotics Revolutionizing Industrial Workflows', title: 'Advanced Robotics Revolutionizing Industrial Workflows',
fa_title: 'رباتیک پیشرفته و تحول فرآیندهای صنعتی', fa_title: 'رباتیک پیشرفته و تحول فرآیندهای صنعتی',
imageSrc: images.projectImg_1.src, imageSrc: `/images/project2.jpeg`,
link: '#',
}, },
{ {
id:'3', id:'3',
title: 'Top Benefits of the Robotics in Manufacturing', title: 'Top Benefits of the Robotics in Manufacturing',
fa_title: 'مزایای اصلی استفاده از رباتیک در تولید', fa_title: 'مزایای اصلی استفاده از رباتیک در تولید',
imageSrc: images.projectImg_1.src, imageSrc: `/images/project3.jpeg`,
link: '#',
}, },
{ {
id:'4', id:'4',
title: 'Leveraging Data Analytics for Smarter Production', title: 'Leveraging Data Analytics for Smarter Production',
fa_title: 'استفاده از تحلیل داده برای تولید هوشمندتر', fa_title: 'استفاده از تحلیل داده برای تولید هوشمندتر',
imageSrc: images.projectImg_1.src, imageSrc: `/images/project4.jpeg`,
link: '#',
}, },
{ {
id:'5', id:'5',
title: 'Reducing Operational Costs Through Automation', title: 'Reducing Operational Costs Through Automation',
fa_title: 'کاهش هزینه‌ها با اتوماسیون', fa_title: 'کاهش هزینه‌ها با اتوماسیون',
imageSrc: '/images/post5.jpg', imageSrc: `/images/project1.jpeg`,
link: '#',
}, },
{ {
id:'6', id:'6',
title: 'The Advantages of Customized Manufacturing Solutions', title: 'The Advantages of Customized Manufacturing Solutions',
fa_title: 'مزایای راه‌حل‌های سفارشی‌سازی در تولید', fa_title: 'مزایای راه‌حل‌های سفارشی‌سازی در تولید',
imageSrc: '/images/post6.jpg', imageSrc: `/images/project1.jpeg`,
link: '#',
}, },
] as IProjectCardProps[] ] as IProjectCardProps[]
export function generateProjects(
): IProjectCardProps[] {
return [...projects, ...projects, ...projects].map((e, i)=>({...e, id:String(i+1)}))
}
src/app/api/projects/route.ts
+3 -5
View File
@@ -1,10 +1,11 @@
import { NextResponse } from 'next/server'; import { NextResponse } from 'next/server';
import { cookies } from 'next/headers'; import { cookies } from 'next/headers';
import { projects } from './data'; import { generateProjects } from './data';
export async function GET(request: Request) { export async function GET(request: Request) {
let data = projects; let projects = generateProjects();
let data = projects
const cookieStore = await cookies(); const cookieStore = await cookies();
const lang = (await cookieStore).get('lang')?.value || 'fa'; const lang = (await cookieStore).get('lang')?.value || 'fa';
@@ -16,21 +17,18 @@ export async function GET(request: Request) {
title, title,
fa_title, fa_title,
imageSrc, imageSrc,
link,
}) => { }) => {
if (lang === 'fa') { if (lang === 'fa') {
return { return {
id, id,
title: fa_title || title, title: fa_title || title,
imageSrc, imageSrc,
link,
}; };
} }
return { return {
id, id,
title, title,
imageSrc, imageSrc,
link,
}; };
}, },
src/components/layout/sectionTitle/index.tsx
+4 -2
View File
@@ -15,10 +15,12 @@ export default function SectionTitle({
<Icon name="setting" className="text-primary" /> <Icon name="setting" className="text-primary" />
<h3 className="text-sm leading-1 tracking-[0.175rem]">{title}</h3> <h3 className="text-sm leading-1 tracking-[0.175rem]">{title}</h3>
</div> </div>
<h2 className="text-[3.25rem] leading-14 font-extralight tracking-tight"> <h2 className="text-3xl font-extralight tracking-tight md:text-[3.25rem] md:leading-14">
{description} {description}
{description_bold && ( {description_bold && (
<strong className="block font-bold">{description_bold}</strong> <strong className="block font-light md:font-bold">
{description_bold}
</strong>
)} )}
</h2> </h2>
</div> </div>
src/components/pages/about/TopInfo.tsx
+30 -13
View File
@@ -22,11 +22,26 @@ export default function AboutTopInfo() {
]; ];
return ( return (
<div className="w-white relative w-full py-28"> <div className="w-white relative w-full py-28 max-lg:pt-6 max-lg:pb-16">
<div className="absolute inset-0 z-10 flex items-end justify-start"> <div className="absolute inset-0 z-10 flex items-end justify-start max-md:hidden">
<img src={images.factoryVector.src} className="max-h-56 w-auto" /> <img src={images.factoryVector.src} className="max-h-56 w-auto" />
</div> </div>
<div className="relative z-20 container mx-auto grid grid-cols-2 items-stretch gap-10"> <div className="relative z-20 container mx-auto grid grid-cols-1 items-stretch gap-10 lg:grid-cols-2">
<div className="lg:hidden">
{' '}
<div>
<SectionTitle
title={t('pages_about_title')}
description={t('com_about_info_title')}
description_bold={t('com_about_info_title_bold')}
/>
</div>
<div className="mt-3">
<p className="text-base font-light text-gray-300">
{t('com_about_info_description')}
</p>
</div>
</div>
<div className="relative h-full"> <div className="relative h-full">
<div className="grid h-44 grid-cols-2 gap-4 overflow-hidden"> <div className="grid h-44 grid-cols-2 gap-4 overflow-hidden">
<div className="h-full overflow-hidden rounded-3xl"> <div className="h-full overflow-hidden rounded-3xl">
@@ -42,8 +57,8 @@ export default function AboutTopInfo() {
</span> </span>
</div> </div>
</div> </div>
<div className="absolute right-0 bottom-0 h-full w-[70%] pt-32"> <div className="absolute right-0 bottom-0 h-full w-[70%] pt-32 max-lg:relative max-lg:-top-11 max-lg:float-end max-lg:p-0">
<div className="h-full w-full overflow-hidden rounded-3xl border-[12px] border-white"> <div className="h-full w-full overflow-hidden rounded-3xl border-[12px] border-white max-lg:aspect-[0.95] max-lg:h-auto">
<img <img
src={images.aboutImg_2.src} src={images.aboutImg_2.src}
className="h-full w-full object-cover" className="h-full w-full object-cover"
@@ -51,19 +66,21 @@ export default function AboutTopInfo() {
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-col pt-16 pb-20"> <div className="flex flex-col pt-16 pb-20 max-lg:-mt-16 max-lg:p-0">
<SectionTitle <div className="max-lg:hidden">
title={t('pages_about_title')} <SectionTitle
description={t('com_about_info_title')} title={t('pages_about_title')}
description_bold={t('com_about_info_title_bold')} description={t('com_about_info_title')}
/> description_bold={t('com_about_info_title_bold')}
/>
</div>
<div className="mt-5"> <div className="mt-5 max-lg:hidden">
<p className="text-base font-light text-gray-300"> <p className="text-base font-light text-gray-300">
{t('com_about_info_description')} {t('com_about_info_description')}
</p> </p>
</div> </div>
<div className="mt-10 flex flex-col gap-4"> <div className="mt-2 flex flex-col gap-4">
{topInfoAchievementTitles.map((title, index) => ( {topInfoAchievementTitles.map((title, index) => (
<AchievementTextBox key={index} title={title} /> <AchievementTextBox key={index} title={title} />
))} ))}
src/components/pages/home/HomeStorySection.tsx
+8 -6
View File
@@ -28,8 +28,10 @@ export default function HomeStorySection({
]; ];
return ( return (
<div className={`container mx-auto flex flex-col gap-12 ${className}`}> <div
<div className="grid grid-cols-2 gap-10"> className={`container mx-auto flex flex-col gap-12 max-lg:gap-0 ${className}`}
>
<div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
<SectionTitle <SectionTitle
title={t('com_home_story_title')} title={t('com_home_story_title')}
description={t('com_home_story_slogan')} description={t('com_home_story_slogan')}
@@ -47,19 +49,19 @@ export default function HomeStorySection({
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-10"> <div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
<div className="aspect-video w-full overflow-hidden rounded-3xl"> <div className="aspect-video w-full overflow-hidden rounded-3xl max-lg:hidden">
<Image <Image
src={images.whatWeDoImage} src={images.whatWeDoImage}
alt="" alt=""
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />
</div> </div>
<div className="flex flex-col py-8"> <div className="flex flex-col py-8 max-lg:gap-6">
<p className="text-base font-light text-gray-500"> <p className="text-base font-light text-gray-500">
{t('com_home_story_description')} {t('com_home_story_description')}
</p> </p>
<hr className="my-10 text-gray-100/50" /> <hr className="my-10 text-gray-100/50 max-lg:hidden" />
<div className="grid grid-cols-3 justify-between gap-1"> <div className="grid grid-cols-3 justify-between gap-1">
{statisticsData.map((stat, index) => ( {statisticsData.map((stat, index) => (
<div key={index} className="flex flex-col gap-1"> <div key={index} className="flex flex-col gap-1">
src/components/pages/home/Products.tsx
+6 -6
View File
@@ -21,28 +21,28 @@ export default async function HomePageProducts({ locale }: Props) {
return ( return (
<div className="w-full"> <div className="w-full">
<div <div
className={`relative w-full bg-cover bg-fixed bg-center bg-no-repeat pt-28 pb-48`} className={`relative w-full bg-cover bg-fixed bg-center bg-no-repeat pt-28 pb-20 max-lg:pt-6 md:pb-48`}
style={{ backgroundImage: `url(${images.homeProductBack.src})` }} style={{ backgroundImage: `url(${images.homeProductBack.src})` }}
> >
<div className="absolute inset-0 z-10 bg-black opacity-50" /> <div className="absolute inset-0 z-10 bg-black opacity-50" />
<div className="relative z-20 container mx-auto grid grid-cols-2 gap-28"> <div className="relative z-20 container mx-auto grid grid-cols-1 gap-0 lg:grid-cols-2 lg:gap-28">
<SectionTitle <SectionTitle
title={t('pages_product_categories_title')} title={t('pages_product_categories_title')}
description={t('com_home_products_title')} description={t('com_home_products_title')}
reverseColor reverseColor
/> />
<h4 className="pt-10 text-base font-extralight tracking-normal text-white"> <h4 className="pt-6 text-base font-extralight tracking-normal text-white lg:pt-10">
{t('com_home_products_description')} {t('com_home_products_description')}
</h4> </h4>
</div> </div>
</div> </div>
<div className="relative top-[-100px] z-20 container mx-auto w-full"> <div className="relative -top-7 z-20 container mx-auto w-full md:top-[-100px]">
<div className="grid grid-cols-1 gap-8 rounded-4xl bg-gray-50 py-10 shadow-2xl md:grid-cols-2 lg:grid-cols-4"> <div className="grid grid-cols-1 gap-8 rounded-4xl bg-gray-50 py-10 shadow-2xl max-md:gap-0 max-md:py-5 md:grid-cols-2 lg:grid-cols-4">
{productCategories.map((category, index) => ( {productCategories.map((category, index) => (
<Link key={category.id} href={routes.products.route(category.id)}> <Link key={category.id} href={routes.products.route(category.id)}>
<div <div
className={`flex flex-col items-center justify-center gap-4 p-6 text-center ${index ? 'border-s-[1px] border-gray-100' : ''}`} className={`flex flex-col items-center justify-center gap-4 p-6 text-center max-md:gap-2 ${index ? 'border-s-[1px] border-gray-100' : ''} ${index !== productCategories.length - 1 ? `border-gray-100 max-md:border-b-[1px]` : ''}`}
> >
<h3 className="text-xl font-bold text-gray-500"> <h3 className="text-xl font-bold text-gray-500">
{category.title} {category.title}
src/components/pages/home/Projects.tsx
+3 -3
View File
@@ -13,15 +13,15 @@ export default async function HomePageProjects({ locale }: Props) {
return ( return (
<div className="w-full"> <div className="w-full">
<div <div
className={`relative w-full bg-white bg-cover bg-fixed bg-center bg-no-repeat pt-28`} className={`relative w-full bg-white bg-cover bg-fixed bg-center bg-no-repeat pt-28 max-lg:pt-6`}
> >
<div className="relative z-20 container mx-auto grid grid-cols-2 gap-28"> <div className="relative z-20 container mx-auto grid grid-cols-1 lg:grid-cols-2 lg:gap-28">
<SectionTitle <SectionTitle
title={t('pages_projects_title')} title={t('pages_projects_title')}
description={t('com_home_projects_title')} description={t('com_home_projects_title')}
description_bold={t('com_home_projects_title_bold')} description_bold={t('com_home_projects_title_bold')}
/> />
<h4 className="pt-10 text-base font-extralight tracking-normal"> <h4 className="pt-10 text-base font-extralight tracking-normal max-lg:hidden">
{t('com_home_projects_description')} {t('com_home_projects_description')}
</h4> </h4>
</div> </div>
src/components/pages/project/ProjectGrid.tsx
+2 -6
View File
@@ -5,13 +5,9 @@ import { getProjects } from '@/services/projects';
export default async function ProjectsGrid({ projects }) { export default async function ProjectsGrid({ projects }) {
return ( return (
<div className="container mx-auto grid grid-cols-1 gap-6 px-4 py-14 md:grid-cols-2 md:py-28"> <div className="container mx-auto grid grid-cols-1 gap-6 px-4 pt-12 pb-0 md:grid-cols-2 md:py-28">
{projects.map((project, index) => ( {projects.map((project, index) => (
<Link <Link href={'/'} key={index} className="overflow-hidden bg-white">
href={project.link}
key={index}
className="overflow-hidden bg-white"
>
<div className="relative aspect-[1.4] w-full overflow-hidden rounded-4xl"> <div className="relative aspect-[1.4] w-full overflow-hidden rounded-4xl">
<Image <Image
src={project.imageSrc} src={project.imageSrc}