Merge pull request #371 from aura-nw/develop

Develop
aura-nw · Feb 19, 2024 · fb2bad3 · fb2bad3
2 parents 0d0926b + 514925e
commit fb2bad3
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 72 deletions.
diff --git a/src/app/introduction/sections/index.tsx b/src/app/introduction/sections/index.tsx
@@ -83,7 +83,7 @@ function Sections() {
         const handleScroll = () => {
             const sectionEls = document.querySelectorAll('.section');
             sectionEls.forEach((sectionEl) => {
-                if (window.scrollY >= (sectionEl as HTMLElement).offsetTop - sectionEl.clientHeight / 5) {
+                if (window.scrollY >= (sectionEl as HTMLElement).offsetTop - sectionEl.clientHeight / 2) {
                     setCurrentSection(sectionEl.id);
                 }
             });
@@ -152,7 +152,7 @@ function Sections() {
                                 </div>
                             </section>
 
-                            <section id="modularity">
+                            <section id="modularity" className="section">
                                 <div className="flex flex-col gap-8 xl:flex-row xl:gap-16 justify-between">
                                     <div className="h-[250px] pl-6 xl:h-[304px] xl:pl-8 flex justify-center items-center rounded-3xl bg-dark-charcoal">
                                         <Image className="max-h-[250px] xl:max-h-fit" src={contents[1].img} alt="img"></Image>
@@ -164,7 +164,7 @@ function Sections() {
                                 </div>
                             </section>
 
-                            <section id= "emerging-market">
+                            <section id= "emerging-market" className="section">
                                 <div className="flex flex-col gap-8 xl:flex-col-reverse">
                                     <div className="h-[250px] xl:h-[304px] flex justify-center items-center rounded-3xl bg-dark-charcoal">
                                         <Image src={contents[2].img} alt="img"></Image>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import localFont from 'next/font/local';
+import Script from "next/script";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
 import Tutorials from "../sections/tutorials";
@@ -21,6 +22,17 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <Script
+        id="gtm-script"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+          })(window,document,'script','dataLayer','GTM-K3NWXQS');`,
+        }}
+      />
       <body className={`${inter.className} ${ppmori.variable} scroll-smooth`}>
         <div>
           <input className="nav-input hidden" type="checkbox" id="nav-input" />
@@ -30,6 +42,12 @@ export default function RootLayout({
           <Footer />
           <label htmlFor="nav-input" className="nav-overlay"> </label>
         </div>
+        <noscript
+          dangerouslySetInnerHTML={{
+            __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K3NWXQS"
+            height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+          }}
+        />
       </body>
     </html>
   );

diff --git a/src/app/tech-stack/sections/index.tsx b/src/app/tech-stack/sections/index.tsx
@@ -78,7 +78,7 @@ function Sections() {
         const handleScroll = () => {
             const sectionEls = document.querySelectorAll('.section');
             sectionEls.forEach((sectionEl) => {
-                if (window.scrollY >= (sectionEl as HTMLElement).offsetTop - sectionEl.clientHeight / 5) {
+                if (window.scrollY >= (sectionEl as HTMLElement).offsetTop - sectionEl.clientHeight / 3) {
                     setCurrentSection(sectionEl.id);
                 }
             });

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -1,5 +1,4 @@
 import ic_discord from "@/assets/icons/ic_discord_none_bg.svg";
-import ic_medium from "@/assets/icons/ic_medium.svg";
 import ic_telegram from "@/assets/icons/ic_telegram_gray.svg";
 import ic_x from "@/assets/icons/ic_x.svg";
 import ic_logo from "@/assets/images/img_logo.svg";
@@ -39,7 +38,7 @@ function Footer() {
                 </Link>
               ))}
             </div>
-            <span className="text-medium-gray font-normal leading-6">a high performance Layer 1 ecosystem with built-in modularity, leading the mass adoption of Web3 in emerging markets.</span>
+            <span className="text-medium-gray font-normal leading-6">A high performance Layer 1 ecosystem with built-in modularity, leading the mass adoption of Web3 in emerging markets.</span>
           </div>
           <div className="flex flex-wrap gap-16 xl:gap-[80px] justify-between">
             <div className="flex flex-col gap-4 w-[133px] xl:w-auto xl:h-auto h-[124px]">

diff --git a/src/components/Header/Item/index.tsx b/src/components/Header/Item/index.tsx
@@ -11,8 +11,9 @@ const Item = ({ children, path, subItems }: { children: ReactNode, path?: string
     const pathname = usePathname()
 
     if (subItems) {
-        const listPaths = subItems.map((e: any) => e.link)
-        const isActive = listPaths.includes(pathname)
+        const listPaths = subItems.map((e: any) => e.pageRoute)
+        const isActive = listPaths.includes(pathname.slice(0, -1))
+
         return (
             <div className="flex justify-center items-center">
                 <div className={`group relative px-6 py-3 hover:bg-medium-charcoal ${isActive ? 'bg-medium-charcoal' : ''} rounded-2xl cursor-pointer`}>
@@ -41,7 +42,7 @@ const Item = ({ children, path, subItems }: { children: ReactNode, path?: string
 
     return (
         <div className="flex justify-center items-center">
-            <Link href={path ?? PAGE_ROUTE.HOME} className={`w-24 px-6 py-3 hover:bg-medium-charcoal ${pathname === path ? 'bg-medium-charcoal' : ''} rounded-2xl text-lg flex justify-center items-center`}>{children}</Link>
+            <Link href={path ?? PAGE_ROUTE.HOME} className={`w-24 px-6 py-3 hover:bg-medium-charcoal ${pathname.slice(0, -1) === path ? 'bg-medium-charcoal' : ''} rounded-2xl text-lg flex justify-center items-center`}>{children}</Link>
         </div>
     )
 

diff --git a/src/sections/features/components/Card/index.tsx b/src/sections/features/components/Card/index.tsx
@@ -3,17 +3,18 @@ import Image from "next/image";
 type Card = {
   img: string,
   title: string,
-  description: string
+  description: string,
+  index: number
 }
 
 type CardProps = {
   data: Card
 }
 
 function Card({ data }: CardProps) {
-  const { img, description, title } = data
+  const { img, description, title, index } = data
   return (
-    <div className="pt-6 pb-8 px-8 xl:px-16 xl:pb-16 flex flex-col gap-8 justify-between rounded-2xl bg-dark-charcoal border border-solid border-blur-grayish-brown max-w-[344px] max-h-[484px] xl:max-h-[636px] xl:max-w-[679px] lg:w-[679px] card">
+    <div className={`pt-6 pb-8 px-8 xl:px-16 xl:pb-16 flex flex-col gap-8 justify-between rounded-2xl bg-dark-charcoal border border-solid border-blur-grayish-brown max-w-[344px] max-h-[484px] xl:max-h-[636px] xl:max-w-[679px] lg:w-[679px] card lg:sticky lg:top-[120px] lg:z-[${index}]`}>
       <div className="h-[184px] xl:h-[352px] flex justify-center items-center">
         <Image className="xl:w-[406px] xl:h-[300px]" src={img} alt="img_feature"></Image>
       </div>

diff --git a/src/sections/features/index.tsx b/src/sections/features/index.tsx
@@ -35,7 +35,7 @@ function Features() {
             <div className='flex flex-col gap-6 items-center justify-center'>
                 <div className='flex flex-col gap-4 items-center justify-center'>
                     {featuresData.map((item, i) => (
-                        <Card key={i} data={item} />
+                        <Card key={i} data={{ ...item, index: i }} />
                     ))}
                 </div>
                 <GradientButton className='xl:hidden' href='/introduction'>Learn more</GradientButton>

diff --git a/src/sections/tutorials/index.tsx b/src/sections/tutorials/index.tsx
@@ -12,7 +12,7 @@ function Tutorials() {
                         Build Your DApp With Aura
                     </span>
                     <GradientButton href="https://docs.aura.network/developer/">
-                         tutorials
+                        Tutorials
                     </GradientButton>
                 </div>
             </div>