From fbe00450bf0aeb501f73d3286f326dbc3710c79b Mon Sep 17 00:00:00 2001
From: bilel0509 <billel.boulahia456@gmail.com>
Date: Mon, 5 Aug 2024 08:58:44 +0100
Subject: [PATCH] -changed card image height from 20 to 30 for more visibility
 -changed the width of the parent div of the iframe from 350 to full and
 removed the height and width of iframe to fix the overflow problem -added
 additional breakpoint in tailwind.config.ts -centered the SubStackCustom.tsx
 -change the width of the card at people section for  sm breakpoint from 1/4
 to 1/8 -replaced the padding and height of main at page.tsx with margin
 -added breakpoints for text size to main in page.tsx -added a breakpoint for
 space-between in navbar

---
 src/app/page.tsx                  |  4 ++--
 src/components/Card.tsx           |  2 +-
 src/components/LessonSection.tsx  |  7 +++----
 src/components/PeopleSection.tsx  |  2 +-
 src/components/SubstackCustom.tsx |  4 ++--
 src/components/navbar/Navbar.tsx  |  2 +-
 tailwind.config.ts                | 10 ++++++++++
 7 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5787dac..0d3deab 100644
--- a/src/app/page.tsx
+++ b/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"
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 1bab2d4..cbc400f 100644
--- a/src/components/Card.tsx
+++ b/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">
diff --git a/src/components/LessonSection.tsx b/src/components/LessonSection.tsx
index 0916532..f560b98 100644
--- a/src/components/LessonSection.tsx
+++ b/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">
diff --git a/src/components/PeopleSection.tsx b/src/components/PeopleSection.tsx
index f6bcefb..0760cf2 100644
--- a/src/components/PeopleSection.tsx
+++ b/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
diff --git a/src/components/SubstackCustom.tsx b/src/components/SubstackCustom.tsx
index 2e806a9..7f3feea 100644
--- a/src/components/SubstackCustom.tsx
+++ b/src/components/SubstackCustom.tsx
@@ -64,7 +64,7 @@ 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"
@@ -72,7 +72,7 @@ export default function SubstackCustom() {
         >
           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"
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index e6d7fc7..f4a145b 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/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>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 58d9860..6d108df 100644
--- a/tailwind.config.ts
+++ b/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: [],