UI Changes

Akshatchaube01 · Jul 4, 2024 · c913dee · c913dee
1 parent 104cd71
commit c913dee
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 43 deletions.
diff --git a/src/components/AboutUs.css b/src/components/AboutUs.css
@@ -194,7 +194,9 @@ img {
   .flex {
     flex-direction: column !important;
   }
-
+  .socials {
+    flex-direction: row !important;
+  }
   .image-container-one {
     order: -1;
   }

diff --git a/src/components/ContactUs.jsx b/src/components/ContactUs.jsx
@@ -5,7 +5,7 @@ import { SectionWrapper } from "./hoc";
 import { slideIn } from "../utils/motions";
 import FireFliesBackground from "./FireFlies";
 import { ToastContainer, toast } from "react-toastify";
-import 'react-toastify/dist/ReactToastify.css';
+import "react-toastify/dist/ReactToastify.css";
 
 const Contact = () => {
   const [name, setName] = useState("");
@@ -22,9 +22,8 @@ const Contact = () => {
     const formData = new FormData(event.target);
     formData.append("access_key", "b31a0b0f-6a98-4f98-a62b-c6c6b05ae9ee");
 
-
     const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
-    const validEmailDomains = ["com", "net", "org", "in"]; 
+    const validEmailDomains = ["com", "net", "org", "in"];
     const enteredDomain = email.split(".")[1];
 
     if (!emailPattern.test(email)) {
@@ -156,7 +155,8 @@ const Contact = () => {
                 onChange={(e) => setEmail(e.target.value)}
                 placeholder="What's your web address?"
                 className={`bg-tertiary py-4 px-6 placeholder:text-secondary text-white rounded-lg outline-none border-none font-medium bg-[#1e1e1e] ${
-                  emailError ? "border-red-500" : "" }`}
+                  emailError ? "border-red-500" : ""
+                }`}
                 required
               />
               {emailError && (
@@ -209,8 +209,8 @@ const Contact = () => {
       </div>
       <div className="static-info">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div className="md:col-span-1">
-            <div className="bg-gray-200 h-64 md:h-full">
+          <div className="md:col-span-1 mb-52">
+            <div className="bg-gray-200 h-64 mb-4">
               <iframe
                 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9353078.84733098!2d-106.48813274672541!3d39.49054996305706!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited%20States!5e0!3m2!1sen!2sin!4v1717736058924!5m2!1sen!2sin"
                 width="100%"
@@ -225,7 +225,9 @@ const Contact = () => {
           <div className="md:col-span-1">
             <div className="bg-gray-300 h-64 md:h-full">
               <div className="bg-gray-300 p-6 ">
-                <h2 className="text-black text-2xl font-bold mb-4">Contact Us</h2>
+                <h2 className="text-black text-2xl font-bold mb-4">
+                  Contact Us
+                </h2>
                 <div className="rounded-md border p-4">
                   <div className="flex items-center mb-2">
                     <i className="fas fa-envelope mr-2 text-black"></i>
@@ -242,21 +244,28 @@ const Contact = () => {
                 </div>
                 <div className="mt-4">
                   <p className="text-black">
-                    Feel free to reach out to us for any inquiries or assistance.
+                    Feel free to reach out to us for any inquiries or
+                    assistance.
                   </p>
                 </div>
                 <div className="mt-4">
-                  <h3 className="text-lg font-bold mb-2 text-black">Opening Hours</h3>
+                  <h3 className="text-lg font-bold mb-2 text-black">
+                    Opening Hours
+                  </h3>
                   <ul>
-                    <li className="text-black">Monday - Friday: 9:00 AM - 6:00 PM</li>
+                    <li className="text-black">
+                      Monday - Friday: 9:00 AM - 6:00 PM
+                    </li>
                     <li className="text-black">Saturday: 10:00 AM - 4:00 PM</li>
                     <li className="text-black">Sunday: Closed</li>
                   </ul>
                 </div>
                 <div className="mt-4">
-                  <h3 className="text-lg font-bold mb-2 text-black">Follow Us</h3>
-                  <div className="flex space-x-4 xs:hidden">
-                    <a href="#" className="text-blue-500 hover:text-blue-700 sm:ml-4">
+                  <h3 className="text-lg font-bold mb-2 text-black">
+                    Follow Us
+                  </h3>
+                  <div className="flex space-x-4 socials ">
+                    <a href="#" className="text-blue-500 hover:text-blue-700 ">
                       <i className="fab fa-facebook"></i>
                     </a>
                     <a href="#" className="text-blue-500 hover:text-blue-700">

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -7,7 +7,6 @@ import ParticleRing from "./ParticleRing.jsx";
 import TypewriterEffect from "./Typewriter.jsx";
 import Preloader from "./Preloader.jsx";
 
-
 const Home = () => {
   useEffect(() => {
     initParticlesEngine(async (engine) => {
@@ -72,36 +71,39 @@ const Home = () => {
     color: "#fff", // White font color on hover
   };
 
-    // State to manage button hover
-    const [isButtonHovered, setIsButtonHovered] = useState(false);
+  // State to manage button hover
+  const [isButtonHovered, setIsButtonHovered] = useState(false);
   return (
     <div>
-    <div className="container">
-      {/* keep particles at top */}
-      {/* <Particles id="tsparticles" options={useMemo(() => lines)} /> */}
-      <ParticleRing className="z-20"/>
-      <div style={newTextStyles} className="main-text">
-        <p style={{ ...newTextStyles, margin: 0 }}>TimeWarp</p>
+      <div className="container">
+        {/* keep particles at top */}
+        {/* <Particles id="tsparticles" options={useMemo(() => lines)} /> */}
+        <ParticleRing className="z-20" />
+        <div style={newTextStyles} className="main-text">
+          <p style={{ ...newTextStyles, margin: 0 }}>TimeWarp</p>
+        </div>
+        <p style={paragraphStyles} className="text-xl w-screen">
+          {/* Understanding history, embracing the present, and envisioning the future */}
+          <TypewriterEffect
+            text="Understanding history, embracing the present, and envisioning the future"
+            speed={40}
+          />
+        </p>
+        <a href="/AboutUs" style={{ textDecoration: "none" }}>
+          <button
+            style={{
+              ...buttonStyles,
+              ...(isButtonHovered ? buttonHoverStyles : {}),
+            }}
+            onMouseEnter={() => setIsButtonHovered(true)}
+            onMouseLeave={() => setIsButtonHovered(false)}
+            className="mx-0"
+          >
+            Know more
+          </button>
+        </a>
       </div>
-      <p style={paragraphStyles} className="text-xl w-screen">
-        {/* Understanding history, embracing the present, and envisioning the future */}
-        <TypewriterEffect text="Understanding history, embracing the present, and envisioning the future" speed={40} />
-      </p>
-      <a href="/AboutUs" style={{ textDecoration: "none" }}>
-        <button
-          style={{
-            ...buttonStyles,
-            ...(isButtonHovered ? buttonHoverStyles : {}),
-          }}
-          onMouseEnter={() => setIsButtonHovered(true)}
-          onMouseLeave={() => setIsButtonHovered(false)}
-        >
-          Know more
-        </button>
-      </a>
-
-    </div>
-    <Preloader />
+      <Preloader />
     </div>
   );
 };

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -37,7 +37,7 @@ const Navbar = () => {
         {`@import url('https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css');`}
       </style>
       <button
-        className="block md:hidden p-2 mx-0 my-0"
+        className="block md:hidden p-2 mx-0 my-0 w-full"
         onClick={() => setMenuOpen(!isMenuOpen)}
         aria-label="Toggle navigation menu"
       >