bender/b28b80b8-b504-4edf-8704-ee67ed2d8073
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_4 bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_2
Branches Tags
bender:main bender:version_4 bender:version_3 bender:version_2 bender:version_1

15 Commits
version_1 ... version_2

Author SHA1 Message Date
bender
67f0c076da Update src/app/page.tsx 2026-03-09 14:19:53 +00:00
bender
27d4d5268b Update theme colors 2026-03-09 14:16:10 +00:00
bender
8772965a8d Update theme colors 2026-03-09 14:15:44 +00:00
bender
63bdab0f74 Update src/app/page.tsx 2026-03-09 14:13:54 +00:00
bender
6881f22261 Update theme fonts 2026-03-09 14:11:52 +00:00
bender
bb131ebda5 Update theme fonts 2026-03-09 14:11:52 +00:00
bender
faf060fcb4 Update theme fonts 2026-03-09 14:10:01 +00:00
bender
868267f127 Update theme fonts 2026-03-09 14:10:01 +00:00
bender
e53a1f3f04 Update theme fonts 2026-03-09 14:09:51 +00:00
bender
b42e003519 Update theme fonts 2026-03-09 14:09:50 +00:00
bender
fba08eb13a Update theme colors 2026-03-09 14:08:36 +00:00
bender
ce348e31d5 Update src/app/styles/variables.css 2026-03-09 13:57:29 +00:00
bender
f797ee5a68 Merge version_1 into main 
Merge version_1 into main
 2026-03-09 13:55:02 +00:00
bender
a7d6630b42 Merge version_1 into main 
Merge version_1 into main
 2026-03-09 13:54:11 +00:00
bender
2e3a72ddda Merge version_1 into main 
Merge version_1 into main
 2026-03-09 13:48:14 +00:00
4 changed files with 51 additions and 83 deletions
Expand all files Collapse all files

106
src/app/layout.tsx
View File

@@ -5,19 +5,11 @@ import { Figtree } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper"; import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag"; import Tag from "@/tag/Tag";
import { Poppins } from "next/font/google";
import { Montserrat } from "next/font/google";
const halant = Halant({
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const figtree = Figtree({
variable: "--font-figtree", subsets: ["latin"],
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Ceramic Shine - Professional Car Detailing Perth", description: "Premium car detailing services in Perth: ceramic coating, paint protection, and interior detailing. Expert automotive care for luxury and everyday vehicles.", keywords: "car detailing Perth, ceramic coating, paint protection, auto detailing, car care Western Australia", metadataBase: new URL("https://ceramicshine.com.au"), title: "Ceramic Shine - Professional Car Detailing Perth", description: "Premium car detailing services in Perth: ceramic coating, paint protection, and interior detailing. Expert automotive care for luxury and everyday vehicles.", keywords: "car detailing Perth, ceramic coating, paint protection, auto detailing, car care Western Australia", metadataBase: new URL("https://ceramicshine.com.au"),
@@ -38,6 +30,14 @@ export const metadata: Metadata = {
}, },
}; };
const poppins = Poppins({
variable: "--font-poppins",
subsets: ["latin"],
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
@@ -46,9 +46,7 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<ServiceWrapper> <ServiceWrapper>
<body <body className={`${poppins.variable} antialiased`}>
className={`${halant.variable} ${inter.variable} ${figtree.variable} antialiased`}
>
<Tag /> <Tag />
{children} {children}
@@ -1660,9 +1658,7 @@ export default function RootLayout({
const getElementInfo = (element, assignId = false) => { const getElementInfo = (element, assignId = false) => {
const rect = element.getBoundingClientRect(); const rect = element.getBoundingClientRect();
const tagName = element.tagName.toLowerCase(); const tagName = element.tagName.toLowerCase();
const selector = getUniqueSelector(element, assignId);
const sectionId = getSectionId(element);
let className = undefined; let className = undefined;
try { try {
if (element.className) { if (element.className) {
@@ -1690,8 +1686,7 @@ export default function RootLayout({
}; };
if (tagName === 'img') { if (tagName === 'img') {
const originalSrc = extractOriginalUrl(element.src); info.imageData = {
info.imageData = {
src: originalSrc, src: originalSrc,
alt: element.alt || undefined, alt: element.alt || undefined,
naturalWidth: element.naturalWidth, naturalWidth: element.naturalWidth,
@@ -1702,8 +1697,7 @@ export default function RootLayout({
if (tagName === 'video') { if (tagName === 'video') {
const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || ''; const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
const resolvedSrc = extractOriginalUrl(rawSrc); info.imageData = {
info.imageData = {
src: resolvedSrc, src: resolvedSrc,
alt: element.getAttribute('aria-label') || undefined, alt: element.getAttribute('aria-label') || undefined,
isBackground: false, isBackground: false,
@@ -1716,8 +1710,7 @@ export default function RootLayout({
if (backgroundImage && backgroundImage !== 'none') { if (backgroundImage && backgroundImage !== 'none') {
const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/); const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
if (urlMatch) { if (urlMatch) {
const originalBgSrc = extractOriginalUrl(urlMatch[1]); if (tagName !== 'img') {
if (tagName !== 'img') {
info.imageData = { info.imageData = {
src: originalBgSrc, src: originalBgSrc,
isBackground: true isBackground: true
@@ -1729,8 +1722,7 @@ export default function RootLayout({
} }
} }
const elementType = getElementType(element); info.elementType = elementType;
info.elementType = elementType;
if (elementType === 'Button') { if (elementType === 'Button') {
const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || ''; const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
@@ -1823,13 +1815,11 @@ export default function RootLayout({
}; };
const isTextElement = (element) => { const isTextElement = (element) => {
const elementType = getElementType(element); return elementType === 'Text';
return elementType === 'Text';
}; };
const isButtonElement = (element) => { const isButtonElement = (element) => {
const elementType = getElementType(element); return elementType === 'Button';
return elementType === 'Button';
}; };
const updateButtonText = (element, newText) => { const updateButtonText = (element, newText) => {
@@ -1904,8 +1894,7 @@ export default function RootLayout({
}; };
const handleInput = () => { const handleInput = () => {
const elementInfo = getElementInfo(element); let currentText = element.textContent;
let currentText = element.textContent;
// Ensure there's always at least a space to keep the element editable // Ensure there's always at least a space to keep the element editable
if (currentText === '' || currentText === null || currentText.length === 0) { if (currentText === '' || currentText === null || currentText.length === 0) {
@@ -2018,8 +2007,7 @@ export default function RootLayout({
}, '*'); }, '*');
if (save && originalContent !== element.textContent) { if (save && originalContent !== element.textContent) {
const elementInfo = getElementInfo(element); let finalText = element.textContent;
let finalText = element.textContent;
// Trim the final text and convert space-only to empty string for saving // Trim the final text and convert space-only to empty string for saving
if (finalText === ' ' || finalText.trim() === '') { if (finalText === ' ' || finalText.trim() === '') {
@@ -2148,7 +2136,7 @@ export default function RootLayout({
lastMouseX = e.clientX; lastMouseX = e.clientX;
lastMouseY = e.clientY; lastMouseY = e.clientY;
const target = getMostSpecificElement(e.clientX, e.clientY) || e.target; || e.target;
if (!isValidElement(target) || target === hoveredElement || target === selectedElement) { if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
return; return;
@@ -2180,8 +2168,7 @@ export default function RootLayout({
hoverOverlay = createHoverOverlay(target); hoverOverlay = createHoverOverlay(target);
} }
const elementType = getElementType(target); showElementTypeLabel(target, elementType);
showElementTypeLabel(target, elementType);
window.parent.postMessage({ window.parent.postMessage({
type: 'webild-element-hover', type: 'webild-element-hover',
@@ -2223,7 +2210,7 @@ export default function RootLayout({
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const target = getMostSpecificElement(e.clientX, e.clientY) || e.target; || e.target;
if (!isValidElement(target)) return; if (!isValidElement(target)) return;
if (selectedElement && selectedElement !== target) { if (selectedElement && selectedElement !== target) {
@@ -2268,8 +2255,7 @@ export default function RootLayout({
hoveredElement = null; hoveredElement = null;
} }
const elementInfo = getElementInfo(target, true); selectedElement.dataset.webildSelector = elementInfo.selector;
selectedElement.dataset.webildSelector = elementInfo.selector;
showElementTypeLabel(target, elementInfo.elementType); showElementTypeLabel(target, elementInfo.elementType);
window.parent.postMessage({ window.parent.postMessage({
@@ -2352,8 +2338,7 @@ export default function RootLayout({
isScrolling = false; isScrolling = false;
if (lastMouseX > 0 && lastMouseY > 0) { if (lastMouseX > 0 && lastMouseY > 0) {
const target = getMostSpecificElement(lastMouseX, lastMouseY); if (target && isValidElement(target) && target !== selectedElement) {
if (target && isValidElement(target) && target !== selectedElement) {
hoveredElement = target; hoveredElement = target;
const computedStyle = window.getComputedStyle(target); const computedStyle = window.getComputedStyle(target);
@@ -2367,8 +2352,7 @@ export default function RootLayout({
hoveredElement.classList.add(hoverClass); hoveredElement.classList.add(hoverClass);
hoverOverlay = createHoverOverlay(target); hoverOverlay = createHoverOverlay(target);
const elementType = getElementType(target); showElementTypeLabel(target, elementType);
showElementTypeLabel(target, elementType);
window.parent.postMessage({ window.parent.postMessage({
type: 'webild-element-hover', type: 'webild-element-hover',
@@ -2391,8 +2375,7 @@ export default function RootLayout({
const saveChangeToStorage = (change) => { const saveChangeToStorage = (change) => {
try { try {
const storageKey = getStorageKey(); const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
const filteredChanges = existingChanges.filter(c => { const filteredChanges = existingChanges.filter(c => {
return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId); return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
@@ -2412,8 +2395,7 @@ export default function RootLayout({
const clearLocalChanges = () => { const clearLocalChanges = () => {
try { try {
const storageKey = getStorageKey(); localStorage.removeItem(storageKey);
localStorage.removeItem(storageKey);
window.parent.postMessage({ window.parent.postMessage({
type: 'webild-local-changes-cleared', type: 'webild-local-changes-cleared',
data: {} data: {}
@@ -2462,8 +2444,7 @@ export default function RootLayout({
if (e.data.type === 'webild-cancel-changes') { if (e.data.type === 'webild-cancel-changes') {
try { try {
const storageKey = getStorageKey(); const savedChanges = localStorage.getItem(storageKey);
const savedChanges = localStorage.getItem(storageKey);
if (savedChanges) { if (savedChanges) {
const changes = JSON.parse(savedChanges); const changes = JSON.parse(savedChanges);
changes.forEach(change => { changes.forEach(change => {
@@ -2485,8 +2466,7 @@ export default function RootLayout({
if (isBackground) { if (isBackground) {
element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : ''; element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
} else { } else {
const oldMediaType = getMediaTypeFromUrl(change.oldValue); if (revertTag === 'video' && oldMediaType === 'image') {
if (revertTag === 'video' && oldMediaType === 'image') {
swapMediaElement(element, 'img', change.oldValue); swapMediaElement(element, 'img', change.oldValue);
} else if (revertTag === 'img' && oldMediaType === 'video') { } else if (revertTag === 'img' && oldMediaType === 'video') {
swapMediaElement(element, 'video', change.oldValue); swapMediaElement(element, 'video', change.oldValue);
@@ -2534,8 +2514,7 @@ export default function RootLayout({
const el = textElements[i]; const el = textElements[i];
if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) { if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
element = el; element = el;
const newSelector = getUniqueSelector(element, true); if (newSelector) {
if (newSelector) {
element.dataset.webildSelector = newSelector; element.dataset.webildSelector = newSelector;
} }
break; break;
@@ -2626,10 +2605,8 @@ export default function RootLayout({
replaced = true; replaced = true;
} else if (element.tagName.toLowerCase() === 'img') { } else if (element.tagName.toLowerCase() === 'img') {
oldValue = element.src; oldValue = element.src;
const newMediaType = getMediaTypeFromUrl(newSrc); if (newMediaType === 'video' && allowMediaTypeSwap) {
if (newMediaType === 'video' && allowMediaTypeSwap) { if (selectedElement === element) selectedElement = swapped;
const swapped = swapMediaElement(element, 'video', newSrc);
if (selectedElement === element) selectedElement = swapped;
element = swapped; element = swapped;
} else { } else {
element.src = newSrc; element.src = newSrc;
@@ -2637,11 +2614,9 @@ export default function RootLayout({
replaced = true; replaced = true;
} else if (element.tagName.toLowerCase() === 'video') { } else if (element.tagName.toLowerCase() === 'video') {
oldValue = element.src || element.currentSrc || ''; oldValue = element.src || element.currentSrc || '';
const newMediaType = getMediaTypeFromUrl(newSrc); const sources = element.querySelectorAll('source');
const sources = element.querySelectorAll('source');
if (newMediaType === 'image' && allowMediaTypeSwap) { if (newMediaType === 'image' && allowMediaTypeSwap) {
const swapped = swapMediaElement(element, 'img', newSrc); if (selectedElement === element) selectedElement = swapped;
if (selectedElement === element) selectedElement = swapped;
element = swapped; element = swapped;
} else { } else {
if (sources.length > 0) { if (sources.length > 0) {
@@ -2663,8 +2638,7 @@ export default function RootLayout({
} }
if (replaced) { if (replaced) {
const elementInfo = getElementInfo(element);
let cleanOldValue = oldValue; let cleanOldValue = oldValue;
if (oldValue.includes('url(')) { if (oldValue.includes('url(')) {
const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/); const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
@@ -2735,13 +2709,7 @@ export default function RootLayout({
} }
}, true); }, true);
const urlCheckInterval = setInterval(() => {
if (lastPathname !== window.location.pathname) {
lastPathname = window.location.pathname;
notifyPageChange();
}
}, 500);
notifyPageChange(); notifyPageChange();
window.webildCleanup = () => { window.webildCleanup = () => {

8
src/app/page.tsx
View File

@@ -47,7 +47,7 @@ export default function CeramicShineLanding() {
tagIcon={Sparkles} tagIcon={Sparkles}
tagAnimation="slide-up" tagAnimation="slide-up"
background={{ variant: "plain" }} background={{ variant: "plain" }}
imageSrc="http://img.b2bpic.net/free-photo/man-white-shirt-wipes-car-car-wash_1157-27228.jpg?_wi=1" imageSrc="http://img.b2bpic.net/premium-photo/professional-man-polishing-black-car-car-care-polishing-scratch-removal-detailing_338491-26155.jpg?id=392387974"
imageAlt="Luxury vehicle with professional ceramic coating shine" imageAlt="Luxury vehicle with professional ceramic coating shine"
imagePosition="right" imagePosition="right"
mediaAnimation="blur-reveal" mediaAnimation="blur-reveal"
@@ -102,13 +102,13 @@ export default function CeramicShineLanding() {
animationType="slide-up" animationType="slide-up"
features={[ features={[
{ {
title: "Ceramic Coating", description: "Professional-grade ceramic coating application providing superior protection, hydrophobic properties, and enhanced gloss that lasts for years.", imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342634.jpg?_wi=1", imageAlt: "Ceramic coating application process" title: "Ceramic Coating", description: "Professional-grade ceramic coating application providing superior protection, hydrophobic properties, and enhanced gloss that lasts for years.", imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30598.jpg?id=24233785", imageAlt: "Ceramic coating application process"
}, },
{ {
title: "Interior Detailing", description: "Comprehensive interior cleaning including deep cleaning of seats, carpets, trim, and dashboard restoration using premium protective products.", imageSrc: "http://img.b2bpic.net/free-photo/place-airbag-close-up-view-interior-brand-new-modern-luxury-automobile_146671-16599.jpg", imageAlt: "Professional car interior detailing" title: "Interior Detailing", description: "Comprehensive interior cleaning including deep cleaning of seats, carpets, trim, and dashboard restoration using premium protective products.", imageSrc: "http://img.b2bpic.net/free-photo/place-airbag-close-up-view-interior-brand-new-modern-luxury-automobile_146671-16599.jpg", imageAlt: "Professional car interior detailing"
}, },
{ {
title: "Paint Protection Film", description: "Professional paint protection film installation safeguarding against stone chips, scratches, and environmental damage while maintaining your car's appearance.", imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342669.jpg?_wi=1", imageAlt: "Paint protection film application" title: "Paint Protection Film", description: "Professional paint protection film installation safeguarding against stone chips, scratches, and environmental damage while maintaining your car's appearance.", imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30592.jpg?id=24233779", imageAlt: "Paint protection film application"
} }
]} ]}
useInvertedBackground={false} useInvertedBackground={false}
@@ -154,7 +154,7 @@ export default function CeramicShineLanding() {
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[ testimonials={[
{ {
id: "1", title: "Exceptional Professional Service", quote: "From the moment I contacted Ceramic Shine, I felt confident in their expertise. The ceramic coating application was flawless, and my car's finish has never looked better. Highly recommend their services.", name: "James Mitchell", role: "Luxury Vehicle Owner", imageSrc: "http://img.b2bpic.net/free-photo/young-family-buying-car_1303-13820.jpg?_wi=2", imageAlt: "James Mitchell" id: "1", title: "Exceptional Professional Service", quote: "From the moment I contacted Ceramic Shine, I felt confident in their expertise. The ceramic coating application was flawless, and my car's finish has never looked better. Highly recommend their services.", name: "James Kaufman", role: "Perth, WA", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai8IEf9DFhOWojE3XCdzqytRXI/uploaded-1773065498973-q6nqg04s.jpg", imageAlt: "James Kaufman"
}, },
{ {
id: "2", title: "Reliable Fleet Maintenance Partner", quote: "We manage multiple vehicles for our business, and Ceramic Shine has been our trusted partner for professional detailing and protection. Consistent quality and professional service every time.", name: "Sarah Chen", role: "Fleet Manager", imageSrc: "http://img.b2bpic.net/free-photo/female-salesperson-car-showroom_1303-13926.jpg?_wi=2", imageAlt: "Sarah Chen" id: "2", title: "Reliable Fleet Maintenance Partner", quote: "We manage multiple vehicles for our business, and Ceramic Shine has been our trusted partner for professional detailing and protection. Consistent quality and professional service every time.", name: "Sarah Chen", role: "Fleet Manager", imageSrc: "http://img.b2bpic.net/free-photo/female-salesperson-car-showroom_1303-13926.jpg?_wi=2", imageAlt: "Sarah Chen"

4
src/app/styles/base.css
View File

@@ -11,7 +11,7 @@ html {
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: var(--font-figtree), sans-serif; font-family: var(--font-poppins), sans-serif;
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overscroll-behavior: none; overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-figtree), sans-serif; font-family: var(--font-poppins), sans-serif;
} }

16
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff; --accent: #ffffff;
--background-accent: #ffffff; */ --background-accent: #ffffff; */
--background: #0a0a0a; --background: #000000;
--card: #1a1a1a; --card: #1f1f40;
--foreground: #ffffff; --foreground: #ffffff;
--primary-cta: #e34400; --primary-cta: #ffffff;
--primary-cta-text: #ffffff; --primary-cta-text: #0a051a;
--secondary-cta: #010101; --secondary-cta: #0d0d2b;
--secondary-cta-text: #ffffff; --secondary-cta-text: #d4d4f6;
--accent: #737373; --accent: #3d2880;
--background-accent: #e34400; --background-accent: #663cff;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);