99%

Levironexe · Nov 5, 2024 · a4fce88 · a4fce88
1 parent 42f8670
commit a4fce88
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -345,4 +345,23 @@ background: linear-gradient(45deg,#9333ea, #e70606);
   font-weight: bold;
   color: #494949;
 }
+
+@keyframes appear {
+  from {
+    opacity: 0;
+    scale:0.5;
+    transform: translateX(200px);
+  }
+  to {
+    opacity: 1;
+    scale:1;
+    transform: translateX(0px);
+  }
+
+}
+.animation-block {
+  animation: appear linear;
+  animation-timeline: view();
+  animation-range: entry 0% cover 35%;
+}
 /*end*/
diff --git a/components/section/meet-the-team.tsx b/components/section/meet-the-team.tsx
@@ -4,8 +4,8 @@ const MeetTheTeam = () => {
   return (
     <main className='bg-black min-h-[70vh] text-white'>
     <div className='text-center py-14'>
-        <h2 className='white font-bold text-4xl'>Meet the <span className='text-primary-red'>Team</span></h2>
-        <p className='text-2xl'>We're always willing to listen to everyone.</p>
+        <h2 className='white font-bold text-4xl'>Meet the <span className='text-primary-red underline'>Team</span></h2>
+        <p className='text-xl text-subtitle__gray'>We're always willing to listen to everyone.</p>
     </div>
     <div className='max-w-7xl py-20 flex justify-between mx-auto'>
         <div className='flex justify-center text-center gap-12 items-start'>

diff --git a/components/section/on-scroll-tutorial.tsx b/components/section/on-scroll-tutorial.tsx
@@ -33,7 +33,7 @@ const OnScrollSection = () => {
   return (
     <main>
     <div className=' text-center bg-gradient-to-t from-white to-black pt-[300px]'>
-      <h2 className='text-4xl font-semibold mb-4'>Empowering <span className='text-primary-red'>Smart Contract</span> with Cutting-edge Features</h2>
+      <h2 className='text-4xl font-semibold mb-4'>Empowering <span className='text-primary-red underline'>Smart Contract</span> with Cutting-edge Features</h2>
       <p className='text-subtitle__gray max-w-2xl mx-auto'>Our advanced scanning platform integrates multiple
          security frameworks to detect vulnerabilities and common attack vectors in Smart Contracts,
           safeguarding projects across the entire web3 ecosystem.</p>
@@ -72,7 +72,7 @@ const OnScrollSection = () => {
         {/* Non-sticky text sections */}
         <div className='absolute top-0 right-0 w-1/4 z-50'>
           <div className='min-h-screen flex items-center'>
-            <div className='relative'>
+            <div className='relative animation-block'>
               <h2 className='font-bold text-3xl mb-4'>
                 What is smart contracts?
               </h2>
@@ -83,7 +83,7 @@ const OnScrollSection = () => {
             </div>
           </div>
           <div className='min-h-screen flex items-center'>
-            <div>
+            <div className='animation-block'>
             <h2 className='font-bold text-3xl mb-4'>
             Secure and Reliable Blockchain Solution
             </h2>
@@ -93,7 +93,7 @@ const OnScrollSection = () => {
             </div>
           </div>  
           <div className='min-h-screen flex items-center'>
-            <div>
+            <div className='animation-block'>
               <h2 className='font-bold text-3xl mb-4'>
                 BlockScan modern analyzing tool
               </h2>
@@ -106,7 +106,7 @@ const OnScrollSection = () => {
           </div>
 
           <div className='min-h-screen flex items-center'>
-            <div>
+            <div className='animation-block'>
               <h2 className='font-bold text-3xl mb-4'>
                 Meet Our Contributors
               </h2>