351 lines
14 KiB
TypeScript
351 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { Fuel, History, MapPin, Star, Target, Users } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
import { AboutUsPageData } from '@/app/api-utlities/@types/about-us';
|
|
|
|
import AnimatedCounter from '@/shared/components/animated-counter';
|
|
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 Container from '@/shared/shadcn-ui/conteiner';
|
|
|
|
import { CompanyTimeline } from '@/widgets/about-page/company-timeline';
|
|
import { StationGallery } from '@/widgets/about-page/station-gallery';
|
|
import { CtaSection } from '@/widgets/cta-section';
|
|
|
|
export const metadata = {
|
|
title: 'about.metadata.title',
|
|
description: 'about.metadata.description',
|
|
};
|
|
|
|
export interface AboutPageProps {
|
|
content: AboutUsPageData;
|
|
}
|
|
|
|
export default function AboutPage({ content }: AboutPageProps) {
|
|
const { t } = useTextController();
|
|
|
|
return (
|
|
<div className='flex min-h-screen flex-col'>
|
|
<main className='flex-1'>
|
|
{/* Hero Section */}
|
|
<section className='relative'>
|
|
<div className='relative h-[400px] w-full overflow-hidden'>
|
|
<Image
|
|
src='/placeholder.svg?height=400&width=1920&text=Наша+История'
|
|
alt={t('about.hero.imageAlt')}
|
|
width={1920}
|
|
height={400}
|
|
className='object-cover'
|
|
priority
|
|
/>
|
|
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30 px-2'>
|
|
<div
|
|
data-aos='fade-down'
|
|
data-aos-duration='1000'
|
|
className='container mx-auto'
|
|
>
|
|
<div className='max-w-2xl space-y-4 text-white'>
|
|
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
|
{t('about.hero.title')}
|
|
</h1>
|
|
<p className='text-lg text-gray-200'>
|
|
{t('about.hero.subtitle')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Company Overview */}
|
|
<Container>
|
|
<section className='py-16'>
|
|
<div className='container mx-auto'>
|
|
<div className='grid items-center gap-12 md:grid-cols-2'>
|
|
<div data-aos='fade-right'>
|
|
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
|
<Fuel className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('about.overview.title')}
|
|
</h2>
|
|
<p className='mb-6 text-gray-600'>
|
|
{t('about.overview.description1')}
|
|
</p>
|
|
<p className='mb-6 text-gray-600'>
|
|
{t('about.overview.description2')}
|
|
</p>
|
|
<p className='mb-6 text-gray-600'>
|
|
{t('about.overview.description3')}
|
|
</p>
|
|
|
|
<div className='mb-6 grid grid-cols-1 gap-4 md:grid-cols-2'>
|
|
{[0, 1, 2, 3].map((index) => (
|
|
<div key={index} className='flex items-start'>
|
|
<div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
|
|
<span className='text-xs text-white'>✓</span>
|
|
</div>
|
|
<div className='ml-3'>
|
|
<h3 className='text-lg font-medium'>
|
|
{t(`about.overview.benefits.${index}.title`)}
|
|
</h3>
|
|
<p className='text-gray-600'>
|
|
{t(`about.overview.benefits.${index}.description`)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-aos='zoom-out-right'
|
|
className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'
|
|
>
|
|
<Image
|
|
src='/placeholder.svg?height=500&width=600&text=Главный+офис'
|
|
alt={t('about.overview.imageAlt')}
|
|
fill
|
|
className='object-cover'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Container>
|
|
|
|
{/* Stats Section */}
|
|
<section className='bg-red-600 py-16 text-white'>
|
|
<div className='container mx-auto'>
|
|
<div className='mb-12 text-center'>
|
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('about.stats.title')}
|
|
</h2>
|
|
<p className='mx-auto max-w-2xl text-white/80'>
|
|
{t('about.stats.subtitle')}
|
|
</p>
|
|
</div>
|
|
<div className='grid grid-cols-1 gap-8 text-center sm:grid-cols-2 md:grid-cols-4'>
|
|
{[0, 1, 2, 3].map((index) => (
|
|
<div key={index} className='space-y-2'>
|
|
<h3 className='text-4xl font-bold'>
|
|
<AnimatedCounter
|
|
end={Number(t(`about.stats.items.${index}.value`))}
|
|
suffix={
|
|
t(`about.stats.items.${index}.suffix`) ===
|
|
`about.stats.items.${index}.suffix`
|
|
? ''
|
|
: t(`about.stats.items.${index}.suffix`) || ''
|
|
}
|
|
/>
|
|
</h3>
|
|
<p className='text-sm text-white/80'>
|
|
{t(`about.stats.items.${index}.label`)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Our History */}
|
|
<section className='py-16'>
|
|
<div className='container mx-auto'>
|
|
<Container>
|
|
<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'>
|
|
<History className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('about.history.title')}
|
|
</h2>
|
|
<p className='max-w-2xl text-gray-600'>
|
|
{t('about.history.subtitle')}
|
|
</p>
|
|
</div>
|
|
</Container>
|
|
|
|
<Container>
|
|
<CompanyTimeline timeline={content.history} />
|
|
</Container>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Our Stations */}
|
|
<Container>
|
|
<section className='bg-gray-50 py-16'>
|
|
<div className='container mx-auto'>
|
|
<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'>
|
|
<MapPin className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('about.stations.title')}
|
|
</h2>
|
|
<p className='max-w-2xl text-gray-600'>
|
|
{t('about.stations.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<StationGallery stations={content.stations} />
|
|
|
|
<div className='mt-12 text-center'>
|
|
<p className='mx-auto mb-6 max-w-2xl text-gray-600'>
|
|
{t('about.stations.description')}
|
|
</p>
|
|
<Button className='bg-red-600 hover:bg-red-700'>
|
|
{t('about.stations.buttonText')}{' '}
|
|
<MapPin className='ml-2 h-4 w-4' />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Container>
|
|
|
|
{/* Our Values */}
|
|
<Container>
|
|
<section className='py-16'>
|
|
<div className='container mx-auto'>
|
|
<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'>
|
|
<Target className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('about.values.title')}
|
|
</h2>
|
|
<p className='max-w-2xl text-gray-600'>
|
|
{t('about.values.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
data-aos='flip-up'
|
|
data-aos-duration='600'
|
|
className='grid gap-8 md:grid-cols-3'
|
|
>
|
|
{[0, 1, 2].map((index) => (
|
|
<Card
|
|
key={index}
|
|
className='overflow-hidden transition-all hover:shadow-lg'
|
|
>
|
|
<CardContent className='p-6'>
|
|
<div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
|
|
<Star className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<h3 className='mb-2 text-xl font-bold'>
|
|
{t(`about.values.items.${index}.title`)}
|
|
</h3>
|
|
<p className='text-gray-600'>
|
|
{t(`about.values.items.${index}.description`)}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Container>
|
|
|
|
{/* Our Team */}
|
|
<Container>
|
|
<section className='bg-gray-50 py-16'>
|
|
<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' />
|
|
</div>
|
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('about.team.title')}
|
|
</h2>
|
|
<p className='max-w-2xl text-gray-600'>
|
|
{t('about.team.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
data-aos='flip-down'
|
|
data-aos-duration='600'
|
|
className='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'
|
|
>
|
|
{content.team.map((member, index) => (
|
|
<div
|
|
key={index}
|
|
className='overflow-hidden rounded-lg bg-white shadow-md transition-transform hover:scale-105'
|
|
>
|
|
<div className='relative h-64 w-full'>
|
|
{member.photo && (
|
|
<Image
|
|
src={member.photo}
|
|
alt={t(`about.team.members.${index}.name`)}
|
|
fill
|
|
className='object-cover'
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className='p-4 text-center'>
|
|
<h3 className='text-lg font-bold'>{member.name}</h3>
|
|
<p className='text-gray-600'>{member.profession}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Container>
|
|
|
|
{/* Testimonials */}
|
|
<Container>
|
|
<section className='py-16'>
|
|
<div className='container mx-auto'>
|
|
<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'>
|
|
<Star className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
|
{t('about.testimonials.title')}
|
|
</h2>
|
|
<p className='max-w-2xl text-gray-600'>
|
|
{t('about.testimonials.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
data-aos='zoom-out-right'
|
|
className='grid gap-8 md:grid-cols-3'
|
|
>
|
|
{content.reviews.map((review, index) => (
|
|
<Card
|
|
key={index}
|
|
className='overflow-hidden transition-all hover:shadow-lg'
|
|
>
|
|
<CardContent className='p-6'>
|
|
<div className='mb-4 flex'>
|
|
{Array(5)
|
|
.fill(0)
|
|
.map((_, i) => (
|
|
<Star
|
|
key={i}
|
|
className={`h-5 w-5 ${i < Number(review.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
<p className='mb-4 text-gray-600 italic'>
|
|
"{review.review}"
|
|
</p>
|
|
<p className='font-semibold'>{review.fullname}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Container>
|
|
|
|
<CtaSection />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|