From 9809cdfb26cd29f2fa9c460cb1a9f2fa0301aead Mon Sep 17 00:00:00 2001
From: bega <begmuhommet.jumayev@gmail.com>
Date: Thu, 17 Oct 2024 11:42:47 +0800
Subject: [PATCH] added some animations

---
 package-lock.json                      | 25 +++++++++++++++++++++++++
 package.json                           |  1 +
 src/components/HeroButtons.tsx         |  2 ++
 src/components/IconWrapper.tsx         | 11 +++++++++--
 src/sections/features/FeaturesItem.tsx |  7 +++++--
 src/sections/hero/HeroContent.tsx      | 16 ++++++++++++++++
 src/sections/hero/HeroImage.tsx        | 11 +++++++++--
 src/sections/hero/HeroSection.tsx      | 10 ++--------
 src/sections/problems/ProblemsItem.tsx | 10 ++++++++--
 9 files changed, 77 insertions(+), 16 deletions(-)
 create mode 100644 src/sections/hero/HeroContent.tsx

diff --git a/package-lock.json b/package-lock.json
index 2f49832..f75aee0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,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",
@@ -2821,6 +2822,30 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.11.9",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.9.tgz",
+      "integrity": "sha512-XpdZseuCrZehdHGuW22zZt3SF5g6AHJHJi7JwQIigOznW4Jg1n0oGPMJQheMaKLC+0rp5gxUKMRYI6ytd3q4RQ==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
diff --git a/package.json b/package.json
index d09aa1a..9cab216 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/HeroButtons.tsx b/src/components/HeroButtons.tsx
index 0ce21e3..f2bfe5b 100644
--- a/src/components/HeroButtons.tsx
+++ b/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';
diff --git a/src/components/IconWrapper.tsx b/src/components/IconWrapper.tsx
index 8773d05..8d3bb76 100644
--- a/src/components/IconWrapper.tsx
+++ b/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>
   );
diff --git a/src/sections/features/FeaturesItem.tsx b/src/sections/features/FeaturesItem.tsx
index 83b3469..4239aa3 100644
--- a/src/sections/features/FeaturesItem.tsx
+++ b/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>
diff --git a/src/sections/hero/HeroContent.tsx b/src/sections/hero/HeroContent.tsx
new file mode 100644
index 0000000..9aa3c2c
--- /dev/null
+++ b/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;
diff --git a/src/sections/hero/HeroImage.tsx b/src/sections/hero/HeroImage.tsx
index c473875..1714194 100644
--- a/src/sections/hero/HeroImage.tsx
+++ b/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>
   );
 };
 
diff --git a/src/sections/hero/HeroSection.tsx b/src/sections/hero/HeroSection.tsx
index 0b359a7..feb3c5f 100644
--- a/src/sections/hero/HeroSection.tsx
+++ b/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>
 
diff --git a/src/sections/problems/ProblemsItem.tsx b/src/sections/problems/ProblemsItem.tsx
index 889627f..74f7ff0 100644
--- a/src/sections/problems/ProblemsItem.tsx
+++ b/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>