From cb7e28786d1412247cac62ba52af66ccbc99ba49 Mon Sep 17 00:00:00 2001 From: VaidyaIshan <165746811+VaidyaIshan@users.noreply.github.com> Date: Sat, 15 Mar 2025 11:28:17 +0545 Subject: [PATCH 1/6] Added New Stat SVGS and Updated The gradients for Deerhack Stats --- .../src/app/(pages)/DeerhackStatsPage.tsx | 2 +- .../src/app/assets/images/decreaseStat.tsx | 22 ++++ .../src/app/assets/images/decrease_stat.svg | 3 + .../src/app/assets/images/genderEllipse.tsx | 28 +++-- .../app/assets/images/genderEllipsenew.svg | 5 + .../src/app/assets/images/gender_ellipse.svg | 4 - .../src/app/assets/images/increaseStat.tsx | 21 ++++ .../src/app/assets/images/increase_stat.svg | 3 + .../components/DeerhackStats/CardLarge.tsx | 103 ++++++++++-------- .../components/DeerhackStats/CardMedium.tsx | 4 +- .../app/components/DeerhackStats/CardMini.tsx | 2 +- frontend/src/app/globals.css | 7 +- .../sections/DeerhackStats/DeerhackStats.tsx | 2 +- frontend/tailwind.config.ts | 2 + 14 files changed, 139 insertions(+), 69 deletions(-) create mode 100644 frontend/src/app/assets/images/decreaseStat.tsx create mode 100644 frontend/src/app/assets/images/decrease_stat.svg create mode 100644 frontend/src/app/assets/images/genderEllipsenew.svg delete mode 100644 frontend/src/app/assets/images/gender_ellipse.svg create mode 100644 frontend/src/app/assets/images/increaseStat.tsx create mode 100644 frontend/src/app/assets/images/increase_stat.svg 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..dcda416 100644 --- a/frontend/src/app/assets/images/genderEllipse.tsx +++ b/frontend/src/app/assets/images/genderEllipse.tsx @@ -8,21 +8,19 @@ export default function GenderEllipseSVG({ 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..f26bb80 --- /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..e6c42be 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..d589d26 100644 --- a/frontend/src/app/components/DeerhackStats/CardMedium.tsx +++ b/frontend/src/app/components/DeerhackStats/CardMedium.tsx @@ -4,14 +4,14 @@ import { cabinetBold, cabinetLight, cabinetRegular } from "@/app/utils/fonts"; export default function CardMedium() { return ( -
+

Total Applicants

-

1107

+

1107

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

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index b545b60..694bc4b 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -22,6 +22,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%); + + } .font-cabinet-light { font-family: var(--font-cabinet-light); @@ -34,7 +39,7 @@ .no-scrollbar::-webkit-scrollbar { display: none; } - + .headings { @apply text-center text-3xl lg:text-6xl text-primary-gradient-color w-fit mx-auto px-4 md:px-0; } 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 30b1966..0c3a691 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -19,6 +19,8 @@ const config: Config = { magnolia: "#FCF7FF", green: "#004F2D", red: "#c70017", + statpurp:"#291954", + }, gradientColorStopPositions: { 3: "3%", From 0bf19d40e5dc8facb641ac964c18265304c3ce7e Mon Sep 17 00:00:00 2001 From: VaidyaIshan <165746811+VaidyaIshan@users.noreply.github.com> Date: Tue, 18 Mar 2025 19:22:50 +0545 Subject: [PATCH 2/6] Updated Deerhack Stats Page --- .../src/app/assets/images/genderEllipse.tsx | 36 ++++++++++++------- .../app/assets/images/genderEllipsenew.svg | 6 ++-- .../components/DeerhackStats/CardLarge.tsx | 6 ++-- frontend/tailwind.config.ts | 3 +- 4 files changed, 31 insertions(+), 20 deletions(-) diff --git a/frontend/src/app/assets/images/genderEllipse.tsx b/frontend/src/app/assets/images/genderEllipse.tsx index dcda416..851d105 100644 --- a/frontend/src/app/assets/images/genderEllipse.tsx +++ b/frontend/src/app/assets/images/genderEllipse.tsx @@ -1,26 +1,36 @@ import { ReactElement } from "react"; export default function GenderEllipseSVG({ - height = 44, - width = 44, + height = 315, + width = 315, }: { height?: number; width?: number; }): ReactElement { return ( - - - - - - - + viewBox="0 0 315 315" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + + + + + + + + // + // + // + // + // ); } diff --git a/frontend/src/app/assets/images/genderEllipsenew.svg b/frontend/src/app/assets/images/genderEllipsenew.svg index f26bb80..6058e0c 100644 --- a/frontend/src/app/assets/images/genderEllipsenew.svg +++ b/frontend/src/app/assets/images/genderEllipsenew.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/frontend/src/app/components/DeerhackStats/CardLarge.tsx b/frontend/src/app/components/DeerhackStats/CardLarge.tsx index e6c42be..ea3b914 100644 --- a/frontend/src/app/components/DeerhackStats/CardLarge.tsx +++ b/frontend/src/app/components/DeerhackStats/CardLarge.tsx @@ -11,8 +11,8 @@ import IncreaseStatSVG from "@/app/assets/images/increaseStat"; import DecreaseStatSVG from "@/app/assets/images/decreaseStat"; export default function CardLarge(): ReactElement { return ( -
-
+
+
@@ -31,7 +31,7 @@ export default function CardLarge(): ReactElement { {/* Male Stats */}
-
+

Male

diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index 0c3a691..07e67f6 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -20,7 +20,8 @@ const config: Config = { green: "#004F2D", red: "#c70017", statpurp:"#291954", - + cardviolet:"#241A4A4D", + cardgrape:"#6633CC2B", }, gradientColorStopPositions: { 3: "3%", From 1a127052093c08687f83330fd10bd70a7941479d Mon Sep 17 00:00:00 2001 From: VaidyaIshan <165746811+VaidyaIshan@users.noreply.github.com> Date: Mon, 31 Mar 2025 20:04:57 +0545 Subject: [PATCH 3/6] Fixed card size for sm screens --- frontend/src/app/components/DeerhackStats/CardLarge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/components/DeerhackStats/CardLarge.tsx b/frontend/src/app/components/DeerhackStats/CardLarge.tsx index ea3b914..bcf492a 100644 --- a/frontend/src/app/components/DeerhackStats/CardLarge.tsx +++ b/frontend/src/app/components/DeerhackStats/CardLarge.tsx @@ -12,7 +12,7 @@ import DecreaseStatSVG from "@/app/assets/images/decreaseStat"; export default function CardLarge(): ReactElement { return (
-
+
From ca6b594188a76bdea639fc80c3525785544d353f Mon Sep 17 00:00:00 2001 From: VaidyaIshan <165746811+VaidyaIshan@users.noreply.github.com> Date: Tue, 8 Apr 2025 20:19:19 +0545 Subject: [PATCH 4/6] Upadte --- frontend/src/app/components/DeerhackStats/CardMini.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/components/DeerhackStats/CardMini.tsx b/frontend/src/app/components/DeerhackStats/CardMini.tsx index fda9101..0b46894 100644 --- a/frontend/src/app/components/DeerhackStats/CardMini.tsx +++ b/frontend/src/app/components/DeerhackStats/CardMini.tsx @@ -18,7 +18,7 @@ export default function CardMini({ {title}

-

+

{numbers}

From 7497bc02fb1b2a9a070599a27e16082afc9613ce Mon Sep 17 00:00:00 2001 From: Supritphuyal Date: Sat, 12 Apr 2025 21:10:45 +0545 Subject: [PATCH 5/6] Fixed statistics medium card component --- .../app/components/DeerhackStats/CardMedium.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/components/DeerhackStats/CardMedium.tsx b/frontend/src/app/components/DeerhackStats/CardMedium.tsx index d589d26..608275e 100644 --- a/frontend/src/app/components/DeerhackStats/CardMedium.tsx +++ b/frontend/src/app/components/DeerhackStats/CardMedium.tsx @@ -1,17 +1,18 @@ -import ApplicantsSVG from "@/app/assets/images/applicants"; +import ApplicantsSVG from "@/app/assets/images/applicants" -import { cabinetBold, cabinetLight, cabinetRegular } from "@/app/utils/fonts"; +import { cabinetBold, cabinetRegular } from "@/app/utils/fonts" export default function CardMedium() { return ( -
+
-

- Total Applicants -

+
+

Total

+

1107

+
+

Applicants

-

1107

- ); + ) } From b7b037eae508f6ebd297be1f9c5ddfa8c948add5 Mon Sep 17 00:00:00 2001 From: Supritphuyal Date: Sat, 12 Apr 2025 21:38:23 +0545 Subject: [PATCH 6/6] Fixed Padding and text alignment --- .../src/app/components/DeerhackStats/CardMedium.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/components/DeerhackStats/CardMedium.tsx b/frontend/src/app/components/DeerhackStats/CardMedium.tsx index 608275e..8b3c0ff 100644 --- a/frontend/src/app/components/DeerhackStats/CardMedium.tsx +++ b/frontend/src/app/components/DeerhackStats/CardMedium.tsx @@ -1,5 +1,4 @@ import ApplicantsSVG from "@/app/assets/images/applicants" - import { cabinetBold, cabinetRegular } from "@/app/utils/fonts" export default function CardMedium() { @@ -7,11 +6,19 @@ export default function CardMedium() {
-
+ {/* Mobile View */} +

Total

1107

-

Applicants

+

Applicants

+ {/* DeskTop View */} +
+

Total Applicants

+
+

1107

+
+
)