Merge pull request #153 from bilelBoulhia/bugfix---fixing-youtube-thu…

…mbnail-and-navbar-overflow

fixing the youtube thumbnails and navbar overflowing problem and poeple's section card small width

src/app/page.tsx

@@ -11,8 +11,8 @@ import LessonSection from "@/components/LessonSection";
 
 export default function Home() {
   return (
-    <main className="flex-grow flex flex-col items-center justify-center text-center space-y-6">
-      <div className="flex flex-col items-center justify-center text-center space-y-6 p-4 h-dvh">
+    <main className="flex-grow flex flex-col items-center extra-small:text-[0.75em] small:text-[1rem] justify-center text-center space-y-6">
+      <div className="flex flex-col items-center justify-center text-center space-y-6 m-20">
         <Image
           src="/rust_lgo_720.png"
           alt="Rust Logo"

src/components/Card.tsx

@@ -45,7 +45,7 @@ const Card: FC<CardProps> = ({ item, key }) => {
             alt={item.name ?? item.title ?? ""}
             width={75}
             height={75}
-            className="rounded-md min-w-20  h-20 p-2 object-contain"
+            className="rounded-md min-w-20  h-30 p-2 object-contain"
           />
           <div className="grid gap-2 text-left">
             <h3 className="text-xl font-semibold text-current dark:text-white">

src/components/LessonSection.tsx

@@ -19,15 +19,14 @@ export default function LessonSection() {
               className="dark:bg-gray-900 bg-gray-200 p-6 rounded-lg shadow-lg transition duration-300 hover:shadow-xl hover:scale-105"
             >
               <div className="flex flex-col items-center text-center">
-                <div className="relative w-[350px] overflow-hidden h-0 pb-[56.25%] rounded-lg">
+                <div className="relative w-full overflow-hidden h-0 pb-[56.25%] rounded-lg">
                   <iframe
-                    width="350"
-                    height="200"
+
                     src={lesson.embed}
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                     referrerPolicy="strict-origin-when-cross-origin"
                     allowFullScreen
-                    className="rounded-lg"
+                    className="absolute top-0 left-0 w-full h-full rounded-lg"
                   ></iframe>
                 </div>
                 <h3 className="text-2xl mt-4 font-semibold mb-3 text-current">

src/components/PeopleSection.tsx

@@ -17,7 +17,7 @@ export default function PeopleSection() {
           {people.slice(0, 3).map((p, index) => (
             <div
               key={index}
-              className="dark:bg-gray-900 bg-gray-200 p-6 rounded-lg shadow-lg transition duration-300 hover:shadow-xl hover:scale-105 w-full sm:w-1/2 md:w-1/4"
+              className="dark:bg-gray-900 bg-gray-200 p-6 rounded-lg shadow-lg transition duration-300 hover:shadow-xl hover:scale-105 w-full sm:w-1/2 md:w-1/8"
             >
               <div className="flex flex-col items-center text-center">
                 <Image

src/components/SubstackCustom.tsx

@@ -64,15 +64,15 @@ export default function SubstackCustom() {
     <div className="w-full max-w-md mx-auto my-8">
       <form
         onSubmit={handleSubmit}
-        className={`flex flex-col items-center ${isLoading ? "form-glow" : ""}`}
+        className={`flex flex-col  items-center ${isLoading ? "form-glow" : ""}`}
       >
         <label
           htmlFor="email"
           className="block text-lg font-medium text-gray-700 dark:text-gray-300 mb-2"
         >
           Join 2400+ Rust Devs. Subscribe to get exclusive stuff
         </label>
-        <div className="flex w-full group">
+        <div className="flex w-full   justify-center group">
           <input
             type="email"
             id="email"

src/components/navbar/Navbar.tsx

@@ -18,7 +18,7 @@ const menuItems = [
 
 const Navbar: React.FC = () => {
   return (
-    <ul className="flex space-x-4 capitalize">
+    <ul className="flex space-x-4 small-medium:space-x-2 capitalize">
       {menuItems.map((item, index) => (
         <Link href={item.link} key={index} className="cursor-pointer transition ease-in-out">
           <span className="hover:text-orange-500">{item.items}</span>

tailwind.config.ts

@@ -10,6 +10,16 @@ module.exports = {
       fontFamily: {
         sans: ["Roboto", "Inter", "ui-sans-serif", "system-ui"],
       },
+
+      screens: {
+        'extra-small':'320px',
+        // => @media (min-width: 320px) { ... }
+        'small':'420px',
+        // => @media (min-width: 420px) { ... }
+        'small-medium':'640px',
+        // => @media (min-width: 640px) { ... }
+
+      },
     },
   },
   plugins: [],