profile page done

src/Router.tsx

@@ -7,6 +7,8 @@ import GovtSchemes from './pages/GovtSchemes';
 import HostingPage from './pages/HostingPage';
 import Academi from './pages/Academies';
 import EventPage from './pages/EventPage';
+import { PpProfileBox } from './components/PpProfileBox/PpProfileBox';
+import ProfilePage from './pages/ProfilePage';
 
 const router = createBrowserRouter([
   {
@@ -30,6 +32,10 @@ const router = createBrowserRouter([
   {
     path: '/EventPage',
     element: <EventPage/>
+  },
+  {
+    path: '/ProfilePage',
+    element: <ProfilePage/>
   }
 ]);
 

src/components/HpForm/HpDetailPageLinks.tsx

@@ -50,8 +50,8 @@ function HpDetailsPageLinks({page,setPage}:NavProps) {
 
       </Grid>
       <Group  mt={50}>
-        <Button onClick={()=>setPage('DetailsPage')}>Prev</Button>
-        <Button onClick={()=>setPage('PrizesPage')}>Next</Button>
+        <Button onClick={()=>setPage('DetailsPage')} color="#058A4A">Prev</Button>
+        <Button onClick={()=>setPage('PrizesPage')} color="#058A4A">Next</Button>
         </Group> 
     </Container>
   );

src/components/HpForm/HpDetailsPage.module.css

@@ -1,23 +1,28 @@
 .formContainer {
-    background-color: #fff;
-    padding: 2rem;
-
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    width: 500px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  padding: 2rem;
+  margin-top: 2%;
+  border-radius: 8px;
+  width: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid #058a4a;
+  border-radius: 10px; /* Adjust for rounded corners */
+  padding: 20px;
+  /* background-color: #fce8ce80; */
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s ease-in-out;
+  background: #06A35733;
+
+}
+
+@media (max-width: 768px) {
+  .formContainer {
+    padding: 1rem;
+    width: auto;
   }
-
-  @media (max-width: 768px) {
-    .formContainer {
-      padding: 1rem;
-      width: auto;
-    }
-  }
-  .submittedText {
-    text-align: center; /* or left, right as needed */
-  }
-
+}
+.submittedText {
+  text-align: center; /* or left, right as needed */
+}

src/components/HpForm/HpDetailsPage.tsx

@@ -29,8 +29,8 @@ function HpDetailsPage({page,setPage}:NavProps) {
         </Grid.Col>
        </Grid>
        <Group mt={50}  >
-        <Button onClick={()=>setPage('')}>Prev</Button>
-        <Button onClick={()=>setPage('LinksPage')}>Next</Button>
+        <Button onClick={()=>setPage('')} color="#058A4A">Prev</Button>
+        <Button onClick={()=>setPage('LinksPage')} color="#058A4A">Next</Button>
         </Group>  
     </Container>
   );

src/components/HpForm/HpDetailsubmit.tsx

@@ -77,20 +77,27 @@ export function HpDetailsubmit({page,setPage}:NavProps) {
         </Button>
 
         {submitted && (
-          <Text size="sm" color="green" mt="xs" className={classes.submittedText}>
+          <Text size="sm"  mt="xs" className={classes.submittedText}>
             Submitted
           </Text>
         )}
       </div>
 
       <Group mt={50}>
-      <Button onClick={()=>setPage('SchedulePage')}>
+      <Button onClick={()=>setPage('SchedulePage')}    styles={(theme) => ({
+            root: {
+              backgroundColor: '#058A4A',
+              '&:hover': {
+                backgroundColor: '#046C3A',
+              },
+            },
+          })}>
         Prev
       </Button>
-      <Button>
-       <a href="/" style={{textDecoration:'none',color:'white'}}>Back to Home</a>
+      <Button color="#058A4A">
+       <a href="/" style={{textDecoration:'none',color:'white' ,backgroundColor:'#058A4A'}} >Back to Home</a>
       </Button>
-      <Button >
+      <Button color="#058A4A">
        Your Profile
       </Button>
       </Group>

src/components/HpForm/HpFormPrizePage.tsx

@@ -27,8 +27,8 @@ function HpFormPrizePage({page,setPage}:NavProps){
         </Grid.Col>
       </Grid>
       <Group mt={50} >
-        <Button onClick={()=>setPage('LinksPage')}>Prev</Button>
-        <Button onClick={()=>setPage('SchedulePage')}>Next</Button>
+        <Button onClick={()=>setPage('LinksPage')} color="#058A4A">Prev</Button>
+        <Button onClick={()=>setPage('SchedulePage')} color="#058A4A" >Next</Button>
         </Group> 
     </Container>
   );

src/components/HpForm/HpSchedulePage.tsx

@@ -93,14 +93,8 @@ function HpSchdulePage({page,setPage}:NavProps) {
             </Grid.Col>
 
             <Grid.Col span={6}>
-              <Button
-                className={styles.deleteButton}
-                color="#E54335"
-                // fullWidth
-                onClick={() => handleDeleteSchedule(index)}
-              >
-                Delete Schedule
-              </Button>
+        <Button variant='outline' color='red' onClick={() => handleDeleteSchedule(index)}>Delete Prize</Button>
+
             </Grid.Col>
 
           </Grid>
@@ -117,8 +111,8 @@ function HpSchdulePage({page,setPage}:NavProps) {
         Add Schedule
       </Button>
       <Group mt={50} >
-        <Button onClick={()=>setPage('PrizesPage')}>Prev</Button>
-        <Button onClick={()=>setPage('SubmitPage')}>Next</Button>
+        <Button onClick={()=>setPage('PrizesPage')} color="#058A4A">Prev</Button>
+        <Button onClick={()=>setPage('SubmitPage')} color="#058A4A">Next</Button>
         </Group> 
     </Container>
   );

src/components/HpFormNavbar/HpFormNavbar.tsx

@@ -12,11 +12,11 @@ function HpFormNavbar({page,setPage}:NavProps) {
     <>
       <div className={classes.navbar}>
         <div className={classes.links}>
-          <Button onClick={()=>setPage('DetailsPage')} className={`${classes.Btn} ${page==='DetailsPage'?classes.active:classes.inactive}`} variant="subtle">Details</Button>
-          <Button onClick={()=>setPage('LinksPage')} className={`${classes.Btn} ${page==='LinksPage'?classes.active:classes.inactive}`} variant="subtle">Links</Button>
-          <Button onClick={()=>setPage('PrizesPage')} className={`${classes.Btn} ${page==='PrizesPage'?classes.active:classes.inactive}`} variant="subtle">Prizes</Button>
-          <Button onClick={()=>setPage('SchedulePage')} className={`${classes.Btn} ${page==='SchedulePage'?classes.active:classes.inactive}`} variant="subtle">Schedule</Button>
-          <Button onClick={()=>setPage('SubmitPage')} className={`${classes.Btn} ${page==='SubmitPage'?classes.active:classes.inactive}`} variant="subtle">Submit</Button>
+          <Button onClick={()=>setPage('DetailsPage')} className={`${classes.Btn} ${page==='DetailsPage'?classes.active:classes.inactive}`} variant="subtle" color= '#058A4A'>Details</Button>
+          <Button onClick={()=>setPage('LinksPage')} className={`${classes.Btn} ${page==='LinksPage'?classes.active:classes.inactive}`} variant="subtle" color= '#058A4A'>Links</Button>
+          <Button onClick={()=>setPage('PrizesPage')} className={`${classes.Btn} ${page==='PrizesPage'?classes.active:classes.inactive}`} variant="subtle"color= '#058A4A'>Prizes</Button>
+          <Button onClick={()=>setPage('SchedulePage')} className={`${classes.Btn} ${page==='SchedulePage'?classes.active:classes.inactive}`} variant="subtle"color= '#058A4A'>Schedule</Button>
+          <Button onClick={()=>setPage('SubmitPage')} className={`${classes.Btn} ${page==='SubmitPage'?classes.active:classes.inactive}`} variant="subtle"color= '#058A4A'>Submit</Button>
         </div>
         <Burger opened={opened} onClick={() => setOpened((o) => !o)} className={classes.burger} />
       </div>

src/components/MaidaanLogo/HeaderMegaMenu.tsx

@@ -32,6 +32,9 @@ export function HeaderMegaMenu({NavLinks,SetNavLinks}:NavProps) {
 
 
           <Group h="100%" gap={0} visibleFrom="sm">
+          <a  href="/" className={`${classes.link} `} >
+            <p >Home</p>
+            </a>
             <a  onClick={()=>SetNavLinks('Tournaments')} className={`${classes.link} `} >
             <p className={` ${NavLinks==='Tournaments'?classes.active:classes.inactive}`}>Tournaments</p>
             </a>
@@ -44,6 +47,7 @@ export function HeaderMegaMenu({NavLinks,SetNavLinks}:NavProps) {
             <a onClick={()=>SetNavLinks('GovernmentSchemes')} className={classes.link}>
             <p className={` ${NavLinks==='GovernmentSchemes'?classes.active:classes.inactive}`}>Government Schemes</p>
             </a> 
+            <a href="/ProfilePage">pro</a>
           </Group>
 
 
@@ -86,6 +90,7 @@ export function HeaderMegaMenu({NavLinks,SetNavLinks}:NavProps) {
             <a onClick={()=>SetNavLinks('GovernmentSchemes')} className={classes.link}>
             Government Schemes
             </a> 
+
 
           <Divider my="sm" />
 

src/components/PpProfileBox/PpProfileBox.module.css

@@ -0,0 +1,61 @@
+.card {
+    background-color: var(--mantine-color-body);
+    width: 300px;
+    margin: 5%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 1.5%;
+    background: #FCE8CE80;
+    border: rem(2px) solid #F1A02F;
+    border: 2px solid #F1A02F;
+    border-radius: 10px; /* Adjust for rounded corners */
+    padding: 20px;
+    background-color: #FCE8CE80;
+    box-shadow: 0 0 2px #F1A02F, /* White glow */
+                0 0 4px#F1A02F, 
+                0 0 6px #F1A02F;
+    transition: box-shadow 0.3s ease-in-out;
+    @media (max-width: $mantine-breakpoint-sm) {
+        /* flex-direction: column; */
+        width: auto;
+        padding: var(--mantine-spacing-xl);
+        /* margin: auto; */
+      }
+
+
+
+  }
+  .card:hover {
+    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8), /* Brighter white glow on hover */
+                0 0 18px rgba(255, 255, 255, 0.6),
+                0 0 12px rgba(255, 255, 255, 0.5);
+  }
+
+  .avatar {
+    border: rem(2px) solid #F1A02F;
+    margin: 5%;
+  }
+
+
+  .name{
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    color: #1a1a1a;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .Editbtn{
+    color: #F1A02F;
+    background: #FCE8CE99;
+    @mixin hover {
+        background-color: light-dark(#F1A02F, var(--mantine-color-dark-6));
+        color: var(--mantine-color-white);
+
+      }
+      box-shadow: 0px 1px 4px 0px #00000040;
+      border: #00000040;
+
+  }

src/components/PpProfileBox/PpProfileBox.tsx

@@ -0,0 +1,111 @@
+import { Card, Avatar, Text, Group, Badge, ActionIcon,Button } from '@mantine/core';
+import { IconMail, IconPhone, IconBrandFacebook, IconBrandInstagram, IconBrandTwitter } from '@tabler/icons-react';
+import classes from './PpProfileBox.module.css';
+import profileimg from '../../assets/Profilepicturedemo.jpg'
+
+// Define the mock data
+const mockData = {
+  name: 'Virat Patel',
+  username: 'virat_patel',
+  location: 'Mumbai, India',
+  bio: 'Dedicated cricket enthusiast with a passion for leadership and strategy. Committed to excelling and inspiring on the field.',
+  badges: [
+    { label: 'Cricket', color: 'orange', variant: 'light' },
+    { label: 'Football', color: 'orange', variant: 'light' },
+  ],
+  team: 'Mumbai Tigers | U-19 State Squad',
+  achievements: '4 years of competitive play, 3-time state champion, 1-time national semi-finalist',
+  email: '[email protected]',
+  phone: '00000-00000',
+  socialLinks: {
+    facebook: 'https://facebook.com/virat_patel',
+    instagram: 'https://instagram.com/virat_patel',
+    twitter: 'https://twitter.com/virat_patel',
+  },
+  avatarUrl: {profileimg},
+};
+
+export function PpProfileBox() {
+  const {
+    name,
+    username,
+    location,
+    bio,
+    badges,
+    team,
+    achievements,
+    email,
+    phone,
+    socialLinks,
+    avatarUrl,
+  } = mockData;
+
+  return (
+    <Card withBorder padding="lg" radius="md" className={classes.card}>
+      <Avatar
+        src={profileimg}
+        size={100}
+        radius={80}
+        mx="auto"
+        className={classes.avatar}
+      />
+      <Text ta="center"  className={classes.name}>
+        {name}
+      </Text>
+      <Text ta="center" fz="sm" >
+        @{username} | {location}
+      </Text>
+      <Text ta="center" fz="sm" mt="sm" mx="auto" style={{ maxWidth: 300 }}>
+        {bio}
+      </Text>
+
+      <Group mt="md" justify="center" gap="xs">
+        {badges.map((badge, index) => (
+          <Badge key={index} color={badge.color} variant={badge.variant}>
+            {badge.label}
+          </Badge>
+        ))}
+      </Group>
+
+
+      <Text ta="center" fz="sm" mt="md">
+        {team}
+      </Text>
+      <Text ta="center" fz="xs" mt="xs">
+        {achievements}
+      </Text>
+
+      <Group mt="md" >
+        <Group >
+          <ActionIcon size="lg" color= 'orange' variant= 'light'  radius="xl">
+            <IconMail size="1rem" />
+          </ActionIcon>
+          <Text fz="xs">{email}</Text>
+        </Group>
+        <Group >
+          <ActionIcon size="lg" color= 'orange' variant= 'light' radius="xl">
+            <IconPhone size="1rem" />
+          </ActionIcon>
+          <Text fz="xs">{phone}</Text>
+        </Group>
+
+      </Group>
+
+      <Group mt="md" >
+        <ActionIcon size="lg" color= 'orange' variant= 'light'   radius="xl" component="a" href={socialLinks.facebook} target="_blank">
+          <IconBrandFacebook size="1rem" />
+        </ActionIcon>
+        <ActionIcon size="lg" color= 'orange' variant= 'light' radius="xl" component="a" href={socialLinks.instagram} target="_blank">
+          <IconBrandInstagram size="1rem" />
+        </ActionIcon>
+        <ActionIcon size="lg" color= 'orange' variant= 'light' radius="xl" component="a" href={socialLinks.twitter} target="_blank">
+          <IconBrandTwitter size="1rem" />
+        </ActionIcon>
+      </Group>
+      <hr />
+       <Button  className={classes.Editbtn}  >
+        Edit Profile
+        </Button>
+    </Card>
+  );
+}