Merge pull request #78 from Aditya30ag/tonext

I have convert the react code to next js

jsconfig.json

@@ -5,3 +5,4 @@
     }
   }
 }
+

package.json

@@ -16,8 +16,12 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
+    "react-odometerjs": "^3.1.3",
+    "react-scroll": "^1.9.0",
+    "react-slick": "^0.30.2",
     "react-swipeable": "^7.0.1",
-    "sharp": "^0.33.5"
+    "sharp": "^0.33.5",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "eslint": "^8.57.1",

src/Commons/SocialHandles/SocialHandles.css

@@ -0,0 +1,5 @@
+.handles-container{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}

src/Commons/SocialHandles/index.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import './SocialHandles.css';
+import { FaInstagram, FaXTwitter, FaYoutube,FaLinkedin} from "react-icons/fa6";
+
+const SocialHandles = () => {
+  return (
+    <div className='handles-container'>
+        {
+            socialHandles.map((handle, index) => (
+                <a href={handle.link} target='_blank' className='flex-center icon-wrapper' key={index}>
+                    {handle.icon}
+                </a>
+            ))
+            }
+    </div>
+  )
+}
+
+const socialHandles = [
+  {
+    name:"Instagram",
+    icon:<FaInstagram />,
+    link:"https://www.instagram.com/",
+  },
+  {
+    name:"Linkedin",
+    icon:<FaLinkedin/>,
+    link:"https://www.linkedin.com/in/devanshi-jaiswal-b83774217/",
+  },
+  {
+    name:"Twitter",
+    icon:<FaXTwitter/>,
+    link:"",
+  },
+  {
+    name:"Youtube",
+    icon:<FaYoutube/>,
+    link:"httpshttps://www.youtube.com/://www.youtube.com/channel/UCEtnsPZQEd0l1tbr_nDQd5Q?sub_confirmation=1",
+  },
+];
+
+export default SocialHandles

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

@@ -2,8 +2,15 @@
 
 import { useEffect, useState } from "react";
 import Navbar from "@/components/Navbar";
-import EventsSection from "@/components/EventsSection";
-import Links from "@/components/Links";
+import Services from "@/components/Services";
+import Hero from "@/components/Hero";
+import Properties from "@/components/Properties";
+import Agents from "@/components/Agents";
+import Clients from "@/components/Clients";
+import Contact from "@/components/Contact";
+import Footer from "@/components/Footer";
+import '../styles/index.css';
+import About from "@/components/About";
 
 export default function Home() {
   const publicPath = process.env.NEXT_PUBLIC_PUBLIC_PATH ;
@@ -18,56 +25,19 @@ export default function Home() {
     fetchEventsData();
   }, []);
 
-  const scrollToSection = () => {
-    const section = document.getElementById("more-section");
-    if (section) {
-      section.scrollIntoView({ behavior: "smooth" });
-      setTimeout(() => {
-        window.scrollBy({
-          top: -1,
-          behavior: "smooth",
-        });
-      }, 600);
-    }
-  };
+
+
   return (
     <>
-      <Navbar />
-
-      <div
-        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">
-          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"
-        >
-          Discover More
-        </button>
-      </div>
-
-      {/* Second Section */}
-      <div
-        id="more-section"
-        className="flex flex-col items-center justify-center min-h-screen p-8 pb-20 gap-8 sm:p-50 text-center"
-      >
-        <EventsSection events={eventsData} />
-      </div>
-
-      {/* Links Section */}
-      <div className="bg-gray-900 py-12">
-        <Links />
-      </div>
+      <Navbar/>
+      <Hero/>
+      <About/>
+      <Services/>
+      <Properties/>
+      <Agents/>
+      <Clients/>
+      <Contact/>
+      <Footer/>
     </>
   );
 }