fixed responsiveness (#18)

-fixed stats (horizontal) -fixed footer -fixed events (2 in a row)
cncgnd · Apr 16, 2024 · 8da9a08 · 8da9a08
2 parents 07de5a9 + 166c8da
commit 8da9a08
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 42 deletions.
diff --git a/src/Sections/Events.tsx b/src/Sections/Events.tsx
@@ -5,7 +5,7 @@ export const Events = () => {
     <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
       <div>
         <h2
-          className="text-white text-3xl font-bold mb-4 text-center mt-16"
+          className="text-white text-3xl font-bold mb-4 text-center mt-2"
           id="events"
         >
           Our Events
@@ -56,7 +56,7 @@ export const Events = () => {
                 imageurl: "./Bevy poster.jpg",
               },
               {
-                title: "Online Event (virtual)",
+                title: "Online Event",
                 description:
                   "Cloud Native Connect: Unleashing the power of CNCF",
                 link: "https://community.cncf.io/events/details/cncf-new-delhi-presents-cloud-native-connect-unleashing-the-power-of-cncf/",

diff --git a/src/Sections/Sponsors.tsx b/src/Sections/Sponsors.tsx
@@ -1,23 +1,33 @@
-
-import './Card.css'; 
-import devtron from '../images/devtron.png';
-import microsoft from '../images/microsoft.png';
-import tata from'../images/tata 1 mg.png';
-import epam from '../images/epam.png';
+import "./Card.css";
+import devtron from "../images/devtron.png";
+import microsoft from "../images/microsoft.png";
+import tata from "../images/tata 1 mg.png";
+import epam from "../images/epam.png";
 export const Sponsors = () => {
   return (
     <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
-      <div className="mb-96">
-        <h2 className="text-white text-3xl font-bold mb-20 text-center mt-20" id="sponsors">Our Sponsors</h2>
+      <div className="">
+        <h2
+          className="text-white text-3xl font-bold mb-20 text-center mt-[150px]"
+          id="sponsors"
+        >
+          Our Sponsors
+        </h2>
         <div className="p-4 rounded-lg shadow-lg grid sm:grid-cols-1 md:grid-cols-2 gap-20">
-          <div className='card ease-in-out '><img src={devtron} className='img pt-8'></img></div>
-          <div className='card ease-in-out '><img src={microsoft} className='img pt-8'></img></div>
-          <div className='card ease-in-out '><img src={tata} className='img'></img></div>
-          <div className='card ease-in-out '><img src={epam}  className='img h-36'></img></div>
+          <div className="card ease-in-out ">
+            <img src={devtron} className="img pt-8"></img>
+          </div>
+          <div className="card ease-in-out ">
+            <img src={microsoft} className="img pt-8"></img>
+          </div>
+          <div className="card ease-in-out ">
+            <img src={tata} className="img"></img>
+          </div>
+          <div className="card ease-in-out ">
+            <img src={epam} className="img h-36"></img>
+          </div>
         </div>
       </div>
     </div>
   );
 };
-
-
diff --git a/src/Sections/Stats.tsx b/src/Sections/Stats.tsx
@@ -43,11 +43,13 @@ export const Stats = () => {
 
   return (
     <div
-      className="flex flex-col items-center justify-center bg-black w-screen min-h-screen"
+      className="flex flex-col items-center justify-center bg-black w-screen h-full"
       ref={ref}
     >
-      <h2 className="text-white text-3xl font-bold mb-16  mt-10">Stats</h2>
-      <div className="flex md:flex-row flex-col justify-between w-full max-w-[1200px] px-5 md:px-20 py-5">
+      <h2 className="text-white text-3xl font-bold mb-16 mr-5 mt-[150px]">
+        Stats
+      </h2>
+      <div className="flex flex-row justify-between w-full max-w-[1200px] px-5 md:px-20 py-5">
         {titles.map((title, index) => (
           <Stat title={title} count={count[index]} />
         ))}

diff --git a/src/Sections/Talks.tsx b/src/Sections/Talks.tsx
@@ -1,10 +1,10 @@
 export const Talks = () => {
   return (
-    <div
-      className="flex flex-col items-center justify-center bg-black w-screen h-full"
-    >
-      <div className="mt-5">
-        <h2 className="text-white text-3xl font-bold mb-20">Previous Talks</h2>
+    <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
+      <div>
+        <h2 className="text-white text-3xl font-bold mb-20 mt-[150px]">
+          Previous Talks
+        </h2>
         <div className="p-1 rounded-lg shadow-lg"></div>
       </div>
     </div>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -8,10 +8,10 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export const Footer = () => {
   return (
-    <footer className="p-2 bg-white sm:p-6 dark:bg-gray-800 ">
+    <footer className="p-2 bg-white sm:p-6 dark:bg-gray-800">
       <div className="mx-auto max-w-screen-xl w-screen">
         <div className="md:flex md:justify-between">
-          <div className=" md:mb-0 flex flex-row mt-2">
+          <div className="md:mb-0 flex flex-col md:flex-row mt-2">
             <div className="flex flex-col ">
               <div>
                 <a href="https://www.cncf.io/" className="flex items-center">
@@ -47,8 +47,8 @@ export const Footer = () => {
             </div>
           </div>
 
-          <div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
-            <div>
+          <div className="grid grid-cols-3 gap-6 md:gap-8 sm:gap-6 sm:grid-cols-3">
+            <div className="md:mt-0 mt-3">
               <ul className="text-gray-600 dark:text-gray-400 mt-11">
                 <li className="mb-4">
                   <a
@@ -65,15 +65,16 @@ export const Footer = () => {
                 </li>
               </ul>
             </div>
-            <div>
-              <h2 className=" text-sm font-semibold text-gray-900 uppercase dark:text-white ml-10">
+
+            <div className="md:mt-0 mt-3 md:mr-0">
+              <h2 className=" text-sm font-semibold text-gray-900 uppercase dark:text-white md:ml-10">
                 Resources
               </h2>
-              <ul className="text-gray-600 dark:text-gray-400 ml-5 mt-5">
+              <ul className="text-gray-600 dark:text-gray-400 mt-5 ">
                 <li className="mb-4">
                   <a
                     href="https://m.youtube.com/@cncf/search?query=Kubecon"
-                    className="hover:underline "
+                    className="hover:underline"
                   >
                     Contribute.cncf.io
                   </a>
@@ -96,7 +97,8 @@ export const Footer = () => {
                 </li>
               </ul>
             </div>
-            <div>
+
+            <div className="md:mt-0 mt-3">
               <ul className="text-gray-600 dark:text-gray-400 mt-10">
                 <li className="mb-4">
                   <a

diff --git a/src/components/ui/card-hover-effect.tsx b/src/components/ui/card-hover-effect.tsx
@@ -20,7 +20,7 @@ export const HoverEffect = ({
   return (
     <div
       className={cn(
-        "grid grid-cols-1 md:grid-cols-2  lg:grid-cols-4  py-10 gap-x-4 gap-y-2",
+        "grid grid-cols-2 md:grid-cols-2  lg:grid-cols-4  py-10 gap-x-4 gap-y-2",
         className
       )}
     >
@@ -79,10 +79,10 @@ export const Card = ({
   return (
     <motion.div
       className={cn(
-        "rounded-2xl h-full w-full p-4  overflow-hidden bg-neutral-50  border-transparent dark:border-white/[0.2] group-hover:border-slate-700 relative z-20",
+        "rounded-2xl p-4 overflow-hidden bg-neutral-50  border-transparent dark:border-white/[0.2] group-hover:border-slate-700 relative z-20 w-[160px] h-[290px] sm:w-[250px] sm:h-[390px]",
         className
       )}
-      style={{ width: "250px", height: "390px" }}
+      // style={{ width: "250px", height: "390px" }}
       initial="hidden"
       animate={inView ? "visible" : "hidden"}
       variants={variants}
@@ -93,9 +93,7 @@ export const Card = ({
         <motion.img
           src={imageUrl}
           alt="Card Image"
-          className="mx-auto mb-4 rounded-xl"
-          width={250}
-          height={250}
+          className="mx-auto md:mb-4 rounded-xl md:w-[250px] md:h-[220px]"
         />
         <div className="p-3">{children}</div>
       </div>
@@ -110,7 +108,7 @@ export const CardTitle = ({
   children: React.ReactNode;
 }) => {
   return (
-    <h4 className={cn("text-black tracking-wide font-light", className)}>
+    <h4 className={cn("text-black tracking-wide font-light md:text-sm sm:text-xs", className)}>
       {children}
     </h4>
   );
@@ -122,7 +120,7 @@ export const CardButton = ({
   children: React.ReactNode;
 }) => {
   return (
-    <a className={cn("text-pink font-bold tracking-wide mt-4", className)}>
+    <a className={cn("text-pink font-bold tracking-wide text-sm", className)}>
       <span className="ml-1">&#8594;</span> View Details
     </a>
   );
@@ -138,7 +136,7 @@ export const CardDescription = ({
   return (
     <p
       className={cn(
-        "mt-2 text-black tracking-wide leading-relaxed text-md font-bold",
+        "md:mt-2 text-black tracking-wide leading-relaxed text-[12px] md:text-lg font-bold",
         className
       )}
     >