diff --git a/app/components/TimelineBanner/TimelineBanner.styles.ts b/app/components/TimelineBanner/TimelineBanner.styles.ts
new file mode 100644
index 0000000..e8c1994
--- /dev/null
+++ b/app/components/TimelineBanner/TimelineBanner.styles.ts
@@ -0,0 +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 heading = '2xl:whitespace-pre-line -mt-01em rs-mb-2 xl:max-w-1200';
+export const superhead = 'order-first';
+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/TimelineBanner/TimelineBanner.tsx b/app/components/TimelineBanner/TimelineBanner.tsx
new file mode 100644
index 0000000..57d3b5a
--- /dev/null
+++ b/app/components/TimelineBanner/TimelineBanner.tsx
@@ -0,0 +1,61 @@
+import { HTMLAttributes } from 'react';
+import { Container } from '../Container';
+import { Heading, Text } from '../Typography';
+import { FlexBox } from '../FlexBox';
+import * as styles from './TimelineBanner.styles';
+
+type TimelineBannerProps = HTMLAttributes<HTMLDivElement> & {
+  heading?: string;
+  superhead?: string;
+  // isSmallHeading?: boolean;
+  body?: React.ReactNode;
+  cta?: React.ReactNode;
+  imageSrc?: string;
+  // bgColor?: BgTextColorPairBlackWhiteType;
+};
+
+export const TimelineBanner = ({
+  heading,
+  superhead,
+  body,
+  cta,
+  imageSrc='https://placecats.com/neo/600/600',
+  ...props
+}: TimelineBannerProps) => (
+  <Container {...props} as="section" bgColor="red-gradient" width="site" py={9} className={styles.root}>
+    <FlexBox alignItems="start" justifyContent="between" gap className={styles.wrapper}>
+      {imageSrc && (
+        <div className={styles.imageWrapper}>
+          <img
+            alt=""
+            src={imageSrc}
+            className={styles.image}
+            width={360}
+            height={360}
+          />
+          </div>
+      )}
+      <Container className={styles.contentWrapper}>
+      {heading && (
+            <Heading
+              leading="none"
+              className={styles.heading}
+            >
+              {heading}
+            </Heading>
+        )}
+        {superhead && (
+            <Text font="serif" variant="overview" weight="normal" className={styles.superhead}>
+              {superhead}
+            </Text>)}
+          {body && (
+            <Text font="serif" variant="overview" weight="normal" className={styles.body}>
+              {body}
+            </Text>
+          )}
+          {cta}
+      </Container>
+
+    </FlexBox>
+  </Container>
+);
diff --git a/app/components/TimelineBanner/index.ts b/app/components/TimelineBanner/index.ts
new file mode 100644
index 0000000..abf6b1c
--- /dev/null
+++ b/app/components/TimelineBanner/index.ts
@@ -0,0 +1,2 @@
+export * from './TimelineBanner';
+export * from './TimelineBanner.styles';
diff --git a/app/page.tsx b/app/page.tsx
index 882cf13..4a98bad 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,9 @@
-import { Heading } from './components/Typography';
+import { TimelineBanner } from './components/TimelineBanner';
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-     <Heading>SOE Centennial</Heading>
+    <div>
+      <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/package-lock.json b/package-lock.json
index 1ed4ecc..87666da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@xpd/tailwind-3dtransforms": "^1.0.3",
         "decanter": "^7.3.0",
         "eslint": "^8",
         "eslint-config-next": "14.2.14",
@@ -727,6 +728,12 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@xpd/tailwind-3dtransforms": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@xpd/tailwind-3dtransforms/-/tailwind-3dtransforms-1.0.3.tgz",
+      "integrity": "sha512-LEKfNj57djZAucQ1itu/zinRkYnkhzNjAMhz8DkbguTyBcTDHF1R6CuXO536BFE/YGyHDCYd7tDF5ghSrViUgQ==",
+      "dev": true
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
diff --git a/package.json b/package.json
index ec705ee..0fe66b5 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@xpd/tailwind-3dtransforms": "^1.0.3",
     "decanter": "^7.3.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.14",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 847637e..3652d65 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,11 +2,11 @@
 
 import type { Config } from 'tailwindcss';
 
-const path = require('path');
+// const path = require('path');
 const decanter = require('decanter');
 
 // Path to custom Tailwind plugins for Directory
-const dir = path.resolve(__dirname, 'tailwind/plugins');
+// const dir = path.resolve(__dirname, 'tailwind/plugins');
 
 export default {
   presets: [
@@ -17,7 +17,15 @@ export default {
     './components/**/*.{js,jsx,ts,tsx}',
     './utilities/**/*.{js,jsx,ts,tsx}',
   ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'soe-red-gradient': 'linear-gradient(90deg, #400000 0.19%, #7A0000 52.26%, #400000 99.94%)',
+      },
+    },
+  },
   plugins: [
     require('@tailwindcss/container-queries'),
+    require("@xpd/tailwind-3dtransforms")
   ],
 } satisfies Config;
\ No newline at end of file