Added a parallax feature , Added the about and services section comp…

…onent for the Jabbar. (#75)

package.json

@@ -26,4 +26,4 @@
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.1"
   }
-}
+}

src/app/Loading.jsx

@@ -32,4 +32,4 @@ export default function LoadingScreen() {
       </div>
     </div>
   );
-}
+}

src/app/layout.jsx

@@ -74,4 +74,4 @@ const styles = {
     textDecoration: "none",
     fontSize: "1.8rem",
   },
-};
+};

src/app/page.jsx

@@ -4,6 +4,8 @@ import { useEffect, useState } from "react";
 import Navbar from "@/components/Navbar";
 import EventsSection from "@/components/EventsSection";
 import Links from "@/components/Links";
+import About from "@/components/About";
+import Services from "@/components/Services";
 
 export default function Home() {
   const publicPath = process.env.NEXT_PUBLIC_PUBLIC_PATH ;
@@ -27,33 +29,88 @@ export default function Home() {
           top: -1,
           behavior: "smooth",
         });
-      }, 600);
+      }, 800);
     }
   };
+
+  const scrollToHome = () => {
+    const section = document.getElementById("homesection");
+    if (section) {
+      section.scrollIntoView({ behavior: "smooth" });
+      setTimeout(() => {
+        window.scrollBy({
+          top: -1,
+          behavior: "smooth",
+        });
+      }, 800);
+    }
+  };
+
+
+  //scroll for about
+  const scrollToABout = () => {
+      const section = document.getElementById("aboutsection");
+      if (section) {
+        section.scrollIntoView({ behavior: "smooth" });
+      setTimeout(() => {
+        window.scrollBy({
+          top: -1,
+          behavior: "smooth",
+        });
+      }, 800);
+      }
+  }
+  //scroll for services
+  const scrollToServices = () => {
+    const section = document.getElementById("servicessection");
+    if (section) {
+      section.scrollIntoView({ behavior: "smooth" });
+    setTimeout(() => {
+      window.scrollBy({
+        top: -1,
+        behavior: "smooth",
+      });
+    }, 800);
+    }
+}
+
   return (
     <>
-      <Navbar />
+      <Navbar scrollToABout={scrollToABout} scrollToServices={scrollToServices} scrollToHome={scrollToHome}/>
+      <div
+      id="fixed-image"
+      className="fixed top-[-10] left-0 w-full h-full z-[-1] bg-cover bg-center opacity-40"
+      style={{
+        backgroundImage: "url('https://gdg-oncampus-bu.github.io/landing-page/assets/image1.png')",
+        backgroundRepeat:"none",
+        backgroundSize:"cover",
+      }}
+    ></div>
 
       <div
+        id="homesection"
         className="flex flex-col items-center justify-center min-h-screen p-8 pb-20 gap-8 sm:p-20 text-center"
-        style={{
-          // we are hardcoding the image url here due to gh pages and next contraints
-          backgroundImage: `url('https://gdg-oncampus-bu.github.io/landing-page/assets/image1.png')`,
-          backgroundSize: "contain",
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "bottom",
-        }}
       >
-        <h1 className="text-4xl sm:text-5xl font-bold text-white">
+        <h1 className="text-4xl sm:text-5xl font-bold text-white tracking-wide shadow-lg bg-gradient-to-r bg-white bg-clip-text text-transparent">
           We are GDG-BU
         </h1>
 
+
         <button
           onClick={scrollToSection}
-          className="rounded-full border border-solid border-transparent bg-foreground text-background hover:bg-[#383838] dark:hover:bg-[#ccc] text-lg sm:text-xl h-12 sm:h-14 px-6 sm:px-8 transition-colors"
+          className="flex items-center justify-center rounded-full border border-transparent bg-gradient-to-r bg-white text-black text-lg sm:text-xl h-10 sm:h-12 px-4 sm:px-6 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl hover:rotate-1 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
         >
+          <svg
+            className="w-5 h-5 mr-2 animate-bounce"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H8a1 1 0 110-2h3V6a1 1 0 011-1z" />
+          </svg>
           Discover More
         </button>
+
       </div>
 
       {/* Second Section */}
@@ -64,6 +121,16 @@ export default function Home() {
         <EventsSection events={eventsData} />
       </div>
 
+      {/* About Section */}
+      <div id="aboutsection" className="flex flex-col items-center justify-center min-h-screen p-4 pb-10 gap-8 sm:p-100 text-center">
+        <About/>
+      </div>
+
+      {/* Services Section */}
+      <div id="servicessection" className="flex flex-col items-center justify-center p-4 pb-10 gap-8 sm:p-100 text-center">
+        <Services/>
+      </div>
+
       {/* Links Section */}
       <div className="bg-gray-900 py-12">
         <Links />

src/components/About.jsx

@@ -0,0 +1,102 @@
+export default function About() {
+
+    const Section = ({ title, content }) => (
+        <section className="more-section mb-12 rounded-lg overflow-hidden" style={{marginLeft:'50px',marginRight:'50px'}}>
+          <div
+            className="page-content p-8 md:p-16 bg-gray-800 text-white rounded-lg shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-700 hover:shadow-2xl"
+          >
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 border-b-2 border-blue-400 pb-2">
+              {title}
+            </h2>
+            <div className="text-lg leading-relaxed">{content}</div>
+          </div>
+        </section>
+      );
+
+      const sectionsData = [
+        {
+          title: "Who We Are",
+          content: (
+            <p>
+              Google Developer Group BU (GDG-BU) is a community of students,
+              developers, and tech enthusiasts at Boston University, all with a
+              passion for learning, building, and sharing. We connect individuals
+              interested in Google's developer technology, providing a platform for
+              networking, learning, and collaboration.
+            </p>
+          ),
+        },
+        {
+          title: "Our Mission",
+          content: (
+            <>
+              <p>
+                Our mission at GDG BU is to empower our members to grow as developers,
+                to foster a spirit of innovation and problem-solving, and to provide a
+                collaborative environment that promotes learning and mentorship.
+              </p>
+              <p className="mt-4">
+                Through hands-on workshops, talks by industry experts, and
+                project-based learning, we aim to bridge the gap between academic
+                knowledge and industry skills, preparing members for successful
+                careers in technology.
+              </p>
+            </>
+          ),
+        },
+        {
+          title: "What We Do",
+          content: (
+            <ul className="list-disc list-inside space-y-2">
+              <li>
+                <strong>Guest Speaker Sessions:</strong> Talks from professionals in
+                tech, including Google engineers and developers.
+              </li>
+              <li>
+                <strong>Networking Opportunities:</strong> Events that connect
+                students and professionals, helping build a strong tech network.
+              </li>
+              <li>
+                <strong>Mentorship Programs:</strong> Pairing members with mentors who
+                guide them in their tech journey.
+              </li>
+            </ul>
+          ),
+        },
+        {
+          title: "Join GDG BU",
+          content: (
+            <>
+              <p>
+                Interested in becoming part of GDG BU? Whether you're new to tech or a
+                seasoned developer, our community welcomes you! Join us to learn,
+                connect, and grow in a supportive environment. Check out our upcoming
+                events, and feel free to reach out to us with any questions.
+              </p>
+              <p className="mt-4">
+                Follow us on social media to stay updated with our latest events and
+                announcements
+              </p>
+            </>
+          ),
+        },
+      ];
+  return (
+    <>
+
+    <main>
+    <div className="flex flex-col items-center justify-center text-center bg-black py-12 w-full mb-8" style={{borderRadius:"20px"}}>
+        <h1 className="text-4xl sm:text-5xl font-bold text-white tracking-wide shadow-lg bg-gradient-to-r bg-white bg-clip-text text-transparent">
+          <button>About GDG-BU</button>
+        </h1>
+    </div>
+
+    <div id="more-section">
+        {sectionsData.map((section, index) => (
+        <Section key={index} title={section.title} content={section.content} />
+        ))}
+    </div>
+    </main>
+  </>
+  );
+}

src/components/Contact.jsx

@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+
+export default function Home() {
+    const scrollToSection = () => {
+        const section = document.getElementById("more-section");
+        if (section) {
+          section.scrollIntoView({ behavior: "smooth" });
+          setTimeout(() => {
+            window.scrollBy({
+              top: -1,
+              behavior: "smooth",
+            });
+          }, 600);
+        }
+      };
+    useEffect(()=>{
+        setTimeout(()=>{
+            scrollToSection();
+        },1700)
+    },[])
+
+  return (
+    <>
+    <div className="flex flex-col items-center justify-center min-h-screen p-8 pb-20 gap-8 sm:p-20 text-center">
+        <h1 className="text-4xl sm:text-5xl font-bold text-white tracking-wide shadow-lg bg-gradient-to-r bg-white bg-clip-text text-transparent">
+          Contact GDG-BU
+        </h1>
+    </div>
+    <main>
+    <section className="more-section mb-12 rounded-lg overflow-hidden">
+          <div
+            className="page-content p-8 md:p-16 bg-gray-800 text-white rounded-lg shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-700 hover:shadow-2xl"
+          >
+            <h2 className="text-3xl md:text-4xl font-bold mb-4 border-b-2 border-blue-400 pb-2">
+
+            </h2>
+            <div className="text-lg leading-relaxed"></div>
+          </div>
+        </section>
+    </main>
+    </>
+  );
+}

src/components/Loader.jsx

@@ -17,4 +17,4 @@ export default function Loader() {
       </div>
     </div>
   );
-}
+}