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
bottom of page
Trustpilot