White Sand Paints - Our Colors<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600&display=swap');\r\n body {\r\n \/* White background *\/\r\n background-color: #FFFFFF; \r\n font-family: 'Outfit', sans-serif;\r\n margin: 0;\r\n padding: 0;\r\n overflow-x: hidden;\r\n }\r\n \/* Custom text shadow to make white text readable on light colors *\/\r\n .color-btn-text {\r\n text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState } = React;\r\n\r\n \/\/ Comprehensive database of all colors (Updated with completely new modern collections)\r\n const colorData = [\r\n {\r\n category: \"Lumina\", \/\/ Luminous, airy pastels\r\n colors: [\r\n { name: \"Morning Dew\", hex: \"#E8F2EB\" },\r\n { name: \"Hazy Lavender\", hex: \"#E6E1FA\" },\r\n { name: \"Sunlit Peach\", hex: \"#FDE9D9\" },\r\n { name: \"Mistral Blue\", hex: \"#DFEBF0\" },\r\n { name: \"Minted Ice\", hex: \"#E0F0E9\" },\r\n { name: \"Rosy Dawn\", hex: \"#F7E1E4\" },\r\n { name: \"Soft Glow\", hex: \"#FAF2D4\" }\r\n ]\r\n },\r\n {\r\n category: \"Terra Firma\", \/\/ Rich, earthy, saturated tones\r\n colors: [\r\n { name: \"Canyon Clay\", hex: \"#BC5D4B\" },\r\n { name: \"Deep Ochre\", hex: \"#C98A3C\" },\r\n { name: \"Burnt Siena\", hex: \"#944A37\" },\r\n { name: \"Roasted Pecan\", hex: \"#6E4B3D\" },\r\n { name: \"Wild Mustard\", hex: \"#BFA146\" },\r\n { name: \"Smoked Paprika\", hex: \"#A34839\" },\r\n { name: \"Umber Shadow\", hex: \"#52372E\" }\r\n ]\r\n },\r\n {\r\n category: \"Sylva\", \/\/ Deep forest and botanical vibes\r\n colors: [\r\n { name: \"Banyan Tree\", hex: \"#4A5D23\" },\r\n { name: \"Fern Frond\", hex: \"#637A4B\" },\r\n { name: \"Juniper Berry\", hex: \"#394A50\" },\r\n { name: \"Mossy Rock\", hex: \"#7A8760\" },\r\n { name: \"Nightshade\", hex: \"#41394D\" },\r\n { name: \"Evergreen Canopy\", hex: \"#2F4538\" },\r\n { name: \"Wild Ivy\", hex: \"#536E4F\" }\r\n ]\r\n },\r\n {\r\n category: \"Aqua Deep\", \/\/ Oceans and deep waterways\r\n colors: [\r\n { name: \"Mariana Trench\", hex: \"#1B3045\" },\r\n { name: \"Lagoon Teal\", hex: \"#2C7A7B\" },\r\n { name: \"Baltic Sea\", hex: \"#476270\" },\r\n { name: \"Aegean Blue\", hex: \"#4E87A1\" },\r\n { name: \"Kelp Forest\", hex: \"#3A5F4E\" },\r\n { name: \"Abyssal Indigo\", hex: \"#232B45\" },\r\n { name: \"Cyan Surge\", hex: \"#1D7A8F\" }\r\n ]\r\n },\r\n {\r\n category: \"Aura\", \/\/ Vibrant, moody sunset tones\r\n colors: [\r\n { name: \"Electric Plum\", hex: \"#6B305C\" },\r\n { name: \"Crimson Velvet\", hex: \"#8A2036\" },\r\n { name: \"Magenta Dusk\", hex: \"#8F3F65\" },\r\n { name: \"Saffron Fire\", hex: \"#D16B28\" },\r\n { name: \"Burnt Orange\", hex: \"#B85423\" },\r\n { name: \"Amethyst Shadow\", hex: \"#5B4A6B\" },\r\n { name: \"Ruby Embers\", hex: \"#731C2D\" }\r\n ]\r\n },\r\n {\r\n category: \"Solstice\", \/\/ Warm, high-energy brights\r\n colors: [\r\n { name: \"Mango Sorbet\", hex: \"#F4B04A\" },\r\n { name: \"Sunflower Field\", hex: \"#E8C138\" },\r\n { name: \"Coral Pink\", hex: \"#F07865\" },\r\n { name: \"Tangerine Zing\", hex: \"#F26F3D\" },\r\n { name: \"Lemon Tart\", hex: \"#EADD69\" },\r\n { name: \"Apricot Crush\", hex: \"#F49C65\" },\r\n { name: \"Golden Ticket\", hex: \"#D9AB42\" }\r\n ]\r\n },\r\n {\r\n category: \"Strata\", \/\/ Stones, minerals, and concrete\r\n colors: [\r\n { name: \"Basalt Black\", hex: \"#2E2E2E\" },\r\n { name: \"Granite Peak\", hex: \"#6B6B6B\" },\r\n { name: \"Riverstone\", hex: \"#8E9294\" },\r\n { name: \"Limestone Wash\", hex: \"#D4D3CD\" },\r\n { name: \"Slate Shingle\", hex: \"#555C61\" },\r\n { name: \"Quartz Dust\", hex: \"#E6E3DF\" },\r\n { name: \"Obsidian\", hex: \"#1A1A1A\" }\r\n ]\r\n },\r\n {\r\n category: \"Aether\", \/\/ The ultimate neutral off-whites\r\n colors: [\r\n { name: \"Cloud Nine\", hex: \"#F9F9F9\" },\r\n { name: \"Oatmilk\", hex: \"#F0EAD6\" },\r\n { name: \"Arctic Wind\", hex: \"#F0F4F8\" },\r\n { name: \"Linen Thread\", hex: \"#EAE3D9\" },\r\n { name: \"Frosted Glass\", hex: \"#E4E9EC\" },\r\n { name: \"Sea Salt\", hex: \"#EDEBE6\" },\r\n { name: \"Porcelain\", hex: \"#F2F4F1\" }\r\n ]\r\n },\r\n {\r\n category: \"Velvet\", \/\/ Sophisticated muted darks\r\n colors: [\r\n { name: \"Plum Truffle\", hex: \"#4A3B42\" },\r\n { name: \"Espresso Crema\", hex: \"#3B2F2F\" },\r\n { name: \"Inkwell\", hex: \"#29313A\" },\r\n { name: \"Billiard Green\", hex: \"#2A4036\" },\r\n { name: \"Midnight Aubergine\", hex: \"#362837\" },\r\n { name: \"Peacock Feather\", hex: \"#234E57\" },\r\n { name: \"Fig Preserve\", hex: \"#4C2E38\" }\r\n ]\r\n }\r\n ];\r\n\r\n \/\/ Clean, ordered, highly detailed vector room visualizer\r\n const RoomVisualizer = ({ color }) => (\r\n <div className=\"w-full relative shadow-[0_8px_30px_rgba(0,0,0,0.12)] bg-white rounded-md overflow-hidden\" style={{ aspectRatio: '16\/10' }}>\r\n <svg viewBox=\"0 0 1000 625\" preserveAspectRatio=\"xMidYMid slice\" className=\"w-full h-full absolute inset-0\">\r\n {\/* 1. Dynamic Wall *\/}\r\n <rect width=\"100%\" height=\"100%\" fill={color || \"#F2E3C6\"} style={{ transition: \"fill 0.5s ease-in-out\" }} \/>\r\n <rect width=\"100%\" height=\"100%\" fill=\"url(#wallGradient)\" opacity=\"0.3\" pointerEvents=\"none\" \/>\r\n \r\n {\/* 2. Floor & Baseboard *\/}\r\n <polygon points=\"0,480 1000,480 1000,625 0,625\" fill=\"#EAE7DF\" \/>\r\n <rect x=\"0\" y=\"468\" width=\"1000\" height=\"12\" fill=\"#FFFFFF\" opacity=\"0.9\" \/>\r\n <rect x=\"0\" y=\"466\" width=\"1000\" height=\"2\" fill=\"#E0E0E0\" \/> {\/* Baseboard shadow line *\/}\r\n\r\n {\/* Floor Shadows for Grounding Furniture *\/}\r\n <ellipse cx=\"130\" cy=\"495\" rx=\"50\" ry=\"8\" fill=\"rgba(0,0,0,0.06)\" \/> {\/* Mirror shadow *\/}\r\n <ellipse cx=\"280\" cy=\"495\" rx=\"60\" ry=\"10\" fill=\"rgba(0,0,0,0.06)\" \/> {\/* Nightstand shadow *\/}\r\n <ellipse cx=\"500\" cy=\"530\" rx=\"180\" ry=\"20\" fill=\"rgba(0,0,0,0.08)\" \/> {\/* Bed shadow *\/}\r\n <ellipse cx=\"850\" cy=\"505\" rx=\"60\" ry=\"12\" fill=\"rgba(0,0,0,0.06)\" \/> {\/* Plant shadow *\/}\r\n\r\n {\/* 3. Standing Mirror (Left) *\/}\r\n <g transform=\"translate(80, 150)\">\r\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"340\" rx=\"12\" fill=\"#EFEFEF\" stroke=\"#D5D5D5\" strokeWidth=\"5\" \/>\r\n <rect x=\"8\" y=\"8\" width=\"84\" height=\"324\" rx=\"8\" fill=\"#F4F6F5\" \/>\r\n <polygon points=\"10,10 90,90 90,310 10,230\" fill=\"#FFFFFF\" opacity=\"0.4\" \/>\r\n <line x1=\"20\" y1=\"340\" x2=\"-10\" y2=\"400\" stroke=\"#BCA38F\" strokeWidth=\"7\" strokeLinecap=\"round\" \/>\r\n <\/g>\r\n\r\n {\/* 4. Nightstand & Small Plant (Left of Bed) *\/}\r\n <g transform=\"translate(230, 410)\">\r\n <line x1=\"20\" y1=\"40\" x2=\"15\" y2=\"80\" stroke=\"#BCA38F\" strokeWidth=\"6\" strokeLinecap=\"round\" \/>\r\n <line x1=\"80\" y1=\"40\" x2=\"85\" y2=\"80\" stroke=\"#BCA38F\" strokeWidth=\"6\" strokeLinecap=\"round\" \/>\r\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"40\" rx=\"3\" fill=\"#FFFFFF\" stroke=\"#E5E5E5\" strokeWidth=\"1\" \/>\r\n <rect x=\"5\" y=\"5\" width=\"90\" height=\"30\" fill=\"#FFFFFF\" stroke=\"#F0F0F0\" strokeWidth=\"1\" \/>\r\n <circle cx=\"50\" cy=\"20\" r=\"3\" fill=\"#A0A0A0\" \/>\r\n \r\n {\/* Potted Plant *\/}\r\n <path d=\"M 50 0 Q 30 -40 50 -60 Q 70 -40 50 0\" fill=\"#4A6B53\" \/>\r\n <path d=\"M 45 0 Q 20 -20 15 -40 Q 40 -30 45 0\" fill=\"#3B5742\" \/>\r\n <polygon points=\"40,0 60,0 55,20 45,20\" fill=\"#D3C5B8\" \/>\r\n <\/g>\r\n\r\n {\/* 5. Center Bed *\/}\r\n <g transform=\"translate(340, 310)\">\r\n {\/* Headboard *\/}\r\n <rect x=\"20\" y=\"0\" width=\"280\" height=\"130\" rx=\"6\" fill=\"#F8F8F8\" \/>\r\n <rect x=\"25\" y=\"5\" width=\"270\" height=\"120\" rx=\"4\" fill=\"#F4F4F4\" \/>\r\n \r\n {\/* Pillows - Back row *\/}\r\n <rect x=\"40\" y=\"70\" width=\"110\" height=\"50\" rx=\"12\" fill=\"#FFFFFF\" stroke=\"#EAEAEA\" strokeWidth=\"2\" \/>\r\n <rect x=\"170\" y=\"70\" width=\"110\" height=\"50\" rx=\"12\" fill=\"#FFFFFF\" stroke=\"#EAEAEA\" strokeWidth=\"2\" \/>\r\n \r\n {\/* Pillows - Front row *\/}\r\n <rect x=\"70\" y=\"90\" width=\"80\" height=\"40\" rx=\"10\" fill=\"#EAE5DF\" \/>\r\n <rect x=\"170\" y=\"90\" width=\"80\" height=\"40\" rx=\"10\" fill=\"#EAE5DF\" \/>\r\n \r\n {\/* Mattress & Duvet *\/}\r\n <rect x=\"0\" y=\"120\" width=\"320\" height=\"90\" rx=\"8\" fill=\"#FAFAFA\" stroke=\"#F0F0F0\" strokeWidth=\"1\" \/>\r\n <path d=\"M 0 140 Q 160 135 320 140 L 320 210 L 0 210 Z\" fill=\"#FDFDFD\" \/>\r\n \r\n {\/* Neatly Folded Green Blanket *\/}\r\n <rect x=\"-5\" y=\"170\" width=\"330\" height=\"45\" rx=\"4\" fill=\"#84A599\" \/>\r\n <rect x=\"-5\" y=\"175\" width=\"330\" height=\"5\" fill=\"#749488\" opacity=\"0.3\" \/> {\/* Blanket Fold line *\/}\r\n <\/g>\r\n\r\n {\/* 6. Coffee Table (Center Foreground) *\/}\r\n <g transform=\"translate(500, 560)\">\r\n <line x1=\"-50\" y1=\"10\" x2=\"-70\" y2=\"50\" stroke=\"#BCA38F\" strokeWidth=\"6\" strokeLinecap=\"round\" \/>\r\n <line x1=\"50\" y1=\"10\" x2=\"70\" y2=\"50\" stroke=\"#BCA38F\" strokeWidth=\"6\" strokeLinecap=\"round\" \/>\r\n <line x1=\"0\" y1=\"15\" x2=\"0\" y2=\"55\" stroke=\"#9E836E\" strokeWidth=\"6\" strokeLinecap=\"round\" \/>\r\n <ellipse cx=\"0\" cy=\"0\" rx=\"100\" ry=\"20\" fill=\"#FFFFFF\" stroke=\"#F0F0F0\" strokeWidth=\"2\" \/>\r\n \r\n {\/* Minimalist Books & Cup *\/}\r\n <rect x=\"-20\" y=\"-12\" width=\"40\" height=\"5\" fill=\"#749488\" \/>\r\n <rect x=\"-15\" y=\"-17\" width=\"30\" height=\"5\" fill=\"#D3C5B8\" \/>\r\n <rect x=\"10\" y=\"-24\" width=\"10\" height=\"12\" rx=\"1\" fill=\"#FFFFFF\" \/>\r\n <\/g>\r\n\r\n {\/* 7. Wall Art 1 (Left side, matching reference) *\/}\r\n <g transform=\"translate(320, 120)\">\r\n <rect x=\"0\" y=\"0\" width=\"90\" height=\"110\" fill=\"#EFEFEF\" \/>\r\n <rect x=\"0\" y=\"0\" width=\"90\" height=\"110\" fill=\"none\" stroke=\"#D5D5D5\" strokeWidth=\"2\" \/>\r\n <path d=\"M 0 50 Q 45 20 90 70 L 90 110 L 0 110 Z\" fill=\"#4A6B53\" \/>\r\n <path d=\"M 0 0 Q 50 40 90 0\" stroke=\"#C49A6C\" strokeWidth=\"3\" fill=\"none\" \/>\r\n <\/g>\r\n\r\n {\/* 8. Wall Art 2 (Right side) *\/}\r\n <g transform=\"translate(630, 180)\">\r\n <rect x=\"0\" y=\"0\" width=\"80\" height=\"100\" fill=\"#EFEFEF\" \/>\r\n <rect x=\"0\" y=\"0\" width=\"80\" height=\"100\" fill=\"none\" stroke=\"#D5D5D5\" strokeWidth=\"2\" \/>\r\n <ellipse cx=\"40\" cy=\"45\" rx=\"18\" ry=\"25\" fill=\"#E0B634\" \/>\r\n <circle cx=\"65\" cy=\"20\" r=\"4\" stroke=\"#A85D4A\" strokeWidth=\"2\" fill=\"none\" \/>\r\n <circle cx=\"65\" cy=\"40\" r=\"4\" stroke=\"#A85D4A\" strokeWidth=\"2\" fill=\"none\" \/>\r\n <circle cx=\"65\" cy=\"60\" r=\"4\" stroke=\"#A85D4A\" strokeWidth=\"2\" fill=\"none\" \/>\r\n <\/g>\r\n\r\n {\/* 9. Modern Hanging Lamp *\/}\r\n <g transform=\"translate(670, 0)\">\r\n <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"80\" stroke=\"#D5D5D5\" strokeWidth=\"2\" \/>\r\n <path d=\"M -30 130 Q -15 80 0 80 Q 15 80 30 130 Z\" fill=\"#EAE5DF\" \/>\r\n <ellipse cx=\"0\" cy=\"130\" rx=\"30\" ry=\"6\" fill=\"#D3C5B8\" \/>\r\n <\/g>\r\n\r\n {\/* 10. Tall Floor Plant & Framed Art (Right) *\/}\r\n <g transform=\"translate(850, 310)\">\r\n {\/* Leaning Framed Art *\/}\r\n <g transform=\"rotate(-5) translate(-40, 50)\">\r\n <rect x=\"0\" y=\"0\" width=\"70\" height=\"110\" fill=\"#F8F8F8\" stroke=\"#E0E0E0\" strokeWidth=\"2\" \/>\r\n <circle cx=\"35\" cy=\"40\" r=\"15\" stroke=\"#A85D4A\" strokeWidth=\"1.5\" fill=\"none\" strokeDasharray=\"3 3\" \/>\r\n <circle cx=\"45\" cy=\"70\" r=\"10\" stroke=\"#3A2231\" strokeWidth=\"1.5\" fill=\"none\" strokeDasharray=\"2 2\" \/>\r\n <\/g>\r\n\r\n {\/* Structured Plant Pot *\/}\r\n <path d=\"M -15 170 L 25 170 L 20 210 L -10 210 Z\" fill=\"#D5D5D5\" \/>\r\n \r\n {\/* Clean Plant Leaves *\/}\r\n <path d=\"M 5 170 Q -30 80 0 20\" stroke=\"#3B5742\" strokeWidth=\"4\" fill=\"none\" strokeLinecap=\"round\" \/>\r\n <path d=\"M 5 170 Q 40 90 25 10\" stroke=\"#4A6B53\" strokeWidth=\"5\" fill=\"none\" strokeLinecap=\"round\" \/>\r\n <path d=\"M 5 170 Q -15 120 -25 70\" stroke=\"#2E4A35\" strokeWidth=\"3\" fill=\"none\" strokeLinecap=\"round\" \/>\r\n <path d=\"M 5 170 Q 30 130 40 80\" stroke=\"#3B5742\" strokeWidth=\"3\" fill=\"none\" strokeLinecap=\"round\" \/>\r\n <\/g>\r\n\r\n <defs>\r\n <linearGradient id=\"wallGradient\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\r\n <stop offset=\"0%\" stopColor=\"#000000\" stopOpacity=\"0\" \/>\r\n <stop offset=\"100%\" stopColor=\"#000000\" stopOpacity=\"0.1\" \/>\r\n <\/linearGradient>\r\n <\/defs>\r\n <\/svg>\r\n <\/div>\r\n );\r\n\r\n \/\/ Component for each distinct collection\r\n const ColorCollection = ({ collection, whatsappNumber }) => {\r\n const [selectedColor, setSelectedColor] = useState(collection.colors[0]);\r\n\r\n const handleWhatsAppOrder = () => {\r\n const message = `Hello White Sand Paints! \ud83d\udc4b\\n\\nI would like to order a paint color.\\n\\n\ud83c\udfa8 *Collection:* ${collection.category}\\n\ud83c\udff7\ufe0f *Color Name:* ${selectedColor.name}\\n\ud83d\udd8c\ufe0f *Color Code:* ${selectedColor.hex}\\n\\nPlease let me know the next steps!`;\r\n const whatsappUrl = `https:\/\/wa.me\/${whatsappNumber}?text=${encodeURIComponent(message)}`;\r\n window.open(whatsappUrl, '_blank');\r\n };\r\n\r\n return (\r\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24\">\r\n <div className=\"flex flex-col md:flex-row gap-8 lg:gap-12 items-start\">\r\n \r\n {\/* LEFT COLUMN *\/}\r\n <div className=\"w-full md:w-1\/3 lg:w-[30%] flex flex-col pt-4\">\r\n <h2 className=\"text-[2.5rem] font-light text-[#4A3B42] mb-6 tracking-wide\">\r\n {collection.category}\r\n <\/h2>\r\n \r\n <div className=\"flex flex-col gap-[6px]\">\r\n {collection.colors.map((color, idx) => {\r\n const isSelected = selectedColor.name === color.name;\r\n return (\r\n <button\r\n key={idx}\r\n onClick={() => setSelectedColor(color)}\r\n className={`w-full py-[14px] px-4 text-center transition-all duration-200 ${isSelected ? 'scale-[1.02] shadow-md z-10 border-l-4 border-[#4A2D41]' : 'hover:scale-[1.01] shadow-sm border-l-4 border-transparent'}`}\r\n style={{ \r\n backgroundColor: color.hex,\r\n borderRadius: '3px'\r\n }}\r\n >\r\n <span className=\"text-white color-btn-text text-[15px] font-normal tracking-wide\">\r\n {color.name}\r\n <\/span>\r\n <\/button>\r\n );\r\n })}\r\n <\/div>\r\n\r\n <button \r\n onClick={handleWhatsAppOrder}\r\n className=\"mt-6 mx-auto w-32 py-2.5 bg-[#4A2D41] hover:bg-[#3A2231] text-white rounded-[4px] shadow-lg flex items-center justify-center gap-2 transition-colors duration-300\"\r\n >\r\n <i className=\"fab fa-whatsapp text-[#54A868] text-lg\"><\/i>\r\n <span className=\"font-light tracking-wide text-[15px]\">Buy<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n {\/* RIGHT COLUMN *\/}\r\n <div className=\"w-full md:w-2\/3 lg:w-[70%]\">\r\n <RoomVisualizer color={selectedColor.hex} \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n function App() {\r\n const whatsappNumber = \"966552474087\";\r\n\r\n return (\r\n <div className=\"w-full min-h-screen py-10\">\r\n <h1 className=\"text-center text-4xl sm:text-5xl font-bold text-[#3A2231] mb-16 tracking-tight\">\r\n Our Colors\r\n <\/h1>\r\n \r\n {colorData.map((collection, idx) => (\r\n <ColorCollection \r\n key={idx} \r\n collection={collection} \r\n whatsappNumber={whatsappNumber} \r\n \/>\r\n ))}\r\n <\/div>\r\n );\r\n }\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t <\/div>\r\n <\/div>\r\n \t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>White Sand Paints – Our Colors<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7090","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/7090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/comments?post=7090"}],"version-history":[{"count":14,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/7090\/revisions"}],"predecessor-version":[{"id":7958,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/7090\/revisions\/7958"}],"wp:attachment":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/media?parent=7090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\n \n

\r\n

\r\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n White Sand Paints - Our Colors<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600&display=swap');\r\n body {\r\n \/* White background *\/\r\n background-color: #FFFFFF; \r\n font-family: 'Outfit', sans-serif;\r\n margin: 0;\r\n padding: 0;\r\n overflow-x: hidden;\r\n }\r\n \/* Custom text shadow to make white text readable on light colors *\/\r\n .color-btn-text {\r\n text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState } = React;\r\n\r\n \/\/ Comprehensive database of all colors (Updated with completely new modern collections)\r\n const colorData = [\r\n {\r\n category: \"Lumina\", \/\/ Luminous, airy pastels\r\n colors: [\r\n { name: \"Morning Dew\", hex: \"#E8F2EB\" },\r\n { name: \"Hazy Lavender\", hex: \"#E6E1FA\" },\r\n { name: \"Sunlit Peach\", hex: \"#FDE9D9\" },\r\n { name: \"Mistral Blue\", hex: \"#DFEBF0\" },\r\n { name: \"Minted Ice\", hex: \"#E0F0E9\" },\r\n { name: \"Rosy Dawn\", hex: \"#F7E1E4\" },\r\n { name: \"Soft Glow\", hex: \"#FAF2D4\" }\r\n ]\r\n },\r\n {\r\n category: \"Terra Firma\", \/\/ Rich, earthy, saturated tones\r\n colors: [\r\n { name: \"Canyon Clay\", hex: \"#BC5D4B\" },\r\n { name: \"Deep Ochre\", hex: \"#C98A3C\" },\r\n { name: \"Burnt Siena\", hex: \"#944A37\" },\r\n { name: \"Roasted Pecan\", hex: \"#6E4B3D\" },\r\n { name: \"Wild Mustard\", hex: \"#BFA146\" },\r\n { name: \"Smoked Paprika\", hex: \"#A34839\" },\r\n { name: \"Umber Shadow\", hex: \"#52372E\" }\r\n ]\r\n },\r\n {\r\n category: \"Sylva\", \/\/ Deep forest and botanical vibes\r\n colors: [\r\n { name: \"Banyan Tree\", hex: \"#4A5D23\" },\r\n { name: \"Fern Frond\", hex: \"#637A4B\" },\r\n { name: \"Juniper Berry\", hex: \"#394A50\" },\r\n { name: \"Mossy Rock\", hex: \"#7A8760\" },\r\n { name: \"Nightshade\", hex: \"#41394D\" },\r\n { name: \"Evergreen Canopy\", hex: \"#2F4538\" },\r\n { name: \"Wild Ivy\", hex: \"#536E4F\" }\r\n ]\r\n },\r\n {\r\n category: \"Aqua Deep\", \/\/ Oceans and deep waterways\r\n colors: [\r\n { name: \"Mariana Trench\", hex: \"#1B3045\" },\r\n { name: \"Lagoon Teal\", hex: \"#2C7A7B\" },\r\n { name: \"Baltic Sea\", hex: \"#476270\" },\r\n { name: \"Aegean Blue\", hex: \"#4E87A1\" },\r\n { name: \"Kelp Forest\", hex: \"#3A5F4E\" },\r\n { name: \"Abyssal Indigo\", hex: \"#232B45\" },\r\n { name: \"Cyan Surge\", hex: \"#1D7A8F\" }\r\n ]\r\n },\r\n {\r\n category: \"Aura\", \/\/ Vibrant, moody sunset tones\r\n colors: [\r\n { name: \"Electric Plum\", hex: \"#6B305C\" },\r\n { name: \"Crimson Velvet\", hex: \"#8A2036\" },\r\n { name: \"Magenta Dusk\", hex: \"#8F3F65\" },\r\n { name: \"Saffron Fire\", hex: \"#D16B28\" },\r\n { name: \"Burnt Orange\", hex: \"#B85423\" },\r\n { name: \"Amethyst Shadow\", hex: \"#5B4A6B\" },\r\n { name: \"Ruby Embers\", hex: \"#731C2D\" }\r\n ]\r\n },\r\n {\r\n category: \"Solstice\", \/\/ Warm, high-energy brights\r\n colors: [\r\n { name: \"Mango Sorbet\", hex: \"#F4B04A\" },\r\n { name: \"Sunflower Field\", hex: \"#E8C138\" },\r\n { name: \"Coral Pink\", hex: \"#F07865\" },\r\n { name: \"Tangerine Zing\", hex: \"#F26F3D\" },\r\n { name: \"Lemon Tart\", hex: \"#EADD69\" },\r\n { name: \"Apricot Crush\", hex: \"#F49C65\" },\r\n { name: \"Golden Ticket\", hex: \"#D9AB42\" }\r\n ]\r\n },\r\n {\r\n category: \"Strata\", \/\/ Stones, minerals, and concrete\r\n colors: [\r\n { name: \"Basalt Black\", hex: \"#2E2E2E\" },\r\n { name: \"Granite Peak\", hex: \"#6B6B6B\" },\r\n { name: \"Riverstone\", hex: \"#8E9294\" },\r\n { name: \"Limestone Wash\", hex: \"#D4D3CD\" },\r\n { name: \"Slate Shingle\", hex: \"#555C61\" },\r\n { name: \"Quartz Dust\", hex: \"#E6E3DF\" },\r\n { name: \"Obsidian\", hex: \"#1A1A1A\" }\r\n ]\r\n },\r\n {\r\n category: \"Aether\", \/\/ The ultimate neutral off-whites\r\n colors: [\r\n { name: \"Cloud Nine\", hex: \"#F9F9F9\" },\r\n { name: \"Oatmilk\", hex: \"#F0EAD6\" },\r\n { name: \"Arctic Wind\", hex: \"#F0F4F8\" },\r\n { name: \"Linen Thread\", hex: \"#EAE3D9\" },\r\n { name: \"Frosted Glass\", hex: \"#E4E9EC\" },\r\n { name: \"Sea Salt\", hex: \"#EDEBE6\" },\r\n { name: \"Porcelain\", hex: \"#F2F4F1\" }\r\n ]\r\n },\r\n {\r\n category: \"Velvet\", \/\/ Sophisticated muted darks\r\n colors: [\r\n { name: \"Plum Truffle\", hex: \"#4A3B42\" },\r\n { name: \"Espresso Crema\", hex: \"#3B2F2F\" },\r\n { name: \"Inkwell\", hex: \"#29313A\" },\r\n { name: \"Billiard Green\", hex: \"#2A4036\" },\r\n { name: \"Midnight Aubergine\", hex: \"#362837\" },\r\n { name: \"Peacock Feather\", hex: \"#234E57\" },\r\n { name: \"Fig Preserve\", hex: \"#4C2E38\" }\r\n ]\r\n }\r\n ];\r\n\r\n \/\/ Clean, ordered, highly detailed vector room visualizer\r\n const RoomVisualizer = ({ color }) => (\r\n <div className=\"w-full relative shadow-[0_8px_30px_rgba(0,0,0,0.12)] bg-white rounded-md overflow-hidden\" style={{ aspectRatio: '16\/10' }}>\r\n <svg viewBox=\"0 0 1000 625\" preserveAspectRatio=\"xMidYMid slice\" className=\"w-full h-full absolute inset-0\">\r\n {\/* 1. Dynamic Wall *\/}\r\n <rect width=\"100%\" height=\"100%\" fill={color || \"#F2E3C6\"} style={{ transition: \"fill 0.5s ease-in-out\" }} \/>\r\n <rect width=\"100%\" height=\"100%\" fill=\"url(#wallGradient)\" opacity=\"0.3\" pointerEvents=\"none\" \/>\r\n \r\n {\/* 2. Floor & Baseboard *\/}\r\n <polygon points=\"0,480 1000,480 1000,625 0,625\" fill=\"#EAE7DF\" \/>\r\n <rect x=\"0\" y=\"468\" width=\"1000\" height=\"12\" fill=\"#FFFFFF\" opacity=\"0.9\" \/>\r\n <rect x=\"0\" y=\"466\" width=\"1000\" height=\"2\" fill=\"#E0E0E0\" \/> {\/* Baseboard shadow line *\/}\r\n\r\n {\/* Floor Shadows for Grounding Furniture *\/}\r\n <ellipse cx=\"130\" cy=\"495\" rx=\"50\" ry=\"8\" fill=\"rgba(0,0,0,0.06)\" \/> {\/* Mirror shadow *\/}\r\n <ellipse cx=\"280\" cy=\"495\" rx=\"60\" ry=\"10\" fill=\"rgba(0,0,0,0.06)\" \/> {\/* Nightstand shadow *\/}\r\n <ellipse cx=\"500\" cy=\"530\" rx=\"180\" ry=\"20\" fill=\"rgba(0,0,0,0.08)\" \/> {\/* Bed shadow *\/}\r\n <ellipse cx=\"850\" cy=\"505\" rx=\"60\" ry=\"12\" fill=\"rgba(0,0,0,0.06)\" \/> {\/* Plant shadow *\/}\r\n\r\n {\/* 3. Standing Mirror (Left) *\/}\r\n <g transform=\"translate(80, 150)\">\r\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"340\" rx=\"12\" fill=\"#EFEFEF\" stroke=\"#D5D5D5\" strokeWidth=\"5\" \/>\r\n <rect x=\"8\" y=\"8\" width=\"84\" height=\"324\" rx=\"8\" fill=\"#F4F6F5\" \/>\r\n <polygon points=\"10,10 90,90 90,310 10,230\" fill=\"#FFFFFF\" opacity=\"0.4\" \/>\r\n <line x1=\"20\" y1=\"340\" x2=\"-10\" y2=\"400\" stroke=\"#BCA38F\" strokeWidth=\"7\" strokeLinecap=\"round\" \/>\r\n <\/g>\r\n\r\n {\/* 4. Nightstand & Small Plant (Left of Bed) *\/}\r\n <g transform=\"translate(230, 410)\">\r\n <line x1=\"20\" y1=\"40\" x2=\"15\" y2=\"80\" stroke=\"#BCA38F\" strokeWidth=\"6\" strokeLinecap=\"round\" \/>\r\n <line x1=\"80\" y1=\"40\" x2=\"85\" y2=\"80\" stroke=\"#BCA38F\" strokeWidth=\"6\" strokeLinecap=\"round\" \/>\r\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"40\" rx=\"3\" fill=\"#FFFFFF\" stroke=\"#E5E5E5\" strokeWidth=\"1\" \/>\r\n <rect x=\"5\" y=\"5\" width=\"90\" height=\"30\" fill=\"#FFFFFF\" stroke=\"#F0F0F0\" strokeWidth=\"1\" \/>\r\n <circle cx=\"50\" cy=\"20\" r=\"3\" fill=\"#A0A0A0\" \/>\r\n \r\n {\/* Potted Plant *\/}\r\n <path d=\"M 50 0 Q 30 -40 50 -60 Q 70 -40 50 0\" fill=\"#4A6B53\" \/>\r\n <path d=\"M 45 0 Q 20 -20 15 -40 Q 40 -30 45 0\" fill=\"#3B5742\" \/>\r\n <polygon points=\"40,0 60,0 55,20 45,20\" fill=\"#D3C5B8\" \/>\r\n <\/g>\r\n\r\n {\/* 5. Center Bed *\/}\r\n <g transform=\"translate(340, 310)\">\r\n {\/* Headboard *\/}\r\n <rect x=\"20\" y=\"0\" width=\"280\" height=\"130\" rx=\"6\" fill=\"#F8F8F8\" \/>\r\n <rect x=\"25\" y=\"5\" width=\"270\" height=\"120\" rx=\"4\" fill=\"#F4F4F4\" \/>\r\n \r\n {\/* Pillows - Back row *\/}\r\n <rect x=\"40\" y=\"70\" width=\"110\" height=\"50\" rx=\"12\" fill=\"#FFFFFF\" stroke=\"#EAEAEA\" strokeWidth=\"2\" \/>\r\n <rect x=\"170\" y=\"70\" width=\"110\" height=\"50\" rx=\"12\" fill=\"#FFFFFF\" stroke=\"#EAEAEA\" strokeWidth=\"2\" \/>\r\n \r\n {\/* Pillows - Front row *\/}\r\n <rect x=\"70\" y=\"90\" width=\"80\" height=\"40\" rx=\"10\" fill=\"#EAE5DF\" \/>\r\n <rect x=\"170\" y=\"90\" width=\"80\" height=\"40\" rx=\"10\" fill=\"#EAE5DF\" \/>\r\n \r\n {\/* Mattress & Duvet *\/}\r\n <rect x=\"0\" y=\"120\" width=\"320\" height=\"90\" rx=\"8\" fill=\"#FAFAFA\" stroke=\"#F0F0F0\" strokeWidth=\"1\" \/>\r\n <path d=\"M 0 140 Q 160 135 320 140 L 320 210 L 0 210 Z\" fill=\"#FDFDFD\" \/>\r\n \r\n {\/* Neatly Folded Green Blanket *\/}\r\n <rect x=\"-5\" y=\"170\" width=\"330\" height=\"45\" rx=\"4\" fill=\"#84A599\" \/>\r\n <rect x=\"-5\" y=\"175\" width=\"330\" height=\"5\" fill=\"#749488\" opacity=\"0.3\" \/> {\/* Blanket Fold line *\/}\r\n <\/g>\r\n\r\n {\/* 6. Coffee Table (Center Foreground) *\/}\r\n <g transform=\"translate(500, 560)\">\r\n <line x1=\"-50\" y1=\"10\" x2=\"-70\" y2=\"50\" stroke=\"#BCA38F\" strokeWidth=\"6\" strokeLinecap=\"round\" \/>\r\n <line x1=\"50\" y1=\"10\" x2=\"70\" y2=\"50\" stroke=\"#BCA38F\" strokeWidth=\"6\" strokeLinecap=\"round\" \/>\r\n <line x1=\"0\" y1=\"15\" x2=\"0\" y2=\"55\" stroke=\"#9E836E\" strokeWidth=\"6\" strokeLinecap=\"round\" \/>\r\n <ellipse cx=\"0\" cy=\"0\" rx=\"100\" ry=\"20\" fill=\"#FFFFFF\" stroke=\"#F0F0F0\" strokeWidth=\"2\" \/>\r\n \r\n {\/* Minimalist Books & Cup *\/}\r\n <rect x=\"-20\" y=\"-12\" width=\"40\" height=\"5\" fill=\"#749488\" \/>\r\n <rect x=\"-15\" y=\"-17\" width=\"30\" height=\"5\" fill=\"#D3C5B8\" \/>\r\n <rect x=\"10\" y=\"-24\" width=\"10\" height=\"12\" rx=\"1\" fill=\"#FFFFFF\" \/>\r\n <\/g>\r\n\r\n {\/* 7. Wall Art 1 (Left side, matching reference) *\/}\r\n <g transform=\"translate(320, 120)\">\r\n <rect x=\"0\" y=\"0\" width=\"90\" height=\"110\" fill=\"#EFEFEF\" \/>\r\n <rect x=\"0\" y=\"0\" width=\"90\" height=\"110\" fill=\"none\" stroke=\"#D5D5D5\" strokeWidth=\"2\" \/>\r\n <path d=\"M 0 50 Q 45 20 90 70 L 90 110 L 0 110 Z\" fill=\"#4A6B53\" \/>\r\n <path d=\"M 0 0 Q 50 40 90 0\" stroke=\"#C49A6C\" strokeWidth=\"3\" fill=\"none\" \/>\r\n <\/g>\r\n\r\n {\/* 8. Wall Art 2 (Right side) *\/}\r\n <g transform=\"translate(630, 180)\">\r\n <rect x=\"0\" y=\"0\" width=\"80\" height=\"100\" fill=\"#EFEFEF\" \/>\r\n <rect x=\"0\" y=\"0\" width=\"80\" height=\"100\" fill=\"none\" stroke=\"#D5D5D5\" strokeWidth=\"2\" \/>\r\n <ellipse cx=\"40\" cy=\"45\" rx=\"18\" ry=\"25\" fill=\"#E0B634\" \/>\r\n <circle cx=\"65\" cy=\"20\" r=\"4\" stroke=\"#A85D4A\" strokeWidth=\"2\" fill=\"none\" \/>\r\n <circle cx=\"65\" cy=\"40\" r=\"4\" stroke=\"#A85D4A\" strokeWidth=\"2\" fill=\"none\" \/>\r\n <circle cx=\"65\" cy=\"60\" r=\"4\" stroke=\"#A85D4A\" strokeWidth=\"2\" fill=\"none\" \/>\r\n <\/g>\r\n\r\n {\/* 9. Modern Hanging Lamp *\/}\r\n <g transform=\"translate(670, 0)\">\r\n <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"80\" stroke=\"#D5D5D5\" strokeWidth=\"2\" \/>\r\n <path d=\"M -30 130 Q -15 80 0 80 Q 15 80 30 130 Z\" fill=\"#EAE5DF\" \/>\r\n <ellipse cx=\"0\" cy=\"130\" rx=\"30\" ry=\"6\" fill=\"#D3C5B8\" \/>\r\n <\/g>\r\n\r\n {\/* 10. Tall Floor Plant & Framed Art (Right) *\/}\r\n <g transform=\"translate(850, 310)\">\r\n {\/* Leaning Framed Art *\/}\r\n <g transform=\"rotate(-5) translate(-40, 50)\">\r\n <rect x=\"0\" y=\"0\" width=\"70\" height=\"110\" fill=\"#F8F8F8\" stroke=\"#E0E0E0\" strokeWidth=\"2\" \/>\r\n <circle cx=\"35\" cy=\"40\" r=\"15\" stroke=\"#A85D4A\" strokeWidth=\"1.5\" fill=\"none\" strokeDasharray=\"3 3\" \/>\r\n <circle cx=\"45\" cy=\"70\" r=\"10\" stroke=\"#3A2231\" strokeWidth=\"1.5\" fill=\"none\" strokeDasharray=\"2 2\" \/>\r\n <\/g>\r\n\r\n {\/* Structured Plant Pot *\/}\r\n <path d=\"M -15 170 L 25 170 L 20 210 L -10 210 Z\" fill=\"#D5D5D5\" \/>\r\n \r\n {\/* Clean Plant Leaves *\/}\r\n <path d=\"M 5 170 Q -30 80 0 20\" stroke=\"#3B5742\" strokeWidth=\"4\" fill=\"none\" strokeLinecap=\"round\" \/>\r\n <path d=\"M 5 170 Q 40 90 25 10\" stroke=\"#4A6B53\" strokeWidth=\"5\" fill=\"none\" strokeLinecap=\"round\" \/>\r\n <path d=\"M 5 170 Q -15 120 -25 70\" stroke=\"#2E4A35\" strokeWidth=\"3\" fill=\"none\" strokeLinecap=\"round\" \/>\r\n <path d=\"M 5 170 Q 30 130 40 80\" stroke=\"#3B5742\" strokeWidth=\"3\" fill=\"none\" strokeLinecap=\"round\" \/>\r\n <\/g>\r\n\r\n <defs>\r\n <linearGradient id=\"wallGradient\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\r\n <stop offset=\"0%\" stopColor=\"#000000\" stopOpacity=\"0\" \/>\r\n <stop offset=\"100%\" stopColor=\"#000000\" stopOpacity=\"0.1\" \/>\r\n <\/linearGradient>\r\n <\/defs>\r\n <\/svg>\r\n <\/div>\r\n );\r\n\r\n \/\/ Component for each distinct collection\r\n const ColorCollection = ({ collection, whatsappNumber }) => {\r\n const [selectedColor, setSelectedColor] = useState(collection.colors[0]);\r\n\r\n const handleWhatsAppOrder = () => {\r\n const message = `Hello White Sand Paints! \ud83d\udc4b\\n\\nI would like to order a paint color.\\n\\n\ud83c\udfa8 *Collection:* ${collection.category}\\n\ud83c\udff7\ufe0f *Color Name:* ${selectedColor.name}\\n\ud83d\udd8c\ufe0f *Color Code:* ${selectedColor.hex}\\n\\nPlease let me know the next steps!`;\r\n const whatsappUrl = `https:\/\/wa.me\/${whatsappNumber}?text=${encodeURIComponent(message)}`;\r\n window.open(whatsappUrl, '_blank');\r\n };\r\n\r\n return (\r\n <div className=\"w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24\">\r\n <div className=\"flex flex-col md:flex-row gap-8 lg:gap-12 items-start\">\r\n \r\n {\/* LEFT COLUMN *\/}\r\n <div className=\"w-full md:w-1\/3 lg:w-[30%] flex flex-col pt-4\">\r\n <h2 className=\"text-[2.5rem] font-light text-[#4A3B42] mb-6 tracking-wide\">\r\n {collection.category}\r\n <\/h2>\r\n \r\n <div className=\"flex flex-col gap-[6px]\">\r\n {collection.colors.map((color, idx) => {\r\n const isSelected = selectedColor.name === color.name;\r\n return (\r\n <button\r\n key={idx}\r\n onClick={() => setSelectedColor(color)}\r\n className={`w-full py-[14px] px-4 text-center transition-all duration-200 ${isSelected ? 'scale-[1.02] shadow-md z-10 border-l-4 border-[#4A2D41]' : 'hover:scale-[1.01] shadow-sm border-l-4 border-transparent'}`}\r\n style={{ \r\n backgroundColor: color.hex,\r\n borderRadius: '3px'\r\n }}\r\n >\r\n <span className=\"text-white color-btn-text text-[15px] font-normal tracking-wide\">\r\n {color.name}\r\n <\/span>\r\n <\/button>\r\n );\r\n })}\r\n <\/div>\r\n\r\n <button \r\n onClick={handleWhatsAppOrder}\r\n className=\"mt-6 mx-auto w-32 py-2.5 bg-[#4A2D41] hover:bg-[#3A2231] text-white rounded-[4px] shadow-lg flex items-center justify-center gap-2 transition-colors duration-300\"\r\n >\r\n <i className=\"fab fa-whatsapp text-[#54A868] text-lg\"><\/i>\r\n <span className=\"font-light tracking-wide text-[15px]\">Buy<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n {\/* RIGHT COLUMN *\/}\r\n <div className=\"w-full md:w-2\/3 lg:w-[70%]\">\r\n <RoomVisualizer color={selectedColor.hex} \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n function App() {\r\n const whatsappNumber = \"966552474087\";\r\n\r\n return (\r\n <div className=\"w-full min-h-screen py-10\">\r\n <h1 className=\"text-center text-4xl sm:text-5xl font-bold text-[#3A2231] mb-16 tracking-tight\">\r\n Our Colors\r\n <\/h1>\r\n \r\n {colorData.map((collection, idx) => (\r\n <ColorCollection \r\n key={idx} \r\n collection={collection} \r\n whatsappNumber={whatsappNumber} \r\n \/>\r\n ))}\r\n <\/div>\r\n );\r\n }\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t <\/div>\r\n <\/div>\r\n \t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>White Sand Paints – Our Colors<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7090","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/7090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/comments?post=7090"}],"version-history":[{"count":14,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/7090\/revisions"}],"predecessor-version":[{"id":7958,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/7090\/revisions\/7958"}],"wp:attachment":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/media?parent=7090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}