Merge pull request #67 from Krishna100604/main

changed the design of about and contact page
Premkolte · Jun 25, 2024 · 4ee8e63 · 4ee8e63
2 parents aea3e8b + 6875d0f
commit 4ee8e63
Show file tree

Hide file tree

Showing 17 changed files with 235 additions and 117 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,11 @@
   "dependencies": {
     "@babel/standalone": "^7.24.7",
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "framer-motion": "^11.2.12",
     "kbar": "^0.1.0-beta.45",
     "react": "^18.2.0",

diff --git a/src/components/About/AboutUs.jsx b/src/components/About/AboutUs.jsx
@@ -1,48 +1,53 @@
 import React from 'react';
 import { motion } from 'framer-motion';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTwitter, faFacebook, faLinkedin } from '@fortawesome/free-brands-svg-icons';
 
 const About = () => {
   return (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.5 }}
-      className="container mx-auto mt-20 px-4 md:px-8"
+      className="relative flex items-center justify-center min-h-screen"
     >
-      <div className="bg-white rounded-lg shadow-lg p-8">
-        <h1 className="text-3xl font-bold mb-4">About Us</h1>
-        <p className="text-lg text-gray-700 mb-4">
-          AnimateHub is your ultimate resource for learning and exploring animation techniques in
-          web development. Whether you're a beginner or an expert, our curated collection of
-          snippets and tutorials will help you bring your web projects to life.
-        </p>
-        <p className="text-lg text-gray-700 mb-4">
-          Our mission is to inspire creativity and innovation through animation. Join our community
-          and start creating stunning animations today!
-        </p>
-        <p className="text-lg text-gray-700 mb-4">
-          Connect with us on social media:
-          <ul className="list-disc pl-8">
+      {/* Background Overlay */}
+      <div
+        className="absolute inset-0 bg-white-900 opacity-50"
+        style={{ zIndex: -1 }}
+      ></div>
+
+      {/* Content */}
+      <div className="relative z-10 container mx-auto px-4 md:px-8 text-white">
+        <div className="bg-indigo-600 bg-opacity-90 rounded-lg shadow-lg p-8 md:p-12 lg:w-2/3 xl:w-1/2 mx-auto mt-7">
+          <h1 className="text-3xl font-bold mb-3 ">About Us</h1>
+          <p className="text-lg mb-4">
+            AnimateHub is your ultimate resource for learning and exploring animation techniques in web development. Whether you're a beginner or an expert, our curated collection of snippets and tutorials will help you bring your web projects to life.
+          </p>
+          <p className="text-lg mb-4">
+            Our mission is to inspire creativity and innovation through animation. Join our community and start creating stunning animations today!
+          </p>
+          <p className="text-lg mb-4">
+            Connect with us on social media:
+          </p>
+          <ul className="list-none flex space-x-6">
             <li>
-              <a href="https://twitter.com/animatehub" className="text-blue-500 hover:underline">
-                Twitter
+              <a href="https://twitter.com/animatehub" className="text-indigo-250 hover:underline">
+                <FontAwesomeIcon icon={faTwitter} size="2x" />
               </a>
             </li>
             <li>
-              <a href="https://facebook.com/animatehub" className="text-blue-500 hover:underline">
-                Facebook
+              <a href="https://facebook.com/animatehub" className="text-indigo-250 hover:underline">
+                <FontAwesomeIcon icon={faFacebook} size="2x" />
               </a>
             </li>
             <li>
-              <a
-                href="https://linkedin.com/company/animatehub"
-                className="text-blue-500 hover:underline"
-              >
-                LinkedIn
+              <a href="https://linkedin.com/company/animatehub" className="text-indigo-250 hover:underline">
+                <FontAwesomeIcon icon={faLinkedin} size="2x" />
               </a>
             </li>
           </ul>
-        </p>
+        </div>
       </div>
     </motion.div>
   );

diff --git a/src/components/Contact/ContactUs.jsx b/src/components/Contact/ContactUs.jsx
@@ -1,46 +1,82 @@
 import React from 'react';
 import { motion } from 'framer-motion';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEnvelope, faUser } from '@fortawesome/free-regular-svg-icons';
+import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 
 const Contact = () => {
   return (
     <motion.div
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.5 }}
-      className="container mx-auto mt-20 px-4 md:px-8"
+      className="relative"
     >
-      <div className="bg-white rounded-lg shadow-lg p-8">
-        <h1 className="text-3xl font-bold mb-4">Contact Us</h1>
-        <p className="text-lg text-gray-700 mb-4">
-          Got any questions, suggestions, or feedback? We'd love to hear from you!
-        </p>
-        <p className="text-lg text-gray-700 mb-4">
-          Reach out to us via email at <strong>contact@animatehub.com</strong> or fill out the form
-          below:
-        </p>
-        <form className="flex flex-col space-y-4">
-          <input
-            type="text"
-            placeholder="Your Name"
-            className="border border-gray-300 rounded-md p-2"
-          />
-          <input
-            type="email"
-            placeholder="Your Email"
-            className="border border-gray-300 rounded-md p-2"
-          />
-          <textarea
-            placeholder="Your Message"
-            rows="4"
-            className="border border-gray-300 rounded-md p-2"
-          ></textarea>
-          <button
-            type="submit"
-            className="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors duration-300"
-          >
-            Send Message
-          </button>
-        </form>
+      {/* Background Overlay */}
+      <div
+        className="absolute inset-0 bg-white-900 opacity-50"
+        style={{ zIndex: -1 }}
+      ></div>
+
+      {/* Content */}
+      <div className="relative z-10 container mx-auto mt-20 px-19 md:px-10 text-white">
+        <div className="bg-violet-600 bg-opacity-90 rounded-lg shadow-lg p-8">
+          <h1 className="text-3xl font-bold mb-4">Contact Us</h1>
+          <p className="text-lg mb-4">
+            Got any questions, suggestions, or feedback? We'd love to hear from you!
+          </p>
+          <p className="text-lg mb-4">
+            Reach out to us via email at <strong>contact@animatehub.com</strong> or fill out the form
+            below:
+          </p>
+          <form className="flex flex-col space-y-4">
+            <div className="flex space-x-4">
+              <div className="flex-1">
+                <label className="sr-only" htmlFor="name">Your Name</label>
+                <div className="relative">
+                  <span className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <FontAwesomeIcon icon={faUser} className="text-gray-500" />
+                  </span>
+                  <input
+                    type="text"
+                    id="name"
+                    placeholder="Your Name"
+                    className="form-control border border-gray-300 rounded-md py-2 pl-10 pr-4 bg-gray-100 text-gray-800"
+                  />
+                </div>
+              </div>
+              <div className="flex-1">
+                <label className="sr-only" htmlFor="email">Your Email</label>
+                <div className="relative">
+                  <span className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <FontAwesomeIcon icon={faEnvelope} className="text-gray-500" />
+                  </span>
+                  <input
+                    type="email"
+                    id="email"
+                    placeholder="Your Email"
+                    className="form-control border border-gray-300 rounded-md py-2 pl-10 pr-4 bg-gray-100 text-gray-800"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="flex-1">
+              <label className="sr-only" htmlFor="message">Your Message</label>
+              <textarea
+                id="message"
+                placeholder="Your Message"
+                rows="4"
+                className="form-control border border-gray-300 rounded-md py-2 px-4 bg-gray-100 text-gray-800"
+              ></textarea>
+            </div>
+            <button
+              type="submit"
+              className="btn btn-primary py-2 px-4 rounded-md bg-blue-500 text-white hover:bg-blue-600 transition-colors duration-300"
+            >
+              <FontAwesomeIcon icon={faPaperPlane} className="me-2" /> Send Message
+            </button>
+          </form>
+        </div>
       </div>
     </motion.div>
   );

diff --git a/src/components/Home/Navbar.jsx b/src/components/Home/Navbar.jsx
@@ -11,47 +11,45 @@ const Navbar = () => {
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5 }}
     >
-      <div className="container mx-auto px-4 md:px-8">
-        <div className="flex justify-between items-center">
+      <div className="container mx-auto px-4 md:px-8 flex justify-between items-center">
+        <motion.div
+          className="text-lg md:text-xl lg:text-2xl font-bold text-center md:text-left" // Responsive font size and text alignment
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          AnimateHub
+        </motion.div>
+        <div className="flex space-x-4 md:space-x-6 items-center"> {/* Added items-center for vertical alignment */}
           <motion.div
-            className="text-lg md:text-xl lg:text-2xl font-bold" // Responsive font size
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.5, delay: 0.2 }}
+            className="hover:text-gray-300"
+            whileHover={{ scale: 1.1 }}
+            whileTap={{ scale: 0.9 }}
           >
-            AnimateHub
+            <Link to="/">Home</Link>
           </motion.div>
-          <div className="flex space-x-4 md:space-x-6 items-center"> {/* Added items-center for vertical alignment */}
-            <motion.div
-              className="hover:text-gray-300"
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-            >
-              <Link to="/">Home</Link>
-            </motion.div>
-            <motion.div
-              className="hover:text-gray-300"
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-            >
-              <Link to="/explore">Explore</Link>
-            </motion.div>
-            <motion.div
-              className="hover:text-gray-300"
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-            >
-              <Link to="/about">About</Link>
-            </motion.div>
-            <motion.div
-              className="hover:text-gray-300"
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-            >
-              <Link to="/contact">Contact</Link>
-            </motion.div>
-            <DarkModeToggle />
-          </div>
+          <motion.div
+            className="hover:text-gray-300"
+            whileHover={{ scale: 1.1 }}
+            whileTap={{ scale: 0.9 }}
+          >
+            <Link to="/explore">Explore</Link>
+          </motion.div>
+          <motion.div
+            className="hover:text-gray-300"
+            whileHover={{ scale: 1.1 }}
+            whileTap={{ scale: 0.9 }}
+          >
+            <Link to="/about">About</Link>
+          </motion.div>
+          <motion.div
+            className="hover:text-gray-300"
+            whileHover={{ scale: 1.1 }}
+            whileTap={{ scale: 0.9 }}
+          >
+            <Link to="/contact">Contact</Link>
+          </motion.div>
+          <DarkModeToggle />
         </div>
       </div>
     </motion.nav>