trafficlunar/blockmatic
1
0
Fork 0
mirror of https://github.com/trafficlunar/blockmatic.git synced 2026-06-28 06:34:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: more home page redesigns

Browse source
This commit is contained in:
trafficlunar 2025-02-01 17:49:50 +00:00
parent e488259fa4
commit 0692466c76
8 changed files with 44 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/components/home/AppPreview.tsx
View file

@ -1,49 +0,0 @@
import { useContext, useState } from "react";
import { ThemeContext } from "@/context/Theme";
function AppPreview() {
const { isDark } = useContext(ThemeContext);
const [leaving, setLeaving] = useState(true);
const [transform, setTransform] = useState("");
const onMouseEnter = () => {
setLeaving(false);
};
const onMouseLeave = () => {
setLeaving(true);
setTransform("rotateX(0deg) rotateY(0deg)");
};
const onMouseMove = (e: React.MouseEvent) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = ((y - centerY) / centerY) * 10;
const rotateY = ((centerX - x) / centerX) * 10;
setTransform(`rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
};
return (
<img
src={isDark ? "/blockmatic_screenshot_dark.png" : "/blockmatic_screenshot_light.png"}
alt="app preview"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onMouseMove={onMouseMove}
className={`w-[90%] rounded-xl mt-[26rem] border border-zinc-700 ${
leaving ? "transition-transform duration-500 ease-in-out" : "duration-100 ease-out"
}`}
style={{ transform }}
/>
);
}
export default AppPreview;

20
src/components/home/ImageComparison.tsx
View file

@ -13,7 +13,7 @@ function ImageComparison() {
};
return (
<div onMouseMove={onMouseMove} className="relative select-none w-full h-[calc(40vw*217/270)] flex justify-center">
<div onMouseMove={onMouseMove} className="relative select-none w-[40vw] h-[calc(40vw*217/270)] flex justify-center">
<img
src="/bliss/bliss_original.png"
alt="original version of bliss"
@ -42,24 +42,6 @@ function ImageComparison() {
</div>
<span className="absolute top-[101.5%] left-1 text-zinc-500 text-xs">Windows XP Background 'Bliss' image owned by Microsoft Corporation</span>
<div className="absolute right-2 top-1/2 w-1/5 h-1/5 flex justify-center items-center -z-10">
<img
src="/bliss/bliss_original_zoomed.png"
alt="zoomed in version of blockmatic version of bliss"
draggable={false}
className="absolute w-full rounded-full"
style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`, imageRendering: "pixelated" }}
/>
<img
src="/bliss/bliss_zoomed.png"
alt="zoomed in version of blockmatic version of bliss"
draggable={false}
className="absolute w-full rounded-full"
style={{ clipPath: `inset(0 0 0 ${sliderPosition}%)` }}
/>
</div>
</div>
);
}