diff --git a/apps/live/src/app/Sections/Sock.tsx b/apps/live/src/app/Sections/Sock.tsx new file mode 100644 index 00000000..8e100143 --- /dev/null +++ b/apps/live/src/app/Sections/Sock.tsx @@ -0,0 +1,86 @@ +"use client"; + +import React from "react"; +import Section from "@repo/ui/Section"; +import FrontRollercoaster from "../lib/Assets/SVG/LandingSock/FrontRollercoaster.tsx"; +import BackRollercoaster from "../lib/Assets/SVG/LandingSock/BackRollercoaster.tsx"; +import BackGrass from "../lib/Assets/SVG/LandingSock/BackGrass.tsx"; +import FrontGrass from "../lib/Assets/SVG/LandingSock/FrontGrass.tsx"; +import useIsMobile from "@repo/util/hooks/useIsMobile"; + +export default function Sock(): JSX.Element { + const isMobile = useIsMobile(); + + const background = ( +
+ ); + + const content = ( +
+
+
+ Happy Hacking! +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ ); + + return ( +
+ ); +} diff --git a/apps/live/src/app/lib/Assets/SVG/LandingSock/BackGrass.tsx b/apps/live/src/app/lib/Assets/SVG/LandingSock/BackGrass.tsx new file mode 100644 index 00000000..fcc27469 --- /dev/null +++ b/apps/live/src/app/lib/Assets/SVG/LandingSock/BackGrass.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const SVGComponent = (props: SVGProps) => ( + + + + +); +export default SVGComponent; diff --git a/apps/live/src/app/lib/Assets/SVG/LandingSock/BackRollercoaster.tsx b/apps/live/src/app/lib/Assets/SVG/LandingSock/BackRollercoaster.tsx new file mode 100644 index 00000000..7e3e3746 --- /dev/null +++ b/apps/live/src/app/lib/Assets/SVG/LandingSock/BackRollercoaster.tsx @@ -0,0 +1,582 @@ +import * as React from "react"; +const BackRollercoaster = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +export default BackRollercoaster; diff --git a/apps/live/src/app/lib/Assets/SVG/LandingSock/FrontGrass.tsx b/apps/live/src/app/lib/Assets/SVG/LandingSock/FrontGrass.tsx new file mode 100644 index 00000000..b11d3f91 --- /dev/null +++ b/apps/live/src/app/lib/Assets/SVG/LandingSock/FrontGrass.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { SVGProps } from "react"; +const FrontGrass = (props: SVGProps) => ( + + + + +); +export default FrontGrass; diff --git a/apps/live/src/app/lib/Assets/SVG/LandingSock/FrontRollercoaster.tsx b/apps/live/src/app/lib/Assets/SVG/LandingSock/FrontRollercoaster.tsx new file mode 100644 index 00000000..92fffd8e --- /dev/null +++ b/apps/live/src/app/lib/Assets/SVG/LandingSock/FrontRollercoaster.tsx @@ -0,0 +1,1877 @@ +import * as React from "react"; + +const FrontRollercoaster = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +export default FrontRollercoaster; diff --git a/apps/live/src/app/lib/Components/FilterButton.tsx b/apps/live/src/app/lib/Components/FilterButton.tsx new file mode 100644 index 00000000..02af5346 --- /dev/null +++ b/apps/live/src/app/lib/Components/FilterButton.tsx @@ -0,0 +1,104 @@ +import React from "react"; + +interface ButtonProps { + backgroundColor: string; + textColor: string; + text: string; + borderColor?: string; + hoverBGColor?: string; + hoverText?: string; + hoverBorderColor?: string; + onClick?: () => void; +} + +const bgColorMap: Record = { + canopyGreenLight: "bg-canopyGreenLight", + canopyGreen:"bg-canopyGreen", + mossGreen: "bg-mossGreen", + mossGreenDark: "bg-mossGreenDark", + firecrackerRedLight: "bg-firecrackerRedLight", + firecrackerRed: "bg-firecrackerRed", +}; + +const textColorMap: Record = { + charcoalFog: "text-[#353131]", + white: "text-white", + canopyGreenLight: "text-canopyGreenLight", +}; + +const borderColorMap: Record = { + canopyGreenLight: "border-canopyGreenLight", + canopyGreen:"bg-canopyGreen", + mossGreen: "border-mossGreen", + mossGreenDark: "border-mossGreenDark", + firecrackerRed: "border-firecrackerRed", + firecrackerRedLight: "border-firecrackerRedLight", +}; + +const hoverBgColorMap: Record = { + canopyGreenLight: "hover:bg-canopyGreenLight", + canopyGreen: "hover:bg-canopyGreen", + mossGreen: "hover:bg-mossGreen", + mossGreenDark: "hover:bg-mossGreenDark", + firecrackerRed: "hover:bg-firecrackerRed", +}; + +const hoverTextColorMap: Record = { + white: "hover:text-white", + charcoalFog: "hover:text-[#353131]", + canopyGreenLight: "hover:text-canopyGreenLight", +}; + +const hoverBorderColorMap: Record = { + white: "hover:border-white", + canopyGreenLight: "hover:border-canopyGreenLight", + canopyGreen:"bg-canopyGreen", + mossGreen: "hover:border-mossGreen", + mossGreenDark: "hover:border-mossGreenDark", + firecrackerRed: "hover:border-firecrackerRed", +}; + +const FilterButton: React.FC = ({ + backgroundColor, + textColor, + text, + borderColor, + hoverBGColor, + hoverText, + hoverBorderColor, + onClick, +}) => { + const bgClass = bgColorMap[backgroundColor] ?? bgColorMap.mossGreen; + const textClass = textColorMap[textColor] ?? textColorMap.charcoalFog; + const borderClass = borderColor + ? borderColorMap[borderColor] + : "border-transparent"; + const hoverBgClass = hoverBGColor + ? hoverBgColorMap[hoverBGColor] + : "hover:bg-transparent"; + const hoverTextClass = hoverText + ? hoverTextColorMap[hoverText] + : "hover:text-white"; + const hoverBorderClass = hoverBorderColor + ? hoverBorderColorMap[hoverBorderColor] + : "hover:border-white"; + + const baseStyle = `font-NeulisNeue-Bold flex items-center justify-center gap-1 rounded-lg w-auto h-auto py-1 whitespace-nowrap border border-solid transition-transform duration-200 ease-in-out hover:scale-105 hover:border-[1.5px] active:brightness-90 + ${bgClass} + ${textClass} + ${borderClass} + ${hoverBgClass} + ${hoverTextClass} + ${hoverBorderClass} + ${text ? "px-4" : "px-2"} + `; + + return ( + + ); +}; + +export default FilterButton; \ No newline at end of file