added profile page

FRONTEND/package.json

@@ -32,6 +32,6 @@
     "globals": "^15.9.0",
     "postcss": "^8.4.41",
     "tailwindcss": "^3.4.10",
-    "vite": "^5.4.1"
+    "vite": "^5.4.2"
   }
 }

FRONTEND/src/App.jsx

@@ -6,6 +6,7 @@ import Sidebar from './Components/Sidebar';
 import Classes from './Pages/Classes';
 import Results from './Pages/Results';
 import Topbar from './Components/Topbar';
+import MyProfile from './Pages/MyProfile';
 
 function App() {
   return (
@@ -21,6 +22,7 @@ function App() {
               <Route path="/curriculum" element={<Curriculum />} />
               <Route path="/classes" element={<Classes />} />
               <Route path="/results" element={<Results />} />
+              <Route path="/profile" element={<MyProfile />} />
             </Routes>
           </div>
         </div>

FRONTEND/src/Components/Header.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import headerBackground from '../assets/WavePhoto.jpg'; // Ensure you have this image in your assets
+import { FaSearch, FaBell, FaPen, FaEnvelope, FaCaretDown } from 'react-icons/fa';
+
+const Header = () => {
+  return (
+    <div
+      className="relative bg-purple-600 p-4 flex items-start text-white rounded-3xl w-full"
+      style={{
+        backgroundImage: `url(${headerBackground})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        height: '200px', // Increased height from 150px to 200px
+      }}
+      //main heading
+    >
+      {/* Overlay to darken the background image for better text visibility */}
+      <div className="absolute inset-0 bg-purple-600 opacity-50 rounded-3xl"></div>
+
+      {/* Content on top of the background */}
+      <div className="relative z-10 flex justify-end items-start w-full rounded-3xl">
+        <div className="flex flex-col items-end space-y-1">
+          <div className="flex items-center space-x-3">
+            <div className="bg-white text-purple-600 p-2 rounded-full">AP</div>
+            <div className="text-lg">Anshuman Patra</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

FRONTEND/src/Components/MainLayout.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import Header from './Header';
+import Header2 from './header2';
+import ProfileCard from './ProfileCard';
+
+const MainLayout = () => {
+  return (
+    <div className="bg-gradient-to-b from-purple-100 via-orange-50 to-transparent min-h-screen p-8">
+       <div className='-z-10'><Header /> </div>
+      <div className='-mt-8 z-10 relative'><Header2/> </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-8">
+        <ProfileCard title="Personal Information">
+          <div className="grid grid-cols-2 gap-4 mb-2">
+            <div className="flex flex-col">
+              <span className="text-sm text-gray-500 font-semibold">Gender:</span>
+              <span className="text-base text-gray-900 font-semibold">Male</span>
+            </div>
+            <div className="flex flex-col">
+              <span className="text-sm text-gray-500 font-semibold">Age:</span>
+              <span className="text-base text-gray-900 font-semibold">15</span>
+            </div>
+            <div className="flex flex-col col-span-2">
+              <span className="text-sm text-gray-500 font-semibold">Blood Group:</span>
+              <span className="text-base text-gray-900 font-semibold">B+ve</span>
+            </div>
+          </div>
+          <div className="mb-2 flex flex-col">
+            <span className="text-sm text-gray-500 font-semibold">Contact Number:</span>
+            <span className="text-base text-gray-900 font-semibold">+91 9868267234</span>
+          </div>
+          <div className="flex flex-col">
+            <span className="text-sm text-gray-500 font-semibold">Address:</span>
+            <span className="text-base text-gray-900 font-semibold">Plot No.81, New Colony, Lane-17, VaniVihar, Bhubaneswar</span>
+          </div>
+        </ProfileCard>
+
+        <ProfileCard title="Parents Information">
+          <div className="flex flex-col mb-2">
+            <span className="text-sm text-gray-500 font-semibold">Father/Mother Name:</span>
+            <span className="text-base text-gray-900 font-semibold">Mr. Ashok Kumar Jackson</span>
+          </div>
+          <div className="flex flex-col mb-2">
+            <span className="text-sm text-gray-500 font-semibold">Contact Number:</span>
+            <span className="text-base text-gray-900 font-semibold">+91 9868267234</span>
+          </div>
+          <div className="flex flex-col">
+            <span className="text-sm text-gray-500 font-semibold">Occupation:</span>
+            <span className="text-base text-gray-900 font-semibold">CEO at Fintech Software Private Limited, BBSR</span>
+          </div>
+        </ProfileCard>
+
+        <ProfileCard title="Academic Information">
+          <div className="flex flex-col mb-2">
+            <span className="text-sm text-gray-500 font-semibold">Previous Term Grades:</span>
+            <span className="text-base text-gray-900 font-semibold">69% | B+ (Good)</span>
+          </div>
+          <div className="flex flex-col mb-2">
+            <span className="text-sm text-gray-500 font-semibold">Best Perform Subject:</span>
+            <span className="text-base text-gray-900 font-semibold">Mathematics</span>
+          </div>
+          <div className="flex flex-col">
+            <span className="text-sm text-gray-500 font-semibold">Weakest Subject:</span>
+            <span className="text-base text-gray-900 font-semibold">Physics</span>
+          </div>
+        </ProfileCard>
+
+        <ProfileCard title="Emergency Contact">
+          <div className="flex flex-col mb-2">
+            <span className="text-sm text-gray-500 font-semibold">Father/Mother/Guardian Name:</span>
+            <span className="text-base text-gray-900 font-semibold">Mr. Ashok Kumar Jackson</span>
+          </div>
+          <div className="flex flex-col mb-2">
+            <span className="text-sm text-gray-500 font-semibold">Contact Number:</span>
+            <span className="text-base text-gray-900 font-semibold">+91 9868267234, +91 9868267234</span>
+          </div>
+          <div className="flex flex-col">
+            <span className="text-sm text-gray-500  font-semibold">Address:</span>
+            <span className="text-base text-gray-900 font-semibold">Plot No.81, New Colony, Lane-17, VaniVihar, Bhubaneswar</span>
+          </div>
+        </ProfileCard>
+      </div>
+    </div>
+  );
+}
+
+export default MainLayout;

FRONTEND/src/Components/ProfileCard.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FaPen } from 'react-icons/fa';
+
+const ProfileCard = ({ title, children }) => {
+  return (
+    <div className="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl">
+      {/* Title with full purple background */}
+      <div className="bg-purple-600 text-white font-semibold px-4 py-2 flex items-center justify-between">
+        <span>{title}</span>
+        <FaPen className="text-xl" />
+      </div>
+      {/* Card content */}
+      <div className="p-4">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default ProfileCard;

FRONTEND/src/Components/header2.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const Header2 = () => {
+  return (
+    <div className="bg-white/80 p-2 flex justify-between items-center rounded-2xl w-11/12 mx-auto">
+      <div className="flex items-center space-x-3">
+        <img 
+          src="https://via.placeholder.com/40" 
+          alt="Profile"
+          className="w-10 h-10 rounded-full"
+        />
+        <div className="flex flex-col">
+          <div className="text-gray-800 font-medium">Anshuman Patra</div>
+          <div className="text-gray-600 text-sm">
+            <span className="block">Student ID: abc@134 | Class: 12(A)</span>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center space-x-2">
+        <img 
+          src="https://via.placeholder.com/40" 
+          alt="Class Teacher"
+          className="w-10 h-10 rounded-full"
+        />
+        <div className="flex flex-col">
+          <div className="text-gray-600 text-sm">Class Teacher</div>
+          <div className="text-gray-800 font-medium">
+            <span className="block">Mrs. Tanya Roy</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Header2;

FRONTEND/src/Pages/MyProfile.jsx

@@ -1,11 +1,13 @@
-import React from 'react'
+import React from 'react';
+import MainLayout from '../Components/MainLayout';
 
-const MyProfile = () => {
+function App() {
   return (
-    <div>
-      <h1>My Profile</h1>
+    <div className="App">
+     {/* ? main MainLayout */}
+      <MainLayout />
     </div>
-  )
+  );
 }
 
-export default MyProfile
+export default App;