Modal pop-up for the modules page

components/sections/Avatar.js

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react'
+import Image from 'next/image'
+import Bg from '../../public/assests/profile/profileBg.png'
+import demo from '../../public/assests/profile/demo.png'
+import { icons } from '../../style-guide/utils/icons'
+import TecnoCoin from '../style-guide/TecnoCoin'
+import EventAttended from '../style-guide/EventAttended'
+
+const Avatar = () => {
+  const [offsetY, setOffsetY] = useState(0)
+  const handleScroll = () => {
+    setOffsetY(window.pageYOffset)
+  }
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+  return (
+    <div className="relative w-screen bg-bgPrimary overflow-y-hidden">
+      <div className="absolute relative top-0 w-screen h-[30vh] md:h-[60vh]">
+        <Image
+          src={Bg}
+          layout="fill"
+          objectFit="cover"
+          priority="true"
+          style={{ transform: `translateY(${offsetY * 0.4}px)` }}
+        />
+      </div>
+      <div className="relative w-full h-32">
+        <div className="absolute top-[-12vh] relative w-[12rem] h-[12rem] mx-auto z-10">
+          <Image
+            src={demo}
+            layout="fill"
+            objectFit="content"
+            priority="true"
+            className="rounded-full cursor-pointer"
+          />
+          <div className="absolute top-[10rem] right-[2rem] cursor-pointer">
+            {icons.profile.camera}
+          </div>
+        </div>
+      </div>
+      <div className="w-screen md:w-[60vw] mx-auto">
+        <div className="font-semibold text-2xl text-white text-center mb-6">
+          Bhaskar Wary
+        </div>
+        <div className="flex justify-around w-full md:w-4/5 mx-auto pb-8">
+          <EventAttended noOfEvents={6} />
+          <TecnoCoin noOfCoins={600} />
+        </div>
+        <div className="w-[90%] mx-auto mb-8">{icons.profile.cusBorder}</div>
+        <div className="flex justify-between w-4/5 md:w-3/5 mx-auto">
+          <div className="w-1/2 text-white text-center p-3 font-bold text-[1.2rem] bg-gradient-to-r from-[#FF26C2] to-[#FF26C2] rounded-l-lg border-[#FF26C2] cursor-pointer">
+            Details
+          </div>
+          <div className="w-1/2 text-white text-center p-3 font-bold text-[1.2rem] bg-gradient-to-l from-[#4EDFFF] to-[#4EDFFF] rounded-r-lg border-[#4EDFFF] cursor-pointer">
+            Coins
+          </div>
+        </div>
+        <div className="my-8 relative w-full">
+          <div className="w-[90%] mx-auto">{icons.profile.cusBorder}</div>
+          <div className="absolute -top-[1rem] left-[30%] md:left-[35%] flex items-center justify-center text-white w-[40%] md:w-[30%] z-20 bg-bgPrimary p-1">
+            Personal Details
+          </div>
+        </div>
+        <div className="mt-8 w-[90%] mx-auto">
+          <div className="text-white">Name:- Wary</div>
+          <div className="w-full mx-auto my-8">{icons.profile.cusBorder}</div>
+          <div className="text-white">College:- NIT Silchar</div>
+          <div className="w-full mx-auto my-8">{icons.profile.cusBorder}</div>
+          <div className="text-white">Mobile No:- 6543210981</div>
+          <div className="w-full mx-auto my-8">{icons.profile.cusBorder}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Avatar

components/sections/Modules/Modal.js

@@ -0,0 +1,29 @@
+import React from 'react'
+//import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IoMdClose } from 'react-icons/io'
+function Modal() {
+  return (
+    <div className="modal-wrapper">
+      <div className="modal">
+        {/*<FontAwesomeIcon  icon="fa-xmark"/>*/}
+        <div className="justify-start heroimg"></div>
+        <div className="justify-start">
+          <div className="text-3xl px-2 py-2 cross">
+            <IoMdClose/>
+          </div>
+        </div>
+        <div className="justify-start">
+          <div >
+            <h1 className="text-3xl title">RoboTron</h1>
+            <div className='heropara'>
+              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque pariatur sint aliquam atque. Blanditiis, laudantium. Nobis quam quasi ducimus architecto vero ipsa itaque minima in omnis voluptates iusto corporis facilis, maxime, sunt quis. Doloremque recusandae cum qui libero, facilis illum quisquam molestiae! Quo at molestiae expedita eos voluptas natus necessitatibus?</p>
+            </div>
+          </div>
+        </div>
+        {/*<h1 className="text-xl">Module Name</h1>*/}
+      </div>
+    </div>
+  )
+}
+
+export default Modal

components/sections/Sidebar/Sidebar.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import styles from './Sidebar.module.scss'
+
+const Sidebar = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.head}>
+        <div className={styles.text}>Modules</div>
+      </div>
+      <div className={styles.body}>
+        <div className={styles.item}>Robotron</div>
+      </div>
+    </div>
+  )
+}
+
+export default Sidebar

components/style-guide/EventAttended.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { icons } from '../../style-guide/utils/icons'
+
+const EventAttended = ({ noOfEvents }) => {
+  return (
+    <div className="w-2/5 flex flex-col items-center justify-center cursor-pointer">
+      {icons.eventsIcon}
+      <div className="text-white">
+        <span className="font-semibold">{noOfEvents} events</span>
+        <span className="font-normal"> attended</span>
+      </div>
+    </div>
+  )
+}
+
+export default EventAttended

components/style-guide/TecnoCoin.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import Image from 'next/image'
+import tecnoCoin from '../../style-guide/utils/Icons/TecnoCoins.svg'
+
+const TecnoCoin = ({ noOfCoins }) => {
+  return (
+    <div className="w-2/5 flex flex-col items-center justify-center cursor-pointer">
+      <div className="relative w-[60px] h-[60px]">
+        <Image
+          src={tecnoCoin}
+          layout="fill"
+          objectFit="content"
+          priority="true"
+        />
+      </div>
+      <div className="text-white">
+        <span className="font-semibold">Earned {noOfCoins}</span>
+        <span className="font-normal"> Coins</span>
+      </div>
+    </div>
+  )
+}
+
+export default TecnoCoin

components/style-guide/sections/AboutUs.js

@@ -4,10 +4,9 @@ const AboutUs = () => {
   return (
     <div className="relative w-screen h-screen overflow-y-hidden bg-black flex flex-col items-center justify-center">
       <div className="w-4/5 md:w-[60vw] text-center">
-        <div className="w-full text-center text-white text-lg md:text-[3rem] tracking-wider font-light font-lemonMilk mb-8">
+        <div className="w-full text-center text-white text-lg md:text-[3rem] tracking-wider font-light font-lemonMilk mb-16">
           ABOUT US
         </div>
-
         <div className="text-offWhite w-full mx-auto text-sm md:text-xl uppercase text-center leading-10 mb-[1.5rem]">
           TECNOESIS is the annual techno-management Festival of NIT Silchar.
           Started with the aim of providing a platform for the student community
@@ -20,7 +19,7 @@ const AboutUs = () => {
           target="_blank"
           rel="noreferrer"
         >
-          <button className=" uppercase text-sm md:ext-[1.25rem] border border-white p-[1rem] hover:bg-white hover:text-black text-white hover:font-semibold transition-all">
+          <button className=" uppercase text-sm md:ext-[1.25rem] border border-white p-[1rem] hover:bg-white text-white hover:text-black hover:font-semibold transition-all">
             Download Brochure
           </button>
         </a>

components/style-guide/sections/Header.jsx

@@ -4,21 +4,25 @@ import Image from 'next/dist/client/image'
 import LogoPng from '../../../public/assests/landingPage/tecnoesis.png'
 
 function Header() {
-  const [offsetY, setOffsetY] = useState(0);
+  const [offsetY, setOffsetY] = useState(0)
   const handleScroll = () => {
     setOffsetY(window.pageYOffset)
   }
   useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('scroll', handleScroll)
 
-    return () => { window.removeEventListener('scroll', handleScroll) };
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
   }, [])
   return (
-
     <div className="block">
       <h1
         className="flex justify-center items-center font-roadRage text-4xl drop-shadow-[30px_30px_50px_50px_#FFFFFF]"
-        style={{ filter: 'drop-shadow(0px 4px 20px rgba(78, 223, 255, 0.5))', transform: `translateY(${offsetY*0.2}px)` }}
+        style={{
+          filter: 'drop-shadow(0px 4px 20px rgba(78, 223, 255, 0.5))',
+          transform: `translateY(${offsetY * 0.2}px)`,
+        }}
       >
         Coming Soon
       </h1>
@@ -63,7 +67,6 @@ function Header() {
       <h1 className="text-center text-2xl md:text-4xl font-lemonMilk my-2">
         October
       </h1>
-
     </div>
   )
 }

components/style-guide/sections/Parallax.jsx

@@ -7,35 +7,32 @@ import Header from './Header'
 import Socials from './Socials'
 
 function Parallax() {
-  const [offsetY, setOffsetY] = useState(0);
+  const [offsetY, setOffsetY] = useState(0)
   const handleScroll = () => {
     setOffsetY(window.pageYOffset)
   }
   useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('scroll', handleScroll)
 
-    return () => { window.removeEventListener('scroll', handleScroll) };
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
   }, [])
   return (
+    <div className="relative h-screen w-screen overflow-y-hidden bg-black">
+      <div className="bg-black bg-opacity-30 z-20  absolute inset-0"></div>
 
-
-    <div
-      className="relative h-screen w-screen overflow-y-hidden bg-black">
-        <div className='bg-black bg-opacity-30 z-20  absolute inset-0'>
-
-        </div>
       <div className="absolute top-[15vh] w-full z-20 text-white">
         <Header />
       </div>
-      <div className='absolute hidden md:block   md:top-48 right-8  md:left-8 z-40'>
-
-
+      <div className="absolute hidden md:block   md:top-48 right-8  md:left-8 z-40">
         <Socials />
       </div>
 
-
-      <div className="absolute relative w-screen h-screen top-0 left-0" style={{transform: `translateY(${offsetY*0.5}px)`}}>
-
+      <div
+        className="absolute relative w-screen h-screen top-0 left-0"
+        style={{ transform: `translateY(${offsetY * 0.5}px)` }}
+      >
         <Image src={BGFIRST} layout="fill" objectFit="cover" />
       </div>
       <div className="absolute relative z-10 w-screen -top-[42vh] left-0 h-[80vh] hidden md:block">