From 94cf964ea403a0e4fa50455dbdff29c5f84f03e8 Mon Sep 17 00:00:00 2001 From: ALIA-HAIDER Date: Thu, 29 Aug 2024 16:31:10 +0530 Subject: [PATCH 1/2] button scrol --- index.html | 2 +- src/components/GpHeader/GpHeader.tsx | 2 +- src/components/GpSchemesection/Gpschemes.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index e880d1c..fdacc09 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/components/GpHeader/GpHeader.tsx b/src/components/GpHeader/GpHeader.tsx index 29d0b4e..e427585 100644 --- a/src/components/GpHeader/GpHeader.tsx +++ b/src/components/GpHeader/GpHeader.tsx @@ -20,7 +20,7 @@ export function GpHeader() {
{/* +
+ + + ); +} diff --git a/src/components/HpNav/HpNav.module.css b/src/components/HpNav/HpNav.module.css new file mode 100644 index 0000000..70f4d43 --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/src/components/HpNav/HpNav.tsx b/src/components/HpNav/HpNav.tsx new file mode 100644 index 0000000..78f576d --- /dev/null +++ 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 ( + +
+ + + + + + + + + + +
+ + + + + + + + + + + ); + } \ No newline at end of file diff --git a/src/components/HpStatsCard/StatsCard.module.css b/src/components/HpStatsCard/StatsCard.module.css new file mode 100644 index 0000000..7817826 --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/src/components/HpStatsCard/StatsCard.tsx b/src/components/HpStatsCard/StatsCard.tsx new file mode 100644 index 0000000..c8aadd8 --- /dev/null +++ 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) => ( + + + {article.title} + + + + Progress + + + {article.progress}% + + + + + + Continue organizing + + + + )); + + return ( + + + {cards} + + + ); +} diff --git a/src/components/MaidaanLogo/HeaderMegaMenu.tsx b/src/components/MaidaanLogo/HeaderMegaMenu.tsx index 23094c4..f2c7f01 100644 --- a/src/components/MaidaanLogo/HeaderMegaMenu.tsx +++ b/src/components/MaidaanLogo/HeaderMegaMenu.tsx @@ -45,7 +45,7 @@ import { {/* Theme */} - + Host an Event @@ -83,7 +83,7 @@ import { - + Host an Event diff --git a/src/pages/HostingPage.tsx b/src/pages/HostingPage.tsx new file mode 100644 index 0000000..2f4b5d3 --- /dev/null +++ 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 ( + <> + + + + + ); +}; + +export default HostingPage;