From 8ddffe5bd9162b8deeac181e5868df64d572bc7d Mon Sep 17 00:00:00 2001 From: jaaaaavier Date: Wed, 11 Mar 2026 11:26:10 +0100 Subject: [PATCH 1/4] fix realtional links and S3 alternatives hero section --- src/assets/lang/es/relational-links.json | 4 ++-- src/components/comparison/HeroSection.tsx | 2 +- src/components/drive/components/LinkTo.tsx | 6 +++--- src/components/shared/sections/RelationalLinks.tsx | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/assets/lang/es/relational-links.json b/src/assets/lang/es/relational-links.json index 8c9032022..f586254e8 100644 --- a/src/assets/lang/es/relational-links.json +++ b/src/assets/lang/es/relational-links.json @@ -18,11 +18,11 @@ "link": "/pricing" }, { - "cta": "Almacenamiento privado en la nube", + "cta": "Almacenamiento privado\n en la nube", "link": "/private-cloud-storage-solutions" }, { - "cta": "Nube de almacenamiento de código abierto", + "cta": "Nube de almacenamiento\n de código abierto", "link": "/open-source" }, { diff --git a/src/components/comparison/HeroSection.tsx b/src/components/comparison/HeroSection.tsx index a1ed2a033..3b42d86d7 100644 --- a/src/components/comparison/HeroSection.tsx +++ b/src/components/comparison/HeroSection.tsx @@ -21,7 +21,7 @@ export const HeroSection = ({ textContent, percentage, competitor }: HeroSection
-

+

diff --git a/src/components/drive/components/LinkTo.tsx b/src/components/drive/components/LinkTo.tsx index 8ebc80bd0..d55c52f65 100644 --- a/src/components/drive/components/LinkTo.tsx +++ b/src/components/drive/components/LinkTo.tsx @@ -8,9 +8,9 @@ interface LinkTo { export const LinkTo = ({ text, linkToRedirect }: LinkTo) => { return ( - -

{text}

- + +

{text}

+ ); }; diff --git a/src/components/shared/sections/RelationalLinks.tsx b/src/components/shared/sections/RelationalLinks.tsx index dd3461449..c8c9797e7 100644 --- a/src/components/shared/sections/RelationalLinks.tsx +++ b/src/components/shared/sections/RelationalLinks.tsx @@ -43,7 +43,7 @@ const RelationalLinks = ({ textContent }: RelationalLinksProps) => { {cards.map((card) => (
From 083b17267cb25cdac329378d3bfa5ccb86e5a4c2 Mon Sep 17 00:00:00 2001 From: jaaaaavier Date: Wed, 11 Mar 2026 11:31:56 +0100 Subject: [PATCH 2/4] Update RelationalLinks.tsx --- src/components/shared/sections/RelationalLinks.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/shared/sections/RelationalLinks.tsx b/src/components/shared/sections/RelationalLinks.tsx index c8c9797e7..508d16cad 100644 --- a/src/components/shared/sections/RelationalLinks.tsx +++ b/src/components/shared/sections/RelationalLinks.tsx @@ -36,9 +36,9 @@ const RelationalLinks = ({ textContent }: RelationalLinksProps) => { return (
-

+

{textContent.title} -

+

{cards.map((card) => (
Date: Wed, 11 Mar 2026 12:04:31 +0100 Subject: [PATCH 3/4] Update RelationalLinks.tsx --- src/components/shared/sections/RelationalLinks.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/shared/sections/RelationalLinks.tsx b/src/components/shared/sections/RelationalLinks.tsx index 508d16cad..4f755e097 100644 --- a/src/components/shared/sections/RelationalLinks.tsx +++ b/src/components/shared/sections/RelationalLinks.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import { useRouter } from 'next/router'; import { LinkTo } from '../../drive/components/LinkTo'; interface Card { @@ -25,12 +26,15 @@ const shuffleData = (data: Card[]): Card[] => { const RelationalLinks = ({ textContent }: RelationalLinksProps) => { const [cards, setCards] = useState([]); + const router = useRouter(); + useEffect(() => { if (textContent?.links) { - const shuffledLinks = shuffleData(textContent.links); - setCards(shuffledLinks.slice(0, 3)); + const filteredLinks = textContent.links.filter((link) => link.link !== router.asPath); + const shuffledLinks = shuffleData(filteredLinks); + setCards(shuffledLinks.slice(0, 9)); } - }, [textContent]); + }, [textContent, router.asPath]); if (cards.length === 0) return null; From b01d860ee2cb0012736a26c5eeaa8d48b8019854 Mon Sep 17 00:00:00 2001 From: jaaaaavier Date: Wed, 11 Mar 2026 12:36:27 +0100 Subject: [PATCH 4/4] update Relational Section with horizontal scrollable component --- .../shared/sections/RelationalLinks.tsx | 138 ++++++++++++++++-- 1 file changed, 124 insertions(+), 14 deletions(-) diff --git a/src/components/shared/sections/RelationalLinks.tsx b/src/components/shared/sections/RelationalLinks.tsx index 4f755e097..5fb97f850 100644 --- a/src/components/shared/sections/RelationalLinks.tsx +++ b/src/components/shared/sections/RelationalLinks.tsx @@ -1,6 +1,7 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import { useRouter } from 'next/router'; import { LinkTo } from '../../drive/components/LinkTo'; +import { CaretLeft, CaretRight } from '@phosphor-icons/react'; interface Card { cta: string; @@ -25,9 +26,24 @@ const shuffleData = (data: Card[]): Card[] => { const RelationalLinks = ({ textContent }: RelationalLinksProps) => { const [cards, setCards] = useState([]); - const router = useRouter(); + const scrollContainerRef = useRef(null); + const [scrollState, setScrollState] = useState({ + canGoLeft: false, + canGoRight: true, + }); + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + const checkIsMobile = () => { + setIsMobile(window.innerWidth < 1024); + }; + checkIsMobile(); + window.addEventListener('resize', checkIsMobile); + return () => window.removeEventListener('resize', checkIsMobile); + }, []); + useEffect(() => { if (textContent?.links) { const filteredLinks = textContent.links.filter((link) => link.link !== router.asPath); @@ -36,22 +52,116 @@ const RelationalLinks = ({ textContent }: RelationalLinksProps) => { } }, [textContent, router.asPath]); + const updateScrollButtons = () => { + if (scrollContainerRef.current === null) return; + const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current; + + const maxScrollLeft = scrollWidth - clientWidth; + + setScrollState({ + canGoLeft: scrollLeft > 2, + canGoRight: scrollLeft < maxScrollLeft - 2, + }); + }; + + const getScrollAmount = () => { + const cardWidth = isMobile ? 300 : 350; + const gap = 24; // gap-6 refers to 1.5rem which is 24px + return cardWidth + gap; + }; + + const scrollLeft = () => { + if (scrollContainerRef.current === null) return; + scrollContainerRef.current.scrollBy({ + left: -getScrollAmount(), + behavior: 'smooth', + }); + }; + + const scrollRight = () => { + if (scrollContainerRef.current === null) return; + scrollContainerRef.current.scrollBy({ + left: getScrollAmount(), + behavior: 'smooth', + }); + }; + + useEffect(() => { + const scrollContainer = scrollContainerRef.current; + if (scrollContainer === null) return; + + updateScrollButtons(); + scrollContainer.addEventListener('scroll', updateScrollButtons); + + const resizeObserver = new ResizeObserver(updateScrollButtons); + resizeObserver.observe(scrollContainer); + + return () => { + scrollContainer.removeEventListener('scroll', updateScrollButtons); + resizeObserver.disconnect(); + }; + }, [isMobile, cards]); + if (cards.length === 0) return null; return ( -
-

- {textContent.title} -

-
- {cards.map((card) => ( -
- +
+
+

+ {textContent.title} +

+
+ +
+
+ {cards.map((card) => ( +
+
+ +
+
+ ))} +
+ +
+
+ +
- ))} +
);