first commit

src/renderer/components/hero/hero.css.ts

@@ -0,0 +1,58 @@
+import { style } from "@vanilla-extract/css";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
+
+export const hero = style({
+  width: "100%",
+  height: "280px",
+  minHeight: "280px",
+  maxHeight: "280px",
+  borderRadius: "8px",
+  color: "#DADBE1",
+  overflow: "hidden",
+  boxShadow: "0px 0px 15px 0px #000000",
+  cursor: "pointer",
+  border: `solid 1px ${vars.color.borderColor}`,
+  zIndex: "1",
+  "@media": {
+    "(min-width: 1250px)": {
+      backgroundPosition: "center",
+    },
+  },
+});
+
+export const heroMedia = style({
+  objectFit: "cover",
+  objectPosition: "center",
+  position: "absolute",
+  zIndex: "-1",
+  width: "100%",
+  height: "100%",
+});
+
+export const backdrop = style({
+  width: "100%",
+  height: "100%",
+  background: "linear-gradient(0deg, rgba(0, 0, 0, 0.6) 25%, transparent 100%)",
+  position: "relative",
+  display: "flex",
+  overflow: "hidden",
+});
+
+export const description = style({
+  maxWidth: "700px",
+  fontSize: vars.size.bodyFontSize,
+  color: "#c0c1c7",
+  textAlign: "left",
+  fontFamily: "'Fira Sans', sans-serif",
+  lineHeight: "20px",
+});
+
+export const content = style({
+  width: "100%",
+  height: "100%",
+  padding: `${SPACING_UNIT * 4}px ${SPACING_UNIT * 3}px`,
+  gap: `${SPACING_UNIT * 2}px`,
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "flex-end",
+});