Merge version_13_1782135884185 into main

Merge version_13_1782135884185 into main

index.html

@@ -7,9 +7,9 @@
     <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ColorPro Supplies | Premium Paint &amp; Professional Tools</title>
-      <meta property="og:title" content="ColorPro Supplies | Premium Paint &amp; Professional Tools" />
-      <meta name="twitter:title" content="ColorPro Supplies | Premium Paint &amp; Professional Tools" />
+    <title>Comet Paints &amp; Allied Products</title>
+      <meta property="og:title" content="Comet Paints &amp; Allied Products" />
+      <meta name="twitter:title" content="Comet Paints &amp; Allied Products" />
       <meta name="description" content="Your local source for premium paints, primers, and professional painting tools. Visit our showroom or order online today." />
       <meta property="og:description" content="Your local source for premium paints, primers, and professional painting tools. Visit our showroom or order online today." />
       <meta name="twitter:description" content="Your local source for premium paints, primers, and professional painting tools. Visit our showroom or order online today." />

src/components/Layout.tsx

@@ -8,67 +8,64 @@ import { StyleProvider } from "@/components/ui/StyleProvider";
 
 export default function Layout() {
   const navItems = [
-  {
-    "name": "Home",
-    "href": "#hero"
-  },
-  {
-    "name": "Products",
-    "href": "#products"
-  },
-  {
-    "name": "Contact",
-    "href": "#contact"
-  },
-  {
-    "name": "About",
-    "href": "#about"
-  },
-  {
-    "name": "Pricing",
-    "href": "#pricing"
-  },
-  {
-    "name": "Testimonials",
-    "href": "#testimonials"
-  },
-  {
-    "name": "Faq",
-    "href": "#faq"
-  }
-];
+    {
+      "name": "Home",
+      "href": "#hero"
+    },
+    {
+      "name": "Products",
+      "href": "#products"
+    },
+    {
+      "name": "Contact",
+      "href": "#contact"
+    },
+    {
+      "name": "About",
+      "href": "#about"
+    },
+    {
+      "name": "Pricing",
+      "href": "#pricing"
+    },
+    {
+      "name": "Faq",
+      "href": "#faq"
+    }
+  ];
 
   return (
     <StyleProvider buttonVariant="expand" siteBackground="noise" heroBackground="cornerGlow">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
         <NavbarFloating
-      logo="Comet Paints and Allied Products"
-      ctaButton={{
-        text: "Order Now",
-        href: "#contact",
-      }}
-     navItems={navItems} />
+          logo="Comet Paints and Allied Products"
+          ctaButton={{
+            text: "Order Now",
+            href: "#contact",
+          }}
+          navItems={navItems} 
+        />
       </SectionErrorBoundary>
       <main className="flex-grow">
         <Outlet />
       </main>
       <SectionErrorBoundary name="footer">
         <FooterMinimal
-      brand="Comet Paints and Allied Products"
-      copyright="© 2024 Comet Paints and Allied Products. All rights reserved."
-      socialLinks={[
-        {
-          icon: Instagram,
-          href: "#",
-        },
-        {
-          icon: Facebook,
-          href: "#",
-        },
-      ]}
-    />
+          brand="Comet Paints and Allied Products"
+          copyright="© 2006-2024 Comet Paints and Allied Products. All rights reserved."
+          socialLinks={[
+            {
+              icon: Instagram,
+              href: "#",
+            },
+            {
+              icon: Facebook,
+              href: "#",
+            },
+          ]}
+        />
       </SectionErrorBoundary>
     </StyleProvider>
   );
-}
+}

src/index.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&display=swap');
 @import "tailwindcss";
 @import "./styles/masks.css";
 @import "./styles/animations.css";
@@ -88,7 +88,7 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: 'Inter', sans-serif;
+  --font-sans: 'Lato', sans-serif;
   --font-tight: "Inter Tight", sans-serif;
   --font-mono: monospace;
 
@@ -137,7 +137,7 @@ body {
   margin: 0;
   background-color: var(--background);
   color: var(--foreground);
-  font-family: 'Inter', sans-serif;
+  font-family: 'Lato', sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -150,7 +150,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Inter', sans-serif;
+  font-family: 'Lato', sans-serif;
 }
 
 /* Default card/button styles. Template theme.css imports come after this file

src/pages/HomePage.tsx

@@ -1,36 +1,24 @@
-// AUTO-GENERATED shell by per-section-migrate.
-// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
-// files directly. Non-block content (wrappers, non-inlinable sections) is
-// preserved inline; extracted section blocks become <XSection/> refs.
-
 import React from 'react';
 import HeroSection from './HomePage/sections/Hero';
 import AboutSection from './HomePage/sections/About';
 import ProductsSection from './HomePage/sections/Products';
 import PricingSection from './HomePage/sections/Pricing';
-import TestimonialsSection from './HomePage/sections/Testimonials';
 import FaqSection from './HomePage/sections/Faq';
 import SocialProofSection from './HomePage/sections/SocialProof';
 import ContactSection from './HomePage/sections/Contact';
+import GallerySection from './HomePage/sections/Gallery';
 
 export default function HomePage(): React.JSX.Element {
   return (
-<>
-  <HeroSection />
-
-  <AboutSection />
-
-  <ProductsSection />
-
-  <PricingSection />
-
-  <TestimonialsSection />
-
-  <FaqSection />
-
-  <SocialProofSection />
-
-  <ContactSection />
+    <>
+      <HeroSection />
+      <AboutSection />
+      <ProductsSection />
+      <PricingSection />
+      <FaqSection />
+      <SocialProofSection />
+      <ContactSection />
+      <GallerySection />
     </>
   );
-}
+}

src/pages/HomePage/sections/About.tsx

@@ -10,7 +10,7 @@ export default function AboutSection(): React.JSX.Element {
     <div id="about" data-section="about">
         <SectionErrorBoundary name="about">
               <AboutText
-        title="Since 1985, Comet Paints and Allied Products has been serving the community with high-performance paint solutions and expert advice for every renovation project."
+        title="Since 2006, Comet Paints and Allied Products has been serving the comunity with high-performance paint solutions and expert advice for every renovation project."
       />
         </SectionErrorBoundary>
       </div>

src/pages/HomePage/sections/Contact.tsx

@@ -11,10 +11,10 @@ export default function ContactSection(): React.JSX.Element {
         <SectionErrorBoundary name="contact">
               <ContactCta
           tag="Ready to Start?"
-          text="Get in touch for custom orders, quotes, or to visit our showroom located at 123 Paint Street."
+          text="Get in touch for custom orders, quotes, or to visit our showroom. ."
           primaryButton={{
             text: "Contact Us Now",
-            href: "mailto:hello@colorpro.com",
+            href: "mailto:hello@cometpaints.com",
           }}
           secondaryButton={{
             text: "Call Shop",

src/pages/HomePage/sections/Gallery.tsx

@@ -0,0 +1,83 @@
+import { motion } from "motion/react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Tag from "@/components/ui/Tag";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+export default function GallerySection() {
+  const projects = [
+    {
+      title: "Residential Painting",
+      description: "Exterior and interior painting for modern homes.",
+      imageSrc: "https://images.unsplash.com/photo-1589939705384-5185137a7f0f?auto=format&fit=crop&q=80&w=800",
+    },
+    {
+      title: "Commercial Spaces",
+      description: "Durable coatings for high-traffic commercial buildings.",
+      imageSrc: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&q=80&w=800",
+    },
+    {
+      title: "Industrial Projects",
+      description: "Specialized protective paints for industrial facilities.",
+      imageSrc: "https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=800",
+    },
+    {
+      title: "Interior Decor",
+      description: "Premium finishes for elegant interior spaces.",
+      imageSrc: "https://images.unsplash.com/photo-1562663474-6cbb3eaa4d14?auto=format&fit=crop&q=80&w=800",
+    },
+    {
+      title: "Exterior Facades",
+      description: "Weather-resistant paints for long-lasting exterior beauty.",
+      imageSrc: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&q=80&w=800",
+    },
+    {
+      title: "Custom Finishes",
+      description: "Unique textures and colors tailored to client needs.",
+      imageSrc: "https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&q=80&w=800",
+    }
+  ];
+
+  return (
+    <section data-webild-section="gallery" id="gallery" className="relative w-full py-24 bg-background">
+      <div className="w-content-width mx-auto">
+        <div className="flex flex-col items-center text-center mb-16">
+          <ScrollReveal variant="fade">
+            <Tag text="Gallery" className="mb-4" />
+          </ScrollReveal>
+          <TextAnimation
+            text="Our Real-Life Projects"
+            variant="fade-blur"
+            tag="h2"
+            gradientText={false}
+            className="text-4xl md:text-5xl font-bold text-foreground mb-6"
+          />
+          <ScrollReveal variant="fade" delay={0.2}>
+            <p className="text-lg text-accent max-w-2xl mx-auto">
+              Take a look at some of the projects we've completed using Comet Paints and Allied Products.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {projects.map((project, index) => (
+            <ScrollReveal variant="fade" key={index} delay={0.1 * index}>
+              <div className="card overflow-hidden group h-full flex flex-col">
+                <div className="relative aspect-[4/3] overflow-hidden">
+                  <ImageOrVideo
+                    imageSrc={project.imageSrc}
+                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                  />
+                </div>
+                <div className="p-6 flex-1 flex flex-col">
+                  <h3 className="text-xl font-semibold text-foreground mb-2">{project.title}</h3>
+                  <p className="text-accent">{project.description}</p>
+                </div>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}