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

feat: add text to index page under "See the difference" heading and other changes

Browse source
This commit is contained in:
trafficlunar 2025-01-12 20:45:24 +00:00
parent db557c4c3d
commit aa58b31269
5 changed files with 36 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/blockmatic_preview.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 196 KiB

After

Width:  |  Height:  |  Size: 362 KiB

BIN
public/blockmatic_screenshot_dark.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 774 KiB

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/blockmatic_screenshot_light.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 778 KiB

After

Width:  |  Height:  |  Size: 1.7 MiB

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

@ -13,12 +13,12 @@ function ImageComparison() {
};
return (
<div onMouseMove={onMouseMove} className="mt-10 relative select-none w-1/2 h-[calc(50vw*217/270)] flex justify-center">
<div onMouseMove={onMouseMove} className="relative select-none w-full h-[calc(40vw*217/270)] flex justify-center">
<img
src="/bliss/bliss_original.png"
alt="original version of bliss"
draggable={false}
className="absolute w-full"
className="absolute w-full -z-20"
style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`, imageRendering: "pixelated" }}
/>
@ -26,7 +26,7 @@ function ImageComparison() {
src="/bliss/bliss.png"
alt="blockmatic version of bliss"
draggable={false}
className="absolute w-full"
className="absolute w-full -z-20"
style={{ clipPath: `inset(0 0 0 ${sliderPosition}%)` }}
/>
@ -41,15 +41,14 @@ function ImageComparison() {
</div>
</div>
<span className="absolute -bottom-6 left-1 text-zinc-500 text-xs">Windows XP Background 'Bliss' image owned by Microsoft Corporation</span>
<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 left-[105%] bottom-48 bg-zinc-200 w-48 h-48 flex justify-center items-center">
<div className="relative w-[11.5rem] h-[11.5rem]">
<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"
className="absolute w-full rounded-full"
style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`, imageRendering: "pixelated" }}
/>
@ -57,12 +56,9 @@ function ImageComparison() {
src="/bliss/bliss_zoomed.png"
alt="zoomed in version of blockmatic version of bliss"
draggable={false}
className="absolute w-full"
className="absolute w-full rounded-full"
style={{ clipPath: `inset(0 0 0 ${sliderPosition}%)` }}
/>
<span className="text-zinc-500 absolute -bottom-7 text-xs">Use the slider to see this</span>
</div>
</div>
</div>
);

17
src/pages/IndexPage.tsx
View file

@ -46,8 +46,23 @@ function IndexPage() {
<AppPreview />
<h1 className="text-5xl font-pixel font-bold mt-32">See the difference</h1>
<div className="grid grid-cols-2 w-4/5 mt-8">
<div className="pr-32 py-32">
<h1 className="text-5xl font-minecraft font-bold mb-2">See the difference</h1>
<p>
Blockmatic lets you transform images into pixel art schematics for Minecraft. Easily adjust the width and height, and select the blocks
you want to use with the dialog.
<br />
<br />
Use the comparsion slider adjacent featuring the Windows XP background (also known as Bliss) to see the feature in action. Move it to the
left to see the blockmatic version and move it to the right to see the original version.
<br />
<br />
Try it out in the editor by opening the File menu at the top then clicking the Open Image button.
</p>
</div>
<ImageComparison />
</div>
<footer className="w-full h-16 mt-20 flex flex-col items-center">
<Separator className="w-2/5" />