Merge pull request #190 from shivamm-verma/chanakya-niti-shivamm-verma

Fast Load Chanakya image & make Home page and About page appealing in UI
Avdhesh-Varshney · Jul 7, 2024 · 8e2f066 · 8e2f066
2 parents f2c5f3b + de806d2
commit 8e2f066
Show file tree

Hide file tree

Showing 15 changed files with 66 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/Chanakya_artistic_depiction.jpg b/public/Chanakya_artistic_depiction.jpg
diff --git a/src/assets/image.webp → public/image.webp b/src/assets/image.webp → public/image.webp
diff --git a/src/components/shared/Footer.jsx b/src/components/shared/Footer.jsx
@@ -4,7 +4,7 @@ const Footer = () => {
   return (
     <footer className="footer">
       <div className="mx-auto px-4 py-2">
-        <p>&copy; 2024 Chanakya Niti. All rights reserved.</p>
+        <center><p>&copy; 2024 Chanakya Niti. All rights reserved.</p></center>
       </div>
     </footer>
   );

diff --git a/src/css/About.css b/src/css/About.css
@@ -3,14 +3,19 @@
   padding: 20px;
   max-width: 800px;
   margin: 0 auto;
-  background-color: #f9f9f9;
+  background-color: rgba(245, 245, 220, 0.685);
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 .dark .about-container{
-  background-color: black;
-  border: 2px solid white ;
-  color: white ;
+  background-color: rgba(245, 245, 220, 0.086);
+  border: 2px solid rgba(255, 255, 255, 0.269) ;
+  color: white ;  
+}
+.dark .about-container:hover{
+  background-color: rgba(245, 245, 220, 0.046);
+  transition: 0.35s ease-out;
+
 }
 .about-container h1 {
   text-align: center;

diff --git a/src/css/Card.css b/src/css/Card.css
@@ -2,17 +2,17 @@
   width: 300px;
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.128);
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
-  background: rgba(10, 10, 10, 0.55);
+  background: rgba(54, 54, 54, 0.741);
   border: 1px solid rgba(85, 85, 85, 0.18);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
 .glass-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 15px 30px rgba(31, 38, 135, 0.5);
+  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.451);
+  transition: 0.1s;
 }
 
 hr.solid {
@@ -35,7 +35,8 @@ hr.solid {
 }
 
 .glass-card:hover .glass-card-image {
-  transform: scale(1.1);
+  transform: scale(1.05);
+  transition: 0.2s;
 }
 
 .glass-card-title {
@@ -72,7 +73,7 @@ hr.solid {
 }
 
 .glass-card-button:hover {
-  background: none;
+  background-color: rgba(255, 255, 255, 0.747);
+  color: rgba(135, 67, 67, 0.9);
   border: 1px solid rgb(135,67,67);  
-  transform: translateX(10px);
 }
diff --git a/src/css/Contributor.css b/src/css/Contributor.css
@@ -6,18 +6,18 @@
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    box-shadow: 0 8px 32px 0 rgba(52, 91, 57, 0.328)   ;
     transition: all 0.3s ease;
   }
   .dark .card{
     background-color: black;
-    box-shadow: 0px 0px 5px white;
+    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.454);
     color: white ;
 
   }
   .card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 15px 30px rgba(31, 38, 135, 0.5);
+    box-shadow: 0 15px 30px rgba(92, 92, 92, 0.674);
   }
 
   .card-img-top {

diff --git a/src/css/Home.css b/src/css/Home.css
@@ -45,6 +45,8 @@
   align-items: center;
   justify-content: center;
   width: 100%;
+  background-color: rgba(255, 255, 255, 0.035);
+  border-radius: 15px;
   /* flex sm:flex-row flex-col item-center justify-center w-full p-4 */
 }
 .img-container {
@@ -114,8 +116,8 @@
   gap: 20px;
   padding: 20px;
   border-radius: 20px;
-  border: 1px black solid;
-  background-color: #eef1ff;
+  border: 2px rgba(0, 0, 0, 0.302) solid;
+  background-color: rgba(52, 91, 57, 0.328)   ;
 }
 
 .feat-card-2{
@@ -127,17 +129,22 @@
   gap: 20px;
   padding: 20px;
   border-radius: 20px;
-  border: 1px black solid;
-  background-color: #eef1ff;
+  border: 2px rgba(0, 0, 0, 0.302) solid;
+  background-color: rgba(52, 91, 57, 0.328);
 }
 
 .feat-card:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.2);
+  transition: 0.2s;
 }
 
 .feat-card:hover img {
   transform: scale(1.05);
+  transition: 0.5s;
+}
+.feat-card:not(:hover) img {
+  transform: scale(1);
+  transition: 0.5s;
 }
 
 .feat-card:hover .card-line {
@@ -185,7 +192,6 @@
 }
 
 .feat-card:hover, .feat-card-2:hover {
-  transform: translateY(-10px);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 }
 
@@ -277,8 +283,8 @@
     gap: 20px;
     padding: 20px;
     border-radius: 20px;
-    border: 1px black solid;
-    background-color: #eef1ff;
+    /* border: 1px black solid;
+    background-color: #eef1ff; */
   }
 
   .feat-card-2{
@@ -290,8 +296,8 @@
     gap: 20px;
     padding: 20px;
     border-radius: 20px;
-    border: 1px black solid;
-    background-color: #eef1ff;
+    /* border: 1px black solid;
+    background-color: #eef1ff; */
   }
 }
 
@@ -321,19 +327,26 @@
   }
 }
 .dark .feat-3{
-  background-color: black;
+  background-color: transparent;
   color: white;
 }
 .dark .feat-card-2{
-  background-color: black;
-  box-shadow: 0px 0px 10px white;
-  border: solid white 2px;
+  background-color: #353535 ;
+}
+.dark .feat-card-2:hover{
+  box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.152);
+  transition: 0.15s;
 }
 .dark .feat-card{
-  background-color: black ;
-  box-shadow: 0px 0px 10px white;
+  background-color: #353535 ;
+  /* box-shadow: 0px 0px 10px white; */
   color: white;
 }
+.dark .feat-card:hover{
+  box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.200);
+  transition: 0.15s;
+
+}
 .mode{
 display: flex;
 justify-content: center;

diff --git a/src/index.css b/src/index.css
@@ -1,7 +1,11 @@
 *{
 cursor: url('/src/assets/CURSOR1.png'),auto;
 }
+body{
+ background-color: 	rgba(228, 193, 129, 0.272);
+}
 .dark {
-  background-color: black;
+  background-color: #121212;
   color: white;
+  transition: 0.25s;
 }
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
@@ -6,7 +6,8 @@ const About = () => {
     <div className="about-container">
       <h1>Aacharya Chanakya</h1>
       <div className="about-content">
-        <img src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chanakya_artistic_depiction.jpg" alt="Chanakya" className="about-image" />
+        {/* <img src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chanakya_artistic_depiction.jpg" alt="Chanakya" className="about-image" /> */}
+        <img src="Chanakya_artistic_depiction.jpg" alt="Chanakya" className="about-image" />
         <div className="about-text">
           <p>Chanakya, also known as Kautilya or Vishnugupta, was an ancient Indian teacher, philosopher, economist, jurist, and royal advisor. He is traditionally identified as the author of the ancient Indian political treatise, the Arthashastra.</p>
           <p>Born in 350 BCE in India, Chanakya played a crucial role in the establishment of the Maurya Empire. He was the chief advisor to both Emperor Chandragupta and his son, Bindusara.</p>

diff --git a/src/pages/resources/Audio.jsx b/src/pages/resources/Audio.jsx
@@ -5,7 +5,7 @@ const Audio = () => {
   return (
     <div>
       <Card 
-        imgSrc="/src/assets/image.webp" 
+        imgSrc="/image.webp" 
         title="Chanakya Niti" 
         description="Hello World" 
         path="/resources/audio/chanakya" 

diff --git a/src/pages/resources/Book.jsx b/src/pages/resources/Book.jsx
@@ -5,7 +5,7 @@ const Book = () => {
   return (
     <div>
       <Card 
-        imgSrc="/src/assets/image.webp" 
+        imgSrc="/image.webp" 
         title="Chanakya Niti" 
         description="Hello World" 
         path="/resources/book/chanakya" 

diff --git a/src/pages/resources/News.jsx b/src/pages/resources/News.jsx
@@ -5,7 +5,7 @@ const News = () => {
   return (
     <div>
       <Card 
-        imgSrc="/src/assets/image.webp" 
+        imgSrc="/image.webp" 
         title="Chanakya Niti" 
         description="Hello World" 
         path="/resources/news/chanakya" 

diff --git a/src/pages/resources/Quiz.jsx b/src/pages/resources/Quiz.jsx
@@ -4,7 +4,7 @@ import Card from '../../components/shared/Card';
 const Quiz = () => {
   return (
     <Card
-      imgSrc="/src/assets/image.webp"
+      imgSrc="/image.webp"
       title="Chanakya Niti"
       description="Hello World"
       path="/resources/quiz/chanakya"

diff --git a/src/pages/resources/Video.jsx b/src/pages/resources/Video.jsx
@@ -5,7 +5,7 @@ const Video = () => {
   return (
     <div>
       <Card 
-        imgSrc="/src/assets/image.webp" 
+        imgSrc="/image.webp" 
         title="Chanakya Niti" 
         description="Hello World" 
         path="/resources/video/chanakya"