Merge branch 'main' into add_info_button

components/Error/NotFound.jsx

@@ -0,0 +1,40 @@
+// NotFound.jsx
+import React from 'react';
+// import astronaut from '/astronaut.svg';
+// import saturn from '/saturn.svg';
+import {useRouter} from 'next/router'
+import Image from 'next/image';
+
+const NotFound = () => {
+
+    const navigate = useRouter()
+
+    const handleRedirection = () => {
+        navigate.push('/')
+    }
+    return (
+        <div className="bg-[#24344c] h-screen relative overflow-hidden fontDosis">
+            <div id="particles-js" className=" bg-[#24344c] fixed w-full h-full opacity-20"></div>
+            <div className="denied__wrapper absolute bg-[#24344c] denied__wrapper h-[390px] left-1/2 max-w-[390px] mx-auto top-[30%] translate-x-[-50%] translate-y-[-50%] w-full">
+                <div className='relative'>
+                    <h1 className="text-center text-white font-Dosis text-[100px] mb-0 font-extrabold">404</h1>
+                    <h3 className="text-center text-white text-base md:text-xl leading-6 max-w-[330px] mx-auto mb-8 font-Dosis font-normal">
+                        LOST IN 
+                        <span className="relative inline-block">
+                        &nbsp; SPACE
+                            <span className="strikeThru"></span>
+                        </span>
+
+                        &nbsp; GDSC? Hmm, looks like that page doesn&apos;t exist.
+                    </h3>
+                    <Image id="astronaut" src="/astronaut.svg" alt="Astronaut" className="w-[43px] absolute right-20 top-210 animate-spin animation-linear duration-100" width={43} height={43} />
+                    <Image id="planet" src="/saturn.svg" alt="Planet" className="absolute w-[390px]" width={390} height={390}/>
+                </div>
+            </div>
+
+            <button className='bg-transparent text-white py-2 px-0 border border-white rounded-md w-[150px] text-15 text-center mx-auto align-middle block mb-4 mt-25 fontDosis font-normal bottom-0 absolute left-1/2 translate-x-[-50%] translate-y-[-50%]' onClick={handleRedirection} >Go Home</button>
+        </div>
+    );
+};
+
+export default NotFound;

components/Fields.jsx

@@ -3,53 +3,56 @@ import Image from "next/image";
 
 function Fields() {
   return (
-    <div className="p-20">
-      <p className="text-6xl font-semibold text-center">FIELDS WE WORK IN</p>
+    <div className="md:px-5 w-[95%] lg:w-[90%] relative mx-auto lg:mt-20 md:mt-[100px]">
+      <p className="text-2xl     font-semibold text-center">FIELDS WE  WORK IN</p>
       {/* Web Development */}
-      <div className="flex items-center py-5">
-        <div className="w-2/3">
-          <p className="font-semibold text-6xl mb-5">Development</p>
+      <div className="grid grid-cols-2 mx-auto  grid-col my-5  gap-5 md:grid-cols-1 items-center py-5">
+        <div className="w-10/12 ">
+          <p className="font-semibold text-6xl  md:text-xl lg:mb-5">Development</p>
           <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
-            architecto asperiores dicta saepe totam quas laboriosam voluptates
-            facilis ut numquam, vel beatae odit blanditiis ullam qui, cum
-            quibusdam atque iure?
+            Development is the process of creating and maintaining software and
+            computer programs. Dev encompasses everything from coding, to
+            maintenance to debugging. The open source community is one of the
+            most popular &quot;developer&quot; communities
           </p>
         </div>
-        <div>
-          <Image src="/webdev-image.png" width={400} height={400} />
+        <div className="mx-auto">
+          <Image src="/webdev-image.png" width={400} height={400} alt="" />
         </div>
       </div>
 
       {/* DSA AND CP */}
-      <div className="flex items-center py-5 bg-gray-100">
-        <div>
-          <Image src="/dsacp-image.png" width={400} height={400} />
+      <div className="grid grid-cols-2 gap-4 my-5  md:grid-cols-1 md:p-2 items-center py-5 bg-gray-100">
+        <div className="md:mx-auto">
+          <Image src="/dsacp-image.png" width={400} height={400} alt="" />
         </div>
-        <div className="w-2/3">
-          <p className="font-semibold text-6xl mb-5">DSA And CP</p>
+        <div className="w-10/12 ">
+          <p className="font-semibold md:text-xl text-6xl lg:mb-5">DSA And CP</p>
           <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
-            architecto asperiores dicta saepe totam quas laboriosam voluptates
-            facilis ut numquam, vel beatae odit blanditiis ullam qui, cum
-            quibusdam atque iure?
+            DSA (Data Structures and Algorithms) is the study of organizing and
+            manipulating data efficiently to perform complex computations
+            Competitive programming is a sport of coding where individuals or
+            teams solve algorithmic problems in a timed competition using DSA
+            skills, and quick thinking to solve problems within constraints.
           </p>
         </div>
       </div>
 
       {/* Machine Learning */}
-      <div className="flex items-center py-5">
-        <div className="w-2/3">
-          <p className="font-semibold text-6xl mb-5">Machine Learning</p>
+      <div className="grid grid-cols-2 md:grid-cols-1 gap-5  items-center py-5">
+        <div className="w-10/12">
+          <p className="font-semibold text-6xl md:text-xl lg:mb-5">Machine Learning</p>
           <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
-            architecto asperiores dicta saepe totam quas laboriosam voluptates
-            facilis ut numquam, vel beatae odit blanditiis ullam qui, cum
-            quibusdam atque iure?
+            Machine learning is a sub domain of artificial intelligence that
+            lets computers learn from data and make predictions or decisions for
+            newer datasets. It involves using algorithms to analyze corelations,
+            patterns and relationships within datasets. This technology finds
+            applications in diverse fields, from autonomous driving to
+            bioinformatics.
           </p>
         </div>
-        <div>
-          <Image src="/ml-image.png" width={400} height={400} />
+        <div className="mx-auto">
+          <Image src="/ml-image.png" width={400} height={400} alt="" />
         </div>
       </div>
     </div>

components/Footer.jsx

@@ -4,8 +4,8 @@ function Footer() {
   return (
 
     <footer className="bg-gray-100 py-8 sm:py-12">
-      <div className="container mx-auto px-4">
-        <div className="sm:flex sm:flex-wrap sm:-mx-4 md:py-4">
+      <div className="container mx-auto px-4 relative ">
+        <div className="sm:flex sm:flex-wrap mx-[27%] w-full">
           <div className="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6">
             <h5 className="text-xl font-bold mb-6">Features</h5>
             <ul className="list-none footer-links">
@@ -63,21 +63,22 @@ function Footer() {
               </li>
             </ul>
           </div>
-          <div className="px-4 mt-4 sm:w-1/3 xl:w-1/6 sm:mx-auto xl:mt-0 xl:ml-auto">
+
+        </div>
+        <div className="px-4 mt-4 sm:w-1/3 xl:w-1/6 sm:mx-auto xl:mt-0 xl:ml-auto">
             <h5 className="text-xl font-bold mb-6 text-center xl:text-left">Stay connected</h5>
             <div className="flex justify-center xl:justify-start">
-              <a href="#" className="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 text-gray-600 hover:text-white hover:bg-blue-600 hover:border-blue-600">
+              <a href="#" className="w-8 h-8 border border-gray-400 rounded-full text-center py-1 text-gray-600 hover:text-white hover:bg-blue-600 hover:border-blue-600">
                 <i className="fab fa-facebook"></i>
               </a>
-              <a href="#" className="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-blue-400 hover:border-blue-400">
+              <a href="#" className="w-8 h-8 border border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-blue-400 hover:border-blue-400">
                 <i className="fab fa-twitter"></i>
               </a>
-              <a href="#" className="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-red-600 hover:border-red-600">
+              <a href="#" className="w-8 h-8 border border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-red-600 hover:border-red-600">
                 <i className="fab fa-google-plus-g"></i>
               </a>
             </div>
           </div>
-        </div>
       </div>
     </footer>
 

components/Landing.jsx

@@ -3,14 +3,21 @@ import { Player } from "@lottiefiles/react-lottie-player";
 
 function Landing() {
   return (
+
     <div className="px-20 h-[90vh] flex justify-center items-center">
 
+
       {/* Landing text */}
       <div className="flex justify-center items-center">
         <div className="w-4/5 flex justify-center flex-col">
-          <p className="font-semibold text-5xl mb-10">
+          <p className="font-semibold text-5xl md:text-3xl mb-10 md:mb-5 leading-[4.8rem] ">
             DEVELOPER STUDENT CLUBS <br />{" "}
-            <strong className="font-bold">Jadavpur University</strong>
+            <strong className="font-bold">
+              <span className="text-red-400">Ja</span>
+              <span className="text-blue-400">da</span >
+              <span className="text-yellow-400">vp</span>
+              <span className="text-green-600">ur</span> 
+              &nbsp; University</strong>
           </p>
           <p className="text-1xl">
             The Google Developer Student Club program is a program for
@@ -28,20 +35,22 @@ function Landing() {
             build their professional and personal networks and get access to
             google developer resources. Atanu Nayak.
           </p>
+
           <a 
             className="w-24 mt-5 bg-transparent text-center hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded-full" 
             href="https://developers.google.com/community/gdsc"
             target="_blank"
           >
             Info
           </a>
+
         </div>
 
         {/* Landing Image/Animation */}
         <div>
           <Player
             src="https://lottie.host/b7fcc177-9bcd-41d7-bb12-349512dc7a9f/lzngOsKudE.json"
-            className="player"
+            className="player md:hidden"
             loop
             autoplay
           />

components/Navbar.jsx

@@ -3,25 +3,25 @@ import Link from "next/link";
 
 const Navbar = () => {
   return (
-    <div className="h-[10vh] bg-white border-black border-b-2 flex items-center justify-between px-20 sticky top-0 z-50">
+    <div className="flex items-center justify-between h-20 px-11 top-0 z-10 sticky mx-auto bg-transparent backdrop-blur-sm">
       {/* Logo Image */}
       <Link href="/">
-        <Image src="/gdsc.png" width={400} height={300} />
+        <Image src="/gdsc.png" width={400} height={300} alt="logo"/>
       </Link>
 
       {/* Nav Links */}
-      <div className="flex justify-between items-center w-1/3">
+      <div className="flex justify-between items-center w-1/3 md:hidden">
         <Link href="/events">
-          <p className="text-2xl hover:text-gray-400">Events</p>
+          <p className="text-2xl hover:text-gray-400 text-red-400">Events</p>
         </Link>
         <Link href="/gallery">
-          <p className="text-2xl hover:text-gray-400">Gallery</p>
+          <p className="text-2xl hover:text-gray-400 text-blue-400">Gallery</p>
         </Link>
         <Link href="/projects">
-          <p className="text-2xl hover:text-gray-400">Projects</p>
+          <p className="text-2xl hover:text-gray-400 text-yellow-400">Projects</p>
         </Link>
         <Link href="/team">
-          <p className="text-2xl hover:text-gray-400">Team</p>
+          <p className="text-2xl hover:text-gray-400 text-green-600">Team</p>
         </Link>
       </div>
     </div>

package.json

@@ -5,12 +5,12 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "next",
     "lint": "next lint"
   },
   "dependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.3",
-    "next": "latest",
+    "next": "^13.5.3",
     "react": "latest",
     "react-dom": "latest"
   },
@@ -20,5 +20,9 @@
     "eslint-config-next": "latest",
     "postcss": "latest",
     "tailwindcss": "latest"
-  }
+  },
+  "description": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).",
+  "main": "next.config.js",
+  "author": "",
+  "license": "ISC"
 }

pages/404.js

@@ -0,0 +1,7 @@
+import NotFound from '@/components/Error/NotFound';
+
+const _404 = () => {
+    return <NotFound />
+};
+
+export default _404;