SOEOPSFY24-310 | prototype gradient banner

app/components/Animate/AnimateInView.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { useRef } from 'react';
-import { useInView, m, useReducedMotion } from 'framer-motion';
-import { AnimationMap, type AnimationType } from './AnimationMap';
+import { useRef } from "react";
+import { useInView, m, useReducedMotion } from "framer-motion";
+import { AnimationMap, type AnimationType } from "./AnimationMap";
 
 type AnimateInViewProps = {
   animation?: AnimationType;
@@ -14,7 +14,7 @@ type AnimateInViewProps = {
 };
 
 export const AnimateInView = ({
-  animation = 'zoomIn',
+  animation = "zoomIn",
   once = true,
   duration = 0.6,
   delay,
@@ -27,11 +27,13 @@ export const AnimateInView = ({
   const isInView = useInView(ref, { once });
 
   // Don't animate if the user has "reduced motion" enabled
-  if (animation === 'none') {
+  if (animation === "none") {
     return <div>{children}</div>;
   }
 
-  const beforeAnimationState = prefersReducedMotion ? 'hiddenReduced' : 'hidden';
+  const beforeAnimationState = prefersReducedMotion
+    ? "hiddenReduced"
+    : "hidden";
 
   return (
     <m.div
@@ -40,10 +42,10 @@ export const AnimateInView = ({
       transition={{
         delay,
         duration,
-        ease: 'easeOut',
+        ease: "easeOut",
       }}
       initial="hidden"
-      animate={isInView ? 'visible' : beforeAnimationState}
+      animate={isInView ? "visible" : beforeAnimationState}
       className={className}
       {...props}
     >

app/components/Animate/AnimationMap.ts

@@ -28,31 +28,31 @@ export const AnimationMap = {
     hidden: {
       opacity: 0.3,
       scale: 0.6,
-      filter: 'blur(20px)',
+      filter: "blur(20px)",
     },
     hiddenReduced: {
       opacity: 0.3,
       scale: 0.8,
-      filter: 'blur(10px)',
+      filter: "blur(10px)",
     },
     visible: {
       opacity: 1,
       scale: 1,
-      filter: 'blur(0px)',
+      filter: "blur(0px)",
     },
   },
   sharpen: {
     hidden: {
       opacity: 0.3,
-      filter: 'blur(20px)',
+      filter: "blur(20px)",
     },
     hiddenReduced: {
       opacity: 0.3,
-      filter: 'blur(10px)',
+      filter: "blur(10px)",
     },
     visible: {
       opacity: 1,
-      filter: 'blur(0px)',
+      filter: "blur(0px)",
     },
   },
   slideInFromLeft: {
@@ -118,12 +118,12 @@ export const AnimationMap = {
     },
     hiddenReduced: {
       opacity: 1,
-      height: 'auto',
+      height: "auto",
     },
     visible: {
       opacity: 1,
-      height: 'auto',
+      height: "auto",
     },
   },
 };
-export type AnimationType = keyof typeof AnimationMap | 'none';
+export type AnimationType = keyof typeof AnimationMap | "none";

app/components/Animate/index.ts

@@ -1,2 +1,2 @@
-export * from './AnimateInView';
-export * from './AnimationMap';
+export * from "./AnimateInView";
+export * from "./AnimationMap";

app/components/AnimatedText/AnimatedText.tsx

@@ -1,60 +1,57 @@
-import { m } from 'framer-motion';
+import { m } from "framer-motion";
 
 type AnimatedTextProps = {
   text: string;
 };
 
 export const AnimatedText = ({ text }: AnimatedTextProps) => {
-// splitting text into letters
-const words = text.split(' ');
+  // splitting text into letters
+  const words = text.split(" ");
 
-// Variants for Container of words.
-const container = {
-  hidden: { opacity: 0 },
-  visible: (i = 1) => ({
-    opacity: 1,
-    transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
-  }),
-};
+  // Variants for Container of words.
+  const container = {
+    hidden: { opacity: 0 },
+    visible: (i = 1) => ({
+      opacity: 1,
+      transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
+    }),
+  };
 
-// Variants for each word.
+  // Variants for each word.
 
-const child = {
-  visible: {
-    opacity: 1,
-    x: 0,
-    transition: {
-      type: 'spring',
-      damping: 12,
-      stiffness: 100,
+  const child = {
+    visible: {
+      opacity: 1,
+      x: 0,
+      transition: {
+        type: "spring",
+        damping: 12,
+        stiffness: 100,
+      },
     },
-  },
-  hidden: {
-    opacity: 0,
-    x: 20,
-    transition: {
-      type: 'spring',
-      damping: 12,
-      stiffness: 100,
+    hidden: {
+      opacity: 0,
+      x: 20,
+      transition: {
+        type: "spring",
+        damping: 12,
+        stiffness: 100,
+      },
     },
-  },
-};
+  };
 
-return (
-  <m.span
-    className="flex flex-wrap gap-x-[0.3em] w-fit"
-    variants={container}
-    initial="hidden"
-    animate="visible"
-  >
-    {words.map((word, index) => (
-      <m.span
-        variants={child}
-        key={`${word}-${index}`}
-      >
-        {word}
-      </m.span>
-    ))}
-  </m.span>
-);
+  return (
+    <m.span
+      className="flex flex-wrap gap-x-[0.3em] w-fit"
+      variants={container}
+      initial="hidden"
+      animate="visible"
+    >
+      {words.map((word, index) => (
+        <m.span variants={child} key={`${word}-${index}`}>
+          {word}
+        </m.span>
+      ))}
+    </m.span>
+  );
 };

app/components/FeatureHero/FeatureHero.tsx

@@ -3,20 +3,15 @@
 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";
+import { motion } 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}
@@ -35,25 +30,29 @@ export const FeatureHero = ({ children, ...props }: FeatureHeroProps) => {
         <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"}
+          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
+          className="absolute w-full h-full top-0 left-0 z-10"
+          initial={{ opacity: 1 }}
+          animate={{ opacity: 0 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 3 }}
+        >
+          <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={800}
+          />
         </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"
-          }
+          src="/soe-centennial-nextjs/assets/images/Hawa-Racine-Thiam_silhouette.png"
           width={0}
           height={0}
           sizes="100vw"

app/components/FeatureHero/index.ts

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

app/components/GradientBanner/GradientBanner.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { HTMLAttributes, useRef } from "react";
+import { Container } from "@/components/Container";
+import { motion, useScroll, useTransform } from "framer-motion";
+
+type GradientBannerProps = HTMLAttributes<HTMLDivElement> & {
+  children: React.ReactNode;
+};
+
+export const GradientBanner = ({ children, ...props }: GradientBannerProps) => {
+  const ref = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+  });
+
+  const gradientPosition = useTransform(
+    scrollYProgress,
+    [0, 1],
+    [
+      "linear-gradient(90deg, #C74632 20%, #610058 100%)",
+      "linear-gradient(90deg, #610058 20%, #C74632 100%)",
+    ],
+  );
+
+  return (
+    <Container width="full" {...props}>
+      <motion.div
+        ref={ref}
+        style={{ background: gradientPosition }}
+        className="flex flex-col justify-center text-white w-full h-full rs-py-9 cc *:font-dm-sans"
+      >
+        {children}
+      </motion.div>
+    </Container>
+  );
+};

app/components/GradientBanner/index.ts

@@ -0,0 +1 @@
+export * from "./GradientBanner";

app/example/page.tsx

@@ -5,6 +5,7 @@ import { FeatureHero } from "@/components/FeatureHero";
 import { PageTitle } from "@/components/PageTitle";
 import TimelineOverview from "@/components/Timeline/TimelineOverview";
 import { loadTimelineData } from "@/utilities/loadTimelineData";
+import { GradientBanner } from "@/components/GradientBanner/GradientBanner";
 
 const ExamplePage = async () => {
   const timelineData = await loadTimelineData();
@@ -46,6 +47,32 @@ const ExamplePage = async () => {
       </FeatureHero>
       <ShapeAnimation />
       <PageTitle heading="100 years of" bigText="Impact" />
+      <GradientBanner>
+        <Heading
+          as="h1"
+          leading="none"
+          className="2xl:whitespace-pre-line font-normal -mt-01em rs-mb-8 xl:max-w-1200"
+        >
+          Events
+        </Heading>
+        <div className="grid grid-cols-2 gap-[15.8rem]">
+          <Text>
+            Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet
+            sapien, quis venenatis ante odio sit amet eros. Class aptent taciti
+            sociosqu ad litora torquent per conubia nostra, per inceptos
+            hymenaeos. Quisque libero metus, condimentum nec, tempor a, commodo
+            mollis, magna. Ut a nisl id ante tempus hendrerit. Nunc sed turpis.
+          </Text>
+          <Text>
+            Vivamus consectetuer hendrerit lacus. Maecenas tempus, tellus eget
+            condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem
+            neque sed ipsum. Donec vitae orci sed dolor rutrum auctor. Nunc
+            interdum lacus sit amet orci. Proin pretium, leo ac pellentesque
+            mollis, felis nunc ultrices eros, sed gravida augue augue mollis
+            justo.
+          </Text>
+        </div>
+      </GradientBanner>
       <TimelineOverview timelineData={timelineData} />
     </div>
   );