@@ -63,7 +63,7 @@ export default async function NewsHub({ params }: { params: Promise<{ locale: st
|
|||||||
<Link href={`/${locale}/news/${heroArticle.slug}`} className="group relative w-full rounded-[2rem] overflow-hidden bg-white/60 dark:bg-[#1D1D1F]/40 backdrop-blur-2xl border border-black/5 dark:border-white/10 flex flex-col md:flex-row shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-1">
|
<Link href={`/${locale}/news/${heroArticle.slug}`} className="group relative w-full rounded-[2rem] overflow-hidden bg-white/60 dark:bg-[#1D1D1F]/40 backdrop-blur-2xl border border-black/5 dark:border-white/10 flex flex-col md:flex-row shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-1">
|
||||||
<div className="w-full md:w-1/2 h-56 md:h-[400px] relative overflow-hidden bg-[#1D1D1F]">
|
<div className="w-full md:w-1/2 h-56 md:h-[400px] relative overflow-hidden bg-[#1D1D1F]">
|
||||||
{heroArticle.coverImage ? (
|
{heroArticle.coverImage ? (
|
||||||
<Image src={`/news/${heroArticle.coverImage}`} alt={heroArticle.title} fill className="object-cover transition-transform duration-700 group-hover:scale-105" />
|
<Image src={`/news/${heroArticle.slug}/${heroArticle.coverImage}`} alt={heroArticle.title} fill className="object-cover transition-transform duration-700 group-hover:scale-105" />
|
||||||
) : (
|
) : (
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-[#0066CC]/20 to-[#0A0A0C] flex items-center justify-center"><Newspaper size={64} className="text-white/10" /></div>
|
<div className="absolute inset-0 bg-gradient-to-br from-[#0066CC]/20 to-[#0A0A0C] flex items-center justify-center"><Newspaper size={64} className="text-white/10" /></div>
|
||||||
)}
|
)}
|
||||||
@@ -89,7 +89,7 @@ export default async function NewsHub({ params }: { params: Promise<{ locale: st
|
|||||||
<Link key={article.id} href={`/${locale}/news/${article.slug}`} className="group flex flex-col bg-white/60 dark:bg-[#1D1D1F]/40 backdrop-blur-md border border-black/5 dark:border-white/10 rounded-3xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-500 hover:-translate-y-1">
|
<Link key={article.id} href={`/${locale}/news/${article.slug}`} className="group flex flex-col bg-white/60 dark:bg-[#1D1D1F]/40 backdrop-blur-md border border-black/5 dark:border-white/10 rounded-3xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-500 hover:-translate-y-1">
|
||||||
<div className="w-full h-40 relative overflow-hidden bg-[#1D1D1F]">
|
<div className="w-full h-40 relative overflow-hidden bg-[#1D1D1F]">
|
||||||
{article.coverImage ? (
|
{article.coverImage ? (
|
||||||
<Image src={`/news/${article.coverImage}`} alt={article.title} fill className="object-cover transition-transform duration-700 group-hover:scale-105" />
|
<Image src={`/news/${article.slug}/${article.coverImage}`} alt={article.title} fill className="object-cover transition-transform duration-700 group-hover:scale-105" />
|
||||||
) : (
|
) : (
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-[#0066CC]/10 to-[#0A0A0C]" />
|
<div className="absolute inset-0 bg-gradient-to-br from-[#0066CC]/10 to-[#0A0A0C]" />
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -26,6 +26,10 @@ interface ModalProps {
|
|||||||
data: CaseStudyData | null;
|
data: CaseStudyData | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function nodeToSlug(title: string): string {
|
||||||
|
return title.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
const renderMarkdown = (text: string) => {
|
const renderMarkdown = (text: string) => {
|
||||||
if (!text) return null;
|
if (!text) return null;
|
||||||
const lines = text.split('\n');
|
const lines = text.split('\n');
|
||||||
@@ -195,7 +199,8 @@ export default function CaseStudyModal({ isOpen, onClose, data }: ModalProps) {
|
|||||||
|
|
||||||
const isEvent = data.nodeType === "event";
|
const isEvent = data.nodeType === "event";
|
||||||
const isHQ = data.nodeType === "hq";
|
const isHQ = data.nodeType === "hq";
|
||||||
const coverImage = data.mediaFileName ? `/cases/${data.mediaFileName}` : null;
|
const nodeSlug = nodeToSlug(data.title);
|
||||||
|
const coverImage = data.mediaFileName ? `/cases/${nodeSlug}/${data.mediaFileName}` : null;
|
||||||
|
|
||||||
let formattedDate = null;
|
let formattedDate = null;
|
||||||
let isUpcoming = false;
|
let isUpcoming = false;
|
||||||
@@ -321,7 +326,7 @@ export default function CaseStudyModal({ isOpen, onClose, data }: ModalProps) {
|
|||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
{gallery.map((imgSrc, idx) => (
|
{gallery.map((imgSrc, idx) => (
|
||||||
<div key={idx} className={`relative rounded-2xl overflow-hidden bg-[#1D1D1F] border border-black/10 dark:border-white/10 ${idx === 0 && gallery.length % 2 !== 0 ? 'sm:col-span-2 h-64 md:h-80' : 'h-48 md:h-64'}`}>
|
<div key={idx} className={`relative rounded-2xl overflow-hidden bg-[#1D1D1F] border border-black/10 dark:border-white/10 ${idx === 0 && gallery.length % 2 !== 0 ? 'sm:col-span-2 h-64 md:h-80' : 'h-48 md:h-64'}`}>
|
||||||
<Image src={`/cases/${imgSrc}`} alt={`Gallery image ${idx + 1}`} fill className="object-cover hover:scale-105 transition-transform duration-700" />
|
<Image src={`/cases/${nodeSlug}/${imgSrc}`} alt={`Gallery image ${idx + 1}`} fill className="object-cover hover:scale-105 transition-transform duration-700" />
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user