Add AOS and change to browser router (#866)

* Add component animation * Change to browser router * Remove analytics * Update web meta
helix-bridge · Nov 5, 2024 · 3512400 · 3512400
1 parent c86cc39
commit 3512400
Show file tree

Hide file tree

Showing 17 changed files with 120 additions and 49 deletions.
diff --git a/apps/helixbox-home/index.html b/apps/helixbox-home/index.html
@@ -1,46 +1,24 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-04HN5C65JE"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-
-      gtag("config", "G-04HN5C65JE");
-    </script>
-
-    <!-- Amplitude -->
-    <script src="https://cdn.amplitude.com/script/52134993095870a48f834c2cea861e4f.js"></script>
-    <script>
-      window.amplitude.add(window.sessionReplay.plugin({ sampleRate: 1 }));
-      window.amplitude.init("52134993095870a48f834c2cea861e4f", {
-        fetchRemoteConfig: true,
-        autocapture: true,
-      });
-    </script>
-
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Helixbox</title>
-    <meta name="description" content="Helixbox is focusing on becoming an efficient multi-chain liquidity provider, offering users a superior experience in multi-chain asset transfer and exchange." />
+    <meta name="description" content="A multi-chain DeFi application suite built on EVM infrastructure" />
 
     <meta name="format-detection" content="telephone=no" />
     <link rel="canonical" href="https://helix.box" />
 
     <!-- Open Graph -->
-    <meta property="og:title" content="Helixbox Home" />
+    <meta property="og:title" content="Helixbox" />
     <meta property="og:url" content="https://helix.box/" />
     <meta property="og:image" content="https://helix.box/preview.png" />
-    <meta property="og:image:alt" content="Helixbox Home" />
-    <meta property="og:description" content="Helixbox is focusing on becoming an efficient multi-chain liquidity provider, offering users a superior experience in multi-chain asset transfer and exchange." />
+    <meta property="og:image:alt" content="Helixbox" />
+    <meta property="og:description" content="A multi-chain DeFi application suite built on EVM infrastructure" />
 
-    <meta property="twitter:title" content="Helixbox Home" />
+    <meta property="twitter:title" content="Helixbox" />
     <meta property="twitter:image" content="https://helix.box/preview.png" />
-    <meta property="twitter:image:alt" content="Helixbox Home" />
+    <meta property="twitter:image:alt" content="Helixbox" />
   </head>
   <body
     style="background-color: #000a67; color: white; line-height: 1.5rem; font-size: 1rem; font-weight: 400"

diff --git a/apps/helixbox-home/package.json b/apps/helixbox-home/package.json
@@ -16,6 +16,7 @@
     "@floating-ui/react": "^0.26.14",
     "@sentry/react": "^8.30.0",
     "@sentry/vite-plugin": "^2.22.4",
+    "aos": "^2.3.4",
     "localforage": "^1.10.0",
     "match-sorter": "^7.0.0",
     "react": "^18.2.0",
@@ -27,6 +28,7 @@
   },
   "devDependencies": {
     "@graphql-typed-document-node/core": "^3.2.0",
+    "@types/aos": "^3.0.7",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/react-transition-group": "^4.4.10",

diff --git a/apps/helixbox-home/src/aos.ts b/apps/helixbox-home/src/aos.ts
@@ -0,0 +1,11 @@
+import AOS from "aos";
+import "aos/dist/aos.css";
+
+AOS.init({
+  duration: 700,
+  easing: "ease-out-quad",
+  once: false,
+  startEvent: "load",
+  offset: 150,
+  anchorPlacement: "top-bottom",
+});
diff --git a/apps/helixbox-home/src/components/homepage-footer.tsx b/apps/helixbox-home/src/components/homepage-footer.tsx
@@ -5,14 +5,17 @@ import { products } from "./homepage-products/data";
 export default function HomepageFooter() {
   return (
     <>
-      <div className="mt-[90px] flex flex-col items-center gap-5 p-5 lg:hidden">
+      <div className="mt-[90px] flex flex-col items-center gap-5 p-5 lg:hidden" data-aos="fade-up">
         <HomepageSocialMedia className="gap-medium" />
         <About />
         <Copyright />
       </div>
 
       <div className="hidden justify-between p-[60px] lg:flex">
-        <div className="flex flex-shrink-[1.4] flex-grow-[1.4] basis-0 flex-col justify-between">
+        <div
+          className="flex flex-shrink-[1.4] flex-grow-[1.4] basis-0 flex-col justify-between"
+          data-aos="fade-up-right"
+        >
           <div className="flex flex-col gap-5">
             <img src="/images/logo.svg" alt="Helixbox logo" width={207.26} height={39} />
             <About />
@@ -29,6 +32,7 @@ export default function HomepageFooter() {
             link: product.link,
           }))}
           className="flex-1"
+          dataAos="fade-up"
         />
         <Column
           title="Resources"
@@ -37,6 +41,7 @@ export default function HomepageFooter() {
             { label: "Careers", link: "https://itering-io.breezy.hr/" },
           ]}
           className="flex-shrink-[0.6] flex-grow-[0.6] basis-0"
+          dataAos="fade-up-left"
         />
       </div>
     </>
@@ -62,13 +67,15 @@ function Column({
   title,
   items,
   className,
+  dataAos,
 }: {
   title: string;
   items: { label: string; link: string }[];
   className?: string;
+  dataAos?: string;
 }) {
   return (
-    <div className={`flex flex-col gap-[60px] ${className}`}>
+    <div className={`flex flex-col gap-[60px] ${className}`} data-aos={dataAos}>
       <h5 className="text-[30px] font-semibold leading-[39px] text-[#F6F6F7]">{title}</h5>
       {items.map((item) =>
         item.link.startsWith("http") ? (

diff --git a/apps/helixbox-home/src/components/homepage-header-nav.tsx b/apps/helixbox-home/src/components/homepage-header-nav.tsx
@@ -17,31 +17,39 @@ type Props =
       label: string;
       items: { label: string; link: string }[];
       link?: never;
+      dataAos?: string;
+      dataAosDelay?: number;
       pcStyle?: boolean;
       onClick?: () => void;
     }
   | {
       label: string;
       link: string;
       items?: never;
+      dataAos?: string;
+      dataAosDelay?: number;
       pcStyle?: boolean;
       onClick?: () => void;
     };
 
-export default function HomepageHeaderNav({ label, items, link, pcStyle, onClick }: Props) {
+export default function HomepageHeaderNav({ label, items, link, pcStyle, dataAos, dataAosDelay, onClick }: Props) {
   return link !== undefined ? (
     link.startsWith("http") ? (
       <a
         rel="noopener noreferrer"
         target="_blank"
         href={link}
+        data-aos={dataAos}
+        data-aos-delay={dataAosDelay}
         className="w-fit text-xl font-bold text-white underline-offset-4 transition-colors hover:text-white hover:underline lg:text-lg lg:font-normal lg:leading-[23.4px] lg:tracking-[1px] lg:text-white/50"
       >
         {label}
       </a>
     ) : (
       <Link
         to={link}
+        data-aos={dataAos}
+        data-aos-delay={dataAosDelay}
         className="w-fit text-xl font-bold text-white underline-offset-4 transition-colors hover:text-white hover:underline lg:text-lg lg:font-normal lg:leading-[23.4px] lg:tracking-[1px] lg:text-white/50"
         onClick={onClick}
       >
@@ -51,25 +59,34 @@ export default function HomepageHeaderNav({ label, items, link, pcStyle, onClick
   ) : pcStyle ? (
     <PcDropdown label={label} items={items} />
   ) : (
-    <MobileDropdown label={label} items={items} onClick={onClick} />
+    <MobileDropdown label={label} items={items} onClick={onClick} dataAos={dataAos} dataAosDelay={dataAosDelay} />
   );
 }
 
 function MobileDropdown({
   label,
   items,
   onClick,
+  dataAos,
+  dataAosDelay,
 }: {
   label: string;
   items: { label: string; link: string }[];
   onClick?: () => void;
+  dataAos?: string;
+  dataAosDelay?: number;
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <div>
-      <button onClick={() => setIsOpen((prev) => !prev)} className="inline-flex w-fit items-center gap-2">
+      <button
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="inline-flex w-fit items-center gap-2"
+        data-aos={dataAos}
+        data-aos-delay={dataAosDelay}
+      >
         <span className={`text-white transition-all ${isOpen ? "text-sm font-normal" : "text-xl font-bold"}`}>
           {label}
         </span>

diff --git a/apps/helixbox-home/src/components/homepage-mobile-menu.tsx b/apps/helixbox-home/src/components/homepage-mobile-menu.tsx
@@ -22,13 +22,28 @@ export default function HomepageMobileMenu({ data }: Props) {
       </button>
       <Drawer isOpen={isOpen} onClose={setIsOpen}>
         <div className="flex w-64 flex-col gap-20">
-          <Link to="/" className="w-fit text-xl font-bold text-white" onClick={() => setIsOpen(false)}>
+          <Link
+            to="/"
+            className="w-fit text-xl font-bold text-white"
+            onClick={() => setIsOpen(false)}
+            data-aos="fade-right"
+          >
             Home
           </Link>
-          {data.map((item) => (
-            <HomepageHeaderNav key={item.label} {...item} onClick={() => setIsOpen(false)} />
+          {data.map((item, index) => (
+            <HomepageHeaderNav
+              key={item.label}
+              dataAos="fade-right"
+              dataAosDelay={index * 100 + 100}
+              {...item}
+              onClick={() => setIsOpen(false)}
+            />
           ))}
-          <HomepageSocialMedia className="gap-10 self-start" />
+          <HomepageSocialMedia
+            className="gap-10 self-start"
+            dataAos="fade-right"
+            dataAosDelay={data.length * 100 + 100}
+          />
         </div>
       </Drawer>
     </>

diff --git a/apps/helixbox-home/src/components/homepage-one-stop-entry.tsx b/apps/helixbox-home/src/components/homepage-one-stop-entry.tsx
@@ -1,6 +1,6 @@
 export default function HomepageOneStopEntry({ className }: { className?: string }) {
   return (
-    <div className={`justify-center ${className}`}>
+    <div className={`justify-center ${className}`} data-aos="fade-up">
       <span className="text-center text-sm font-normal leading-[18.2px] text-white lg:text-[30px] lg:leading-[37.5px]">
         One-Stop Entry To DeFi
       </span>

diff --git a/apps/helixbox-home/src/components/homepage-products/mobile.tsx b/apps/helixbox-home/src/components/homepage-products/mobile.tsx
@@ -9,7 +9,7 @@ interface Props {
 
 export default function Mobile({ title, description, link, video }: Props) {
   return (
-    <div className="flex flex-col items-center gap-5">
+    <div className="flex flex-col items-center gap-5" data-aos="fade-up">
       <video src={video} autoPlay muted loop playsInline />
       <h5 className="font-[KronaOne] text-[30px] font-normal leading-[37.5px] tracking-[1px] text-white">{title}</h5>
       <p className="p-5 text-center text-[16px] font-normal leading-[20.8px] text-white/80">{description}</p>

diff --git a/apps/helixbox-home/src/components/homepage-projects/index.tsx b/apps/helixbox-home/src/components/homepage-projects/index.tsx
@@ -57,7 +57,7 @@ const pData2: Project[] = [
 
 export default function HomepageProjects() {
   return (
-    <div className="mt-[90px] flex w-full flex-col gap-5 lg:gap-10 lg:py-[100px]">
+    <div className="mt-[90px] flex w-full flex-col gap-5 lg:gap-10 lg:py-[100px]" data-aos="fade-up">
       <AutoInfiniteScroll items={pData1} />
       <AutoInfiniteScroll initOffset={96} items={pData2} />
     </div>

diff --git a/apps/helixbox-home/src/components/homepage-slogan.tsx b/apps/helixbox-home/src/components/homepage-slogan.tsx
@@ -1,6 +1,6 @@
 export default function HomepageSlogan() {
   return (
-    <div className="flex w-full flex-col items-center font-[KronaOne] uppercase">
+    <div className="flex w-full flex-col items-center font-[KronaOne] uppercase" data-aos="fade">
       <div className="relative h-[1lh] w-full overflow-hidden text-[32px] font-normal leading-[52.5px] tracking-[2px] text-white transition-[top] lg:text-[130px] lg:leading-[162.5px] lg:tracking-[3px]">
         <AnimText>Liquidity</AnimText>
         <AnimText style={{ animationDelay: "-3500ms" }}>Cross-Chain</AnimText>

diff --git a/apps/helixbox-home/src/components/homepage-social-media.tsx b/apps/helixbox-home/src/components/homepage-social-media.tsx
@@ -11,9 +11,17 @@ const data: { label: string; link: string; icon: string; width: number; height:
   { label: "Email", link: "mailto:[email protected]", icon: "images/social/email.svg", width: 19, height: 14 },
 ];
 
-export default function HomepageSocialMedia({ className }: { className?: string }) {
+export default function HomepageSocialMedia({
+  className,
+  dataAos,
+  dataAosDelay,
+}: {
+  className?: string;
+  dataAos?: string;
+  dataAosDelay?: number;
+}) {
   return (
-    <div className={`flex items-center ${className}`}>
+    <div className={`flex items-center ${className}`} data-aos={dataAos} data-aos-delay={dataAosDelay}>
       {data.map((item) => (
         <a
           key={item.label}

diff --git a/apps/helixbox-home/src/components/solverpage-feature.tsx b/apps/helixbox-home/src/components/solverpage-feature.tsx
@@ -2,13 +2,17 @@ interface Props {
   content: string;
   img: string;
   color: string;
+  dataAos?: string;
+  dataAosDelay?: number;
 }
 
-export default function SolverpageFeature({ content, img, color }: Props) {
+export default function SolverpageFeature({ content, img, color, dataAos, dataAosDelay }: Props) {
   return (
     <div
       className="relative w-full overflow-hidden rounded-[40px] bg-[#010744] p-10 pb-[260px] lg:w-[374px]"
       style={{ boxShadow: "0px 4px 44px 0px #00000040" }}
+      data-aos={dataAos}
+      data-aos-delay={dataAosDelay}
     >
       <p className="text-[30px] font-semibold leading-[39px] text-white">{content}</p>
 

diff --git a/apps/helixbox-home/src/components/solverpage-features/index.tsx b/apps/helixbox-home/src/components/solverpage-features/index.tsx
@@ -25,7 +25,7 @@ export default function SolverpageFeatures() {
   return (
     <div className="flex flex-col items-center gap-[90px] px-5 lg:my-[100px] lg:flex-row lg:items-stretch lg:justify-center lg:gap-[40px] lg:px-[60px]">
       {features.map((feature, index) => (
-        <SolverpageFeature key={index} {...feature} />
+        <SolverpageFeature key={index} {...feature} dataAos="fade-up" dataAosDelay={index * 100} />
       ))}
     </div>
   );

diff --git a/apps/helixbox-home/src/main.tsx b/apps/helixbox-home/src/main.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
+import "./aos";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router.tsx";
 import PWABadge from "./components/pwa-badge.tsx";

diff --git a/apps/helixbox-home/src/router.tsx b/apps/helixbox-home/src/router.tsx
@@ -1,11 +1,11 @@
-import { createHashRouter } from "react-router-dom";
+import { createBrowserRouter } from "react-router-dom";
 import NotFound from "./routes/not-found";
 import Error from "./routes/error";
 import Home from "./routes/home";
 import Solver from "./routes/solver";
 import Layout from "./layout";
 
-export const router = createHashRouter([
+export const router = createBrowserRouter([
   {
     path: "/",
     element: <Layout />,

diff --git a/apps/helixbox-home/src/routes/home.tsx b/apps/helixbox-home/src/routes/home.tsx
@@ -7,7 +7,7 @@ import SloganContainer from "../components/slogan-container";
 export default function Home() {
   return (
     <main className="mt-[50px] lg:mt-[60px]">
-      <SloganContainer className="mb-10 mt-[90px] py-[50px] lg:mb-48 lg:mt-[140px] lg:py-[60px]">
+      <SloganContainer className="z-10 mb-10 mt-[90px] py-[50px] lg:mb-48 lg:mt-[140px] lg:py-[60px]">
         <HomepageSlogan />
         <HomepageOneStopEntry className="flex lg:hidden" />
       </SloganContainer>