Skip to content

[MKT-1142]feat/change website to darkmode - adding dark to product pages #2255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
internxt-yu wants to merge 1 commit into from
Closed

[MKT-1142]feat/change website to darkmode - adding dark to product pages #2255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions src/components/about/FeatureSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import HorizontalScrollableSection from './HorizontalScrollableSection';

const FeatureSection = ({ textContent }) => {
return (
<section className="overflow-hidden" style={{ background: 'linear-gradient(180deg, #F4F8FF 63.1%, #FFFFFF 100%)' }}>
<section className="overflow-hidden bg-[linear-gradient(180deg,#F4F8FF_63.1%,#FFFFFF_100%)] dark:bg-[linear-gradient(180deg,#0D0D0D_63.1%,#1C1C1C_100%)]">
<HorizontalScrollableSection textContent={textContent.ScrollableSection} />
<section className="flex flex-col-reverse items-center justify-center gap-8 bg-white py-10 lg:flex-row lg:px-10 lg:py-20 xl:px-32 3xl:px-80">
<div className="absolute left-8 right-8 top-0 h-[1px] bg-neutral-35 lg:left-32 lg:right-32 " />
<section className="flex flex-col-reverse items-center justify-center gap-8 bg-white dark:bg-gray-95 py-10 lg:flex-row lg:px-10 lg:py-20 xl:px-32 3xl:px-80">
<div className="absolute left-8 right-8 top-0 h-[1px] bg-neutral-35 dark:bg-gray-71 lg:left-32 lg:right-32" />
<RevealX direction="right" className="hidden lg:flex">
<video
width={500}
Expand Down Expand Up @@ -41,12 +41,8 @@ const FeatureSection = ({ textContent }) => {
</video>
</RevealX>
<div className="flex w-[554px] flex-col items-center justify-center space-y-6 md:items-start">
<p className="w-[345px] text-30 font-bold leading-tight text-gray-100 lg:w-[480px] lg:text-5xl">
{textContent.BetterFutureSection.title}
</p>
<p className="w-[345px] text-base font-normal leading-tight text-gray-55 lg:w-[554px]">
{textContent.BetterFutureSection.description}
</p>
<p className="w-[345px] text-30 font-bold leading-tight text-gray-100 dark:text-white-95 lg:w-[480px] lg:text-5xl">{textContent.BetterFutureSection.title}</p>
<p className="w-[345px] text-base font-normal leading-tight text-gray-55 dark:text-green-120 lg:w-[554px]">{textContent.BetterFutureSection.description}</p>
<div className="flex w-[345px] flex-row items-center justify-start space-x-1 hover:underline lg:w-full">
<button
className="cursor-pointer text-base font-medium text-primary hover:text-primary-dark"
Expand Down
21 changes: 8 additions & 13 deletions src/components/about/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,28 @@ import { getImage } from '@/lib/getImage';
import Image from 'next/image';

const HeroSection = ({ textContent }): JSX.Element => (
<section
className="relative flex w-full flex-col overflow-hidden pt-10 lg:pt-20"
style={{ background: 'linear-gradient(360deg, #FFFFFF 0%, #F4F8FF 100%)' }}
>
<section className="relative flex w-full flex-col overflow-hidden pt-10 lg:pt-20 bg-[linear-gradient(360deg,#FFFFFF_0%,#F4F8FF_100%)] dark:bg-[linear-gradient(360deg,#1C1C1C_0%,#0D0D0D_100%)]">
<div className="relative flex flex-col items-center justify-center">
<div className="flex flex-col items-center justify-center space-y-12 px-6 pt-20">
<div className="flex w-[345px] flex-col space-y-6 text-start lg:w-[976px] lg:text-center">
<h1
className="hidden w-full px-20 text-30 font-semibold leading-tight text-gray-100 lg:block lg:text-5xl"
className="hidden w-full px-20 text-30 font-semibold leading-tight text-gray-100 dark:text-white-95 lg:block lg:text-5xl"
dangerouslySetInnerHTML={{
__html: textContent.title.replace(/\*\*(.*?)\*\*/g, '<span class="text-primary">$1</span>'),
}}
/>
<h1
className="block text-30 font-semibold leading-tight text-gray-100 lg:hidden lg:text-5xl"
className="block text-30 font-semibold leading-tight text-gray-100 dark:text-white-95 lg:hidden lg:text-5xl"
dangerouslySetInnerHTML={{
__html: textContent.title.replace(/\*\*(.*?)\*\*/g, '<span class="text-primary">$1</span>'),
}}
></h1>

<p className="w-full text-start text-base font-normal leading-tight text-gray-55 lg:w-[976px] lg:text-center lg:text-xl">
{textContent.description}
</p>
<p className="w-full text-start text-base font-normal leading-tight text-gray-55 dark:text-green-120 lg:w-[976px] lg:text-center lg:text-xl">{textContent.description}</p>
</div>

<div className="hidden max-w-6xl grid-flow-row grid-cols-6 gap-6 lg:grid">
<div className="col-span-6 h-60 select-none overflow-hidden rounded-3xl bg-red-old-10 sm:h-72 md:col-span-4 lg:h-80">
<div className="col-span-6 h-60 select-none overflow-hidden rounded-3xl bg-red-old-10 dark:bg-gray-105 sm:h-72 md:col-span-4 lg:h-80">
<Image
loading="eager"
className="h-full w-full object-cover object-center"
Expand All @@ -40,7 +35,7 @@ const HeroSection = ({ textContent }): JSX.Element => (
alt="Internxt headquarters"
/>
</div>
<div className="col-span-6 h-60 select-none overflow-hidden rounded-3xl bg-red-old-10 sm:h-72 md:col-span-2 lg:h-80">
<div className="col-span-6 h-60 select-none overflow-hidden rounded-3xl bg-red-old-10 dark:bg-gray-105 sm:h-72 md:col-span-2 lg:h-80">
<Image
loading="eager"
className="h-full w-full object-cover object-center"
Expand All @@ -52,7 +47,7 @@ const HeroSection = ({ textContent }): JSX.Element => (
alt="Internxt office"
/>
</div>
<div className="col-span-6 h-60 select-none overflow-hidden rounded-3xl bg-red-old-10 sm:h-72 md:col-span-3 lg:h-80">
<div className="col-span-6 h-60 select-none overflow-hidden rounded-3xl bg-red-old-10 dark:bg-gray-105 sm:h-72 md:col-span-3 lg:h-80">
<Image
loading="eager"
className="h-full w-full object-cover object-center"
Expand All @@ -64,7 +59,7 @@ const HeroSection = ({ textContent }): JSX.Element => (
alt="Internxt team"
/>
</div>
<div className="col-span-6 h-60 select-none overflow-hidden rounded-3xl bg-red-old-10 sm:h-72 md:col-span-3 lg:h-80">
<div className="col-span-6 h-60 select-none overflow-hidden rounded-3xl bg-red-old-10 dark:bg-gray-105 sm:h-72 md:col-span-3 lg:h-80">
<Image
loading="eager"
className="h-full w-full object-cover object-center"
Expand Down
24 changes: 7 additions & 17 deletions src/components/about/HeroSection2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,10 @@ const HeroSection2 = ({ textContent, lang }) => (
<div className="relative flex flex-col items-center py-20 lg:py-40">
{/* Main title */}
<div className="relative space-y-20 px-6 text-center md:space-y-28">
<h1 className="relative z-10 text-left text-5xl text-cool-gray-90 sm:text-center md:text-6xl lg:text-7xl">
<h1 className="relative z-10 text-left text-5xl text-cool-gray-90 dark:text-white-95 sm:text-center md:text-6xl lg:text-7xl">
{textContent.title.line1} <br className="hidden lg:flex" />
<span className={`${lang === 'fr' ? '' : 'text-primary'}`}>
{lang === 'fr' ? textContent.title.line2.substring2 : textContent.title.line2.substring1}
</span>{' '}
<span className={`${lang === 'fr' ? 'text-primary' : ''}`}>
{lang === 'fr' ? textContent.title.line2.substring1 : textContent.title.line2.substring2}{' '}
</span>
<span className={`${lang === 'fr' ? '' : 'text-primary'}`}>{lang === 'fr' ? textContent.title.line2.substring2 : textContent.title.line2.substring1}</span>{' '}
<span className={`${lang === 'fr' ? 'text-primary' : ''}`}>{lang === 'fr' ? textContent.title.line2.substring1 : textContent.title.line2.substring2}{' '}</span>
<br className="hidden lg:flex" />
{textContent.title.line3.substring1}{' '}
<span className="text-primary">{textContent.title.line3.substring2}</span>
Expand All @@ -25,25 +21,21 @@ const HeroSection2 = ({ textContent, lang }) => (
<div className="flex flex-col items-start justify-center sm:items-center">
<span className="relative -ml-2 text-6xl font-extralight tracking-tighter text-primary sm:-ml-4 sm:text-7xl md:text-8xl">
{textContent.figures.activeUsers.figure}
<span className="absolute -top-2.5 -right-6 translate-x-0.5 text-5xl text-blue-30 md:-right-8 md:text-6xl">
+
</span>
<span className="absolute -top-2.5 -right-6 translate-x-0.5 text-5xl text-blue-30 md:-right-8 md:text-6xl">+</span>
</span>
<span className="text-lg font-medium sm:text-base">{textContent.figures.activeUsers.caption}</span>
</div>

<div className="flex flex-col items-start justify-center sm:items-center">
<span className="relative text-6xl font-extralight tracking-tighter text-primary sm:text-7xl md:text-8xl">
{textContent.figures.awards.figure}
<span className="absolute -top-2.5 -right-6 translate-x-0.5 text-5xl text-blue-30 md:-right-8 md:text-6xl">
+
</span>
<span className="absolute -top-2.5 -right-6 translate-x-0.5 text-5xl text-blue-30 md:-right-8 md:text-6xl">+</span>
</span>
<span className="text-lg font-medium sm:text-base">{textContent.figures.awards.caption}</span>
</div>
</div>

<h3 className="mb-10 text-xl font-normal text-cool-gray-80 lg:mb-20">
<h3 className="mb-10 text-xl font-normal text-cool-gray-80 dark:text-cool-gray-30 lg:mb-20">
{textContent.description.line1} <br className="hidden md:flex" />
{textContent.description.line2}
</h3>
Expand Down Expand Up @@ -111,9 +103,7 @@ const HeroSection2 = ({ textContent, lang }) => (
maxWidth: "100%",
height: "auto"
}} />
<p className="whitespace-nowrap text-base">
{textContent.recognitions.brands.startupvalencia.caption1}
</p>
<p className="whitespace-nowrap text-base">{textContent.recognitions.brands.startupvalencia.caption1}</p>
</div>
</div>
</div>
Expand Down
43 changes: 16 additions & 27 deletions src/components/about/HorizontalScrollableSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import Image from "next/image";
import RevealX from '@/components/components/RevealX';
import { getImage } from '@/lib/getImage';
import { DARK_MODE_LOGO_FILTER } from '@/theme.config';

interface HorizontalScrollableProps {
textContent: any;
Expand All @@ -13,6 +14,8 @@
textContent,
header = true,
}: Readonly<HorizontalScrollableProps>): JSX.Element {
const bgClass = 'bg-neutral-17 dark:bg-gray-105';
const hoverClass = 'hover:bg-white-summer dark:hover:bg-gray-105';
const scrollContainerRef = useRef<HTMLDivElement>(null);
const [currentIndex, setCurrentIndex] = useState(0);
const [isDesktop, setIsDesktop] = useState(false);
Expand Down Expand Up @@ -93,26 +96,20 @@
}
};

const headerBackground = 'bg-[linear-gradient(180deg,#F4F8FF_63.1%,#FFFFFF_100%)] dark:bg-[linear-gradient(180deg,#0D0D0D_63.1%,#1C1C1C_100%)]';
return (
<section
className={`flex h-min w-full flex-col items-center justify-center gap-8 overflow-hidden py-10 lg:h-min ${
header ? 'gap-8 lg:gap-16' : ' gap-6 bg-neutral-17 lg:gap-12'
} lg:py-20 `}
style={header ? { background: 'linear-gradient(180deg, #F4F8FF 63.1%, #FFFFFF 100%)' } : undefined}
className={`flex h-min w-full flex-col items-center justify-center gap-8 overflow-hidden py-10 lg:h-min ${header ? `gap-8 lg:gap-16 ${headerBackground}` : ` gap-6 ${bgClass} lg:gap-12`} lg:py-20 `}

Check warning on line 102 in src/components/about/HorizontalScrollableSection.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this code to not use nested template literals. 


See more on https://sonarcloud.io/project/issues?id=internxt_website&issues=AaGbHUkcALOZc6cdscJy&open=AaGbHUkcALOZc6cdscJy&pullRequest=2255

Check warning on line 102 in src/components/about/HorizontalScrollableSection.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this code to not use nested template literals. 


See more on https://sonarcloud.io/project/issues?id=internxt_website&issues=AaGbHUkcALOZc6cdscJz&open=AaGbHUkcALOZc6cdscJz&pullRequest=2255
>
<div className="absolute left-8 right-8 top-0 h-[1px] bg-neutral-35 lg:bottom-0 lg:left-32 lg:right-32"></div>
<p
className={`whitespace-pre-line ${
header ? 'text-start lg:text-center' : 'text-start lg:pl-20'
} w-[345px] text-30 font-bold leading-tight text-gray-95 lg:w-[853px] lg:text-5xl`}
>
<div className="absolute left-8 right-8 top-0 h-[1px] bg-neutral-35 dark:bg-gray-71 lg:bottom-0 lg:left-32 lg:right-32"></div>
<p className={`whitespace-pre-line ${header ? 'text-start lg:text-center' : 'text-start lg:pl-20'} w-[345px] text-30 font-bold leading-tight text-gray-95 dark:text-white-95 lg:w-[853px] lg:text-5xl`}>
{textContent.title}
</p>
<div className="flex w-[345px] flex-col items-center justify-between gap-8 lg:w-[749px] lg:flex-row">
{header && (
<>
<p
className="w-full text-sm font-normal leading-tight text-gray-55 lg:w-1/2 lg:text-base"
className="w-full text-sm font-normal leading-tight text-gray-55 dark:text-green-120 lg:w-1/2 lg:text-base"
dangerouslySetInnerHTML={{
__html: textContent.description
.replace(/\n/g, '<br/>')
Expand All @@ -125,7 +122,7 @@
width={358}
height={346}
quality={100}
className="rounded-2xl"
className={`rounded-2xl ${DARK_MODE_LOGO_FILTER}`}
draggable={false}
alt="Internxt gift"
loading="eager"
Expand All @@ -140,7 +137,7 @@
width={345}
height={150}
quality={100}
className="rounded-2xl"
className={`rounded-2xl ${DARK_MODE_LOGO_FILTER}`}
draggable={false}
alt="Internxt gift"
loading="eager"
Expand Down Expand Up @@ -173,21 +170,17 @@
}}
>
<div
className={`flex gap-4 lg:gap-6 ${
header ? 'lg:pl-48 lg:pr-48 2xl:pl-[500px]' : 'lg:pl-48 lg:pr-48 2xl:pl-[520px]'
} 1.5xl:pl-64 1.5xl:pr-64 2xl:pr-[520px]`}
className={`flex gap-4 lg:gap-6 ${header ? 'lg:pl-48 lg:pr-48 2xl:pl-[500px]' : 'lg:pl-48 lg:pr-48 2xl:pl-[520px]'} 1.5xl:pl-64 1.5xl:pr-64 2xl:pr-[520px]`}
style={{
width: 'max-content',
alignItems: 'stretch',
}}
>
{textContent.cardDescriptions.titles.map((title: string, index: number) => (
<div key={index} className="flex-shrink-0">
<div className="flex h-full w-[345px] flex-col rounded-16 bg-white p-6 lg:w-[450px] lg:p-8">
<p className=" pb-4 text-xl font-medium text-gray-95 lg:pb-6">{title}</p>
<p className="flex-1 text-sm font-normal leading-tight text-gray-55">
{textContent.cardDescriptions.descriptions[index]}
</p>
<div className="flex h-full w-[345px] flex-col rounded-16 bg-white dark:bg-gray-95 p-6 lg:w-[450px] lg:p-8">
<p className="pb-4 text-xl font-medium text-gray-95 dark:text-white-95 lg:pb-6">{title}</p>
<p className="flex-1 text-sm font-normal leading-tight text-gray-55 dark:text-green-120">{textContent.cardDescriptions.descriptions[index]}</p>
</div>
</div>
))}
Expand All @@ -199,18 +192,14 @@
<button
onClick={scrollLeft}
disabled={currentIndex === 0}
className={`flex h-[48px] w-[48px] items-center justify-center rounded-100 border border-primary bg-transparent transition-opacity ${
currentIndex === 0 ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:bg-white-summer'
}`}
className={`flex h-[48px] w-[48px] items-center justify-center rounded-100 border border-primary bg-transparent transition-opacity ${currentIndex === 0 ? 'cursor-not-allowed opacity-50' : `cursor-pointer ${hoverClass}`}`}

Check warning on line 195 in src/components/about/HorizontalScrollableSection.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this code to not use nested template literals. 


See more on https://sonarcloud.io/project/issues?id=internxt_website&issues=AaGbHUkcALOZc6cdscJ0&open=AaGbHUkcALOZc6cdscJ0&pullRequest=2255
>
<CaretLeft className="h-[24px] w-[24px] text-primary" />
</button>
<button
onClick={scrollRight}
disabled={currentIndex >= maxIndex}
className={`flex h-[48px] w-[48px] items-center justify-center rounded-100 border border-primary bg-transparent transition-opacity ${
currentIndex >= maxIndex ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:bg-white-summer'
}`}
className={`flex h-[48px] w-[48px] items-center justify-center rounded-100 border border-primary bg-transparent transition-opacity ${currentIndex >= maxIndex ? 'cursor-not-allowed opacity-50' : `cursor-pointer ${hoverClass}`}`}

Check warning on line 202 in src/components/about/HorizontalScrollableSection.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this code to not use nested template literals. 


See more on https://sonarcloud.io/project/issues?id=internxt_website&issues=AaGbHUkcALOZc6cdscJ1&open=AaGbHUkcALOZc6cdscJ1&pullRequest=2255
>
<CaretRight className="h-[24px] w-[24px] text-primary" />
</button>
Expand Down
Loading
Loading