From d903e294908d21680ea11f12b0e805f2c03405dc Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Tue, 1 Oct 2024 18:48:34 -0700
Subject: [PATCH 1/3] SOEOPSFY24-203 | Explore animation for trapezoid images
 for Timeline Teasers

---
 .../TimelineBanner/TimelineBanner.styles.ts   |  8 +++
 .../TimelineBanner/TimelineBanner.tsx         | 61 +++++++++++++++++++
 app/components/TimelineBanner/index.ts        |  2 +
 app/page.tsx                                  |  4 +-
 package-lock.json                             |  7 +++
 package.json                                  |  1 +
 tailwind.config.ts                            | 12 +++-
 7 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 app/components/TimelineBanner/TimelineBanner.styles.ts
 create mode 100644 app/components/TimelineBanner/TimelineBanner.tsx
 create mode 100644 app/components/TimelineBanner/index.ts

diff --git a/app/components/TimelineBanner/TimelineBanner.styles.ts b/app/components/TimelineBanner/TimelineBanner.styles.ts
new file mode 100644
index 0000000..c261413
--- /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-400 hocus:perspective-100 ease-in duration-300';
+export const image = 'object-cover w-full h-full transform rotate-y-30 -rotate-x-30 group-hocus:rotate-x-0 group-hocus:rotate-y-0 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..18fc183
--- /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" 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 17c2632..4a98bad 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,8 +2,8 @@ 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)]">
-      <TimelineBanner />
+    <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 dc886c3..b693bce 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,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

From 3d9bcb406ce4e352dc2d00a8fdac22c512f92084 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Wed, 2 Oct 2024 11:06:44 -0700
Subject: [PATCH 2/3] test prespective

---
 app/components/TimelineBanner/TimelineBanner.styles.ts | 4 ++--
 app/components/TimelineBanner/TimelineBanner.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/TimelineBanner/TimelineBanner.styles.ts b/app/components/TimelineBanner/TimelineBanner.styles.ts
index c261413..bebb13f 100644
--- a/app/components/TimelineBanner/TimelineBanner.styles.ts
+++ b/app/components/TimelineBanner/TimelineBanner.styles.ts
@@ -4,5 +4,5 @@ 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-400 hocus:perspective-100 ease-in duration-300';
-export const image = 'object-cover w-full h-full transform rotate-y-30 -rotate-x-30 group-hocus:rotate-x-0 group-hocus:rotate-y-0 ease-in duration-300 rounded-[30px]';
+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
index 18fc183..e507f97 100644
--- a/app/components/TimelineBanner/TimelineBanner.tsx
+++ b/app/components/TimelineBanner/TimelineBanner.tsx
@@ -23,7 +23,7 @@ export const TimelineBanner = ({
   ...props
 }: TimelineBannerProps) => (
   <Container {...props} as="section" bgColor="red-gradient" width="site" py={9} className={styles.root}>
-    <FlexBox alignItems="start" justifyContent="between" className={styles.wrapper}>
+    <FlexBox alignItems="start" justifyContent="between" gap className={styles.wrapper}>
       {imageSrc && (
         <div className={styles.imageWrapper}>
           <img

From 6995dfa1b90be644f4d128f27f8c198a504437a9 Mon Sep 17 00:00:00 2001
From: rebeccahongsf <rebeccahongsf@gmail.com>
Date: Wed, 2 Oct 2024 16:15:46 -0700
Subject: [PATCH 3/3] fixup lint

---
 app/components/TimelineBanner/TimelineBanner.styles.ts | 2 +-
 app/components/TimelineBanner/TimelineBanner.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/TimelineBanner/TimelineBanner.styles.ts b/app/components/TimelineBanner/TimelineBanner.styles.ts
index bebb13f..e8c1994 100644
--- a/app/components/TimelineBanner/TimelineBanner.styles.ts
+++ b/app/components/TimelineBanner/TimelineBanner.styles.ts
@@ -2,7 +2,7 @@ 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 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
index e507f97..57d3b5a 100644
--- a/app/components/TimelineBanner/TimelineBanner.tsx
+++ b/app/components/TimelineBanner/TimelineBanner.tsx
@@ -19,7 +19,7 @@ export const TimelineBanner = ({
   superhead,
   body,
   cta,
-  imageSrc="https://placecats.com/neo/600/600",
+  imageSrc='https://placecats.com/neo/600/600',
   ...props
 }: TimelineBannerProps) => (
   <Container {...props} as="section" bgColor="red-gradient" width="site" py={9} className={styles.root}>