fixed-responsiveness-changes (#23)

src/Sections/AboutUs.tsx

@@ -5,7 +5,7 @@ export const AboutUs = () => {
         <h2 className="text-white text-3xl font-bold mb-8 text-center lg:mb-4">About Us</h2> {/* Adjusted margin for larger screens */}
         <div className="p-1 rounded-lg shadow-lg"></div>
         <div className="mt-8">
-          <h2 className="text-2xl mb-4 text-neutral-200">
+          <h2 className="text-xl mb-4 text-neutral-200 text-center leading-relaxed">
             Welcome to the Cloud Native Community Group - New Delhi. We are the New Delhi chapter of the Cloud Native Community Groups (CNCG), operating under the{" "}
             <span className="text-[#0086FF]">Cloud Native Computing Foundation</span>{" "}
             (CNCF). Our focus is on knowledge sharing and exploring the potential of cloud native technologies. Through our meetups, educational sessions, and practical activities, we aim to empower individuals in navigating the cloud native ecosystem. We are dedicated to hosting at least one meetup every month and take pride in being recognized as the leading CNCG community worldwide. We prioritize creating an inclusive learning environment, adhering to the CNCF Code of Conduct to ensure everyone feels welcome and respected.

src/Sections/Talks.tsx

@@ -55,7 +55,7 @@ const Talks = () => {
       className="flex flex-col items-center justify-center bg-black w-screen"
     >
       <div>
-        <h2 className="text-white text-3xl font-bold pt-30 pb-10 lg:mt-40 lg:mb-10">
+        <h2 className="text-white text-3xl font-bold pt-30 pb-10 lg:mt-40 lg:mb-10 mt-9">
           Previous Talks
         </h2>
       </div>

src/components/Header.tsx

@@ -38,17 +38,18 @@ export const Header = () => {
 
           <a
             href="/"
-            className="flex items-center space-x-22 rtl:space-x-reverse md:mr-0 mr-12"
+            className="flex items-center space-x-22 rtl:space-x-reverse md:mr-0 mr-9"
           >
             <img
               src="./logo.jpg"
               alt="Logo"
               width={90}
-              height={90}
-              className="rounded-full md:mr-0 mr-7"
+              height={90} 
+              className="md:mr-0 mr-4 sm:mr-0"
+
             />
-            <span className="self-center text-xl text-md font-bold whitespace-nowrap dark:text-white flex flex-col md:mr-0 ">
-              <p>CNCG NEW DELHI</p>
+            <span className="self-center text-xl text-md font-bold whitespace-nowrap dark:text-white flex flex-col md:mr-0 md:ml-0 ml-1">
+              <p>&nbsp;CNCG NEW DELHI</p>
             </span>
           </a>
 
@@ -101,7 +102,7 @@ export const Header = () => {
           </div>
           <button
             onClick={() => setShowSidebar(!showSidebar)}
-            className="md:hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink p-2"
+            className="md:hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink mr-3"
           >
             {showSidebar ? (
               <svg
@@ -135,7 +136,7 @@ export const Header = () => {
       </nav>
       {showSidebar && (
         <div className="md:hidden fixed inset-0 bg-white dark:bg-gray-900 z-30">
-          <ul className="flex flex-col p-4 md:p-0 mt-4 border border-gray-100 bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white ">
+          <ul className="flex flex-col p-4 md:p-0 mt-4 bg-white md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white ">
             <li>
               <button
                 onClick={(e) => {
@@ -194,7 +195,7 @@ export const Header = () => {
           <button onClick={() => setShowSidebar(!showSidebar)}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              className="h-8 w-8 text-black dark:text-white"
+              className="h-8 w-8 text-black dark:text-white mt-3 ml-3"
               viewBox="0 0 20 20"
               fill="currentColor"
             >

src/components/ui/rotating-card.tsx

@@ -7,10 +7,10 @@ const RotatingCard = ({imageUrl, description, altText, videoUrl, title} : {
 }) => {
   return (
     <section
-      className="flex justify-center items-center gap-x-16 text-white rounded-large"
+      className="flex justify-center items-center gap-x-16 text-white rounded-large " 
     >
       <div
-        className="w-[300px] h-[420px] bg-transparent cursor-pointer group perspective rounded-large"
+        className="md:w-[300px] md:h-[420px] h-[220px] w-[250px] bg-transparent cursor-pointer group perspective rounded-large"
       >
         <div
           className="relative preserve-3d group-hover:my-rotate-y-180 w-full h-full duration-1000 rounded-large"
@@ -23,13 +23,13 @@ const RotatingCard = ({imageUrl, description, altText, videoUrl, title} : {
             style={{ borderRadius: "10px" }} 
           >
             <div className="text-center flex flex-col items-center justify-start h-full text-gray-800 pt-6 px-2 pb-24">
-              <h1 className="text-3xl font-semibold">{title}</h1>
+              <h1 className="md:text-3xl text-sm font-semibold">{title}</h1>
               <div className="flex items-center">
                 <p className="text-black text-center px-4 py-2 pt-4 text-wrap truncate">{description}</p>
               </div>
               <a
                 href={videoUrl}
-                className="px-6 py-2 font-semibold text-white rounded-full absolute -bottom-20 delay-500 duration-1000 group-hover:bottom-10 scale-0 group-hover:scale-125 bg-pink transition duration-300 ease-in-out hover:text-opacity-80"
+                className="px-6 py-2 md:font-semibold text-white rounded-full absolute -bottom-20 delay-500 group-hover:bottom-10 scale-0 group-hover:scale-125 bg-pink transition duration-300 ease-in-out hover:text-opacity-80"
               >
                 Watch Now
               </a>

src/index.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;