Merge pull request #67 from nishchay-veer/parallax-carousel

Parallax carousel
GDSC-NITJ · Jan 31, 2024 · 47de5e4 · 47de5e4
2 parents 05080a7 + 26a4295
commit 47de5e4
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 32 deletions.
diff --git a/public/images/team.png b/public/images/team.png
diff --git a/src/components/About.js b/src/components/About.js
@@ -5,14 +5,14 @@ import image2 from "../../public/images/about2.jpg";
 import image3 from "../../public/images/about3.jpg";
 import image4 from "../../public/images/about4.jpg";
 import image5 from "../../public/images/about5.jpg";
-import image6 from "../../public/images/about6.png";
+import image6 from "../../public/images/team.png";
 
 const About = (props) => {
   const [selectedImage, setSelectedImage] = useState(0);
   const images = [
     // image1,
     image2,
-    image3,
+    // image3,
     image4,
     image5,
     image6,
@@ -30,9 +30,9 @@ const About = (props) => {
     <div id="about" className="w-full h-full bg-[#1F1F1F] p-10">
       <div className="flex-col flex items-center gap-y-10 m-5">
         <div className="text-center text-white text-3xl sm:text-6xl lg:text-8xl font-Minecraft leading-10">
-          ABOUT HACKMOL
+          ABOUT HACKMOL 
         </div>
-        <div className="text-center text-white text-xl lg:text-3xl font-normal font-Space-Grotesk leading-5 sm:leading-9">
+        <div className="text-center text-white text-xl lg:text-2xl font-normal font-Space-Grotesk leading-5 sm:leading-9">
           HackMol 5.0 is fifth-edition of community-focused 30-hour hackathon
           organized by DSC NIT Jalandhar. Tailored to cater to both beginners
           and experts, this event provides an excellent opportunity to showcase
@@ -46,10 +46,8 @@ const About = (props) => {
           <Image
             src={images[selectedImage].src}
             alt={`Image ${selectedImage + 1}`}
-            width="720"
-            height="720"
-            loading="lazy"
-            className="object-cover"
+            width={720}
+            height={720}
           />
         </div>
         <div className="flex w-4/5 justify-between items-center mt-3 pt-3">
@@ -59,7 +57,7 @@ const About = (props) => {
           >
             <img src={`/images/Arrow.png`}></img>
           </div>
-          <div className="ImgDescription flex justify-between items-between text-white sm:text-xl font-normal font-Space-Grotesk leading-4 sm:leading-8 py-3">
+          <div className="ImgDescription flex justify-between items-between text-white md:text-2xl sm:text-xl font-normal font-Space-Grotesk leading-4 sm:leading-8 py-8">
             <span>Collaborate, Innovate and Win</span>
           </div>
           <div
@@ -70,25 +68,25 @@ const About = (props) => {
           </div>
         </div>
 
-        {/* <div className="flex gap-2">
+        <div className="flex gap-2">
           {images.map((image, index) => (
             <div
               key={index}
-              className={`w-180 h-180 cursor-pointer opacity-70 hover:opacity-100 ${index === selectedImage ? 'border-2  border-[#61FF00]' : ''
+              className={`w-100 h-100 cursor-pointer opacity-70 hover:opacity-100 ${index === selectedImage ? 'border-2  border-[#61FF00]' : ''
                 }`}
               onClick={() => setSelectedImage(index)}
             >
               <Image
                 src={image.src}
                 alt={`Thumbnail ${index + 1}`}
-                width={1000} // Adjust the width as needed
-                height={800} // Adjust the height as needed
-                loading="lazy" // Add lazy loading attribute
+                width={200} // Adjust the width as needed
+                height={200} // Adjust the height as needed
+                loading="lazy"
                 className='w-full h-full flex-shrink-0'
               />
             </div>
           ))}
-        </div> */}
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/Hero/HeroSection.js b/src/components/Hero/HeroSection.js
@@ -126,4 +126,4 @@ function HeroSection() {
   );
 }
 
-export default HeroSection;
+export default HeroSection;
diff --git a/src/components/Rules/RulesPoints.js b/src/components/Rules/RulesPoints.js
@@ -1,22 +1,15 @@
 import Image from "next/image";
 
 function RulesPoint({ Desc, color, alignment, icon }) {
-  const getAlign = () => {
-    return alignment === "left" ? "flex-row-reverse" : "";
-  };
 
   let card_style = `bg-white w-full h-full p-2 border-5 flex justify-center font-bold text-center`
 
   return (
-    <div className={`flex ${getAlign()} items-center`}>
+    <div className={`flex  items-center relative`}>
       <div
-        className={`block z-30`}
-        style={{
-          marginLeft: alignment === "left" ? "-3rem" : "0",
-          marginRight: alignment === "right" ? "-3rem" : "0",
-        }}
-      >
-        <Image src={icon} alt="img" className='w-full h-full' width={0} height={0} />
+        className={`block z-30 ${alignment === 'left' ? '-left-20' : '-right-20'} absolute`}
+        >
+        <Image src={icon} alt="img" className={`w-full h-full opacity-80`} width={0} height={0} />
       </div>
       <div
         className={card_style}
@@ -26,7 +19,7 @@ function RulesPoint({ Desc, color, alignment, icon }) {
           borderStyle: "solid",
         }}
       >
-        <div className={`font-medium text-[9px] md:text-xl px-10 font-Space-Grotesk`}>
+        <div className={`font-medium text-[9px] md:text-xl p-5 z-11 font-Space-Grotesk`}>
           {Desc} 
         </div>
       </div>

diff --git a/src/components/sponsers.js b/src/components/sponsers.js
@@ -71,7 +71,7 @@ export default function SponsersPage() {
         <div className="max-w-7xl mx-auto flex flex-col justify-around gap-16 my-12 px-4">
 
           <div className="flex flex-col justify-center gap-12">
-            <div className="md:text-7xl text-3xl mt-6 font-bold text-[#FFD700] font-Space-Grotesk text-center">
+            <div className="md:text-4xl text-3xl mt-6 font-bold text-[#FFD700] font-Space-Grotesk text-center">
               Gold Sponsors
             </div>
             <div className="flex flex-row flex-wrap  justify-center md:gap-8 gap-6">
@@ -82,7 +82,7 @@ export default function SponsersPage() {
           </div>
 
           <div className="flex flex-col justify-center gap-8">
-            <div className="md:text-6xl text-3xl font-bold font-Space-Grotesk text-center text-[#C0C0C0]">
+            <div className="md:text-4xl text-3xl font-bold font-Space-Grotesk text-center text-[#C0C0C0]">
               Silver Sponsors
             </div>
             <div className="flex flex-row flex-wrap  justify-center md:gap-8 gap-6">
@@ -93,7 +93,7 @@ export default function SponsersPage() {
           </div>
 
           <div className="flex flex-col justify-center gap-8">
-            <div className="md:text-5xl text-3xl font-bold font-Space-Grotesk text-center text-[#CD7F32]">
+            <div className="md:text-4xl text-3xl font-bold font-Space-Grotesk text-center text-[#CD7F32]">
               Bronze Sponsors
             </div>
             <div className="flex flex-row flex-wrap  justify-center md:gap-8 gap-6">
@@ -103,7 +103,7 @@ export default function SponsersPage() {
             </div>
           </div>
           <div className="flex flex-col justify-center gap-8">
-            <div className="md:text-5xl text-3xl font-bold font-Space-Grotesk text-center">
+            <div className="md:text-4xl text-3xl font-bold font-Space-Grotesk text-center">
               Up Skilling Partner 
             </div>
             <div className="flex flex-row flex-wrap  justify-center md:gap-8 gap-6">
-Original file line number
+Diff line change
@@ Expand Up / @@ -126,4 +126,4 @@ function HeroSection() { @@
       );
     }
-    export default HeroSection;
+    export default HeroSection;