Fade animation via aos

darwinia-network · Jan 31, 2024 · 6f4cbf7 · 6f4cbf7
1 parent bca47f2
commit 6f4cbf7
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 11 deletions.
diff --git a/src/components/BuildingWithMsgport/MobileBuildingWithMsgport.tsx b/src/components/BuildingWithMsgport/MobileBuildingWithMsgport.tsx
@@ -7,11 +7,11 @@ export default function MobileBuildingWithMsgport() {
 
   return (
     <div className="flex flex-col gap-[1.875rem] lg:hidden">
-      <div className="flex flex-col">
+      <div className="flex flex-col" data-aos="fade-up">
         <span className="text-t16b text-app-black">{title.at(0)}</span>
         <h2 className="text-h2 text-app-main">{title.at(1)}</h2>
       </div>
-      <div className="flex flex-col gap-[1.875rem]">
+      <div className="flex flex-col gap-[1.875rem]" data-aos="fade-up">
         {menu.map((m) => (
           <MobileMenuItem
             key={m.title}
@@ -28,6 +28,7 @@ export default function MobileBuildingWithMsgport() {
         target="_blank"
         rel="noopener noreferrer"
         href={link}
+        data-aos="fade-up"
       >
         <span className="text-t16b text-app-black">Try It Now</span>
         <img alt="..." width={24} height={24} src="/images/right-arrow-black-background-round.svg" />

diff --git a/src/components/Features/Feature.tsx b/src/components/Features/Feature.tsx
@@ -10,7 +10,7 @@ export default function Feature({ icon, title, description }: Props) {
   const { isDesktopWidth, isDesktopHeight } = useApp();
 
   return (
-    <div className="w-full lg:w-[500px] flex flex-col gap-5">
+    <div className="w-full lg:w-[500px] flex flex-col gap-5" data-aos={isDesktopWidth ? "fade-left" : "fade-up"}>
       <div className="flex items-center justify-center w-[90px] h-[60px] lg:w-[180px] lg:h-[120px] bg-black rounded-[10px]">
         <img className="w-10 h-10 lg:w-20 lg:h-20" alt="..." src={icon} />
       </div>

diff --git a/src/components/PoweringYourDapps.tsx b/src/components/PoweringYourDapps.tsx
@@ -4,7 +4,7 @@ export default function PoweringYourDapps() {
   const { isDesktopWidth, isDesktopHeight } = useApp();
 
   return (
-    <div className={`flex flex-col`}>
+    <div className="flex flex-col" data-aos="fade-up">
       <span
         className={`font-medium tracking-[1px] lg:font-normal text-black ${
           isDesktopWidth ? (isDesktopHeight ? "text-6xl" : "text-[3.125rem]") : "text-2xl"

diff --git a/src/components/Resources2/Card.tsx b/src/components/Resources2/Card.tsx
@@ -21,6 +21,7 @@ export default function Card({ icon, title, description, detail }: Props) {
       className={`bg-app-inner-white rounded-[10px] flex flex-col gap-10 h-fit w-full lg:w-[345px] ${
         isDesktopWidth ? (isDesktopHeight ? "p-[60px]" : "p-[40px]") : "p-5"
       }`}
+      data-aos="fade-up"
     >
       <img alt="" src={icon} className="w-[70px] h-[70px]" />
       <div className="flex flex-col gap-medium">
@@ -40,4 +41,4 @@ export default function Card({ icon, title, description, detail }: Props) {
       </a>
     </div>
   );
-}
+}
diff --git a/src/components/Resources2/index.tsx b/src/components/Resources2/index.tsx
@@ -33,7 +33,7 @@ const resources: { icon: string; title: string; description: string; detail: { l
 export default function Resources2() {
   return (
     <div className="flex flex-col gap-10 lg:gap-[34px]">
-      <h2 className="text-h2 text-black lg:text-[3.125rem] lg:font-bold lg:tracking-[0.125rem] lg:leading-normal">
+      <h2 className="text-h2 text-black lg:text-[3.125rem] lg:font-bold lg:tracking-[0.125rem] lg:leading-normal" data-aos="fade-up">
         Resources
       </h2>
       <div className="flex flex-col gap-10 lg:flex-row lg:gap-[88px]">

diff --git a/src/components/UseCase/Item.tsx b/src/components/UseCase/Item.tsx
@@ -15,7 +15,7 @@ export default function Item({ title, code, link, description }: Props) {
   const { isDesktopWidth, isDesktopHeight } = useApp();
 
   return (
-    <div className="flex flex-col gap-5 lg:gap-[1.875rem]">
+    <div className="flex flex-col gap-5 lg:gap-[1.875rem]" data-aos="fade-up">
       <div className="flex flex-col gap-5 lg:flex-row lg:justify-between lg:items-center">
         <h3 className={`text-app-white ${isDesktopWidth ? (isDesktopHeight ? "text-h1" : "text-h2") : "text-h2"}`}>
           {title}

diff --git a/src/pages/Home2/sections/HowItWorks.tsx b/src/pages/Home2/sections/HowItWorks.tsx
@@ -9,7 +9,7 @@ export function MobileHowItWorks() {
       >
         <div className="flex flex-col gap-[1.875rem] w-screen px-[1.25rem]" style={{ transform: "rotate(-10deg)" }}>
           <div className="flex items-center flex-nowrap text-h2">
-            <span className="text-app-white">How It</span>
+            <span className="text-app-white">How It&nbsp;</span>
             <span className="text-app-main">Works</span>
           </div>
           <div className="relative">
@@ -78,10 +78,10 @@ export function DesktopHowItWorks() {
         <div className="flex items-center" style={{ transform: "rotate(20deg)" }}>
           <div className={`flex flex-col ${isDesktopHeight ? "gap-[3.75rem]" : "gap-[3.125rem]"}`}>
             <div
-              className={`flex ${isDesktopHeight ? "text-[4.375rem] flex-col" : "items-center gap-4 text-[3.125rem]"}`}
+              className={`flex ${isDesktopHeight ? "text-[4.375rem] flex-col" : "items-center text-[3.125rem]"}`}
               style={{ transform: "translate(-9rem, 2rem)" }}
             >
-              <span className="font-bold tracking-[0.125rem] text-app-white whitespace-nowrap">How It</span>
+              <span className="font-bold tracking-[0.125rem] text-app-white whitespace-nowrap">How It&nbsp;</span>
               <span className="font-bold tracking-[0.125rem] text-app-main">Works</span>
             </div>
             <div

diff --git a/src/pages/Home2/sections/UseCase.tsx b/src/pages/Home2/sections/UseCase.tsx
@@ -4,7 +4,7 @@ import useApp from "../../../hooks/useApp";
 export function MobileUseCase() {
   return (
     <div className="bg-app-black px-[1.25rem] py-[6.25rem] flex flex-col gap-[3.75rem]">
-      <div className="flex flex-col text-h2">
+      <div className="flex flex-col text-h2" data-aos="fade-up">
         <span className="whitespace-nowrap text-app-white">Enabling Diverse</span>
         <span className="whitespace-nowrap text-app-main">Cross-Chain</span>
         <span className="whitespace-nowrap text-app-main">Interactions</span>