diff --git a/frontend/src/app/(pages)/DeerhackStatsPage.tsx b/frontend/src/app/(pages)/DeerhackStatsPage.tsx index 273862c..434e1a6 100644 --- a/frontend/src/app/(pages)/DeerhackStatsPage.tsx +++ b/frontend/src/app/(pages)/DeerhackStatsPage.tsx @@ -17,7 +17,7 @@ export default function DeerhackStatsPage(): ReactElement { />
- DeerHack 2023 + DeerHack Till Now
diff --git a/frontend/src/app/assets/images/decreaseStat.tsx b/frontend/src/app/assets/images/decreaseStat.tsx new file mode 100644 index 0000000..0f20ecd --- /dev/null +++ b/frontend/src/app/assets/images/decreaseStat.tsx @@ -0,0 +1,22 @@ +import { ReactElement } from "react"; + +export default function increase_statSVG({ + height = 11, + width = 15, +}: { + height?: number; + width?: number; +}): ReactElement { + return ( + + + + + + ); +} diff --git a/frontend/src/app/assets/images/decrease_stat.svg b/frontend/src/app/assets/images/decrease_stat.svg new file mode 100644 index 0000000..50cdb5e --- /dev/null +++ b/frontend/src/app/assets/images/decrease_stat.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/app/assets/images/genderEllipse.tsx b/frontend/src/app/assets/images/genderEllipse.tsx index 00cb862..851d105 100644 --- a/frontend/src/app/assets/images/genderEllipse.tsx +++ b/frontend/src/app/assets/images/genderEllipse.tsx @@ -1,28 +1,36 @@ import { ReactElement } from "react"; export default function GenderEllipseSVG({ - height = 44, - width = 44, + height = 315, + width = 315, }: { height?: number; width?: number; }): ReactElement { return ( - - - - + + + + + + + + + // + // + // + // + // + ); } diff --git a/frontend/src/app/assets/images/genderEllipsenew.svg b/frontend/src/app/assets/images/genderEllipsenew.svg new file mode 100644 index 0000000..6058e0c --- /dev/null +++ b/frontend/src/app/assets/images/genderEllipsenew.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/app/assets/images/gender_ellipse.svg b/frontend/src/app/assets/images/gender_ellipse.svg deleted file mode 100644 index bff8ff2..0000000 --- a/frontend/src/app/assets/images/gender_ellipse.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/src/app/assets/images/increaseStat.tsx b/frontend/src/app/assets/images/increaseStat.tsx new file mode 100644 index 0000000..b6b9459 --- /dev/null +++ b/frontend/src/app/assets/images/increaseStat.tsx @@ -0,0 +1,21 @@ +import { ReactElement } from "react"; + +export default function increase_statSVG({ + height = 11, + width = 16, +}: { + height?: number; + width?: number; +}): ReactElement { + return ( + + + + + ); +} diff --git a/frontend/src/app/assets/images/increase_stat.svg b/frontend/src/app/assets/images/increase_stat.svg new file mode 100644 index 0000000..2cc0e61 --- /dev/null +++ b/frontend/src/app/assets/images/increase_stat.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/app/components/DeerhackStats/CardLarge.tsx b/frontend/src/app/components/DeerhackStats/CardLarge.tsx index aff5b80..bcf492a 100644 --- a/frontend/src/app/components/DeerhackStats/CardLarge.tsx +++ b/frontend/src/app/components/DeerhackStats/CardLarge.tsx @@ -7,58 +7,73 @@ import { cabinetRegular, } from "@/app/utils/fonts"; import GenderEllipseSVG from "@/app/assets/images/genderEllipse"; - +import IncreaseStatSVG from "@/app/assets/images/increaseStat"; +import DecreaseStatSVG from "@/app/assets/images/decreaseStat"; export default function CardLarge(): ReactElement { return ( - // Divide to Two Sections (GenderDistribution icon and title) and (Graph, Numbers) -
- {/* Divide the Title into two sections: icons and title */} -
- -

- Gender Distribution -

-
- - {/* Container for Ellipse to place it in center */} -
- -
- - {/* Top Level Container for Male Female Section */} -
- {/* Male Stats */} +
+
+
- {/* Flex for Icon and Male Text */} -
-
-

- Male -

-
-
- 85% -
+ +

+ Gender Distribution +

- {/* Female Stats */} -
- {/* Flex for Icon and Male Text */} -
-
-

- Female -

+ +
+ +
+ + +
+ {/* Male Stats */} +
+
+
+

+ Male +

+
+
+ 80% +
+ {/* Decrease Stat */} +
+ +

+ 5% +

+
-
- 15% + + {/* Female Stats */} +
+ {/* Flex for Icon and Female Text */} +
+
+

+ Female +

+
+
+ 20% +
+ {/* Increase Stat */} +
+ +

+ 5% +

+
); -} +} \ No newline at end of file diff --git a/frontend/src/app/components/DeerhackStats/CardMedium.tsx b/frontend/src/app/components/DeerhackStats/CardMedium.tsx index 1674ce9..8b3c0ff 100644 --- a/frontend/src/app/components/DeerhackStats/CardMedium.tsx +++ b/frontend/src/app/components/DeerhackStats/CardMedium.tsx @@ -1,17 +1,25 @@ -import ApplicantsSVG from "@/app/assets/images/applicants"; - -import { cabinetBold, cabinetLight, cabinetRegular } from "@/app/utils/fonts"; +import ApplicantsSVG from "@/app/assets/images/applicants" +import { cabinetBold, cabinetRegular } from "@/app/utils/fonts" export default function CardMedium() { return ( -
+
-

- Total Applicants -

+ {/* Mobile View */} +
+

Total

+

1107

+
+

Applicants

+ {/* DeskTop View */} +
+

Total Applicants

+
+

1107

+
+
-

1107

- ); + ) } diff --git a/frontend/src/app/components/DeerhackStats/CardMini.tsx b/frontend/src/app/components/DeerhackStats/CardMini.tsx index 65c8c74..0b46894 100644 --- a/frontend/src/app/components/DeerhackStats/CardMini.tsx +++ b/frontend/src/app/components/DeerhackStats/CardMini.tsx @@ -11,14 +11,14 @@ export default function CardMini({ numbers: number; }) { return ( -
+
{svg}

{title}

-

+

{numbers}

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index ccbcdba..3335311 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -45,6 +45,11 @@ .text-secondary-gradient-color-reverse { @apply bg-gradient-to-tl from-secondary from-1% to-primary bg-clip-text text-transparent; + } + .card-background-gradient{ + background: linear-gradient(288.92deg, rgba(74, 51, 148, 0.44) 5.97%, rgba(23, 16, 46, 0) 115.22%), + linear-gradient(270deg, rgba(36, 26, 74, 0.15) 0%, rgba(36, 26, 74, 0) 95.92%); + } /* .text-third-gradient-color { @apply bg-gradient-to-br from-[#F5C144] from-0% to-[#6633CC] text-transparent bg-clip-text; diff --git a/frontend/src/app/sections/DeerhackStats/DeerhackStats.tsx b/frontend/src/app/sections/DeerhackStats/DeerhackStats.tsx index 48acdea..165efa2 100644 --- a/frontend/src/app/sections/DeerhackStats/DeerhackStats.tsx +++ b/frontend/src/app/sections/DeerhackStats/DeerhackStats.tsx @@ -10,7 +10,7 @@ export default function DeerHackStats() {
} title="Hackers" numbers={75} /> - } title="Projects" numbers={18} /> + } title=" Total Projects" numbers={18} />
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index be58ff7..c560abc 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -19,6 +19,9 @@ const config: Config = { magnolia: "#FCF7FF", green: "#004F2D", red: "#c70017", + statpurp:"#291954", + cardviolet:"#241A4A4D", + cardgrape:"#6633CC2B", orange:"#F66218", }, gradientColorStopPositions: {