From d8ce994d83ee13fb8e10af592bc28e334ffdf698 Mon Sep 17 00:00:00 2001
From: myung03 <matthewyungisworking@gmail.com>
Date: Tue, 3 Sep 2024 22:32:36 -0700
Subject: [PATCH] parallax effect on hero

---
 apps/landing/package.json                     |   1 +
 apps/landing/src/components/hero-image.tsx    |  45 ++++++++++++++++++
 .../components/landing-sections/header.tsx    |  34 +++----------
 pnpm-lock.yaml                                | Bin 1180421 -> 1180992 bytes
 4 files changed, 53 insertions(+), 27 deletions(-)
 create mode 100644 apps/landing/src/components/hero-image.tsx

diff --git a/apps/landing/package.json b/apps/landing/package.json
index b50fe9fb6..c66fc2088 100644
--- a/apps/landing/package.json
+++ b/apps/landing/package.json
@@ -36,6 +36,7 @@
 		"react-dom": "^18.3.1",
 		"react-error-boundary": "^4.0.13",
 		"react-github-btn": "^1.4.0",
+		"react-parallax-tilt": "^1.7.237",
 		"reading-time": "^1.5.0",
 		"rehype-autolink-headings": "^6.1.1",
 		"rehype-external-links": "^2.1.0",
diff --git a/apps/landing/src/components/hero-image.tsx b/apps/landing/src/components/hero-image.tsx
new file mode 100644
index 000000000..9d840786c
--- /dev/null
+++ b/apps/landing/src/components/hero-image.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+// Ensure this component runs on the client-side
+import Image from 'next/image';
+import React from 'react';
+import Tilt from 'react-parallax-tilt';
+
+interface HeroImageProps {
+	src: string;
+	alt: string;
+	width: number;
+	height: number;
+}
+
+export const HeroImage: React.FC<HeroImageProps> = ({ src, alt, width, height }) => {
+	return (
+		<Tilt
+			tiltMaxAngleX={8}
+			tiltMaxAngleY={8}
+			scale={1.02}
+			transitionSpeed={3000}
+			glareEnable={false}
+		>
+			<div className="relative m-auto mt-10 flex w-full max-w-7xl overflow-hidden rounded-[10px] transition-transform duration-700 ease-in-out md:mt-0">
+				<div className="flex flex-col items-center justify-center">
+					<div className="z-30 flex w-full justify-center backdrop-blur">
+						<div className="relative h-auto w-full max-w-[1200px]">
+							<div className="h-px w-full bg-gradient-to-r from-transparent via-[#008BFF]/40 to-transparent" />
+							<div className="absolute inset-x-0 top-0 z-[110] size-full bg-gradient-to-b from-transparent to-[#0E0E12]" />
+
+							<Image
+								loading="eager"
+								layout="responsive"
+								width={width}
+								height={height}
+								alt={alt}
+								src={src}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</Tilt>
+	);
+};
diff --git a/apps/landing/src/components/landing-sections/header.tsx b/apps/landing/src/components/landing-sections/header.tsx
index d9ffd6e97..326f72301 100644
--- a/apps/landing/src/components/landing-sections/header.tsx
+++ b/apps/landing/src/components/landing-sections/header.tsx
@@ -1,10 +1,10 @@
-import Image from 'next/image';
 import React from 'react';
 import { getLatestRelease, getReleaseFrontmatter, githubFetch } from '~/app/api/github';
 import Particles from '~/particles';
 import { toTitleCase } from '~/utils/misc';
 
 import { GoldenBadge } from '../golden-badge';
+import { HeroImage } from '../hero-image'; // Import the client-side component
 import { HomeCtaButtons } from '../home-cta-buttons';
 
 export const metadata = {
@@ -58,14 +58,6 @@ export async function Header() {
 
 			<div>
 				<div className="xl2:relative z-30 flex h-[255px] w-full px-6 sm:h-[428px] md:mt-12 md:h-[428px] lg:h-auto">
-					<Image
-						loading="eager"
-						className="absolute-horizontal-center animation-delay-2 top-[380px] -z-10 select-none fade-in xs:top-[180px] md:top-[130px]"
-						width={1200}
-						height={626}
-						alt="l"
-						src="/images/app/gradient.webp"
-					/>
 					<div className="absolute inset-x-0 top-[450px] mx-auto flex size-[200px] md:size-[500px]">
 						<Particles
 							quantity={80}
@@ -77,24 +69,12 @@ export async function Header() {
 							vx={-0.05}
 						/>
 					</div>
-					<div className="relative m-auto mt-10 flex w-full max-w-7xl overflow-hidden rounded-[10px] transition-transform duration-700 ease-in-out md:mt-0">
-						<div className="flex flex-col items-center justify-center">
-							<div className="z-30 flex w-full justify-center backdrop-blur">
-								<div className="relative h-auto w-full max-w-[1200px]">
-									<div className="h-px w-full bg-gradient-to-r from-transparent via-[#008BFF]/40 to-transparent" />
-									<div className="absolute inset-x-0 top-0 z-[110] size-full bg-gradient-to-b from-transparent to-[#0E0E12]" />
-									<Image
-										loading="eager"
-										layout="responsive"
-										width={1200}
-										height={800}
-										alt="Spacedrive App Image"
-										src="/images/app/wip/MultiDeviceOverview.png"
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
+					<HeroImage
+						src="/images/app/wip/MultiDeviceOverview.png"
+						alt="Spacedrive App Image"
+						width={1200}
+						height={800}
+					/>
 				</div>
 			</div>
 		</div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c37cc0c1c6d15513d582d09aa914ce8364fe4092..5304c53c1f8be4b6eebe6b7dff60261e0fb5a9b2 100644
GIT binary patch
delta 330
zcmZo|^ElAuvB5=EAh|@hAh9ShCnvE&w<I&CWb(mP5-jF=M#hsHH;b_8fmr6#59;%n
zHan`eJE}4QF%u9o12GE_vjQ<25VLQ0RONVKErMc}gCSV|bjKMiYN0{t7LmEB87^5N
zA<2$;X2#|ot|`VPB_XL%X(1M&Ro;HNzTSZuNqGha`lh-0S=pf`9@^<XNs-wV;clM3
z1{pqiWoiCVspZ*)>CW!1{=QXtCc!zA4L>VRFK}e$oc_d`Lw&kH1_$@_f+@@#(|Npr
zTy7f<&UVd24j=~6TtLhX#5_RE3&eat%)ebTQNa12C^mPSPoLPp?=gMC0|CD24VFA2
Z)BPIxMW-)#Ex<M%XsF=!S|!1b2LSytYPA3W

delta 95
zcmX@m<<Z*avB5>P`H*V+Ayq~oW&&bnAZ7t#Rv=~rV)pHaR5_knx1UPl0Afxc<^p1F
fAm#yLULfWJV*c%?k_4O&P6w(I+`dCau;T#$V_7I5