update: update for the links | fix: fix animation for the card | remove: remove section fuel-card #5
BIN
public/clients/loyalty-card.png
Normal file
BIN
public/clients/loyalty-card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
@ -1,11 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { ChevronLeft, ChevronRight} from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import { Card, CardContent } from '@/shared/shadcn-ui/card';
|
||||
import Link from 'next/link';
|
||||
|
||||
const promotions = [
|
||||
{
|
||||
@ -106,6 +107,7 @@ export default function PromotionSlider() {
|
||||
<span className='text-xs text-gray-500'>
|
||||
Действует до: {promo.validUntil}
|
||||
</span>
|
||||
<Link href='#'>
|
||||
<Button
|
||||
variant='outline'
|
||||
size='sm'
|
||||
@ -113,6 +115,7 @@ export default function PromotionSlider() {
|
||||
>
|
||||
Подробнее
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@ -74,18 +74,22 @@ export function CompanyTimeline() {
|
||||
data-aos='zoom-in-down'
|
||||
>
|
||||
<div className='mb-2 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||
<Calendar className='h-5 w-5 text-red-600' />
|
||||
<Calendar className='size-5 text-red-600' />
|
||||
</div>
|
||||
<h3 className='text-xl font-bold'>{event.year}</h3>
|
||||
<h4 className='mb-2 text-lg font-semibold'>{event.title}</h4>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`${index % 2 === 0 ? 'md:pl-10' : 'md:order-first md:pr-10 md:text-right'}`}
|
||||
className={
|
||||
index % 2 === 0
|
||||
? 'md:pl-10'
|
||||
: 'md:order-first md:pr-10 md:text-right'
|
||||
}
|
||||
>
|
||||
<Card
|
||||
className='overflow-hidden transition-all hover:shadow-md'
|
||||
data-aos={index % 2 === 0 ? 'fade-left' : 'fade-right'}
|
||||
data-aos={'fade-up'}
|
||||
>
|
||||
<CardContent className='p-4'>
|
||||
<p className='text-gray-600'>{event.description}</p>
|
||||
@ -94,8 +98,8 @@ export function CompanyTimeline() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='absolute top-5 left-1/2 -ml-3 hidden h-6 w-6 items-center justify-center rounded-full bg-red-600 md:flex'>
|
||||
<div className='h-3 w-3 rounded-full bg-white'></div>
|
||||
<div className='absolute top-5 left-1/2 -ml-3 hidden size-6 items-center justify-center rounded-full bg-red-600 md:flex'>
|
||||
<div className='size-3 rounded-full bg-white'></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@ -105,16 +109,18 @@ export function CompanyTimeline() {
|
||||
<div className='mt-8 text-center'>
|
||||
<Button
|
||||
variant='outline'
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
onClick={() => {
|
||||
setExpanded(!expanded);
|
||||
}}
|
||||
className='inline-flex items-center'
|
||||
>
|
||||
{expanded ? (
|
||||
<>
|
||||
Свернуть <ChevronUp className='ml-2 h-4 w-4' />
|
||||
Свернуть <ChevronUp className='ml-2 size-4' />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Показать больше <ChevronDown className='ml-2 h-4 w-4' />
|
||||
Показать больше <ChevronDown className='ml-2 size-4' />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
import { useLanguage } from '@/shared/language';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const CtaSection = () => {
|
||||
const { t } = useLanguage();
|
||||
@ -15,9 +16,11 @@ export const CtaSection = () => {
|
||||
</h2>
|
||||
<p className='mb-8 max-w-2xl'>{t('home.cta.description')}</p>
|
||||
<div className='flex flex-col gap-4 sm:flex-row'>
|
||||
<Link href='#'>
|
||||
<Button variant='secondary'>
|
||||
{t('common.buttons.purchaseCardAtGasStations')}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -42,7 +42,7 @@ export function DesktopNav() {
|
||||
<ul className='grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]'>
|
||||
<li className='row-span-4'>
|
||||
<NavigationMenuLink asChild>
|
||||
<a
|
||||
<Link
|
||||
className='flex h-full w-full flex-col justify-end rounded-md bg-gradient-to-b from-red-500 to-red-700 p-6 no-underline outline-none select-none focus:shadow-md'
|
||||
href='/clients'
|
||||
>
|
||||
@ -53,21 +53,15 @@ export function DesktopNav() {
|
||||
Специальные предложения, программы лояльности и удобные
|
||||
способы оплаты для наших клиентов
|
||||
</p>
|
||||
</a>
|
||||
</Link>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
<ListItem href='/clients/loyalty' title='Программа лояльности'>
|
||||
Накапливайте баллы и получайте скидки на топливо и услуги
|
||||
</ListItem>
|
||||
<ListItem href='/clients/fuel-card' title='Топливная карта'>
|
||||
Удобный способ оплаты топлива для физических и юридических лиц
|
||||
</ListItem>
|
||||
<ListItem href='/clients/certificates' title='Сертификаты'>
|
||||
Подарочные сертификаты на топливо и услуги нашей сети
|
||||
</ListItem>
|
||||
<ListItem href='/clients/payment' title='Способы оплаты'>
|
||||
Различные способы оплаты на наших заправочных станциях
|
||||
</ListItem>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
@ -6,6 +6,7 @@ import '../../src/app/globals.css'
|
||||
|
||||
import { useLanguage } from '@/shared/language';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const HeroSection = () => {
|
||||
const { t } = useLanguage();
|
||||
@ -33,14 +34,18 @@ export const HeroSection = () => {
|
||||
{t('home.hero.description')}
|
||||
</p>
|
||||
<div className='flex gap-4'>
|
||||
<Link href='#'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
{t('common.buttons.findStation')}{' '}
|
||||
<MapPin className='ml-2 h-4 w-4' />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href='#'>
|
||||
<Button variant='outline' className='animate-pulse'
|
||||
>
|
||||
{t('common.buttons.learnMore')}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,9 +2,11 @@
|
||||
|
||||
import { Handshake } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import png from './7fe1595f25e868852247248389bc2b3ac910bf94.png'
|
||||
|
||||
import { useLanguage } from '@/shared/language';
|
||||
import { Button } from '@/shared/shadcn-ui/button';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const PartnersSection = () => {
|
||||
const { t } = useLanguage();
|
||||
@ -28,7 +30,7 @@ export const PartnersSection = () => {
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8].map((partner) => (
|
||||
<div
|
||||
key={partner}
|
||||
className='flex h-32 items-center justify-center rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
|
||||
className='flex h-32 items-center justify-center flex-col gap-0.5 rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
|
||||
data-aos='flip-left'
|
||||
>
|
||||
<Image
|
||||
@ -38,6 +40,7 @@ export const PartnersSection = () => {
|
||||
height={80}
|
||||
className='max-h-16 w-auto'
|
||||
/>
|
||||
<h4 className='font-extralight'>Название</h4>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -49,9 +52,11 @@ export const PartnersSection = () => {
|
||||
<p className='mx-auto mb-6 max-w-2xl text-gray-600'>
|
||||
{t('home.partners.becomePartnerText')}
|
||||
</p>
|
||||
<Link href='#'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
{t('common.buttons.contactUs')}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user