Implemented Landing Sock

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 = (
+    <div className='w-full h-full bg-mossGreen ${isMobile ? "w-[200vw]" : "w-[170vw]"}'></div>
+  );
+
+  const content = (
+    <div className="relative w-full h-full overflow-hidden">
+      <div
+        className={`relative w-full overflow-hidden ${
+          isMobile ? "aspect-[1]" : "aspect-[1.5/1]"
+        }`}
+      >
+        <div
+          className="absolute top-40 left-1/2 -translate-x-1/2 font-NeulisNeue-Bold text-white flex flex-col items-center"
+          style={{
+            fontSize: isMobile ? "4vw" : "2vw",
+            top: isMobile ? "30%" : "15%",
+          }}
+        >
+          Happy Hacking!
+        </div>
+
+        <div
+          className="absolute right-0 bottom-0 w-[80vw] h-auto z-0"
+          style={{
+            transformOrigin: "top",
+            transform: "translateY(-15%)",
+          }}
+        >
+          <BackRollercoaster />
+        </div>
+
+        <div
+          className="absolute left-0 bottom-0 w-[80vw] h-auto z-10"
+          style={{
+            transformOrigin: "top",
+            transform: "translateY(-10%)",
+          }}
+        >
+          <FrontRollercoaster />
+        </div>
+
+        <div
+          className="absolute left-0 top-0 w-full h-auto overflow-hidden"
+          style={{
+            transformOrigin: "top",
+            transform: "translateY(50%)",
+          }}
+        >
+          <BackGrass />
+        </div>
+
+        <div
+          className="absolute left-0 top-0 w-full h-auto overflow-hidden z-20"
+          style={{
+            transformOrigin: "top",
+            transform: "translateY(90%)",
+          }}
+        >
+          <FrontGrass />
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <Section
+      name={"sock"}
+      background={background}
+      content={content}
+      height={120}
+    />
+  );
+}

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<SVGSVGElement>) => (
+  <svg
+    // width={1200}
+    // height={820}
+    viewBox="0 0 1200 820"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M234.5 0C17 -0.000538947 -54 95.7108 -54 95.7108V189H1216V65.6695C1216 65.6695 929.4 129.062 740.5 116.55C544.024 103.536 452 0.000538952 234.5 0Z"
+      fill="#4B642E"
+    />
+    <path
+      d="M-7 115.371C-7 115.371 161 -49.714 596.5 115.371C1032 280.456 1200 115.371 1200 115.371V2273H-7V115.371Z"
+      fill="#334A1F"
+    />
+  </svg>
+);
+export default SVGComponent;