adilovcode/oriyo_next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: added adaptability for pages

Browse Source
This commit is contained in:
khadiatullo 2025-05-01 05:14:46 +03:00
parent cc5db77494
commit cad373568e
14 changed files with 972 additions and 909 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@ -37,7 +37,7 @@ export default async function RootLayout({
className='scroll-smooth' className='scroll-smooth'
style={{ scrollBehavior: 'smooth' }} style={{ scrollBehavior: 'smooth' }}
> >
<body className={`${inter.className} antialiased`}> <body className={`${inter.className} antialiased min-w-2xs`}>
<Providers textItems={response.data as TextItem[]}> <Providers textItems={response.data as TextItem[]}>
<Header /> <Header />
{children} {children}

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

@ -97,7 +97,7 @@ export function CorporateDashboard() {
const { t } = useTextController(); const { t } = useTextController();
return ( return (
<div className='flex min-h-screen flex-col'> <div className='flex min-h-screen flex-col px-2.5'>
<main className='flex-1 py-10'> <main className='flex-1 py-10'>
<div className='container mx-auto max-w-6xl'> <div className='container mx-auto max-w-6xl'>
<div className='mb-8 flex items-center justify-between'> <div className='mb-8 flex items-center justify-between'>

2
src/pages-templates/(dashboard)/customer-dashboard/index.tsx
View File

@ -22,7 +22,7 @@ export function CustomerDashboard() {
const { data, isLoading } = useFetchMyBonusInfoQuery({}); const { data, isLoading } = useFetchMyBonusInfoQuery({});
return ( return (
<div className='flex min-h-screen flex-col'> <div className='flex min-h-screen flex-col px-2.5'>
<main className='flex-1 py-10'> <main className='flex-1 py-10'>
<div className='container mx-auto max-w-6xl'> <div className='container mx-auto max-w-6xl'>
<div className='mb-8 flex items-center justify-between'> <div className='mb-8 flex items-center justify-between'>

23
src/pages-templates/about/index.tsx
View File

@ -13,6 +13,7 @@ import { Card, CardContent } from '@/shared/shadcn-ui/card';
import { CompanyTimeline } from '@/widgets/about-page/company-timeline'; import { CompanyTimeline } from '@/widgets/about-page/company-timeline';
import { StationGallery } from '@/widgets/about-page/station-gallery'; import { StationGallery } from '@/widgets/about-page/station-gallery';
import { CtaSection } from '@/widgets/cta-section'; import { CtaSection } from '@/widgets/cta-section';
import Container from '@/shared/shadcn-ui/conteiner';
export const metadata = { export const metadata = {
title: 'about.metadata.title', title: 'about.metadata.title',
@ -36,7 +37,7 @@ export default function AboutPage() {
className='object-cover' className='object-cover'
priority priority
/> />
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'> <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30 px-2'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='max-w-2xl space-y-4 text-white'> <div className='max-w-2xl space-y-4 text-white'>
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'> <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
@ -52,6 +53,7 @@ export default function AboutPage() {
</section> </section>
{/* Company Overview */} {/* Company Overview */}
<Container>
<section className='py-16'> <section className='py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='grid items-center gap-12 md:grid-cols-2'> <div className='grid items-center gap-12 md:grid-cols-2'>
@ -72,7 +74,7 @@ export default function AboutPage() {
{t('about.overview.description3')} {t('about.overview.description3')}
</p> </p>
<div className='mb-6 grid grid-cols-2 gap-4'> <div className='mb-6 grid md:grid-cols-2 gap-4 grid-cols-1'>
{[0, 1, 2, 3].map((index) => ( {[0, 1, 2, 3].map((index) => (
<div key={index} className='flex items-start'> <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'> <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
@ -101,6 +103,7 @@ export default function AboutPage() {
</div> </div>
</div> </div>
</section> </section>
</Container>
{/* Stats Section */} {/* Stats Section */}
<section className='bg-red-600 py-16 text-white'> <section className='bg-red-600 py-16 text-white'>
@ -113,7 +116,7 @@ export default function AboutPage() {
{t('about.stats.subtitle')} {t('about.stats.subtitle')}
</p> </p>
</div> </div>
<div className='grid grid-cols-2 gap-8 text-center md:grid-cols-4'> <div className='grid grid-cols-1 sm:grid-cols-2 gap-8 text-center md:grid-cols-4'>
{[0, 1, 2, 3].map((index) => ( {[0, 1, 2, 3].map((index) => (
<div key={index} className='space-y-2'> <div key={index} className='space-y-2'>
<h3 className='text-4xl font-bold'> <h3 className='text-4xl font-bold'>
@ -139,6 +142,7 @@ export default function AboutPage() {
{/* Our History */} {/* Our History */}
<section className='py-16'> <section className='py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<Container>
<div className='mb-12 flex flex-col items-center justify-center text-center'> <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'> <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' /> <History className='h-6 w-6 text-red-600' />
@ -150,12 +154,17 @@ export default function AboutPage() {
{t('about.history.subtitle')} {t('about.history.subtitle')}
</p> </p>
</div> </div>
</Container>
<Container>
<CompanyTimeline /> <CompanyTimeline />
</Container>
</div> </div>
</section> </section>
{/* Our Stations */} {/* Our Stations */}
<Container>
<section className='bg-gray-50 py-16'> <section className='bg-gray-50 py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='mb-12 flex flex-col items-center justify-center text-center'> <div className='mb-12 flex flex-col items-center justify-center text-center'>
@ -183,8 +192,10 @@ export default function AboutPage() {
</div> </div>
</div> </div>
</section> </section>
</Container>
{/* Our Values */} {/* Our Values */}
<Container>
<section className='py-16'> <section className='py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='mb-12 flex flex-col items-center justify-center text-center'> <div className='mb-12 flex flex-col items-center justify-center text-center'>
@ -221,8 +232,10 @@ export default function AboutPage() {
</div> </div>
</div> </div>
</section> </section>
</Container>
{/* Our Team */} {/* Our Team */}
<Container>
<section className='bg-gray-50 py-16'> <section className='bg-gray-50 py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='mb-12 flex flex-col items-center justify-center text-center'> <div className='mb-12 flex flex-col items-center justify-center text-center'>
@ -264,8 +277,11 @@ export default function AboutPage() {
</div> </div>
</div> </div>
</section> </section>
</Container>
{/* Testimonials */} {/* Testimonials */}
<Container>
<section className='py-16'> <section className='py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='mb-12 flex flex-col items-center justify-center text-center'> <div className='mb-12 flex flex-col items-center justify-center text-center'>
@ -309,6 +325,7 @@ export default function AboutPage() {
</div> </div>
</div> </div>
</section> </section>
</Container>
<CtaSection /> <CtaSection />
</main> </main>

19
src/pages-templates/charity/index.tsx
View File

@ -21,6 +21,7 @@ import {
} from '@/shared/shadcn-ui/card'; } from '@/shared/shadcn-ui/card';
import { CtaSection } from '@/widgets/cta-section'; import { CtaSection } from '@/widgets/cta-section';
import Container from '@/shared/shadcn-ui/conteiner';
export const metadata = { export const metadata = {
title: 'Благотворительность | GasNetwork - Сеть заправок в Таджикистане', title: 'Благотворительность | GasNetwork - Сеть заправок в Таджикистане',
@ -46,24 +47,27 @@ export function CharityPage() {
priority priority
/> />
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'> <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
<Container>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='max-w-2xl space-y-6 text-white'> <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'> <div className='inline-flex items-center justify-center rounded-full bg-red-600/20 p-2'>
<Heart className='size-6 text-red-500' /> <Heart className='size-6 text-red-500' />
</div> </div>
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'> <h1 className='text-3xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
{t('charity.hero.title')} {t('charity.hero.title')}
</h1> </h1>
<p className='text-xl text-gray-200'> <p className='text-lg sm:text-xl text-gray-200'>
{t('charity.hero.subtitle')} {t('charity.hero.subtitle')}
</p> </p>
</div> </div>
</div> </div>
</Container>
</div> </div>
</div> </div>
</section> </section>
{/* Mission Section */} {/* Mission Section */}
<Container>
<section className='py-16'> <section className='py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='grid items-center gap-12 md:grid-cols-2'> <div className='grid items-center gap-12 md:grid-cols-2'>
@ -108,6 +112,7 @@ export function CharityPage() {
</div> </div>
</div> </div>
</section> </section>
</Container>
{/* Key Figures */} {/* Key Figures */}
<section className='bg-red-600 py-16 text-white'> <section className='bg-red-600 py-16 text-white'>
@ -136,6 +141,7 @@ export function CharityPage() {
</section> </section>
{/* Upcoming Events */} {/* Upcoming Events */}
<Container>
<section className='bg-gray-50 py-16'> <section className='bg-gray-50 py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='mb-12 text-center'> <div className='mb-12 text-center'>
@ -179,7 +185,8 @@ export function CharityPage() {
'/placeholder.svg?height=200&width=300&text=Школьные+принадлежности', '/placeholder.svg?height=200&width=300&text=Школьные+принадлежности',
}, },
].map((event, index) => ( ].map((event, index) => (
<Card key={index} className='overflow-hidden'> <Card key={index} className='overflow-hidden flex flex-col justify-between'>
<div>
<div className='relative h-48 w-full'> <div className='relative h-48 w-full'>
<Image <Image
src={event.image || '/placeholder.svg'} src={event.image || '/placeholder.svg'}
@ -189,7 +196,7 @@ export function CharityPage() {
/> />
</div> </div>
<CardHeader> <CardHeader>
<CardTitle>{event.title}</CardTitle> <CardTitle className='text-xl lg:text-2xl'>{event.title}</CardTitle>
</CardHeader> </CardHeader>
<CardContent className='space-y-4'> <CardContent className='space-y-4'>
<p className='text-gray-600'>{event.description}</p> <p className='text-gray-600'>{event.description}</p>
@ -202,6 +209,7 @@ export function CharityPage() {
{event.location} {event.location}
</div> </div>
</CardContent> </CardContent>
</div>
<CardFooter> <CardFooter>
<Button className='w-full bg-red-600 hover:bg-red-700'> <Button className='w-full bg-red-600 hover:bg-red-700'>
{t(`charity.events.button`)} {t(`charity.events.button`)}
@ -212,8 +220,10 @@ export function CharityPage() {
</div> </div>
</div> </div>
</section> </section>
</Container>
{/* How to Help */} {/* How to Help */}
<Container>
<section className='py-16'> <section className='py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='mb-12 text-center'> <div className='mb-12 text-center'>
@ -270,6 +280,7 @@ export function CharityPage() {
</div> </div>
</div> </div>
</section> </section>
</Container>
<CtaSection /> <CtaSection />
</main> </main>
</div> </div>

5
src/pages-templates/clients/certificates/index.tsx
View File

@ -6,6 +6,7 @@ import Image from 'next/image';
import { useTextController } from '@/shared/language/hooks/use-text-controller'; import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { Button } from '@/shared/shadcn-ui/button'; import { Button } from '@/shared/shadcn-ui/button';
import { Card, CardContent } from '@/shared/shadcn-ui/card'; import { Card, CardContent } from '@/shared/shadcn-ui/card';
import Container from '@/shared/shadcn-ui/conteiner';
export function CertificatesPage() { export function CertificatesPage() {
const { t } = useTextController(); const { t } = useTextController();
@ -64,7 +65,7 @@ export function CertificatesPage() {
]; ];
return ( return (
<> <Container>
<main className='container mx-auto py-10'> <main className='container mx-auto py-10'>
<div className='mb-10 text-center'> <div className='mb-10 text-center'>
<h1 className='mb-4 text-4xl font-bold'>{t('certificates.title')}</h1> <h1 className='mb-4 text-4xl font-bold'>{t('certificates.title')}</h1>
@ -122,6 +123,6 @@ export function CertificatesPage() {
))} ))}
</div> </div>
</main> </main>
</> </Container>
); );
} }

3
src/pages-templates/clients/index.tsx
View File

@ -7,6 +7,7 @@ import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { BenefitsSection } from '@/widgets/clients/ui/benefits-section'; import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section'; import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
import { CtaSection } from '@/widgets/cta-section'; import { CtaSection } from '@/widgets/cta-section';
import Container from '@/shared/shadcn-ui/conteiner';
export const metadata = { export const metadata = {
title: 'Клиентам | GasNetwork - Сеть заправок в Таджикистане', title: 'Клиентам | GasNetwork - Сеть заправок в Таджикистане',
@ -32,6 +33,7 @@ export function ClientsPage() {
priority priority
/> />
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'> <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
<Container>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='max-w-2xl space-y-4 text-white'> <div className='max-w-2xl space-y-4 text-white'>
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'> <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
@ -42,6 +44,7 @@ export function ClientsPage() {
</p> </p>
</div> </div>
</div> </div>
</Container>
</div> </div>
</div> </div>
</section> </section>

6
src/pages-templates/clients/loyalty/index.tsx
View File

@ -7,6 +7,7 @@ import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { Card, CardContent } from '@/shared/shadcn-ui/card'; import { Card, CardContent } from '@/shared/shadcn-ui/card';
import { CtaSection } from '@/widgets/cta-section'; import { CtaSection } from '@/widgets/cta-section';
import Container from '@/shared/shadcn-ui/conteiner';
export const metadata = { export const metadata = {
title: 'Программа лояльности | GasNetwork - Сеть заправок в Таджикистане', title: 'Программа лояльности | GasNetwork - Сеть заправок в Таджикистане',
@ -32,6 +33,7 @@ export function LoyaltyPage() {
priority priority
/> />
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'> <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
<Container>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='max-w-2xl space-y-4 text-white'> <div className='max-w-2xl space-y-4 text-white'>
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'> <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
@ -42,10 +44,12 @@ export function LoyaltyPage() {
</p> </p>
</div> </div>
</div> </div>
</Container>
</div> </div>
</div> </div>
</section> </section>
<Container>
{/* Program Overview */} {/* Program Overview */}
<section className='py-16'> <section className='py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
@ -320,6 +324,8 @@ export function LoyaltyPage() {
</div> </div>
</div> </div>
</section> </section>
</Container>
<CtaSection /> <CtaSection />
</main> </main>

3
src/pages-templates/login/index.tsx
View File

@ -22,6 +22,7 @@ import {
TabsList, TabsList,
TabsTrigger, TabsTrigger,
} from '@/shared/shadcn-ui/tabs'; } from '@/shared/shadcn-ui/tabs';
import Container from '@/shared/shadcn-ui/conteiner';
const tabs = [ const tabs = [
{ {
@ -51,6 +52,7 @@ export default function LoginPage() {
}; };
return ( return (
<Container>
<div className='flex min-h-screen flex-col items-center justify-center'> <div className='flex min-h-screen flex-col items-center justify-center'>
<main className='flex-1'> <main className='flex-1'>
<div className='container max-w-6xl py-16'> <div className='container max-w-6xl py-16'>
@ -153,5 +155,6 @@ export default function LoginPage() {
</div> </div>
</main> </main>
</div> </div>
</Container>
); );
} }

10
src/shared/shadcn-ui/conteiner.tsx Normal file
View 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>
)
}

2
src/widgets/about-page/station-gallery.tsx
View File

@ -76,7 +76,7 @@ export function StationGallery() {
const { t } = useTextController(); const { t } = useTextController();
return ( return (
<div className='space-y-8'> <div className='space-y-8 px-2'>
<div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl md:h-[500px]'> <div className='relative h-[400px] overflow-hidden rounded-xl shadow-xl md:h-[500px]'>
<Image <Image
src={stations[currentImage].image || '/placeholder.svg'} src={stations[currentImage].image || '/placeholder.svg'}

3
src/widgets/clients/ui/benefits-section.tsx
View File

@ -4,6 +4,7 @@ import { Percent } from 'lucide-react';
import Image from 'next/image'; import Image from 'next/image';
import { useTextController } from '@/shared/language/hooks/use-text-controller'; import { useTextController } from '@/shared/language/hooks/use-text-controller';
import Container from '@/shared/shadcn-ui/conteiner';
interface Benefit { interface Benefit {
title: string; title: string;
@ -33,6 +34,7 @@ export const BenefitsSection = () => {
const { t } = useTextController(); const { t } = useTextController();
return ( return (
<Container>
<section className='bg-gray-50 py-16'> <section className='bg-gray-50 py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='grid items-center gap-12 md:grid-cols-2'> <div className='grid items-center gap-12 md:grid-cols-2'>
@ -74,5 +76,6 @@ export const BenefitsSection = () => {
</div> </div>
</div> </div>
</section> </section>
</Container>
); );
}; };

3
src/widgets/clients/ui/services-overview-section.tsx
View File

@ -11,6 +11,7 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from '@/shared/shadcn-ui/card'; } from '@/shared/shadcn-ui/card';
import Container from '@/shared/shadcn-ui/conteiner';
interface ServiceOverview { interface ServiceOverview {
title: string; title: string;
@ -49,6 +50,7 @@ export const ServicesOverviewSection = () => {
const { t } = useTextController(); const { t } = useTextController();
return ( return (
<Container>
<section className='py-16'> <section className='py-16'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='mb-12 text-center'> <div className='mb-12 text-center'>
@ -83,5 +85,6 @@ export const ServicesOverviewSection = () => {
</div> </div>
</div> </div>
</section> </section>
</Container>
); );
}; };

8
src/widgets/footer.tsx
View File

@ -11,7 +11,8 @@ export const Footer = () => {
return ( return (
<footer className='bg-gray-900 px-4 py-12 text-white'> <footer className='bg-gray-900 px-4 py-12 text-white'>
<div className='containe mx-autor'> <div className='containe mx-autor'>
<div className='grid grid-cols-1 gap-8 md:grid-cols-3'> <div className='grid grid-cols-1 gap-8 md:gap-4 md:grid-cols-3'>
<div className='flex md:justify-center md:items-center'>
<div> <div>
<div className='mb-4 flex items-center gap-2'> <div className='mb-4 flex items-center gap-2'>
<Fuel className='h-6 w-6 text-red-500' /> <Fuel className='h-6 w-6 text-red-500' />
@ -59,6 +60,8 @@ export const Footer = () => {
</a> </a>
</div> </div>
</div> </div>
</div>
<div className='flex md:justify-center md:items-center'>
<div> <div>
<h3 className='mb-4 text-lg font-semibold'> <h3 className='mb-4 text-lg font-semibold'>
{t('common.footer.contacts')} {t('common.footer.contacts')}
@ -78,6 +81,8 @@ export const Footer = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
<div className='flex md:justify-center md:items-center'>
<div> <div>
<h3 className='mb-4 text-lg font-semibold'> <h3 className='mb-4 text-lg font-semibold'>
{t('common.footer.navigation')} {t('common.footer.navigation')}
@ -120,6 +125,7 @@ export const Footer = () => {
</ul> </ul>
</div> </div>
</div> </div>
</div>
<div className='mt-8 border-t border-gray-800 pt-8 text-center text-gray-400'> <div className='mt-8 border-t border-gray-800 pt-8 text-center text-gray-400'>
<p> <p>
&copy; {new Date().getFullYear()} {t('common.name')}.{' '} &copy; {new Date().getFullYear()} {t('common.name')}.{' '}