diff --git a/app/components/Animate/AnimateInView.tsx b/app/components/Animate/AnimateInView.tsx index 4ffb772..aefc0f6 100644 --- a/app/components/Animate/AnimateInView.tsx +++ b/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
{children}
; } - const beforeAnimationState = prefersReducedMotion ? 'hiddenReduced' : 'hidden'; + const beforeAnimationState = prefersReducedMotion + ? "hiddenReduced" + : "hidden"; return ( diff --git a/app/components/Animate/AnimationMap.ts b/app/components/Animate/AnimationMap.ts index 305ab58..ee160d2 100644 --- a/app/components/Animate/AnimationMap.ts +++ b/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"; diff --git a/app/components/Animate/index.ts b/app/components/Animate/index.ts index 3a365f2..f492f55 100644 --- a/app/components/Animate/index.ts +++ b/app/components/Animate/index.ts @@ -1,2 +1,2 @@ -export * from './AnimateInView'; -export * from './AnimationMap'; +export * from "./AnimateInView"; +export * from "./AnimationMap"; diff --git a/app/components/AnimatedText/AnimatedText.tsx b/app/components/AnimatedText/AnimatedText.tsx index 84fdd84..110a40b 100644 --- a/app/components/AnimatedText/AnimatedText.tsx +++ b/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 ( - - {words.map((word, index) => ( - - {word} - - ))} - -); + return ( + + {words.map((word, index) => ( + + {word} + + ))} + + ); }; diff --git a/app/components/FeatureHero/FeatureHero.styles.ts b/app/components/FeatureHero/FeatureHero.styles.ts deleted file mode 100644 index 91eec71..0000000 --- a/app/components/FeatureHero/FeatureHero.styles.ts +++ /dev/null @@ -1,5 +0,0 @@ -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"; diff --git a/app/components/FeatureHero/FeatureHero.tsx b/app/components/FeatureHero/FeatureHero.tsx index 8797ca0..fe3864e 100644 --- a/app/components/FeatureHero/FeatureHero.tsx +++ b/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 & { children: React.ReactNode; - imageSrc?: string; }; export const FeatureHero = ({ children, ...props }: FeatureHeroProps) => { - const { scrollYProgress } = useScroll(); - const opacity = useTransform(scrollYProgress, [0, 0.05], [1, 0]); - return ( { - -
- + +
+
& { + 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 ( + + + {children} + + + ); +}; diff --git a/app/components/GradientBanner/index.ts b/app/components/GradientBanner/index.ts new file mode 100644 index 0000000..118a10f --- /dev/null +++ b/app/components/GradientBanner/index.ts @@ -0,0 +1 @@ +export * from "./GradientBanner"; diff --git a/app/example/page.tsx b/app/example/page.tsx index 84c6628..3964c53 100644 --- a/app/example/page.tsx +++ b/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 () => { + + + Events + +
+ + 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. + + + 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. + +
+
);