trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: image comparison section in home page

Browse source
This commit is contained in:
trafficlunar 2025-02-02 20:00:34 +00:00
parent 7eb1c51544
commit b5c6ababa4
2 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,12 +13,15 @@ function ImageComparison() {
}; };
return ( return (
<div onMouseMove={onMouseMove} className="relative select-none w-[40vw] 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 rounded-xl border border-zinc-200 dark:border-zinc-800 shadow-md"
>
<img <img
src="/bliss/bliss_original.png" src="/bliss/bliss_original.png"
alt="original version of bliss" alt="original version of bliss"
draggable={false} draggable={false}
className="absolute w-full -z-20" className="absolute w-full -z-20 rounded-xl"
style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`, imageRendering: "pixelated" }} style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`, imageRendering: "pixelated" }}
/> />
@ -26,7 +29,7 @@ function ImageComparison() {
src="/bliss/bliss.png" src="/bliss/bliss.png"
alt="blockmatic version of bliss" alt="blockmatic version of bliss"
draggable={false} draggable={false}
className="absolute w-full -z-20" className="absolute w-full -z-20 rounded-xl"
style={{ clipPath: `inset(0 0 0 ${sliderPosition}%)` }} style={{ clipPath: `inset(0 0 0 ${sliderPosition}%)` }}
/> />
@ -36,7 +39,7 @@ function ImageComparison() {
left: `${sliderPosition}%`, left: `${sliderPosition}%`,
}} }}
> >
<div className="bg-zinc-200 rounded-full absolute w-12 h-12 -translate-x-1/2 flex justify-center items-center cursor-pointer"> <div className="bg-zinc-200 rounded-full absolute w-12 h-12 -translate-x-1/2 flex justify-center items-center cursor-col-resize">
<ChevronsLeftRightIcon color="black" size={30} /> <ChevronsLeftRightIcon color="black" size={30} />
</div> </div>
</div> </div>

8
src/pages/IndexPage.tsx
View file

@ -95,6 +95,14 @@ function IndexPage() {
</div> </div>
</div> </div>
</section> </section>
<section className="flex flex-col items-center mt-32 mx-8 max-w-[40rem]">
<h1 className="text-5xl font-bold mb-2 text-center">See the difference</h1>
<p className="mb-8 text-lg text-center">
Blockmatic lets you pick what blocks you want for the image and change versions from 1.6.1 to the latest version.
</p>
<ImageComparison />
</section>
<ImageComparison /> <ImageComparison />
</section> </section>