added some animations

package.json

@@ -23,6 +23,7 @@
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "embla-carousel-react": "8.3.0",
+    "framer-motion": "11.11.9",
     "lucide-react": "0.452.0",
     "next": "14.2.15",
     "next-themes": "0.3.0",

src/components/HeroButtons.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { hero } from '@/data/hero';
 import { cn } from '@/lib/utils';
 import { LinkExternal02 } from '@untitled-ui/icons-react';

src/components/IconWrapper.tsx

@@ -1,14 +1,21 @@
+import { cn } from '@/lib/utils';
 import { FC, ReactNode } from 'react';
 
 type IProps = {
   icon: ReactNode;
+  className?: string;
 };
 
 const IconWrapper: FC<IProps> = (props) => {
-  const { icon } = props;
+  const { icon, className } = props;
 
   return (
-    <span className="rounded-lg border-[1px] border-gray-200 flex items-center justify-center w-[48px] h-[48px] drop-shadow-sm">
+    <span
+      className={cn(
+        'rounded-lg border-[1px] border-gray-200 flex items-center justify-center w-[48px] h-[48px] drop-shadow-sm',
+        className
+      )}
+    >
       {icon}
     </span>
   );

src/sections/features/FeaturesItem.tsx

@@ -11,8 +11,11 @@ const FeaturesItem: FC<TProps> = (props) => {
   const { title, description, icon } = props;
 
   return (
-    <div className="flex flex-col items-center gap-3 md:gap-4 prose">
-      <IconWrapper icon={icon} />
+    <div className="flex flex-col items-center gap-3 md:gap-4 prose group">
+      <IconWrapper
+        icon={icon}
+        className="group-hover:rotate-6 transition-transform duration-500"
+      />
       <h3 className="text-center leading-none text-xl">{title}</h3>
       <p className="text-center text-base font-light">{description}</p>
     </div>

src/sections/hero/HeroContent.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { hero } from '@/data/hero';
+
+const HeroContent = () => {
+  return (
+    <div className="prose md:prose-md mb-6 md:mb-10 flex flex-col items-center justify-center">
+      <h1 className="text-center max-w-[856px]">{hero.title}</h1>
+      <p className="text-center max-w-[564px] text-base md:text-xl text-gray-600 font-light">
+        {hero.description}
+      </p>
+    </div>
+  );
+};
+
+export default HeroContent;

src/sections/hero/HeroImage.tsx

@@ -3,13 +3,20 @@
 import heroMobileImage from '@/assets/hero-mobile.webp';
 import heroImage from '@/assets/hero.webp';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { motion } from 'framer-motion';
 import Image from 'next/image';
 
 const HeroImage = () => {
   const isDesktop = useMediaQuery('(min-width: 768px)');
 
   return (
-    <div className="w-full max-w-[1200px] mx-auto relative aspect-[5/2]">
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      viewport={{ once: true }}
+      className="w-full max-w-[1200px] mx-auto relative aspect-[5/2]"
+    >
       <Image
         src={isDesktop ? heroImage : heroMobileImage}
         alt="lowops-portal-screen"
@@ -21,7 +28,7 @@ const HeroImage = () => {
         placeholder="blur"
         blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg=="
       />
-    </div>
+    </motion.div>
   );
 };
 

src/sections/hero/HeroSection.tsx

@@ -1,7 +1,7 @@
 import HeroButtons from '@/components/HeroButtons';
-import { hero } from '@/data/hero';
 import { cn } from '@/lib/utils';
 import { FC } from 'react';
+import HeroContent from './HeroContent';
 import HeroImage from './HeroImage';
 
 const HeroSection: FC = () => {
@@ -14,13 +14,7 @@ const HeroSection: FC = () => {
       id="hero"
     >
       <div className="container flex flex-col items-center justify-center">
-        <div className="prose md:prose-md mb-6 md:mb-10 flex flex-col items-center justify-center">
-          <h1 className="text-center max-w-[856px]">{hero.title}</h1>
-          <p className="text-center max-w-[564px] text-base md:text-xl text-gray-600 font-light">
-            {hero.description}
-          </p>
-        </div>
-
+        <HeroContent />
         <HeroButtons className="mb-10 md:mb-20" />
       </div>
 

src/sections/problems/ProblemsItem.tsx

@@ -4,6 +4,7 @@ import IconWrapper from '@/components/IconWrapper';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { cn } from '@/lib/utils';
 import { CheckCircle } from '@untitled-ui/icons-react';
+import { motion } from 'framer-motion';
 import Image, { StaticImageData } from 'next/image';
 import { FC, ReactNode } from 'react';
 
@@ -49,7 +50,12 @@ const ProblemsItem: FC<TProps> = (props) => {
       </div>
       {isDesktop && (
         <div className="hidden md:block flex-1 relative">
-          <div className={cn('absolute inset-0', isEven ? '-mr-60' : '-ml-60')}>
+          <motion.div
+            initial={{ opacity: 0, x: isEven ? 100 : -100 }}
+            transition={{ duration: 0.8 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            className={cn('absolute inset-0', isEven ? '-mr-60' : '-ml-60')}
+          >
             <Image
               src={imagePath}
               alt="lowops-portal"
@@ -64,7 +70,7 @@ const ProblemsItem: FC<TProps> = (props) => {
               placeholder="blur"
               blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg=="
             />
-          </div>
+          </motion.div>
         </div>
       )}
     </div>