Skip to content

Develop #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
abhishek-nexgen-dev merged 3 commits into from
Jan 20, 2025
Merged

Develop #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
623c82d
feat: added route for contact page in app.jsx
Mohammed-Anwar-Uddin Jan 20, 2025
e784900
feat: update ContactUs component layout and styling for improved resp…
abhishek-nexgen-dev Jan 20, 2025
202685c
Merge pull request #52 from Code-With-Abhishek-Kumar/anwar/contactUs
abhishek-nexgen-dev Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
Expand All @@ -27,6 +28,10 @@ const App = () => {
path='/about'
element={<About />}
></Route>
<Route
path='/contact'
element={<ContactUs />}
></Route>
<Route
path='/student'
element={<Student />}
Expand Down
47 changes: 47 additions & 0 deletions src/components/ContactUs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React from 'react'

const ContactUs = () => {
return (
<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.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.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.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.5vw] max-[823px]:text-[3vw] mt-[.8rem] mb-[.5rem]'>Social Media Accounts</h2>
<div className='flex'>
insta, facebook
</div>
</div>


<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] 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-[1.2vw] max-[830px]:text-[3vw] rounded-lg'>Submit</button>
</form>
</div>
</div>
)
}

export default ContactUs
2 changes: 1 addition & 1 deletion src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={({
Expand Down