diff --git a/apps/live/public/resources/coin.svg b/apps/live/public/resources/coin.svg new file mode 100644 index 00000000..5886c552 --- /dev/null +++ b/apps/live/public/resources/coin.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/live/public/resources/resourceCard.svg b/apps/live/public/resources/resourceCard.svg new file mode 100644 index 00000000..5e9d0d1b --- /dev/null +++ b/apps/live/public/resources/resourceCard.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/apps/live/public/resources_buildings.svg b/apps/live/public/resources_buildings.svg deleted file mode 100644 index e9141dbd..00000000 --- a/apps/live/public/resources_buildings.svg +++ /dev/null @@ -1,108 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/live/public/resources_card.svg b/apps/live/public/resources_card.svg deleted file mode 100644 index b05afd78..00000000 --- a/apps/live/public/resources_card.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apps/live/public/resources_link_arrow.svg b/apps/live/public/resources_link_arrow.svg deleted file mode 100644 index 90847c7b..00000000 --- a/apps/live/public/resources_link_arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/apps/live/src/app/(landing)/Resources.tsx b/apps/live/src/app/(landing)/Resources.tsx index 930d73c1..e44f3c7d 100644 --- a/apps/live/src/app/(landing)/Resources.tsx +++ b/apps/live/src/app/(landing)/Resources.tsx @@ -6,33 +6,47 @@ import Image from "next/image"; import useContentHeight from "@repo/util/hooks/useContentHeight"; import useWindowSize from "@repo/util/hooks/useWindowSize"; import ResourcesBackground from "../lib/Assets/SVG/ResourcesBackground"; +import RibbonTitle from "@repo/ui/RibbonTitle"; +import useDevice from "@repo/util/hooks/useDevice"; type TicketInfo = { ticketText: string; link: string; + description: string; }; const tickets: TicketInfo[] = [ { - ticketText: "Beginner Resource Guide", + ticketText: "Hacker Guide >", link: "https://docs.google.com/document/d/15XfcqKupkjGC7WLHvigt_nzUeM7LHQ1-o916hmZkCwo/edit?usp=sharing", + description: + "Basic welcome information like map of venue, due dates and more!", }, { - ticketText: "Hacker Welcome Guide", + ticketText: "How to Demo >", link: "https://drive.google.com/file/d/18UrWcSD3gIQZC0W5JggKnVi7w5YBwc1L/view?usp=sharing", + description: + "Basic welcome information like map of venue, due dates and more!", }, { - ticketText: "Project Demo Guide", + ticketText: "Resources >", link: "https://docs.google.com/document/d/1JLBsSnUCa7nx5HBpUAV52qTS4-IIsyqkaUPuSXqI8cA/edit?usp=sharing", + description: + "Basic welcome information like map of venue, due dates and more!", }, { - ticketText: "Judging Process Guide", + ticketText: "Resources >", link: "https://docs.google.com/document/d/1Zy-EQfEap4irB7vSPygL1uwpsAJ4djqjNRVxP_lluv4/edit?usp=sharing", + description: + "Basic welcome information like map of venue, due dates and more!", }, ]; const background = ( -
+
); @@ -41,21 +55,21 @@ export default function Resources(): React.ReactNode { const ref = useRef(null); const { height: windowHeight } = useWindowSize(); const [contentHeight] = useContentHeight(ref); + const { isMobile } = useDevice(); - const height = windowHeight ? (contentHeight / windowHeight) * 100 + 46 : 85; + const height = windowHeight ? (contentHeight / windowHeight) * 100 + 70 : 110; const content = (
-
-

- RESOURCES -

+
+
-
+
{tickets.map((ticket) => ( { window.open(ticket.link, "_blank"); }} @@ -79,10 +93,12 @@ export function TicketCard({ children, onClick, ticketText, + description, }: { children?: React.ReactNode; onClick?: () => void; ticketText: string; + description: string; }): React.ReactNode { return (
TicketCard -
+
LinkArrow +
{ticketText}
-
{ticketText}
-
- {children} +
+
{description}
+ + {children && ( +
+ {children} +
+ )}
); } diff --git a/apps/live/src/app/lib/Assets/SVG/ResourcesBackground.tsx b/apps/live/src/app/lib/Assets/SVG/ResourcesBackground.tsx index a6f0637d..26b5dab3 100644 --- a/apps/live/src/app/lib/Assets/SVG/ResourcesBackground.tsx +++ b/apps/live/src/app/lib/Assets/SVG/ResourcesBackground.tsx @@ -1,993 +1,337 @@ -import React from "react"; - -export default function ResourcesBackground() { - return ( - ( + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - + opacity={0.53} + d="M391.885 645.628L675.7 578.149L683.855 613.198L390.475 697.395L391.885 645.628Z" + fill="black" + fillOpacity={0.33} + /> + + + + - - + + - - + + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} + d="M414.183 506.862C421.359 503.901 439.886 501.403 444.065 502.182C448.163 502.945 456.276 517.25 459.193 523.865C453.078 526.918 437.123 530.26 430.634 529.512C424.801 528.839 417.815 516.657 414.183 506.862Z" + fill="#F2E06F" + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +export default ResourcesBackground;