From 374935e5389cd463f21679b90d61c6a13a048f54 Mon Sep 17 00:00:00 2001
From: BunyodL <blutfulloyev@bk.ru>
Date: Sun, 27 Apr 2025 00:17:55 +0500
Subject: [PATCH] update: fix charity page

---
 src/app/charity/page.tsx | 325 +--------------------------------------
 1 file changed, 7 insertions(+), 318 deletions(-)

diff --git a/src/app/charity/page.tsx b/src/app/charity/page.tsx
index b65e3ca..2b38a2e 100644
--- a/src/app/charity/page.tsx
+++ b/src/app/charity/page.tsx
@@ -1,8 +1,6 @@
 import {
-  ArrowRight,
   Calendar,
   CheckCircle,
-  Clock,
   Heart,
   Landmark,
   MapPin,
@@ -18,12 +16,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/shared/shadcn-ui/card';
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@/shared/shadcn-ui/tabs';
 
 import { CtaSection } from '@/widgets/cta-section';
 
@@ -39,7 +31,7 @@ export default function CharityPage() {
       <main className='flex-1'>
         {/* Hero Section */}
         <section className='relative'>
-          <div className='relative h-[500px] w-full overflow-hidden'>
+          <div className='relative h-[400px] w-full overflow-hidden'>
             <Image
               src='/placeholder.svg?height=500&width=1920&text=Благотворительный+фонд+GasNetwork'
               alt='Благотворительный фонд GasNetwork'
@@ -52,7 +44,7 @@ export default function CharityPage() {
               <div className='container mx-auto'>
                 <div className='max-w-2xl space-y-6 text-white'>
                   <div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
-                    <Heart className='h-6 w-6 text-red-500' />
+                    <Heart className='size-6 text-red-500' />
                   </div>
                   <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
                     Благотворительный фонд GasNetwork
@@ -62,17 +54,6 @@ export default function CharityPage() {
                     Наш фонд поддерживает образование, здравоохранение и
                     экологические инициативы в Таджикистане.
                   </p>
-                  <div className='flex flex-wrap gap-4'>
-                    <Button className='bg-red-600 hover:bg-red-700'>
-                      Поддержать проект
-                    </Button>
-                    <Button
-                      variant='outline'
-                      className='border-white text-white hover:bg-white/10'
-                    >
-                      Узнать больше
-                    </Button>
-                  </div>
                 </div>
               </div>
             </div>
@@ -162,7 +143,7 @@ export default function CharityPage() {
                 результатов
               </p>
             </div>
-            <div className='grid grid-cols-2 gap-8 text-center md:grid-cols-4'>
+            <div className='grid grid-cols-1 gap-8 text-center md:grid-cols-3'>
               <div className='space-y-2'>
                 <h3 className='text-4xl font-bold'>15+</h3>
                 <p className='text-white/80'>Реализованных проектов</p>
@@ -175,301 +156,10 @@ export default function CharityPage() {
                 <h3 className='text-4xl font-bold'>5000+</h3>
                 <p className='text-white/80'>Людей получили помощь</p>
               </div>
-              <div className='space-y-2'>
-                <h3 className='text-4xl font-bold'>20+</h3>
-                <p className='text-white/80'>Партнерских организаций</p>
-              </div>
             </div>
           </div>
         </section>
 
-        {/* Our Projects */}
-        <section className='py-16'>
-          <div className='container mx-auto'>
-            <div className='mb-12 text-center'>
-              <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
-                <Landmark className='h-6 w-6 text-red-600' />
-              </div>
-              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
-                Наши проекты
-              </h2>
-              <p className='mx-auto max-w-2xl text-gray-600'>
-                Мы поддерживаем различные инициативы, направленные на улучшение
-                жизни людей в Таджикистане
-              </p>
-            </div>
-
-            <Tabs defaultValue='education' className='w-full'>
-              <TabsList className='mb-8 grid w-full grid-cols-4'>
-                <TabsTrigger value='education'>Образование</TabsTrigger>
-                <TabsTrigger value='healthcare'>Здравоохранение</TabsTrigger>
-                <TabsTrigger value='environment'>Экология</TabsTrigger>
-                <TabsTrigger value='social'>Социальная помощь</TabsTrigger>
-              </TabsList>
-
-              <TabsContent value='education' className='space-y-8'>
-                <div className='grid gap-6 md:grid-cols-3'>
-                  {[
-                    {
-                      title: 'Школьные библиотеки',
-                      description:
-                        'Мы оборудовали 10 школьных библиотек в сельских районах Таджикистана, предоставив более 5000 книг.',
-                      image:
-                        '/placeholder.svg?height=200&width=300&text=Школьные+библиотеки',
-                      date: '2022-2023',
-                    },
-                    {
-                      title: 'Стипендиальная программа',
-                      description:
-                        'Ежегодно мы предоставляем стипендии 20 талантливым студентам из малообеспеченных семей.',
-                      image:
-                        '/placeholder.svg?height=200&width=300&text=Стипендии',
-                      date: '2021-настоящее время',
-                    },
-                    {
-                      title: 'Компьютерные классы',
-                      description:
-                        'Мы оборудовали 5 компьютерных классов в школах Душанбе и других городов Таджикистана.',
-                      image:
-                        '/placeholder.svg?height=200&width=300&text=Компьютерные+классы',
-                      date: '2022',
-                    },
-                  ].map((project, index) => (
-                    <Card key={index} className='overflow-hidden'>
-                      <div className='relative h-48 w-full'>
-                        <Image
-                          src={project.image || '/placeholder.svg'}
-                          alt={project.title}
-                          fill
-                          className='object-cover'
-                        />
-                      </div>
-                      <CardHeader>
-                        <div className='flex items-center justify-between'>
-                          <CardTitle>{project.title}</CardTitle>
-                          <div className='flex items-center text-sm text-gray-500'>
-                            <Clock className='mr-1 h-4 w-4' />
-                            {project.date}
-                          </div>
-                        </div>
-                      </CardHeader>
-                      <CardContent>
-                        <p className='text-gray-600'>{project.description}</p>
-                      </CardContent>
-                      <CardFooter>
-                        <Button variant='outline' className='w-full'>
-                          Подробнее
-                        </Button>
-                      </CardFooter>
-                    </Card>
-                  ))}
-                </div>
-                <div className='text-center'>
-                  <Button className='bg-red-600 hover:bg-red-700'>
-                    Все образовательные проекты{' '}
-                    <ArrowRight className='ml-2 h-4 w-4' />
-                  </Button>
-                </div>
-              </TabsContent>
-
-              <TabsContent value='healthcare' className='space-y-8'>
-                <div className='grid gap-6 md:grid-cols-3'>
-                  {[
-                    {
-                      title: 'Медицинское оборудование',
-                      description:
-                        'Мы закупили современное медицинское оборудование для 3 районных больниц в Таджикистане.',
-                      image:
-                        '/placeholder.svg?height=200&width=300&text=Медицинское+оборудование',
-                      date: '2022',
-                    },
-                    {
-                      title: 'Мобильная клиника',
-                      description:
-                        'Наша мобильная клиника предоставляет базовую медицинскую помощь в отдаленных районах страны.',
-                      image:
-                        '/placeholder.svg?height=200&width=300&text=Мобильная+клиника',
-                      date: '2021-настоящее время',
-                    },
-                    {
-                      title: 'Вакцинация детей',
-                      description:
-                        'Мы финансируем программу вакцинации детей в сельских районах Таджикистана.',
-                      image:
-                        '/placeholder.svg?height=200&width=300&text=Вакцинация',
-                      date: '2023',
-                    },
-                  ].map((project, index) => (
-                    <Card key={index} className='overflow-hidden'>
-                      <div className='relative h-48 w-full'>
-                        <Image
-                          src={project.image || '/placeholder.svg'}
-                          alt={project.title}
-                          fill
-                          className='object-cover'
-                        />
-                      </div>
-                      <CardHeader>
-                        <div className='flex items-center justify-between'>
-                          <CardTitle>{project.title}</CardTitle>
-                          <div className='flex items-center text-sm text-gray-500'>
-                            <Clock className='mr-1 h-4 w-4' />
-                            {project.date}
-                          </div>
-                        </div>
-                      </CardHeader>
-                      <CardContent>
-                        <p className='text-gray-600'>{project.description}</p>
-                      </CardContent>
-                      <CardFooter>
-                        <Button variant='outline' className='w-full'>
-                          Подробнее
-                        </Button>
-                      </CardFooter>
-                    </Card>
-                  ))}
-                </div>
-                <div className='text-center'>
-                  <Button className='bg-red-600 hover:bg-red-700'>
-                    Все проекты здравоохранения{' '}
-                    <ArrowRight className='ml-2 h-4 w-4' />
-                  </Button>
-                </div>
-              </TabsContent>
-
-              <TabsContent value='environment' className='space-y-8'>
-                <div className='grid gap-6 md:grid-cols-3'>
-                  {[
-                    {
-                      title: 'Посадка деревьев',
-                      description:
-                        'Мы организовали посадку более 10,000 деревьев в различных регионах Таджикистана.',
-                      image:
-                        '/placeholder.svg?height=200&width=300&text=Посадка+деревьев',
-                      date: '2021-настоящее время',
-                    },
-                    {
-                      title: 'Чистые реки',
-                      description:
-                        'Проект по очистке рек и водоемов от мусора и загрязнений в сотрудничестве с местными сообществами.',
-                      image:
-                        '/placeholder.svg?height=200&width=300&text=Чистые+реки',
-                      date: '2022-2023',
-                    },
-                    {
-                      title: 'Экологическое образование',
-                      description:
-                        'Мы проводим образовательные программы по экологии для школьников и студентов.',
-                      image:
-                        '/placeholder.svg?height=200&width=300&text=Экологическое+образование',
-                      date: '2023',
-                    },
-                  ].map((project, index) => (
-                    <Card key={index} className='overflow-hidden'>
-                      <div className='relative h-48 w-full'>
-                        <Image
-                          src={project.image || '/placeholder.svg'}
-                          alt={project.title}
-                          fill
-                          className='object-cover'
-                        />
-                      </div>
-                      <CardHeader>
-                        <div className='flex items-center justify-between'>
-                          <CardTitle>{project.title}</CardTitle>
-                          <div className='flex items-center text-sm text-gray-500'>
-                            <Clock className='mr-1 h-4 w-4' />
-                            {project.date}
-                          </div>
-                        </div>
-                      </CardHeader>
-                      <CardContent>
-                        <p className='text-gray-600'>{project.description}</p>
-                      </CardContent>
-                      <CardFooter>
-                        <Button variant='outline' className='w-full'>
-                          Подробнее
-                        </Button>
-                      </CardFooter>
-                    </Card>
-                  ))}
-                </div>
-                <div className='text-center'>
-                  <Button className='bg-red-600 hover:bg-red-700'>
-                    Все экологические проекты{' '}
-                    <ArrowRight className='ml-2 h-4 w-4' />
-                  </Button>
-                </div>
-              </TabsContent>
-
-              <TabsContent value='social' className='space-y-8'>
-                <div className='grid gap-6 md:grid-cols-3'>
-                  {[
-                    {
-                      title: 'Помощь детским домам',
-                      description:
-                        'Мы регулярно оказываем материальную помощь детским домам в Таджикистане.',
-                      image:
-                        '/placeholder.svg?height=200&width=300&text=Детские+дома',
-                      date: '2020-настоящее время',
-                    },
-                    {
-                      title: 'Поддержка пожилых людей',
-                      description:
-                        'Программа поддержки одиноких пожилых людей, включающая доставку продуктов и медикаментов.',
-                      image:
-                        '/placeholder.svg?height=200&width=300&text=Пожилые+люди',
-                      date: '2021-настоящее время',
-                    },
-                    {
-                      title: 'Инклюзивное образование',
-                      description:
-                        'Мы поддерживаем программы инклюзивного образования для детей с особыми потребностями.',
-                      image:
-                        '/placeholder.svg?height=200&width=300&text=Инклюзивное+образование',
-                      date: '2022-2023',
-                    },
-                  ].map((project, index) => (
-                    <Card key={index} className='overflow-hidden'>
-                      <div className='relative h-48 w-full'>
-                        <Image
-                          src={project.image || '/placeholder.svg'}
-                          alt={project.title}
-                          fill
-                          className='object-cover'
-                        />
-                      </div>
-                      <CardHeader>
-                        <div className='flex items-center justify-between'>
-                          <CardTitle>{project.title}</CardTitle>
-                          <div className='flex items-center text-sm text-gray-500'>
-                            <Clock className='mr-1 h-4 w-4' />
-                            {project.date}
-                          </div>
-                        </div>
-                      </CardHeader>
-                      <CardContent>
-                        <p className='text-gray-600'>{project.description}</p>
-                      </CardContent>
-                      <CardFooter>
-                        <Button variant='outline' className='w-full'>
-                          Подробнее
-                        </Button>
-                      </CardFooter>
-                    </Card>
-                  ))}
-                </div>
-                <div className='text-center'>
-                  <Button className='bg-red-600 hover:bg-red-700'>
-                    Все социальные проекты{' '}
-                    <ArrowRight className='ml-2 h-4 w-4' />
-                  </Button>
-                </div>
-              </TabsContent>
-            </Tabs>
-          </div>
-        </section>
-
         {/* Upcoming Events */}
         <section className='bg-gray-50 py-16'>
           <div className='container mx-auto'>
@@ -565,7 +255,7 @@ export default function CharityPage() {
               </p>
             </div>
 
-            <div className='grid gap-6 md:grid-cols-4'>
+            <div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-4'>
               {[
                 {
                   title: 'Сделать пожертвование',
@@ -595,14 +285,13 @@ export default function CharityPage() {
                 <Card key={index} className='text-center'>
                   <CardHeader>
                     <div className='mb-4 flex justify-center'>{item.icon}</div>
-                    <CardTitle>{item.title}</CardTitle>
+                    <CardTitle className='break-words hyphens-auto'>
+                      {item.title}
+                    </CardTitle>
                   </CardHeader>
                   <CardContent>
                     <p className='text-gray-600'>{item.description}</p>
                   </CardContent>
-                  <CardFooter className='flex justify-center'>
-                    <Button variant='outline'>Подробнее</Button>
-                  </CardFooter>
                 </Card>
               ))}
             </div>