feat: add animation to hero background (#31)

Author: Fran McDade

app/components/Home/components/Section/components/SectionAnalytics/sectionAnalytics.styles.ts

@@ -1,4 +1,7 @@
-import { smokeLightest } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import {
+  smokeLightest,
+  smokeMain,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import styled from "@emotion/styled";
 import {
   Section,
@@ -8,6 +11,7 @@ import {
 
 export const StyledSection = styled(Section)`
   background-color: ${smokeLightest};
+  border-top: 1px solid ${smokeMain};
   overflow: hidden;
 `;
 

app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx

@@ -0,0 +1,66 @@
+import { Fragment } from "react";
+import {
+  FILL,
+  GRID_SIZE,
+} from "../../../../../../../Layout/components/Hero/common/constants";
+import {
+  ELEMENT_ID,
+  Height,
+} from "../../../../../../../Layout/components/Hero/common/entities";
+import {
+  getElementHref,
+  getFillUrl,
+  getViewBox,
+} from "../../../../../../../Layout/components/Hero/common/utils";
+import { BlueCircle } from "../../../../../../../Layout/components/Hero/components/Defs/BlueCircle/blueCircle";
+import { BlueRect } from "../../../../../../../Layout/components/Hero/components/Defs/BlueRect/blueRect";
+import { CoralPinkCircle } from "../../../../../../../Layout/components/Hero/components/Defs/CoralPinkCircle/coralPinkCircle";
+import { SmokeCircle } from "../../../../../../../Layout/components/Hero/components/Defs/SmokeCircle/smokeCircle";
+import { SmokeRect } from "../../../../../../../Layout/components/Hero/components/Defs/SmokeRect/smokeRect";
+import { YellowRect } from "../../../../../../../Layout/components/Hero/components/Defs/YellowRect/yellowRect";
+
+export interface HeroProps {
+  gridSize?: number;
+  height?: Height;
+}
+
+export const Hero = ({
+  gridSize = GRID_SIZE,
+  height = GRID_SIZE * 3,
+}: HeroProps): JSX.Element => {
+  return (
+    <svg
+      fill={FILL.NONE}
+      height={height}
+      preserveAspectRatio="xMinYMin meet"
+      viewBox={getViewBox(gridSize, height)}
+      width="100vw"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <SmokeRect gridSize={gridSize} />
+      <SmokeCircle gridSize={gridSize} />
+      <BlueRect gridSize={gridSize} />
+      <YellowRect gridSize={gridSize} />
+      <BlueCircle gridSize={gridSize} />
+      <CoralPinkCircle gridSize={gridSize} />
+      {[
+        ELEMENT_ID.PATTERN_SMOKE_RECT,
+        ELEMENT_ID.PATTERN_SMOKE_CIRCLE,
+        ELEMENT_ID.PATTERN_BLUE_RECT,
+        ELEMENT_ID.PATTERN_YELLOW_RECT,
+      ].map((elementId) => (
+        <Fragment key={elementId}>
+          <rect
+            fill={getFillUrl(elementId)}
+            height={height}
+            width="100vw"
+            x={0}
+            y={0}
+          />
+        </Fragment>
+      ))}
+      <use href={getElementHref(ELEMENT_ID.GROUP_BLUE_CIRCLE)} x={0} />
+      <use href={getElementHref(ELEMENT_ID.GROUP_CORAL_PINK_CIRLCLE)} />
+    </svg>
+  );
+};

app/components/Home/components/Section/components/SectionBranding/sectionBranding.styles.ts

@@ -0,0 +1,8 @@
+import { smokeLightest } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import styled from "@emotion/styled";
+
+export const Section = styled.section`
+  background-color: ${smokeLightest};
+  position: fixed;
+  z-index: -1;
+`;

app/components/Home/components/Section/components/SectionBranding/sectionBranding.tsx

@@ -0,0 +1,10 @@
+import { Hero } from "./components/Hero/hero";
+import { Section } from "./sectionBranding.styles";
+
+export const SectionBranding = (): JSX.Element => {
+  return (
+    <Section>
+      <Hero />
+    </Section>
+  );
+};

app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts

@@ -1,5 +1,8 @@
 import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
-import { white } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import {
+  smokeMain,
+  white,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import styled from "@emotion/styled";
 import {
   Section,
@@ -12,6 +15,7 @@ import {
 
 export const StyledSection = styled(Section)`
   background-color: ${white};
+  border-top: 1px solid ${smokeMain};
 `;
 
 export const SectionLayout = styled(DefaultLayout)`

app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts

@@ -2,22 +2,14 @@ import {
   mediaDesktopSmallUp,
   mediaTabletUp,
 } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
-import {
-  inkLight,
-  smokeLightest,
-} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
 import styled from "@emotion/styled";
 import {
-  Section,
   sectionGrid,
   SectionLayout as DefaultLayout,
 } from "../../section.styles";
 
-export const StyledSection = styled(Section)`
-  background: url("/hero/hero.svg") 0 0 repeat, ${smokeLightest};
-`;
-
 export const SectionLayout = styled(DefaultLayout)`
   ${sectionGrid};
   align-content: flex-end;

app/components/Home/components/Section/components/SectionHero/sectionHero.tsx

@@ -1,10 +1,10 @@
 import { Button } from "@mui/material";
 import { ROUTES } from "../../../../../../../routes/constants";
+import { Section } from "../../section.styles";
 import {
   Head,
   Headline,
   SectionLayout,
-  StyledSection as Section,
   Subhead,
   SubHeadline,
   SubHeadlinePositioner,

app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts

@@ -1,4 +1,7 @@
-import { white } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import {
+  smokeMain,
+  white,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
 import { textBodySmall500 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
 import styled from "@emotion/styled";
 import { Chip as MChip } from "@mui/material";
@@ -10,6 +13,7 @@ import {
 
 export const StyledSection = styled(Section)`
   background-color: ${white};
+  border-top: 1px solid ${smokeMain};
 `;
 
 export const SectionLayout = styled(DefaultLayout)`

app/components/Layout/components/AppLayout/appLayout.styles.ts

@@ -0,0 +1,7 @@
+import { Footer } from "@databiosphere/findable-ui/lib/components/Layout/components/Footer/footer";
+import { smokeLightest } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import styled from "@emotion/styled";
+
+export const StyledFooter = styled(Footer)`
+  background-color: ${smokeLightest};
+`;