update: init aos and implement animations

package.json

@@ -2,6 +2,7 @@
   "name": "oriyo_next",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",
@@ -15,6 +16,7 @@
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.8",
     "@reduxjs/toolkit": "^2.7.0",
+    "aos": "^2.3.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-autoplay": "^8.6.0",
@@ -35,11 +37,10 @@
     "@eslint/js": "^9.25.0",
     "@tailwindcss/postcss": "^4",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/aos": "^3.0.7",
     "@types/eslint": "^9.6.1",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/eslint-plugin-tailwindcss": "^3.17.0",
-    "@types/eslint__eslintrc": "^3.3.0",
-    "@types/eslint__js": "^9.14.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       '@reduxjs/toolkit':
         specifier: ^2.7.0
         version: 2.7.0(react-redux@9.2.0(@types/react@19.1.2)(react@19.1.0)(redux@5.0.1))(react@19.1.0)
+      aos:
+        specifier: ^2.3.4
+        version: 2.3.4
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -81,6 +84,9 @@ importers:
       '@trivago/prettier-plugin-sort-imports':
         specifier: ^5.2.2
         version: 5.2.2(prettier@3.5.3)
+      '@types/aos':
+        specifier: ^3.0.7
+        version: 3.0.7
       '@types/eslint':
         specifier: ^9.6.1
         version: 9.6.1
@@ -90,12 +96,6 @@ importers:
       '@types/eslint-plugin-tailwindcss':
         specifier: ^3.17.0
         version: 3.17.0
-      '@types/eslint__eslintrc':
-        specifier: ^3.3.0
-        version: 3.3.0
-      '@types/eslint__js':
-        specifier: ^9.14.0
-        version: 9.14.0
       '@types/node':
         specifier: ^20
         version: 20.17.30
@@ -932,6 +932,9 @@ packages:
   '@tybys/wasm-util@0.9.0':
     resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
 
+  '@types/aos@3.0.7':
+    resolution: {integrity: sha512-sEhyFqvKauUJZDbvAB3Pggynrq6g+2PS4XB3tmUr+mDL1gfDJnwslUC4QQ7/l8UD+LWpr3RxZVR/rHoZrLqZVg==}
+
   '@types/doctrine@0.0.9':
     resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
 
@@ -944,14 +947,6 @@ packages:
   '@types/eslint@9.6.1':
     resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
 
-  '@types/eslint__eslintrc@3.3.0':
-    resolution: {integrity: sha512-u9C5PHo8zhLBTEpWAV1YsP3ijj3GjM+4r2aGLbkT+vqtBubwgSI8KiRHXtC2QcxDGR0qM3Qapg7OtTB58JmoYQ==}
-    deprecated: This is a stub types definition. @eslint/eslintrc provides its own type definitions, so you do not need this installed.
-
-  '@types/eslint__js@9.14.0':
-    resolution: {integrity: sha512-s0jepCjOJWB/GKcuba4jISaVpBudw3ClXJ3fUK4tugChUMQsp6kSwuA8Dcx6wFd/JsJqcY8n4rEpa5RTHs5ypA==}
-    deprecated: This is a stub types definition. @eslint/js provides its own type definitions, so you do not need this installed.
-
   '@types/estree@1.0.7':
     resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
@@ -1119,6 +1114,9 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
+  aos@2.3.4:
+    resolution: {integrity: sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==}
+
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -1224,6 +1222,9 @@ packages:
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
+  classlist-polyfill@1.2.0:
+    resolution: {integrity: sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -1911,9 +1912,15 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
+  lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  lodash.throttle@4.1.1:
+    resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
+
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
@@ -3230,6 +3237,8 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/aos@3.0.7': {}
+
   '@types/doctrine@0.0.9': {}
 
   '@types/eslint-config-prettier@6.11.3': {}
@@ -3243,16 +3252,6 @@ snapshots:
       '@types/estree': 1.0.7
       '@types/json-schema': 7.0.15
 
-  '@types/eslint__eslintrc@3.3.0':
-    dependencies:
-      '@eslint/eslintrc': 3.3.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@types/eslint__js@9.14.0':
-    dependencies:
-      '@eslint/js': 9.25.0
-
   '@types/estree@1.0.7': {}
 
   '@types/json-schema@7.0.15': {}
@@ -3417,6 +3416,12 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
+  aos@2.3.4:
+    dependencies:
+      classlist-polyfill: 1.2.0
+      lodash.debounce: 4.0.8
+      lodash.throttle: 4.1.1
+
   argparse@2.0.1: {}
 
   aria-hidden@1.2.4:
@@ -3551,6 +3556,8 @@ snapshots:
     dependencies:
       clsx: 2.1.1
 
+  classlist-polyfill@1.2.0: {}
+
   client-only@0.0.1: {}
 
   clsx@2.1.1: {}
@@ -4379,8 +4386,12 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
+  lodash.debounce@4.0.8: {}
+
   lodash.merge@4.6.2: {}
 
+  lodash.throttle@4.1.1: {}
+
   lodash@4.17.21: {}
 
   loose-envify@1.4.0:

src/shared/assets/logo.tsx

@@ -1,10 +1,11 @@
 import { Fuel } from 'lucide-react';
+import Link from 'next/link';
 
 export const Logo = () => {
   return (
-    <div className='flex items-center gap-2'>
+    <Link className='flex items-center gap-2' href={'/'}>
       <Fuel className='h-6 w-6 text-red-600' />
       <span className='text-xl font-bold'>Ориё</span>
-    </div>
+    </Link>
   );
 };

src/shared/components/promotion-slider.tsx

@@ -86,6 +86,8 @@ export default function PromotionSlider() {
             <div
               key={promo.id}
               className='w-full flex-none p-2 sm:w-1/2 lg:w-1/3'
+              data-aos='zoom-in-right'
+              data-aos-duration='700'
             >
               <Card className='h-full overflow-hidden transition-shadow hover:shadow-lg'>
                 <div className='relative h-48'>

src/shared/providers/aos-provider.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import AOS from 'aos';
+import 'aos/dist/aos.css';
+import { useEffect } from 'react';
+
+interface AosInitProps {
+  children: React.ReactNode;
+}
+
+export const AosProvider = ({ children }: AosInitProps) => {
+  useEffect(() => {
+    AOS.init({ once: false, mirror: false,  });
+  }, []);
+
+  return <>{children}</>;
+};

src/shared/providers/providers.tsx

@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 
 import { store } from '../store';
 import { ThemeProvider } from '../theme/theme-provider';
+import { AosProvider } from './aos-provider';
 
 type ProvidersProps = {
   children: React.ReactNode;
@@ -18,7 +19,7 @@ export const Providers = ({ children }: ProvidersProps) => {
         enableSystem
         disableTransitionOnChange
       >
-        {children}
+        <AosProvider>{children}</AosProvider>
       </ThemeProvider>
     </Provider>
   );

src/widgets/about-section.tsx

@@ -8,7 +8,7 @@ export const AboutSection = () => {
     <section id='about' className='py-16'>
       <div className='container mx-auto'>
         <div className='grid items-center gap-12 md:grid-cols-2'>
-          <div>
+          <div data-aos='fade-right'>
             <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
               <Users className='h-6 w-6 text-red-600' />
             </div>
@@ -67,7 +67,10 @@ export const AboutSection = () => {
               </div>
             </div>
           </div>
-          <div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
+          <div
+            data-aos='fade-left'
+            className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
+          >
             <Image
               src='/placeholder.svg?height=400&width=600'
               alt='About our company'

src/widgets/charity-section.tsx

@@ -8,7 +8,10 @@ export const CharitySection = () => {
     <section id='charity' className='py-16'>
       <div className='container mx-auto'>
         <div className='grid items-center gap-12 md:grid-cols-2'>
-          <div className='relative order-2 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-1'>
+          <div
+            data-aos='zoom-in'
+            className='relative order-2 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-1'
+          >
             <Image
               src='/placeholder.svg?height=400&width=600'
               alt='Charity Foundation'

src/widgets/map-section.tsx

@@ -20,7 +20,10 @@ export const MapSection = () => {
             удобных местах по всему Таджикистану.
           </p>
         </div>
-        <div className='h-[500px] overflow-hidden rounded-xl border shadow-lg'>
+        <div
+          data-aos='fade-up'
+          className='h-[500px] overflow-hidden rounded-xl border shadow-lg'
+        >
           <GasStationMap />
         </div>
         <div className='mt-8 flex justify-center'>

src/widgets/partners-section.tsx

@@ -25,6 +25,7 @@ export const PartnersSection = () => {
             <div
               key={partner}
               className='flex h-32 items-center justify-center rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
+              data-aos='flip-up'
             >
               <Image
                 src={`/placeholder.svg?height=80&width=160&text=Partner ${partner}`}

src/widgets/vacancies-section.tsx

@@ -42,6 +42,7 @@ export const VacanciesSection = () => {
               <Card
                 key={index}
                 className='overflow-hidden transition-all hover:shadow-md'
+                data-aos={index % 2 === 0 ? 'fade-right' : 'fade-left'}
               >
                 <CardContent className='p-0'>
                   <div className='p-6'>