feat: add containers to pages

app/components/Navbar/Navbar.jsx

@@ -56,7 +56,7 @@ export const Navbar = () => {
 
   return (
     <header className="fixed bottom-0 left-0 z-50 w-full text-white bg-black sm:sticky sm:top-0">
-      <div className="flex items-center justify-between px-4 py-4">
+      <div className="container flex items-center justify-between px-4 py-4 mx-auto">
         <nav className="flex gap-4">
           {navLinks.map((link) => {
             return <Link key={link.id} href={link.href} className={`flex-col items-center sm:flex-row ${link.mobileMenu ? "hidden sm:flex" : "flex"}`}><span className={`iconify ${pathname == link.href ? link.iconActive : link.icon} w-6 h-6`}></span><span className={`${pathname == link.href ? "font-bold" : ""} text-xs sm:text-base`}>{link.title}</span></Link>;

app/components/RelatedSection/RelatedSection.jsx

@@ -10,8 +10,8 @@ export const RelatedSection = (props) => {
   );
   return (
     <section>
-      <div className="flex flex-col justify-between p-4 sm:flex-row">
+      <div className="flex flex-col justify-between gap-4 p-4 xl:flex-row">
-        <div className="flex p-4">
+        <div className="flex items-center justify-center p-4">
           {props.images.map((item) => {
             return (
               <img

app/pages/Index.jsx

@@ -16,7 +16,7 @@ export function IndexPage() {
   const [announceReleasesData] = useFetchReleases("announce");
 
   return (
-    <main className="flex flex-col pt-2 pb-16 sm:pt-4 sm:pb-0">
+    <main className="container flex flex-col pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
       {lastReleasesData ? (
         <ReleaseCourusel
           sectionTitle="Последние релизы"

app/pages/IndexCategory.jsx

@@ -57,7 +57,7 @@ export function IndexCategoryPage(props) {
     );
 
   return (
-    <main className="pt-2 pb-16 sm:pt-4 sm:pb-0">
+    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
       {content && (
         <ReleaseSection
           sectionTitle={props.SectionTitleMapping[props.slug]}

app/pages/Login.jsx

@@ -50,7 +50,7 @@ export function LoginPage() {
   }, [userStore.user]);
 
   return (
-    <main>
+    <main className="container mx-auto">
       <section className="bg-gray-50 dark:bg-gray-900">
         <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
           <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">

app/pages/Search.jsx

@@ -66,10 +66,10 @@ export function SearchPage() {
   if (error) return <div>failed to load</div>;
 
   return (
-    <main className="px-2 pt-2 pb-16 sm:pt-4 sm:pb-0">
+    <main className="container px-2 pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
       <div>
         <form
-          className="max-w-md mx-auto"
+          className="max-w-full mx-auto"
           onSubmit={(e) => {
             e.preventDefault();
             setQuery(e.target[0].value.trim());