Updated Header text rotation

Author: himanshu-guptaaa

package-lock.json

@@ -19,7 +19,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.26.0"
+    "react-router-dom": "^6.26.0",
+    "react-simple-typewriter": "^5.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",

package.json

@@ -1,14 +1,17 @@
 import React from "react";
 const Announce = () => {
     return(
-        <section className="p-8 bg-blue-200 mt-4">
-            <h2 className="text-2xl font-bold mb-4">Announcement</h2>
-            <p className="text-gray-700">
-  1. The last date for registration is September 4th. After the last date, students will not be allowed to participate.<p/>
+        <section className="p-8 bg-[#0a1625] mt-4">
+            <h2 className="text-2xl font-bold mb-4 text-white">Announcement</h2>
+            <p className="text-white">
+  1. The last date for registration is September 15th. After the last date, students will not be allowed to participate.<p/>
   <p>2. Students can only register through the website, not through any other means or forms.</p>
-  <p>3. The inter-college Hackathon will be organized on September 6th.</p>
+  <p>3. The inter-college Hackathon will be organized on Soon.</p>
   <p>4. Students must come in proper attire with their devices.</p>
   <p>5. In case of an emergency, students should contact the coordinating teacher or the organizing student team.</p>
+  <p>6. Their is some changes in Inner college hackathon. their is 16hr implimentation in the UNIVERSITY where student have to implement their products
+    
+  </p>
 </p>
 
         </section>

src/components/announce.jsx

@@ -1,31 +1,49 @@
 import React from "react";
-
+import { Typewriter } from "react-simple-typewriter";
 
 const Header = () => {
   return (
-    
     <div className="relative h-screen overflow-hidden">
+      {/* Background Video */}
       <video
         className="absolute inset-0 w-full h-full object-cover bg-dark-blue-600"
-       src="/new.mp4"
+        src="/new.mp4"
         autoPlay
         loop
         muted
+        playsInline
       />
-      
+
+      {/* Text Section */}
       <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-4">
         <div className="p-4">
-          <h2 className="text-4xl sm:text-6xl lg:text-9xl text-blue-50 font-bold mb-4 sm:mb-8">Let's Build Something</h2>
-          <p className="text-2xl sm:text-4xl lg:text-6xl text-blue-50 font-bold mb-4">Innovative</p>
+          <h2 className="text-4xl sm:text-6xl lg:text-9xl text-blue-50 font-bold mb-4 sm:mb-8">
+            <Typewriter
+              words={[
+  "Code the Future",
+  "Hack Today, Lead Tomorrow",
+  "Dream. Design. Disrupt.",
+  "Ideas Into Impact",
+  "Your Code, Your Legacy",
+  "Redefine What’s Possible",
+  "Think. Create. Elevate."
+]}
+              loop={0} // infinite
+              cursor
+              cursorStyle="_"
+              typeSpeed={100}
+              deleteSpeed={60}
+              delaySpeed={5000} // waits 30s before switching text
+            />
+          </h2>
         </div>
-        <button className="mt-4 sm:mt-8 bg-blue-600 text-white px-4 sm:px-6 py-2 sm:py-3 text-lg rounded-full hover:bg-black">
-          <a href="#registration">
-            Register Now
-          </a>
+
+        {/* Button */}
+        <button className="mt-4 sm:mt-8 bg-blue-600 text-white px-4 sm:px-6 py-2 sm:py-3 text-lg rounded-full hover:bg-black transition">
+          <a href="#registration">Register Now</a>
         </button>
       </div>
     </div>
-   
   );
 };
 

src/components/header.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const Nav = () => {
   return (
-    <nav className="bg-blue-900 p-4 flex justify-center items-center">
+    <nav className="bg-[#0a1625] p-4 flex justify-center items-center">
       <ul className="flex flex-col sm:flex-row gap-2 md:gap-12 justify-center items-center">
         <li><a href="#home" className="text-white text-lg hover:bg-[#00008B] p-1 rounded-lg">Home</a></li>
         <li><a href="#rules" className="text-white text-lg hover:bg-[#00008B] p-1 rounded-lg">Rules</a></li>

src/components/nav.jsx

@@ -64,8 +64,8 @@ const RegistrationForm = () => {
 
 
 
-  <section className="p-4 sm:p-8 bg-blue-200 mt-4 flex flex-col items-center ">
-  <h2 className="text-xl sm:text-2xl font-bold mb-4">Registration Form</h2>
+  <section className="p-4 sm:p-8 bg-[#0a1625] mt-4 flex flex-col items-center ">
+  <h2 className="text-xl text-white sm:text-2xl font-bold mb-4">Registration Form</h2>
 
   {
     isSubmitting ? 

src/components/registrationform.jsx

@@ -3,10 +3,10 @@ import React from "react";
 const Rules = () => {
     return(
         <div className="">
-    <section className="p-8 bg-blue-200">
-        <h2 className="text-2xl font-bold mb-4">Rules & Regulation</h2>
+    <section className="p-8 bg-[#0a1625]">
+        <h2 className="text-2xl text-white font-bold mb-4">Rules & Regulation</h2>
         < p
-        className="text-gray-700">1. All team members should be from the same college; no inter-college teams are allowed. However, members from different branches of the same college/institute are encouraged to form a team including Atleast one girl candidiate.
+        className="text-white">1. All team members should be from the same college; no inter-college teams are allowed. However, members from different branches of the same college/institute are encouraged to form a team including Atleast one girl candidiate.
 <p>2.  Each team must mandatorily comprise 6 members, including...</p>
 
 <p>3. For the Software Edition, after teams are shortlisted, each team will have the option of selecting 2 mentors from industry or academia.</p>

src/components/rules.jsx

@@ -1,15 +1,15 @@
 import React from "react";
 const Task = () => {
     return(
-    <section className="p-9 bg-blue-200 mt-5">
-<h1 className="text-2xl mb-42"> <b>
+    <section className="p-9 bg-[#0a1625] mt-5">
+<h1 className="text-2xl text-white mb-42"> <b>
     PROBLEM STATEMENTS AND PRIZES TO BE WON
     </b>
 
     </h1>
-    <p className="text-gray-700"><br />
+    <p className="text-white"><br />
 
-<p>1. SIH2024 brings you problem statements from leading public and private organizations, union
+<p>1. SIH2025 brings you problem statements from leading public and private organizations, union
 ministries, state governments and NGOs in India.</p>
 <p>2. There would be ONE single winning team for every problem statement posted on the portal. The
 prize money will be given by the collaborating ministry/ industry ONLY IF that organization likes