replacing elements in page directories

app/[locale]/works/[slug]/page.tsx

@@ -2,10 +2,10 @@ import { notFound } from "next/navigation";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import { getAllProjects, getProjectBySlug, getProjectSlugs } from "@/lib/projects/get-projects";
 import { mdxComponents } from "@/components/mdx/mdxComponents";
-import { ProjectHero } from "@/components/sections/ProjectHero";
-import { ProjectMeta } from "@/components/sections/ProjectMeta";
-import { ProjectTechnologies } from "@/components/sections/ProjectTechnologies";
-import { OtherProjects } from "@/components/sections/OtherProjects";
+import { ProjectHero } from "@/app/[locale]/works/_components/ProjectHero";
+import { ProjectMeta } from "@/app/[locale]/works/_components/ProjectMeta";
+import { ProjectTechnologies } from "@/app/[locale]/works/_components/ProjectTechnologies";
+import { OtherProjects } from "@/app/[locale]/works/_components/OtherProjects";
 
 type props = {
     params: Promise<{

app/[locale]/works/_components/OtherProjects.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import Link from 'next/link';
+import { useTranslations } from "next-intl";
+
+type props = {
+    locale: string;
+    projects: {
+        slug: string;
+        title: string;
+        description: string;
+        cover: string;
+    }[];
+};
+
+export function OtherProjects({ locale, projects }: props) {
+    const ref = useRef<HTMLElement>(null);
+    const t = useTranslations('projectPage.otherProjects');
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    el.querySelectorAll('.reveal').forEach((node, i) => {
+                        setTimeout(() => node.classList.add('visible'), i * 120);
+                    });
+                    observer.unobserve(el);
+                }
+            },
+            { threshold: 0.1 }
+        );
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+
+    if (!projects.length) return null;
+
+    return (
+        <section ref={ref} className="pt-6 pb-20">
+            {/* Divider */}
+            <div className="w-full h-px bg-brand-brown/10 mb-14" />
+
+            {/* Label */}
+            <div className="flex items-center gap-3 mb-6">
+                <span className="w-6 h-px bg-brand-brown/40" />
+                <span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
+                    {t('sectionLabel')}
+                </span>
+            </div>
+
+            <h2 className="reveal font-serif text-[clamp(48px,6vw,80px)] leading-none text-brand-brown mb-12">
+                {t('title')}
+            </h2>
+
+            <div className="grid gap-6 md:grid-cols-2">
+                {projects.map((project, i) => (
+                    <Link
+                        key={project.slug}
+                        href={`/${locale}/works/${project.slug}`}
+                        className="reveal group block cursor-pointer"
+                        style={{ transitionDelay: `${i * 100}ms` }}
+                    >
+                        {/* Image */}
+                        <div className="w-full h-[240px] rounded-xl overflow-hidden bg-brand-brown/5 mb-5">
+                            <img
+                                src={project.cover}
+                                alt={project.title}
+                                className="w-full h-full object-cover transition-all duration-700 group-hover:scale-[1.04] group-hover:brightness-105"
+                            />
+                        </div>
+
+                        {/* Text */}
+                        <div className="flex items-start justify-between gap-4">
+                            <div>
+                                <h3 className="font-serif text-2xl text-brand-brown uppercase mb-1.5">
+                                    {project.title}
+                                </h3>
+                                <p className="font-sans text-sm text-brand-brown/55 leading-relaxed">
+                                    {project.description}
+                                </p>
+                            </div>
+                            <svg
+                                className="w-5 h-5 text-brand-brown/30 flex-shrink-0 mt-1 group-hover:translate-x-1 group-hover:text-brand-brown/60 transition-all duration-200"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                                aria-hidden="true"
+                            >
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                            </svg>
+                        </div>
+                    </Link>
+                ))}
+            </div>
+        </section>
+    );
+}

app/[locale]/works/_components/ProjectHero.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import Link from 'next/link';
+import { useTranslations } from "next-intl";
+
+type props = {
+    title: string;
+    description: string;
+    dateLabel: string;
+    locale: string;
+    cover?: string;
+};
+
+export function ProjectHero({ title, description, dateLabel, locale, cover }: props) {
+    const ref = useRef<HTMLElement>(null);
+    const t = useTranslations('projectPage.hero');
+
+    useEffect(() => {
+        const section = ref.current;
+        if (!section) return;
+        const items = section.querySelectorAll<HTMLElement>('.hero-reveal');
+        items.forEach((el, i) => {
+            setTimeout(() => {
+                el.style.opacity = '1';
+                el.style.transform = 'translateY(0)';
+            }, 80 + i * 100);
+        });
+    }, []);
+
+    return (
+        <section
+            ref={ref}
+            className="w-full min-h-[calc(100vh-(2*11px))] rounded-[10px] bg-brand-brown text-brand-beige flex flex-col overflow-hidden relative"
+        >
+            {/* Background cover image */}
+            {cover && (
+                <div className="absolute inset-0 pointer-events-none">
+                    <img
+                        src={cover}
+                        alt=""
+                        aria-hidden="true"
+                        className="w-full h-full object-cover opacity-[0.08]"
+                        style={{ filter: 'grayscale(100%)' }}
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-b from-brand-brown/60 via-brand-brown/40 to-brand-brown/90" />
+                </div>
+            )}
+
+            {/* Top zone: clears the fixed header (~91px) + anchors the back link */}
+            <div
+                className="relative z-10 shrink-0 flex items-end px-8 md:px-14 lg:px-20 pb-4"
+                style={{ height: 'clamp(120px, 15vh, 160px)' }}
+            >
+                <div
+                    className="hero-reveal"
+                    style={{ opacity: 0, transform: 'translateY(20px)', transition: 'opacity 500ms ease, transform 500ms cubic-bezier(0.22,1,0.36,1)' }}
+                >
+                    <Link
+                        href={`/${locale}#works`}
+                        className="group inline-flex items-center gap-2 font-sans text-xs uppercase tracking-[0.18em] text-brand-beige/50 hover:text-brand-beige transition-colors duration-200 cursor-pointer"
+                    >
+                        <svg
+                            className="w-4 h-4 group-hover:-translate-x-1 transition-transform duration-200"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                        >
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16l-4-4m0 0l4-4m-4 4h18" />
+                        </svg>
+                        {t('backToProjects')}
+                    </Link>
+                </div>
+            </div>
+
+            {/* Main content — centred in the remaining visible area */}
+            <div className="relative z-10 flex flex-col flex-1 items-center justify-center px-8 md:px-14 lg:px-20 text-center">
+                {/* Category pill */}
+                <div
+                    className="hero-reveal mb-6"
+                    style={{ opacity: 0, transform: 'translateY(20px)', transition: 'opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1)' }}
+                >
+                    <span className="inline-flex items-center gap-2 font-sans text-[11px] uppercase tracking-[0.2em] text-brand-beige/45">
+                        <span className="w-5 h-px bg-brand-beige/30" />
+                        {dateLabel}
+                        <span className="w-5 h-px bg-brand-beige/30" />
+                    </span>
+                </div>
+
+                {/* Title */}
+                <div
+                    className="hero-reveal"
+                    style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
+                >
+                    <h1 className="font-serif text-[clamp(40px,6vw,96px)] leading-[0.92] text-brand-beige max-w-4xl uppercase">
+                        {title}
+                    </h1>
+                </div>
+
+                {/* Description */}
+                <div
+                    className="hero-reveal mt-8"
+                    style={{ opacity: 0, transform: 'translateY(24px)', transition: 'opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
+                >
+                    <p className="font-sans text-base font-light text-brand-beige/55 max-w-xl leading-relaxed">
+                        {description}
+                    </p>
+                </div>
+            </div>
+
+            {/* Scroll indicator */}
+            <div className="relative z-10 flex justify-center pb-8 text-brand-beige/30">
+                <div className="flex flex-col items-center gap-1.5">
+                    <span className="font-sans text-[10px] uppercase tracking-[0.15em]">{t('scrollPrompt')}</span>
+                    <svg
+                        className="w-4 h-4"
+                        style={{ animation: 'arrowBounce 1.8s ease-in-out infinite' }}
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                    >
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 9l-7 7-7-7" />
+                    </svg>
+                </div>
+            </div>
+        </section>
+    );
+}

app/[locale]/works/_components/ProjectMeta.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import { useTranslations } from "next-intl";
+
+type props = {
+    dateLabel: string;
+    category: string;
+    roles: string[];
+    client: string;
+};
+
+function MetaItem({ label, children }: { label: string; children: React.ReactNode }) {
+    return (
+        <div className="flex flex-col gap-2">
+            <span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
+                {label}
+            </span>
+            <div className="font-sans text-sm text-brand-brown/80 leading-relaxed">
+                {children}
+            </div>
+        </div>
+    );
+}
+
+export function ProjectMeta({ dateLabel, category, roles, client }: props) {
+    const ref = useRef<HTMLElement>(null);
+    const t = useTranslations('projectPage.meta');
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    el.classList.add('visible');
+                    observer.unobserve(el);
+                }
+            },
+            { threshold: 0.2 }
+        );
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <section ref={ref} className="reveal py-12 md:py-16">
+            {/* Top divider */}
+            <div className="w-full h-px bg-brand-brown/10 mb-10" />
+
+            <div className="grid grid-cols-2 gap-8 md:grid-cols-4 md:gap-12">
+                <MetaItem label={t('year')}>{dateLabel}</MetaItem>
+                <MetaItem label={t('category')}>{category}</MetaItem>
+                <MetaItem label={t('roles')}>
+                    <div className="flex flex-col gap-1">
+                        {roles.map((role) => (
+                            <span key={role}>{role}</span>
+                        ))}
+                    </div>
+                </MetaItem>
+                <MetaItem label={t('client')}>{client}</MetaItem>
+            </div>
+
+            {/* Bottom divider */}
+            <div className="w-full h-px bg-brand-brown/10 mt-10" />
+        </section>
+    );
+}

app/[locale]/works/_components/ProjectTechnologies.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import { useTranslations } from "next-intl";
+
+type props = {
+    technologies: string[];
+};
+
+export function ProjectTechnologies({ technologies }: props) {
+    const ref = useRef<HTMLElement>(null);
+    const t = useTranslations('projectPage.technologies');
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    el.querySelectorAll('.reveal').forEach((node, i) => {
+                        setTimeout(() => node.classList.add('visible'), i * 60);
+                    });
+                    observer.unobserve(el);
+                }
+            },
+            { threshold: 0.2 }
+        );
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <section ref={ref} className="pb-14">
+            <div className="flex items-center gap-3 mb-6">
+                <span className="w-6 h-px bg-brand-brown/40" />
+                <span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
+                    {t('sectionLabel')}
+                </span>
+            </div>
+
+            <div className="flex flex-wrap gap-2.5">
+                {technologies.map((tech) => (
+                    <span
+                        key={tech}
+                        className="reveal font-sans text-xs uppercase tracking-[0.12em] text-brand-brown/70 border border-brand-brown/20 rounded-full px-4 py-1.5 hover:border-brand-brown/50 hover:text-brand-brown transition-colors duration-200 cursor-default"
+                    >
+                        {tech}
+                    </span>
+                ))}
+            </div>
+        </section>
+    );
+}