Compare commits
No commits in common. "10a55fb6851e3d9a5c54eaf7b6add715269f8fc4" and "886ff726de38d6610090da0d33cebc34ea16d848" have entirely different histories.
10a55fb685
...
886ff726de
@ -56,7 +56,7 @@ interface StationListPanelProps {
|
||||
selectedStation: number | null;
|
||||
activeFilters: string[];
|
||||
activeCities: string[];
|
||||
handleMapStationClick: (id: number) => void;
|
||||
setSelectedStation: (id: number | null) => void;
|
||||
filterToFieldMap: { [key: string]: keyof Stations[number] };
|
||||
allFilters: string[];
|
||||
resetFilters: () => void;
|
||||
@ -205,7 +205,7 @@ function StationListPanel({
|
||||
selectedStation,
|
||||
activeFilters,
|
||||
activeCities,
|
||||
handleMapStationClick,
|
||||
setSelectedStation,
|
||||
filterToFieldMap,
|
||||
allFilters,
|
||||
resetCities,
|
||||
@ -275,7 +275,7 @@ function StationListPanel({
|
||||
? 'border-blue-500 bg-blue-50'
|
||||
: 'border-gray-200 hover:bg-gray-50'
|
||||
}`}
|
||||
onClick={() => handleMapStationClick(station.id)}
|
||||
onClick={() => setSelectedStation(station.id)}
|
||||
>
|
||||
<div className='flex items-start justify-between'>
|
||||
<h4 className='font-medium'>{station.name}</h4>
|
||||
@ -365,11 +365,6 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
|
||||
const [isStationListOpen, setIsStationListOpen] = useState(false);
|
||||
const [activeFilterTab, setActiveFilterTab] = useState('cities');
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedStation === null) return;
|
||||
setIsStationListOpen(true);
|
||||
}, [selectedStation]);
|
||||
|
||||
// Все доступные фильтры
|
||||
const allFilters = [
|
||||
// 'ДТ', -> нет значения в интерфейсе - TODO: поправить
|
||||
@ -439,16 +434,6 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
|
||||
[filteredStations],
|
||||
);
|
||||
|
||||
const handleMapStationClick = (stationId: number) => {
|
||||
setSelectedStation(() => {
|
||||
if (selectedStation !== null && selectedStation === stationId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return stationId;
|
||||
});
|
||||
};
|
||||
|
||||
// Переключение фильтра услуг
|
||||
const toggleFilter = (filter: string) => {
|
||||
setActiveFilters((prev) =>
|
||||
@ -509,7 +494,7 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
|
||||
selectedStation={selectedStation}
|
||||
activeFilters={activeFilters}
|
||||
activeCities={activeCities}
|
||||
handleMapStationClick={handleMapStationClick}
|
||||
setSelectedStation={setSelectedStation}
|
||||
filterToFieldMap={filterToFieldMap}
|
||||
allFilters={allFilters}
|
||||
resetFilters={resetFilters}
|
||||
@ -521,7 +506,7 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
|
||||
<YandexMap
|
||||
points={points}
|
||||
selectedStation={selectedStation}
|
||||
handleMapStationClick={handleMapStationClick}
|
||||
setSelectedStation={setSelectedStation}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ import { Point } from '../model';
|
||||
type YandexMapProps = {
|
||||
points: Point[];
|
||||
selectedStation: number | null;
|
||||
handleMapStationClick: (id: number) => void;
|
||||
setSelectedStation: Dispatch<SetStateAction<number | null>>;
|
||||
};
|
||||
|
||||
const mapCenter = [38.53575, 68.77905];
|
||||
@ -15,7 +15,7 @@ const mapCenter = [38.53575, 68.77905];
|
||||
export const YandexMap = ({
|
||||
points,
|
||||
selectedStation,
|
||||
handleMapStationClick,
|
||||
setSelectedStation,
|
||||
}: YandexMapProps) => {
|
||||
return (
|
||||
<YMaps
|
||||
@ -39,25 +39,30 @@ export const YandexMap = ({
|
||||
}}
|
||||
className='h-full max-h-[500px] w-full overflow-hidden rounded-md shadow-lg'
|
||||
>
|
||||
{points.map((point) => {
|
||||
const isSelectedStation = selectedStation === point.id;
|
||||
return (
|
||||
{points.map((point) => (
|
||||
<Placemark
|
||||
key={point.id}
|
||||
geometry={point.coordinates}
|
||||
options={{
|
||||
iconLayout: 'default#image',
|
||||
iconImageHref:
|
||||
!selectedStation || isSelectedStation
|
||||
!selectedStation || selectedStation === point.id
|
||||
? '/map/oriyo-marker.png'
|
||||
: '/map/oriyo-inactive-marker.png',
|
||||
iconImageSize: isSelectedStation ? [70, 70] : [64, 64],
|
||||
iconImageOffset: isSelectedStation ? [-28, -40] : [-24, -36],
|
||||
iconImageSize: selectedStation === point.id ? [70, 70] : [64, 64],
|
||||
iconImageOffset: [-24, -36],
|
||||
}}
|
||||
onClick={() => handleMapStationClick(point.id)}
|
||||
onClick={() =>
|
||||
setSelectedStation(() => {
|
||||
if (selectedStation !== null && selectedStation === point.id) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return point.id;
|
||||
})
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</Map>
|
||||
</YMaps>
|
||||
);
|
||||
|
||||
@ -6,9 +6,10 @@ import Image from 'next/image';
|
||||
import { AboutUsPageData } from '@/app/api-utlities/@types/about-us';
|
||||
|
||||
import AnimatedCounter from '@/shared/components/animated-counter';
|
||||
import { Container } from '@/shared/components/container';
|
||||
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';
|
||||
@ -61,6 +62,8 @@ export default function AboutPage({ content }: AboutPageProps) {
|
||||
|
||||
{/* 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'>
|
||||
@ -109,11 +112,13 @@ export default function AboutPage({ content }: AboutPageProps) {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className='bg-red-600 text-white'>
|
||||
<Container>
|
||||
<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')}
|
||||
@ -142,10 +147,12 @@ export default function AboutPage({ content }: AboutPageProps) {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</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'>
|
||||
@ -163,10 +170,13 @@ export default function AboutPage({ content }: AboutPageProps) {
|
||||
<Container>
|
||||
<CompanyTimeline timeline={content.history} />
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Our Stations */}
|
||||
<section className='bg-gray-50'>
|
||||
<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' />
|
||||
@ -178,21 +188,26 @@ export default function AboutPage({ content }: AboutPageProps) {
|
||||
{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'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
{t('about.stations.buttonText')}{' '}
|
||||
<MapPin className='ml-2 h-4 w-4' />
|
||||
</Button> */}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</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' />
|
||||
@ -229,11 +244,14 @@ export default function AboutPage({ content }: AboutPageProps) {
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
|
||||
{/* Our Team */}
|
||||
<section className='bg-gray-50'>
|
||||
<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' />
|
||||
@ -245,6 +263,7 @@ export default function AboutPage({ content }: AboutPageProps) {
|
||||
{t('about.team.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-aos='flip-down'
|
||||
data-aos-duration='600'
|
||||
@ -272,11 +291,14 @@ export default function AboutPage({ content }: AboutPageProps) {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</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' />
|
||||
@ -289,7 +311,10 @@ export default function AboutPage({ content }: AboutPageProps) {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div data-aos='zoom-out-right' className='grid gap-8 md:grid-cols-3'>
|
||||
<div
|
||||
data-aos='zoom-out-right'
|
||||
className='grid gap-8 md:grid-cols-3'
|
||||
>
|
||||
{content.reviews.map((review, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
@ -306,12 +331,16 @@ export default function AboutPage({ content }: AboutPageProps) {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<p className='mb-4 text-gray-600 italic'>"{review.review}"</p>
|
||||
<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 />
|
||||
|
||||
@ -10,14 +10,16 @@ import {
|
||||
} from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/shared/shadcn-ui/card';
|
||||
import Container from '@/shared/shadcn-ui/conteiner';
|
||||
|
||||
import { CtaSection } from '@/widgets/cta-section';
|
||||
|
||||
@ -27,32 +29,6 @@ export const metadata = {
|
||||
'Благотворительные проекты и инициативы Ориё. Мы помогаем обществу и заботимся о будущем.',
|
||||
};
|
||||
|
||||
const events = [
|
||||
{
|
||||
title: 'Благотворительный марафон',
|
||||
description:
|
||||
'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
|
||||
date: '15 июня 2023',
|
||||
location: 'Парк Рудаки, Душанбе',
|
||||
image: '/placeholder.svg?height=200&width=300&text=Марафон',
|
||||
},
|
||||
{
|
||||
title: 'Экологическая акция',
|
||||
description: 'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
|
||||
date: '22 июля 2023',
|
||||
location: 'Река Варзоб, Душанбе',
|
||||
image: '/placeholder.svg?height=200&width=300&text=Экологическая+акция',
|
||||
},
|
||||
{
|
||||
title: 'Сбор школьных принадлежностей',
|
||||
description:
|
||||
'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
|
||||
date: '1-20 августа 2023',
|
||||
location: 'Все заправки GasNetwork',
|
||||
image: '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
|
||||
},
|
||||
];
|
||||
|
||||
export function CharityPage() {
|
||||
const { t } = useTextController();
|
||||
|
||||
@ -71,7 +47,12 @@ export function CharityPage() {
|
||||
priority
|
||||
/>
|
||||
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
||||
<Container data-aos='fade-down' data-aos-duration='800'>
|
||||
<Container>
|
||||
<div
|
||||
data-aos='fade-down'
|
||||
data-aos-duration='800'
|
||||
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='size-6 text-red-500' />
|
||||
@ -83,6 +64,7 @@ export function CharityPage() {
|
||||
{t('charity.hero.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</div>
|
||||
@ -90,6 +72,8 @@ export function CharityPage() {
|
||||
|
||||
{/* Mission Section */}
|
||||
<Container>
|
||||
<section className='py-16'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||
<div>
|
||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||
@ -118,7 +102,9 @@ export function CharityPage() {
|
||||
{t(`charity.mission.principles.${index}.title`)}
|
||||
</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t(`charity.mission.principles.${index}.description`)}
|
||||
{t(
|
||||
`charity.mission.principles.${index}.description`,
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -137,10 +123,13 @@ export function CharityPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
|
||||
{/* Key Figures */}
|
||||
<Container className='bg-red-600 text-white'>
|
||||
<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('charity.stats.title')}
|
||||
@ -161,10 +150,13 @@ export function CharityPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Upcoming Events */}
|
||||
<Container className='bg-gray-50'>
|
||||
<Container>
|
||||
<section className='bg-gray-50 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'>
|
||||
<Calendar className='h-6 w-6 text-red-600' />
|
||||
@ -178,7 +170,34 @@ export function CharityPage() {
|
||||
</div>
|
||||
|
||||
<div className='grid gap-6 md:grid-cols-3'>
|
||||
{events.map((event, index) => (
|
||||
{[
|
||||
{
|
||||
title: 'Благотворительный марафон',
|
||||
description:
|
||||
'Ежегодный благотворительный марафон в поддержку детей с особыми потребностями.',
|
||||
date: '15 июня 2023',
|
||||
location: 'Парк Рудаки, Душанбе',
|
||||
image: '/placeholder.svg?height=200&width=300&text=Марафон',
|
||||
},
|
||||
{
|
||||
title: 'Экологическая акция',
|
||||
description:
|
||||
'Очистка берегов реки Варзоб от мусора и посадка деревьев.',
|
||||
date: '22 июля 2023',
|
||||
location: 'Река Варзоб, Душанбе',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Экологическая+акция',
|
||||
},
|
||||
{
|
||||
title: 'Сбор школьных принадлежностей',
|
||||
description:
|
||||
'Сбор школьных принадлежностей для детей из малообеспеченных семей к новому учебному году.',
|
||||
date: '1-20 августа 2023',
|
||||
location: 'Все заправки Ориё',
|
||||
image:
|
||||
'/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
|
||||
},
|
||||
].map((event, index) => (
|
||||
<Card
|
||||
data-aos='zoom-in-up'
|
||||
key={index}
|
||||
@ -210,18 +229,22 @@ export function CharityPage() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
{/* <CardFooter>
|
||||
<CardFooter>
|
||||
<Button className='w-full bg-red-600 hover:bg-red-700'>
|
||||
{t(`charity.events.button`)}
|
||||
</Button>
|
||||
</CardFooter> */}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
|
||||
{/* How to Help */}
|
||||
<Container>
|
||||
<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'>
|
||||
<Users className='h-6 w-6 text-red-600' />
|
||||
@ -263,7 +286,9 @@ export function CharityPage() {
|
||||
].map((item, index) => (
|
||||
<Card data-aos='zoom-in' key={index} className='text-center'>
|
||||
<CardHeader>
|
||||
<div className='mb-4 flex justify-center'>{item.icon}</div>
|
||||
<div className='mb-4 flex justify-center'>
|
||||
{item.icon}
|
||||
</div>
|
||||
<CardTitle className='break-words hyphens-auto'>
|
||||
{item.title}
|
||||
</CardTitle>
|
||||
@ -274,6 +299,8 @@ export function CharityPage() {
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
<CtaSection />
|
||||
</main>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
import { Download, Eye } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
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';
|
||||
|
||||
export function CertificatesPage() {
|
||||
const { t } = useTextController();
|
||||
@ -67,8 +67,8 @@ export function CertificatesPage() {
|
||||
certificates.length = 0;
|
||||
|
||||
return (
|
||||
<main>
|
||||
<Container>
|
||||
<main className='container mx-auto py-10'>
|
||||
<div className='mb-10 text-center'>
|
||||
<h1 className='mb-4 text-4xl font-bold'>{t('certificates.title')}</h1>
|
||||
<p className='mx-auto max-w-2xl text-lg text-gray-600'>
|
||||
@ -125,7 +125,7 @@ export function CertificatesPage() {
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</main>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
|
||||
import Image from 'next/image';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
import Container from '@/shared/shadcn-ui/conteiner';
|
||||
|
||||
import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
|
||||
import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
|
||||
@ -33,7 +33,7 @@ export function ClientsPage() {
|
||||
priority
|
||||
/>
|
||||
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
||||
<Container className='py-0'>
|
||||
<Container>
|
||||
<div
|
||||
data-aos='fade-down'
|
||||
data-aos-duration='1000'
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
import { Check, Percent } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||
import Container from '@/shared/shadcn-ui/conteiner';
|
||||
|
||||
import { CtaSection } from '@/widgets/cta-section';
|
||||
|
||||
@ -35,7 +35,12 @@ export function LoyaltyPage() {
|
||||
priority
|
||||
/>
|
||||
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
||||
<Container data-aos='fade-down' data-aos-duration='800'>
|
||||
<Container>
|
||||
<div
|
||||
data-aos='fade-down'
|
||||
data-aos-duration='800'
|
||||
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('clients.loyalty.title')}
|
||||
@ -44,13 +49,16 @@ export function LoyaltyPage() {
|
||||
{t('clients.loyalty.description')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Program Overview */}
|
||||
<Container>
|
||||
{/* Program Overview */}
|
||||
<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'>
|
||||
@ -76,7 +84,9 @@ export function LoyaltyPage() {
|
||||
{t('clients.loyalty.programm.conditions-1')}
|
||||
</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t('clients.loyalty.programm.conditions.description-1')}
|
||||
{t(
|
||||
'clients.loyalty.programm.conditions.description-1',
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -89,7 +99,9 @@ export function LoyaltyPage() {
|
||||
{t('clients.loyalty.programm.conditions-2')}
|
||||
</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t('clients.loyalty.programm.conditions.description-2')}
|
||||
{t(
|
||||
'clients.loyalty.programm.conditions.description-2',
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -102,7 +114,9 @@ export function LoyaltyPage() {
|
||||
{t('clients.loyalty.programm.conditions-3')}
|
||||
</h3>
|
||||
<p className='text-gray-600'>
|
||||
{t('clients.loyalty.programm.conditions.description-3')}
|
||||
{t(
|
||||
'clients.loyalty.programm.conditions.description-3',
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -121,11 +135,12 @@ export function LoyaltyPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Works */}
|
||||
<section className='bg-gray-50'>
|
||||
<Container>
|
||||
<section className='bg-gray-50 px-2 py-16'>
|
||||
<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('clients.loyalty.works.title')}
|
||||
@ -134,6 +149,7 @@ export function LoyaltyPage() {
|
||||
{t('clients.loyalty.works.description')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid gap-8 sm:grid-cols-2 lg:grid-cols-4'>
|
||||
<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'>
|
||||
@ -180,11 +196,12 @@ export function LoyaltyPage() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Loyalty Levels */}
|
||||
<Container>
|
||||
<section className='py-16'>
|
||||
<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('clients.loyalty.works.levels.title')}
|
||||
@ -333,6 +350,8 @@ export function LoyaltyPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
|
||||
<CtaSection />
|
||||
|
||||
@ -8,7 +8,6 @@ import { Suspense } from 'react';
|
||||
|
||||
import { LoginForm } from '@/features/auth/login-form';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import {
|
||||
@ -18,6 +17,7 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/shared/shadcn-ui/card';
|
||||
import Container from '@/shared/shadcn-ui/conteiner';
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
@ -134,9 +134,10 @@ export default function LoginPage() {
|
||||
const { t } = useTextController();
|
||||
|
||||
return (
|
||||
<main className='flex min-h-screen flex-col items-center justify-center'>
|
||||
<div className='flex-1'>
|
||||
<Container className='max-w-6xl'>
|
||||
<Container>
|
||||
<div className='flex min-h-screen flex-col items-center justify-center'>
|
||||
<main className='flex-1'>
|
||||
<div className='container max-w-6xl py-16'>
|
||||
<div className='mb-12 flex flex-col items-center text-center'>
|
||||
<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' />
|
||||
@ -155,14 +156,18 @@ export default function LoginPage() {
|
||||
<div className='mt-8 text-center text-sm text-gray-500'>
|
||||
<p>
|
||||
{t('auth.loginIssues')}{' '}
|
||||
<Link href='/contact' className='text-red-600 hover:underline'>
|
||||
<Link
|
||||
href='/contact'
|
||||
className='text-red-600 hover:underline'
|
||||
>
|
||||
{t('auth.contactLink')}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { ComponentProps } from 'react';
|
||||
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
interface ContainerProps extends ComponentProps<'div'> {}
|
||||
|
||||
export function Container({ children, className, ...props }: ContainerProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn('container mx-auto px-2.5 py-8 sm:py-16', className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
src/shared/shadcn-ui/conteiner.tsx
Normal file
10
src/shared/shadcn-ui/conteiner.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
"use client"
|
||||
|
||||
interface ContainerProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
export default function Container({children}: ContainerProps) {
|
||||
return (
|
||||
<div className="container mx-auto px-2.5 py-1">{children}</div>
|
||||
)
|
||||
}
|
||||
@ -4,15 +4,14 @@ import { Users } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import AboutCounter from '@/shared/components/about-counter';
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
|
||||
export const AboutSection = () => {
|
||||
const { t } = useTextController();
|
||||
|
||||
return (
|
||||
<section id='about'>
|
||||
<Container>
|
||||
<section id='about' className='px-2 py-8 sm:py-16'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||
<div>
|
||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||
@ -39,7 +38,7 @@ export const AboutSection = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@ -4,7 +4,6 @@ import { ChevronRight, Heart } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
|
||||
@ -12,8 +11,8 @@ export const CharitySection = () => {
|
||||
const { t } = useTextController();
|
||||
|
||||
return (
|
||||
<section id='charity'>
|
||||
<Container>
|
||||
<section id='charity' className='px-2 py-8 sm: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] w-full overflow-hidden rounded-xl shadow-xl md:order-1'
|
||||
@ -60,7 +59,7 @@ export const CharitySection = () => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
import { Percent } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
import Container from '@/shared/shadcn-ui/conteiner';
|
||||
|
||||
interface Benefit {
|
||||
title: string;
|
||||
@ -34,8 +34,9 @@ export const BenefitsSection = () => {
|
||||
const { t } = useTextController();
|
||||
|
||||
return (
|
||||
<section className='bg-gray-50'>
|
||||
<Container>
|
||||
<section className='bg-gray-50 py-16'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='grid items-center gap-12 md:grid-cols-2'>
|
||||
<div
|
||||
data-aos='fade-right'
|
||||
@ -51,6 +52,7 @@ export const BenefitsSection = () => {
|
||||
<p className='mb-6 text-gray-600'>
|
||||
{t('clients.benefits.subtitle')}
|
||||
</p>
|
||||
|
||||
<div className='space-y-4'>
|
||||
{benefits.map(({ title, description }) => {
|
||||
return (
|
||||
@ -79,7 +81,8 @@ export const BenefitsSection = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
import { CreditCard, type LucideProps, Percent, Wallet } from 'lucide-react';
|
||||
import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
import {
|
||||
Card,
|
||||
@ -12,6 +11,7 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/shared/shadcn-ui/card';
|
||||
import Container from '@/shared/shadcn-ui/conteiner';
|
||||
|
||||
interface ServiceOverview {
|
||||
title: string;
|
||||
@ -50,8 +50,9 @@ export const ServicesOverviewSection = () => {
|
||||
const { t } = useTextController();
|
||||
|
||||
return (
|
||||
<section>
|
||||
<Container>
|
||||
<section className='py-16'>
|
||||
<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('clients.services.title')}
|
||||
@ -60,11 +61,8 @@ export const ServicesOverviewSection = () => {
|
||||
{t('clients.services.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
data-aos='flip-up'
|
||||
data-aos-duration='600'
|
||||
className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'
|
||||
>
|
||||
|
||||
<div data-aos='flip-up' data-aos-duration='600' className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
|
||||
{servicesOverview.map(({ description, Icon, contentText, title }) => {
|
||||
return (
|
||||
<Card
|
||||
@ -85,7 +83,8 @@ export const ServicesOverviewSection = () => {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
|
||||
@ -10,8 +9,8 @@ export const CtaSection = () => {
|
||||
const { t } = useTextController();
|
||||
|
||||
return (
|
||||
<section className='bg-red-600 text-white'>
|
||||
<Container>
|
||||
<section className='bg-red-600 px-2 py-8 text-white sm:py-16'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='flex flex-col items-center text-center'>
|
||||
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
|
||||
{t('home.cta.title')}
|
||||
@ -25,7 +24,7 @@ export const CtaSection = () => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@ -6,7 +6,6 @@ import { Stations } from '@/app/api-utlities/@types';
|
||||
|
||||
import { GasStationMap } from '@/features/map';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
|
||||
interface MapSectionProps {
|
||||
@ -17,8 +16,8 @@ export const MapSection = ({ stations }: MapSectionProps) => {
|
||||
const { t } = useTextController();
|
||||
|
||||
return (
|
||||
<section id='stations' className='bg-gray-50'>
|
||||
<Container>
|
||||
<section id='stations' className='bg-gray-50 px-2 py-8 sm: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' />
|
||||
@ -36,7 +35,7 @@ export const MapSection = ({ stations }: MapSectionProps) => {
|
||||
>
|
||||
<GasStationMap stations={stations} />
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@ -4,7 +4,6 @@ import { Gift } from 'lucide-react';
|
||||
|
||||
import { Discounts } from '@/app/api-utlities/@types/index';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import PromotionSlider from '@/shared/components/promotion-slider';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
|
||||
@ -16,8 +15,8 @@ export const PromotionsSection = ({ discounts }: PromotionsSectionProps) => {
|
||||
const { t } = useTextController();
|
||||
|
||||
return (
|
||||
<section id='promotions' className='bg-gray-50'>
|
||||
<Container>
|
||||
<section id='promotions' className='bg-gray-50 px-2 py-8 sm: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'>
|
||||
<Gift className='h-6 w-6 text-red-600' />
|
||||
@ -30,7 +29,7 @@ export const PromotionsSection = ({ discounts }: PromotionsSectionProps) => {
|
||||
</p>
|
||||
</div>
|
||||
<PromotionSlider discounts={discounts} />
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
|
||||
import AnimatedCounter from '../shared/components/animated-counter';
|
||||
@ -37,8 +36,11 @@ export function StatsSection() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section ref={sectionRef} className='bg-red-600 text-white'>
|
||||
<Container>
|
||||
<section
|
||||
ref={sectionRef}
|
||||
className='bg-red-600 px-2 py-6 text-white sm:py-12'
|
||||
>
|
||||
<div className='container mx-auto'>
|
||||
<div className='grid grid-cols-2 gap-4 text-center sm:gap-8 md:grid-cols-4'>
|
||||
<div className='space-y-2'>
|
||||
<h3 className='text-3xl font-bold'>
|
||||
@ -65,7 +67,7 @@ export function StatsSection() {
|
||||
<p className='text-sm text-white/80'>{t('home.stats.mode')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@ import { Briefcase } from 'lucide-react';
|
||||
|
||||
import { Jobs } from '@/app/api-utlities/@types/index';
|
||||
|
||||
import { Container } from '@/shared/components/container';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
import { Badge } from '@/shared/shadcn-ui/badge';
|
||||
@ -38,8 +37,8 @@ export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
|
||||
const jobsTabsTitle = [allVacancies, ...Array.from(jobsByType.keys())];
|
||||
|
||||
return (
|
||||
<section id='vacancies'>
|
||||
<Container>
|
||||
<section id='vacancies' className='px-2 py-8 sm: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'>
|
||||
<Briefcase className='h-6 w-6 text-red-600' />
|
||||
@ -89,7 +88,7 @@ export const VacanciesSection = ({ jobs }: VacanciesSectionProps) => {
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user