fix: update styles about page

Author: Lisofffa

website/public/themes/dark/icons/home/bg-tablet.svg

@@ -44,6 +44,11 @@
   height: auto;
   border-radius: .625rem;
   transition: none;
+
+  &:hover{
+    transform: none!important;
+    cursor: default;
+  }
 }
 
 .content {

website/public/themes/light/icons/home/bg-tablet.svg

@@ -95,6 +95,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  opacity: 0;
 }
 
 .featureImage {
@@ -133,6 +134,7 @@
   transition: all 0.2s ease;
   text-decoration: none;
   color: inherit;
+  opacity: 0;
 
   &:hover {
     background: radial-gradient(

website/src/components/HomePage/ExamplesFirstSection.module.scss

@@ -21,6 +21,10 @@
   transform: scale(1.01);
   z-index: 1;
   pointer-events: none;
+
+  &--mobile{
+    display: none;
+  }
 }
 
 .titleBlock {
@@ -67,7 +71,17 @@
   }
 
   .img {
-    display: none;
+    &--desk{
+      display: none;
+    }
+
+    &--mobile{
+      display: block;
+      width: auto;
+      height: auto;
+      top: -15rem;
+      object-fit: contain;
+    }
   }
 
   .buttons {
@@ -80,6 +94,12 @@
   }
 }
 
+@media (max-width: 849px)  {
+   .img--mobile{
+      display: none;
+  }
+}
+
 @media (max-width: 719px) {
   .wrapper {
     padding: 0 1.25rem;

website/src/components/HomePage/FeaturesSection.module.scss

@@ -99,12 +99,19 @@ const HeroSection = () => {
       </div>
       <SupportedBySection />
       <ThemeImage
-        className={cn(styles.img, styles['img-left'])}
+        className={cn(styles.img, styles['img--desk'])}
         width={1920}
         height={761}
         alt='arrow'
         src='icons/home/bg-title.svg'
       />
+       <ThemeImage
+        className={cn(styles.img,styles['img--mobile'])}
+        width={1185}
+        height={761}
+        alt='arrow'
+        src='icons/home/bg-tablet.svg'
+      />
     </section>
   );
 };

website/src/components/HomePage/HeroSection.module.scss

@@ -53,11 +53,24 @@
   justify-content: center;
   margin-top: -3.75rem;
   transform: translateX(0.625rem);
+  position: relative;
+  transition: transform 0.1s ease-out;
+  will-change: transform;
+
+  img:hover{
+    transform: none!important;
+  }
 }
 
 .supportedBlockIcon {
   margin: 0 auto;
   max-width: 75rem;
+  transition: transform 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
+  
+  &:hover {
+    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.2));
+  }
 }
 
 .problemWrapper {

website/src/components/HomePage/HeroSection.tsx

@@ -1,10 +1,116 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
 import styles from './About.module.scss';
 import { Layout } from '@/components/Layout';
 import { brand, mission, problem, title } from '@/constants/constantsTextAbout';
 import { Button } from '@/components/Button';
 import { ThemeImage } from '@/components/ThemeImage';
+import gsap from 'gsap';
 
 function About() {
+  const rotatingImageRef = useRef<HTMLDivElement>(null);
+  const mousePosition = useRef({ x: 0, y: 0 });
+  const animationRef = useRef<gsap.core.Tween | null>(null);
+  const floatAnimationRef = useRef<gsap.core.Tween | null>(null);
+
+  useEffect(() => {
+    if (!rotatingImageRef.current) return;
+
+    const initComplexAnimation = () => {
+      gsap.set(rotatingImageRef.current, {
+        transformPerspective: 1000,
+        transformOrigin: 'center center'
+      });
+
+      const appearTl = gsap.timeline();
+      appearTl.from(rotatingImageRef.current, {
+        scale: 0.7,
+        opacity: 0,
+        rotationY: 180,
+        duration: 1.8,
+        ease: 'elastic.out(1, 0.6)'
+      });
+
+      floatAnimationRef.current = gsap.to(rotatingImageRef.current, {
+        y: '-=15',
+        duration: 3,
+        repeat: -1,
+        yoyo: true,
+        ease: 'sine.inOut'
+      });
+
+      gsap.to(rotatingImageRef.current, {
+        rotationY: 360,
+        duration: 25,
+        repeat: -1,
+        ease: 'none'
+      });
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!rotatingImageRef.current) return;
+
+      mousePosition.current = {
+        x: (e.clientX / window.innerWidth - 0.5) * 2,
+        y: (e.clientY / window.innerHeight - 0.5) * 2
+      };
+
+      if (animationRef.current) animationRef.current.kill();
+
+      animationRef.current = gsap.to(rotatingImageRef.current, {
+        rotationY: mousePosition.current.x * 15,
+        rotationX: -mousePosition.current.y * 10,
+        x: mousePosition.current.x * 20,
+        y: mousePosition.current.y * 20,
+        duration: 1.5,
+        ease: 'power2.out'
+      });
+    };
+
+    const handleMouseEnter = () => {
+      gsap.to(rotatingImageRef.current, {
+        scale: 1.1,
+        duration: 0.7,
+        ease: 'back.out(2)',
+        overwrite: true
+      });
+      
+      gsap.to(rotatingImageRef.current, {
+        '--glow-opacity': 0.3,
+        '--glow-spread': '20px',
+        duration: 0.5
+      });
+    };
+
+    const handleMouseLeave = () => {
+      gsap.to(rotatingImageRef.current, {
+        scale: 1,
+        rotationY: 0,
+        rotationX: 0,
+        x: 0,
+        y: 0,
+        '--glow-opacity': 0.1,
+        '--glow-spread': '10px',
+        duration: 1.5,
+        ease: 'elastic.out(1, 0.5)'
+      });
+    };
+
+    initComplexAnimation();
+    window.addEventListener('mousemove', handleMouseMove);
+    rotatingImageRef.current.addEventListener('mouseenter', handleMouseEnter);
+    rotatingImageRef.current.addEventListener('mouseleave', handleMouseLeave);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      rotatingImageRef.current?.removeEventListener('mouseenter', handleMouseEnter);
+      rotatingImageRef.current?.removeEventListener('mouseleave', handleMouseLeave);
+      animationRef.current?.kill();
+      floatAnimationRef.current?.kill();
+    };
+  }, []);
+
   return (
     <Layout
       title='Empowering Web Communities with Dapplets and Mutable Web: Solving Centralization Issues.'
@@ -30,7 +136,15 @@ function About() {
               />
             </div>
           </div>
-          <div className={styles.iconBlock}>
+          <div 
+            className={styles.iconBlock} 
+            ref={rotatingImageRef}
+            style={{
+              '--glow-color': 'var(--accent-color)',
+              '--glow-opacity': '0.1',
+              '--glow-spread': '10px'
+            } as React.CSSProperties}
+          >
             <ThemeImage
               className={styles.supportedBlockIcon}
               width={439}
@@ -105,4 +219,4 @@ function About() {
   );
 }
 
-export default About;
+export default About;