feat: home page app access components

src/assets/images/home/brand-logos/logo-facebook.svg

@@ -0,0 +1,10 @@
+<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3829_58)">
+<path d="M46.2002 -0.000366211C71.5 -0.000172771 92.2002 20.6998 92.2002 45.9996C92.2 68.7439 75.5883 87.6546 53.8662 91.4879L53.6191 91.2897C53.7191 91.2705 53.82 91.254 53.9199 91.234V58.7789H64.1416L66.1865 46.0006H53.9199V37.0563C53.92 33.4787 55.1976 30.6677 60.8193 30.6676H66.6973V18.9117C63.3752 18.4007 59.7976 17.8903 56.4756 17.8903C45.9978 17.8903 38.5859 24.2789 38.5859 35.7789V46.0006H27.0859V58.7789H38.5859V91.234C38.6569 91.2482 38.7288 91.2602 38.7998 91.274L38.5332 91.4879C16.8111 87.6546 0.200368 68.7439 0.200195 45.9996C0.200195 20.6996 20.9002 -0.000366211 46.2002 -0.000366211Z" fill="white" style="fill:white;fill-opacity:1;"/>
+</g>
+<defs>
+<clipPath id="clip0_3829_58">
+<rect width="92" height="92" fill="white" style="fill:white;fill-opacity:1;"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/home/brand-logos/logo-netflix.svg

@@ -0,0 +1,16 @@
+<svg width="187" height="50" viewBox="0 0 187 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3829_69)">
+<path d="M0 0H7.52731C8.76176 3.65814 9.94384 7.38511 11.3317 10.9911C13.0402 15.4301 14.766 19.8471 16.3808 24.3244C16.8361 25.587 17.1954 26.9198 17.6529 28.2055C17.5925 25.8978 17.5941 23.548 17.6187 21.2385C17.694 14.1697 17.5325 7.06474 17.6483 0H25.5388L25.5056 30.3193L25.4887 41.4208C25.4865 43.0775 25.5445 45.0967 25.4884 46.7125C22.6599 47.103 19.7871 47.4025 16.9449 47.7795C16.5113 46.3118 15.8998 44.7776 15.3703 43.3305L13.2032 37.2428L9.27901 25.9556C8.76956 24.4948 8.38459 23.1869 7.82701 21.7105C8.01102 25.7185 7.87565 30.3514 7.87212 34.3924L7.83892 43.0213C7.84202 44.9097 7.9017 47.0206 7.85123 48.8923C6.29577 49.1377 4.73673 49.36 3.17465 49.559C2.56305 49.6426 1.09817 49.8135 0.583953 50H0V0Z" fill="#FCF6F5" style="fill:#FCF6F5;fill:color(display-p3 0.9882 0.9647 0.9608);fill-opacity:1;"/>
+<path d="M158.153 0H166.78C168.209 3.58098 169.532 7.27868 170.977 10.856C171.28 11.6065 171.504 12.467 171.802 13.187L175.704 4.00921C176.274 2.6572 176.915 1.39332 177.394 0H186.022L179.554 15.0231C178.34 17.8493 177.132 20.7871 175.858 23.578C176.447 24.9297 176.924 26.2276 177.469 27.5875C180.005 33.9083 182.449 40.2658 184.892 46.6229C185.29 47.6594 185.624 48.9067 186.133 49.8824V50H185.607C185.375 49.92 185.136 49.8749 184.895 49.834C182.313 49.3964 179.719 49.0494 177.127 48.6833C175.238 43.8735 173.397 38.8836 171.411 34.1253C169.696 38.4003 167.579 43.1416 165.707 47.4022C164.048 47.3149 162.226 46.9003 160.552 46.7578C159.477 46.6664 158.429 46.5754 157.352 46.5109C157.725 45.506 158.255 44.4499 158.696 43.4617L160.702 38.9004C162.338 35.223 163.927 31.5245 165.468 27.8057C165.957 26.6148 167.023 24.5213 167.34 23.4113C166.994 22.2405 166.404 21 165.947 19.8482C163.345 13.2788 160.941 6.4836 158.153 0Z" fill="#FCF6F5" style="fill:#FCF6F5;fill:color(display-p3 0.9882 0.9647 0.9608);fill-opacity:1;"/>
+<path d="M33.0349 0H54.7984C54.7917 2.57811 54.8196 5.15619 54.8819 7.73355L45.3357 7.73862C44.0286 7.74151 42.1423 7.83364 40.9175 7.75726L40.8905 18.2827C43.1781 18.2739 45.4658 18.253 47.7532 18.22C48.8039 18.2048 50.5215 18.2298 51.5233 18.0925C51.5313 20.7064 51.4807 23.346 51.5504 25.9563C49.2403 26.0045 46.9297 26.0209 44.6191 26.0055C43.5229 26.0087 41.9287 26.0932 40.896 26.0145C40.8828 29.8116 40.942 33.8785 40.8199 37.6502C45.3812 37.241 50.3047 37.1439 54.8114 36.6642C54.8053 38.7314 54.6874 42.596 54.8734 44.5328C49.1165 44.571 43.1094 45.3748 37.3588 45.7469C35.9812 45.836 34.319 45.9795 32.9693 46.188C32.868 43.7888 32.9238 41.1745 32.9308 38.7604L32.9729 26.7025C32.9463 17.8016 32.967 8.90065 33.0349 0Z" fill="#FCF6F5" style="fill:#FCF6F5;fill:color(display-p3 0.9882 0.9647 0.9608);fill-opacity:1;"/>
+<path d="M89.0899 0H110.981C110.913 2.47 110.96 5.29864 110.988 7.78307C107.758 7.66295 104.415 7.78046 101.176 7.74371C99.846 7.72862 98.2382 7.81124 96.9322 7.72465C97.0013 8.99305 96.8876 11.1535 96.914 12.5177C96.9367 13.7286 97.0003 16.7343 96.8804 17.8305L107.597 17.8162C107.426 19.4907 107.556 23.7535 107.586 25.5492C104.047 25.4767 100.494 25.5637 96.9522 25.5328C97.0067 29.9368 96.834 34.3985 96.9195 38.8112C96.9476 40.2853 97.014 41.9765 96.9313 43.4255C96.2578 43.4791 94.8836 43.433 94.1602 43.4303L89.1257 43.4398C89.0044 42.3373 89.073 39.7934 89.0736 38.5667L89.0762 29.2825L89.0899 0Z" fill="#FCF6F5" style="fill:#FCF6F5;fill:color(display-p3 0.9882 0.9647 0.9608);fill-opacity:1;"/>
+<path d="M59.8939 0H84.1141C84.2385 2.0991 84.1364 5.52097 84.1431 7.70844C81.4194 7.74655 78.619 7.72227 75.8903 7.71671C76.0302 11.4047 75.899 16.0367 75.8964 19.7815L75.8849 43.6266C73.2888 43.6463 70.5913 43.7936 67.9867 43.8865C67.9275 38.832 67.9752 33.6752 67.9782 28.6146L68.0042 7.73888C65.7039 7.85836 62.3267 7.72248 59.8891 7.73346C59.7937 5.53674 59.7996 2.20232 59.8939 0Z" fill="#FCF6F5" style="fill:#FCF6F5;fill:color(display-p3 0.9882 0.9647 0.9608);fill-opacity:1;"/>
+<path d="M115.964 0H123.823C123.875 1.5355 123.828 3.31994 123.827 4.8718C123.841 7.77963 123.84 10.6875 123.822 13.5953L123.793 36.416C127.935 36.4389 132.207 36.8656 136.346 37.025C136.652 37.0367 136.961 37.038 137.266 37.0348C137.311 39.6145 137.289 42.2413 137.313 44.8295C135.775 44.8416 133.977 44.6238 132.392 44.5725C126.904 44.395 121.418 44.0363 115.927 43.8874C115.813 41.1892 115.884 38.0555 115.885 35.3335L115.908 19.8343L115.926 7.16004C115.926 4.95661 115.848 2.16735 115.964 0Z" fill="#FCF6F5" style="fill:#FCF6F5;fill:color(display-p3 0.9882 0.9647 0.9608);fill-opacity:1;"/>
+<path d="M143.601 0H151.495C151.563 5.05641 151.504 10.2439 151.503 15.3086L151.509 46.0267C148.992 45.8912 146.321 45.5045 143.699 45.3723C143.613 43.2175 143.654 40.857 143.645 38.688L143.614 26.5151C143.6 17.7596 143.478 8.73507 143.601 0Z" fill="#FCF6F5" style="fill:#FCF6F5;fill:color(display-p3 0.9882 0.9647 0.9608);fill-opacity:1;"/>
+</g>
+<defs>
+<clipPath id="clip0_3829_69">
+<rect width="186.133" height="50" fill="white" style="fill:white;fill-opacity:1;"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/home/brand-logos/logo-tiktok.svg

@@ -0,0 +1,11 @@
+<svg width="82" height="92" viewBox="0 0 82 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3829_55)">
+<path d="M55.8052 29.4492C61.7322 33.6824 68.9901 36.1733 76.8295 36.1733V24.3042C72.4536 23.3726 68.5798 21.087 65.6671 17.9079C60.6815 14.7985 57.0895 9.66859 56.0363 3.66443H45.0459V63.8906C45.021 70.9117 39.3202 76.5968 32.2899 76.5968C28.1471 76.5968 24.4666 74.6231 22.1357 71.5655C17.9733 69.4658 15.119 65.1551 15.119 60.177C15.119 53.1364 20.8293 47.428 27.8747 47.428C29.2245 47.428 30.5256 47.638 31.746 48.0251V36.0262C16.6162 36.3387 4.44824 48.6947 4.44824 63.8909C4.44824 71.4767 7.47835 78.3536 12.3963 83.3783C16.8329 86.3558 22.1738 88.0924 27.92 88.0924C43.3206 88.0924 55.8055 75.6139 55.8055 60.2208L55.8052 29.4492Z" fill="white" style="fill:white;fill-opacity:1;"/>
+<path d="M76.7971 24.3101V21.1008C72.8512 21.1068 68.9827 20.0023 65.6348 17.9135C68.5984 21.1565 72.501 23.3927 76.7971 24.3101ZM56.004 3.67035C55.9035 3.09663 55.8264 2.51906 55.7728 1.93908V-0.000366211H40.598V60.2264C40.5738 67.2466 34.8732 72.9317 27.8423 72.9317C25.7782 72.9317 23.8293 72.442 22.1034 71.5718C24.4343 74.629 28.1148 76.6024 32.2576 76.6024C39.2872 76.6024 44.989 70.9179 45.0136 63.8968V3.67035H56.004ZM31.7143 36.0322V32.6156C30.4463 32.4424 29.168 32.3554 27.888 32.3561C12.4861 32.3561 0.000976562 44.8343 0.000976562 60.2264C0.000976562 69.8764 4.90786 78.3809 12.3642 83.3836C7.44633 78.3592 4.41622 71.482 4.41622 63.8965C4.41622 48.7006 16.5839 36.3446 31.7143 36.0322Z" fill="white" style="fill:white;fill-opacity:1;"/>
+</g>
+<defs>
+<clipPath id="clip0_3829_55">
+<rect width="81.2138" height="92" fill="white" style="fill:white;fill-opacity:1;"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/home/brand-logos/logo-twitch.svg

@@ -0,0 +1,11 @@
+<svg width="60" height="70" viewBox="0 0 60 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3829_108)">
+<path d="M12.5 0.000732422L0 12.5007V57.5007H15V70.0007L27.5 57.5007H37.5L60 35.0007V0.000732422H12.5ZM55 32.5007L45 42.5007H35L26.25 51.2507V42.5007H15V5.00073H55V32.5007Z" fill="white" style="fill:white;fill-opacity:1;"/>
+<path d="M42.5 13.7507H47.5V28.7507H42.5V13.7507ZM28.75 13.7507H33.75V28.7507H28.75V13.7507Z" fill="white" style="fill:white;fill-opacity:1;"/>
+</g>
+<defs>
+<clipPath id="clip0_3829_108">
+<rect width="60" height="70" fill="white" style="fill:white;fill-opacity:1;"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/home/brand-logos/logo-youtube.svg

@@ -0,0 +1,3 @@
+<svg width="108" height="75" viewBox="0 0 108 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M53.5693 0C53.6911 7.43556e-06 87.0894 0.00419771 95.4258 2.24023C100.038 3.47495 103.663 7.10035 104.897 11.7129C107.124 20.0461 107.138 37.4215 107.138 37.5C107.138 37.5 107.138 54.9361 104.897 63.2881C103.663 67.9006 100.038 71.5252 95.4258 72.7598C87.0894 74.9959 53.6911 75 53.5693 75C53.5693 75 20.0639 75 11.7119 72.7598C7.09965 71.5251 3.4749 67.9004 2.24023 63.2881C0.000169166 54.936 0 37.5 0 37.5C1.13944e-05 37.4216 0.00529932 20.0461 2.24023 11.7129C3.47491 7.10048 7.0996 3.47505 11.7119 2.24023C20.0639 0.000112638 53.5693 0 53.5693 0ZM42.9775 53.5625L70.8115 37.4932L42.9775 21.4238V53.5625Z" fill="white" style="fill:white;fill-opacity:1;"/>
+</svg>

src/assets/images/home/nomo-logo-icon.svg

@@ -0,0 +1,9 @@
+<svg width="97" height="96" viewBox="0 0 97 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.8281 0C76.6225 1.91601 96.1445 22.6419 96.1445 47.9277C96.1444 74.4773 74.6219 96 48.0723 96C21.5228 95.9999 0.00015276 74.4772 0 47.9277C-1.35987e-07 27.9257 12.2166 10.7781 29.5947 3.53613V20.5215C20.803 26.4607 15.0225 36.5193 15.0225 47.9277C15.0226 59.3359 20.8032 69.3938 29.5947 75.333V27.2627L51.8281 40.2158V0ZM66.8506 66.3525L44.6172 53.4004V80.7949C45.7528 80.9137 46.9053 80.9775 48.0723 80.9775C66.3251 80.9775 81.1219 66.1805 81.1221 47.9277C81.1221 36.6503 75.4727 26.6941 66.8506 20.7305V66.3525Z" fill="url(#paint0_linear_3835_1521)"/>
+<defs>
+<linearGradient id="paint0_linear_3835_1521" x1="48.0723" y1="4.84847" x2="48.0723" y2="26.4242" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0EA5E9" style="stop-color:#0EA5E9;stop-color:color(display-p3 0.0549 0.6471 0.9137);stop-opacity:1;"/>
+<stop offset="1" stop-color="#3B82F6" style="stop-color:#3B82F6;stop-color:color(display-p3 0.2314 0.5098 0.9647);stop-opacity:1;"/>
+</linearGradient>
+</defs>
+</svg>

src/pages/home/components/AppAccess.tsx

@@ -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>
-    );
+    )
 }

tailwind.config.js

@@ -31,6 +31,10 @@ export default {
                     from: { opacity: '1', transform: 'scaleY(1)' },
                     to: { opacity: '0', transform: 'scaleY(0)' },
                 },
+                'scroll-left': {
+                    from: { transform: 'translateX(0)' },
+                    to: { transform: 'translateX(-50%)' },
+                },
             },
             animation: {
                 'slide-in-from-end': 'slide-in-from-end 0.25s ease-out forwards',
@@ -39,6 +43,7 @@ export default {
                 'slide-out-to-start': 'slide-out-to-start 0.25s ease-out forwards',
                 'expand-down': 'expand-down 0.2s ease-out forwards',
                 'collapse-up': 'collapse-up 0.15s ease-in forwards',
+                'scroll-left': 'scroll-left 20s linear infinite',
             },
         },
     },