replacing elements in page directories
This commit is contained in:
@@ -0,0 +1,139 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
type props = {
|
||||
locale: string;
|
||||
title: string;
|
||||
description: string;
|
||||
category: string;
|
||||
date: string;
|
||||
readTime?: string;
|
||||
cover?: string;
|
||||
};
|
||||
|
||||
export function ArticleHero({ locale, title, description, category, date, readTime, cover }: props) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const t = useTranslations('blogPage');
|
||||
|
||||
useEffect(() => {
|
||||
const section = ref.current;
|
||||
if (!section) return;
|
||||
section.querySelectorAll<HTMLElement>('.hero-reveal').forEach((el, i) => {
|
||||
setTimeout(() => {
|
||||
el.style.opacity = '1';
|
||||
el.style.transform = 'translateY(0)';
|
||||
}, 80 + i * 100);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const formatted = new Date(date).toLocaleDateString(locale === 'fr' ? 'fr-FR' : 'en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
|
||||
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"
|
||||
>
|
||||
{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>
|
||||
)}
|
||||
|
||||
<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}/blog`}
|
||||
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"
|
||||
>
|
||||
<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('backToBlog')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex flex-col flex-1 items-center justify-center px-8 md:px-14 lg:px-20 text-center">
|
||||
<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-3 font-sans text-[11px] uppercase tracking-[0.2em] text-brand-beige/45">
|
||||
<span className="w-5 h-px bg-brand-beige/30" />
|
||||
{category}
|
||||
{readTime && (
|
||||
<>
|
||||
<span className="w-1 h-1 rounded-full bg-brand-beige/20" />
|
||||
{readTime}
|
||||
</>
|
||||
)}
|
||||
<span className="w-5 h-px bg-brand-beige/30" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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(36px,5.5vw,88px)] leading-[0.92] text-brand-beige max-w-4xl uppercase">
|
||||
{title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<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
|
||||
className="hero-reveal mt-6"
|
||||
style={{ opacity: 0, transform: 'translateY(20px)', transition: 'opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
|
||||
>
|
||||
<span className="font-sans text-xs text-brand-beige/30 tracking-wide">
|
||||
{formatted}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Article } from '@/lib/blog/types';
|
||||
|
||||
type props = {
|
||||
locale: string;
|
||||
articles: Article[];
|
||||
};
|
||||
|
||||
function FeaturedCover({ cover, title, category }: { cover?: string; title: string; category: string }) {
|
||||
const [hidden, setHidden] = useState(false);
|
||||
if (!cover || hidden) return null;
|
||||
return (
|
||||
<div className="relative w-full md:w-[58%] h-64 md:h-auto overflow-hidden flex-shrink-0">
|
||||
<Image src={cover} alt={title} fill className="object-cover group-hover:scale-105 transition-transform duration-700 ease-out" onError={() => setHidden(true)} />
|
||||
<div className="absolute top-5 left-5">
|
||||
<span className="bg-brand-beige/90 backdrop-blur-sm font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/60 px-3 py-1.5 rounded-full">
|
||||
{category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MediumCover({ cover, title, category }: { cover?: string; title: string; category: string }) {
|
||||
const [hidden, setHidden] = useState(false);
|
||||
if (!cover || hidden) return null;
|
||||
return (
|
||||
<div className="relative h-52 overflow-hidden flex-shrink-0">
|
||||
<Image src={cover} alt={title} fill className="object-cover group-hover:scale-105 transition-transform duration-700 ease-out" onError={() => setHidden(true)} />
|
||||
<div className="absolute top-4 left-4">
|
||||
<span className="bg-brand-beige/90 backdrop-blur-sm font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/60 px-3 py-1.5 rounded-full">
|
||||
{category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ThumbnailCover({ cover, title }: { cover?: string; title: string }) {
|
||||
const [hidden, setHidden] = useState(false);
|
||||
if (!cover || hidden) return null;
|
||||
return (
|
||||
<div className="relative w-full sm:w-24 h-16 sm:h-16 rounded-[4px] overflow-hidden flex-shrink-0">
|
||||
<Image src={cover} alt={title} fill className="object-cover group-hover:scale-105 transition-transform duration-500" onError={() => setHidden(true)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ArticleList({ locale, articles }: props) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const t = useTranslations('blogPage');
|
||||
|
||||
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 * 100);
|
||||
});
|
||||
observer.unobserve(el);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.05 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
if (!articles.length) {
|
||||
return (
|
||||
<section className="py-24 px-8 md:px-14 lg:px-20 text-center">
|
||||
<p className="font-sans text-sm text-brand-brown/40">{t('noArticles')}</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string) =>
|
||||
new Date(dateStr).toLocaleDateString(locale === 'fr' ? 'fr-FR' : 'en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
|
||||
const [featured, ...rest] = articles;
|
||||
const secondRow = rest.slice(0, 2);
|
||||
const remaining = rest.slice(2);
|
||||
|
||||
return (
|
||||
<section ref={ref} className="py-20 px-8 md:px-14 lg:px-20 max-w-[1100px] mx-auto">
|
||||
<div className="flex flex-col gap-5">
|
||||
|
||||
{/* Featured — most recent article, full width */}
|
||||
<Link
|
||||
href={`/${locale}/blog/${featured.slug}`}
|
||||
className="reveal group relative overflow-hidden rounded-[8px] border border-brand-brown/10 flex flex-col md:flex-row cursor-pointer"
|
||||
>
|
||||
<FeaturedCover cover={featured.cover} title={featured.title} category={featured.category} />
|
||||
|
||||
<div className="flex-1 flex flex-col justify-between p-8 md:p-12 bg-brand-beige">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
||||
{formatDate(featured.date)}
|
||||
</span>
|
||||
{featured.readTime && (
|
||||
<>
|
||||
<span className="w-1 h-1 rounded-full bg-brand-brown/20" />
|
||||
<span className="font-sans text-[10px] text-brand-brown/30">
|
||||
{featured.readTime}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="font-serif text-[clamp(20px,2.2vw,32px)] leading-tight text-brand-brown uppercase mb-5 group-hover:opacity-70 transition-opacity duration-200">
|
||||
{featured.title}
|
||||
</h2>
|
||||
<p className="font-sans text-sm text-brand-brown/55 leading-relaxed line-clamp-3">
|
||||
{featured.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 font-sans text-xs uppercase tracking-[0.15em] text-brand-brown/40 group-hover:text-brand-brown transition-colors duration-200 mt-8">
|
||||
{t('readArticle')}
|
||||
<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="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Second row — 2 medium cards */}
|
||||
{secondRow.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{secondRow.map((article, i) => (
|
||||
<Link
|
||||
key={article.slug}
|
||||
href={`/${locale}/blog/${article.slug}`}
|
||||
className="reveal group overflow-hidden rounded-[8px] border border-brand-brown/10 flex flex-col cursor-pointer bg-brand-beige"
|
||||
style={{ transitionDelay: `${(i + 1) * 80}ms` }}
|
||||
>
|
||||
<MediumCover cover={article.cover} title={article.title} category={article.category} />
|
||||
|
||||
<div className="flex flex-col flex-1 justify-between p-7">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
||||
{formatDate(article.date)}
|
||||
</span>
|
||||
{article.readTime && (
|
||||
<>
|
||||
<span className="w-1 h-1 rounded-full bg-brand-brown/20" />
|
||||
<span className="font-sans text-[10px] text-brand-brown/30">
|
||||
{article.readTime}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="font-serif text-[clamp(18px,2.2vw,26px)] leading-tight text-brand-brown uppercase mb-3 group-hover:opacity-70 transition-opacity duration-200">
|
||||
{article.title}
|
||||
</h2>
|
||||
<p className="font-sans text-sm text-brand-brown/55 leading-relaxed line-clamp-2">
|
||||
{article.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 font-sans text-xs uppercase tracking-[0.15em] text-brand-brown/40 group-hover:text-brand-brown transition-colors duration-200 mt-6">
|
||||
{t('readArticle')}
|
||||
<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="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Remaining — compact horizontal list */}
|
||||
{remaining.length > 0 && (
|
||||
<div className="rounded-[8px] border border-brand-brown/10 overflow-hidden bg-brand-beige divide-y divide-brand-brown/8">
|
||||
{remaining.map((article, i) => (
|
||||
<Link
|
||||
key={article.slug}
|
||||
href={`/${locale}/blog/${article.slug}`}
|
||||
className="reveal group flex flex-col sm:flex-row sm:items-center gap-5 p-6 md:p-7 hover:bg-brand-brown/3 transition-colors duration-200 cursor-pointer"
|
||||
style={{ transitionDelay: `${(i + 3) * 80}ms` }}
|
||||
>
|
||||
<ThumbnailCover cover={article.cover} title={article.title} />
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-1.5">
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
||||
{article.category}
|
||||
</span>
|
||||
<span className="w-1 h-1 rounded-full bg-brand-brown/20" />
|
||||
<span className="font-sans text-[10px] text-brand-brown/30">
|
||||
{formatDate(article.date)}
|
||||
</span>
|
||||
{article.readTime && (
|
||||
<>
|
||||
<span className="w-1 h-1 rounded-full bg-brand-brown/20" />
|
||||
<span className="font-sans text-[10px] text-brand-brown/30">
|
||||
{article.readTime}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="font-serif text-[clamp(16px,1.8vw,20px)] leading-tight text-brand-brown uppercase mb-1 group-hover:opacity-70 transition-opacity duration-200">
|
||||
{article.title}
|
||||
</h2>
|
||||
<p className="font-sans text-sm text-brand-brown/50 leading-relaxed line-clamp-1">
|
||||
{article.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 font-sans text-xs uppercase tracking-[0.15em] text-brand-brown/40 group-hover:text-brand-brown transition-colors duration-200 flex-shrink-0">
|
||||
{t('readArticle')}
|
||||
<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="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
type props = {
|
||||
items: string[];
|
||||
};
|
||||
|
||||
export function ArticleSummary({ items }: props) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const t = useTranslations('blogPage');
|
||||
|
||||
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 * 80);
|
||||
});
|
||||
observer.unobserve(el);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="mb-14 border border-brand-brown/12 rounded-xl p-8 bg-brand-brown/[0.03]">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="w-5 h-px bg-brand-brown/30" />
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.22em] text-brand-brown/40">
|
||||
{t('summary.label')}
|
||||
</span>
|
||||
</div>
|
||||
<ol className="flex flex-col gap-3">
|
||||
{items.map((item, i) => (
|
||||
<li key={i} className="reveal flex items-baseline gap-4" style={{ transitionDelay: `${i * 60}ms` }}>
|
||||
<span className="font-serif text-base text-brand-brown/25 tabular-nums flex-shrink-0 w-4 text-right">
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<span className="font-sans text-sm text-brand-brown/65 leading-relaxed">
|
||||
{item}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,8 +3,8 @@ import type { Metadata } from "next";
|
||||
import { notFound } from "next/navigation";
|
||||
import { MDXRemote } from "next-mdx-remote/rsc";
|
||||
import { getArticleBySlug, getAllArticles, getAlternatesArticle } from "@/lib/blog/get-articles";
|
||||
import { ArticleHero } from "@/components/sections/ArticleHero";
|
||||
import { ArticleSummary } from "@/components/sections/ArticleSummary";
|
||||
import { ArticleHero } from "@/app/[locale]/blog/[slug]/_components/ArticleHero";
|
||||
import { ArticleSummary } from "@/app/[locale]/blog/[slug]/_components/ArticleSummary";
|
||||
import { locales } from "@/middleware";
|
||||
import Link from "next/link";
|
||||
import { MermaidDiagram } from "@/components/mdx/MermaidDiagram";
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export function BlogHero() {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const t = useTranslations('blogPage');
|
||||
|
||||
useEffect(() => {
|
||||
const section = ref.current;
|
||||
if (!section) return;
|
||||
section.querySelectorAll<HTMLElement>('.hero-reveal').forEach((el, i) => {
|
||||
setTimeout(() => {
|
||||
el.style.opacity = '1';
|
||||
el.style.transform = 'translateY(0)';
|
||||
}, 80 + i * 120);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={ref}
|
||||
className="w-full rounded-[10px] bg-brand-brown text-brand-beige flex flex-col overflow-hidden"
|
||||
style={{ minHeight: 'clamp(320px, 45vh, 480px)' }}
|
||||
>
|
||||
<div className="flex flex-col flex-1 items-center justify-center px-8 md:px-14 lg:px-20 text-center py-24">
|
||||
<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-3 font-sans text-[11px] uppercase tracking-[0.2em] text-brand-beige/45">
|
||||
<span className="w-5 h-px bg-brand-beige/30" />
|
||||
{t('hero.sectionLabel')}
|
||||
<span className="w-5 h-px bg-brand-beige/30" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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(56px,8vw,110px)] leading-none text-brand-beige uppercase">
|
||||
{t('hero.title')}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<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-lg leading-relaxed">
|
||||
{t('hero.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { getAllArticles } from "@/lib/blog/get-articles";
|
||||
import { BlogHero } from "@/components/sections/BlogHero";
|
||||
import { ArticleList } from "@/components/sections/ArticleList";
|
||||
import { BlogHero } from "@/app/[locale]/blog/_components/BlogHero";
|
||||
import { ArticleList } from "@/app/[locale]/blog/[slug]/_components/ArticleList";
|
||||
|
||||
type props = {
|
||||
params: Promise<{ locale: string }>;
|
||||
|
||||
Reference in New Issue
Block a user