Merge pull request #13 from Mayank-704/master

Hoisting Page Form

src/components/HpForm/HpDetailsPage.module.css

@@ -0,0 +1,13 @@
+.formContainer {
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  @media (max-width: 768px) {
+    .formContainer {
+      padding: 1rem;
+    }
+  }
+

src/components/HpForm/HpDetailsPage.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { TextInput, Textarea, Container, Grid } from '@mantine/core';
+import styles from './HpDetailsPage.module.css';
+
+const HpDetailsPage: React.FC = () => {
+  return (
+    <Container className={styles.formContainer}>
+      <Grid>
+        <Grid.Col span={12} >
+          <TextInput label="Tournament Name" placeholder="Enter tournament Name" required />
+        </Grid.Col>
+        <Grid.Col span={6} >
+          <TextInput label="Start Date" placeholder="DD/MM/YYYY" required />
+        </Grid.Col>
+        <Grid.Col span={6} >
+          <TextInput label="End Date" placeholder="DD/MM/YYYY" required />
+        </Grid.Col>
+        <Grid.Col span={12} >
+          <TextInput label="Venue Name" placeholder="Enter the venue name" required />
+        </Grid.Col>
+        <Grid.Col span={12} >
+          <TextInput label="City" placeholder="Enter City" required />
+        </Grid.Col>
+        <Grid.Col span={12}>
+          <Textarea label="Tournament Details" placeholder="Provide details of the tournament" required />
+        </Grid.Col>
+      </Grid>
+    </Container>
+  );
+};
+
+export default HpDetailsPage;

src/components/HpFormNavbar/HpFormNavbar.module.css

@@ -0,0 +1,31 @@
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background-color: #e0f7fa;
+  }
+
+  .logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+
+  .links {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .burger {
+    display: none;
+  }
+
+  @media (max-width: 768px) {
+    .links {
+      display: none;
+    }
+    .burger {
+      display: block;
+    }
+  }
+

src/components/HpFormNavbar/HpFormNavbar.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Burger, Drawer, Group, Button } from '@mantine/core';
+import styles from './HpFormNavbar.module.css';
+
+const HpFormNavbar: React.FC = () => {
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <>
+      <div className={styles.navbar}>
+        <div className={styles.logo}>Sports Event</div>
+        <div className={styles.links}>
+          <Button variant="subtle">Details</Button>
+          <Button variant="subtle">Links</Button>
+          <Button variant="subtle">Prizes</Button>
+          <Button variant="subtle">Schedule</Button>
+          <Button variant="subtle">Submit</Button>
+        </div>
+        <Burger opened={opened} onClick={() => setOpened((o) => !o)} className={styles.burger} />
+      </div>
+      <Drawer
+        opened={opened}
+        onClose={() => setOpened(false)}
+        title="Menu"
+        padding="md"
+        size="sm"
+      >
+        <Button variant="subtle" fullWidth>Details</Button>
+        <Button variant="subtle" fullWidth>Links</Button>
+        <Button variant="subtle" fullWidth>Prizes</Button>
+        <Button variant="subtle" fullWidth>Schedule</Button>
+        <Button variant="subtle" fullWidth>Submit</Button>
+      </Drawer>
+    </>
+  );
+};
+
+export default HpFormNavbar;

src/pages/HostingPage.tsx

@@ -1,4 +1,6 @@
 import { HpBanner } from '@/components/HpBanner/HpBanner';
+import HpDetailsPage from '@/components/HpForm/HpDetailsPage';
+import HpFormNavbar from '@/components/HpFormNavbar/HpFormNavbar';
 import { HpNav } from '@/components/HpNav/HpNav';
 import { StatsCard } from '@/components/HpStatsCard/StatsCard';
 import React from 'react';
@@ -8,8 +10,10 @@ const HostingPage: React.FC = () => {
   return (
     <>
     <HpNav/>
-    <HpBanner/>
-    <StatsCard/>
+    <HpFormNavbar/>
+    <HpDetailsPage/>
+    {/* <HpBanner/>
+    <StatsCard/> */}
     </>
   );
 };