Spaces:
Running
Running
File size: 112,390 Bytes
8f05141 8e9a0b4 8ac8f38 8e9a0b4 3cd2ea8 8ac8f38 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8ac8f38 3cd2ea8 8ac8f38 3cd2ea8 8ac8f38 8f05141 c03c8e8 8ac8f38 3b1761e 8f05141 7fe0360 8f05141 e3d65c0 a3b51ef e3d65c0 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 8ac8f38 8f05141 3cd2ea8 8f05141 4a06455 8e9a0b4 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 e3d65c0 3cd2ea8 8f05141 4a06455 8e9a0b4 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 f24ef07 8f05141 3cd2ea8 8f05141 3cd2ea8 7fe0360 3cd2ea8 7fe0360 3cd2ea8 8f05141 c03c8e8 8f05141 8e9a0b4 8f05141 3cd2ea8 7fe0360 8f05141 3cd2ea8 7fe0360 8f05141 3cd2ea8 71aac73 8f05141 3cd2ea8 7fe0360 8f05141 3cd2ea8 a6329f3 7fe0360 8f05141 3cd2ea8 8f05141 8e9a0b4 8f05141 3cd2ea8 8f05141 3cd2ea8 8e9a0b4 8f05141 3cd2ea8 8e9a0b4 8f05141 3cd2ea8 7fe0360 8f05141 3cd2ea8 7fe0360 8f05141 3cd2ea8 a6329f3 7fe0360 8f05141 c03c8e8 8f05141 8e9a0b4 8f05141 3cd2ea8 8f05141 3cd2ea8 419b5a9 8f05141 3cd2ea8 8e9a0b4 8f05141 3cd2ea8 e5cca87 8f05141 7fe0360 ad022d7 7fe0360 8f05141 3cd2ea8 419b5a9 8f05141 3cd2ea8 a6329f3 7fe0360 419b5a9 7fe0360 419b5a9 b2ff8ae 419b5a9 7fe0360 8f05141 3cd2ea8 8f05141 3cd2ea8 7fe0360 3cd2ea8 7fe0360 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 8f05141 3cd2ea8 00c416e 8f05141 3cd2ea8 00c416e 8f05141 3cd2ea8 00c416e 8f05141 3cd2ea8 00c416e 8f05141 3cd2ea8 8e9a0b4 3cd2ea8 8f05141 3cd2ea8 00c416e 8f05141 3cd2ea8 00c416e 8f05141 3cd2ea8 00c416e 8f05141 3cd2ea8 00c416e 8f05141 00c416e 8f05141 3cd2ea8 8e9a0b4 3cd2ea8 8f05141 3cd2ea8 00c416e 8f05141 3cd2ea8 00c416e 8f05141 3cd2ea8 00c416e 8f05141 3cd2ea8 00c416e 8f05141 00c416e 8f05141 3cd2ea8 3b1761e 3cd2ea8 8f05141 3cd2ea8 3b1761e 8f05141 3cd2ea8 3b1761e 8f05141 3cd2ea8 3b1761e 8f05141 3cd2ea8 3b1761e 8f05141 3b1761e 8f05141 ea06104 8ac8f38 ea06104 7fe0360 ea06104 7fe0360 ea06104 f24ef07 ea06104 f24ef07 ea06104 b2ff8ae ea06104 b2ff8ae ea06104 f24ef07 ea06104 b2ff8ae ea06104 b2ff8ae ea06104 f24ef07 ea06104 b2ff8ae ea06104 b2ff8ae ea06104 f24ef07 ea06104 f24ef07 ea06104 7fe0360 ea06104 f24ef07 ea06104 f24ef07 ea06104 f24ef07 ea06104 7fe0360 ea06104 7fe0360 ea06104 8e9a0b4 ea06104 8e9a0b4 ea06104 8e9a0b4 ea06104 8e9a0b4 ea06104 8e9a0b4 ea06104 7fe0360 ea06104 7fe0360 ea06104 b2ff8ae ea06104 b2ff8ae ea06104 b2ff8ae ea06104 b2ff8ae ea06104 b2ff8ae ea06104 b2ff8ae ea06104 718a374 ea06104 7fe0360 ea06104 7fe0360 ea06104 8e9a0b4 ea06104 957bce4 ea06104 957bce4 ea06104 957bce4 ea06104 957bce4 ea06104 957bce4 ea06104 957bce4 ea06104 957bce4 ea06104 957bce4 ea06104 957bce4 3b1761e 957bce4 3b1761e 957bce4 ea06104 ae6428a ea06104 ae6428a 957bce4 ea06104 8e9a0b4 ea06104 8e9a0b4 ae6428a ea06104 ebb1857 ea06104 12f6a40 f24ef07 12f6a40 f24ef07 12f6a40 f24ef07 12f6a40 f24ef07 12f6a40 ea06104 7fe0360 b2ff8ae ebb1857 7fe0360 ebb1857 7fe0360 ebb1857 7fe0360 ebb1857 7fe0360 ebb1857 7fe0360 ebb1857 7fe0360 ebb1857 7fe0360 ebb1857 7fe0360 ebb1857 ea06104 12f6a40 7fe0360 8f05141 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jay's Mobile Wash - Premium Mobile Detailing in LA & OC</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes rainbowGlow {
0% { text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000; }
16% { text-shadow: 0 0 5px #ff8000, 0 0 10px #ff8000; }
33% { text-shadow: 0 0 5px #ffff00, 0 0 10px #ffff00; }
50% { text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00; }
66% { text-shadow: 0 0 5px #0000ff, 0 0 10px #0000ff; }
83% { text-shadow: 0 0 5px #8000ff, 0 0 10px #8000ff; }
100% { text-shadow: 0 0 5px #ff0080, 0 0 10px #ff0080; }
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes shine {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
.pulse-animation {
animation: pulse 2s infinite;
}
.shine-text {
background: linear-gradient(90deg, #fff, #b530ff, #ff1744, #fff);
background-size: 200% auto;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
animation: shine 3s linear infinite;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(181, 48, 255, 0.3), 0 10px 10px -5px rgba(181, 48, 255, 0.1);
}
.service-card::after {
content: '';
position: absolute;
bottom: -20px;
left: 20px;
width: 60%;
height: 30px;
background: linear-gradient(to right, rgba(255,255,255,0.8), rgba(255,255,255,0));
border-radius: 50%;
filter: blur(5px);
opacity: 0;
transition: opacity 0.3s ease;
}
.service-card:hover::after {
opacity: 0.7;
animation: foamDrip 2s ease-in-out infinite;
}
@keyframes foamDrip {
0%, 100% {
transform: translateY(0) scaleX(0.9);
}
50% {
transform: translateY(5px) scaleX(1);
}
}
.gallery-item:hover {
transform: scale(1.05);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.faq-answer.active {
max-height: 500px;
}
.rotate-180 {
transform: rotate(180deg);
}
.scroll-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(to right, #b530ff, #ff1744);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.scroll-top.show {
opacity: 1;
transform: translateY(0);
}
.scroll-top:hover {
transform: scale(1.1) translateY(0);
}
@keyframes drip1 {
0% { transform: translateY(-100px); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes drip2 {
0% { transform: translateY(-150px); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes drip3 {
0% { transform: translateY(-200px); opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes drip4 {
0% { transform: translateY(-250px); opacity: 0; }
25% { opacity: 1; }
75% { opacity: 1; }
100% { transform: translateY(100vh); opacity: 0; }
}
.animate-drip1 {
animation: drip1 8s linear infinite;
}
.animate-drip2 {
animation: drip2 10s linear infinite;
animation-delay: 2s;
}
.animate-drip3 {
animation: drip3 12s linear infinite;
animation-delay: 1s;
}
.animate-drip4 {
animation: drip4 9s linear infinite;
animation-delay: 3s;
}
@keyframes tvStatic {
0% { background-position: 0 0; }
100% { background-position: 100% 100%; }
}
.gradient-border {
position: relative;
border-radius: 1rem;
}
.gradient-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
padding: 3px;
background: linear-gradient(45deg, #b530ff, #ff1744);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
pointer-events: none;
}
.gradient-text {
background: linear-gradient(45deg, #b530ff, #ff1744);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.modal-content {
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 font-sans">
<!-- Navigation -->
<nav id="main-nav" class="fixed top-0 left-0 w-full bg-gray-900/90 backdrop-blur-md shadow-lg z-50 px-6 py-4 transition-all duration-300 border-b border-gray-800">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<div class="flex items-center">
<img src="https://i.ibb.co/1Yk0MChV/F91-F533-E-C5-CF-4-D18-A295-7-B40-C430-B8-E6-1.png" alt="Jay's Mobile Wash Logo" class="h-16 mr-3 pulse-animation">
<span class="text-white text-2xl font-bold tracking-tight gradient-text">Jay's Mobile Wash</span>
</div>
<!-- Desktop Menu -->
<ul class="hidden md:flex space-x-8">
<li><a href="#home" class="text-white hover:text-purple-400 font-medium transition duration-300">Home</a></li>
<li><a href="#services" class="text-white hover:text-purple-400 font-medium transition duration-300">Services</a></li>
<li><a href="#products" class="text-white hover:text-purple-400 font-medium transition duration-300">Products</a></li>
<li><a href="#stats" class="text-white hover:text-purple-400 font-medium transition duration-300">Why Us</a></li>
<li><a href="#faq" class="text-white hover:text-purple-400 font-medium transition duration-300">FAQ</a></li>
<li><a href="#contact" class="text-white hover:text-purple-400 font-medium transition duration-300">Contact</a></li>
</ul>
<!-- Mobile Menu Button -->
<button id="mobile-menu-button" class="md:hidden text-white text-3xl focus:outline-none">
☰
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-800/95 backdrop-blur-sm absolute top-full left-0 w-full px-6 py-4">
<ul class="space-y-4">
<li><a href="#home" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Home</a></li>
<li><a href="#services" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Services</a></li>
<li><a href="#products" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Products</a></li>
<li><a href="#stats" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Why Us</a></li>
<li><a href="#faq" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">FAQ</a></li>
<li><a href="#contact" class="block text-white hover:text-purple-400 font-medium transition duration-300 py-2">Contact</a></li>
</ul>
</div>
</nav>
<!-- Scroll to top button -->
<div id="scroll-top" class="scroll-top">
<i class="fas fa-arrow-up"></i>
</div>
<!-- Hero Section -->
<section id="home" class="relative pt-32 pb-20 md:pt-40 md:pb-28 px-6 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-gray-900/70 via-gray-900/70 to-gray-900/70 z-0"></div>
<div class="absolute inset-0 bg-[url('https://i.ibb.co/60HcTmYR/image.webp')] bg-cover bg-center z-0 opacity-90 animate-[tvStatic_60s_linear_infinite]"></div>
<div class="max-w-7xl mx-auto relative z-10 text-center">
<img src="https://i.ibb.co/1Yk0MChV/F91-F533-E-C5-CF-4-D18-A295-7-B40-C430-B8-E6-1.png" alt="Jay's Mobile Wash Logo" class="h-32 mx-auto mb-6 float-animation">
<h1 class="text-5xl md:text-7xl font-bold mb-6 shine-text">Jay's Mobile Wash</h1>
<p class="text-xl md:text-2xl italic mb-10 opacity-90">Premium Mobile Detailing - We Come to You!</p>
<div class="flex flex-col md:flex-row justify-center gap-4">
<a href="tel:5622289429" class="bg-green-600 hover:bg-green-700 text-white font-bold py-4 px-8 rounded-full text-lg md:text-xl transition duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2 pulse-animation">
<i class="fas fa-phone"></i> Call Now: 562-228-9429
</a>
<a href="#services" class="bg-white hover:bg-gray-100 text-purple-600 font-bold py-4 px-8 rounded-full text-lg md:text-xl transition duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2 float-animation">
<i class="fas fa-list"></i> View Services & Pricing
</a>
</div>
<!-- Stats Counter -->
<div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
<div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl text-center border border-gray-700 hover:border-purple-500 transition duration-300">
<div class="w-16 h-16 bg-purple-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-car text-purple-400 text-2xl"></i>
</div>
<div class="text-3xl font-bold gradient-text" id="cars-detailed">2500+</div>
<p class="text-gray-400 mt-2">Cars Detailed</p>
</div>
<div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl text-center border border-gray-700 hover:border-purple-500 transition duration-300">
<div class="w-16 h-16 bg-purple-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-star text-purple-400 text-2xl"></i>
</div>
<div class="text-3xl font-bold gradient-text" id="five-stars">4.9★</div>
<p class="text-gray-400 mt-2">Average Rating</p>
</div>
<div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl text-center border border-gray-700 hover:border-purple-500 transition duration-300">
<div class="w-16 h-16 bg-purple-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-map-marker-alt text-purple-400 text-2xl"></i>
</div>
<div class="text-3xl font-bold gradient-text" id="service-area">30+</div>
<p class="text-gray-400 mt-2">Cities Served</p>
</div>
<div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl text-center border border-gray-700 hover:border-purple-500 transition duration-300">
<div class="w-16 h-16 bg-purple-600/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-thumbs-up text-purple-400 text-2xl"></i>
</div>
<div class="text-3xl font-bold gradient-text" id="appointments">98%</div>
<p class="text-gray-400 mt-2">Positive Feedback</p>
</div>
<!-- Custom Package - Full Width -->
<div class="col-span-4 service-card bg-gradient-to-br from-purple-900/50 to-pink-900/50 rounded-xl overflow-hidden shadow-lg transition duration-300 cursor-pointer border-2 border-purple-500/50 hover:border-purple-400 relative">
<div class="flex flex-col md:flex-row">
<div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center md:text-left md:w-1/3">
<h3 class="text-3xl font-bold mb-2">Custom Package</h3>
<p class="text-xl mb-4">Tailored to your exact needs</p>
<a href="tel:5622289429" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
<i class="fas fa-phone mr-2"></i> Call to Customize
</a>
</div>
<div class="p-6 md:w-2/3">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-xl font-bold mb-3 text-yellow-400">Exterior Options</h4>
<ul class="space-y-2">
<li class="flex items-start">
<span class="text-yellow-400 mr-2">★</span>
Ceramic Coating (6mo-5yr)
</li>
<li class="flex items-start">
<span class="text-yellow-400 mr-2">★</span>
Paint Correction & Polish
</li>
<li class="flex items-start">
<span class="text-yellow-400 mr-2">★</span>
Headlight Restoration
</li>
<li class="flex items-start">
<span class="text-yellow-400 mr-2">★</span>
Wheel & Tire Detailing
</li>
</ul>
</div>
<div>
<h4 class="text-xl font-bold mb-3 text-yellow-400">Interior Options</h4>
<ul class="space-y-2">
<li class="flex items-start">
<span class="text-yellow-400 mr-2">★</span>
Complete Leather Treatment
</li>
<li class="flex items-start">
<span class="text-yellow-400 mr-2">★</span>
Odor Elimination
</li>
<li class="flex items-start">
<span class="text-yellow-400 mr-2">★</span>
Carpet/Seat Shampoo
</li>
<li class="flex items-start">
<span class="text-yellow-400 mr-2">★</span>
Ceramic Interior Coating
</li>
</ul>
</div>
</div>
<div class="mt-6 text-center md:text-left">
<p class="text-gray-300">We'll work with you to create the perfect package for your vehicle and budget!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-16 bg-gray-800 text-gray-100 px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<span class="text-purple-400 font-semibold">Our Services</span>
<h2 class="text-4xl font-bold mt-2 gradient-text">Detailing Packages</h2>
<p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
Professional Care For Your Vehicle, Delivered To Your Location
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Basic Package -->
<div class="service-card bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-500 cursor-pointer border border-gray-600 hover:border-purple-500 relative">
<div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center relative">
<h3 class="text-2xl font-bold mb-2">Jay's Basic</h3>
<p class="text-xl">Small Car: $70 | SUV: $80</p>
</div>
<div class="p-6">
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Two-step wash: Alkaline pre-wash (super foam) + ceramic shampoo wash
</li>
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
SiO₂ ceramic wheel decontamination
</li>
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Full interior compression with thorough wipedown (all surfaces, crevices, vents)
</li>
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
HEPA vacuum extraction
</li>
</ul>
<a href="https://book.squareup.com/appointments/pzfva2vycwfzv7/location/LC0M9APDNYE44/services?show_locations=true" target="_blank" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
Book Now <i class="fas fa-arrow-right ml-2"></i>
</a>
<div class="mt-4">
<div class="border-t border-gray-600 pt-4">
<button onclick="toggleDetails('basic')" class="w-full flex justify-between items-center text-white font-medium py-2">
<span>Show Details</span>
<i class="fas fa-chevron-down transition-transform duration-300" id="basic-arrow"></i>
</button>
<div id="basic-details" class="hidden mt-2 text-gray-300 text-sm space-y-2">
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
<div>
Alkaline snow foam pre-wash (pH 10.5) + SiO₂-infused ceramic shampoo wash
<div class="text-xs text-gray-400 mt-1">
<span class="font-semibold">Snow foam</span> utilizes surfactant technology to encapsulate and lift particulate matter.
<span class="font-semibold">Alkaline formulation</span> effectively emulsifies hydrocarbon-based contaminants while maintaining paint-safe pH levels.
</div>
</div>
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Wheel decontamination using SiO₂-based nanotechnology cleaner
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Interior surface sanitization with antimicrobial agents
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
HEPA vacuum extraction for particulate removal
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Hydrophobic glass treatment with siloxane polymers
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Luxury Package -->
<div class="service-card bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 cursor-pointer border border-gray-600 hover:border-purple-500 relative">
<div class="absolute top-4 right-4 bg-pink-600 text-white text-xs font-bold px-3 py-1 rounded-full z-10">
POPULAR
</div>
<div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center">
<h3 class="text-2xl font-bold mb-2">Jay's Luxury</h3>
<p class="text-xl">Small Car: $130 | SUV: $140</p>
</div>
<div class="p-6">
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Everything in Basic package
</li>
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
SiO₂-infused ceramic spray wax with intense gloss enhancers
</li>
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Full textile cleaning with brushes and scrub pads
</li>
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Professional exterior trim restoration with UV-resistant polymer protectants (matte or semi-gloss finish options)
</li>
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Advanced polymer-based UV protection system for interior vinyl components
</li>
</ul>
<a href="https://book.squareup.com/appointments/pzfva2vycwfzv7/location/LC0M9APDNYE44/services?show_locations=true" target="_blank" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
Book Now <i class="fas fa-arrow-right ml-2"></i>
</a>
<div class="mt-4">
<div class="border-t border-gray-600 pt-4">
<button onclick="toggleDetails('luxury')" class="w-full flex justify-between items-center text-white font-medium py-2">
<span>Show Details</span>
<i class="fas fa-chevron-down transition-transform duration-300" id="luxury-arrow"></i>
</button>
<div id="luxury-details" class="hidden mt-2 text-gray-300 text-sm space-y-2">
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Everything included in Basic package, plus more
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Deep wheel/rim cleaning with alkaline (non-acid) SiO₂-infused super cleaner
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Interior SiO₂ nanocoating for hydrophobic surface modification
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Premium trim restoration utilizing advanced UV-stable polymer rejuvenation technology
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Long-lasting protective coating that bonds to your paint (lasts up to 90 days)
</div>
</div>
</div>
</div>
</div>
</div>
<div class="service-card bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 cursor-pointer border border-gray-600 hover:border-purple-500 relative">
<div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center">
<h3 class="text-2xl font-bold mb-2">Jay's Max</h3>
<p class="text-xl">Small Car: $200 | SUV: $210</p>
</div>
<div class="p-6">
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Everything in Luxury package
</li>
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Chrome polishing for wheels and trim (restores shine and protects)
</li>
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
High-temperature (212°F/100°C) steam sanitation with vapor distillation technology
</li>
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Mechanical decontamination via clay bar methodology to remove bonded surface contaminants
</li>
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Full paint iron decontamination (removes embedded brake dust, rail dust, and iron contaminants)
</li>
<li class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
<div>
<div>Choose one:</div>
<div class="ml-4 mt-1">
<div class="flex items-start">
<span class="text-green-400 mr-2">•</span>
Hydrophobic SiO₂ infused graphene sealant (6-month protection)
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">•</span>
Traditional ceramic paste wax (4-month protection, deeper gloss)
</div>
</div>
</div>
</li>
</ul>
<a href="https://book.squareup.com/appointments/pzfva2vycwfzv7/location/LC0M9APDNYE44/services?show_locations=true" target="_blank" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 flex items-center justify-center">
Book Now <i class="fas fa-arrow-right ml-2"></i>
</a>
<div class="mt-4">
<div class="border-t border-gray-600 pt-4">
<button onclick="toggleDetails('max')" class="w-full flex justify-between items-center text-white font-medium py-2">
<span>Show Details</span>
<i class="fas fa-chevron-down transition-transform duration-300" id="max-arrow"></i>
</button>
<div id="max-details" class="hidden mt-2 text-gray-300 text-sm space-y-2">
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Complete Luxury package implementation
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Ceramic paste wax application (4-month protection, deeper gloss)
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
SiO₂ nanocoating for interior surface modification
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Mechanical decontamination via clay bar methodology
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Full iron decontamination using specialized iron remover that dissolves embedded metallic particles (turns purple as it works)
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
<strong>Foam sealant option</strong>: Polymer-based liquid protection (6-month protection, easier application)
</div>
<div class="flex items-start">
<span class="text-green-400 mr-2">✓</span>
Hydrophobic SiO₂-infused graphene matrix (180-day protective barrier)
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Products Section -->
<section id="products" class="py-16 bg-gray-900 text-white px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<span class="text-purple-400 font-semibold">Our Tools</span>
<h2 class="text-4xl font-bold mt-2 gradient-text">Professional Products</h2>
<p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
Only The Best For Your Vehicle
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Koch Chemie -->
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl border border-gray-700">
<div class="text-center mb-4">
<div class="w-24 h-24 bg-purple-600/10 rounded-full flex items-center justify-center mx-auto">
<img src="https://seeklogo.com/images/K/koch-chemie-logo-8BCDB7E002-seeklogo.com.png" alt="Koch Chemie" class="h-16 w-16 object-contain">
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-3 text-purple-400">Koch Chemie</h3>
<p class="text-gray-400 mb-4 text-center">German-engineered nano-technology detailing solutions</p>
<ul class="space-y-2 text-gray-400">
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
pH-balanced SiO₂-infused formulations (8.5-10.5)
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
Hybrid ceramic-graphene polymer technology
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
Non-ionic surfactant systems for superior cleaning
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
VOC-compliant, water-based chemistries
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
Advanced hydrophobic/oleophobic coatings
</li>
</ul>
</div>
<!-- Maderite -->
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl border border-gray-700">
<div class="text-center mb-4">
<div class="w-24 h-24 bg-purple-600/10 rounded-full flex items-center justify-center mx-auto">
<img src="https://i.ibb.co/rfx12vbq/IMG-1463.jpg" alt="Maderite" class="h-16 w-16 object-contain">
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-3 text-purple-400">Maderite</h3>
<p class="text-gray-400 mb-4 text-center">Premium pH-balanced car wash soaps</p>
<ul class="space-y-2 text-gray-400">
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
pH-balanced formulas (7.5-8.5) safe for all surfaces
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
High-lubricity formula prevents swirl marks
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
Rich foam clings to vertical surfaces for better cleaning
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
Contains gloss enhancers for brilliant shine
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
Biodegradable and eco-friendly formulations
</li>
</ul>
<div class="mt-4 text-xs text-gray-500 italic">
*Professional-grade soaps that clean effectively without stripping wax or sealants
</div>
</div>
<!-- Ultra Clean -->
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl border border-gray-700">
<div class="text-center mb-4">
<div class="w-24 h-24 bg-purple-600/10 rounded-full flex items-center justify-center mx-auto">
<img src="https://i.ibb.co/RGdtBLXQ/IMG-1466-2-1.jpg" alt="Ultra Clean" class="h-16 w-16 object-contain">
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-3 text-purple-400">Ultra Clean</h3>
<p class="text-gray-400 mb-4 text-center">Professional-grade cleaning chemicals</p>
<ul class="space-y-2 text-gray-400">
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
Heavy-duty alkaline degreasers (pH 12-14)
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
pH-neutral cleaners (pH 6-8) for delicate surfaces
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
Water-based, VOC-compliant formulations
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
High-foaming surfactants for cling and dwell time
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
Biodegradable and phosphate-free options
</li>
</ul>
<div class="mt-4 text-xs text-gray-500 italic">
*Professional-strength cleaners that dissolve grease, oil, and stains without damaging surfaces
</div>
</div>
<!-- Ezpz Ceramic -->
<div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition duration-500 transform hover:-translate-y-2 shadow-xl border border-gray-700">
<div class="text-center mb-4">
<div class="w-24 h-24 bg-purple-600/10 rounded-full flex items-center justify-center mx-auto">
<img src="https://m.media-amazon.com/images/I/61vggPvlGQL.jpg" alt="Ezpz Ceramic" class="h-16 w-16 object-contain">
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-3 text-purple-400">Ezpz Ceramic</h3>
<p class="text-gray-400 mb-4 text-center">Professional-Grade SiO₂ Ceramic Coatings</p>
<ul class="space-y-2 text-gray-400">
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
<div>
<strong>9H Hardness Rating</strong> - Scratch-resistant SiO₂ matrix
<div class="text-xs text-gray-500 mt-1">Forms molecular bond with paint for permanent protection</div>
</div>
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
<div>
<strong>2-5 Year Protection</strong> - Advanced hydrophobic properties
<div class="text-xs text-gray-500 mt-1">110°+ water contact angle for superior beading</div>
</div>
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
<div>
<strong>UV & Chemical Resistant</strong> - Blocks 98% of UV rays
<div class="text-xs text-gray-500 mt-1">Protects against acid rain, bird droppings, and tree sap</div>
</div>
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
<div>
<strong>Self-Cleaning Effect</strong> - Dirt and contaminants slide off
<div class="text-xs text-gray-500 mt-1">Reduces maintenance washing by 70%</div>
</div>
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
<div>
<strong>Enhanced Gloss</strong> - Deepens paint color and clarity
<div class="text-xs text-gray-500 mt-1">Creates showroom-quality mirror finish</div>
</div>
</li>
</ul>
<div class="mt-4 text-xs text-gray-500 italic">
*Professional application recommended for optimal results
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section id="stats" class="py-16 bg-gradient-to-br from-purple-900/80 to-pink-900/80 text-white px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<span class="text-purple-300 font-semibold">Why Choose Us</span>
<h2 class="text-4xl font-bold mt-2 text-white">Experience The Difference</h2>
<p class="text-xl mt-4 text-gray-300 max-w-3xl mx-auto">
Premium Service With Mobile Convenience
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300 cursor-pointer" onclick="showStatDetail('mobile')">
<div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-truck text-purple-300 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Mobile Convenience</h3>
<p class="text-gray-300">We come to your home or office anywhere in LA & OC</p>
</div>
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300 cursor-pointer" onclick="showStatDetail('satisfaction')">
<div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-handshake text-purple-300 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Satisfaction Guarantee</h3>
<p class="text-gray-300">We won't leave until you're 100% happy - your car gets treated like my own</p>
</div>
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300 cursor-pointer" onclick="showStatDetail('selfsufficient')">
<div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-bolt text-purple-300 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Self-Sufficient</h3>
<p class="text-gray-300">Fully spot-free deionized water & 4000W concurrent power</p>
</div>
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300 cursor-pointer" onclick="showStatDetail('reputation')">
<div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-handshake text-purple-300 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Highly Reputable</h3>
<p class="text-gray-300">4.9★ Google & Yelp ratings with 100+ verified reviews</p>
<p class="text-gray-300">55 perfect 5★ reviews on OfferUp</p>
</div>
</div>
<script>
// Stat details data
const statDetails = {
mobile: {
title: "Mobile Convenience",
description: "We bring the full detailing experience directly to you, wherever you are in Los Angeles or Orange County.",
benefits: [
"No need to drive anywhere - we come to your home, office, or preferred location",
"Flexible scheduling to fit your busy life",
"Same professional results as a shop visit",
"All equipment and supplies brought to you",
"Service available 7 days a week"
],
note: "We just need about 10 feet of space around your vehicle to work comfortably."
},
satisfaction: {
title: "Satisfaction Guarantee",
description: "Your complete satisfaction is our top priority. We stand behind our work 100%.",
benefits: [
"We won't leave until you're completely happy",
"Free touch-ups if needed within 24 hours",
"Your vehicle is treated with the same care as my own",
"Honest assessments - we'll tell you what your car needs",
"No rushed jobs - we take the time to do it right"
],
note: "Over 98% of our customers report being 'extremely satisfied' with our services."
},
selfsufficient: {
title: "Self-Sufficient Setup",
description: "We bring everything needed for professional results, including our own water and power.",
benefits: [
"Deionized water system for spot-free rinsing",
"4000W power generation for all equipment",
"Professional-grade detailing tools and products",
"No need to provide anything except your vehicle",
"Environmentally responsible water reclamation"
],
note: "Our mobile setup rivals fixed-location detailing shops in capability."
},
reputation: {
title: "Proven Reputation",
description: "Our track record speaks for itself with hundreds of satisfied customers.",
benefits: [
"4.9★ average rating across all platforms",
"100+ verified 5-star reviews",
"55 perfect ratings on OfferUp",
"Featured in local automotive groups",
"Repeat customers account for 65% of our business"
],
note: "We've detailed over 2,500 vehicles since starting our mobile service."
}
};
// Show stat details in modal
function showStatDetail(type) {
const detail = statDetails[type];
const modal = document.getElementById('modal');
const modalContent = document.getElementById('modalContent');
let html = `
<h2 class="text-3xl font-bold mb-4 gradient-text">${detail.title}</h2>
<p class="mb-6">${detail.description}</p>
<div class="mb-6">
<h3 class="text-xl font-bold mb-2 text-white">Key Benefits</h3>
<ul class="space-y-2">
`;
detail.benefits.forEach(benefit => {
html += `<li class="flex items-start"><span class="text-purple-400 mr-2">•</span> ${benefit}</li>`;
});
html += `
</ul>
</div>
<p class="text-sm text-gray-400 italic">${detail.note}</p>
`;
modalContent.innerHTML = html;
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
</script>
</div>
</section>
<!-- Add-ons Section -->
<section class="py-16 bg-gray-900 text-white px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<span class="text-purple-400 font-bold text-2xl md:text-3xl animate-pulse hover:animate-none hover:text-purple-300 transition-all duration-300" style="text-shadow: 0 0 8px rgba(181, 48, 255, 0.7);">Upgrades</span>
<h2 class="text-4xl font-bold mt-2 gradient-text">Premium Add-Ons</h2>
<p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
Enhance Your Detail With Professional Upgrades
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Ceramic/Graphene Coating -->
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('ceramic')">
<div class="flex justify-between items-start mb-2">
<h4 class="text-xl font-bold text-white">Ceramic/Graphene Coating</h4>
<span class="bg-purple-600 text-white text-sm font-bold px-3 py-1 rounded-full">POPULAR</span>
</div>
<p class="text-purple-400 text-2xl font-bold mb-3">$400-$700</p>
<p class="text-gray-400 mb-4">
Advanced nanotechnology protection - choose between:
</p>
<ul class="text-gray-300 mb-4 space-y-2">
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
<span><strong>Ceramic (2yr):</strong> SiO₂-based with superior water beading</span>
</li>
<li class="flex items-start">
<span class="text-purple-400 mr-2">•</span>
<span><strong>Graphene (5yr):</strong> Carbon matrix with thermal conductivity</span>
</li>
</ul>
<button class="text-purple-400 font-medium flex items-center gap-2">
Compare Technologies <i class="fas fa-arrow-right"></i>
</button>
</div>
<!-- Full Polish -->
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('polish')">
<h4 class="text-xl font-bold text-white mb-2">Full Polish</h4>
<p class="text-purple-400 text-2xl font-bold mb-3">$220</p>
<p class="text-gray-400 mb-4">
Professional paint correction removes swirls and restores factory shine
</p>
<button class="text-purple-400 font-medium flex items-center gap-2">
Learn more <i class="fas fa-arrow-right"></i>
</button>
</div>
<!-- Iron Decontamination -->
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('iron')">
<h4 class="text-xl font-bold text-white mb-2">Iron Decontamination</h4>
<p class="text-purple-400 text-2xl font-bold mb-3">Call for Price</p>
<p class="text-gray-400 mb-4">
Chemical treatment removes embedded brake dust and metal particles
</p>
<button class="text-purple-400 font-medium flex items-center gap-2">
Learn more <i class="fas fa-arrow-right"></i>
</button>
</div>
<!-- Clay Bar Treatment -->
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('clay')">
<h4 class="text-xl font-bold text-white mb-2">Clay Bar Treatment</h4>
<p class="text-purple-400 text-2xl font-bold mb-3">Call for Price</p>
<p class="text-gray-400 mb-4">
Removes bonded contaminants for glass-smooth paint
</p>
<button class="text-purple-400 font-medium flex items-center gap-2">
Learn more <i class="fas fa-arrow-right"></i>
</button>
</div>
<!-- Steam Cleaning -->
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('steam')">
<h4 class="text-xl font-bold text-white mb-2">Steam Cleaning</h4>
<p class="text-purple-400 text-2xl font-bold mb-3">Call for Price</p>
<p class="text-gray-400 mb-4">
Deep sanitization and odor removal using high-temperature steam
</p>
<button class="text-purple-400 font-medium flex items-center gap-2">
Learn more <i class="fas fa-arrow-right"></i>
</button>
</div>
<!-- Engine Bay Detail -->
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300 cursor-pointer shadow-md hover:shadow-lg" onclick="showAddonDetail('engine')">
<h4 class="text-xl font-bold text-white mb-2">Engine Bay Detail</h4>
<p class="text-purple-400 text-2xl font-bold mb-3">Call for Price</p>
<p class="text-gray-400 mb-4">
Complete engine bay cleaning, degreasing, and dressing
</p>
<button class="text-purple-400 font-medium flex items-center gap-2">
Learn more <i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-16 bg-gray-800 text-white px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<span class="text-purple-400 font-semibold">Testimonials</span>
<h2 class="text-4xl font-bold mt-2 gradient-text">Customer Reviews</h2>
<p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
What Our Clients Say About Us
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Testimonial 1 -->
<div class="bg-gray-700 p-8 rounded-2xl shadow-lg border border-gray-600">
<div class="flex items-center mb-4">
<div class="text-yellow-400 text-2xl mr-2">★★★★★</div>
<span class="text-sm text-gray-400">2 weeks ago</span>
</div>
<p class="text-lg italic mb-6 leading-relaxed">
"Jay transformed my car! The attention to detail is incredible. My BMW looks better than when I bought it. The convenience of mobile service is unbeatable!"
</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-4">SM</div>
<div>
<p class="font-bold text-white">Sarah M.</p>
<p class="text-gray-400 text-sm">Los Angeles</p>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-gray-700 p-8 rounded-2xl shadow-lg border border-gray-600">
<div class="flex items-center mb-4">
<div class="text-yellow-400 text-2xl mr-2">★★★★★</div>
<span class="text-sm text-gray-400">1 month ago</span>
</div>
<p class="text-lg italic mb-6 leading-relaxed">
"Professional, punctual, and perfectionist! Jay's ceramic coating service is top-notch. My car still beads water perfectly after 6 months!"
</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-4">MT</div>
<div>
<p class="font-bold text-white">Mike T.</p>
<p class="text-gray-400 text-sm">Orange County</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Conditions Section -->
<section id="conditions" class="py-16 bg-gray-900 text-white px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<span class="text-purple-400 font-semibold">Policies</span>
<h2 class="text-4xl font-bold mt-2 gradient-text">Service Conditions</h2>
<p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
Important information about our services
</p>
</div>
<div class="bg-gray-800 rounded-xl p-8 md:p-12 border border-gray-700 max-w-4xl mx-auto">
<h3 class="text-2xl font-bold mb-6 text-purple-400">CONDITIONAL SURCHARGES <span class="text-gray-400 text-lg">(Added to Base Price)</span></h3>
<ul class="space-y-4 mb-8">
<li class="flex items-start">
<span class="text-red-400 font-bold mr-3">+30%</span>
<span>Heavy dirt, gum, or embedded grime</span>
</li>
<li class="flex items-start">
<span class="text-red-400 font-bold mr-3">+50%</span>
<span>Biohazards (vomit, urine, mold)</span>
</li>
<li class="flex items-start">
<span class="text-red-400 font-bold mr-3">+$50</span>
<span>After-Dark Work: Professional lighting provided <span class="text-gray-400">(Guarantee void)</span></span>
</li>
</ul>
<div class="border-t border-gray-700 pt-8 mb-8">
<h3 class="text-2xl font-bold mb-6 text-purple-400">QUALITY GUARANTEE</h3>
<p class="mb-4 text-gray-300"><em>Guaranteed results require:</em></p>
<ol class="list-decimal list-inside space-y-3 mb-6">
<li><strong>Daylight/Proper Lighting</strong> (No guarantees for night work)</li>
<li><strong>Full Disclosure</strong> (Severe messes reported upfront)</li>
<li><strong>No Interruptions</strong> (Asking "Why is it so long?" or "Can you hurry?" voids guarantee. We are detailers not car washers. Trust our process)</li>
</ol>
<p class="text-sm text-gray-400 italic">Note: 92% of detailing flaws occur in low light (LA Detailing Institute, 2023).</p>
</div>
<div class="border-t border-gray-700 pt-8">
<h3 class="text-2xl font-bold mb-6 text-purple-400">NOTES</h3>
<ul class="space-y-3">
<li><strong>1.75% card processing fee</strong> applies to all transactions.</li>
<li><strong>$10 travel fee</strong> for every 10 miles beyond 30 miles.</li>
</ul>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="py-16 bg-gray-800 text-white px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<span class="text-purple-400 font-semibold">Questions</span>
<h2 class="text-4xl font-bold mt-2 gradient-text">Frequently Asked</h2>
<p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
Everything You Need To Know
</p>
</div>
<div class="max-w-4xl mx-auto">
<!-- FAQ Item 1 -->
<div class="faq-item bg-gray-700 rounded-xl overflow-hidden mb-4 border border-gray-600">
<div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300">
<span class="text-xl font-bold">How long does each service take?</span>
<span class="faq-arrow text-xl text-purple-400 transform transition-transform duration-300">▼</span>
</div>
<div class="faq-answer bg-gray-700/50 max-h-0 overflow-hidden transition-all duration-300">
<div class="p-5">
<p class="mb-2"><strong class="text-purple-400">Jay's Basic:</strong> 1.5-2 hours</p>
<p class="mb-2"><strong class="text-purple-400">Jay's Luxury:</strong> 2.5-3 hours</p>
<p class="mb-2"><strong class="text-purple-400">Jay's Max:</strong> 4-5 hours</p>
<p class="mt-4">Times may vary based on vehicle size and condition. We take pride in thorough work and never rush a job!</p>
</div>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="faq-item bg-gray-700 rounded-xl overflow-hidden mb-4 border border-gray-600">
<div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300">
<span class="text-xl font-bold">What do I need to provide?</span>
<span class="faq-arrow text-xl text-purple-400 transform transition-transform duration-300">▼</span>
</div>
<div class="faq-answer bg-gray-700/50 max-h-0 overflow-hidden transition-all duration-300">
<div class="p-5">
<p>We supply our own de-ionized water (which means spot-free results) and bring 4000W of personal power generation. All you need to do is relax and come out to a brand new showroom-shiny vehicle!</p>
<p class="mt-2">We bring all professional equipment, products, and supplies. We just need about 10 feet of space around your vehicle to work comfortably.</p>
</div>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="faq-item bg-gray-700 rounded-xl overflow-hidden mb-4 border border-gray-600">
<div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300" onclick="toggleFAQ(this)">
<span class="text-xl font-bold">Do you offer any guarantees?</span>
<span class="faq-arrow text-xl text-purple-400">▼</span>
</div>
<div class="faq-answer bg-gray-700/50">
<div class="p-5">
<p>Absolutely! We offer a 100% satisfaction guarantee on all services. If you're not completely happy, we'll make it right. Our ceramic coatings come with a 2-year warranty, and we stand behind all our work with pride.</p>
</div>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="faq-item bg-gray-700 rounded-xl overflow-hidden mb-4 border border-gray-600">
<div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300" onclick="toggleFAQ(this)">
<span class="text-xl font-bold">What areas do you service?</span>
<span class="faq-arrow text-xl text-purple-400">▼</span>
</div>
<div class="faq-answer bg-gray-700/50">
<div class="p-5">
<p>We provide FREE service within 30 miles of Lakewood, covering most of Los Angeles and Orange County. Beyond 30 miles, we charge $10 for every additional 10 miles. Popular areas include Long Beach, Torrance, Anaheim, Irvine, and Santa Monica.</p>
</div>
</div>
</div>
<!-- FAQ Item 5 -->
<div class="faq-item bg-gray-700 rounded-xl overflow-hidden border border-gray-600">
<div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300">
<span class="text-xl font-bold">What payment methods do you accept?</span>
<span class="faq-arrow text-xl text-purple-400 transform transition-transform duration-300">▼</span>
</div>
<div class="faq-answer bg-gray-700/50 max-h-0 overflow-hidden transition-all duration-300">
<div class="p-5">
<p class="mb-2">We accept the following payment methods:</p>
<ul class="list-disc pl-5 space-y-2">
<li><strong>Cash</strong> (Preferred method with no processing fees)</li>
<li><strong>Zelle</strong> (Fast and secure digital payments)</li>
<li><strong>Apple Pay</strong> (Contactless mobile payments)</li>
</ul>
<p class="mt-4 text-sm text-gray-400">Note: Credit card payments are subject to a 1.75% processing fee.</p>
</div>
</div>
</div>
<!-- FAQ Item 6 -->
<div class="faq-item bg-gray-700 rounded-xl overflow-hidden border border-gray-600">
<div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300" onclick="toggleFAQ(this)">
<span class="text-xl font-bold">What's the difference between polish and wax?</span>
<span class="faq-arrow text-xl text-purple-400">▼</span>
</div>
<div class="faq-answer bg-gray-700/50">
<div class="p-5">
<p class="mb-4"><strong class="text-purple-400">Polish</strong> is corrective - it removes a thin layer of clear coat to eliminate swirls, scratches, and oxidation. Think of it as "exfoliating" your paint.</p>
<p><strong class="text-purple-400">Wax</strong> is protective - it adds a layer on top of your paint to protect against UV rays, water, and contaminants. We recommend polishing first, then protecting with wax or ceramic coating.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-gray-900 text-white px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<span class="text-purple-400 font-semibold">Get In Touch</span>
<h2 class="text-4xl font-bold mt-2 gradient-text">Book Your Detail Today!</h2>
<p class="text-xl mt-4 text-gray-400 max-w-3xl mx-auto">
Ready To Transform Your Vehicle? Contact Us Now.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="bg-gray-800 rounded-2xl p-8 md:p-12 text-white shadow-xl relative overflow-hidden border border-gray-700">
<div class="text-4xl md:text-5xl font-bold text-center mb-8 gradient-text">(562) 228-9429</div>
<div class="contact-info text-center text-lg mb-10">
<p class="mb-4"><strong>Business Hours:</strong></p>
<p class="mb-4">Monday - Saturday: 6:00 AM - 7:00 PM<br>
Sunday: 8:00 AM - 5:00 PM</p>
<p><strong>Service Area:</strong> Los Angeles & Orange County</p>
</div>
<div class="flex flex-col md:flex-row justify-center gap-4 mb-10">
<a href="tel:5622289429" class="bg-green-600 hover:bg-green-700 text-white font-bold py-4 px-8 rounded-full transition duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2">
<i class="fas fa-phone"></i> Call Now
</a>
<a href="sms:562-228-9429?body=Hi%20Jay!%20I'd%20like%20to%20schedule%20a%20mobile%20detailing%20service." class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-full transition duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2">
<i class="fas fa-comment-alt"></i> Text Us
</a>
</div>
<div class="flex flex-col md:flex-row justify-center gap-6">
<a href="https://www.instagram.com/jayswaxandwash/" target="_blank" class="border-2 border-white hover:bg-white hover:text-purple-600 py-2 px-6 rounded-full transition duration-300 flex items-center justify-center gap-2">
<i class="fab fa-instagram"></i> @jayswaxandwash
</a>
<a href="https://m.yelp.com/biz/jay-s-mobile-wash-buena-park" target="_blank" class="border-2 border-white hover:bg-white hover:text-purple-600 py-2 px-6 rounded-full transition duration-300 flex items-center justify-center gap-2">
<i class="fab fa-yelp"></i> Jay's Mobile Wash
</a>
</div>
</div>
<!-- Appointment Form -->
<div class="bg-gray-800 rounded-2xl p-8 border border-gray-700">
<h3 class="text-2xl font-bold mb-6 text-center text-white">Schedule Appointment</h3>
<form id="appointmentForm" class="space-y-4">
<div>
<label class="block text-gray-300 mb-2">Full Name</label>
<input type="text" name="name" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500" required>
</div>
<div>
<label class="block text-gray-300 mb-2">Email Address</label>
<input type="email" name="email" placeholder="your@email.com" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500" required>
</div>
<div>
<label class="block text-gray-300 mb-2">Phone Number</label>
<input type="tel" name="phone" placeholder="(123) 456-7890" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500" required>
</div>
<div>
<label class="block text-gray-300 mb-2">Vehicle Type</label>
<select name="vehicleType" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500" required>
<option value="Sedan">Sedan</option>
<option value="SUV">SUV</option>
<option value="Truck">Truck</option>
<option value="Van">Van</option>
<option value="Luxury Vehicle">Luxury Vehicle</option>
</select>
</div>
<div>
<label class="block text-gray-300 mb-2">Preferred Service</label>
<select name="service" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500" required>
<option value="Jay's Basic">Jay's Basic</option>
<option value="Jay's Luxury">Jay's Luxury</option>
<option value="Jay's Max">Jay's Max</option>
<option value="Ceramic Coating">Ceramic Coating</option>
<option value="Full Polish">Full Polish</option>
</select>
</div>
<div>
<label class="block text-gray-300 mb-2">Preferred Date</label>
<input type="date" name="date" class="w-full px-4 py-3 rounded-lg bg-gray-700 border border-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500" required>
</div>
<button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 px-8 rounded-full transition duration-300 shadow-lg">
Request Appointment
</button>
<p id="formStatus" class="text-center text-green-400 hidden">Message sent! We'll contact you shortly.</p>
</form>
<script>
document.getElementById('appointmentForm').addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
const formData = new FormData(this);
const data = {};
formData.forEach((value, key) => {
data[key] = value;
});
// Format SMS body
const smsBody = `New Appointment Request:%0A%0A` +
`Name: ${data.name}%0A` +
`Email: ${data.email}%0A` +
`Phone: ${data.phone}%0A` +
`Vehicle: ${data.vehicleType}%0A` +
`Service: ${data.service}%0A` +
`Date: ${data.date}%0A%0A` +
`Sent from website`;
// Send SMS
window.location.href = `sms:562-228-9429?body=${smsBody}`;
// Show success message
document.getElementById('formStatus').classList.remove('hidden');
this.reset();
// Hide message after 5 seconds
setTimeout(() => {
document.getElementById('formStatus').classList.add('hidden');
}, 5000);
});
</script>
</div>
</div>
<!-- Service Area Map -->
<div class="mt-16">
<h3 class="text-3xl font-bold text-center mb-8 gradient-text">Our Service Areas</h3>
<div class="bg-gray-800 rounded-xl overflow-hidden max-w-6xl mx-auto border border-gray-700">
<div class="relative h-[500px]">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d212270.7411280935!2d-118.1257018!3d33.9130685!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dd2955f7f8b0c9%3A0x3a9b4c641ce5f42a!2sLakewood%2C%20CA!5e0!3m2!1sen!2sus!4v1711234567890!5m2!1sen!2sus&z=10"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
class="rounded-lg"
></iframe>
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
<div class="text-center">
<span class="text-white font-bold bg-black/70 px-4 py-2 rounded-full text-xl block mb-2">30 Miles from Lakewood (LA & OC)</span>
<span class="text-white font-bold bg-purple-600/80 px-4 py-2 rounded-full text-lg block">Free Service Within This Radius</span>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8 max-w-6xl mx-auto">
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
<h4 class="text-xl font-bold mb-4 text-purple-400">Los Angeles County Areas</h4>
<ul class="grid grid-cols-2 gap-2 text-gray-300">
<li>• Long Beach</li>
<li>• Torrance</li>
<li>• Santa Monica</li>
<li>• Beverly Hills</li>
<li>• Hollywood</li>
<li>• Pasadena</li>
<li>• Glendale</li>
<li>• Burbank</li>
</ul>
</div>
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
<h4 class="text-xl font-bold mb-4 text-purple-400">Orange County Areas</h4>
<ul class="grid grid-cols-2 gap-2 text-gray-300">
<li>• Anaheim</li>
<li>• Irvine</li>
<li>• Newport Beach</li>
<li>• Huntington Beach</li>
<li>• Costa Mesa</li>
<li>• Fullerton</li>
<li>• Garden Grove</li>
<li>• Orange</li>
</ul>
</div>
</div>
<p class="text-center mt-6 text-gray-400 max-w-2xl mx-auto">
Free service within 30 miles of both Gardena (LA County) and Buena Park (OC County) - our two service bases.
Additional charges apply beyond these radii ($10 per additional 10 miles).
</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12 px-6 text-center border-t border-gray-800">
<div class="max-w-7xl mx-auto">
<div class="flex justify-center mb-8">
<a href="#" class="text-2xl font-bold gradient-text">Jay's Mobile Wash</a>
</div>
<div class="flex justify-center space-x-6 mb-8">
<a href="https://www.instagram.com/jayswaxandwash/" target="_blank" class="text-gray-400 hover:text-purple-400 transition duration-300">
<i class="fab fa-instagram text-2xl"></i>
</a>
<a href="https://m.yelp.com/biz/jay-s-mobile-wash-buena-park" target="_blank" class="text-gray-400 hover:text-purple-400 transition duration-300">
<i class="fab fa-yelp text-2xl"></i>
</a>
<a href="tel:5622289429" class="text-gray-400 hover:text-purple-400 transition duration-300">
<i class="fas fa-phone text-2xl"></i>
</a>
</div>
<p class="mb-4">© 2025 Jay's Mobile Wash. All rights reserved.</p>
<p class="mb-4">Licensed • Insured • Satisfaction guaranteed</p>
<p>Professional mobile detailing in Los Angeles and Orange County</p>
<p><a href="tel:15622289429" class="text-purple-400 hover:text-purple-300">562-228-9429</a></p>
</div>
</footer>
<!-- Modal -->
<div id="modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden overflow-y-auto p-4">
<div class="modal-content bg-gray-800 rounded-2xl max-w-4xl mx-auto my-12 p-6 md:p-8 relative border border-gray-700">
<button class="close-btn absolute top-4 right-4 bg-purple-600 text-white w-10 h-10 rounded-full flex items-center justify-center text-xl transition duration-300 hover:bg-purple-700" onclick="closeModal()">
×
</button>
<div id="modalContent" class="text-gray-300"></div>
</div>
</div>
<script>
// Addon details data
const addonDetails = {
ceramic: {
title: "Ceramic vs Graphene Coatings",
price: "$400-$700",
description: "Cutting-edge nanotechnology protection with distinct advantages for different needs.",
comparison: {
ceramic: {
name: "Ceramic Coating (SiO₂)",
properties: [
"Silicon dioxide (SiO₂) matrix",
"Forms glass-like layer when cured",
"Superior water beading (110°+ contact angle)",
"Excellent chemical resistance",
"2-year protection warranty"
],
bestFor: "Daily drivers in moderate climates, those prioritizing water repellency"
},
graphene: {
name: "Graphene Coating",
properties: [
"Carbon nanostructure matrix",
"Thermal conductive properties",
"More flexible than ceramic (better impact resistance)",
"Self-cleaning effect lasts longer",
"5-year protection warranty"
],
bestFor: "High-end vehicles, extreme climates, long-term protection"
},
shared: [
"9H hardness rating (scratch resistant)",
"UV protection (blocks 98% of UV rays)",
"Hydrophobic surface (repels water/dirt)",
"Chemical stain resistance",
"Professional application required"
]
},
benefits: [
"<strong>Ceramic Advantage:</strong> More affordable, easier application, immediate high-gloss finish",
"<strong>Graphene Advantage:</strong> Longer durability, better heat dissipation, superior self-cleaning",
"<strong>Shared Benefits:</strong> Paint protection, easier maintenance, enhanced resale value"
],
process: [
"72-hour paint decontamination (iron removal, clay bar)",
"Multi-stage paint correction (swirl/scratch removal)",
"Precision application in controlled environment",
"48-hour curing with infrared assistance",
"Final inspection with contact angle tester"
],
science: {
ceramic: "SiO₂ forms covalent bonds with paint's clear coat, creating semi-permanent glass-like layer",
graphene: "Carbon nanostructures create conductive network that dissipates heat and flexes with temperature changes"
}
},
polish: {
title: "Full Polish",
price: "$220",
description: "Professional paint correction that removes swirl marks, light scratches, and oxidation to restore your paint's original luster.",
benefits: [
"Removes 85-95% of surface imperfections",
"Restores deep, reflective gloss to your paint",
"Prepares surface for optimal wax or coating adhesion",
"Uses professional-grade polishing compounds and pads",
"Includes light hand wax application"
],
process: [
"Paint inspection and assessment",
"Test spot to determine correct polishing approach",
"Multi-stage machine polishing",
"Final finishing polish for maximum gloss",
"Light protective wax application"
]
},
iron: {
title: "Iron Decontamination",
price: "Call for Price",
description: "Chemical treatment that safely removes embedded iron particles from your paint, wheels, and glass.",
benefits: [
"Removes brake dust, rail dust, and industrial fallout",
"Prevents rust spots and paint degradation",
"Safe for all paint types including fresh paint",
"Visual confirmation as contaminants dissolve (turns purple)",
"Prepares surface for polishing or coating"
],
process: [
"Application of iron remover to all painted surfaces",
"Dwell time to allow chemical reaction",
"Agitation with soft brushes where needed",
"Thorough rinsing with deionized water",
"Final inspection"
]
},
clay: {
title: "Clay Bar Treatment",
price: "Call for Price",
description: "Mechanical decontamination that removes bonded surface contaminants for glass-smooth paint.",
benefits: [
"Removes overspray, tree sap, and industrial fallout",
"Creates ultra-smooth surface for wax/coating application",
"Safe when performed by professionals",
"Dramatically improves paint feel and appearance",
"Often combined with polish for best results"
],
process: [
"Lubrication of surface with detailing spray",
"Gentle clay bar application panel by panel",
"Frequent folding of clay to expose clean surface",
"Final wipedown to remove residue",
"Optional light polish to remove any marring"
]
},
steam: {
title: "Steam Cleaning",
price: "Call for Price",
description: "High-temperature steam sanitation that deep cleans and disinfects your vehicle's interior.",
benefits: [
"Kills 99.9% of bacteria and germs",
"Removes stubborn stains and odors",
"Chemical-free cleaning method",
"Reaches into crevices traditional cleaning can't",
"Safe for most interior surfaces"
],
process: [
"Pre-vacuum of all interior surfaces",
"Steam application to seats, carpets, and hard surfaces",
"Targeted stain treatment where needed",
"Extraction of loosened contaminants",
"Final wipe-down and odor elimination"
]
},
engine: {
title: "Engine Bay Detail",
price: "Call for Price",
description: "Complete cleaning and dressing of your engine compartment for show-quality results.",
benefits: [
"Removes built-up grease and grime",
"Makes leaks and potential issues visible",
"Protects rubber and plastic components",
"Improves resale value and presentation",
"Uses safe, water-based cleaners"
],
process: [
"Protection of sensitive electrical components",
"Application of degreaser and agitation",
"Gentle rinsing with low-pressure water",
"Dressing of all plastic and rubber",
"Final wipe-down and inspection"
]
}
};
// Show addon details in modal
function showAddonDetail(type) {
const detail = addonDetails[type];
const modal = document.getElementById('modal');
const modalContent = document.getElementById('modalContent');
let html = `
<h2 class="text-3xl font-bold mb-4 gradient-text">${detail.title}</h2>
<p class="text-2xl text-purple-400 font-bold mb-6">${detail.price}</p>
<div class="mb-8">
<h3 class="text-xl font-bold mb-2 text-white">Description</h3>
<p class="mb-4">${detail.description}</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-bold mb-2 text-white">Benefits</h3>
<ul class="space-y-2">
`;
detail.benefits.forEach(benefit => {
html += `<li class="flex items-start"><span class="text-purple-400 mr-2">•</span> ${benefit}</li>`;
});
html += `
</ul>
</div>
<div>
<h3 class="text-xl font-bold mb-2 text-white">Process</h3>
<ul class="space-y-2">
`;
detail.process.forEach(step => {
html += `<li class="flex items-start"><span class="text-purple-400 mr-2">•</span> ${step}</li>`;
});
html += `
</ul>
</div>
</div>
<div class="mt-8 text-center">
<a href="tel:5622289429" class="inline-block bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">
<i class="fas fa-phone mr-2"></i> Call to Book
</a>
</div>
`;
modalContent.innerHTML = html;
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
// Close modal
function closeModal() {
const modal = document.getElementById('modal');
modal.classList.add('hidden');
document.body.style.overflow = 'auto';
}
// Close modal when clicking outside content
document.getElementById('modal').addEventListener('click', function(e) {
if (e.target === this) {
closeModal();
}
});
</script>
<script>
// Toggle service details
function toggleDetails(service) {
const details = document.getElementById(`${service}-details`);
const arrow = document.getElementById(`${service}-arrow`);
if (details) {
details.classList.toggle('hidden');
arrow.classList.toggle('rotate-180');
const button = document.querySelector(`button[onclick="toggleDetails('${service}')"] span`);
if (details.classList.contains('hidden')) {
button.textContent = 'Show Details';
} else {
button.textContent = 'Hide Details';
}
}
}
// Close mobile menu when clicking a link
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// Scroll to top button
const scrollTop = document.getElementById('scroll-top');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
scrollTop.classList.add('show');
} else {
scrollTop.classList.remove('show');
}
});
scrollTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
window.scrollTo({
top: target.offsetTop - 100,
behavior: 'smooth'
});
}
});
});
// FAQ Toggle Functionality
document.querySelectorAll('.faq-question').forEach(question => {
question.addEventListener('click', () => {
const faqItem = question.closest('.faq-item');
const answer = faqItem.querySelector('.faq-answer');
const arrow = faqItem.querySelector('.faq-arrow');
// Toggle the answer
if (answer.style.maxHeight) {
answer.style.maxHeight = null;
arrow.classList.remove('rotate-180');
} else {
answer.style.maxHeight = answer.scrollHeight + 'px';
arrow.classList.add('rotate-180');
}
});
});
// Service details data
const serviceDetails = {
basic: {
title: "Jay's Basic Package",
price: "Small Car: $70 | SUV: $80",
description: "Our essential detailing package that brings back your car's shine with professional hand washing and interior cleaning.",
ideal: "Regular maintenance between full details or for those looking for a thorough clean without advanced protection.",
steps: [
{
title: "Exterior Wash",
description: "Two-step hand wash using pH-neutral shampoo and microfiber mitts",
benefit: "Removes dirt without stripping wax or damaging paint"
},
{
title: "Wheel Cleaning",
description: "Deep cleaning with ceramic-infused wheel cleaner",
benefit: "Removes brake dust and protects wheels from corrosion"
},
{
title: "Interior Wipe-down",
description: "Cleaning of all surfaces with premium interior cleaner",
benefit: "Removes dust, fingerprints and light stains"
},
{
title: "Vacuuming",
description: "Complete vacuum of seats, carpets and trunk",
benefit: "Removes dirt, debris and pet hair from all areas"
},
{
title: "Window Cleaning",
description: "Streak-free cleaning inside and out",
benefit: "Crystal clear visibility with no residue"
}
],
features: [
{
title: "Exterior Features",
items: [
"Snow foam alkaline pre-wash (pH 10-11) to loosen contaminants",
"Ceramic-infused shampoo (pH 7) for gentle cleaning and protection",
"Wheel cleaning with ceramic SiO₂",
"Tire dressing application",
"Door jambs cleaned",
"Exterior glass cleaned"
]
},
{
title: "Interior Features",
items: [
"Dashboard and console cleaned",
"Cup holders and storage areas cleaned",
"Door panels cleaned",
"Vacuum seats and carpets",
"Trunk vacuumed"
]
}
]
},
luxury: {
title: "Jay's Luxury Package",
price: "Small Car: $130 | SUV: $140",
description: "Our most popular package that includes advanced protection with ceramic spray wax and interior SiO₂ treatment.",
ideal: "Those wanting long-lasting protection and enhanced shine between full details.",
steps: [
{
title: "Basic Package Plus",
description: "Includes all Basic package services: 2-step hand wash, wheel cleaning, interior wipe-down, thorough vacuuming, and window cleaning",
benefit: "Ensures complete surface preparation by removing all dirt, grime and contaminants before applying protective treatments"
},
{
title: "Ceramic Spray Wax",
description: "Application of premium SiO₂-infused ceramic spray wax using cross-hatch application technique",
benefit: "Creates molecular bond with paint for 3+ months of protection. Repels water, dirt and UV rays while enhancing gloss and depth"
},
{
title: "Interior Protection",
description: "SiO₂ interior treatment applied to all surfaces including dash, console, door panels and seats",
benefit: "Forms protective barrier that repels dust, prevents staining and makes future cleaning 70% easier. Safe for all interior materials"
},
{
title: "Trim Restoration",
description: "Specialized trim restorer applied to all exterior plastic and rubber using foam applicators",
benefit: "Revives faded trim to like-new condition while providing UV protection to prevent future fading and cracking"
},
{
title: "Enhanced Protection",
description: "Door jambs, hinges and hidden areas treated with protective coating",
benefit: "Complete 360° protection prevents corrosion in hard-to-reach areas and maintains showroom-fresh appearance"
}
],
features: [
{
title: "Exterior Features",
items: [
"All Basic exterior services",
"Ceramic spray wax application",
"Trim restoration",
"Enhanced door jamb cleaning",
"3-month paint protection"
]
},
{
title: "Interior Features",
items: [
"All Basic interior services",
"SiO₂ interior protection",
"Vinyl/leather conditioning",
"Vent cleaning",
"Enhanced cup holder cleaning"
]
}
]
},
max: {
title: "Jay's Max Package",
price: "Small Car: $200 | SUV: $210",
description: "Our most comprehensive package featuring advanced ceramic hyper wax and interior steam cleaning for showroom-quality results.",
ideal: "Enthusiasts and those preparing their vehicle for special events or long-term protection.",
steps: [
{
title: "Luxury Package Plus",
description: "Includes all Luxury package services",
benefit: "Premium cleaning and protection base"
},
{
title: "Iron Decontamination",
description: "Chemical treatment that dissolves embedded iron particles from paint, wheels and glass",
benefit: "Removes microscopic metal particles that cause rust spots and paint degradation"
},
{
title: "Hyper Wax Application",
description: "Advanced ceramic hyper wax with graphene",
benefit: "6 months of extreme protection and gloss"
},
{
title: "Steam Cleaning",
description: "Interior steam cleaning of all surfaces",
benefit: "Sanitizes and deep cleans without chemicals"
},
{
title: "Clay Bar Treatment",
description: "Paint decontamination with clay bar",
benefit: "Removes embedded contaminants for glass-smooth finish"
},
{
title: "Final Protection",
description: "Hydrophobic SiO₂ infused graphene sealant",
benefit: "Maximum water beading and dirt resistance"
}
],
features: [
{
title: "Exterior Features",
items: [
"All Luxury exterior services",
"Clay bar decontamination",
"Iron particle removal treatment",
"Hyper ceramic wax with graphene",
"Enhanced wheel well cleaning",
"6-month paint protection"
]
},
{
title: "Interior Features",
items: [
"All Luxury interior services",
"Steam cleaning of all surfaces",
"Enhanced leather/vinyl treatment",
"Headliner cleaning",
"Complete odor elimination"
]
}
]
}
};
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close modal
function closeModal() {
const modal = document.getElementById('modal');
modal.classList.add('hidden');
document.body.style.overflow = 'auto';
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jjmandog/jaysmobilewash" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |