SOEOPSFY24-296 | explore framer motion hero multi-overlay (#4)

* SOEOPSFY24-296 | explore framer motion hero multi-overlay

* fixup formatting

* adjust hero height

* tweak feature

app/components/Container/Container.styles.ts

@@ -5,7 +5,7 @@ export const widths = {
 };
 
 export const bgColors = {
-  black: 'bg--black text-white',
+  black: 'bg-black text-white',
   white: 'bg-white text-black',
   'fog-light': 'bg-fog-light text-black',
   'red-gradient': 'bg-soe-red-gradient text-white',

app/components/FeatureHero/FeatureHero.styles.ts

@@ -0,0 +1,4 @@
+export const root = 'h-full max-h-[1200px] relative overflow-hidden';
+export const wrapper = 'mr-0 au-ml-auto flex-col lg:flex-row';
+export const gradient = 'absolute top-0 left-0 bg-feature-gradient-rl bg-feature-gradient-bt w-full h-full z-30';
+export const contentWrapper = 'lg:rs-pr-9 ml-0 *:text-white z-50';

app/components/FeatureHero/FeatureHero.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { HTMLAttributes } from 'react';
+import { Container } from '../Container';
+import { FlexBox } from '../FlexBox';
+// import * as styles from './FeatureHero.styles';
+import Image from 'next/image';
+import ShapeA from '../images/shape-a';
+import { motion, useScroll, useTransform } from 'framer-motion';
+
+type FeatureHeroProps = HTMLAttributes<HTMLDivElement> & {
+  children: React.ReactNode;
+  imageSrc?: string;
+};
+
+export const FeatureHero = ({
+  children,
+  ...props
+}: FeatureHeroProps) => {
+  const { scrollYProgress } = useScroll();
+  const opacity = useTransform(scrollYProgress, [0, 0.05], [1, 0]);
+
+
+  return (
+    <FlexBox {...props} as="section" alignItems="start" justifyContent="between" className="relative flex-col bg-soe-black h-auto w-full aspect-[16/9]">
+      <Container width="full" className='order-last flex flex-col rs-p-9 *:text-white z-50 lg:max-w-[50%] *:font-dm-sans bg-soe-black lg:bg-transparent'>
+        {children}
+      </Container>
+      <div className="relative w-full bg-cool-grey lg:absolute lg:top-0 lg:left-0 h-auto z-10">
+        <Image className="absolute top-0 left-0 lg:left-[300px] z-0 w-full h-auto"
+          alt=""
+          src={`soe-centennial-nextjs/assets/images/Hawa-Racine-Thiam.jpg`}
+          width={0}
+          height={0}
+          sizes="100vw" />
+        <motion.div className="absolute w-full h-full top-0 left-0 z-10" style={{ opacity }} >
+          <div className="w-full h-full bg-plum-dark absolute top-0 left-0 z-10" />
+          <ShapeA className="absolute bottom-10 left-10 lg:left-[300px] z-20 *:stroke-plum" height={1200} />
+        </motion.div>
+        <div className='absolute top-0 left-0 bg-transparent lg:bg-feature-gradient-rl bg-feature-gradient-bt w-full h-full z-50' />
+        <Image className="absolute top-0 left-0 lg:left-[300px] z-20 w-full h-auto"
+          alt=""
+          src={`soe-centennial-nextjs/assets/images/Hawa-Racine-Thiam_silhouette.png`}
+          width={0}
+          height={0}
+          sizes="100vw" />
+        <div className='absolute top-0 left-0 bg-feature-gradient-bt w-full h-full z-50' />
+      </div>
+    </FlexBox>
+)};

app/components/FeatureHero/index.ts

@@ -0,0 +1,2 @@
+export * from './FeatureHero';
+export * from './FeatureHero.styles';

app/components/ShapeAnimation/ShapeAnimation.tsx

@@ -50,8 +50,8 @@ export const ShapeAnimation = () => {
   }, [pathIndex, currentPath]);
 
   return (
-    <div>
-      <motion.svg width="500px" height="100%" viewBox="0 0 1820 1700">
+    <div className="cc rs-py-2">
+      <motion.svg width="100%" height="500px" viewBox="0 0 1820 1700">
         <motion.path d={currentPath} fill="none" stroke="black" strokeWidth="3" />
       </motion.svg>
     </div>

app/components/TimelineBanner/TimelineBanner.styles.ts

@@ -1,8 +1,8 @@
 export const root = 'overflow-hidden';
 export const wrapper = 'mr-0 au-ml-auto flex-col lg:flex-row';
-export const contentWrapper = 'lg:rs-pr-9 ml-0';
+export const contentWrapper = 'lg:rs-pr-9 ml-0 flex flex-col';
 export const heading = '2xl:whitespace-pre-line -mt-01em rs-mb-2 xl:max-w-1200';
-export const superhead = 'order-first';
+export const superhead = 'order-first mb-38';
 export const body = 'max-w-[50ch] rs-mb-3 *:*:leading-snug';
 export const imageWrapper = 'group relative w-300 h-300 perspective-600';
 export const image = 'object-cover w-full h-full transform rotate-y-30 group-hocus:-rotate-y-30 skew-y-12  ease-in duration-300 rounded-[30px]';

app/components/Typography/Text.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, TimeHTMLAttributes } from 'react';
 import { cnb } from 'cnbuilder';
-import { HeroIcon, type HeroIconProps, type IconType } from '../HeroIcon';
+import { HeroIcon, type HeroIconProps, type IconType } from '../images/HeroIcon';
 import * as styles from './typography.styles';
 import * as types from './typography.types';
 

app/components/images/shape-a.tsx

@@ -0,0 +1,16 @@
+import { HtmlHTMLAttributes } from 'react';
+
+type Props = HtmlHTMLAttributes<SVGSVGElement> & {
+  height?: number
+  width?: number | string
+}
+
+const ShapeA = ({ height = 900, width = '100%', ...props }: Props) => {
+  return (
+    <svg {...props} width={width} height={height} viewBox="0 0 1106 1678" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.00037 408.703C2.00037 241.336 0.326884 187.778 222.899 187.778C445.471 187.778 699.839 187.778 781.839 187.778C929.104 187.778 930.778 2 781.839 2C632.9 2 408.654 2 335.021 2C130.857 2 149.266 355.145 335.021 355.145C520.777 355.145 833.716 355.145 907.349 355.145C1133.27 355.145 1149.15 505.985 1032.86 674.817C929.104 825.448 509.063 1392.82 432.083 1494.92C384.638 1557.84 326.401 1636.94 264.735 1660.61C135.222 1710.32 2.00037 1635.51 2.00037 1494.92C2.00037 1122.69 2.00037 615.681 2.00037 408.703Z" stroke="#F83535" stroke-width="3" />
+    </svg>
+  );
+};
+
+export default ShapeA;

app/page.tsx

@@ -1,11 +1,30 @@
-import { Heading } from '@/components/Typography';
+import { Heading, Text } from '@/components/Typography';
 import { ShapeAnimation } from '@/components/ShapeAnimation';
 import { TimelineBanner } from '@/components/TimelineBanner';
+import { FeatureHero } from './components/FeatureHero';
 
 export default function Home() {
   return (
     <div>
       <Heading>SOE Centennial</Heading>
+      <FeatureHero>
+        <Heading
+          as="h1"
+          leading="none"
+          className="2xl:whitespace-pre-line font-normal -mt-01em rs-mb-8 xl:max-w-1200"
+        >
+          Exploring the reengineering of immune cells
+        </Heading>
+      <Text variant="overview" weight="normal" className="order-first mb-38 underline underline-offset-[6px] decoration-2 decoration-digital-red-xlight">
+        Change Makers
+      </Text>
+      <Text variant="overview" weight="normal" className="max-w-[50ch] rs-mb-3 *:*:leading-snug">
+        The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating.”
+      </Text>
+      <Text variant="overview" weight="normal" className="max-w-[50ch] rs-mb-3 *:*:leading-snug">
+        by Jess Alvarenga
+      </Text>
+      </FeatureHero>
       <ShapeAnimation />
       <TimelineBanner heading='Headline lorem ipsum dolar sit' superhead='1983' body="Cras felis tortor, bibendum quis porttitor at, ullamcorper eu diam. Aenean iaculis efficitur quam, quis dignissim lacus. Cras nec dui id mi blandit lobortis eget in enim." />
     </div>

next.config.mjs

@@ -3,6 +3,7 @@ const nextConfig = {
   basePath: '/soe-centennial-nextjs',
   output: 'export', 
   reactStrictMode: true,
+  images: { unoptimized: true },
 };
 
 export default nextConfig;

package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "lint:fix": "eslint \"{components,utilities}/**/*.{ts,tsx,js,jsx}\" --quiet --fix",
+    "lint:fix": "eslint \"app/{components,utilities}/**/*.{ts,tsx,js,jsx}\" --quiet --fix",
     "typecheck": "tsc --noEmit",
     "tsc": "tsc"
   },
@@ -16,7 +16,7 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "cnbuilder": "^3.1.0",
     "flubber": "^0.4.2",
-    "framer-motion": "^11.9.0",
+    "framer-motion": "^11.11.9",
     "next": "14.2.14",
     "react": "^18",
     "react-dom": "^18"

tailwind.config.ts

@@ -19,13 +19,22 @@ export default {
   ],
   theme: {
     extend: {
+      colors: {
+        'soe-black': '#181818',
+      },
       backgroundImage: {
         'soe-red-gradient': 'linear-gradient(90deg, #400000 0.19%, #7A0000 52.26%, #400000 99.94%)',
+        'feature-gradient-bt': 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 75.5%, #181818 100%)',
+        'feature-gradient-rl': 'linear-gradient(270deg, rgba(23, 23, 26, 0.00) 0.11%, #181818 99.89%)',
+      },
+      fontFamily: {
+        'dm-sans': ['var(--font-dm-sans)', 'sans-serif'],
+        stanford: ['var(--font-stanford)', 'sans-serif'],
       },
     },
   },
   plugins: [
     require('@tailwindcss/container-queries'),
-    require("@xpd/tailwind-3dtransforms")
+    require('@xpd/tailwind-3dtransforms'),
   ],
 } satisfies Config;