final build

public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

public/sitemap.xml

@@ -1,3 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+фывфыв
 </sitemapindex>

src/app/[category]/[service]/page.tsx

@@ -1,11 +1,93 @@
+import { BannerItem } from "@/components/Banner/BannerItem";
+import { Call } from "@/components/Call/Call";
+import { Portfolio } from "@/components/Portfolio/Portfolio";
+import { Stages } from "@/components/Stages/Stages";
+import { baseFetch } from "@/core/api/baseFetch";
+import { getItemByFilter } from "@/core/api/getItemsByFilter";
+import { API_URL } from "@/core/config/api.config";
+import { parseObjToQuerytsts } from "@/core/utils/api/parseObjToQuery";
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
 
-interface ICategoryPage {
+
+export async function generateMetadata(
+  { params }: IServicePage
+): Promise<Metadata> {
+
+  const service: IService = await getItemByFilter('services', ['href'], params.service, [
+    ['populate', 'desktopExample'],
+    ['populate', 'mobileExample']
+  ])
+
+  if (!service) {
+    notFound();
+  }
+
+  return {
+    title: `${service.header} | Pixel Perfect`,
+    description: service.description,
+    openGraph: {
+      title: `${service.header} | Pixel Perfect`,
+      description: service.description,
+      url: API_URL,
+      siteName: 'Pixel Perfect',
+      images: [
+        {
+          url: '/favicon.png',
+          width: 500,
+          height: 500,
+        },
+      ],
+      locale: 'ru',
+      type: 'website',
+    },
+  }
+}
+
+
+interface IServicePage {
   params: { service: string }
 }
 
 
-export default async function Service({ params }: ICategoryPage) {
+export default async function Service({ params }: IServicePage) {
+
+
+  const service: IService = await getItemByFilter('services', ['href'], params.service, [
+    ['populate', 'desktopExample'],
+    ['populate', 'mobileExample']
+  ])
+
+  const portfolioData: IPortfolio[] = await baseFetch('/api/portfolios?' + parseObjToQuerytsts([
+    ['populate', 'exampleDesktop'],
+    ['populate', 'exampleMobile']
+  ]))
+
+  const stagesData = await baseFetch('/api/stages')
+
+  if (!service) {
+    notFound();
+  }
+
+
+  const image = service.desktopExample.data ? service.desktopExample : service.mobileExample
+  const imageType = service.desktopExample.data ? 'laptopLeft' : 'mobile'
+
   return (
-    <p>{params.service}</p>
+    <>
+      <div className="container">
+        <BannerItem header={service.header} headerType='h1' pos="first" image={image} description={service.description} type={imageType} />
+      </div>
+      <hr className="hr" />
+
+      <div className="container content" dangerouslySetInnerHTML={{ __html: service.text }}></div>
+      <hr className="hr" />
+      {portfolioData && <Portfolio data={portfolioData} />}
+      <hr className="hr" />
+      <div className="container content" dangerouslySetInnerHTML={{ __html: service.textBottom }}></div>
+      <hr className="hr" />
+      {stagesData && <Stages data={stagesData} header={'Как оформить заказ?'} />}
+      <Call padding='none' />
+    </>
   );
 }

src/app/[category]/page.tsx

@@ -1,7 +1,42 @@
+import { Call } from '@/components/Call/Call';
 import { Listing } from '@/components/Listing/Listing';
+import { Stages } from '@/components/Stages/Stages';
+import { baseFetch } from '@/core/api/baseFetch';
 import { getItemByFilter, getItemsByFilter } from '@/core/api/getItemsByFilter';
+import { API_URL } from '@/core/config/api.config';
+import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
+export async function generateMetadata(
+  { params }: ICategoryPage
+): Promise<Metadata> {
+
+  const category: ICategory = await getItemByFilter('categories', ['href'], params.category)
+
+  if (!category) {
+    notFound();
+  }
+
+  return {
+    title: `${category.header} | Pixel Perfect`,
+    description: category.description,
+    openGraph: {
+      title: `${category.header} | Pixel Perfect`,
+      description: category.description,
+      url: API_URL,
+      siteName: 'Pixel Perfect',
+      images: [
+        {
+          url: '/favicon.png',
+          width: 500,
+          height: 500,
+        },
+      ],
+      locale: 'ru',
+      type: 'website',
+    },
+  }
+}
 interface ICategoryPage {
   params: { category: string }
 }
@@ -24,15 +59,27 @@ export default async function Category({ params }: ICategoryPage) {
     return { ...item, href: `/${params.category}/${item.href}` }
   })
 
+  const stagesData = await baseFetch('/api/stages')
+
   return (
     <>
-      <div className='container content'>
+      <div className="container content">
         <h1>{category.header}</h1>
-        <div dangerouslySetInnerHTML={{__html: category.description}}></div>
+        <div dangerouslySetInnerHTML={{ __html: category.description }}></div>
+      </div>
+      <br />
+      <br />
+      <hr className="hr" />
+      <br />
+      <br />
+      <div className="container">
         <Listing data={serializedServices} />
-        <br />
-        <br />
       </div>
+      <br />
+      <br />
+      <hr className="hr" />
+      {stagesData && <Stages data={stagesData} header={'Как оформить заказ?'} />}
+      <Call padding='none' />
     </>
   );
 }

src/app/about/page.tsx

@@ -1,7 +1,57 @@
+import { Portfolio } from "@/components/Portfolio/Portfolio";
+
+import { Call } from "@/components/Call/Call";
+import { Stages } from "@/components/Stages/Stages";
+import { baseFetch } from "@/core/api/baseFetch";
+import { API_URL } from "@/core/config/api.config";
+import { parseObjToQuerytsts } from "@/core/utils/api/parseObjToQuery";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Обо мне | Pixel Perfect",
+  description: "Моя цель - помочь вам в создании качественного и уникального сайта, который будет отвечать вашим потребностям и ожиданиям.",
+  openGraph: {
+    title: 'Обо мне | Pixel Perfect',
+    description: 'Моя цель - помочь вам в создании качественного и уникального сайта, который будет отвечать вашим потребностям и ожиданиям.',
+    url: API_URL,
+    siteName: 'Pixel Perfect',
+    images: [
+      {
+        url: '/favicon.png',
+        width: 500,
+        height: 500,
+      },
+    ],
+    locale: 'ru',
+    type: 'website',
+  },
+};
+
 
 
 export default async function About() {
+
+  const stagesData = await baseFetch('/api/stages')
+
+  const portfolioData: IPortfolio[] = await baseFetch('/api/portfolios?' + parseObjToQuerytsts([
+    ['populate', 'exampleDesktop'],
+    ['populate', 'exampleMobile']
+  ]))
   return (
-    <p>asdasdas</p>
+    <>
+      <div className="content container">
+        <h1>
+          Обо мне
+        </h1>
+        Здравствуйте! Меня зовут Владислав, я являюсь веб-разработчиком. <br /><br />Моя цель - помочь вам в создании качественного и уникального сайта, который будет отвечать вашим потребностям и ожиданиям.<br /><br />
+        Я верю в индивидуальный подход к каждому проекту. Каждый сайт, созданный мной, уникален и отражает уникальные потребности и желания заказчика. <br /><br />Моя цель - не просто создать сайт, а подарить вам инструмент, который поможет вам продвигать свой бизнес и достичь поставленных целей.
+        <br /><br />
+        В каждом проекте я ценю партнерство и доверие моих клиентов. Сотрудничество со мной означает работу над вашим проектом в тесном контакте, прозрачность на всех этапах работы и стремление к идеальному результату. <br /><br />Вместе мы сможем достичь великолепных результатов!<br /><br />
+        Я готов воплотить в жизнь ваши идеи и помочь вам в создании превосходного сайта, который станет вашим эффективным инструментом в онлайн пространстве. <br /><br />Доверьте свой проект мне, и вместе мы создадем нечто по-настоящему впечатляющее!
+      </div>
+      {portfolioData && <Portfolio data={portfolioData} />}
+      {stagesData && <Stages data={stagesData} header={'Как оформить заказ?'} />}
+      <Call padding='none' />
+    </>
   );
 }

src/app/contacts/page.module.scss

@@ -0,0 +1,55 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @media (max-width: 767px) {
+    flex-direction: column;
+    gap: 30px;
+    align-items: flex-start;
+
+  }
+}
+
+.left {
+  p {
+    font-size: 25px;
+    margin: 30px 0;
+
+    @media (max-width: 767px) {
+      font-size: 16px;
+      margin: 10px 0;
+    }
+  }
+
+  a {
+    font-weight: 500;
+
+    :hover {
+      color: var(--color_sec-text);
+
+    }
+  }
+}
+
+.right {
+
+  @media (max-width: 767px) {
+    width: 100%;
+  }
+
+  img {
+    min-width: 100%;
+    min-width: 100%;
+
+    @media (max-width: 1023px) {
+      max-height: 200px;
+      max-width: 200px;
+    }
+
+    @media (max-width: 767px) {
+      margin: 0 auto;
+    }
+
+  }
+}

src/app/contacts/page.tsx

@@ -1,6 +1,63 @@
+import { Call } from "@/components/Call/Call";
+import { API_URL } from "@/core/config/api.config";
+import { INFO } from "@/core/config/info.config";
+import { Metadata } from "next";
+import Image from 'next/image';
+import styles from './page.module.scss';
+
+
+export const metadata: Metadata = {
+  title: "Контакты | Pixel Perfect",
+  description: "Разработка мобильных и веб приложений для вашей компании",
+  openGraph: {
+    title: 'Контакты | Pixel Perfect',
+    description: 'Разработка мобильных и веб приложений для вашей компании',
+    url: API_URL,
+    siteName: 'Pixel Perfect',
+    images: [
+      {
+        url: '/favicon.png',
+        width: 500,
+        height: 500,
+      },
+    ],
+    locale: 'ru',
+    type: 'website',
+  },
+
+};
+
 
 export default async function Contacts() {
+
   return (
-    <p>CAtalog</p>
+    <div className={styles.main}>
+      <div className="content container">
+
+        <div className={styles.wrapper}>
+          <div className={styles.left}>
+            <h1>
+              Контакты
+            </h1>
+            <address>
+              <p>Комков Владислав Владимирович</p>
+              <p><a href="mailto:[email protected]">[email protected]</a></p>
+              <p><a href={`tel:${INFO.PHONE}`}>{INFO.PHONE}</a></p>
+              <p>ИНН: 745108164223</p>
+            </address>
+          </div>
+          <div className={styles.right}>
+            <Image src={`/icon--black.svg`} alt={'Pixel Perfect'}
+              priority
+              width={450}
+              height={450}
+              sizes="100vw"
+              style={{ width: '100%' }}
+            />
+          </div>
+        </div>
+      </div>
+      <Call padding='none' />
+    </div >
   );
 }