Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -2,305 +2,131 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import MediaAbout from '@/components/sections/about/MediaAbout';
-import { Sparkles } from "lucide-react";
+import { Sparkles, CheckCircle, ShieldCheck } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="text-stagger"
         defaultTextAnimation="entrance-slide"
-        borderRadius="rounded"
+        borderRadius="pill"
-        contentWidth="small"
+        contentWidth="medium"
-        sizing="mediumLarge"
+        sizing="medium"
-        background="none"
+        background="floatingGradient"
-        cardStyle="gradient-bordered"
+        cardStyle="gradient-mesh"
-        primaryButtonStyle="shadow"
+        primaryButtonStyle="radial-glow"
-        secondaryButtonStyle="solid"
+        secondaryButtonStyle="layered"
-        headingFontWeight="medium"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "About", id: "about" },
-          id: "hero",
+        { name: "Services", id: "services" },
-        },
+        { name: "Testimonials", id: "testimonials" },
-        {
+        { name: "FAQ", id: "faq" },
-          name: "About",
+        { name: "Contact", id: "contact" },
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
-      brandName="Monshalken Cleaning"
+      brandName="Monshalken"
+      button={{ text: "Get Quote", href: "#contact" }}
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboard
+      <HeroOverlayTestimonial
-      background={{
+      title="Professional Cleaning & Supplies"
-        variant: "gradient-bars",
+      description="We deliver exceptional janitorial results and premium cleaning supplies tailored for commercial and residential excellence."
-      }}
+      testimonials={[
-      title="Spotless Spaces, Reliable Supplies."
-      description="Monshalken Cleaning and General Supplies provides professional janitorial services and premium cleaning supplies for businesses and homes. Quality you can trust."
-      buttons={[
         {
-          text: "Get a Quote",
+          name: "Sarah Jenkins",          handle: "Office Manager",          testimonial: "The most reliable service we have ever used. Consistent quality.",          rating: 5,
-          href: "#contact",
+          imageSrc: "https://img.b2bpic.net/free-photo/cheerful-latin-black-haired-woman-standing-with-arms-folded-near-rack-with-dresses-clothes-shop-looking-camera-smiling-boutique-customer-shop-assistant-concept_74855-11601.jpg"
-        },
+        }
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/elevated-view-paper-bag-with-birthday-accessories-green-background_23-2147917389.jpg"
-      imageAlt="professional cleaning service team smiling"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/various-cleaning-objects-with-space-top_23-2147699412.jpg",
-          alt: "Various cleaning objects with space on top",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/composition-cleaning-objects-with-copyspace_23-2148104500.jpg",
-          alt: "Composition of cleaning objects with copyspace",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/elevated-view-cleaning-equipments-bottom-grey-background_23-2147860278.jpg",
-          alt: "Elevated view of cleaning equipments at the bottom of grey background",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/high-angle-view-cleaning-equipments-yellow-backdrop_23-2147860213.jpg",
-          alt: "High angle view of cleaning equipments on yellow backdrop",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/full-shot-man-vacuuming-office-floor_23-2149345550.jpg",
-          alt: "Full shot man vacuuming office floor",
-        },
-      ]}
-      avatarText="Trusted by 500+ local partners"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Janitorial Experts",
-        },
-        {
-          type: "text",
-          text: "Premium Supplies",
-        },
-        {
-          type: "text",
-          text: "Daily Maintenance",
-        },
-        {
-          type: "text",
-          text: "Sustainable Solutions",
-        },
-        {
-          type: "text",
-          text: "Fast Delivery",
-        },
       ]}
+      buttons={[{ text: "Explore Services", href: "#services" }]}
+      imageSrc="https://img.b2bpic.net/free-photo/professional-cleaning-service-people-working-together-office_23-2150520639.jpg"
     />
   </div>
 
   <div id="about" data-section="about">
-      <TestimonialAboutCard
+      <MediaAbout
+      tag="Our Commitment"
+      title="Excellence in Maintenance"
+      description="Monshalken bridges the gap between high-end professional cleaning services and premium supply chain distribution."
+      imageSrc="https://img.b2bpic.net/free-photo/full-shot-man-vacuuming-office-floor_23-2149345550.jpg"
       useInvertedBackground={true}
-      tag="About Us"
-      title="Your Trusted Cleaning Partner"
-      description="With years of experience, we take pride in delivering meticulous cleaning results while ensuring you have access to the highest quality cleaning supplies."
-      subdescription="Whether you are a small business, a large office complex, or a homeowner, our team is equipped to maintain your environment to the highest standards."
-      icon={Sparkles}
-      imageSrc="http://img.b2bpic.net/free-photo/professional-cleaning-service-people-working-together-office_23-2150520639.jpg"
-      mediaAnimation="slide-up"
-      imageAlt="professional cleaners mopping commercial building"
     />
   </div>
 
   <div id="services" data-section="services">
-      <FeatureCardTwelve
+      <FeatureBorderGlow
-      animationType="slide-up"
+      title="Comprehensive Cleaning & Supply"
-      textboxLayout="default"
+      description="Solutions for businesses, offices, and homes."
-      useInvertedBackground={false}
       features={[
-        {
+        { icon: ShieldCheck, title: "Janitorial Services", description: "Deep cleaning for commercial spaces." },
-          id: "1",
+        { icon: CheckCircle, title: "Premium Supplies", description: "Bulk order high-grade cleaning agents." },
-          label: "01",
+        { icon: Sparkles, title: "Specialized Care", description: "Carpet, window, and deep-sanitize services." }
-          title: "Janitorial Services",
-          items: [
-            "Daily office cleaning",
-            "Floor waxing and polishing",
-            "Restroom sanitation",
-          ],
-        },
-        {
-          id: "2",
-          label: "02",
-          title: "Supply Procurement",
-          items: [
-            "High-grade chemicals",
-            "Eco-friendly cleaning agents",
-            "Bulk cleaning equipment",
-          ],
-        },
-        {
-          id: "3",
-          label: "03",
-          title: "Specialty Cleaning",
-          items: [
-            "Deep carpet cleaning",
-            "Window wash services",
-            "Post-construction cleaning",
-          ],
-        },
       ]}
-      title="Our Professional Services"
+      animationType="blur-reveal"
-      description="A comprehensive suite of cleaning solutions and supply procurement to keep your facilities running perfectly."
+      textboxLayout="split-description"
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
+      <TestimonialCardTwelve
-      animationType="slide-up"
+      cardTitle="Trusted by Professionals"
-      textboxLayout="split"
+      cardTag="Testimonials"
-      useInvertedBackground={true}
       testimonials={[
-        {
+        { id: "1", name: "TechCorp", imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-business-office-business-center_1303-20365.jpg" },
-          id: "1",
+        { id: "2", name: "Local Cafe", imageSrc: "https://img.b2bpic.net/free-photo/coffee-business-owner-concept-portrait-happy-young-bearded-caucasian-barista-apron-with-confident-looking-smiling-camera-coffee-shop-counter_1258-103925.jpg" }
-          name: "Sarah Johnson",
-          handle: "@sarahj",
-          testimonial: "Monshalken keeps our office spotless. Their team is reliable.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-business-office-business-center_1303-20365.jpg",
-        },
-        {
-          id: "2",
-          name: "Michael Chen",
-          handle: "@mchen",
-          testimonial: "Fantastic service for our retail store consistently.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-latin-black-haired-woman-standing-with-arms-folded-near-rack-with-dresses-clothes-shop-looking-camera-smiling-boutique-customer-shop-assistant-concept_74855-11601.jpg",
-        },
-        {
-          id: "3",
-          name: "Emily Rodriguez",
-          handle: "@erod",
-          testimonial: "Professional, punctual, and high quality services.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-cleaning-his-home_23-2148112017.jpg",
-        },
-        {
-          id: "4",
-          name: "David Kim",
-          handle: "@dkim",
-          testimonial: "Best cleaning supplies supplier in the area. Great prices.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/coffee-business-owner-concept-portrait-happy-young-bearded-caucasian-barista-apron-with-confident-looking-smiling-camera-coffee-shop-counter_1258-103925.jpg",
-        },
-        {
-          id: "5",
-          name: "Laura Smith",
-          handle: "@lsmith",
-          testimonial: "Reliable support that keeps our cafe clean and welcoming.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/haidresser-showing-thumb-up-sign_23-2148298311.jpg",
-        },
       ]}
-      showRating={true}
+      cardAnimation="slide-up"
-      title="Voices of Satisfaction"
+      useInvertedBackground={true}
-      description="See why local businesses trust Monshalken with their cleaning and supply needs."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
+      <FaqSplitMedia
-      textboxLayout="default"
+      title="Common Inquiries"
-      useInvertedBackground={false}
+      description="We are here to help with your questions."
       faqs={[
-        {
+        { id: "1", title: "Do you provide daily cleaning?", content: "Yes, we offer daily, weekly, and monthly maintenance plans." },
-          id: "1",
+        { id: "2", title: "Can I order supplies in bulk?", content: "Absolutely, our supply procurement handles bulk orders with fast delivery." }
-          title: "Do you serve residential clients?",
-          content: "Yes, we handle residential cleaning services for homes of all sizes.",
-        },
-        {
-          id: "2",
-          title: "How do I request a quote?",
-          content: "Contact us via the form on this site and we will reply within 24 hours with a custom estimate.",
-        },
-        {
-          id: "3",
-          title: "Can I buy supplies without cleaning services?",
-          content: "Absolutely, we are a general supply provider and can manage your bulk supply orders independently.",
-        },
       ]}
-      title="Frequently Asked Questions"
-      description="Quick answers to help you get started with our services."
       faqsAnimation="slide-up"
+      textboxLayout="split"
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCenter
+      tag="Contact"
+      title="Reach Out to Us"
+      description="Whether it's cleaning services or supply chain assistance, we're ready to serve."
+      background={{ variant: "sparkles-gradient" }}
       useInvertedBackground={true}
-      background={{
-        variant: "gradient-bars",
-      }}
-      text="Ready to get started? Get in touch with the Monshalken team today for a custom quote on cleaning services or supply orders."
-      buttons={[
-        {
-          text: "Contact Us Now",
-          href: "mailto:hello@monshalkencleaning.com",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBase
+      <FooterLogoReveal
-      columns={[
+      logoText="Monshalken"
-        {
+      leftLink={{ text: "Privacy Policy", href: "#" }}
-          title: "Services",
+      rightLink={{ text: "Terms of Service", href: "#" }}
-          items: [
-            {
-              label: "Janitorial",
-              href: "#services",
-            },
-            {
-              label: "Supplies",
-              href: "#services",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
-      ]}
-      logoText="Monshalken Cleaning"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #000000;
-  --card: #ffffff;
+  --card: #0c0c0c;
-  --foreground: #1c1c1c;
+  --foreground: #ffffff;
-  --primary-cta: #1f514c;
+  --primary-cta: #106EFB;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #000000;
   --secondary-cta-text: #1c1c1c;
-  --accent: #159c49;
+  --accent: #535353;
-  --background-accent: #a8e8ba;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);