|
|
@@ -1,18 +1,39 @@
|
|
|
-import { useTranslation } from 'react-i18next';
|
|
|
+import { useTranslation } from 'react-i18next'
|
|
|
|
|
|
-import appAccessSection from '@/assets/images/home/app-access-section.png';
|
|
|
-import appLogosStrip from '@/assets/images/home/app-logos-strip.png';
|
|
|
+import appWallBg from '@/assets/images/home/app-wall-bg.png'
|
|
|
+import nomoLogoIcon from '@/assets/images/home/nomo-logo-icon.svg'
|
|
|
+import logoFacebook from '@/assets/images/home/brand-logos/logo-facebook.svg'
|
|
|
+import logoInstagram from '@/assets/images/home/brand-logos/logo-instagram.svg'
|
|
|
+import logoMax from '@/assets/images/home/brand-logos/logo-max.svg'
|
|
|
+import logoNetflix from '@/assets/images/home/brand-logos/logo-netflix.svg'
|
|
|
+import logoPrimeVideo from '@/assets/images/home/brand-logos/logo-prime-video.svg'
|
|
|
+import logoSpotify from '@/assets/images/home/brand-logos/logo-spotify.svg'
|
|
|
+import logoTiktok from '@/assets/images/home/brand-logos/logo-tiktok.svg'
|
|
|
+import logoTwitch from '@/assets/images/home/brand-logos/logo-twitch.svg'
|
|
|
+import logoYoutube from '@/assets/images/home/brand-logos/logo-youtube.svg'
|
|
|
|
|
|
-import Wrapper from './Wrapper';
|
|
|
+import Wrapper from './Wrapper'
|
|
|
+
|
|
|
+const BRAND_LOGOS = [
|
|
|
+ { src: logoTiktok, alt: 'TikTok', className: 'h-[25px] lg:h-[92px]' },
|
|
|
+ { src: logoFacebook, alt: 'Facebook', className: 'h-[25px] lg:h-[92px]' },
|
|
|
+ { src: logoYoutube, alt: 'YouTube', className: 'h-[20px] lg:h-[75px]' },
|
|
|
+ { src: logoInstagram, alt: 'Instagram', className: 'h-[25px] lg:h-[92px]' },
|
|
|
+ { src: logoNetflix, alt: 'Netflix', className: 'h-[13px] lg:h-[50px]' },
|
|
|
+ { src: logoPrimeVideo, alt: 'Prime Video', className: 'h-[19px] lg:h-[70px]' },
|
|
|
+ { src: logoMax, alt: 'Max', className: 'h-[13px] lg:h-[50px]' },
|
|
|
+ { src: logoSpotify, alt: 'Spotify', className: 'h-[19px] lg:h-[69px]' },
|
|
|
+ { src: logoTwitch, alt: 'Twitch', className: 'h-[19px] lg:h-[70px]' },
|
|
|
+] as const
|
|
|
|
|
|
export function AppAccess() {
|
|
|
- const { t } = useTranslation();
|
|
|
+ const { t } = useTranslation()
|
|
|
|
|
|
return (
|
|
|
<section className="w-full py-10 lg:py-16">
|
|
|
<Wrapper className="flex flex-col items-center gap-6">
|
|
|
{/* Title + Subtitle */}
|
|
|
- <div className="flex flex-col items-center gap-4 text-center">
|
|
|
+ <div className="flex flex-col items-center gap-4 text-center px-5 lg:px-0">
|
|
|
<h2 className="text-2xl lg:text-[32px] font-semibold italic text-white leading-[1.667] lg:leading-[0.94] tracking-[-0.019em] lg:tracking-[-0.014em] font-[REM]">
|
|
|
{t('pages.home.appAccess.title')}
|
|
|
</h2>
|
|
|
@@ -21,22 +42,48 @@ export function AppAccess() {
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
- {/* App wall background with NOMO branding */}
|
|
|
- <div className="relative w-full max-w-[1280px] rounded-lg overflow-hidden">
|
|
|
- <img src={appAccessSection} alt="" className="w-full h-auto object-cover" />
|
|
|
+ {/* Background wall with NOMO branding */}
|
|
|
+ <div className="relative w-full max-w-[1280px] h-[115px] lg:h-[420px] overflow-hidden">
|
|
|
+ <img
|
|
|
+ src={appWallBg}
|
|
|
+ alt=""
|
|
|
+ className="absolute inset-0 w-full h-[197px] lg:h-[720px] object-cover opacity-50"
|
|
|
+ />
|
|
|
+ <div className="absolute inset-0 bg-[radial-gradient(55%_55%_at_50%_50%,rgb(1_2_3/0)_0%,rgb(1_2_3/1)_100%)]" />
|
|
|
+ <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 lg:gap-6">
|
|
|
+ <img
|
|
|
+ src={nomoLogoIcon}
|
|
|
+ alt="NOMO"
|
|
|
+ className="w-[26px] h-[26px] lg:w-[96px] lg:h-[96px]"
|
|
|
+ />
|
|
|
+ <span className="text-lg lg:text-[72px] font-bold italic text-white leading-none font-[REM] tracking-[0.004em]">
|
|
|
+ NOMO VPN
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- {/* Logo strip with fade edges */}
|
|
|
+ {/* Scrolling brand logos */}
|
|
|
<div className="relative w-full max-w-[1280px] overflow-hidden">
|
|
|
- <div className="absolute inset-y-0 start-0 w-20 lg:w-40 bg-gradient-to-r from-[#010203] to-transparent z-10 rtl:bg-gradient-to-l" />
|
|
|
- <div className="absolute inset-y-0 end-0 w-20 lg:w-40 bg-gradient-to-l from-[#010203] to-transparent z-10 rtl:bg-gradient-to-r" />
|
|
|
- <img
|
|
|
- src={appLogosStrip}
|
|
|
- alt="Popular apps"
|
|
|
- className="w-full h-auto object-contain"
|
|
|
- />
|
|
|
+ <div className="absolute inset-0 z-10 bg-[linear-gradient(90deg,rgb(1_2_3)_0%,transparent_50%,rgb(1_2_3)_100%)]" />
|
|
|
+ <div className="flex animate-scroll-left">
|
|
|
+ {[0, 1].map((setIndex) => (
|
|
|
+ <div
|
|
|
+ key={setIndex}
|
|
|
+ className="flex items-center gap-4 lg:gap-[60px] py-3 lg:py-[46px] shrink-0 pe-4 lg:pe-[60px]"
|
|
|
+ >
|
|
|
+ {BRAND_LOGOS.map((logo) => (
|
|
|
+ <img
|
|
|
+ key={`${logo.alt}-${setIndex}`}
|
|
|
+ src={logo.src}
|
|
|
+ alt={logo.alt}
|
|
|
+ className={`${logo.className} w-auto shrink-0 object-contain`}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</Wrapper>
|
|
|
</section>
|
|
|
- );
|
|
|
+ )
|
|
|
}
|
BaiLuoYan
