Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Landing page CTA #91

Merged
merged 25 commits into from
Jan 15, 2024
Merged
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
34a60d2
Add car and horse icons for the landing page bottom CTA.
nedtwigg Jan 10, 2024
d5dceb9
Merge branch 'main' into feat/landing-cta
WebsByTodd Jan 12, 2024
6a19013
Roughly working animation.
WebsByTodd Jan 12, 2024
684ed22
Clean things up a bit.
WebsByTodd Jan 12, 2024
7bd4d94
Fix typo in comment.
WebsByTodd Jan 12, 2024
dc67acf
Try translating the entire footer up on scroll.
WebsByTodd Jan 13, 2024
43cb6ce
Move FooterCTA component to its own directory, break out the Horse co…
WebsByTodd Jan 15, 2024
78cf940
Break out the car to its own component and add text.
WebsByTodd Jan 15, 2024
15d67f5
Cleanup a bit.
WebsByTodd Jan 15, 2024
39a790b
Connect the links to their destinations.
WebsByTodd Jan 15, 2024
45be736
Fix transition animation so the car completely covers the horse.
WebsByTodd Jan 15, 2024
9582317
Include ts files.
WebsByTodd Jan 15, 2024
75c00af
Delete translate-y animation.
WebsByTodd Jan 15, 2024
f54b064
Fix mobile hero button sizes (which also fixes page content max width…
WebsByTodd Jan 15, 2024
76a2e06
Fix issue with animation resetting at the bottom of the page on mobile.
WebsByTodd Jan 15, 2024
fcfa97f
Start to replace hard coded dimensions.
WebsByTodd Jan 15, 2024
d490ee8
Fix text at smallest screen width.
WebsByTodd Jan 15, 2024
a258692
All hardcoded dimensions are gone.
WebsByTodd Jan 15, 2024
f4498a3
Replace another hardcoded dimension hiding in the config. Can use per…
WebsByTodd Jan 15, 2024
1e86deb
Wide phone styles.
WebsByTodd Jan 15, 2024
0cdc814
All the responsive styles.
WebsByTodd Jan 15, 2024
ebe099f
Update the image height variable on resize.
WebsByTodd Jan 15, 2024
b867939
Merge branch 'main' into feat/landing-cta
WebsByTodd Jan 15, 2024
fe66d70
Footer on "why" page only.
WebsByTodd Jan 15, 2024
ebedaf5
"get started" call to action should link to the current language.
WebsByTodd Jan 15, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Start to replace hard coded dimensions.
WebsByTodd committed Jan 15, 2024
commit fcfa97f20e0f3becb6f81b748c232b1a6cbb533a
2 changes: 1 addition & 1 deletion docs/src/components/FooterCTA/Car.tsx
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ export function Car() {
<img
src="/car.webp"
className={clsx([
`h-[${FOOTER_IMG_HEIGHT}px]`,
`max-h-[${FOOTER_IMG_HEIGHT}px]`,
`w-[${FOOTER_IMG_WIDTH}px]`,
"left-0",
"right-0",
25 changes: 16 additions & 9 deletions docs/src/components/FooterCTA/FooterCTA.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import clsx from "clsx";
import { useEffect, useRef } from "react";
import { FOOTER_IMG_HEIGHT, FOOTER_IMG_WIDTH } from "./constants";
import { useEffect, useRef, useState } from "react";
import { FOOTER_IMG_HEIGHT } from "./constants";
import { Horse } from "./Horse";
import { Car } from "./Car";

// STYLES IN COMMENTS REQUIRED FOR TAILWIND TO INCLUDE THEM
// h-[568px] w-[1136px] max-h-[568px] min-h-[568px]
// max-h-[568px] w-[1136px] max-h-[568px] min-h-[568px]

export function FooterCTA() {
const spacerRef = useRef<HTMLDivElement | null>(null);
const footerRef = useRef<HTMLDivElement | null>(null);
const imageRef = useRef<HTMLImageElement | null>(null);
const [imageHeight, setImageHeight] = useState(0);

function handleResize() {}

function handleScroll() {
if (!footerRef.current || !spacerRef.current) return;
@@ -18,13 +23,13 @@ export function FooterCTA() {
window.innerHeight - spacerRef.current.getBoundingClientRect().top;

let horseHeightScale: number;
if (topOfHorseFromBottomOfScreen < FOOTER_IMG_HEIGHT) {
if (topOfHorseFromBottomOfScreen < imageHeight) {
horseHeightScale = 0;
} else if (topOfHorseFromBottomOfScreen > FOOTER_IMG_HEIGHT * 2) {
} else if (topOfHorseFromBottomOfScreen > imageHeight * 2) {
horseHeightScale = 1;
} else {
horseHeightScale =
(topOfHorseFromBottomOfScreen - FOOTER_IMG_HEIGHT) / FOOTER_IMG_HEIGHT;
(topOfHorseFromBottomOfScreen - imageHeight) / imageHeight;
}
footerRef.current!.style.setProperty(
"--horse-height-scale",
@@ -34,10 +39,12 @@ export function FooterCTA() {

useEffect(() => {
window.addEventListener("scroll", handleScroll, false);
window.addEventListener("resize", handleResize, false);
return () => {
window.removeEventListener("scroll", handleScroll);
window.removeEventListener("resize", handleResize);
};
}, []);
}, [imageHeight]);

return (
<div
@@ -46,9 +53,9 @@ export function FooterCTA() {
>
<div
ref={spacerRef}
style={{ height: imageHeight }}
className={clsx([
`h-[${FOOTER_IMG_HEIGHT}px]`, // spacer under the images to allow for more scrolling
"w-full",
"w-full", // spacer under the images to allow for more scrolling
"relative",
"z-0",
])}
@@ -75,7 +82,7 @@ export function FooterCTA() {
"right-0",
])}
>
<Horse />
<Horse imageRef={imageRef} setImageHeight={setImageHeight} />
</div>
<Car />
</div>
16 changes: 13 additions & 3 deletions docs/src/components/FooterCTA/Horse.tsx
Original file line number Diff line number Diff line change
@@ -5,15 +5,25 @@ import {
FOOTER_IMG_WIDTH,
} from "./constants";
import Link from "next/link";
import { MutableRefObject } from "react";

export function Horse() {
interface HorseProps {
imageRef: MutableRefObject<HTMLImageElement | null>;
setImageHeight: (height: number) => void;
}
export function Horse({ imageRef, setImageHeight }: HorseProps) {
return (
<div className="relative">
<img
src="/horse.webp"
ref={(el) => {
if (el) {
setImageHeight(el.height);
}
imageRef.current = el;
}}
className={clsx([
`h-[${FOOTER_IMG_HEIGHT}px]`,
`min-h-[${FOOTER_IMG_HEIGHT}px]`,
`max-h-[${FOOTER_IMG_HEIGHT}px]`,
`w-[${FOOTER_IMG_WIDTH}px]`,
"m-auto",
])}