Merge pull request #19 from DC104/main

Updated all from home to body

README.md

@@ -6,3 +6,4 @@ Currently, two official plugins are available:
 
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+# Test

package.json

@@ -14,6 +14,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.26.2"
   },
   "devDependencies": {

src/App.jsx

@@ -40,4 +40,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

src/Pages/Announcement.jsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+
+const Announcement = () => {
+  const [currentContent, setCurrentContent] = useState('');
+
+  return (
+    <div className="p-10">
+      {/* Announcements Section */}
+      <div>
+        <h2 className="text-3xl font-semibold mb-5">Latest Announcements</h2>
+        <ul className="list-disc ml-5 space-y-2">
+          <li>Government introduces new tax reform policies.</li>
+          <li>COVID-19 vaccination drive for all citizens.</li>
+          <li>Upcoming examinations scheduled for next month.</li>
+        </ul>
+      </div>
+
+      {/* Links Section */}
+      <div className="p-10">
+        <h2 className="text-3xl font-semibold mb-5 text-center">Central Government Online Assessment Portal</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+          <button
+            onClick={() => setCurrentContent('Previous Year Questions')}
+            className="bg-orange-400 text-white p-5 rounded-lg text-center hover:bg-green-800 hover:text-white"
+          >
+            Previous Year Questions
+          </button>
+          <button
+            onClick={() => setCurrentContent('Additional Links')}
+            className="bg-orange-400 text-white p-5 rounded-lg text-center hover:bg-green-800 hover:text-white"
+          >
+            Additional Links
+          </button>
+          <button
+            onClick={() => setCurrentContent('Help Desk')}
+            className="bg-orange-400 text-white p-5 rounded-lg text-center hover:bg-green-800 hover:text-white"
+          >
+            Help Desk
+          </button>
+          <button
+            onClick={() => setCurrentContent('Recent Notices')}
+            className="bg-orange-400 text-white p-5 rounded-lg text-center hover:bg-green-800 hover:text-white"
+          >
+            Recent Notices
+          </button>
+          <button
+            onClick={() => setCurrentContent('Events')}
+            className="bg-orange-400 text-white p-5 rounded-lg text-center hover:bg-green-800 hover:text-white"
+          >
+            Events
+          </button>
+          <button
+            onClick={() => setCurrentContent('Form Fillup')}
+            className="bg-orange-400 text-white p-5 rounded-lg text-center hover:bg-green-800 hover:text-white"
+          >
+            Form Fillup
+          </button>
+        </div>
+      </div>
+
+      {/* Conditionally display selected content */}
+      <div className="mt-10 p-5 bg-gray-100 rounded-lg">
+        {currentContent ? (
+          <h3>{currentContent}</h3>
+        ) : (
+          <h3>Select a category to display information</h3>
+        )}
+      </div>
+
+      {/* Footer Section */}
+    </div>
+  );
+};
+
+export default Announcement;

src/Pages/Banner.jsx

@@ -1,10 +1,122 @@
-const Banner = () => {
-    return (
-      <div className="bg-blue-600 text-white p-10 text-center">
-        <h1 className="text-4xl font-bold">Welcome to the Central Government Portal</h1>
-        <p className="mt-4 text-lg">Providing services and information to all citizens.</p>
+import { Carousel } from "react-responsive-carousel";
+import 'react-responsive-carousel/lib/styles/carousel.min.css';
+import { useState } from "react";
+import image5 from "../Assets/pic1.png";
+import image6 from "../Assets/img3.png";
+import image7 from "../Assets/img5.png";
+import image8 from "../Assets/pic3.png";
+/*const Banner = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: '60vh',
+        color: 'white'
+      }}
+    >
+      <div
+        style={{
+          flex: 1,
+          background: '#FFA500',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center'
+        }}
+      >
+        <div>
+          <h1 style={{ fontSize: '2.5rem', fontWeight: 'bold' }}>
+            Welcome to the Central Government Portal
+          </h1>
+        </div>
       </div>
-    );
-  };
+      <div
+        style={{
+          flex: 1,
+          background: '#008000',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center'
+        }}
+      >
+        <div>
+          <h1 style={{ fontSize: '2.5rem', fontWeight: 'bold' }}>
+            Providing services and information to all citizens.
+          </h1>
+        </div>
+      </div>
+    </div>*/
+
+    const CentralGovernmentPortal = () => {
+      // Define an array with both headings, subtext, and images corresponding to each slide
+      const slides = [
+        {
+          heading: "Welcome to the Central Government Portal",
+          subtext: "A gateway to all the services and information provided by the government to empower and assist citizens. Build trust and connect with billions of users seamlessly.",
+          image: image5,
+        },
+        {
+          heading: "Government Services at Your Fingertips",
+          subtext: "Access critical services like education, healthcare, and financial assistance with just a few clicks. Your convenience is our priority.",
+          image: image6,
+        },
+        {
+          heading: "Empowering Citizens Nationwide",
+          subtext: "Our aim is to bridge the gap between the government and citizens by offering transparent, accessible, and efficient services.",
+          image: image7,
+        },
+        {
+          heading: "Transparency and Trust",
+          subtext: "Your trust drives us to improve transparency and ensure that information is available whenever and wherever you need it.",
+          image: image8,
+        },
+      ];
+
+      const [activeIndex, setActiveIndex] = useState(0); // State to track the active slide
+
+      const handleSlideChange = (index) => {
+        setActiveIndex(index); // Update active index when slide changes
+      };
+
+      return (
+        <section className="relative mt-12 rounded-lg shadow-md">
+  <div className="absolute top-0 left-0 h-full w-1/3 bg-orange-500"></div>
+  <div className="absolute top-0 left-1/3 h-full w-1/3 bg-white"></div>
+  <div className="absolute top-0 left-2/3 h-full w-1/3 bg-green-600"></div>
+
+  <div className="relative flex flex-col md:flex-row items-center justify-between p-8">
+    <div className="flex-1 mb-6 md:mb-0 md:mr-8 z-10">
+      <h1 className="text-5xl font-bold text-gray-800 leading-tight">
+        {slides[activeIndex].heading}
+      </h1>
+      <p className="mt-6 text-lg text-gray-700 leading-relaxed">
+        {slides[activeIndex].subtext}
+      </p>
+    </div>
 
-  export default Banner;
+    <div className="flex-1 w-full mt-8 md:mt-0 z-10">
+      <Carousel
+        className="w-full space-x-4"
+        autoplay
+        interval={3000}
+        onChange={handleSlideChange}
+        showThumbs={false}
+      >
+        {slides.map((slide, index) => (
+          <div key={index} className="flex-1">
+            <img
+              src={slide.image}
+              alt={`Central Government Portal Slide ${index + 1}`}
+              className="rounded-lg shadow-md w-full object-cover"
+            />
+          </div>
+        ))}
+      </Carousel>
+    </div>
+  </div>
+</section>
+      );
+    };
+
+    export default CentralGovernmentPortal;

src/components/Body.jsx

@@ -1,12 +1,11 @@
-import Announcment from "../Pages/Announcment";
-import Banner from "../Pages/Banner";
+import Banner from "../Pages/Banner"
+import Announcement from "../Pages/Announcement"
 
 const Body = () => {
   return (
-    <div className="p-5 max-w-2xl mx-auto text-center">
-
-      <Banner />
-      <Announcment />
+    <div>    
+       <Banner/>
+      <Announcement/> 
     </div>
   );
 }

src/components/Footer.jsx

@@ -1,20 +1,20 @@
 const Footer = () => {
-  return (
-    <div>
-      <footer className="bg-[#e2e8f0] text-black py-4 pt-5">
-        <div className="container mx-auto flex flex-col md:flex-row items-center justify-between px-4">
-          <div className="flex items-center text-center mb-4 md:mb-0">
-            <span className="ml-4 text-lg font-semibold">
-              &copy; Government of India
-            </span>
+    return (
+      <div>
+        <footer className="bg-[#e2e8f0] text-black py-4 pt-5">
+          <div className="container mx-auto flex flex-col md:flex-row items-center justify-between px-4">
+            <div className="flex items-center text-center mb-4 md:mb-0">
+              <span className="ml-4 text-lg font-semibold">
+                &copy; Government of India
+              </span>
+            </div>
+            <div className="text-center">
+              <p>Toll-Free Contact Number: 1800 000 0000</p>
+            </div>
           </div>
-          <div className="text-center">
-            <p>Toll-Free Contact Number: 1800 000 0000</p>
-          </div>
-        </div>
-      </footer>
-    </div>
-  );
-};
-
-export default Footer;
+        </footer>
+      </div>
+    );
+  };
+
+  export default Footer;