feat(events-and-team): add svg for events page and modify the teams p…

…age team item
dscbitshyd · Aug 3, 2021 · aa002c3 · aa002c3
1 parent 4eabfb6
commit aa002c3
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 51 deletions.
diff --git a/components/header/ActiveLink.js b/components/header/ActiveLink.js
@@ -0,0 +1,24 @@
+import { useRouter } from "next/router";
+
+function ActiveLink({router, href, children}) {
+
+    // (function prefecthPages() {
+    //     if(typeof window != undefined) {
+    //         router.prefetch(router.pathName)
+    //     }
+    // })()
+
+    const handleClick = event => {
+        event.preventDefault();
+        router.push(href)
+    }
+
+    const isCurrentPath = router.pathName === href || router.asPath === href;
+    return (
+        <a href ={href} className = "" onClick = {handleClick}>
+            {children}
+        </a>
+    )
+}
+
+export default ActiveLink
diff --git a/components/header/Header.js b/components/header/Header.js
@@ -2,22 +2,24 @@ import Logo from './Logo'
 import NavItem from './NavItem'
 import { FaDiscord } from 'react-icons/fa';
 import ThemeToggleButton from './ThemeToggleButton';
+import ActiveLink from './ActiveLink';
 
 function Header() {
     return (
-        <nav className = "flex justify-between p-4 items-center max-w-5xl">
+        <nav className = "flex justify-between p-4 items-center">
             <Logo/>
             <ul className= "flex gap-5 space-x-3 items-center">
                 <div className="hidden md:flex gap-5 space-x-3 items-center">
-                    <NavItem text = "Overview" href = "/" />
+                    {/* <ActiveLink href = "/"> <NavItem text = "Overview" href = "/" /> </ActiveLink> */}
+
                     <NavItem text = "Events" href = "/events" />
                     <NavItem text = "Team" href = "/team" />
                     <NavItem text = "Projects" href = "https://github.com/dscbitshyd"/>
                     <a href = "https://discord.gg/F2QF5eG9">
-                        <div className="flex gap-2 items-center bg-blue-500 hover:bg-blue-700 text-white font-bold p-2 rounded transition duration-500 hover:scale-110">
+                        <button className="flex gap-2 items-center bg-google-blue hover:bg-google-blue text-white dark:text-white font-bold p-2 rounded transition duration-500 hover:scale-110">
                             <FaDiscord />
-                            <h1>Join Community</h1>
-                        </div>
+                            <h1 className = "text-red">Join Community</h1>
+                        </button>
                     </a>
                 </div>
                 <ThemeToggleButton/>

diff --git a/components/header/Logo.js b/components/header/Logo.js
@@ -10,10 +10,10 @@ function Logo() {
 
         <div><img src = '/googleDscLogo.svg' alt = "Logo" height = {40} width = {40} loading="lazy" /></div>
         <div>
-        <h1 className="text-sm md:text-base lg:text-xl dark:text-white">
+        <h1 className="text-lg md:text-lg lg:text-2xl dark:text-white">
             Google Developer Student Clubs
         </h1>
-        <h1 className="text-xs md:text-sm lg-text-base dark:text-white">
+        <h1 className="text-base md:text-base lg:text-lg dark:text-white">
             BITS Pilani Hyderabad Campus
         </h1>
         </div>

diff --git a/components/header/NavItem.js b/components/header/NavItem.js
@@ -3,7 +3,7 @@ import Link from "next/link"
 function NavItem(props) {
     return (
         <Link href = {props.href} >
-            <div className="text-m font-light text-gray-800 dark:text-white rounded transition duration-500 hover:scale-110 cursor-pointer">
+            <div className="text-lg font-light text-gray-800 dark:text-white rounded transition duration-500 hover:scale-110 cursor-pointer">
                     {props.text}
             </div>
         </Link>

diff --git a/components/hero/GoogleRectangle.js b/components/hero/GoogleRectangle.js
@@ -4,9 +4,9 @@ function GoogleRectangle() {
             <div
           className="
             hidden
-            md:block
+            lg:block
             overflow-hidden
-            bg-red-600
+            bg-google-red
             rounded-l-full
             absolute
             h-45
@@ -21,9 +21,9 @@ function GoogleRectangle() {
         <div
           className="
             hidden
-            md:block
+            lg:block
             overflow-hidden
-            bg-blue-600
+            bg-google-blue
             rounded-l-full
             absolute
             h-45
@@ -39,9 +39,9 @@ function GoogleRectangle() {
          <div
         className="
           hidden
-          md:block
+          lg:block
           overflow-hidden
-          bg-green-600
+          bg-google-green
           rounded-l-full
           absolute
           h-45
@@ -56,9 +56,9 @@ function GoogleRectangle() {
         <div
         className="
           hidden
-          md:block
+          lg:block
           overflow-hidden
-          bg-yellow-400
+          bg-google-yellow
           rounded-l-full
           absolute
           h-45

diff --git a/components/hero/Hero.js b/components/hero/Hero.js
@@ -26,15 +26,15 @@ function Hero() {
               layoutId="title"
               className="text-3xl md:text-4 lg:text-5xl text-center lg:text-left mb-6"
             >
-              Google Developer Student Club
+              Google Developer Student Clubs
               </motion.h2>
               <motion.p
-                className="text-gray-600 dark:text-gray-300 text-lg text-center lg:text-left mb-2"
+                className="text-gray-600 dark:text-gray-300 text-2xl text-center lg:text-left mb-2"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ delay: 0.2 }}
                 >
-              BITS Pilani Hyderabad Campus Chapter
+              BITS Pilani Hyderabad Campus
               </motion.p>
               <motion.p
                 className="text-gray-500 dark:text-gray-400 text-base text-center lg:text-left mb-6"
@@ -59,11 +59,11 @@ function Hero() {
                 }
               },
             }} className = "flex space-x-5">
-                    <SocialIcon href = "www.instagram.com" icon = {<RiFacebookCircleLine size = {30} />}/>
-                    <SocialIcon href = "www.instagram.com" icon = {<RiInstagramLine size = {30} />}/>
-                    <SocialIcon href = "www.instagram.com" icon = {<RiLinkedinBoxLine size = {30} />}/>
-                    <SocialIcon href = "www.instagram.com" icon = {<RiMediumLine size = {30} />}/>
-                    <SocialIcon href = "www.instagram.com" icon = {<RiYoutubeLine size = {30} />}/>
+                    <SocialIcon href = "www.instagram.com" icon = {<RiFacebookCircleLine size = {50} />}/>
+                    <SocialIcon href = "www.instagram.com" icon = {<RiInstagramLine size = {50} />}/>
+                    <SocialIcon href = "www.instagram.com" icon = {<RiLinkedinBoxLine size = {50} />}/>
+                    <SocialIcon href = "www.instagram.com" icon = {<RiMediumLine size = {50} />}/>
+                    <SocialIcon href = "www.instagram.com" icon = {<RiYoutubeLine size = {50} />}/>
                   </motion.div>
 
               </div>

diff --git a/components/team/TeamItem.js b/components/team/TeamItem.js
@@ -4,21 +4,28 @@ function TeamItem(props) {
     let githubIcon
     if(props.dev) {
         githubIcon = <div className="flex gap-5">
-        <FiGithub className = "hover:rotate-12 transition duration-200"/>
-        <FiLinkedin className = "hover:-rotate-12 transition duration-200"/>
+            <div className = "border rounded-full p-2">
+        <FiGithub size = {25} className = "hover:rotate-12 transition duration-200"/>
+        </div>
+        <div className = "border rounded-full p-2">
+        <FiLinkedin size = {25} className = "hover:-rotate-12 transition duration-200"/>
+        </div>
     </div>
     } else {
         githubIcon = <div className="flex gap-5">
-        <FiLinkedin className = "hover:rotate-12 transition duration-200" />
+            <div className = "border rounded-full p-2">
+        <FiLinkedin size = {25} className = "hover:rotate-12 transition duration-200" />
+        </div>
     </div>
     }
     return (
-        <div className=" transition duration-500 hover:scale-105 dark:bg-gray-900 flex flex-col rounded-md shadow-xl lg:mb-16">
+        <div className=" transition duration-500 hover:scale-105 dark:bg-gray-100 border-2  flex flex-col rounded-2xl shadow-xl lg:mb-16">
             <div className="p-6 flex flex-col items-center">
                 <Image className = "p-12 rounded-full mx-auto" src={props.url} alt="Profile image" height = {200} width = {200}/>
             <div className="mr-4 ml-4 flex flex-col items-center">
                 <h3 className="mt-5 mb-2 text-bookmark-blue text-lg">{props.name}</h3>
                 <h3 className="mb-2 text-gray-600 text-s">{props.position}</h3>
+
                 {githubIcon}
                 </div>
             </div>

diff --git a/pages/events.js b/pages/events.js
@@ -60,9 +60,17 @@ export default function Events() {
           }
         },
       }} className = "text-center md:text-left max-w-4xl mx-auto md:mx-auto mt-12 md:mt-24 items-center">
+
+      <div className = "flex">
       <h1 className = "text-5xl font-bold tracking-wide mx-auto">
           Stay Tuned! DSC is supercharged for providing many events throughout the year!
       </h1>
+      <img src= "/events.svg" height = {300} width = {300}>
+
+      </img>
+      </div>
+
+
 
         </motion.div>
     </div>

diff --git a/public/events.svg b/public/events.svg
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,6 +6,14 @@ module.exports = {
     extend: {},
     container: {
       center: true
+    },
+    colors: {
+      current: 'currentColor',
+      transperent: 'transperent',
+        'google-yellow' :'#FBBC04',
+        'google-red' : '#EA4335',
+        'google-blue': '#4285F4',
+        'google-green': '#34A853',
     }
   },
   variants: {

diff --git a/utilities/useDarkMode.js b/utilities/useDarkMode.js