Added a about and services content with scroll effect on the same page

GDG-OnCampus-BU · Oct 30, 2024 · e899ce9 · e899ce9
1 parent 1d3f39d
commit e899ce9
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 168 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,6 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.27.0",
     "react-swipeable": "^7.0.1",
     "sharp": "^0.33.5"
   },
@@ -27,4 +26,4 @@
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.1"
   }
-}
+}
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
@@ -21,7 +21,7 @@ export default function RootLayout({ children }) {
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    const timeout = setTimeout(() => setIsLoading(false), 2000); // Simulated loading delay
+    const timeout = setTimeout(() => setIsLoading(false), 3000); // Simulated loading delay
     return () => clearTimeout(timeout);
   }, []);
 
@@ -74,4 +74,4 @@ const styles = {
     textDecoration: "none",
     fontSize: "1.8rem",
   },
-};
+};
diff --git a/src/app/page.jsx b/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,13 +29,40 @@ export default function Home() {
           top: -1,
           behavior: "smooth",
         });
-      }, 600);
+      }, 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}/>
       <div
       id="fixed-image"
       className="fixed top-[-10] left-0 w-full h-full z-[-1] bg-cover bg-center opacity-40"
@@ -77,6 +106,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>
+
+      {/* About 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 />

diff --git a/src/app/services/page.js b/src/app/services/page.js
diff --git a/src/app/about/page.js → src/components/About.jsx b/src/app/about/page.js → src/components/About.jsx
@@ -1,26 +1,5 @@
-"use client";
-
-import Navbar from "@/components/Navbar";
-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: -65,
-              behavior: "smooth",
-            });
-          }, 800);
-        }
-      };
-    useEffect(()=>{
-        setTimeout(()=>{
-            scrollToSection();
-        },1700)
-    },[])
+export default function About() {
+
     const Section = ({ title, content }) => (
         <section className="more-section mb-12 rounded-lg overflow-hidden" style={{marginLeft:'50px',marginRight:'50px'}}>
           <div
@@ -69,10 +48,6 @@ export default function Home() {
           title: "What We Do",
           content: (
             <ul className="list-disc list-inside space-y-2">
-              <li>
-                <strong>Workshops & Hackathons:</strong> Hands-on coding workshops,
-                hackathons, and coding challenges.
-              </li>
               <li>
                 <strong>Guest Speaker Sessions:</strong> Talks from professionals in
                 tech, including Google engineers and developers.
@@ -108,21 +83,11 @@ export default function Home() {
       ];
   return (
     <>
-    <Navbar />
-      <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>
 
     <main>
-    <div className="flex flex-col items-center justify-center min-h-screen p-8 pb-20 gap-8 sm:p-20 text-center">
+    <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 onClick={scrollToSection}>About GDG-BU</button>
+          <button>About GDG-BU</button>
         </h1>
     </div>
 

diff --git a/src/app/contact/page.js → src/components/Contact.jsx b/src/app/contact/page.js → src/components/Contact.jsx
@@ -1,6 +1,3 @@
-"use client";
-
-import Navbar from "@/components/Navbar";
 import { useEffect } from "react";
 
 export default function Home() {
@@ -24,17 +21,6 @@ export default function Home() {
 
   return (
     <>
-    {/* Meta Tags for SEO */}
-    <Navbar />
-      <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 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

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
 
-export default function Navbar() {
+export default function Navbar(props) {
   const public_path = process.env.NEXT_PUBLIC_PUBLIC_PATH
   const [visible, setVisible] = useState(false);
   const [scrollPosition, setScrollPosition] = useState(0);
@@ -26,6 +26,11 @@ export default function Navbar() {
       window.removeEventListener("scroll", handleScroll);
     };
   }, [scrollPosition]);
+
+  const getButtonId = (event) => {
+    return event.target.id;
+  };
+
   return (
     <>
       <nav
@@ -96,28 +101,27 @@ export default function Navbar() {
                 </a>
               </li>
               <li>
-                <a
-                  href="/about"
+                <button
+                  onClick={props.scrollToABout}
                   className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                 >
                   About
-                </a>
+                </button>
               </li>
               <li>
-                <a
-                  href="services"
+                <button
+                  onClick={props.scrollToServices}
                   className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                 >
                   Services
-                </a>
+                </button>
               </li>
               <li>
-                <a
-                  href="contact"
+                <button
                   className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                 >
                   Contact
-                </a>
+                </button>
               </li>
             </ul>
           </div>