Merge pull request #51 from UjjwalSaini07/UjjwalSaini07/patch-21

Fixing Minor Bugs

src/components/Navbar.js

@@ -1,4 +1,3 @@
-// Todo: Best Change Done in Navbar Ready To Push
 import React, { useState } from 'react';
 import logounder from './LogoUnder.png';
 import { Link, useNavigate } from 'react-router-dom';
@@ -20,7 +19,7 @@ const Navbar = () => {
                             VedicVani
                         </p>
                         <img
-                            className="w-28 h-6 ml-9 mr-9"
+                            className="w-28 h-6 ml-4 mr-3 sm:ml-9 sm:mr-9"
                             src={logounder}
                             alt="logo"
                         />

src/components/Resources.js

@@ -1,4 +1,9 @@
 import React from 'react';
+
+// Importing Required Images
+import Bhagvat_Gita from "./Resource_Image/Bhagvat_Gita.png";
+import Holy_Veda from "./Resource_Image/Holy_Veda.png";
+import Ramayana from "./Resource_Image/Ramayana.png";
 import Puranas from "./Resource_Image/Puranas.jpg";
 import Brahmanas from "./Resource_Image/Brahmanas.jpg";
 import GarudaPuran from "./Resource_Image/GarudaPuran.jpg";
@@ -7,19 +12,18 @@ import ShivaPurana from "./Resource_Image/ShivaPurana.jpg";
 import AgniPurana from "./Resource_Image/The Agni-Purana.jpg";
 import Vedangas from "./Resource_Image/Vedangas.jpg";
 
-
 const books = [
     {
         name: 'The Bhagavad Gita',
-        image: 'https://i.pinimg.com/736x/de/80/21/de80218401a2e168a697ac4f6ddf2507.jpg'
+        image: Bhagvat_Gita
     },
     {
         name: 'The Ramayana',
-        image: 'https://i.pinimg.com/564x/66/dd/c4/66ddc40d895208649668f74df692de0e.jpg'
+        image: Ramayana
     },
     {
         name: 'The Holy Vedas',
-        image: 'https://i.pinimg.com/564x/59/7b/69/597b699950665213b36f0fe4ff3c3ba0.jpg'
+        image: Holy_Veda
     },
     {
         name: 'The Upanishads',
@@ -73,9 +77,20 @@ const Resources = () => {
             {books.map((book, index) => (
                 <div key={index} className="bg-white rounded-xl shadow-lg m-4 w-72 h-[500px] overflow-hidden transform hover:scale-105 transition-transform duration-300 hover:shadow-2xl">
                     <img className="w-full h-72 object-contain object-center " src={book.image} alt={book.name} />
-                    <div className="p-5 text-center">
+                    <div className="p-6 text-center">
                         <h2 className="text-xl font-bold text-gray-800 mb-2">{book.name}</h2>
-                        <p className="text-gray-600">Explore the depth and wisdom of the {book.name}</p>
+                        {(book.name === 'The Bhagavad Gita' || book.name === 'The Upanishads' || book.name === 'The Puranas' || book.name === 'The ShivaPurana') && (
+                            <p className="text-gray-600">Discover the deep insights and timeless wisdom of the {book.name}.</p>
+                        )}
+                        {(book.name === 'The Ramayana' || (book.name === 'The Vishnu Puranas') || (book.name === 'The Brahmanas') || (book.name === 'The AgniPurana')) && (
+                            <p className="text-gray-600">Explore the profound insights and ancient wisdom contained in the {book.name}.</p>
+                        )}
+                        {(book.name === 'The Mahabharata' || (book.name === 'GarudaPuran') || (book.name === 'Vedangas')) && (
+                            <p className="text-gray-600">Immerse yourself in the profound knowledge and timeless teachings of the {book.name}.</p>
+                        )}
+                        {(book.name === 'The Holy Vedas' || (book.name === 'Kalki (Avatar of Vishnu)') || (book.name === 'MatsyaPuran')) && (
+                            <p className="text-gray-600">Delve into the depth and timeless wisdom found within the {book.name}.</p>
+                        )}
                     </div>
                 </div>
             ))}

src/pages/Contact.js

@@ -25,13 +25,18 @@ const Contact = () => {
     maxHeight: '750px', // Default max-height for PC
     margin: '0 auto',
     backgroundColor: '#fff',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%', // Ensure the container takes the full height of its parent
   };
 
   // Adjust styles for mobile
   if (isMobile) {
-    formContainerStyle.padding = '2rem'; // Increase padding on mobile
+    formContainerStyle.padding = '1rem 1rem 7.5rem';
     formContainerStyle.maxWidth = '530px'; // Adjust max-width for mobile
-    formContainerStyle.maxHeight = '540px'; // Adjust max-height for mobile
+    formContainerStyle.maxHeight = '500px'; // Adjust max-height for mobile
+    formContainerStyle.height = '90vh'; // Ensure the container takes the full height of the viewport on mobile
   }
 
   const pContainerStyle = {
@@ -60,15 +65,15 @@ const Contact = () => {
     margin: '0 auto',
     backgroundColor: '#fff',
     marginBottom: '2rem', // Add space between containers
-    marginTop: '-4rem' 
+    marginTop: '-4rem'
   };
 
   return (
     <section style={{ backgroundColor: '#ff7800', minHeight: '100vh', padding: '2rem' }}>
       <div id="detail_fill_container" className="flex justify-center items-center">
         <img id="contact_image" src={krishna} alt='krishna' />
         <div id="Form_container">
-          <div className="relative mb-2.5 flex justify-center items-center">
+          <div className="relative mb-3 flex justify-center items-center">
             <img data-aos="fade-right" style={{ top: isMobile ? '2rem' : '1.5rem', zIndex: 1 }} className="backdrop-opacity-15 absolute w-[25rem] max-w-full transform -translate-x-1/2" src={logounder} alt="logo" />
             <p style={{ fontSize: isMobile ? '4rem' : '5rem', color: 'blue', position: 'relative', zIndex: 1 }} className="font-[Alegreya] text-center">VedicVani</p>
           </div>
@@ -89,22 +94,22 @@ const Contact = () => {
       {/* Form container */}
       <div id="detail_fill_container" className="flex relative justify-center items-center" style={formContainerStyle}>
         {!isMobile ? (
-          <div 
-            className="visme_d" 
-            data-title="VedicVani_ContactForm" 
-            data-url="epqw3qmv-vedicvani-contactform" 
-            data-domain="forms" 
-            data-full-page="false" 
-            data-min-height="450px" 
+          <div
+            className="visme_d"
+            data-title="VedicVani_ContactForm"
+            data-url="epqw3qmv-vedicvani-contactform"
+            data-domain="forms"
+            data-full-page="false"
+            data-min-height="450px"
             data-form-id="76882"
           />
         ) : (
-          <div 
-            className="visme_d" 
-            data-title="VedicVani_ContactForm" 
-            data-url="epqw3qmv-vedicvani-contactform?sidebar=true" 
-            data-domain="forms" 
-            data-full-page="false" 
+          <div
+            className="visme_d"
+            data-title="VedicVani_ContactForm"
+            data-url="epqw3qmv-vedicvani-contactform?sidebar=true"
+            data-domain="forms"
+            data-full-page="false"
             data-min-height="600px" 
             data-form-id="76882"
           />