Merge version_15_1779482639185 into main

Merge version_15_1779482639185 into main

src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import PricingPage from "@/pages/PricingPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/pricing" element={<PricingPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import FooterMinimal from '@/components/sections/footer/FooterMinimal';
-import NavbarDropdown from '@/components/ui/NavbarDropdown';
+import NavbarFloating from '@/components/ui/NavbarFloating';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
 import { Facebook, Instagram, Twitter } from "lucide-react";
@@ -35,14 +35,16 @@ export default function Layout() {
   {
     "name": "Metrics",
     "href": "#metrics"
-  }
+  },
+  { name: "Pricing", href: "/pricing" },
+
 ];
 
   return (
     <StyleProvider buttonVariant="magnetic" siteBackground="noiseGradient" heroBackground="radialGradient">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
-        <NavbarDropdown
+        <NavbarFloating
       logo="GreenScape Pros"
       ctaButton={{
         text: "Get a Quote",

src/components/ui/Button.tsx

@@ -30,7 +30,7 @@ const DefaultButton = ({ text, variant = "primary", href = "#", onClick, animate
     <a
       href={href}
       onClick={handleClick}
-      className={cls("flex items-center justify-center h-9 px-6 text-sm rounded cursor-pointer", variant === "primary" ? "primary-button text-primary-cta-text" : "secondary-button text-secondary-cta-text", className)}
+      className={cls("flex items-center justify-center h-9 px-6 text-sm rounded cursor-pointer", variant === "primary" ? "primary-button text-primary-cta-text" : "bg-background/60 backdrop-blur-md border border-border text-secondary-cta-text", className)}
     >
       {text}
     </a>

src/pages/PricingPage.tsx

@@ -0,0 +1,40 @@
+import { Check } from "lucide-react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { Check, X } from "lucide-react";
+
+export default function PricingPage() {
+  return (
+    <>
+      <div data-webild-section="PricingSimpleCards"><section aria-label="Pricing section" className="py-20"><div className="flex flex-col gap-8"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Our Pricing</p></div><TextAnimation text="Invest in Your Outdoor Sanctuary" variant="fade-blur" gradientText={true} tag="h2" className="text-6xl font-medium text-center text-balance" /><TextAnimation text="Our pricing reflects the dedication, expertise, and sustainable practices we bring to every project, ensuring your outdoor space thrives and enhances your lifestyle. Choose the plan that best fits your vision." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-6/10 text-lg leading-tight text-center" /><div className="flex flex-wrap justify-center gap-3 mt-3"><Button text="Get a Custom Quote" href="/contact" variant="primary" /><Button text="Explore Our Portfolio" href="/portfolio" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade"><GridOrCarousel><div key="Monthly Care" className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 h-full card rounded"><span className="px-5 py-2 w-fit text-sm card rounded">Monthly Care</span><div className="flex flex-col gap-1"><span className="text-5xl font-medium">$199/mo</span><span className="text-base">Regular maintenance to keep your garden vibrant and healthy year-round with essential care.</span></div><div className="w-full h-px bg-foreground/20" /><div className="flex flex-col gap-3"><div key="Seasonal Pruning & Trimming" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Seasonal Pruning & Trimming</span></div>
+<div key="Basic Lawn & Turf Care" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Basic Lawn & Turf Care</span></div>
+<div key="Irrigation System Checks" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Irrigation System Checks</span></div>
+<div key="Pest & Disease Monitoring" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Pest & Disease Monitoring</span></div>
+<div key="Fertilization & Soil Health" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Fertilization & Soil Health</span></div></div></div>
+<div key="Custom Design" className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 h-full card rounded"><span className="px-5 py-2 w-fit text-sm card rounded">Custom Design</span><div className="flex flex-col gap-1"><span className="text-5xl font-medium">From $2,500</span><span className="text-base">Transformative design and installation for a personalized outdoor oasis tailored to your dreams.</span></div><div className="w-full h-px bg-foreground/20" /><div className="flex flex-col gap-3"><div key="Initial Site Consultation" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Initial Site Consultation</span></div>
+<div key="3D Landscape Design Renderings" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">3D Landscape Design Renderings</span></div>
+<div key="Material & Plant Selection Guidance" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Material & Plant Selection Guidance</span></div>
+<div key="Project Management & Oversight" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Project Management & Oversight</span></div>
+<div key="Sustainable Planting Plan" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Sustainable Planting Plan</span></div>
+<div key="Hardscaping Integration" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Hardscaping Integration</span></div></div></div>
+<div key="Estate Excellence" className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 h-full card rounded"><span className="px-5 py-2 w-fit text-sm card rounded">Estate Excellence</span><div className="flex flex-col gap-1"><span className="text-5xl font-medium">Custom Quote</span><span className="text-base">Comprehensive, bespoke solutions for large estates requiring meticulous care and advanced design.</span></div><div className="w-full h-px bg-foreground/20" /><div className="flex flex-col gap-3"><div key="Master Landscape Planning" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Master Landscape Planning</span></div>
+<div key="Advanced Irrigation Systems" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Advanced Irrigation Systems</span></div>
+<div key="Specialized Plant & Tree Care" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Specialized Plant & Tree Care</span></div>
+<div key="Seasonal Rotations & Updates" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Seasonal Rotations & Updates</span></div>
+<div key="Dedicated Project Manager" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Dedicated Project Manager</span></div>
+<div key="Smart Landscape Technology" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base">Smart Landscape Technology</span></div></div></div></GridOrCarousel></ScrollReveal></div></section></div>
+      <div data-webild-section="FeaturesComparison"><section aria-label="Features comparison section" className="py-20"><div className="flex flex-col gap-8"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Value Comparison</p></div><TextAnimation text="Compare Our Landscape Solutions" variant="slide-up" gradientText={true} tag="h2" className="text-6xl font-medium text-center text-balance" /><TextAnimation text="Our tailored plans offer comprehensive care and design expertise. See how GreenScape delivers exceptional value for your outdoor space, ensuring lasting beauty and functionality." variant="slide-up" gradientText={false} tag="p" className="md:max-w-6/10 text-lg leading-tight text-center" /><div className="flex flex-wrap justify-center gap-3 mt-3"><Button text="Explore Our Plans" href="/pricing#plans" variant="primary" /><Button text="Request a Custom Quote" href="/contact#quote" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade" className="grid grid-cols-1 md:grid-cols-2 w-content-width md:w-6/10 mx-auto gap-5"><div className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded opacity-50"><div key="Limited design revision cycles" className="flex items-center gap-2 text-base"><X className="shrink-0 h-[1em] w-auto" /><span className="text-base truncate">Limited design revision cycles</span></div>
+<div key="Standard material selection" className="flex items-center gap-2 text-base"><X className="shrink-0 h-[1em] w-auto" /><span className="text-base truncate">Standard material selection</span></div>
+<div key="No ongoing maintenance plan" className="flex items-center gap-2 text-base"><X className="shrink-0 h-[1em] w-auto" /><span className="text-base truncate">No ongoing maintenance plan</span></div>
+<div key="Basic plant warranty" className="flex items-center gap-2 text-base"><X className="shrink-0 h-[1em] w-auto" /><span className="text-base truncate">Basic plant warranty</span></div>
+<div key="Limited post-installation support" className="flex items-center gap-2 text-base"><X className="shrink-0 h-[1em] w-auto" /><span className="text-base truncate">Limited post-installation support</span></div></div><div className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded"><div key="Unlimited design revisions" className="flex items-center gap-2 text-base"><Check className="shrink-0 h-[1em] w-auto" /><span className="text-base truncate">Unlimited design revisions</span></div>
+<div key="Premium & sustainable material sourcing" className="flex items-center gap-2 text-base"><Check className="shrink-0 h-[1em] w-auto" /><span className="text-base truncate">Premium & sustainable material sourcing</span></div>
+<div key="Comprehensive ongoing maintenance" className="flex items-center gap-2 text-base"><Check className="shrink-0 h-[1em] w-auto" /><span className="text-base truncate">Comprehensive ongoing maintenance</span></div>
+<div key="Extended plant and workmanship warranty" className="flex items-center gap-2 text-base"><Check className="shrink-0 h-[1em] w-auto" /><span className="text-base truncate">Extended plant and workmanship warranty</span></div>
+<div key="Dedicated project manager" className="flex items-center gap-2 text-base"><Check className="shrink-0 h-[1em] w-auto" /><span className="text-base truncate">Dedicated project manager</span></div>
+<div key="Priority scheduling and support" className="flex items-center gap-2 text-base"><Check className="shrink-0 h-[1em] w-auto" /><span className="text-base truncate">Priority scheduling and support</span></div></div></ScrollReveal></div></section></div>
+    </>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/pricing', label: 'Pricing', pageFile: 'PricingPage' },
 ];