update and add: update adaptability and added Loader

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

@@ -100,7 +100,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' />
@@ -110,7 +110,7 @@ export function CorporateDashboard() {
 
           <div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
             {/* Company Card */}
-            <Card data-aos='zoom-in' data-aos-mirror="true" className='md:col-span-2'>
+            <Card data-aos='zoom-in' data-aos-mirror="true" className='md:col-span-2 order-2 md:order-1'>
               <CardHeader className='pb-2'>
                 <CardTitle className='flex items-center gap-2'>
                   <Building2 className='h-5 w-5 text-red-600' />
@@ -166,7 +166,7 @@ export function CorporateDashboard() {
             </Card>
 
             {/* Fund Card */}
-            <Card data-aos='zoom-in' data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
+            <Card data-aos='zoom-in' data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white order-1 md:order-2'>
               <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/shadcn-ui/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/shared/providers/aos-provider.tsx

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

src/shared/shadcn-ui/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/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/main';
+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

@@ -110,7 +110,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/main';
+import { Jobs } from '@/app/api-utlities/@types/index';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 import { cn } from '@/shared/lib/utils';