diff --git a/app/components/Container/Container.styles.ts b/app/components/Container/Container.styles.ts
index c41d13c..d7b0425 100644
--- a/app/components/Container/Container.styles.ts
+++ b/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',
diff --git a/app/components/FeatureHero/FeatureHero.styles.ts b/app/components/FeatureHero/FeatureHero.styles.ts
new file mode 100644
index 0000000..d2ed356
--- /dev/null
+++ b/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';
\ No newline at end of file
diff --git a/app/components/FeatureHero/FeatureHero.tsx b/app/components/FeatureHero/FeatureHero.tsx
new file mode 100644
index 0000000..7ce4f87
--- /dev/null
+++ b/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>
+)};
diff --git a/app/components/FeatureHero/index.ts b/app/components/FeatureHero/index.ts
new file mode 100644
index 0000000..d51221b
--- /dev/null
+++ b/app/components/FeatureHero/index.ts
@@ -0,0 +1,2 @@
+export * from './FeatureHero';
+export * from './FeatureHero.styles';
diff --git a/app/components/ShapeAnimation/ShapeAnimation.tsx b/app/components/ShapeAnimation/ShapeAnimation.tsx
index 66e598e..8396e05 100644
--- a/app/components/ShapeAnimation/ShapeAnimation.tsx
+++ b/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>
diff --git a/app/components/TimelineBanner/TimelineBanner.styles.ts b/app/components/TimelineBanner/TimelineBanner.styles.ts
index e8c1994..fdd35dc 100644
--- a/app/components/TimelineBanner/TimelineBanner.styles.ts
+++ b/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]';
diff --git a/app/components/Typography/Text.tsx b/app/components/Typography/Text.tsx
index b6945e0..64e7951 100644
--- a/app/components/Typography/Text.tsx
+++ b/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';
 
diff --git a/app/components/HeroIcon/HeroIcon.styles.tsx b/app/components/images/HeroIcon/HeroIcon.styles.tsx
similarity index 100%
rename from app/components/HeroIcon/HeroIcon.styles.tsx
rename to app/components/images/HeroIcon/HeroIcon.styles.tsx
diff --git a/app/components/HeroIcon/HeroIcon.tsx b/app/components/images/HeroIcon/HeroIcon.tsx
similarity index 100%
rename from app/components/HeroIcon/HeroIcon.tsx
rename to app/components/images/HeroIcon/HeroIcon.tsx
diff --git a/app/components/HeroIcon/index.ts b/app/components/images/HeroIcon/index.ts
similarity index 100%
rename from app/components/HeroIcon/index.ts
rename to app/components/images/HeroIcon/index.ts
diff --git a/app/components/images/shape-a.tsx b/app/components/images/shape-a.tsx
new file mode 100644
index 0000000..21d0c39
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 40605a4..a07b815 100644
--- a/app/page.tsx
+++ b/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>
diff --git a/next.config.mjs b/next.config.mjs
index 7ad85bf..cdaf77c 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -3,6 +3,7 @@ const nextConfig = {
   basePath: '/soe-centennial-nextjs',
   output: 'export', 
   reactStrictMode: true,
+  images: { unoptimized: true },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index a5e1854..ab8bbe8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,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"
@@ -2235,9 +2235,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.9.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.9.0.tgz",
-      "integrity": "sha512-nCfGxvsQecVLjjYDu35G2F5ls+ArE3FBfhxV0RSiisMaUKqteq5DMBFNRKwMyVj+VqKTNhawt+BV480YCHKFlQ==",
+      "version": "11.11.9",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.9.tgz",
+      "integrity": "sha512-XpdZseuCrZehdHGuW22zZt3SF5g6AHJHJi7JwQIigOznW4Jg1n0oGPMJQheMaKLC+0rp5gxUKMRYI6ytd3q4RQ==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
diff --git a/package.json b/package.json
index 739b1b3..9e7f5d3 100644
--- a/package.json
+++ b/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"
diff --git a/public/assets/images/Hawa-Racine-Thiam.jpg b/public/assets/images/Hawa-Racine-Thiam.jpg
new file mode 100644
index 0000000..926583c
Binary files /dev/null and b/public/assets/images/Hawa-Racine-Thiam.jpg differ
diff --git a/public/assets/images/Hawa-Racine-Thiam_silhouette.png b/public/assets/images/Hawa-Racine-Thiam_silhouette.png
new file mode 100644
index 0000000..8b0b2b5
Binary files /dev/null and b/public/assets/images/Hawa-Racine-Thiam_silhouette.png differ
diff --git a/public/assets/images/centennial-shape-a.svg b/public/assets/images/centennial-shape-a.svg
new file mode 100644
index 0000000..0351287
--- /dev/null
+++ b/public/assets/images/centennial-shape-a.svg
@@ -0,0 +1,3 @@
+<svg width="1106" height="1678" 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>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3652d65..945806a 100644
--- a/tailwind.config.ts
+++ b/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;
\ No newline at end of file