Merge branch 'add-pages' into dev

src/pages-templates/(dashboard)/corporate-dashboard/index.tsx

@@ -104,7 +104,7 @@ export function CorporateDashboard() {
     <div className='flex min-h-screen flex-col px-2.5'>
       <main className='flex-1 py-10'>
         <div className='container mx-auto max-w-6xl'>
-          <div className='mb-8 flex items-center justify-between'>
+          <div className='mb-4 flex flex-col gap-4 items-start sm:justify-between sm:items-center sm:mb-8 sm:flex-row'>
             <h1 className='text-3xl font-bold'>{t('corporate.pageTitle')}</h1>
             <Button variant='outline' className='gap-2'>
               <LogOut className='h-4 w-4' />
@@ -114,11 +114,7 @@ export function CorporateDashboard() {
 
           <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
             {/* Company Card */}
-            <Card
+            <Card data-aos='zoom-in' data-aos-mirror="true" className='md:col-span-2'>
-              data-aos='zoom-in'
-              data-aos-mirror='true'
-              className='md:col-span-2'
-            >
               <CardHeader className='pb-2'>
                 <CardTitle className='flex items-center gap-2'>
                   <Building2 className='h-5 w-5 text-red-600' />
@@ -182,11 +178,7 @@ export function CorporateDashboard() {
             </Card>
 
             {/* Fund Card */}
-            <Card
+            <Card data-aos='zoom-in' data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
-              data-aos='zoom-in'
-              data-aos-mirror='true'
-              className='bg-gradient-to-br from-red-600 to-red-800 text-white'
-            >
               <CardHeader>
                 <CardTitle className='flex items-center gap-2'>
                   <Wallet className='h-5 w-5' />

src/pages-templates/(dashboard)/customer-dashboard/index.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/shared/shadcn-ui/card';
 
 import { TransactionsTable } from '@/widgets/transactions-table';
+import Loader from '@/shared/components/loader';
 
 export function CustomerDashboard() {
   const { t } = useTextController();
@@ -36,8 +37,7 @@ export function CustomerDashboard() {
           <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
             <Card data-aos="zoom-in"  data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
               {!data || isLoading ? (
-                // TODO: Bunyod please add loader here
+                <Loader/>
-                <>Loader here</>
               ) : (
                 <>
                   <CardHeader>
@@ -82,8 +82,7 @@ export function CustomerDashboard() {
               </CardHeader>
               <CardContent>
                 {!data || isLoading ? (
-                  // TODO: Bunyod please add loader here
+                  <Loader/>
-                  <>Loader here</>
                 ) : (
                   <div className='grid gap-6 md:grid-cols-2'>
                     <div>

src/pages-templates/about/index.tsx

@@ -251,7 +251,7 @@ export default function AboutPage({ content }: AboutPageProps) {
         {/* Our Team */}
         <Container>
           <section className='bg-gray-50 py-16'>
-            <div className='container mx-auto'>
+            <div className='container mx-auto px-2'>
               <div className='mb-12 flex flex-col items-center justify-center text-center'>
                 <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' />

src/pages-templates/charity/index.tsx

@@ -87,7 +87,7 @@ export function CharityPage() {
 
                   <div className='space-y-4'>
                     {[0, 1, 2].map((index) => (
-                      <div key={index} className='flex items-start'>
+                      <div data-aos='fade-right' key={index} className='flex items-start'>
                         <CheckCircle className='mr-3 h-6 w-6 flex-shrink-0 text-red-600' />
                         <div>
                           <h3 className='text-lg font-medium'>
@@ -101,7 +101,7 @@ export function CharityPage() {
                     ))}
                   </div>
                 </div>
-                <div className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
+                <div data-aos='fade-right' className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'>
                   <Image
                     src='/placeholder.svg?height=500&width=600&text=Наша+миссия'
                     alt={t('charity.mission.imageAlt')}
@@ -185,7 +185,7 @@ export function CharityPage() {
                       '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
                   },
                 ].map((event, index) => (
-                  <Card key={index} className='overflow-hidden flex flex-col justify-between'>
+                  <Card data-aos='zoom-in-up' key={index} className='overflow-hidden flex flex-col justify-between'>
                     <div>
                       <div className='relative h-48 w-full'>
                         <Image
@@ -265,7 +265,7 @@ export function CharityPage() {
                     icon: <Heart className='h-10 w-10 text-red-600' />,
                   },
                 ].map((item, index) => (
-                  <Card key={index} className='text-center'>
+                  <Card data-aos='zoom-in' key={index} className='text-center'>
                     <CardHeader>
                       <div className='mb-4 flex justify-center'>{item.icon}</div>
                       <CardTitle className='break-words hyphens-auto'>

src/pages-templates/clients/loyalty/index.tsx

@@ -9,6 +9,8 @@ import { Card, CardContent } from '@/shared/shadcn-ui/card';
 import { CtaSection } from '@/widgets/cta-section';
 import Container from '@/shared/shadcn-ui/conteiner';
 
+import ProgrammImg from '../../../../public/clients/loyatly/03a771e7-5d76-4111-a516-801aa925659f.jpg'
+
 export const metadata = {
   title: 'Программа лояльности | GasNetwork - Сеть заправок в Таджикистане',
   description:
@@ -112,10 +114,11 @@ export function LoyaltyPage() {
                 </div>
                 <div data-aos='fade-up' className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'>
                   <Image
-                    src='/placeholder.svg?height=400&width=600&text=Программа+лояльности'
+                    src={ProgrammImg}
                     alt='Программа лояльности'
                     fill
-                    className='object-cover'
+                    className="w-full object-contain p-2.5"
+                    priority
                   />
                 </div>
               </div>
@@ -123,7 +126,7 @@ export function LoyaltyPage() {
           </section>
 
           {/* How It Works */}
-          <section className='bg-gray-50 py-16'>
+          <section className='bg-gray-50 py-16 px-2'>
             <div className='container mx-auto'>
               <div className='mb-12 text-center'>
                 <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
@@ -134,8 +137,8 @@ export function LoyaltyPage() {
                 </p>
               </div>
 
-            <div data-aos='zoom-in-right' className='grid gap-8 md:grid-cols-4'>
+            <div className='grid gap-8 sm:grid-cols-2 lg:grid-cols-4'>
-              <div className='text-center'>
+              <div data-aos='zoom-in-up' className='text-center'>
                 <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
                   1
                 </div>
@@ -146,7 +149,7 @@ export function LoyaltyPage() {
                   {t('clients.loyalty.works.stage.description-1')}
                 </p>
               </div>
-              <div className='text-center'>
+              <div data-aos='zoom-in-up' className='text-center'>
                 <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
                   2
                 </div>
@@ -157,7 +160,7 @@ export function LoyaltyPage() {
                   {t('clients.loyalty.works.stage.description-2')}
                 </p>
               </div>
-              <div className='text-center'>
+              <div data-aos='zoom-in-up' className='text-center'>
                 <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
                   3
                 </div>
@@ -168,7 +171,7 @@ export function LoyaltyPage() {
                   {t('clients.loyalty.works.stage.description-3')}
                 </p>
               </div>
-              <div className='text-center'>
+              <div data-aos='zoom-in-up' className='text-center'>
                 <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
                   4
                 </div>
@@ -195,8 +198,8 @@ export function LoyaltyPage() {
                 </p>
               </div>
 
-                <div data-aos='flip-down' className='grid gap-8 md:grid-cols-3'>
+                <div className='grid gap-8 md:grid-cols-3'>
-                  <Card className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'>
+                  <Card data-aos='flip-left' data-aos-duration='500' className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'>
                     <CardContent className='p-6'>
                       <h3 className='mb-4 text-center text-2xl font-bold'>
                         {t('clients.loyalty.works.levels.card-1.title')}
@@ -232,7 +235,7 @@ export function LoyaltyPage() {
                     </CardContent>
                   </Card>
 
-                  <Card className='overflow-hidden border-t-4 border-t-yellow-500 transition-all hover:shadow-lg'>
+                  <Card data-aos='flip-left' data-aos-duration='500' className='overflow-hidden border-t-4 border-t-yellow-500 transition-all hover:shadow-lg'>
                     <CardContent className='p-6'>
                       <h3 className='mb-4 text-center text-2xl font-bold'>
                         {t('clients.loyalty.works.levels.card-2.title')}
@@ -274,7 +277,7 @@ export function LoyaltyPage() {
                     </CardContent>
                   </Card>
 
-                  <Card className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'>
+                  <Card data-aos='flip-left' data-aos-duration='500' className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'>
                     <CardContent className='p-6'>
                       <h3 className='mb-4 text-center text-2xl font-bold'>
                         {t('clients.loyalty.works.levels.card-3.title')}

src/shared/assets/logo.tsx

@@ -4,8 +4,8 @@ import Link from 'next/link';
 export const Logo = () => {
   return (
     <Link className='flex items-center gap-2' href={'/'}>
-      <Image src='/logo.svg' alt='oriyo-logo' width={24} height={24} />
+      <Image src='/logo-new.png' alt='oriyo-logo' width={110} height={40} />
-      <span className='text-xl font-bold'>Ориё</span>
+      {/* <span className='text-xl font-bold'>Ориё</span> */}
     </Link>
   );
 };

src/shared/components/loader.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+export default function Loader() {
+    return (
+        <div className="flex justify-center items-center p-8">
+            <div className="animate-spin rounded-full h-14 w-14 border-4 border-black border-t-transparent"></div>
+        </div>
+    )
+}

src/shared/components/promotion-slider.tsx

@@ -5,12 +5,12 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
-import { Discounts } from '@/app/api-utlities/@types';
+import { Discounts } from '@/app/api-utlities/@types/index';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
-
+import PromoImg from '../../../public/main/#promotions/995b9daa-959f-4bd5-9135-ef7c47148f2c.jpg'
 const promotions = [
   {
     id: 1,
@@ -99,13 +99,15 @@ export default function PromotionSlider({ discounts }: PromotionSliderProps) {
             data-aos-duration='700'
           >
             <Card className='h-full overflow-hidden transition-shadow hover:shadow-lg'>
-              <div className='relative h-48'>
+              <div className='relative h-72'>
-                <Image
+                <div className='rounded-lg'>
-                  src={promo.image || '/placeholder.svg'}
+                  <Image
-                  alt={promo.name}
+                    src={PromoImg}
-                  fill
+                    alt={promo.name}
-                  className='object-cover'
+                    fill
-                />
+                    className='object-contain p-2 rounded-lg'
+                  />
+                </div>
               </div>
               <CardContent className='p-4'>
                 <h3 className='mb-2 text-lg font-bold'>{promo.name}</h3>

src/shared/providers/aos-provider.tsx

@@ -10,7 +10,20 @@ interface AosInitProps {
 
 export const AosProvider = ({ children }: AosInitProps) => {
   useEffect(() => {
-    AOS.init({ once: false, mirror: false,  });
+    const timer = setTimeout(() => {
+      AOS.init({
+        mirror: false,
+        once: false,
+        offset: 100,
+        duration: 600,
+        easing: 'ease-out-quart',
+      });
+    }, 500);
+
+    return () => {
+      clearTimeout(timer);
+      AOS.refreshHard();
+    };
   }, []);
 
   return <>{children}</>;

src/widgets/hero-section.tsx

@@ -12,7 +12,7 @@ export const HeroSection = () => {
 
   return (
     <section className='relative'>
-      <div className='relative h-[300px] w-full overflow-hidden md:h-[500px] xl:h-[700px]'>
+      <div className='relative h-[400px] w-full overflow-hidden sm:h-[500px] xl:h-[700px]'>
         <Image
           src='/oriyo_bg.jpeg'
           alt='Gas Station Network'
@@ -24,14 +24,14 @@ export const HeroSection = () => {
           <div className='container mx-auto'>
             <div className='max-w-lg space-y-4 text-white'>
               <div className='animate-fade animate-duration-[3000ms] animate-ease-in-out'>
-                <h1 className='text-2xl font-bold tracking-tight sm:text-4xl md:text-6xl'>
+                <h1 className='font-bold tracking-tight text-4xl md:text-6xl'>
                   {t('home.hero.title')}
                 </h1>
               </div>
               <p className='text-gray-200 sm:text-lg'>
                 {t('home.hero.description')}
               </p>
-              <div className='flex flex-col gap-2 sm:flex-row sm:gap-4'>
+              <div className='flex flex-col mt-6 gap-2 sm:flex-row sm:gap-4'>
                 <Link href='#'>
                   <Button className='bg-red-600 hover:bg-red-700'>
                     {t('common.buttons.findStation')}{' '}

src/widgets/promotions-section.tsx

@@ -2,7 +2,7 @@
 
 import { Gift } from 'lucide-react';
 
-import { Discounts } from '@/app/api-utlities/@types';
+import { Discounts } from '@/app/api-utlities/@types/index';
 
 import PromotionSlider from '@/shared/components/promotion-slider';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';

src/widgets/transactions-table.tsx

@@ -26,14 +26,16 @@ import {
 } from '@/shared/shadcn-ui/table';
 
 export const TransactionsTable = () => {
-  const [startDate, setStartDate] = useState<Date>(subMonths(new Date(), 1));
+  const [startDate, setStartDate] = useState<Date | undefined>(
-  const [endDate, setEndDate] = useState<Date>(new Date());
+    subMonths(new Date(), 1),
+  );
+  const [endDate, setEndDate] = useState<Date | undefined>(new Date());
 
   const { data, refetch } = useFetchBonusTransactionsQuery({
     limit: 100,
     page: 1,
-    start_date: format(startDate, 'yyyy-MM-dd'),
+    ...(startDate ? { start_date: format(startDate, 'yyyy-MM-dd') } : {}),
-    end_date: format(endDate, 'yyyy-MM-dd'),
+    ...(endDate ? { end_date: format(endDate, 'yyyy-MM-dd') } : {}),
   });
 
   // Filter transactions by date range
@@ -57,7 +59,7 @@ export const TransactionsTable = () => {
         </h2>
 
         <div className='flex w-full flex-col gap-4 md:w-auto md:flex-row'>
-          <div className='grid grid-cols-2 gap-2'>
+          <div className='grid sm:grid-cols-2 gap-2'>
             <div className='flex items-center gap-2'>
               <Label htmlFor='start-date'>
                 {t('corporate.transactions.dateFrom')}

src/widgets/vacancies-section.tsx

@@ -2,7 +2,7 @@
 
 import { Briefcase } from 'lucide-react';
 
-import { Jobs } from '@/app/api-utlities/@types';
+import { Jobs } from '@/app/api-utlities/@types/index';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { cn } from '@/shared/lib/utils';