From d12eb0aff400bffa13227019c35c66480e44cf0b Mon Sep 17 00:00:00 2001 From: Tedydev Date: Sun, 19 Jan 2025 15:04:14 +0700 Subject: [PATCH] update metadata --- .DS_Store | Bin 12292 -> 12292 bytes src/pages/index.jsx | 285 +++++++++++++++++++++----------------------- 2 files changed, 139 insertions(+), 146 deletions(-) diff --git a/.DS_Store b/.DS_Store index 066c90c3fec59f83ef32e2613f7213e72b044af1..ed53fc2cd3c9850ad6cefb73d056cda3d6cdeee9 100755 GIT binary patch delta 362 zcmZokXi1ph&uFkQz=pj(k0GBSg&~z8o*@^^DrLw4@``iP4TF>Oa|;-NK&i#;Gmzq8 zz@aub-^C>|1UTjKx# delta 82 zcmZokXi1phF8z=nOYi%Jz210w?%aBy#Clon^%tj_a9m{Ddkk3s|UW*3z_#>o>| YtR{CzNN@HR-O99?MdK?AqZ5i40B%zjlK=n! diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 539a187..dd146e2 100755 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,157 +1,157 @@ -import dynamic from 'next/dynamic'; -import Head from 'next/head'; -import { useEffect, useRef, useCallback, useState } from 'react'; -import RootLayout from '@/components/common/layout/RootLayout'; -import DigitalAgencyHero from '@/components/hero/DigitalAgencyHero'; -import DigitalAgencyRoll from '@/components/roll/DigitalAgencyRoll'; -import DigitalAgencyAbout from '@/components/about/DigitalAgencyAbout'; -import ServiceElementV4 from '@/components/service/ServiceElementV4'; -import DigitalAgencyCounter from '@/components/counter/DigitalAgencyCounter'; -import DigitalAgencyWorkflow from '@/components/workflow/DigitalAgencyWorkflow'; -import DigitalAgencyPortfolio from '@/components/portfolio/DigitalAgencyPortfolio'; -import DigitalAgencyBrand from '@/components/brand/DigitalAgencyBrand'; -import DigitalAgencyCTA from '@/components/cta/DigitalAgencyCTA'; -import DigitalMarketingTestimonial from '@/components/testimonial/DigitalMarketingTestimonial'; -import { useTranslation } from 'next-i18next'; -import { useLanguageManager } from '@/hooks/useLanguageManager'; +import dynamic from "next/dynamic"; +import Head from "next/head"; +import { useEffect, useRef, useCallback, useState } from "react"; +import RootLayout from "@/components/common/layout/RootLayout"; +import DigitalAgencyHero from "@/components/hero/DigitalAgencyHero"; +import DigitalAgencyRoll from "@/components/roll/DigitalAgencyRoll"; +import DigitalAgencyAbout from "@/components/about/DigitalAgencyAbout"; +import ServiceElementV4 from "@/components/service/ServiceElementV4"; +import DigitalAgencyCounter from "@/components/counter/DigitalAgencyCounter"; +import DigitalAgencyWorkflow from "@/components/workflow/DigitalAgencyWorkflow"; +import DigitalAgencyPortfolio from "@/components/portfolio/DigitalAgencyPortfolio"; +import DigitalAgencyBrand from "@/components/brand/DigitalAgencyBrand"; +import DigitalAgencyCTA from "@/components/cta/DigitalAgencyCTA"; +import DigitalMarketingTestimonial from "@/components/testimonial/DigitalMarketingTestimonial"; +import { useTranslation } from "next-i18next"; +import { useLanguageManager } from "@/hooks/useLanguageManager"; const DigitalAgency = () => { - const { t } = useTranslation('common'); - const timelineRef = useRef(null); - const dotsRef = useRef([]); - const { currentLanguage } = useLanguageManager(); - const [gsapInstance, setGsapInstance] = useState(null); - - useEffect(() => { - // Load GSAP and ScrollTrigger - const loadGSAP = async () => { - const gsapModule = await import('gsap'); - const ScrollTriggerModule = await import('gsap/ScrollTrigger'); - const gsap = gsapModule.default; - gsap.registerPlugin(ScrollTriggerModule.default); - setGsapInstance(gsap); - }; - loadGSAP(); - }, []); - - const setupScrollDots = useCallback(() => { - if (!gsapInstance) return; - - const dots = dotsRef.current; - const sections = document.querySelectorAll('section'); - - const handleScroll = () => { - const scrollPosition = window.scrollY + window.innerHeight / 2; - sections.forEach((section, index) => { - const sectionTop = section.offsetTop; - const sectionHeight = section.offsetHeight; - if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) { - highlightDot(index); - } else { - unhighlightDot(index); - } - }); - }; - - window.addEventListener('scroll', handleScroll); - return () => { - window.removeEventListener('scroll', handleScroll); - }; - }, [gsapInstance]); - - const setupTimeline = useCallback(() => { - if (!gsapInstance) return; - - const timeline = timelineRef.current; - gsapInstance.to(timeline, { - scrollTrigger: { - trigger: document.body, - start: 'top top', - end: 'bottom bottom', - scrub: true, - onUpdate: (self) => { - const progress = self.progress * 100; - timeline.style.height = `${progress}%`; - }, - }, - }); - }, [gsapInstance]); - - const playCursor = useCallback(() => { - if (!gsapInstance) return; - - let client_cursor = document.getElementById('client_cursor'); - if (!client_cursor) return; - - const handleMouseMove = (e) => { - const target = e.target; - - if (target.closest('.testimonial__img')) { - gsapInstance.to(client_cursor, { - opacity: 1, - x: e.clientX, - y: e.clientY, - ease: 'power4.out', - }); - } else { - gsapInstance.to(client_cursor, { - opacity: 0, - x: e.clientX, - y: e.clientY, - ease: 'power4.out', - }); - } - }; - - document.addEventListener('mousemove', handleMouseMove); - return () => { - document.removeEventListener('mousemove', handleMouseMove); - }; - }, [gsapInstance]); - - useEffect(() => { - if (typeof window !== 'undefined' && gsapInstance) { - const cursorCleanup = playCursor(); - setupTimeline(); - const dotsCleanup = setupScrollDots(); - - return () => { - cursorCleanup && cursorCleanup(); - dotsCleanup && dotsCleanup(); - }; - } - }, [playCursor, setupTimeline, setupScrollDots, gsapInstance]); - - const highlightDot = (index) => { - if (dotsRef.current[index]) { - dotsRef.current[index].classList.add('active'); - } - }; - - const unhighlightDot = (index) => { - if (dotsRef.current[index]) { - dotsRef.current[index].classList.remove('active'); - } - }; - - return ( + const { t } = useTranslation("common"); + const timelineRef = useRef(null); + const dotsRef = useRef([]); + const { currentLanguage } = useLanguageManager(); + const [gsapInstance, setGsapInstance] = useState(null); + + useEffect(() => { + // Load GSAP and ScrollTrigger + const loadGSAP = async () => { + const gsapModule = await import("gsap"); + const ScrollTriggerModule = await import("gsap/ScrollTrigger"); + const gsap = gsapModule.default; + gsap.registerPlugin(ScrollTriggerModule.default); + setGsapInstance(gsap); + }; + loadGSAP(); + }, []); + + const setupScrollDots = useCallback(() => { + if (!gsapInstance) return; + + const dots = dotsRef.current; + const sections = document.querySelectorAll("section"); + + const handleScroll = () => { + const scrollPosition = window.scrollY + window.innerHeight / 2; + sections.forEach((section, index) => { + const sectionTop = section.offsetTop; + const sectionHeight = section.offsetHeight; + if ( + scrollPosition >= sectionTop && + scrollPosition < sectionTop + sectionHeight + ) { + highlightDot(index); + } else { + unhighlightDot(index); + } + }); + }; + + window.addEventListener("scroll", handleScroll); + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, [gsapInstance]); + + const setupTimeline = useCallback(() => { + if (!gsapInstance) return; + + const timeline = timelineRef.current; + gsapInstance.to(timeline, { + scrollTrigger: { + trigger: document.body, + start: "top top", + end: "bottom bottom", + scrub: true, + onUpdate: (self) => { + const progress = self.progress * 100; + timeline.style.height = `${progress}%`; + }, + }, + }); + }, [gsapInstance]); + + const playCursor = useCallback(() => { + if (!gsapInstance) return; + + let client_cursor = document.getElementById("client_cursor"); + if (!client_cursor) return; + + const handleMouseMove = (e) => { + const target = e.target; + + if (target.closest(".testimonial__img")) { + gsapInstance.to(client_cursor, { + opacity: 1, + x: e.clientX, + y: e.clientY, + ease: "power4.out", + }); + } else { + gsapInstance.to(client_cursor, { + opacity: 0, + x: e.clientX, + y: e.clientY, + ease: "power4.out", + }); + } + }; + + document.addEventListener("mousemove", handleMouseMove); + return () => { + document.removeEventListener("mousemove", handleMouseMove); + }; + }, [gsapInstance]); + + useEffect(() => { + if (typeof window !== "undefined" && gsapInstance) { + const cursorCleanup = playCursor(); + setupTimeline(); + const dotsCleanup = setupScrollDots(); + + return () => { + cursorCleanup && cursorCleanup(); + dotsCleanup && dotsCleanup(); + }; + } + }, [playCursor, setupTimeline, setupScrollDots, gsapInstance]); + + const highlightDot = (index) => { + if (dotsRef.current[index]) { + dotsRef.current[index].classList.add("active"); + } + }; + + const unhighlightDot = (index) => { + if (dotsRef.current[index]) { + dotsRef.current[index].classList.remove("active"); + } + }; + + return (
NPH Digital | Giải Pháp chuyển đổi số toàn diện - {/* Thêm meta robots và sitemap */} - {/* Thêm các meta tags cho SEO */} - {/* Các meta tags hiện có của bạn */} { }, contactPoint: { "@type": "ContactPoint", - telephone: "1900088883", + telephone: "+84-777-018-333", contactType: "customer service", }, description: @@ -198,7 +198,6 @@ const DigitalAgency = () => { /> - {/* Open Graph Meta Tags */} { - {/* Viewport and Mobile Optimization */} - {/* Canonical URL */} - {/* Favicon */} { sizes="16x16" /> - {/* Preload important resources */} - {/* Other Meta Tags */} @@ -303,7 +297,6 @@ const DigitalAgency = () => { - {/* Schema Markup */}