import React, { useState } from "react"; import { motion } from "framer-motion"; // BUSINESS TILE VISUALIZER – PWA READY // Drop into a Vite / Next / CRA React project with Tailwind installed const TILE_LIBRARY = [ { id: 1, name: "White Marble", url: "https://images.unsplash.com/photo-1588854337118-1c74b6b8e3bb" }, { id: 2, name: "Concrete Grey", url: "https://images.unsplash.com/photo-1523413651479-597eb2da0ad6" }, { id: 3, name: "Terracotta", url: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c" }, { id: 4, name: "Patterned Blue", url: "https://images.unsplash.com/photo-1600121848594-d8644e57abab" }, { id: 5, name: "Black Slate", url: "https://images.unsplash.com/photo-1615874959474-d609969a20ed" } ]; export default function TileVisualizerBusinessApp() { const [roomImage, setRoomImage] = useState(null); const [tile, setTile] = useState(TILE_LIBRARY[0]); const [opacity, setOpacity] = useState(0.6); const [surface, setSurface] = useState("floor"); const handleUpload = (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => setRoomImage(reader.result); reader.readAsDataURL(file); }; return (
{/* HEADER */}

Tile Visualizer Pro

{/* HERO */}

See Your Tiles Before You Buy

Upload your kitchen, hallway or fireplace and preview our tiles instantly in your space.

{/* MAIN APP */}
{/* CONTROLS */}
setOpacity(e.target.value)} className="w-full" />

Tile Collection

{TILE_LIBRARY.map((t) => ( ))}
{/* PREVIEW */}

Live Preview

{roomImage ? ( ) : (
Upload a room image
)} {roomImage && ( )} {roomImage && (
{surface.toUpperCase()}
)}
{/* FOOTER */}
); }
top of page

Sublimation printed tiles are for decorative purposes only and are not suitable for solid fuel fireplaces, floors or outdoor use. They will fade under UV light exposure over time. The tiles are flat printed and not tube lined or relief.

Still undecided? Subscribe to hear about offers!

Thanks for subscribing!

Art Nouveau Style Items/Accessories

bottom of page
Trustpilot