Merge pull request #2 from anushkaj-01/main

Add complete timer and navbar section. Add react-router-dom as dependency.

index.html

@@ -14,3 +14,4 @@
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
+<!-- bg-no-repeat w-[100vw] h-[2000px] bg-cover before:bg-gradient-to-b before:from-purple-600 before:to-blue-600 bg-[url('/images/homebgimage.svg')] -->

package.json

@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1",
+    "react-scroll": "^1.9.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

src/App.jsx

@@ -2,11 +2,14 @@ import './App.css'
 import Footer from './components/Footer/Footer'
 import Discord from './components/Discord/Discord'
 import Schedule from './components/Schedule/Schedule'
-
+import TimerSection from './pages/TimerSection'
+import Navbar from './components/Navbar'
 function App() {
 
   return (
     <>
+      <Navbar/>
+      <TimerSection/>
       <Schedule/>
       <Discord/>
       <Footer/>

src/components/CountdownTimer.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {UseCountdown} from '/src/hooks/UseCountdown.jsx';
+import '/src/index.css';
+const ExpiredNotice = () => {
+  return (
+    <div className="expired-notice">
+      <span>Expired!!!</span>
+      <p>Please select a future date and time.</p>
+    </div>
+  );
+};
+const DateTimeDisplay = ({ value, type, isDanger }) => {
+  return (
+    <div className='countdown flex flex-col items-center font-vt323 font-[400] text-[#D9D9D9] '>
+      <div className='mr-[10px] '>
+      <p className='text-[60px] h-[4rem] ' >{type !== 'Days' && <span className="text-[60px] ml-[1rem]">:</span>} {value.toString()}</p>
+      </div>
+      {type == 'Days' && <span className="text-[25px] ml-[0.5rem]">{type}</span>}
+      {type == 'Hours' && <span className="text-[25px] ml-[2.9rem]">{type}</span>}
+      {type == 'Minutes' && <span className="text-[25px] ml-[3rem]">{type}</span>}
+      {type == 'Minutes' || type=='Seconds' && <span className="text-[25px] ml-[3rem]">{type}</span>}
+      {/* <span className='text-[25px] ml-[1.5rem]'>{type}</span> */}
+
+    </div>
+  );
+};
+const ShowCounter = ({ days, hours, minutes, seconds }) => {
+  return (
+    <div className="show-counter flex items-center">
+
+        <DateTimeDisplay value={days} type={'Days'} isDanger={days <= 3} />
+
+        <DateTimeDisplay value={hours} type={'Hours'} isDanger={false} />
+
+        <DateTimeDisplay value={minutes} type={'Minutes'} isDanger={false} />
+
+        <DateTimeDisplay value={seconds} type={'Seconds'} isDanger={false} />
+
+    </div>
+  );
+};
+
+const CountdownTimer = ({ targetDate }) => {
+
+  const [days, hours, minutes, seconds] = UseCountdown(targetDate);
+
+  if (days + hours + minutes + seconds <= 0) {
+    return <ExpiredNotice />;
+  } else {
+    return (
+      <section className='flex justify-center'>
+      <ShowCounter
+        days={days}
+        hours={hours}
+        minutes={minutes}
+        seconds={seconds}
+      />
+      </section>
+    );
+  }
+};
+export default CountdownTimer;

src/components/Footer/Footer.jsx

@@ -11,7 +11,7 @@ import footer from '../../assets/images/footer/footer.svg'
 function Footer() {
     return (
         <>
-        <div className='main-footer'>
+        <div id="footer" className='main-footer'>
             <div id="upfooter" className='bg-cover upfooter relative'>
                     <div className="flex flex-col py-5 xl:py-10 h-[100%] xl:h-[100%]  gap-5 justify-center item-center">
                         <img src={stars} alt="" className='absolute object-cover w-full h-full'/>

src/components/Navbar.jsx

@@ -0,0 +1,30 @@
+export default function Navbar(){
+    const scrollToSchedule = () => {
+        const scheduleSection = document.getElementById('schedule');
+        if (scheduleSection) {
+            scheduleSection.scrollIntoView({ behavior: 'smooth' });
+        }
+    };
+    const scrollToFooter = () => {
+        const footerSection = document.getElementById('footer');
+        if (footerSection) {
+            footerSection.scrollIntoView({ behavior: 'smooth' });
+        }
+    };
+    return(
+        <>
+        <nav className="flex bg-gradient-to-b from-[#040842] to-[#040842] justify-between w-[100vw] h-[100px] mt-0 bg-blue-800 font-vt323">
+            <img className="ml-[2%] pt-[1%]" src="./public/images/logo.svg"></img>
+
+            <ul className="flex space-x-[3rem] text-[2rem] text-white items-center">
+                <a onClick={scrollToSchedule} style={{ cursor: 'pointer' }}><li>SCHEDULE</li></a>
+                <li style={{ cursor: 'pointer' }}>TRACKS</li>
+                <li style={{ cursor: 'pointer' }}>PRIZES</li>
+                <a onClick={scrollToFooter} style={{ cursor: 'pointer' }}><li>MORE</li></a>
+            </ul>
+            <img className="mr-[3%] pt-[1%]" src="./public/images/IIITlogo.svg"></img>
+
+        </nav>
+        </>
+    )
+}

src/components/Schedule/Schedule.jsx

@@ -73,6 +73,7 @@ function Schedule() {
         <>
             <div
                 id="schedule"
+                name="schedule"
                 className="py-10 px-5 sm:px-16 xl:px-48 2xl:px-56 bg-[#040842] font-vt323 bg-[url('/src/assets/images/discord/stars.svg')]"
             >
                 {/* <h1

src/hooks/UseCountdown.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+const UseCountdown = (targetDate) => {
+  // targetDate = "aug 24, 2024 02:0:00";
+  const countDownDate = new Date(targetDate).getTime();
+
+  const [countDown, setCountDown] = useState(
+    countDownDate - new Date().getTime()
+  );
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCountDown(countDownDate - new Date().getTime());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [countDownDate]);
+
+  return getReturnValues(countDown);
+};
+
+const getReturnValues = (countDown) => {
+  // calculate time left
+  const days = Math.floor(countDown / (1000 * 60 * 60 * 24));
+  const hours = Math.floor(
+    (countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+  );
+  const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((countDown % (1000 * 60)) / 1000);
+
+  return [days, hours, minutes, seconds];
+};
+
+export {UseCountdown};

src/index.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/main.jsx

@@ -2,9 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
+import { BrowserRouter } from 'react-router-dom'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
+    <BrowserRouter>
     <App />
+    </BrowserRouter>
   </React.StrictMode>,
 )

src/pages/TimerSection.jsx

@@ -0,0 +1,12 @@
+import CountdownTimer from "../components/CountdownTimer"
+export default function TimerSection(){
+    return(
+        <>
+        <section className="width-[100vh] flex flex-col justify-center font-[vt323]">
+        <p className="text-[#F21212] text-[60px] mb-0">Hurry Up</p>
+        <p className="text-[36px] text-[#9D44C0]">Hacking ends in</p>
+        <CountdownTimer targetDate={"aug 24, 2024 02:01:00"}/>
+        </section>
+        </>
+    )
+}

tailwind.config.js

@@ -5,10 +5,11 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    fontFamily: {
-      'vt323': ['VT323'],
+    extend: {
+      fontFamily:{
+      'vt323':["VT323", 'monospace' ],
+      },  
     },
-    extend: {},
   },
   plugins: [],
 }