feat(landing preview): add hero

AlexGarrixen · May 11, 2024 · 0b431de · 0b431de
1 parent 3bad71c
commit 0b431de
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 0 deletions.
diff --git a/public/photo-hero.webp b/public/photo-hero.webp
diff --git a/src/components/samples-preview/landing-page/hero.stories.tsx b/src/components/samples-preview/landing-page/hero.stories.tsx
@@ -0,0 +1,19 @@
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { bgVar, fgVar } from "../utils";
+
+import { Hero } from "./hero";
+
+export default {
+  title: "Landing Page / Hero",
+} satisfies Meta<typeof Hero>;
+
+type Story = StoryObj<typeof Hero>;
+
+export const Preview: Story = {
+  render: () => (
+    <div style={{ [bgVar as string]: "38 24 147", [fgVar as string]: "219 255 94" }}>
+      <Hero />
+    </div>
+  ),
+};
diff --git a/src/components/samples-preview/landing-page/hero.tsx b/src/components/samples-preview/landing-page/hero.tsx
@@ -0,0 +1,117 @@
+import Image from "next/image";
+import { css, cx } from "@root/styled-system/css";
+import profileImg from "@root/public/photo-hero.webp";
+
+import { applyStyle, cssBgVar, bgVar } from "../utils";
+
+const classes = {
+  root: css({ overflow: "hidden", position: "relative" }),
+
+  brandSvg: css({ maxW: "100%" }),
+
+  imageContainer: css({
+    h: { base: "250px", sm: "300px", md: "500px" },
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+  }),
+
+  photo: css({
+    position: "absolute",
+    top: {
+      base: "-22%",
+      sm: "-30%",
+    },
+    maxW: {
+      base: 375,
+      sm: 500,
+      md: 800,
+    },
+  }),
+
+  about: css({
+    textStyle: { base: "body-base", sm: "body-lg" },
+    position: "relative",
+    zIndex: 1,
+    pb: "8",
+  }),
+
+  aboutSubheading: css({
+    float: "left",
+    mr: "8",
+    fontWeight: 500,
+  }),
+
+  overlay: css({
+    position: "absolute",
+    bottom: 0,
+    insetX: 0,
+    pointerEvents: "none",
+  }),
+
+  overlay1: css({ h: "320px", filter: "blur(60px)", bottom: { base: -20, sm: -70, md: -40 } }),
+
+  overlay2: css({ h: "360px", filter: "80px", bottom: { base: -80, sm: -140, md: -150 } }),
+};
+
+export function Hero() {
+  return (
+    <section className={classes.root} style={{ ...applyStyle("color"), ...applyStyle("bg") }}>
+      <div>
+        <svg
+          className={classes.brandSvg}
+          fill="none"
+          height="auto"
+          viewBox="0 0 1600 143"
+          width="1600"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1462.67 36.2326L1494.64 4.86682L1530.76 40.4577L1567.23 4.48939L1600 36.3201L1563.99 72.208L1599.98 107.792L1567.52 139.883L1531.19 104.465L1494.68 139.809L1462.5 108.141L1498.91 71.911L1462.67 36.2326ZM1411.68 2.90281L1450.61 2.82515V140.059L1411.68 139.954V2.90281ZM1273.47 2.84951C1292.77 1.93567 1312.12 2.7574 1331.47 2.43323C1346.48 2.56416 1362.49 3.77694 1375.51 11.8588C1388.02 19.4602 1394.81 34.3841 1393.68 48.6307C1394.29 59.622 1389.63 70.645 1381.44 78.1164C1378.32 80.9058 1374.35 82.5636 1371.27 85.3855C1371.46 88.4936 1372.97 91.3155 1374.31 94.0805C1379.31 103.771 1383.37 113.891 1387.81 123.827C1390.11 129.297 1393.29 134.416 1394.69 140.229C1384.25 140.698 1373.8 140.268 1363.35 140.501C1360.39 140.398 1357.29 140.79 1354.47 139.798C1350.4 131.075 1347.32 121.933 1344.14 112.871C1341.47 105.912 1338.62 99.0335 1336.29 91.9675C1328.22 91.1033 1320.12 91.2514 1312.03 91.9286C1312.2 108.042 1312.42 124.169 1311.94 140.278C1299.12 140.385 1286.27 140.842 1273.47 140.031C1273.66 94.3026 1273.65 48.5783 1273.47 2.84951ZM1312.46 32.4896C1312.25 43.1992 1312.18 53.9043 1312.49 64.5994C1321.51 64.8071 1330.53 65.0717 1339.52 64.5714C1345.53 64.2716 1351.47 60.7336 1354.02 55.3156C1355.4 51.0472 1355.38 46.2784 1354.08 41.9964C1351.9 35.5336 1344.65 32.3596 1338.14 32.3207C1329.58 32.1898 1321.02 32.2043 1312.46 32.4896ZM1135.34 2.98046C1155.52 1.79121 1175.76 2.8107 1195.95 2.44409C1214.08 2.19666 1234.02 5.86556 1246.72 19.6571C1258.77 34.7227 1259.74 57.9397 1247.8 73.3856C1244.23 78.4649 1238.95 82.0318 1233.37 84.7083C1234.44 91.823 1238.65 97.9218 1241.33 104.5C1246.48 116.437 1252.55 128.007 1257.13 140.172C1245.58 140.751 1234.02 140.268 1222.48 140.476C1220.51 140.229 1218.12 140.853 1216.48 139.523C1214.79 136.977 1213.94 134.025 1212.93 131.192C1208.48 117.94 1202.71 105.168 1198.25 91.9431C1190.44 91.1322 1182.57 91.2234 1174.76 91.7842C1174.01 107.883 1174.64 124.021 1174.46 140.148C1161.44 140.515 1148.36 140.881 1135.34 139.915C1135.6 94.2782 1135.59 48.6307 1135.34 2.98046ZM1174.86 32.0598C1174.05 42.8569 1174.42 53.7209 1174.61 64.5461C1183.07 64.8992 1191.53 64.9235 1199.98 64.705C1204.86 64.3519 1210.31 63.3713 1213.71 59.5977C1217.43 54.2853 1217.5 47.1426 1215.71 41.1349C1213.91 35.0758 1206.98 32.6729 1201.18 32.2431C1192.4 31.9288 1183.62 32.3099 1174.86 32.0598ZM1034.22 3.03282L1076.22 2.75741L1125.54 140.085L1085.57 140.331L1077.54 120.158L1033.93 120.067L1026.05 140.359L985.436 140.239L1034.22 3.03282ZM1054.51 47.7277L1041.9 91.6542L1068.91 91.823L1054.51 47.7277ZM910.198 0.902692C933.27 -2.47633 957.804 3.83017 975.675 18.7152C971.494 28.0911 962.175 34.1475 957.398 43.266C952.531 42.5852 949.036 38.9027 944.738 36.9414C932.764 30.885 917.621 29.9675 905.53 36.2009C896.139 41.8799 889.402 51.5555 887.452 62.2326C885.673 74.9911 886.865 89.2377 895.886 99.3332C903.489 109.753 917.865 111.855 929.974 110.56C934.363 109.999 938.805 108.863 942.517 106.409C943.808 99.5554 942.643 92.4651 943.113 85.5309C934.245 85.4776 925.378 85.6718 916.501 85.4108C916.095 77.5132 916.059 69.6011 916.519 61.6854C936.728 61.3612 956.956 61.3467 977.165 61.6854C977.698 77.3434 977.255 93.0122 977.391 108.667C977.264 114.272 977.815 119.912 977.102 125.474C968.785 132.941 957.741 136.455 947.221 139.77C930.227 144.067 912.022 143.884 895.172 139.079C885.303 135.305 875.523 130.303 868.308 122.493C849.959 105.559 844.153 78.5326 849.246 54.8704C852.93 42.2284 858.213 29.3824 868.254 20.282C879.406 9.28704 894.558 2.58859 910.198 0.902692Z"
+            fill="currentColor"
+          />
+          <path
+            d="M0 0.158523L39.9189 0.362613L77.397 52.6418L116.124 0.425829L155.412 0.214519L155.454 141.837L118.223 141.862L117.99 55.1846L76.2159 106.306L37.7923 55.2234L37.3408 141.809L0 141.891V0.158523ZM499.581 2.37722L543.13 2.41872L543.06 50.7292L592.866 50.6525L593.119 94.1726L543.687 94.5076L543.553 142.74L499.172 142.86L498.968 94.522L449.571 94.1581L449.599 51.1356L499.542 50.8394L499.581 2.37722ZM646.089 0.348173L683.708 0.482708L738.267 79.7914L738.484 0.0808662L775.76 0.277736L775.742 141.771L737.418 142.716L688.476 68.6908L683.97 63.876L683.627 142.32H646.125L646.089 0.348173ZM599.359 0.306616L639.127 0.14772L639.145 141.904L599.296 141.732L599.359 0.306616ZM321.147 0.0627886C342.357 -0.0672433 363.581 0.0519888 384.805 0.00954778C400.452 0.267806 417.256 2.58126 429.818 12.5495C439.923 19.8827 445.232 32.4083 444.756 44.5952C445.278 53.8798 443.489 63.4453 438.11 71.2481C434.252 77.5546 427.895 81.8086 421.373 85.1705C426.647 97.9254 432.605 110.384 438.04 123.082C440.897 129.22 444.04 135.259 445.811 141.823C434.156 142.335 422.487 141.876 410.833 142.134C408.237 141.862 404.092 142.899 403.337 139.495C397.49 123.283 390.844 107.344 385.299 91.0509C377.172 91.2658 369.031 91.1845 360.904 91.171C360.396 108.084 361.137 125.008 360.576 141.904C347.436 142.162 334.3 142.148 321.175 141.904C320.805 94.6312 320.861 47.3402 321.147 0.0627886ZM361.055 30.8181C360.752 41.8374 360.822 52.8711 361.07 63.9004C369.895 64.155 378.738 64.2498 387.577 64.0097C393.588 63.82 400.537 61.8686 403.309 56.0705C407.33 47.7033 404.914 34.8852 394.716 32.1374C383.775 29.3254 372.244 31.0501 361.055 30.8181ZM215.348 0.577505L259.634 0.320174L310.689 142.239L267.87 142.095L261.585 120.744L215.249 120.567L207.634 141.743L166.026 141.795L215.348 0.577505ZM238.247 46.8562L224.188 91.9539L252.304 91.9782L238.247 46.8562Z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div className={classes.imageContainer}>
+        <Image
+          alt="profile"
+          className={classes.photo}
+          height={1102}
+          loading="eager"
+          src={profileImg}
+          style={{
+            maskImage: `linear-gradient(${cssBgVar} 40%, transparent)`,
+          }}
+          width={818}
+        />
+      </div>
+      <div
+        className={classes.about}
+        style={{
+          backgroundImage: `linear-gradient(rgb(var(${bgVar}) / 0), ${cssBgVar})`,
+        }}
+      >
+        <span className={classes.aboutSubheading}>About</span>
+        <p>
+          I&apos;m Martin Garrix, born on May 14th 1996 in Amstelveen. Since my debut with
+          &quot;Animals&quot; in 2013, I have made my mark in electronic music. Recognized for my
+          energy on stage and outstanding collaborations, reaching the title of #1 DJ according to
+          DJ Mag Top 100. My passion for innovation and connecting with the audience defines my path
+          in the music scene.
+        </p>
+      </div>
+      <div
+        className={cx(classes.overlay, classes.overlay1)}
+        style={{ ...applyStyle("bg", { alpha: "0.46" }) }}
+      />
+      <div
+        className={cx(classes.overlay, classes.overlay2)}
+        style={{ ...applyStyle("bg", { alpha: "0.9" }), filter: "blur(32px)" }}
+      />
+    </section>
+  );
+}