Integrated media content to all pages

src/pages-templates/about/index.tsx

@@ -12,6 +12,7 @@ import AnimatedCounter from '@/shared/components/animated-counter';
 import { Container } from '@/shared/components/container';
 import { Review } from '@/shared/components/review';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { useMediaController } from '@/shared/media/hooks/use-media-controller';
 import { Button } from '@/shared/shadcn-ui/button';
 import { Card, CardContent } from '@/shared/shadcn-ui/card';
 
@@ -25,6 +26,7 @@ export interface AboutPageProps {
 
 export default function AboutPage({ content }: AboutPageProps) {
   const { t } = useTextController();
+  const { m } = useMediaController();
 
   return (
     <div className='flex min-h-screen flex-col'>
@@ -33,7 +35,10 @@ export default function AboutPage({ content }: AboutPageProps) {
         <section className='relative'>
           <div className='relative h-[400px] w-full overflow-hidden'>
             <Image
-              src='/placeholder.svg?height=400&width=1920&text=Наша+История'
+              src={
+                m('about.hero-section.banner') ||
+                '/placeholder.svg?height=400&width=1920&text=Наша+История'
+              }
               alt={t('about.hero.imageAlt')}
               width={1920}
               height={400}
@@ -102,7 +107,10 @@ export default function AboutPage({ content }: AboutPageProps) {
               className='relative h-[500px] overflow-hidden rounded-xl shadow-xl'
             >
               <Image
-                src='/placeholder.svg?height=500&width=600&text=Главный+офис'
+                src={
+                  m('about.second-section.banner') ||
+                  '/placeholder.svg?height=500&width=600&text=Главный+офис'
+                }
                 alt={t('about.overview.imageAlt')}
                 fill
                 className='object-cover'

src/pages-templates/clients/index.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image';
 
 import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { useMediaController } from '@/shared/media/hooks/use-media-controller';
 
 import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
 import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
@@ -11,6 +12,7 @@ import { CtaSection } from '@/widgets/cta-section';
 
 export function ClientsPage() {
   const { t } = useTextController();
+  const { m } = useMediaController();
 
   return (
     <div className='flex min-h-screen flex-col'>
@@ -19,7 +21,10 @@ export function ClientsPage() {
         <section className='relative'>
           <div className='relative h-[400px] w-full overflow-hidden'>
             <Image
-              src='/placeholder.svg?height=400&width=1920&text=Для+наших+клиентов'
+              src={
+                m('clients.hero-section.banner') ||
+                '/placeholder.svg?height=400&width=1920&text=Для+наших+клиентов'
+              }
               alt='Для наших клиентов'
               width={1920}
               height={400}

src/pages-templates/clients/loyalty/index.tsx

@@ -16,8 +16,6 @@ export function LoyaltyPage() {
   const { t } = useTextController();
   const { m } = useMediaController();
 
-  const loyaltyProgrammMedia = m('page.loyaly.banner1');
-
   return (
     <div className='flex min-h-screen flex-col'>
       <main className='flex-1'>
@@ -25,7 +23,10 @@ export function LoyaltyPage() {
         <section className='relative'>
           <div className='relative h-[400px] w-full overflow-hidden'>
             <Image
-              src='/placeholder.svg?height=400&width=1920&text=Программа+лояльности'
+              src={
+                m('loyalty.hero-section.banner') ||
+                '/placeholder.svg?height=400&width=1920&text=Программа+лояльности'
+              }
               alt='Программа лояльности'
               width={1920}
               height={400}
@@ -111,7 +112,7 @@ export function LoyaltyPage() {
               className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
             >
               <Image
-                src={loyaltyProgrammMedia?.photo || ProgrammImg}
+                src={m('loyalty.second-section.banner') || ProgrammImg}
                 alt='Программа лояльности'
                 fill
                 className='w-full object-contain p-2.5'

src/shared/assets/logo.tsx

@@ -7,12 +7,11 @@ import { useMediaController } from '../media/hooks/use-media-controller';
 
 export const Logo = () => {
   const { m } = useMediaController();
-  const logo = m('logo');
 
   return (
     <Link className='flex items-center gap-2' href={'/'}>
       <Image
-        src={logo?.photo || '/logo-new.png'}
+        src={m('logo') || '/logo-new.png'}
         alt='oriyo-logo'
         width={110}
         height={40}

src/shared/media/context/media-control.provider.tsx

@@ -7,7 +7,7 @@ import { MediaItem } from '@/shared/types/media.type';
 export type MediaMap = Record<string, MediaItem>;
 
 type MediaControlContextType = {
-  m: (key: string) => MediaItem | undefined;
+  m: (key: string) => string | null;
 };
 
 export const MediaControlContext = createContext<
@@ -26,12 +26,12 @@ export function MediaControlProvider({
     return pr;
   }, {} as MediaMap);
 
-  const getMedia = (key: string): MediaItem | undefined => {
+  const getMedia = (key: string): string | null => {
     if (mediaMap?.[key]) {
-      return mediaMap[key];
+      return mediaMap[key].photo;
     }
     console.warn(`Media key not found: ${key}`);
-    return undefined;
+    return null;
   };
 
   return (

src/widgets/about-section.tsx

@@ -6,9 +6,11 @@ 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';
+import { useMediaController } from '@/shared/media/hooks/use-media-controller';
 
 export const AboutSection = () => {
   const { t } = useTextController();
+  const { m } = useMediaController();
 
   return (
     <section id='about'>
@@ -37,7 +39,7 @@ export const AboutSection = () => {
             data-aos='zoom-in-down'
           >
             <Image
-              src='/clients/loyatly/oriyo-price-board.png'
+              src={m('main.price-board') || ''}
               alt='About our company'
               fill
               className='w-full object-contain p-2.5'

src/widgets/charity-section.tsx

@@ -13,8 +13,6 @@ export const CharitySection = () => {
   const { t } = useTextController();
   const { m } = useMediaController();
 
-  const charityMedia = m('home.charity.banner');
-
   return (
     <section id='charity'>
       <Container>
@@ -25,7 +23,8 @@ export const CharitySection = () => {
           >
             <Image
               src={
-                charityMedia?.photo || '/placeholder.svg?height=400&width=600'
+                m('home.charity.banner') ||
+                '/placeholder.svg?height=400&width=600'
               }
               alt='Charity Foundation'
               fill

src/widgets/clients/ui/benefits-section.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image';
 
 import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
+import { useMediaController } from '@/shared/media/hooks/use-media-controller';
 
 interface Benefit {
   title: string;
@@ -32,6 +33,7 @@ const benefits: Array<Benefit> = [
 
 export const BenefitsSection = () => {
   const { t } = useTextController();
+  const { m } = useMediaController();
 
   return (
     <section className='bg-gray-50'>
@@ -72,7 +74,10 @@ export const BenefitsSection = () => {
             className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'
           >
             <Image
-              src='/placeholder.svg?height=400&width=600&text=Преимущества+для+клиентов'
+              src={
+                m('clients.third-section.banner') ||
+                '/placeholder.svg?height=400&width=600&text=Преимущества+для+клиентов'
+              }
               alt='Преимущества для клиентов'
               fill
               className='object-cover'

src/widgets/hero-section.tsx

@@ -12,8 +12,6 @@ export const HeroSection = () => {
   const { t } = useTextController();
   const { m } = useMediaController();
 
-  const banner = m('home.hero-section.banner');
-
   return (
     <section className='relative'>
       <div className='relative h-[550px] w-full overflow-hidden bg-black sm:h-[500px] xl:h-[650px]'>
@@ -28,7 +26,7 @@ export const HeroSection = () => {
           className='sm:!-top-16 sm:-right-40 sm:!h-[70vh] sm:!w-[100vh] md:!-top-10 md:!-right-30 xl:!top-0 xl:!right-0'
         >
           <Image
-            src={banner?.photo || '/oriyo_bg.jpeg'}
+            src={m('home.hero-section.banner') || '/oriyo_bg.jpeg'}
             alt='Oriyo Station'
             fill
             className='object-cover sm:scale-110 md:scale-120 xl:scale-140'

src/widgets/map-section.tsx

@@ -8,7 +8,6 @@ import { GasStationMap } from '@/features/map';
 
 import { Container } from '@/shared/components/container';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
-import { useMediaController } from '@/shared/media/hooks/use-media-controller';
 
 interface MapSectionProps {
   stations: Stations;
@@ -16,9 +15,6 @@ interface MapSectionProps {
 
 export const MapSection = ({ stations }: MapSectionProps) => {
   const { t } = useTextController();
-  const { m } = useMediaController();
-
-  const stationsMedia = m('stations.main');
 
   return (
     <section id='stations' className='bg-gray-50'>