From 623c82d18a10fe14327e68ee396287ee850c5fc7 Mon Sep 17 00:00:00 2001
From: Mohammed-Anwar-Uddin <mohammedmuzaffar0412@gmail.com>
Date: Mon, 20 Jan 2025 17:08:38 +0530
Subject: [PATCH 1/2] feat: added route for contact page in app.jsx

- added contact page (responsive)
---
 src/App.jsx                  |  5 ++++
 src/components/ContactUs.jsx | 47 ++++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 src/components/ContactUs.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 9174876..44056e1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,6 +10,7 @@ import About from './pages/About';
 import Landing from './pages/Home';
 import Student from './pages/Student';
 import Album_Image from './pages/Album_Image';
+import ContactUs from './components/ContactUs';
 const App = () => {
   return (
     <>
@@ -27,6 +28,10 @@ const App = () => {
               path='/about'
               element={<About />}
             ></Route>
+            <Route
+              path='/contact'
+              element={<ContactUs />}
+            ></Route>
             <Route
               path='/student'
               element={<Student />}
diff --git a/src/components/ContactUs.jsx b/src/components/ContactUs.jsx
new file mode 100644
index 0000000..ae13688
--- /dev/null
+++ b/src/components/ContactUs.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+
+const ContactUs = () => {
+  return (
+    <div className='w-full flex h-fit bg-[#D7D7D726] py-[10%] max-[550px]:pt-[20%] px-[6vw] justify-between max-[800px]:flex-col '>
+        <div className='w-[40%] max-[800px]:w-full p-2 '>
+            <h1 className='text-[3rem] font-semibold'>About Us</h1>
+            <p>Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth. Our mission is to shape tomorrow’s leaders by offering exceptional educational opportunities and encouraging intellectual exploration.  
+            </p>
+
+
+            <h2 className='font-semibold text-[1.2rem] mt-[.8rem] mb-[.5rem]'>Location</h2>
+            <p>Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth. O</p>
+
+            <h2 className='font-semibold text-[1.2rem] mt-[.8rem] mb-[.5rem]'>Our Principle</h2>
+            <p>Muhammad Muneeb and vice Principle Sammer Khan</p>
+
+            <h2 className='font-semibold text-[1.2rem] mt-[.8rem] mb-[.5rem]'>Phone Number</h2>
+            <p>+92 315 4488695</p>
+
+
+            <h2 className='font-semibold text-[1.2rem] mt-[.8rem] mb-[.5rem]'>Social Media Accounts</h2>
+            <div className='flex'>
+                insta, facebook
+            </div>
+        </div>
+
+
+        <div className='bg-white rounded-xl w-[40%] max-[800px]:w-full h-fit p-10'>
+            <h1 className='text-[1.2rem] font-semibold'>Feel free to ask any query</h1>
+            <p className='text-sm w-[89%] mt-1 mb-[1vw]'> Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth. </p>
+            <form >
+                <input type="text" className='border-b p-1 w-full border-black outline-none' placeholder='Name:' />
+                <input type="email" className='border-b p-1 w-full border-black my-10 outline-none' placeholder='Email:' />
+                <input type="text" className='border-b p-1 w-full border-black outline-none' placeholder='Phone Number:' />
+
+
+                <textarea className='p-4 bg-[#F9F9F9] outline-none w-full h-[7rem] rounded-lg my-[2vw] border border-[#D7D7D7]'  placeholder='Message:' name="" id=""></textarea>
+
+                <button className='text-center bg-[#333333] w-full text-white py-3 text-xl rounded-lg'>Submit</button>
+            </form>
+        </div>
+    </div>
+  )
+}
+
+export default ContactUs
\ No newline at end of file

From e78490024d48f2421f563cd85afd8d47bf41045d Mon Sep 17 00:00:00 2001
From: Abhishek Gupta <abhishek9661342993@gmail.com>
Date: Tue, 21 Jan 2025 00:12:03 +0530
Subject: [PATCH 2/2] feat: update ContactUs component layout and styling for
 improved responsiveness

---
 src/components/ContactUs.jsx | 40 ++++++++++++++++++------------------
 src/components/Navbar.jsx    |  2 +-
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/ContactUs.jsx b/src/components/ContactUs.jsx
index ae13688..9cad4bc 100644
--- a/src/components/ContactUs.jsx
+++ b/src/components/ContactUs.jsx
@@ -2,42 +2,42 @@ import React from 'react'
 
 const ContactUs = () => {
   return (
-    <div className='w-full flex h-fit bg-[#D7D7D726] py-[10%] max-[550px]:pt-[20%] px-[6vw] justify-between max-[800px]:flex-col '>
-        <div className='w-[40%] max-[800px]:w-full p-2 '>
-            <h1 className='text-[3rem] font-semibold'>About Us</h1>
-            <p>Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth. Our mission is to shape tomorrow’s leaders by offering exceptional educational opportunities and encouraging intellectual exploration.  
+    <div className='Form_Container flex  bg-[#d7d7d719] my-[2vh] max-[550px]:pt-[20%] px-[3vw] justify-between max-[823px]:flex-col items-center pt-[12vh] pb-[7vh]'>
+        <div className='Container_Left w-[38%] max-[823px]:w-[93vw] p-2 text-[#333333] '>
+            <h1 className='text-[2.6vw]  max-[823px]:text-[4vw] font-semibold'>About Us</h1>
+            <p className='text-[0.9vw] max-[823px]:text-[2vw] font-medium'>Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth. Our mission is to shape tomorrow’s leaders by offering exceptional educational opportunities and encouraging intellectual exploration.  
             </p>
 
 
-            <h2 className='font-semibold text-[1.2rem] mt-[.8rem] mb-[.5rem]'>Location</h2>
-            <p>Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth. O</p>
+            <h2 className='font-semibold text-[1.5vw] max-[823px]:text-[3vw]  mt-[.8rem] mb-[.5rem]'>Location</h2>
+            <p className='text-[0.9vw] max-[823px]:text-[2vw] font-medium'>Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth. O</p>
 
-            <h2 className='font-semibold text-[1.2rem] mt-[.8rem] mb-[.5rem]'>Our Principle</h2>
-            <p>Muhammad Muneeb and vice Principle Sammer Khan</p>
+            <h2 className='font-semibold text-[1.5vw] max-[823px]:text-[3vw]  mt-[.8rem] mb-[.5rem]'>Our Principle</h2>
+            <p className='text-[0.9vw] max-[823px]:text-[2vw] font-medium'>Muhammad Muneeb and vice Principle Sammer Khan</p>
 
-            <h2 className='font-semibold text-[1.2rem] mt-[.8rem] mb-[.5rem]'>Phone Number</h2>
-            <p>+92 315 4488695</p>
+            <h2 className='font-semibold text-[1.5vw] max-[823px]:text-[3vw] mt-[.8rem] mb-[.5rem]'>Phone Number</h2>
+            <p className='text-[0.9vw]  max-[823px]:text-[2vw] font-medium'>+92 315 4488695</p>
 
 
-            <h2 className='font-semibold text-[1.2rem] mt-[.8rem] mb-[.5rem]'>Social Media Accounts</h2>
+            <h2 className='font-semibold text-[1.5vw] max-[823px]:text-[3vw] mt-[.8rem] mb-[.5rem]'>Social Media Accounts</h2>
             <div className='flex'>
                 insta, facebook
             </div>
         </div>
 
 
-        <div className='bg-white rounded-xl w-[40%] max-[800px]:w-full h-fit p-10'>
-            <h1 className='text-[1.2rem] font-semibold'>Feel free to ask any query</h1>
-            <p className='text-sm w-[89%] mt-1 mb-[1vw]'> Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth. </p>
-            <form >
-                <input type="text" className='border-b p-1 w-full border-black outline-none' placeholder='Name:' />
-                <input type="email" className='border-b p-1 w-full border-black my-10 outline-none' placeholder='Email:' />
-                <input type="text" className='border-b p-1 w-full border-black outline-none' placeholder='Phone Number:' />
+        <div className='Container_Right bg-white rounded-3xl w-[40vw] max-[1179px]:w-[48vw] max-[822px]:w-[95vw]  h-fit p-[2vw] max-[823px]:p-[3.5vw] text-[#333333] border-[1.1px] border-[#D7D7D7] shadow-lg shadow-gray-300 mt-[7vh]'>
+            <h1 className='text-[1.3vw] max-[823px]:text-[3.5vw] font-semibold'>Feel free to ask any query</h1>
+            <p className='text-[0.9vw] max-[823px]:text-[2vw]  mt-1 mb-[1vw] font-medium w-[85%]'> Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth. </p>
+            <form className='form flex flex-col gap-[1vh]'>
+                <input type="text" className='peer w-full py-1 text-[1vw] max-[830px]:text-[2.5vw] mt-[2vh] border-b focus:outline-none transition ease-linear focus:border-[#333333] border-gray-300 shadow-sm' placeholder='Name:' />
+                <input type="email" className='border-b p-1 w-full border-[#A0A0A0] my-10 focus:outline-none text-[1vw] max-[830px]:text-[2.5vw]' placeholder='Email:' />
+                <input type="text" className='border-b p-1 text-[1vw] max-[830px]:text-[2.5vw] w-full border-[#A0A0A0] focus:outline-none' placeholder='Phone Number:' />
 
 
-                <textarea className='p-4 bg-[#F9F9F9] outline-none w-full h-[7rem] rounded-lg my-[2vw] border border-[#D7D7D7]'  placeholder='Message:' name="" id=""></textarea>
+                <textarea className='p-4 bg-[#F9F9F9] text-[1vw] max-[830px]:text-[2.5vw] outline-none w-full h-[15vh] rounded-lg my-[2vw] border border-[#D7D7D7]'  placeholder='Message:' name="" id=""></textarea>
 
-                <button className='text-center bg-[#333333] w-full text-white py-3 text-xl rounded-lg'>Submit</button>
+                <button className='text-center bg-[#333333] w-full text-white py-3 text-[1.2vw] max-[830px]:text-[3vw] rounded-lg'>Submit</button>
             </form>
         </div>
     </div>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 8cd08fb..f2155af 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -58,7 +58,7 @@ const Navbar = () => {
         ref={menu}
         className='mobile-menu w-full  h-screen bg-[#333] text-[6vw] font-semibold text-white hidden max-[599px]:block -translate-y-[100%] fixed top-0 left-0 z-[99]'
       >
-        <nav className='w-full h-full flex items-center justify-center gap-6 flex-col'>
+        <nav className='w-full h-full flex items-center justify-center  gap-6 flex-col'>
           <NavLink
             to='/'
             className={({