Update theme fonts

2026-03-09 14:24:59 +00:00 · 2026-03-09 14:24:58 +00:00 · 2026-03-09 14:24:44 +00:00 · 2026-03-09 14:24:44 +00:00 · 2026-03-09 14:21:25 +00:00 · 2026-03-09 14:19:58 +00:00
4 changed files with 60 additions and 87 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,19 +5,11 @@ import { Figtree } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 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 = {
  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,16 @@ 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({
  children,
 }: Readonly<{
@@ -46,9 +48,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${figtree.variable} antialiased`}
-        >
+        <body className={`${poppins.variable} antialiased`}>
          <Tag />
          {children}
        
@@ -1660,9 +1660,7 @@ export default function RootLayout({
  const getElementInfo = (element, assignId = false) => {
    const rect = element.getBoundingClientRect();
    const tagName = element.tagName.toLowerCase();
-    const selector = getUniqueSelector(element, assignId);
-    const sectionId = getSectionId(element);
-    
+            
    let className = undefined;
    try {
      if (element.className) {
@@ -1690,8 +1688,7 @@ export default function RootLayout({
    };
    
    if (tagName === 'img') {
-      const originalSrc = extractOriginalUrl(element.src);
-      info.imageData = {
+            info.imageData = {
        src: originalSrc,
        alt: element.alt || undefined,
        naturalWidth: element.naturalWidth,
@@ -1702,8 +1699,7 @@ export default function RootLayout({

    if (tagName === 'video') {
      const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
-      const resolvedSrc = extractOriginalUrl(rawSrc);
-      info.imageData = {
+            info.imageData = {
        src: resolvedSrc,
        alt: element.getAttribute('aria-label') || undefined,
        isBackground: false,
@@ -1716,8 +1712,7 @@ export default function RootLayout({
    if (backgroundImage && backgroundImage !== 'none') {
      const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
      if (urlMatch) {
-        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
-        if (tagName !== 'img') {
+                if (tagName !== 'img') {
          info.imageData = {
            src: originalBgSrc,
            isBackground: true
@@ -1729,8 +1724,7 @@ export default function RootLayout({
      }
    }
    
-    const elementType = getElementType(element);
-    info.elementType = elementType;
+        info.elementType = elementType;
    
    if (elementType === 'Button') {
      const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
@@ -1823,13 +1817,11 @@ export default function RootLayout({
  };

  const isTextElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Text';
+        return elementType === 'Text';
  };

  const isButtonElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Button';
+        return elementType === 'Button';
  };

  const updateButtonText = (element, newText) => {
@@ -1904,8 +1896,7 @@ export default function RootLayout({
    };
    
    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
      if (currentText === '' || currentText === null || currentText.length === 0) {
@@ -2018,8 +2009,7 @@ export default function RootLayout({
    }, '*');
    
    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
      if (finalText === ' ' || finalText.trim() === '') {
@@ -2148,7 +2138,7 @@ export default function RootLayout({
    lastMouseX = e.clientX;
    lastMouseY = e.clientY;

-    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
+    || e.target;

    if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
      return;
@@ -2180,8 +2170,7 @@ export default function RootLayout({
      hoverOverlay = createHoverOverlay(target);
    }
    
-    const elementType = getElementType(target);
-    showElementTypeLabel(target, elementType);
+        showElementTypeLabel(target, elementType);
    
    window.parent.postMessage({
      type: 'webild-element-hover',
@@ -2223,7 +2212,7 @@ export default function RootLayout({
  e.preventDefault();
  e.stopPropagation();

-  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
+  || e.target;  
  if (!isValidElement(target)) return;
    
    if (selectedElement && selectedElement !== target) {
@@ -2268,8 +2257,7 @@ export default function RootLayout({
      hoveredElement = null;
    }
    
-    const elementInfo = getElementInfo(target, true);
-    selectedElement.dataset.webildSelector = elementInfo.selector;
+        selectedElement.dataset.webildSelector = elementInfo.selector;
    showElementTypeLabel(target, elementInfo.elementType);
    
    window.parent.postMessage({
@@ -2352,8 +2340,7 @@ export default function RootLayout({
      isScrolling = false;

      if (lastMouseX > 0 && lastMouseY > 0) {
-        const target = getMostSpecificElement(lastMouseX, lastMouseY);
-        if (target && isValidElement(target) && target !== selectedElement) {
+                if (target && isValidElement(target) && target !== selectedElement) {
          hoveredElement = target;

          const computedStyle = window.getComputedStyle(target);
@@ -2367,8 +2354,7 @@ export default function RootLayout({
          hoveredElement.classList.add(hoverClass);
          hoverOverlay = createHoverOverlay(target);

-          const elementType = getElementType(target);
-          showElementTypeLabel(target, elementType);
+                    showElementTypeLabel(target, elementType);

          window.parent.postMessage({
            type: 'webild-element-hover',
@@ -2391,8 +2377,7 @@ export default function RootLayout({

  const saveChangeToStorage = (change) => {
    try {
-      const storageKey = getStorageKey();
-      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
+            const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');

      const filteredChanges = existingChanges.filter(c => {
        return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
@@ -2412,8 +2397,7 @@ export default function RootLayout({

  const clearLocalChanges = () => {
    try {
-      const storageKey = getStorageKey();
-      localStorage.removeItem(storageKey);
+            localStorage.removeItem(storageKey);
      window.parent.postMessage({
        type: 'webild-local-changes-cleared',
        data: {}
@@ -2462,8 +2446,7 @@ export default function RootLayout({

    if (e.data.type === 'webild-cancel-changes') {
      try {
-        const storageKey = getStorageKey();
-        const savedChanges = localStorage.getItem(storageKey);
+                const savedChanges = localStorage.getItem(storageKey);
        if (savedChanges) {
          const changes = JSON.parse(savedChanges);
          changes.forEach(change => {
@@ -2485,8 +2468,7 @@ export default function RootLayout({
                if (isBackground) {
                  element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
                } else {
-                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
-                  if (revertTag === 'video' && oldMediaType === 'image') {
+                                    if (revertTag === 'video' && oldMediaType === 'image') {
                    swapMediaElement(element, 'img', change.oldValue);
                  } else if (revertTag === 'img' && oldMediaType === 'video') {
                    swapMediaElement(element, 'video', change.oldValue);
@@ -2534,8 +2516,7 @@ export default function RootLayout({
              const el = textElements[i];
              if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
                element = el;
-                const newSelector = getUniqueSelector(element, true);
-                if (newSelector) {
+                                if (newSelector) {
                  element.dataset.webildSelector = newSelector;
                }
                break;
@@ -2626,10 +2607,8 @@ export default function RootLayout({
          replaced = true;
        } else if (element.tagName.toLowerCase() === 'img') {
          oldValue = element.src;
-          const newMediaType = getMediaTypeFromUrl(newSrc);
-          if (newMediaType === 'video' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'video', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
+                    if (newMediaType === 'video' && allowMediaTypeSwap) {
+                        if (selectedElement === element) selectedElement = swapped;
            element = swapped;
          } else {
            element.src = newSrc;
@@ -2637,11 +2616,9 @@ export default function RootLayout({
          replaced = true;
        } else if (element.tagName.toLowerCase() === 'video') {
          oldValue = element.src || element.currentSrc || '';
-          const newMediaType = getMediaTypeFromUrl(newSrc);
-          const sources = element.querySelectorAll('source');
+                    const sources = element.querySelectorAll('source');
          if (newMediaType === 'image' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'img', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
+                        if (selectedElement === element) selectedElement = swapped;
            element = swapped;
          } else {
            if (sources.length > 0) {
@@ -2663,8 +2640,7 @@ export default function RootLayout({
        }

        if (replaced) {
-          const elementInfo = getElementInfo(element);
-
+          
          let cleanOldValue = oldValue;
          if (oldValue.includes('url(')) {
            const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
@@ -2735,13 +2711,7 @@ export default function RootLayout({
    }
  }, true);
  
-  const urlCheckInterval = setInterval(() => {
-    if (lastPathname !== window.location.pathname) {
-      lastPathname = window.location.pathname;
-      notifyPageChange();
-    }
-  }, 500);
-  
+    
  notifyPageChange();
  
  window.webildCleanup = () => {
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -47,7 +47,7 @@ export default function CeramicShineLanding() {
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          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"
          imagePosition="right"
          mediaAnimation="blur-reveal"
@@ -102,13 +102,13 @@ export default function CeramicShineLanding() {
          animationType="slide-up"
          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: "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}
@@ -154,16 +154,19 @@ export default function CeramicShineLanding() {
          useInvertedBackground={false}
          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: "Outstanding Ceramic Coating Results",              quote: "The ceramic coating has completely transformed my vehicle's appearance. The shine and protection are exactly what I was looking for.",              name: "David Foster",              role: "Luxury Car Owner",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai8IEf9DFhOWojE3XCdzqytRXI/uploaded-1773065498973-q6nqg04s.jpg",              imageAlt: "David Foster"
            },
            {
-              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: "Professional Fleet Maintenance",              quote: "We've entrusted our entire vehicle fleet to Ceramic Shine. Their consistent quality and professionalism is unmatched in the industry.",              name: "Rebecca Mitchell",              role: "Fleet Coordinator",              imageSrc: "http://img.b2bpic.net/free-photo/female-salesperson-car-showroom_1303-13926.jpg?_wi=2",              imageAlt: "Rebecca Mitchell"
            },
            {
-              id: "3",              title: "Outstanding Attention to Detail",              quote: "The level of care and precision they apply to every detail is remarkable. My vehicle looks showroom-new, and I trust their ceramic coating to protect it for years.",              name: "Marcus Thompson",              role: "Business Executive",              imageSrc: "http://img.b2bpic.net/free-photo/positive-excited-young-woman-showing-thumbs-up-having-fun_1262-14331.jpg?_wi=2",              imageAlt: "Marcus Thompson"
+              id: "3",              title: "Exceptional Attention to Every Detail",              quote: "Every aspect of their service demonstrates meticulous care. My car looks showroom-perfect and I'm confident in the long-term protection.",              name: "Michael Chen",              role: "Business Executive",              imageSrc: "http://img.b2bpic.net/free-photo/positive-excited-young-woman-showing-thumbs-up-having-fun_1262-14331.jpg?_wi=2",              imageAlt: "Michael Chen"
            },
            {
-              id: "4",              title: "Worth the Investment",              quote: "I was impressed with their professionalism and the quality of work. The paint protection film has already protected my car from several minor chips. Fantastic value.",              name: "Emma Rodriguez",              role: "Sports Car Enthusiast",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positive-answer_1258-26715.jpg",              imageAlt: "Emma Rodriguez"
+              id: "4",              title: "Excellent Paint Protection Investment",              quote: "The paint protection film has already proven its worth by preventing damage. The quality of work is impressive and highly professional.",              name: "James Rodriguez",              role: "Sports Car Enthusiast",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positive-answer_1258-26715.jpg",              imageAlt: "James Rodriguez"
+            },
+            {
+              id: "5",              title: "Premium Service Worth Every Dollar",              quote: "From consultation to completion, Ceramic Shine delivers premium results. My vehicle has never looked better and the protection is outstanding.",              name: "Jessica Thompson",              role: "Premium Vehicle Owner",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-smile-woman-posing-against-white-background_23-2148911840.jpg",              imageAlt: "Jessica Thompson"
            }
          ]}
        />
@@ -219,4 +222,4 @@ export default function CeramicShineLanding() {
      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-figtree), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-figtree), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */

-  --background: #0a0a0a;
-  --card: #1a1a1a;
+  --background: #000000;
+  --card: #1f1f40;
  --foreground: #ffffff;
-  --primary-cta: #e34400;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #010101;
-  --secondary-cta-text: #ffffff;
-  --accent: #737373;
-  --background-accent: #e34400;
+  --primary-cta: #ffffff;
+  --primary-cta-text: #0a051a;
+  --secondary-cta: #0d0d2b;
+  --secondary-cta-text: #d4d4f6;
+  --accent: #3d2880;
+  --background-accent: #663cff;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	2cef6f64ab	Update theme fonts	2026-03-09 14:24:59 +00:00
bender	f5796c08e8	Update theme fonts	2026-03-09 14:24:58 +00:00
bender	348ae160d6	Update theme fonts	2026-03-09 14:24:44 +00:00
bender	5d950bbbe9	Update theme fonts	2026-03-09 14:24:44 +00:00
bender	d59bff7a65	Update src/app/page.tsx	2026-03-09 14:21:25 +00:00
bender	812ee02a36	Merge version_2 into main Merge version_2 into main	2026-03-09 14:19:58 +00:00
bender	67f0c076da	Update src/app/page.tsx	2026-03-09 14:19:53 +00:00
bender	3d4aa50c2f	Merge version_2 into main Merge version_2 into main	2026-03-09 14:16:17 +00:00
bender	27d4d5268b	Update theme colors	2026-03-09 14:16:10 +00:00
bender	df74e29043	Merge version_2 into main Merge version_2 into main	2026-03-09 14:15:50 +00:00
bender	8772965a8d	Update theme colors	2026-03-09 14:15:44 +00:00
bender	d967edf4ba	Merge version_2 into main Merge version_2 into main	2026-03-09 14:13:58 +00:00
bender	63bdab0f74	Update src/app/page.tsx	2026-03-09 14:13:54 +00:00
bender	97fb87a5ee	Merge version_2 into main Merge version_2 into main	2026-03-09 14:11:56 +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	aad2c669e7	Merge version_2 into main Merge version_2 into main	2026-03-09 14:10:06 +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	b8c831ba7e	Merge version_2 into main Merge version_2 into main	2026-03-09 14:09:57 +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	431a1b228f	Merge version_2 into main Merge version_2 into main	2026-03-09 14:08:42 +00:00
bender	fba08eb13a	Update theme colors	2026-03-09 14:08:36 +00:00
bender	9e1a19b27e	Merge version_2 into main Merge version_2 into main	2026-03-09 13:57:33 +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