Merge pull request #12 from ALIA-HAIDER/master

host page 1 done
archonsofficial · Aug 29, 2024 · f4f62a0 · f4f62a0
2 parents 4371996 + 7d73c7f
commit f4f62a0
Show file tree

Hide file tree

Showing 12 changed files with 312 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="scroll-behavior: smooth;">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />

diff --git a/src/Router.tsx b/src/Router.tsx
@@ -4,6 +4,7 @@ import { TournamentDetailPage } from './pages/TournamentDetailPage';
 import TournamentPage from './pages/TournamentPage'
 import SignUpPage from './pages/SignUpPage';
 import GovtSchemes from './pages/GovtSchemes';
+import HostingPage from './pages/HostingPage';
 
 const router = createBrowserRouter([
   {
@@ -26,6 +27,10 @@ const router = createBrowserRouter([
     path: '/GvtSch',
     element: <GovtSchemes/>,
   },
+  {
+    path: '/HostingPage',
+    element: <HostingPage/>,
+  }
 
 
 ]);

diff --git a/src/components/GpHeader/GpHeader.tsx b/src/components/GpHeader/GpHeader.tsx
@@ -20,7 +20,7 @@ export function GpHeader() {
 
         <div className={classes.controls}>
           <Button className={classes.control} variant="white" size="lg">
-            <a href="/Tournament" className={classes.a}>Explore Scheme</a>
+            <a href="#target-section" className={classes.a}>Explore Scheme</a>
           </Button>
           {/* <Button className={cx(classes.control, classes.secondaryControl)} size="lg">
           Explore Scheme

diff --git a/src/components/GpSchemesection/Gpschemes.tsx b/src/components/GpSchemesection/Gpschemes.tsx
@@ -64,7 +64,7 @@ export function GpSchemes() {
   ));
 
   return (
-    <Container py="xl">
+    <Container py="xl" id='target-section'>
       <SimpleGrid cols={{ base: 1, sm: 3 }}>{cards}</SimpleGrid>
     </Container>
   );

diff --git a/src/components/HpBanner/HpBanner.module.css b/src/components/HpBanner/HpBanner.module.css
@@ -0,0 +1,71 @@
+.wrapper {
+    position: relative;
+    padding-top: rem(120px);
+    padding-bottom: rem(80px);
+
+    @media (max-width: $mantine-breakpoint-sm) {
+      padding-top: rem(80px);
+      padding-bottom: rem(60px);
+    }
+  }
+
+  .inner {
+    position: relative;
+    z-index: 1;
+  }
+
+  .title {
+    text-align: center;
+    font-weight: 800;
+    font-size: rem(40px);
+    letter-spacing: -1px;
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+    margin-bottom: var(--mantine-spacing-xs);
+    font-family:
+      Greycliff CF,
+      var(--mantine-font-family);
+
+    @media (max-width: $mantine-breakpoint-xs) {
+      font-size: rem(28px);
+      text-align: left;
+    }
+  }
+
+  .highlight {
+    color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
+  }
+
+  .description {
+    text-align: center;
+
+    @media (max-width: $mantine-breakpoint-xs) {
+      text-align: left;
+      font-size: var(--mantine-font-size-md);
+    }
+  }
+
+  .controls {
+    margin-top: var(--mantine-spacing-lg);
+    display: flex;
+    justify-content: center;
+
+    @media (max-width: $mantine-breakpoint-xs) {
+      flex-direction: column;
+    }
+  }
+
+  .control {
+    &:not(:first-of-type) {
+      margin-left: var(--mantine-spacing-md);
+    }
+
+    @media (max-width: $mantine-breakpoint-xs) {
+      height: rem(42px);
+      font-size: var(--mantine-font-size-md);
+
+      &:not(:first-of-type) {
+        margin-top: var(--mantine-spacing-md);
+        margin-left: 0;
+      }
+    }
+  }
diff --git a/src/components/HpBanner/HpBanner.tsx b/src/components/HpBanner/HpBanner.tsx
@@ -0,0 +1,27 @@
+import { Title, Text, Button, Container } from '@mantine/core';
+import classes from './HpBanner.module.css';
+
+export function HpBanner() {
+  return (
+    <Container className={classes.wrapper} size={1400}>
+      <div className={classes.inner}>
+        <Title className={classes.title}>Host a Tournament! for any stack</Title>
+
+        <Container p={0} size={600}>
+          <Text size="lg" c="dimmed" className={classes.description}>
+            Nothing beats the excitement of participating in a tournament, except for the thrill of
+            organizing one yourself! Join the community of tournament organizers on Maidaan and
+            manage your registrations, match schedules, communications, and scoring, all from one
+            platform.
+          </Text>
+        </Container>
+
+        <div className={classes.controls}>
+          <Button className={classes.control} size="lg" color='#058A4A'>
+          Oraganize Your Tournament
+          </Button>
+        </div>
+      </div>
+    </Container>
+  );
+}
diff --git a/src/components/HpNav/HpNav.module.css b/src/components/HpNav/HpNav.module.css
@@ -0,0 +1,40 @@
+.header {
+    height: rem(60px);
+    padding-left: var(--mantine-spacing-md);
+    padding-right: var(--mantine-spacing-md);
+    border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+    /* padding-bottom: 0%; */
+  }
+
+
+  .link,.linkbtn {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding-left: var(--mantine-spacing-md);
+    padding-right: var(--mantine-spacing-md);
+    text-decoration: none;
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+    font-weight: 500;
+    font-size: var(--mantine-font-size-sm);
+
+    @media (max-width: $mantine-breakpoint-sm) {
+      height: rem(42px);
+      width: 100%;
+    }
+
+    .linkbtn{
+        color: light-dark(#F1A02F, var(--mantine-color-white));
+
+    }
+
+    @mixin hover {
+      background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+      color: #F1A02F ;
+
+    }
+  }
+  .Signbtn{
+    text-decoration: none;
+    color: white;
+  }
diff --git a/src/components/HpNav/HpNav.tsx b/src/components/HpNav/HpNav.tsx
@@ -0,0 +1,56 @@
+import {
+    Group,
+    Button,
+    Divider,
+    Box,
+    Burger,
+    Drawer,
+    ScrollArea,
+    rem,
+    useMantineTheme,
+  } from '@mantine/core';
+  import { MantineLogo } from '@mantinex/mantine-logo';
+  import { useDisclosure } from '@mantine/hooks';
+  import classes from './HpNav.module.css';
+
+
+  export function HpNav() {
+    const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = useDisclosure(false);
+    const [linksOpened, { toggle: toggleLinks }] = useDisclosure(false);
+    const theme = useMantineTheme();
+
+
+    return (
+      <Box pb={0}>
+        <header className={classes.header}>
+          <Group justify="space-between" h="100%">
+            <MantineLogo size={30} />
+
+            <Group visibleFrom="sm">
+
+              <Button color='#058A4A'className={classes.Signbtn}><a href="/SignUp" className={classes.Signbtn}>Sign up</a></Button>
+            </Group>
+
+            <Burger opened={drawerOpened} onClick={toggleDrawer} hiddenFrom="sm" />
+          </Group>
+        </header>
+
+        <Drawer
+          opened={drawerOpened}
+          onClose={closeDrawer}
+          size="100%"
+          padding="md"
+          title="Navigation"
+          hiddenFrom="sm"
+          zIndex={1000000}
+        >
+          <ScrollArea h={`calc(100vh - ${rem(80)})`} mx="-md">
+
+            <Group justify="center" grow pb="xl" px="md">
+              <Button color='#058A4A' className={classes.Signbtn} ><a href="/SignUp" className={classes.Signbtn}>Sign up</a></Button>
+            </Group>
+          </ScrollArea>
+        </Drawer>
+      </Box>
+    );
+  }
diff --git a/src/components/HpStatsCard/StatsCard.module.css b/src/components/HpStatsCard/StatsCard.module.css
@@ -0,0 +1,37 @@
+.card {
+    position: relative;
+    overflow: visible;
+    padding: var(--mantine-spacing-xl);
+    padding-top: calc(var(--mantine-spacing-xl) * 1.5 + rem(20px));
+    /* width: 20%; */
+  }
+  .Pgrid {
+    display: grid;
+    gap: 16px; /* Adjust as needed */
+  }
+
+  @media (max-width: 576px) {
+    .Pgrid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (min-width: 577px) and (max-width: 768px) {
+    .Pgrid {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media (min-width: 769px) {
+    .Pgrid {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+
+  .title {
+    font-family:
+      Greycliff CF,
+      var(--mantine-font-family);
+    line-height: 3;
+    font-size: larger;
+  }
diff --git a/src/components/HpStatsCard/StatsCard.tsx b/src/components/HpStatsCard/StatsCard.tsx
@@ -0,0 +1,54 @@
+import { Progress, Text, Group, Badge, Card, Container, SimpleGrid } from '@mantine/core';
+import classes from './StatsCard.module.css';
+
+const mockdata = [
+  {
+    title: 'Swimming challenge',
+    progress: 60,
+  },
+  {
+    title: 'Champions Trophy 2024',
+    progress: 40,
+  },
+  {
+    title: 'Champions Trophy 2024',
+    progress: 40,
+  },
+  {
+    title: 'Champions Trophy 2024',
+    progress: 40,
+  },
+];
+
+export function StatsCard() {
+  const cards = mockdata.map((article) => (
+    <Card key={article.title} p="md" radius="md" className={classes.card}>
+      <Text   className={classes.title}>
+        {article.title}
+      </Text>
+      <Group  mt="xs">
+        <Text size="sm" color="dimmed">
+          Progress
+        </Text>
+        <Text size="sm" color="dimmed">
+          {article.progress}%
+        </Text>
+      </Group>
+      <Progress value={article.progress} mt={5} color="#058A4A" />
+      <Group  mt="md">
+        <a href="#"><Badge size="sm" color="#058A4A">
+          Continue organizing
+        </Badge></a>
+      </Group>
+    </Card>
+  ));
+
+  return (
+    <Container py="xl" id="target-section">
+      <SimpleGrid className={classes.Pgrid}
+      >
+        {cards}
+      </SimpleGrid>
+    </Container>
+  );
+}
diff --git a/src/components/MaidaanLogo/HeaderMegaMenu.tsx b/src/components/MaidaanLogo/HeaderMegaMenu.tsx
@@ -45,7 +45,7 @@ import {
             {/* <a href="" className={classes.linkbtn}>
                 Theme
               </a> */}
-              <a href="#" className={classes.linkbtn}>
+              <a href="/HostingPage" className={classes.linkbtn}>
                  Host an Event
               </a>
               <Button color='#F1A02F'className={classes.Signbtn}><a href="/SignUp" className={classes.Signbtn}>Sign up</a></Button>
@@ -83,7 +83,7 @@ import {
             <Divider my="sm" />
 
             <Group justify="center" grow pb="xl" px="md">
-                 <a href="#" className={classes.linkbtn}>
+                 <a href="/HostingPage" className={classes.linkbtn}>
                  Host an Event
               </a>
               <Button color='#F1A02F' className={classes.Signbtn} ><a href="/SignUp" className={classes.Signbtn}>Sign up</a></Button>

diff --git a/src/pages/HostingPage.tsx b/src/pages/HostingPage.tsx
@@ -0,0 +1,17 @@
+import { HpBanner } from '@/components/HpBanner/HpBanner';
+import { HpNav } from '@/components/HpNav/HpNav';
+import { StatsCard } from '@/components/HpStatsCard/StatsCard';
+import React from 'react';
+
+
+const HostingPage: React.FC = () => {
+  return (
+    <>
+    <HpNav/>
+    <HpBanner/>
+    <StatsCard/>
+    </>
+  );
+};
+
+export default HostingPage;