refactor: change folder structure of responsive design components

src/app/[locale]/(main)/search/page.tsx

@@ -1,6 +1,6 @@
 import SortRow from '@/app/[locale]/(main)/search/components/SortRow';
-import DesktopView from '@/components/App/DesktopView';
-import MobileView from '@/components/App/MobileView';
+import DesktopView from '@/components/ResponsiveDesign/components/DesktopView';
+import MobileView from '@/components/ResponsiveDesign/components/MobileView';
 import { ColumnFilters } from '@/components/ColumnFilters';
 import { InlineFilters } from '@/components/InlineFilters';
 import ProductsCount from '@/components/ProductsCount/ProductsCount';

src/app/[locale]/layout.tsx

@@ -21,17 +21,23 @@ import { GetGeneralSettingsQuery } from '@/graphql/types/graphql';
 export type LocaleLayoutParams = { params: { locale: Locale } };
 
 export async function generateMetadata(): Promise<Metadata> {
-  const { data } = await getClient().query<GetGeneralSettingsQuery>({
-    query: GET_GENERAL_SETTINGS,
-  });
+  try {
+    const { data } = await getClient().query<GetGeneralSettingsQuery>({
+      query: GET_GENERAL_SETTINGS,
+    });
 
-  return {
-    title: {
-      template: `%s | ${data.generalSettings?.title!}`,
-      default: data.generalSettings?.title!,
-    },
-    description: data.generalSettings?.description!,
-  };
+    return {
+      title: {
+        template: `%s | ${data.generalSettings?.title!}`,
+        default: data.generalSettings?.title! ?? 'Test',
+      },
+      description: data.generalSettings?.description!,
+    };
+  } catch (error) {
+    return {
+      title: 'NextJs Woo',
+    };
+  }
 }
 
 export default async function LocaleLayout({

src/components/Footer/Footer.tsx

@@ -1,8 +1,8 @@
 import { IPageListItem } from '@/app/[locale]/(main)/layout';
 import { Box } from '@mui/material';
 import { FC } from 'react';
-import DesktopView from '../App/DesktopView';
-import MobileView from '../App/MobileView';
+import DesktopView from '../ResponsiveDesign/components/DesktopView';
+import MobileView from '../ResponsiveDesign/components/MobileView';
 import { DesktopFooter, MobileFooter } from './components';
 
 export interface FooterProps {

src/components/Header/Header.tsx

@@ -2,8 +2,8 @@
 
 import { AppBar, Container } from '@mui/material';
 import { FC, Suspense } from 'react';
-import DesktopView from '../App/DesktopView';
-import MobileView from '../App/MobileView';
+import DesktopView from '../ResponsiveDesign/components/DesktopView';
+import MobileView from '../ResponsiveDesign/components/MobileView';
 import { DesktopHeader, MobileHeader } from './components';
 import TopBanner, {
   TopBannerProps,

src/components/ResponsiveDesign/index.ts

@@ -0,0 +1,2 @@
+export { default as DesktopView } from './components/DesktopView';
+export { default as MobileView } from './components/MobileView';