Merge pull request #9 from Gaurav-Choudhary2113/master

feat: timeline page and scrollbar

devsoc24-landing/src/components/LearnMoreBtn.tsx

@@ -0,0 +1,19 @@
+"use client";
+import { motion } from "framer-motion";
+import styles from "@/styles/LearnMoreBtn.module.css";
+
+const LearnMoreBtn = (props: { link: string }) => {
+  return (
+    <>
+      <motion.a
+        href={props.link}
+        className={`${styles.btn} font-disket px-3 py-1 text-xl tracking-tighter`}
+        whileHover={{ backgroundPosition: "-100%,100%" }}
+      >
+        Learn More
+      </motion.a>
+    </>
+  );
+};
+
+export default LearnMoreBtn;

devsoc24-landing/src/components/Timeline.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Image from "next/image";
+import devsoc2k24 from "@/assets/images/DEVSOC2k24.svg";
+import LearnMoreBtn from "./LearnMoreBtn";
+import dotgrid from "@/assets/images/dot_grid.svg";
+
+const Timeline = () => {
+  return (
+    <div className="bg-logo font-disket overflow-hidden bg-[#020202]">
+      <Image
+        className="absolute left-60 top-[1100px]"
+        src={dotgrid as HTMLImageElement}
+        alt="dotgrid"
+        height={100}
+        width={100}
+      />
+      <Image
+        className="absolute left-[1160px] top-[1300px]"
+        src={dotgrid as HTMLImageElement}
+        alt="dotgrid"
+        height={100}
+        width={100}
+      />
+      <div className="h-[1080px] w-full flex-wrap">
+        <div className="mt-48 flex w-full justify-center">
+          <Image
+            className="mx-20 w-[300px] md:w-[35%]"
+            src={devsoc2k24 as HTMLImageElement}
+            alt="devsoc"
+            quality={100}
+          />
+        </div>
+        <div className="flex w-full justify-center">
+          {" "}
+          <div className="mx-10 mt-10 w-[500px] text-center text-xs text-[#bbbbbb] md:text-[12px] lg:w-[600px]">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </div>
+        </div>
+        <div className="mt-14 flex w-full justify-center">
+          <LearnMoreBtn link={""} />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Timeline;

devsoc24-landing/src/pages/index.tsx

@@ -1,10 +1,12 @@
+import Timeline from "@/components/Timeline";
 import About from "@/components/about";
 import Main from "@/components/main";
 
 export default function Home() {
   return (
     <>
       <Main />
+      <Timeline />
       <About />
     </>
   );

devsoc24-landing/src/styles/LearnMoreBtn.module.css

@@ -0,0 +1,23 @@
+.btn
+{
+    font-size: medium;
+    padding: 8px 32px;
+    text-decoration: none;
+    display: inline-block;
+    position: relative;
+    border: 2px solid black;
+    box-shadow: 5px 5px 5px #0A0A0A;
+
+    background-image: linear-gradient(90deg,
+    white 0%,
+    white 50%,
+    #77B075 50%,
+    #77B075 100%);
+    background-size: 200%;
+}
+
+.btn:hover
+{
+    cursor: pointer;
+}
+

devsoc24-landing/src/styles/globals.css

@@ -103,3 +103,43 @@
     transform: translate3d(-7rem, 0, 0);
   }
 }
+
+/* Define the style for the scrollbar track */
+::-webkit-scrollbar {
+  width: 2.5px;
+  /* Width of the scrollbar */
+}
+::-webkit-scrollbar:hover {
+  width: 3.5px;
+  /* Width of the scrollbar */
+}
+
+/* Define the style for the scrollbar handle (thumb) */
+::-webkit-scrollbar-thumb {
+  background-color: #484848;
+  /* Yellow color */
+  border-radius: 10px;
+  /* Rounded corners */
+}
+
+
+/* Define the style for the scrollbar track */
+::-webkit-scrollbar-track {
+  background-color: #020202;
+  /* Black color */
+
+  /* Rounded corners */
+}
+
+::-webkit-scrollbar-track:hover {
+  background-color: #c4c4c4;
+  /* Black color */
+
+  /* Rounded corners */
+}
+.bg-logo {
+  background-image: url('../assets/images/DEVSOCLOGOBIG.svg');
+  background-size: 80%;
+  background-repeat: no-repeat; 
+  background-position:center;
+}