Added the carousel issue #25

package.json

@@ -12,8 +12,10 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.30.2",
     "react-snowfall": "^1.2.1",
     "react-tsparticles": "^2.12.2",
+    "slick-carousel": "^1.8.1",
     "tsparticles-engine": "^2.12.0",
     "tsparticles-preset-snow": "^2.12.0",
     "web-vitals": "^2.1.4"

public/index.html

@@ -9,6 +9,10 @@
       name="description"
       content="Web site created using create-react-app"
     />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
     <!--

src/App.css

@@ -4,9 +4,7 @@
   font-family: 'Roboto Condensed', sans-serif;
 }
 
-.App {
-  text-align: center;
-}
+
 
 .App-logo {
   height: 40vmin;

src/App.js

@@ -8,6 +8,7 @@ import Chapters from './components/Chapters';
 import './App.css';
 import Resources from './components/Resources';
 import AboutUs from './components/AboutUs';
+import Chronicle from './components/Chronicle';
 
 const App = () => {
   return (
@@ -21,6 +22,7 @@ const App = () => {
           <Route path='/api/chapter/:chap' element={<Chapters />} />
           <Route path='/api/resources' element={<Resources/>}/>
           <Route path='/api/aboutus' element={<AboutUs/>}/>
+          <Route path='/chronicle' element={<Chronicle/>}/>
           <Route path='*' element={<h1>404 Not Found</h1>} />
         </Routes>
       </div>

src/components/Chronicle.jsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import './chronicle.css'
+import logounder from "./LogoUnder.png"
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+const Chronicle = () => {
+  const imageList = [
+    { src: "./img/download (5).jpeg", alt: "Image 3" },
+    { src: "./img/9 Times Krishna Showed How He Is The Real Boss In Mahabharata.jpeg", alt: "Image 1"},
+    { src: "./img/An Italian Painter Studied Mahabharat & Made These Breathtaking Paintings In A Span Of 12 Years - ScoopWhoop (1).jpeg", alt: "Image 2" },
+    { src: "./img/An Italian Painter Studied Mahabharat & Made These Breathtaking Paintings In A Span Of 12 Years - ScoopWhoop.jpeg", alt: "Image 3" },
+    { src: "./img/download (1).jpeg", alt: "Image 3" },
+    { src: "./img/download (2).jpeg", alt: "Image 3" },
+    { src: "./img/download (3).jpeg", alt: "Image 3" },
+    { src: "./img/Draupadi's greatest regret after the Mahabharata war.jpeg", alt: "Image 3" },
+    { src: "./img/Indian Mythology, An Inspiration for International Artists.jpeg", alt: "Image 3" },
+    { src: "./img/the-geeta-1-chandresh-patel.jpg", alt: "Image 3" },
+    { src: "./img/Lord Krishna and Arjuna on chariot in Mahabharata.jpeg", alt: "Image 3" },
+    { src: "./img/Lord Krishna showing his Universal form to Arjuna.jpeg", alt: "Image 3" },
+    { src: "./img/Abhimanyu-and-the-Chakravyuha-Padmavyuha-Mahabharta.jpg", alt: "Image 3" },
+    { src: "./img/1_RxrAEthB92moDcYZRpzk5g.jpg", alt: "Image 3" },
+    { src: "./img/83565e03ff74ee06cbc690bd3f144377.jpg", alt: "Image 3" },
+    { src: "./img/DraupadiHumiliatedInKauravaCourt-RajaRaviVarma-VintageIndianMahabharatPainting_f281c45b-5f23-45cf-9070-e331d6f2f937.jpg", alt: "Image 3" },
+    { src: "./img/mahabharata-bhishma-pitamah.jpg", alt: "Image 3" },
+    { src: "./img/dhritrashtra-and-gandhari.webp", alt: "Image 3" },
+    { src: "./img/wp2765079.jpg", alt: "Image 3" },
+
+
+
+    /*{ src: "", alt: "Image 4" },*/
+  ];
+
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 1000,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    initialSlide: 0,
+    autoplay: true,
+    arrows: true,
+    autoplaySpeed: 2000,
+    appendDots: (dots) => (
+      <div>
+        <ul style={{  padding: "0", margin :"0" }}>{dots}</ul>
+      </div>
+    ),
+
+  };
+
+  return (
+    <>
+    <h1 className='yada' style={{textAlign:'center'}}>"Yada Yada hi dharmasya glanir bhavati bharata</h1>
+    <h1 className='yada' style={{textAlign:'center'}}><span> Abhyutthanam adharmasya tadatmanam srjamy aham"</span></h1>
+    <div className="Carousel" style={{margin:"0", padding:"0",backgroundAttachment:'fixed'}}>
+    <img className='under' src={logounder}></img>
+<div style={{maxWidth: "700px", margin: "0 auto",marginTop: "50px",objectFit:"cover",backgroundColor:"#03071e"}}>
+      <Slider {...settings}>
+        {imageList.map((image, index) => (
+          <div key={index} style={{ margin: "0 0px" }}>
+            <div
+              className="box"
+              style={{
+                margin:"50px",
+                padding:0,
+                height:'400px',
+                maxWidth: "700px",
+                background: "#758e4f",
+                overflow: "hidden",
+                color: "",
+                cursor: "pointer",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <img
+                src={image.src}
+                alt={image.alt}
+                style={{
+                  width: "80%",
+                  height: "90%",
+
+                }}
+              />
+            </div>
+          </div>
+        ))}
+      </Slider>
+    </div>
+    </div>
+    </>
+  );
+};
+
+
+export default Chronicle

src/components/Navbar.js

@@ -14,6 +14,7 @@ const Navbar = () => {
                     <Link to={"/"}><li><a  className="text-[1.5rem] text-blue-700 hover:text-yellow-500">Home</a></li></Link>
                     <li><a href="#" className="text-[1.5rem] text-blue-700 hover:text-yellow-500">Resources</a></li>
                     <Link to={"/api/aboutus"}><li><a href="#" className="text-[1.5rem] text-blue-700 hover:text-yellow-500">About Us</a></li></Link>
+                    <Link to={"/chronicle"} className="text-[1.5rem] text-blue-700 hover:text-yellow-500">Chronicles</Link>
                 </ul>
             </div>
         </section>

src/components/chronicle.css

@@ -0,0 +1,21 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: "Montserrat";
+}
+.yada{
+    font-family: "Montserrat";
+    text-transform: uppercase;
+    font-size: 1.5rem;
+    font-weight: 700;
+    z-index: -8;
+    margin-top: 30px;
+    font-style: italic;
+    word-spacing: 3px;
+    color: #003049;
+}
+.under{
+    width: 35%;
+    margin: 0 auto;
+    position: relative;
+}