feat: bugs update

app/contact/page.tsx

@@ -8,7 +8,7 @@ export default function Contact() {
     <div className="flex-col">
       <h1 className="mb-8 text-5xl font-bold gradient-span text-center">Contact</h1>
       <div className="flex-col justify-center">
-        <h3 className="my-2 text-xl font-bold">E-mail: <span className="text-gray-400">hello@moderndev.io</span></h3>
+        <h3 className="my-2 text-xl font-bold">E-mail: <span className="text-gray-400">hernackikacper@gmail.com</span></h3>
         <div className="grid place-content-center">
           <Link target="_blank" href="https://discord.gg/BRGpGhqANH">
             <button className="btn discord-button mt-10 text-white">

app/courses/loading.tsx

@@ -1,9 +1,32 @@
+"use client"
+
+import { useEffect, useState } from "react";
+
 export default function LoadingSkeleton() {
+  const [itemCount, setItemCount] = useState(4);
+
+  useEffect(() => {
+    const updateItemCount = () => {
+      const screenWidth = window.innerWidth;
+      if (screenWidth < 640) {
+        setItemCount(1);
+      } else {
+        setItemCount(4);
+      }
+    };
+
+    updateItemCount();
+    window.addEventListener('resize', updateItemCount);
+
+    return () => window.removeEventListener('resize', updateItemCount);
+  }, []);
+
+
   return (
     <div className="p-4">
       <div className="skeleton text-center h-10 w-full mb-8"></div>
-      <div className="flex justify-center gap-4">
-        {[...Array(4)].map((_, i) => (
+      <div className="max-w-full flex flex-wrap justify-center gap-4">
+        {[...Array(itemCount)].map((_, i) => (
           <div key={i} className="flex flex-col gap-4 w-52">
             <div className="skeleton h-32 w-full"></div>
             <div className="skeleton h-4 w-28"></div>
@@ -13,7 +36,7 @@ export default function LoadingSkeleton() {
         ))}
       </div>
       <div className="mt-4 flex justify-center gap-4">
-        {[...Array(4)].map((_, i) => (
+        {[...Array(itemCount)].map((_, i) => (
           <div key={i} className="flex flex-col gap-4 w-52">
             <div className="skeleton h-32 w-full"></div>
             <div className="skeleton h-4 w-28"></div>

app/tags/layout.tsx

@@ -6,7 +6,7 @@ export default function TagsLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="lg:pt-52 px-4 grid place-content-center w-screen max-w-screen-xl ml-auto mr-auto">
+    <div className="pt-32 lg:pt-52 px-4 grid place-content-center w-screen max-w-screen-xl ml-auto mr-auto">
       {children}
     </div>
   );

components/home/choice.tsx

@@ -80,7 +80,7 @@ export const ChoiceSection = () => {
               </div>
             </div>
             <div className="flex">
-              <div className="mt-8 flex-col max-w-sm mr-8">
+              <div className="mt-8 flex-col max-w-sm">
                 <Image width={!isMobile ? 300 : 150} src={LaptopWebstorm} alt="Album" />
                 <div className="flex">
                   <Image className="object-contain" width={!isMobile ? 70 : 35} src={WebstormLogo} alt="webstorm logo" />

components/home/code.tsx

@@ -14,11 +14,11 @@ export const CodeSnippet = ({}) => {
         initial="hidden"
         whileInView="visible"
         variants={slideInFromLeft}
-        className="mt-20 max-w-sm lg:max-w-none md:mt-40 lg:mt-52">
-        <h3 className="text-4xl md:text-6xl lg:text-7xl mb-12 md:mb-18 lg:mb-24 font-bold text-center gradient-span">
+        className="mt-20 md:max-w-none lg:max-w-none md:mt-40 lg:mt-52">
+        <h3 className="text-5xl md:text-6xl lg:text-7xl mb-12 md:mb-18 lg:mb-24 font-bold text-center gradient-span">
           Turn on modern developing mode
         </h3>
-        <div className="mockup-code bg-gray-600 max-w-0 lg:max-w-2xl ml-auto mr-auto p-4 md:p-6">
+        <div className="mockup-code bg-gray-600 max-w-sm md:max-w-2xl lg:max-w-2xl ml-auto mr-auto p-4 md:p-6">
           <pre data-prefix="$"><code>npm i moderndev</code></pre>
           <pre data-prefix=">" className="text-warning"><code>installing...</code></pre>
           <pre data-prefix=">" className="text-primary"><code>Done!</code></pre>

components/home/tech.tsx

@@ -21,7 +21,7 @@ const Technology: React.FC<SingleTechProps> = ({ techLogo }) => {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
   return (
-    <Image src={techLogo} alt="Tech" width={50} height={50} layout="responsive" />
+    <Image src={techLogo} alt="Tech" width={50} height={50}/>
 
   );
 };

next.config.js

@@ -4,16 +4,15 @@ const nextConfig = {
     serverActions: true
   },
   images: {
-    domains: [
-      "lh3.googleusercontent.com",
-      "avatars.githubusercontent.com"
+    remotePatterns: [
+      { protocol: "https", hostname: "lh3.googleusercontent.com" },
+      { protocol: "https", hostname: "avatars.githubusercontent.com" }
     ]
   }
 };
 
 module.exports = nextConfig;
 
-
 // Injected content via Sentry wizard below
 
 const { withSentryConfig } = require("@sentry/nextjs");
@@ -27,7 +26,7 @@ module.exports = withSentryConfig(
     // Suppresses source map uploading logs during build
     silent: true,
     org: "moderndevio",
-    project: "javascript-nextjs",
+    project: "javascript-nextjs"
   },
   {
     // For all available options, see:
@@ -52,6 +51,6 @@ module.exports = withSentryConfig(
     // See the following for more information:
     // https://docs.sentry.io/product/crons/
     // https://vercel.com/docs/cron-jobs
-    automaticVercelMonitors: true,
+    automaticVercelMonitors: true
   }
 );