This commit is contained in:
@@ -712,8 +712,8 @@ function TechnicalViewer3D({ node, usdzPath }: { node: any; usdzPath: string })
|
|||||||
|
|
||||||
<ModelViewer
|
<ModelViewer
|
||||||
id={viewerId.current}
|
id={viewerId.current}
|
||||||
src={`/cases/models/${node.model3DPath}`}
|
src={`/cases/${nodeToSlug(node.title)}/models/${node.model3DPath}`}
|
||||||
ios-src={`/cases/models/${usdzPath}`}
|
ios-src={`/cases/${nodeToSlug(node.title)}/models/${usdzPath}`}
|
||||||
alt={`3D Technical Model: ${node.title}`}
|
alt={`3D Technical Model: ${node.title}`}
|
||||||
ar
|
ar
|
||||||
ar-modes="quick-look scene-viewer webxr"
|
ar-modes="quick-look scene-viewer webxr"
|
||||||
@@ -801,10 +801,14 @@ function TechnicalViewer3D({ node, usdzPath }: { node: any; usdzPath: string })
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function nodeToSlug(title: string): string {
|
||||||
|
return title.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
// ── SUBCOMPONENTE DE CASO DE ESTUDIO ──
|
// ── SUBCOMPONENTE DE CASO DE ESTUDIO ──
|
||||||
function ExpandedCaseStudy({ node }: { node: any }) {
|
function ExpandedCaseStudy({ node }: { node: any }) {
|
||||||
const [activeTab, setActiveTab] = useState<"overview" | "tech-media">("overview");
|
const [activeTab, setActiveTab] = useState<"overview" | "tech-media">("overview");
|
||||||
|
const nodeSlug = nodeToSlug(node.title);
|
||||||
|
|
||||||
const [lightboxOpen, setLightboxOpen] = useState(false);
|
const [lightboxOpen, setLightboxOpen] = useState(false);
|
||||||
const [lightboxImages, setLightboxImages] = useState<string[]>([]);
|
const [lightboxImages, setLightboxImages] = useState<string[]>([]);
|
||||||
@@ -836,8 +840,8 @@ function ExpandedCaseStudy({ node }: { node: any }) {
|
|||||||
allImages.push(match[1]);
|
allImages.push(match[1]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
gallery.forEach(img => allImages.push(`/cases/${img}`));
|
gallery.forEach(img => allImages.push(`/cases/${nodeSlug}/${img}`));
|
||||||
renders.forEach(ren => allImages.push(`/cases/${ren}`));
|
renders.forEach(ren => allImages.push(`/cases/${nodeSlug}/${ren}`));
|
||||||
if (!allImages.includes(clickedImageUrl)) {
|
if (!allImages.includes(clickedImageUrl)) {
|
||||||
allImages.unshift(clickedImageUrl);
|
allImages.unshift(clickedImageUrl);
|
||||||
}
|
}
|
||||||
@@ -884,7 +888,7 @@ function ExpandedCaseStudy({ node }: { node: any }) {
|
|||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
{videos.map((vid: string, idx: number) => {
|
{videos.map((vid: string, idx: number) => {
|
||||||
const isLocalMp4 = vid.endsWith('.mp4');
|
const isLocalMp4 = vid.endsWith('.mp4');
|
||||||
const videoSrc = isLocalMp4 && !vid.startsWith('http') ? `/cases/videos/${vid}` : vid;
|
const videoSrc = isLocalMp4 && !vid.startsWith('http') ? `/cases/${nodeSlug}/videos/${vid}` : vid;
|
||||||
return (
|
return (
|
||||||
<div key={`v-${idx}`} className="relative w-full aspect-video rounded-2xl md:rounded-3xl overflow-hidden border border-black/10 dark:border-white/10 shadow-xl bg-black col-span-1 md:col-span-2">
|
<div key={`v-${idx}`} className="relative w-full aspect-video rounded-2xl md:rounded-3xl overflow-hidden border border-black/10 dark:border-white/10 shadow-xl bg-black col-span-1 md:col-span-2">
|
||||||
{isLocalMp4 ? (
|
{isLocalMp4 ? (
|
||||||
@@ -897,7 +901,7 @@ function ExpandedCaseStudy({ node }: { node: any }) {
|
|||||||
})}
|
})}
|
||||||
|
|
||||||
{gallery.map((img: string, idx: number) => {
|
{gallery.map((img: string, idx: number) => {
|
||||||
const fullImgSrc = `/cases/${img}`;
|
const fullImgSrc = `/cases/${nodeSlug}/${img}`;
|
||||||
return (
|
return (
|
||||||
<div key={`g-${idx}`} className="relative w-full aspect-video rounded-2xl md:rounded-3xl overflow-hidden border border-black/10 dark:border-white/10 shadow-lg group bg-white">
|
<div key={`g-${idx}`} className="relative w-full aspect-video rounded-2xl md:rounded-3xl overflow-hidden border border-black/10 dark:border-white/10 shadow-lg group bg-white">
|
||||||
<Image src={fullImgSrc} alt="Installation" fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
|
<Image src={fullImgSrc} alt="Installation" fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
|
||||||
@@ -968,7 +972,7 @@ function ExpandedCaseStudy({ node }: { node: any }) {
|
|||||||
</h5>
|
</h5>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
{renders.map((ren: string, idx: number) => {
|
{renders.map((ren: string, idx: number) => {
|
||||||
const fullRenSrc = `/cases/${ren}`;
|
const fullRenSrc = `/cases/${nodeSlug}/${ren}`;
|
||||||
return (
|
return (
|
||||||
<div key={idx} className="relative w-full aspect-[4/3] rounded-2xl md:rounded-3xl overflow-hidden border border-black/10 dark:border-white/10 shadow-lg group bg-white dark:bg-[#1a1a1a]">
|
<div key={idx} className="relative w-full aspect-[4/3] rounded-2xl md:rounded-3xl overflow-hidden border border-black/10 dark:border-white/10 shadow-lg group bg-white dark:bg-[#1a1a1a]">
|
||||||
<Image src={fullRenSrc} alt="Technical Render" fill className="object-contain group-hover:scale-105 transition-transform duration-700" sizes="(max-width: 768px) 100vw, 50vw" />
|
<Image src={fullRenSrc} alt="Technical Render" fill className="object-contain group-hover:scale-105 transition-transform duration-700" sizes="(max-width: 768px) 100vw, 50vw" />
|
||||||
@@ -1145,7 +1149,7 @@ export default function ApplicationClient({ data, realCases, images }: { data: a
|
|||||||
<div className="flex items-center gap-5 flex-1">
|
<div className="flex items-center gap-5 flex-1">
|
||||||
<div className="w-16 h-16 md:w-20 md:h-20 rounded-2xl md:rounded-3xl bg-black/5 dark:bg-black/50 border border-black/10 dark:border-white/5 flex items-center justify-center shrink-0 overflow-hidden relative shadow-inner">
|
<div className="w-16 h-16 md:w-20 md:h-20 rounded-2xl md:rounded-3xl bg-black/5 dark:bg-black/50 border border-black/10 dark:border-white/5 flex items-center justify-center shrink-0 overflow-hidden relative shadow-inner">
|
||||||
{node.mediaFileName ? (
|
{node.mediaFileName ? (
|
||||||
<Image src={`/cases/${node.mediaFileName}`} alt={node.title} fill className="object-cover opacity-90 group-hover:scale-110 transition-transform duration-700" />
|
<Image src={`/cases/${nodeToSlug(node.title)}/${node.mediaFileName}`} alt={node.title} fill className="object-cover opacity-90 group-hover:scale-110 transition-transform duration-700" />
|
||||||
) : (
|
) : (
|
||||||
<Cpu size={28} className="text-[#0066CC]/50 dark:text-[#00F0FF]/50" />
|
<Cpu size={28} className="text-[#0066CC]/50 dark:text-[#00F0FF]/50" />
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user