Switch to version 4: modified src/app/page.tsx

Merge version_6_1781411869861 into main

src/app/page.tsx

@@ -3,13 +3,13 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
-import ContactCta from '@/components/sections/contact/ContactCta';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
-import FooterBrandReveal from '@/components/sections/footer/FooterBrandReveal';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import NavbarInline from '@/components/ui/NavbarInline';
-import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import { Award, CheckCircle, ShieldCheck, Zap, AlertTriangle, Circle } from "lucide-react";
 
 export default function LandingPage() {
@@ -28,125 +28,167 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarInline
+      <NavbarStyleFullscreen
       navItems={[
-        { name: "Home", href: "#hero" },
-        { name: "Services", href: "#features" },
-        { name: "Pricing", href: "#pricing" },
-        { name: "Contact", href: "#contact" },
+        {
+          name: "Home",          id: "hero"},
+        {
+          name: "Services",          id: "features"},
+        {
+          name: "Contact",          id: "contact"},
       ]}
-      logo="Ray Tree Service"
-      ctaButton={{ text: "Get Quote", href: "#contact" }}
+      brandName="Ray Tree Service"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitKpi
-      tag="Professional Tree Care"
-      title="Safe, Professional Tree Solutions"
-      description="Expert pruning, removal, and maintenance by certified arborists. We ensure your property looks its best while prioritizing safety."
-      primaryButton={{ text: "Get a Free Quote", href: "#contact" }}
-      secondaryButton={{ text: "Our Services", href: "#features" }}
-      kpis={[
-        { value: "1,500+", label: "Trees Removed" },
-        { value: "20+", label: "Years Experience" },
-        { value: "10+", label: "Certified Arborists" },
+      <HeroLogoBillboard
+      background={{
+        variant: "downward-rays-static"}}
+      logoText="Ray Tree Service"
+      description="Professional tree care including trimming, removal, and general cleanup. We focus on safe, clean, professional work for your property. Call us today: +1 (951) 425-2355."
+      buttons={[
+        {
+          text: "Get a Free Quote",          href: "#contact"},
+        {
+          text: "Our Services",          href: "#features"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/cropped-view-gardening-worker-wearing-protective-gloves-while-trimming-plants_344912-2285.jpg"
+      imageAlt="Professional arborist trimming trees"
+      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="metrics" data-section="metrics">
       <AboutMetric
+      useInvertedBackground={true}
       title="Why Trust Us?"
       metrics={[
-        { icon: "CheckCircle", label: "Trees Safely Removed", value: "1,500+" },
-        { icon: "ShieldCheck", label: "Years Experience", value: "20+" },
-        { icon: "Award", label: "Certified Arborists", value: "10+" },
+        {
+          icon: CheckCircle,
+          label: "Trees Safely Removed",          value: "1,500+"},
+        {
+          icon: ShieldCheck,
+          label: "Years Experience",          value: "20+"},
+        {
+          icon: Award,
+          label: "Certified Arborists",          value: "10+"},
       ]}
+      metricsAnimation="slide-up"
     />
   </div>
 
   <div id="features" data-section="features">
       <FeatureCardTwentySix
-      title="Our Professional Services"
-      description="Comprehensive tree care and cleanup solutions performed by professional arborists focused on safety and quality."
+      textboxLayout="default"
+      useInvertedBackground={false}
       features={[
         {
-          title: "Tree Trimming",          description: "Expert pruning to keep your trees healthy, strong, and growing properly.",          imageSrc: "http://img.b2bpic.net/free-photo/man-trimming-bough-brush-guy-works-backyard_1157-41447.jpg"
+          title: "Tree Trimming",          description: "Expert pruning to keep your trees healthy, strong, and growing properly.",          imageSrc: "http://img.b2bpic.net/free-photo/man-trimming-bough-brush-guy-works-backyard_1157-41447.jpg",          buttonIcon: Zap,
         },
         {
-          title: "Tree Removal",          description: "Safe, precise removal of hazardous or unwanted trees, performed by our professional team.",          imageSrc: "http://img.b2bpic.net/free-photo/carpenter-working-sawmill-wood-manufacture_1303-22900.jpg"
+          title: "Tree Removal",          description: "Safe, precise removal of hazardous or unwanted trees, performed by our professional team.",          imageSrc: "http://img.b2bpic.net/free-photo/carpenter-working-sawmill-wood-manufacture_1303-22900.jpg",          buttonIcon: ShieldCheck,
         },
         {
-          title: "General Cleanup",          description: "Thorough property cleanup including debris removal for a clean and tidy landscape.",          imageSrc: "http://img.b2bpic.net/free-photo/man-with-chainsaw-cuts-tree_169016-1835.jpg"
+          title: "General Cleanup",          description: "Thorough property cleanup including debris removal for a clean and tidy landscape.",          imageSrc: "http://img.b2bpic.net/free-photo/man-with-chainsaw-cuts-tree_169016-1835.jpg",          buttonIcon: Circle,
         },
         {
-          title: "Safety First",          description: "We emphasize safe, professional, and clean work practices on every single project.",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359695.jpg"
+          title: "Safety First",          description: "We emphasize safe, professional, and clean work practices on every single project.",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359695.jpg",          buttonIcon: AlertTriangle,
         },
       ]}
+      title="Our Professional Services"
+      description="Comprehensive tree care and cleanup solutions performed by professional arborists focused on safety and quality."
     />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingSimpleCards
-      tag="Transparent Pricing"
-      title="Competitive Rates"
-      description="Clear and competitive rates for professional tree care."
+      <PricingCardFive
+      animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={true}
       plans={[
         {
-          tag: "Essential",          price: "Contact",          description: "On-site assessment for your specific needs.",          features: ["Expert evaluation", "Safety assessment", "Customized plan"]
+          id: "basic",          tag: "Essential",          price: "Contact",          period: "for quote",          description: "On-site assessment to understand your specific property needs.",          button: {
+            text: "Request Quote",            href: "#contact"},
+          featuresTitle: "Included Services",          features: [
+            "Expert evaluation",            "Safety assessment",            "Customized plan"],
         },
         {
-          tag: "Standard",          price: "Varies",          description: "Tree maintenance, pruning, and basic removals.",          features: ["Expert pruning", "Basic removal", "Debris cleanup"]
+          id: "standard",          tag: "Popular",          price: "Varies",          period: "per service",          description: "Comprehensive tree maintenance including pruning and basic removals.",          button: {
+            text: "Get Started",            href: "#contact"},
+          featuresTitle: "Included Services",          features: [
+            "Expert pruning",            "Basic removal",            "Debris cleanup"],
         },
         {
-          tag: "Premium",          price: "Custom",          description: "Large-scale removals and multi-tree programs.",          features: ["Full removal", "Stump grinding", "Site restoration"]
-        }
+          id: "premium",          tag: "Full Service",          price: "Custom",          period: "per project",          description: "Large-scale tree removal and multi-tree maintenance programs for properties.",          button: {
+            text: "Discuss Plan",            href: "#contact"},
+          featuresTitle: "Included Services",          features: [
+            "Full removal",            "Stump grinding",            "Site restoration"],
+        },
       ]}
+      title="Transparent Pricing"
+      description="Clear and competitive rates for professional tree care. Get started with an on-site evaluation."
     />
   </div>
 
   <div id="social-proof" data-section="social-proof">
-      <SocialProofMarquee
-      tag="Partnerships"
-      title="Trusted by the Community"
+      <SocialProofOne
+      textboxLayout="default"
+      useInvertedBackground={false}
       names={[
-        "Homeowners Association",        "Local Municipality",        "Community Center",        "Real Estate Partners",        "Industrial Park",        "Parks and Rec"
-      ]}
+        "Homeowners Association",        "Local Municipality",        "Community Center",        "Real Estate Partners",        "Retail Plaza",        "Industrial Park",        "Parks and Rec"]}
+      title="Trusted by the Community"
+      description="We are proud to partner with local institutions and residents to maintain a beautiful and safe environment."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCta
+      <ContactCenter
+      useInvertedBackground={true}
+      background={{
+        variant: "downward-rays-static"}}
       tag="Let's Connect"
-      text="Ready for a free, on-site evaluation? Reach out today to discuss your tree care needs."
-      primaryButton={{ text: "Call Us Now", href: "tel:+19514252355" }}
-      secondaryButton={{ text: "Email Us", href: "mailto:info@raytreeservice.com" }}
+      title="Ready for a Free Consultation?"
+      description="Reach out today to discuss your tree care needs. We offer free, on-site evaluations for all projects. Call us at +1 (951) 425-2355."
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBrandReveal
-      brand="Ray Tree Service"
+      <FooterMedia
+      imageSrc="http://img.b2bpic.net/free-photo/trees-with-green-leaves_1417-1390.jpg"
+      imageAlt="Professional nature landscape"
+      logoText="Ray Tree Service"
       columns={[
         {
-          items: [
-            { label: "Pruning", href: "#features" },
-            { label: "Removal", href: "#features" },
-            { label: "Cleanup", href: "#features" }
-          ]
+          title: "Services",          items: [
+            {
+              label: "Pruning",              href: "#features"},
+            {
+              label: "Removal",              href: "#features"},
+            {
+              label: "General Cleanup",              href: "#features"},
+          ],
         },
         {
-          items: [
-            { label: "About Us", href: "#" },
-            { label: "Contact", href: "#contact" }
-          ]
-        }
+          title: "Company",          items: [
+            {
+              label: "About Us",              href: "#"},
+            {
+              label: "Contact",              href: "#contact"},
+          ],
+        },
+        {
+          title: "Legal",          items: [
+            {
+              label: "Privacy Policy",              href: "#"},
+            {
+              label: "Terms of Service",              href: "#"},
+          ],
+        },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}