@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/data/marketing-data.tsx

@@ -0,0 +1,2546 @@
+export const marketingFeedback = [];
+export const marketingPages = [
+    {
+        name: "Landing Page",
+        value: "landing-page",
+        path: "/components/catalyst-ui/marketing/pages/landingPage.tsx",
+        files: {
+            "Landing Page": "/components/catalyst-ui/marketing/pages/landingPage.tsx",
+        },
+        premium: true,
+        source: null,
+        category: "Marketing: Pages",
+        tags: ["pages", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: "/components/catalyst-ui/marketing/pages/landingPage.tsx",
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "About",
+        value: "about",
+        path: "/components/catalyst-ui/marketing/pages/aboutPage.tsx",
+        files: {
+            "About": "/components/catalyst-ui/marketing/pages/aboutPage.tsx",
+        },
+        premium: true,
+        source: null,
+        category: "Marketing: Pages",
+        tags: ["pages", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/marketing/pages/aboutPage.tsx",
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Pricing Page",
+        value: "pricing-page",
+        path: "/components/catalyst-ui/marketing/pages/pricing-pages.tsx",
+        files: {
+            "Pricing Page": "/components/catalyst-ui/marketing/pages/pricing-pages.tsx",
+        },
+        premium: true,
+        source: null,
+        category: "Marketing: Pages",
+        tags: ["pages", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/marketing/pages/pricing-pages.tsx",
+        desc: null,
+        customize: null
+    },
+];
+export const marketingSections = [
+    {
+        name: "Animated Testimonials",
+        value: "animated-testimonials",
+        importPath: "~/components/catalyst-ui/marketing/sections/animated-testimonials",
+        multiImport: null,
+        basicusage: null,
+        path: "/components/catalyst-ui/marketing/sections/animated-testimonials.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/marketing/sections/animated-testimonials.tsx",
+        usage: null,
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["testimonials", "carousel", "animation", "images", "text"],
+        features: ["Auto-play", "Image Animations", "Text Reveal", "Responsive"],
+        dependencies: ["framer-motion", "lucide-react", "react"],
+        props: {
+            "AnimatedTestimonials": [
+                { name: "testimonials", type: "Testimonial[]", default: "null" },
+                { name: "autoplay", type: "boolean", default: "false" },
+                { name: "className", type: "string", default: "null" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Headers1",
+        value: "headers-1",
+        path: "/components/catalyst-ui/marketing/sections/headers-1.tsx",
+        importPath: "~/components/catalyst-ui/marketing/sections/headers-1/header",
+        source: `
+// app/components/header.tsx
+
+
+
+
+
+
+type HeaderLink = {
+  name: string;
+  href: string;
+  subLinks?: HeaderLink[];
+};
+
+type HeaderVariant = 
+  | "simple"
+  | "with-search"
+  | "with-cta"
+  | "with-dropdown"
+  | "ecommerce"
+  | "dark";
+
+type HeaderProps = {
+  variant?: HeaderVariant;
+  logo?: React.ReactNode;
+  navigation?: HeaderLink[];
+  cta?: {
+    primary: {
+      text: string;
+      href: string;
+    };
+    secondary?: {
+      text: string;
+      href: string;
+    };
+  };
+  search?: {
+    placeholder?: string;
+    action?: string;
+  };
+  userNavigation?: {
+    name: string;
+    href: string;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+  className?: string;
+};
+
+const defaultNavigation: HeaderLink[] = [
+  { name: "Products", href: "#" },
+  { name: "Features", href: "#" },
+  { name: "Marketplace", href: "#" },
+  { name: "Company", href: "#" },
+];
+
+const defaultUserNavigation = [
+  { name: "Your Profile", href: "#", icon: User },
+  { name: "Sign in", href: "#", icon: LogIn },
+  { name: "Sign out", href: "#", icon: LogOut },
+];
+
+export function Header({
+  variant = "simple",
+  logo = (
+    <div className="flex items-center">
+      <span className="text-xl font-bold">YourLogo</span>
+    </div>
+  ),
+  navigation = defaultNavigation,
+  cta,
+  search,
+  userNavigation = defaultUserNavigation,
+  className = "",
+}: HeaderProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const renderSimpleHeader = () => (
+    <header className="bg-background">
+      <nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
+        <div className="flex lg:flex-1">
+          <Link to="/" className="-m-1.5 p-1.5">
+            {logo}
+          </Link>
+        </div>
+        <div className="flex lg:hidden">
+          <button
+            type="button"
+            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-muted-foreground"
+            onClick={() => setMobileMenuOpen(true)}
+          >
+            <span className="sr-only">Open main menu</span>
+            <Menu className="h-6 w-6" />
+          </button>
+        </div>
+        <div className="hidden lg:flex lg:gap-x-12">
+          {navigation.map((item) => (
+            <NavLink
+              key={item.name}
+              to={item.href}
+              className={({ isActive }) => 
+                cn(
+                  "text-sm font-semibold leading-6 text-muted-foreground",
+                  isActive ? "text-primary" : "hover:text-primary/30"
+                )
+              }
+            >
+              {item.name}
+            </NavLink>
+          ))}
+        </div>
+        <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+          {cta?.primary && (
+            <Button asChild variant="default">
+              <Link to={cta.primary.href}>
+                {cta.primary.text}
+              </Link>
+            </Button>
+          )}
+        </div>
+      </nav>
+
+      {/* Mobile menu */}
+      {mobileMenuOpen && (
+        <div className="lg:hidden">
+          <div className="fixed inset-0 z-50" />
+          <div className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+            <div className="flex items-center justify-between">
+              <Link to="/" className="-m-1.5 p-1.5">
+                {logo}
+              </Link>
+              <button
+                type="button"
+                className="-m-2.5 rounded-md p-2.5 text-muted-foreground"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                <span className="sr-only">Close menu</span>
+                <X className="h-6 w-6" />
+              </button>
+            </div>
+            <div className="mt-6 flow-root">
+              <div className="-my-6 divide-y divide-gray-500/10">
+                <div className="space-y-2 py-6">
+                  {navigation.map((item) => (
+                    <NavLink
+                      key={item.name}
+                      to={item.href}
+                      className={({ isActive }) =>
+                        cn(
+                          "-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-muted-foreground hover:bg-muted",
+                          isActive ? "bg-background text-primary" : ""
+                        )
+                      }
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                      {item.name}
+                    </NavLink>
+                  ))}
+                </div>
+                <div className="py-6">
+                  {cta?.primary && (
+                    <Button asChild variant="default" className="w-full">
+                      <Link to={cta.primary.href}>
+                        {cta.primary.text}
+                      </Link>
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+
+  const renderWithSearch = () => (
+    <header className="bg-background">
+      <nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
+        <div className="flex lg:flex-1">
+          <Link to="/" className="-m-1.5 p-1.5">
+            {logo}
+          </Link>
+        </div>
+        <div className="hidden lg:flex lg:gap-x-12">
+          {navigation.map((item) => (
+            <NavLink
+              key={item.name}
+              to={item.href}
+              className={({ isActive }) =>
+                cn(
+                  "text-sm font-semibold leading-6 text-muted-foreground",
+                  isActive ? "text-primary" : "hover:text-primary/30"
+                )
+              }
+            >
+              {item.name}
+            </NavLink>
+          ))}
+        </div>
+        <div className="flex flex-1 items-center justify-end gap-x-6">
+          <div className="relative flex-1 max-w-md">
+            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+              <Search className="h-5 w-5 text-foreground" />
+            </div>
+            <input
+              type="text"
+              className="block w-full rounded-md border-0 py-1.5 pl-10 pr-3 text-muted-foreground ring-1 ring-inset ring-gray-300 placeholder:text-foreground focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
+              placeholder={search?.placeholder || "Search..."}
+            />
+          </div>
+          {cta?.primary && (
+            <Button asChild variant="default">
+              <Link to={cta.primary.href}>
+                {cta.primary.text}
+              </Link>
+            </Button>
+          )}
+        </div>
+      </nav>
+    </header>
+  );
+
+  const renderWithCTA = () => (
+    <header className="bg-background">
+      <div className="bg-primary px-4 py-2 text-center text-sm font-medium text-foreground">
+        <p>
+          Get free delivery on orders over $100{' '}
+          <Link to="#" className="inline-flex items-center font-semibold underline">
+            Shop now <ArrowRight className="ml-1 h-4 w-4" />
+          </Link>
+        </p>
+      </div>
+      {renderSimpleHeader()}
+    </header>
+  );
+
+  const renderWithDropdown = () => (
+    <header className="bg-background">
+      <nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
+        <div className="flex lg:flex-1">
+          <Link to="/" className="-m-1.5 p-1.5">
+            {logo}
+          </Link>
+        </div>
+        <div className="hidden lg:flex lg:gap-x-12">
+          {navigation.map((item) => (
+            <div key={item.name} className="relative">
+              {item.subLinks ? (
+                <div className="group inline-block">
+                  <button
+                    type="button"
+                    className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-muted-foreground hover:text-primary/30"
+                  >
+                    {item.name}
+                    <ChevronDown className="h-4 w-4" />
+                  </button>
+                  <div className="absolute left-1/2 z-10 mt-2 w-48 -translate-x-1/2 rounded-md bg-background py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none opacity-0 group-hover:opacity-100 transition-opacity">
+                    {item.subLinks.map((subItem) => (
+                      <Link
+                        key={subItem.name}
+                        to={subItem.href}
+                        className="block px-4 py-2 text-sm text-muted-foreground hover:bg-background"
+                      >
+                        {subItem.name}
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <NavLink
+                  to={item.href}
+                  className={({ isActive }) =>
+                    cn(
+                      "text-sm font-semibold leading-6 text-muted-foreground",
+                      isActive ? "text-primary" : "hover:text-primary/30"
+                    )
+                  }
+                >
+                  {item.name}
+                </NavLink>
+              )}
+            </div>
+          ))}
+        </div>
+        <div className="flex flex-1 items-center justify-end gap-x-6">
+          {userNavigation.map((item) => (
+            <Link
+              key={item.name}
+              to={item.href}
+              className="text-sm font-semibold leading-6 text-muted-foreground hover:text-primary/30"
+            >
+              {item.icon ? (
+                <item.icon className="h-5 w-5" />
+              ) : (
+                item.name
+              )}
+            </Link>
+          ))}
+          {cta?.primary && (
+            <Button asChild variant="default">
+              <Link to={cta.primary.href}>
+                {cta.primary.text}
+              </Link>
+            </Button>
+          )}
+        </div>
+      </nav>
+    </header>
+  );
+
+  const renderEcommerce = () => (
+    <header className="bg-background">
+      <div className="border-b border-border">
+        <div className="mx-auto flex h-10 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+          <div className="hidden lg:flex lg:flex-1 lg:items-center">
+            <Phone className="h-5 w-5 text-foreground" />
+            <span className="ml-2 text-sm font-medium text-foreground">
+              Call us at +1 (555) 123-4567
+            </span>
+          </div>
+          <div className="flex flex-1 items-center justify-end space-x-6">
+            {userNavigation.map((item) => (
+              <Link
+                key={item.name}
+                to={item.href}
+                className="text-sm font-medium text-muted-foreground hover:text-foreground"
+              >
+                {item.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
+        <div className="flex lg:flex-1">
+          <Link to="/" className="-m-1.5 p-1.5">
+            {logo}
+          </Link>
+        </div>
+        <div className="hidden lg:flex lg:gap-x-12">
+          {navigation.map((item) => (
+            <NavLink
+              key={item.name}
+              to={item.href}
+              className={({ isActive }) =>
+                cn(
+                  "text-sm font-semibold leading-6 text-muted-foreground",
+                  isActive ? "text-primary" : "hover:text-primary/30"
+                )
+              }
+            >
+              {item.name}
+            </NavLink>
+          ))}
+        </div>
+        <div className="flex flex-1 items-center justify-end gap-x-6">
+          <Link to="#" className="text-foreground hover:text-foreground">
+            <span className="sr-only">Search</span>
+            <Search className="h-6 w-6" />
+          </Link>
+          <Link to="#" className="text-foreground hover:text-foreground">
+            <span className="sr-only">Cart</span>
+            <ShoppingCart className="h-6 w-6" />
+            <span className="absolute -mt-2 ml-2 inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs font-medium text-foreground">
+              3
+            </span>
+          </Link>
+        </div>
+      </nav>
+    </header>
+  );
+
+  const renderDark = () => (
+    <header className="bg-gray-900">
+      <nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
+        <div className="flex lg:flex-1">
+          <Link to="/" className="-m-1.5 p-1.5">
+            {React.isValidElement(logo) 
+              ? React.cloneElement(logo, { 
+                  className: cn(logo.props.className, "text-foreground") 
+                })
+              : logo}
+          </Link>
+        </div>
+        <div className="hidden lg:flex lg:gap-x-12">
+          {navigation.map((item) => (
+            <NavLink
+              key={item.name}
+              to={item.href}
+              className={({ isActive }) =>
+                cn(
+                  "text-sm font-semibold leading-6 text-foreground",
+                  isActive ? "text-indigo-400" : "hover:text-indigo-300"
+                )
+              }
+            >
+              {item.name}
+            </NavLink>
+          ))}
+        </div>
+        <div className="flex flex-1 items-center justify-end gap-x-6">
+          {userNavigation.map((item) => (
+            <Link
+              key={item.name}
+              to={item.href}
+              className="text-sm font-semibold leading-6 text-foreground hover:text-indigo-300"
+            >
+              {item.icon ? (
+                <item.icon className="h-5 w-5" />
+              ) : (
+                item.name
+              )}
+            </Link>
+          ))}
+          {cta?.primary && (
+            <Button asChild variant="secondary">
+              <Link to={cta.primary.href}>
+                {cta.primary.text}
+              </Link>
+            </Button>
+          )}
+        </div>
+      </nav>
+    </header>
+  );
+
+  const renderVariant = () => {
+    switch (variant) {
+      case "simple":
+        return renderSimpleHeader();
+      case "with-search":
+        return renderWithSearch();
+      case "with-cta":
+        return renderWithCTA();
+      case "with-dropdown":
+        return renderWithDropdown();
+      case "ecommerce":
+        return renderEcommerce();
+      case "dark":
+        return renderDark();
+      default:
+        return renderSimpleHeader();
+    }
+  };
+
+  return <div className={cn(className)}>{renderVariant()}</div>;
+}`,
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["ui", "sections", "core"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/marketing/sections/header.tsx",
+        basicusage: `
+<Header />
+
+<Header variant="simple" logo="(
+    <div className="flex items-center">
+      <span className="text-xl font-bold">YourLogo</span>
+    </div>
+  )" navigation="defaultNavigation" cta="" search="" userNavigation="defaultUserNavigation" className="" />`,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "testimonial carousel",
+        value: "testimonial-carousel",
+        path: "/components/catalyst-ui/marketing/sections/testimonial-carousel.tsx",
+        files: {
+            "testimonial carousel": "/components/catalyst-ui/marketing/sections/testimonial-carousel.tsx",
+        },
+        premium: true,
+        source: null,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+  const testimonials = [
+    {
+      id: 1,
+      name: "Sarah Johnson",
+      role: "CEO",
+      company: "AutoElite Dealership",
+      content: "This platform has completely transformed how we manage our inventory and customer relationships. Our sales have increased by 35% since implementation.",
+      rating: 5
+    },
+    {
+      id: 2,
+      name: "Michael Chen",
+      role: "Sales Director",
+      company: "City Motors",
+      content: "The AI predictions are scarily accurate. We've been able to optimize our stock based on predictive analytics, reducing overhead by 22%.",
+      rating: 5
+    },
+    {
+      id: 3,
+      name: "Jessica Williams",
+      role: "Operations Manager",
+      company: "Premium Autos",
+      content: "The customer CRM is intuitive and powerful. Our team adoption was seamless, and we've seen a significant improvement in customer satisfaction scores.",
+      rating: 4
+    },
+    {
+      id: 4,
+      name: "David Rodriguez",
+      role: "Service Director",
+      company: "Performance Automotive",
+      content: "Scheduling and managing our service department has never been easier. The automated reminders have reduced no-shows by 65%.",
+      rating: 5
+    },
+    {
+      id: 5,
+      name: "Emily Thompson",
+      role: "Marketing Head",
+      company: "Family Auto Group",
+      content: "The marketing automation tools have saved us countless hours. Our campaign ROI has improved dramatically with the targeted approach.",
+      rating: 4
+    },
+    {
+      id: 6,
+      name: "James Wilson",
+      role: "CFO",
+      company: "Metro Automotive",
+      content: "The analytics dashboard provides insights we never had before. We're making data-driven decisions that directly impact our bottom line.",
+      rating: 5
+    }
+  ];
+  
+<TestimonialCarousel
+    testimonials={testimonials}  
+    autoRotate={false}
+    snap={false}
+    autoRotateInterval={10000}
+    title=''
+    subTitle=''
+ />
+  `,
+        usagePath: null,
+        props: [
+            { name: "testimonials", type: "array", default: 'null' },
+            { name: "autoRotate", type: "boolean", default: "true" },
+            { name: "autoRotateInterval", type: "int", default: '10000' },
+            { name: "snap", type: "boolean", default: 'false' },
+            { name: "title", type: "string", default: 'What Our Customers Say' },
+            { name: "subTitle", type: "string", default: 'Hear from businesses that have transformed their operations with our platform.' },
+        ],
+        imports: `
+
+
+
+`,
+        desc: null,
+        customize: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "pricing carousel",
+        value: "pricing-carousel",
+        path: "/components/catalyst-ui/marketing/sections/pricing-carousel.tsx",
+        files: {
+            "pricing carousel": "/components/catalyst-ui/marketing/sections/pricing-carousel.tsx",
+        },
+        premium: true,
+        source: null,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+  const pricingPlans = [
+    {
+      title: "Starter Plan",
+      price: 400,
+       period: "month",
+      description: "Full access to all features (sales, service, parts, analytics, reporting, etc.). Ideal for small dealerships with fewer users or in smaller markets.",
+      features: [
+        "$950/month w/ Full Integrated Website", 
+         "Usage:",
+        "Emails: 1500",
+         "SMS: 4400",
+         "Voice: 1500",
+         "Sales People: 4",
+         "Note: There is no limit on user licenses, the example above is given to show how many sales people would be a good fit for that category.",
+        ],
+      onButtonClick: () => {
+        <NavLink prefetch="intent" to={URLS.STRIPE_STARTER } >Get Started Today</NavLink>
+      },
+    },
+    {
+      title: "Growth Plan",
+      price: 850,
+      period: "month",
+      description: "Full access to all features (sales, service, parts, analytics, reporting, etc.). For growing dealerships with a larger customer base and higher communication needs.",
+      features: [
+       "$1650/month w/ Full Integrated Website", 
+     "Usage:",
+     "Emails: 5000",
+         "SMS: 12000",
+         "Voice: 2500",
+         "Sales People: 8",
+         "Note: There is no limit on user licenses, the example above is given to show how many sales people would be a good fit for that category.",
+      ],
+      isPopular: true,
+      buttonText: "Start Pro Trial",
+           onButtonClick: () => {
+        <NavLink prefetch="intent" to={URLS.STRIPE_GROWTH} >Get Started Today</NavLink>
+      },
+    },
+    {
+      title: "Pro Plan",
+      price: 1750,
+      period: "month",
+      description: "Full access to all features (sales, service, parts, analytics, reporting, etc.). For growing dealerships with a larger customer base and higher communication needs.",
+      features: [
+         "$3500/month w/ Full Integrated Website", 
+     "Usage:",
+     "Emails: 15000",
+         "SMS: 21000",
+         "Voice: 5000",
+         "Sales People: 14",
+         "Note: There is no limit on user licenses, the example above is given to show how many sales people would be a good fit for that category.",
+      ],
+      excludedFeatures: ["Self-service setup"],
+      buttonText: "Contact Sales",
+      buttonVariant: "outline" as const,
+          onButtonClick: () => {
+        <NavLink prefetch="intent" to={URLS.STRIPE_PRO} >Get Started Today</NavLink>
+      },
+    },
+    {
+      title: "Enterprise",
+       price: 3200,
+      period: "month",
+      description: "Full access to all features (sales, service, parts, analytics, reporting, etc.). Suitable for mid-to-large dealerships with extensive service departments and marketing needs.",
+      features: [
+          "$5800/month w/ Full Integrated Website", 
+     "Usage:",
+     "Emails: 18000",
+         "SMS: 35000",
+         "Voice: 8000",
+         "Sales People: 20",
+         "Note: There is no limit on user licenses, the example above is given to show how many sales people would be a good fit for that category.",
+      ],
+      buttonText: "Get Started Free",
+          onButtonClick: () => {
+        <NavLink prefetch="intent" to={URLS.STRIPE_ENT} >Get Started Today</NavLink>
+      },
+    },
+  ];
+
+<PricingCarousel 
+    cards={pricingPlans} 
+    autoRotate={false}
+    snap={false}
+    autoRotateInterval={10000}
+    title=''
+    subTitle=''
+/>
+
+// Maybe you want to use the card on its own
+
+<PricingCardCarousel
+    title="One Plan, One Price, No Paywalls"
+    price={400}
+    period="/month"
+    description="Full access to all features (sales, analytics, reporting, etc.). Ideal for any sized firm. Early Access - Coming Soon. Be the first to experience revolutionary legal practice management."
+    features={[
+        "Instant lawyer switching",
+        "Real-time document access",
+        "Complete case transparency",
+        "Advanced client portal",
+        "Multi-practice support"
+    ]}
+    buttonText="Join Waitlist"
+    onButtonClick={() => nav(0)}
+/>
+
+`,
+        usagePath: null,
+        props: [
+            { name: "cards ie pricing information", type: "array", default: 'null' },
+            { name: "autoRotate", type: "boolean", default: "true" },
+            { name: "autoRotateInterval", type: "int", default: '10000' },
+            { name: "snap", type: "boolean", default: 'false' },
+            { name: "title", type: "string", default: 'Simple, Transparent Pricing' },
+            { name: "subTitle", type: "string", default: 'No Hidden Fees: No unforeseen third party charges or service management upfront costs (unlike other CRMs).' },
+        ],
+        imports: `
+
+
+
+`,
+        desc: null,
+        customize: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "feature carousel",
+        value: "feature-carousel",
+        path: "/components/catalyst-ui/marketing/sections/feature-carousel.tsx",
+        files: {
+            "feature carousel": "/components/catalyst-ui/marketing/sections/feature-carousel.tsx",
+        },
+        premium: true,
+        source: null,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+const listFeatures = [
+  { name: "Import CSV Wizard", description: "No need to rely on your providor in order to handle your data. No matter how your database columns were previously set up, this wizard you can adjust which columns are assigned. Even if the names completely do not match, your still able to 
+
+
+`,
+        customize: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "pricing carousel V2",
+        value: "pricing-carousel-2",
+        path: "/components/catalyst-ui/marketing/sections/pricing-carousel-2.tsx",
+        files: {
+            "pricing carousel V2": "/components/catalyst-ui/marketing/sections/pricing-carousel-2.tsx",
+        },
+        premium: true,
+        source: null,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+  const pricingPlans = [
+    {
+      title: "Starter Plan",
+      price: 400,
+       period: "month",
+      description: "Full access to all features (sales, service, parts, analytics, reporting, etc.). Ideal for small dealerships with fewer users or in smaller markets.",
+      features: [
+        "$950/month w/ Full Integrated Website", 
+         "Usage:",
+        "Emails: 1500",
+         "SMS: 4400",
+         "Voice: 1500",
+         "Sales People: 4",
+         "Note: There is no limit on user licenses, the example above is given to show how many sales people would be a good fit for that category.",
+        ],
+      onButtonClick: () => {
+        <NavLink prefetch="intent" to={URLS.STRIPE_STARTER } >Get Started Today</NavLink>
+      },
+    },
+    {
+      title: "Growth Plan",
+      price: 850,
+      period: "month",
+      description: "Full access to all features (sales, service, parts, analytics, reporting, etc.). For growing dealerships with a larger customer base and higher communication needs.",
+      features: [
+       "$1650/month w/ Full Integrated Website", 
+     "Usage:",
+     "Emails: 5000",
+         "SMS: 12000",
+         "Voice: 2500",
+         "Sales People: 8",
+         "Note: There is no limit on user licenses, the example above is given to show how many sales people would be a good fit for that category.",
+      ],
+      isPopular: true,
+      buttonText: "Start Pro Trial",
+           onButtonClick: () => {
+        <NavLink prefetch="intent" to={URLS.STRIPE_GROWTH} >Get Started Today</NavLink>
+      },
+    },
+    {
+      title: "Pro Plan",
+      price: 1750,
+      period: "month",
+      description: "Full access to all features (sales, service, parts, analytics, reporting, etc.). For growing dealerships with a larger customer base and higher communication needs.",
+      features: [
+         "$3500/month w/ Full Integrated Website", 
+     "Usage:",
+     "Emails: 15000",
+         "SMS: 21000",
+         "Voice: 5000",
+         "Sales People: 14",
+         "Note: There is no limit on user licenses, the example above is given to show how many sales people would be a good fit for that category.",
+      ],
+      excludedFeatures: ["Self-service setup"],
+      buttonText: "Contact Sales",
+      buttonVariant: "outline" as const,
+          onButtonClick: () => {
+        <NavLink prefetch="intent" to={URLS.STRIPE_PRO} >Get Started Today</NavLink>
+      },
+    },
+    {
+      title: "Enterprise",
+       price: 3200,
+      period: "month",
+      description: "Full access to all features (sales, service, parts, analytics, reporting, etc.). Suitable for mid-to-large dealerships with extensive service departments and marketing needs.",
+      features: [
+          "$5800/month w/ Full Integrated Website", 
+     "Usage:",
+     "Emails: 18000",
+         "SMS: 35000",
+         "Voice: 8000",
+         "Sales People: 20",
+         "Note: There is no limit on user licenses, the example above is given to show how many sales people would be a good fit for that category.",
+      ],
+      buttonText: "Get Started Free",
+          onButtonClick: () => {
+        <NavLink prefetch="intent" to={URLS.STRIPE_ENT} >Get Started Today</NavLink>
+      },
+    },
+  ];
+
+<PricingCarousel cards={pricingPlans} autoRotate={true} />`,
+        usagePath: null,
+        props: [
+            { name: "pricingPlans", type: "array", default: 'null' },
+        ],
+        props2: [
+            { name: "title", type: "string", default: 'null' },
+            { name: "price", type: "int", default: 'null' },
+            { name: "period", type: "string", default: 'null' },
+            { name: "description", type: "string", default: 'null' },
+            { name: "features", type: "string", default: 'null' },
+            { name: "buttonText", type: "string", default: 'Get Started' },
+            { name: "isPopular", type: "boolean", default: 'false' },
+            { name: "popularBadgeText", type: "string", default: 'Most Popular' },
+            { name: "excludedFeatures", type: "array", default: 'null' },
+        ],
+        imports: `
+
+`,
+        customize: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "feature showcase",
+        value: "feature-showcase",
+        path: "/components/catalyst-ui/marketing/sections/feature-showcase.tsx",
+        files: {
+            "feature showcase": "/components/catalyst-ui/marketing/sections/feature-showcase.tsx",
+        },
+        premium: true,
+        source: null,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+export function FeatureShowcaseDemo() {
+  const dealerFeatures = [
+    { 
+      name: "Sales Dashboard", 
+      description: "Our time-optimized interface saves dealerships thousands of operational minutes annually through streamlined workflows.",
+      category: "Sales"
+    },
+    { 
+      name: "Sales Tracker", 
+      description: "Comprehensive sales performance monitoring with customizable KPIs. Track conversions, follow-ups, and revenue streams with precision to maximize your closing ratios.",
+      category: "Sales"
+    },
+    { 
+      name: "Inventory Management", 
+      description: "Complete control over your vehicle inventory with real-time updates and automated alerts for low stock.",
+      category: "Inventory"
+    },
+    { 
+      name: "Customer CRM", 
+      description: "Manage all customer interactions in one place with detailed history and communication tracking.",
+      category: "CRM"
+    },
+  ];
+
+  return <FeatureShowcase features={dealerFeatures} />;
+}`,
+        usagePath: null,
+        props: [
+            { name: "features", type: "array", default: 'null' },
+            { name: "autoRotate", type: "boolean", default: "false" },
+            { name: "autoRotateInterval", type: "int", default: '5000' },
+            { name: "visibleCount", type: "int", default: '3' },
+        ],
+        imports: `
+
+
+
+
+`,
+        customize: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Pricing Card - Single",
+        value: "pricing-single-card",
+        path: "/components/catalyst-ui/marketing/sections/pricing-single-card.tsx",
+        files: {
+            "Pricing Card - Single": "/components/catalyst-ui/marketing/sections/pricing-single-card.tsx",
+        },
+        premium: true,
+        source: null,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+export function PricingCardSingleDemo() {
+  const handleBasicPlanClick = () => {
+    console.log("Basic plan selected");
+  };
+
+  const handleProPlanClick = () => {
+    console.log("Pro plan selected");
+  };
+
+  return (
+    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 p-8">
+      <PricingCardSingle
+        title="Basic Plan"
+        price={29}
+        description="Perfect for individuals just getting started."
+        features={["Feature One", "Feature Two", "Feature Three"]}
+        onButtonClick={handleBasicPlanClick}
+      />
+      
+      <PricingCardSingle
+        title="Pro Plan"
+        price={79}
+        description="Best for growing teams and businesses."
+        features={[
+          "Everything in Basic",
+          "Advanced Analytics",
+          "Priority Support",
+          "Team Collaboration",
+          "API Access"
+        ]}
+        isPopular={true}
+        buttonText="Start Pro Trial"
+        onButtonClick={handleProPlanClick}
+      />
+      
+      <PricingCardSingle
+        title="Enterprise"
+        price="Custom"
+        period=""
+        description="Tailored solutions for large organizations."
+        features={[
+          "Everything in Pro",
+          "Custom Integrations",
+          "Dedicated Support",
+          "SLA Guarantee",
+          "On-premise Options"
+        ]}
+        excludedFeatures={["Self-service setup"]}
+        buttonText="Contact Sales"
+        buttonVariant="outline"
+      />
+    </div>
+  );
+}`,
+        usagePath: null,
+        props: [
+            { name: "title", type: "string", default: 'null' },
+            { name: "price", type: "int | string", default: 'null' },
+            { name: "period", type: "string", default: '/mo' },
+            { name: "description", type: "string", default: 'null' },
+            { name: "features", type: "string", default: 'null' },
+            { name: "buttonText", type: "string", default: 'Get Started' },
+            { name: "buttonVariant", type: "string", default: 'primary' },
+            { name: "onButtonClick", type: "function", default: 'null' },
+            { name: "isPopular", type: "boolean", default: 'false' },
+            { name: "className", type: "string", default: 'null' },
+            { name: "excludedFeatures", type: "array", default: 'null' },
+        ],
+        imports: `
+
+
+`,
+        customize: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Bento Grid",
+        value: "bento-grid",
+        path: "/components/catalyst-ui/marketing/sections/bentoGrid.tsx",
+        files: {
+            "Bento Grid": "/components/catalyst-ui/marketing/sections/bentoGrid.tsx",
+        },
+        premium: true,
+        source: null,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+
+
+export default function BentoGridsDemo   ()   {
+  const sampleItems = [
+    {
+      title: 'Advanced Analytics',
+      description: 'Get deep insights into your data with powerful analytics tools and real-time reporting.',
+      icon: 'BarChart3',
+      size: 'large',
+      gradient: {
+        direction: 'br',
+        from: 'from-blue-500',
+        to: 'to-purple-600'
+      },
+      stats: [
+        { value: '99.9%', label: 'Accuracy' },
+        { value: '10ms', label: 'Response' }
+      ],
+      cta: {
+        text: 'View Dashboard',
+        url: '#',
+        icon: 'arrow'
+      }
+    },
+    {
+      title: 'Team Collaboration',
+      description: 'Work together seamlessly with integrated chat, file sharing, and project management.',
+      icon: 'Users',
+      size: 'medium',
+      badge: 'Popular',
+      cta: {
+        text: 'Start Collaborating',
+        url: '#',
+        icon: 'chevron'
+      }
+    },
+    {
+      title: 'Security First',
+      description: 'Enterprise-grade security with end-to-end encryption and compliance certifications.',
+      icon: 'Shield',
+      size: 'small'
+    },
+    {
+      title: 'Lightning Fast',
+      description: 'Optimized performance ensures your applications run at peak efficiency.',
+      icon: 'Zap',
+      size: 'tall',
+      stats: [
+        { value: '<1s', label: 'Load Time' }
+      ]
+    },
+    {
+      title: 'Global Infrastructure',
+      description: 'Deploy worldwide with our distributed network of data centers and edge locations.',
+      icon: 'Globe',
+      size: 'wide',
+      gradient: {
+        direction: 'r',
+        from: 'from-green-500',
+        to: 'to-blue-600'
+      },
+      cta: {
+        text: 'Explore Locations',
+        url: '#',
+        icon: 'arrow'
+      }
+    },
+    {
+      title: 'Mobile Ready',
+      description: 'Responsive design that works perfectly on all devices and screen sizes.',
+      icon: 'Smartphone',
+      size: 'small'
+    },
+    {
+      title: 'Smart Scheduling',
+      description: 'AI-powered scheduling that adapts to your team preferences and availability.',
+      icon: 'Calendar',
+      size: 'medium',
+      badge: 'New'
+    },
+    {
+      title: 'Real-time Communication',
+      description: 'Instant messaging and video calls integrated directly into your workflow.',
+      icon: 'MessageCircle',
+      size: 'small',
+      cta: {
+        text: 'Start Chatting',
+        url: '#',
+        icon: 'play'
+      }
+    }
+  ];
+
+  const simpleItems = sampleItems.slice(0, 6);
+  const masonryItems = [
+    {
+      title: 'Quick Setup',
+      description: 'Get started in minutes with our simple onboarding process.',
+      icon: 'Zap'
+    },
+    {
+      title: 'Secure by Default',
+      description: 'Built with security as a foundation, not an afterthought. All data is encrypted and protected.',
+      icon: 'Shield'
+    },
+    {
+      title: 'Team Features',
+      description: 'Collaborate effectively with your team members.',
+      icon: 'Users'
+    },
+    {
+      title: 'Analytics Dashboard',
+      description: 'Comprehensive analytics to track your progress and measure success. Get insights that matter and make data-driven decisions with confidence.',
+      icon: 'BarChart3',
+      stats: [
+        { value: '1M+', label: 'Data Points' }
+      ]
+    },
+    {
+      title: 'Global Network',
+      description: 'Worldwide coverage with low latency.',
+      icon: 'Globe'
+    },
+    {
+      title: 'Mobile Support',
+      description: 'Works seamlessly on all your devices, from desktop to mobile. Responsive design ensures a great experience everywhere.',
+      icon: 'Smartphone'
+    }
+  ];
+
+  return (
+    <div className="space-y-0">
+      {/* Classic Bento Grid */}
+      <BentoGrids
+        variant="classic"
+        title="Features"
+        subtitle="Everything you need to succeed"
+        description="Comprehensive tools and features designed to help you build, deploy, and scale your applications with confidence."
+        items={sampleItems}
+        showAnimation={true}
+      />
+
+      {/* Minimal Cards */}
+      <BentoGrids
+        variant="minimal"
+        title="Why Choose Us"
+        subtitle="Built for modern teams"
+        description="Simple, powerful, and reliable tools that help you focus on what matters most."
+        items={simpleItems}
+        darkMode={false}
+        compactSpacing={true}
+      />
+
+      {/* Card Style */}
+      <BentoGrids
+        variant="cards"
+        title="Core Capabilities"
+        subtitle="Powerful features at your fingertips"
+        description="Experience the full potential of our platform with these essential capabilities."
+        items={simpleItems}
+        showAnimation={true}
+      />
+
+      {/* Masonry Layout */}
+      <BentoGrids
+        variant="masonry"
+        title="Features"
+        subtitle="Discover what makes us different"
+        description="Flexible, adaptive features that grow with your needs."
+        items={masonryItems}
+        darkMode={false}
+      />
+
+      {/* Dark Mode Example */}
+      <BentoGrids
+        variant="cards"
+        title="Dark Theme"
+        subtitle="Beautiful in any mode"
+        description="Our components look stunning in both light and dark themes."
+        items={simpleItems.slice(0, 3)}
+        darkMode={true}
+        showAnimation={true}
+      />
+    </div>
+  );
+};
+
+`,
+        usagePath: null,
+        props: [
+            { name: "variant", type: "string", default: "'classic'" },
+            { name: "title", type: "string", default: "null" },
+            { name: "subtitle", type: "string", default: "null" },
+            { name: "description", type: "string", default: "null" },
+            { name: "items", type: "array", default: "[]" },
+            { name: "className", type: "string", default: "''" },
+            { name: "darkMode", type: "boolean", default: "false" },
+            { name: "showAnimation", type: "boolean", default: "true" },
+            { name: "compactSpacing", type: "boolean", default: "false" },
+            { name: "price", type: "int | string", default: "null" },
+            { name: "period", type: "string", default: "'/mo'" },
+            { name: "features", type: "string", default: "null" },
+            { name: "buttonText", type: "string", default: "'Get Started'" },
+            { name: "buttonVariant", type: "string", default: "'primary'" },
+            { name: "onButtonClick", type: "function", default: "null" },
+            { name: "isPopular", type: "boolean", default: "false" },
+            { name: "excludedFeatures", type: "array", default: "null" }
+        ],
+        imports: `
+
+`,
+        customize: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Blog",
+        value: "blog",
+        path: "/components/catalyst-ui/marketing/sections/blog.tsx",
+        source: null,
+        files: {
+            "Blog": "/components/catalyst-ui/marketing/sections/blog.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+export default function BlogPageDemo() {
+  const posts = [
+    {
+      id: "1",
+      title: "Boost your conversion rate",
+      href: "#",
+      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.",
+      date: "Mar 16, 2023",
+      datetime: "2023-03-16",
+      readingTime: "5 min read",
+      author: {
+        name: "Michael Foster",
+        image: "/images/author1.jpg",
+      },
+      category: {
+        title: "Marketing",
+        href: "#",
+      },
+      image: "/images/blog1.jpg",
+      comments: 3,
+    },
+    {
+      id: "2",
+      title: "How to use search engine optimization",
+      href: "#",
+      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat doloribus, eveniet dolore.",
+      date: "Mar 10, 2023",
+      datetime: "2023-03-10",
+      readingTime: "4 min read",
+      author: {
+        name: "Lindsay Walton",
+        image: "/images/author2.jpg",
+      },
+      category: {
+        title: "SEO",
+        href: "#",
+      },
+      image: "/images/blog2.jpg",
+      comments: 5,
+    },
+  ];
+
+  return (
+    <div className=' flex flex-col gap-5'>
+    <Blog 
+      posts={posts}
+      style="featured-card"
+      title="From the blog"
+      description="Learn how to grow your business with our expert advice."
+      viewAllText="View all posts"
+      viewAllUrl="/blog"
+    />
+    <BlogSection posts={posts} style="simple-grid" />
+    <BlogSection posts={posts} style="offset-grid" />
+    <BlogSection posts={posts} style="stacked-list" /> 
+     </div>
+  );
+}
+/** Simple grid
+
+// Offset grid
+
+// Stacked list
+*/`,
+        usagePath: null,
+        props: [
+            { name: "id", type: "string", default: "null" },
+            { name: "title", type: "string", default: "null" },
+            { name: "href", type: "string", default: "null" },
+            { name: "description", type: "string", default: "null" },
+            { name: "date", type: "string", default: "null" },
+            { name: "datetime", type: "string", default: "null" },
+            { name: "readingTime", type: "string", default: "null" },
+            { name: "author", type: "object", default: "null" },
+            { name: "category", type: "object", default: "null" },
+            { name: "image", type: "string", default: "null" },
+            { name: "comments", type: "number", default: "null" },
+        ],
+        props2: [
+            { name: "posts", type: "array", default: "[]" },
+            { name: "style", type: "simple-grid | featured-card | offset-grid | side-by-side | stacked-list | with-categories | minimal-grid", default: "simple-grid" },
+            { name: "title", type: "string", default: "null" },
+            { name: "description", type: "string", default: "null" },
+            { name: "viewAllText", type: "string", default: "null" },
+            { name: "viewAllUrl", type: "string", default: "null" },
+            { name: "className", type: "string", default: "null" },
+        ],
+        imports: `
+
+
+`,
+        customize: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Blog Editor",
+        value: "blog-editor",
+        path: "/components/catalyst-ui/marketing/sections/blogEditor.tsx",
+        source: null,
+        files: {
+            "Blog Editor": "/components/catalyst-ui/marketing/sections/blogEditor.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: null,
+        usagePath: "/components/catalyst-ui/marketing/sections/blogEditor.tsx",
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Blog Post",
+        value: "blog-post",
+        path: "/components/catalyst-ui/marketing/sections/blogPost.tsx",
+        source: null,
+        files: {
+            "Blog Post": "/components/catalyst-ui/marketing/sections/blogPost.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: "/components/catalyst-ui/marketing/demo/blogPost.tsx",
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "CTA",
+        value: "cta",
+        path: "/components/catalyst-ui/marketing/sections/cta.tsx",
+        source: null,
+        files: {
+            "CTA": "/components/catalyst-ui/marketing/sections/cta.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+export function CTADemo () {
+    return (
+        <div className='flex flex-col gap-5' >
+
+<Cta variant="simple" />
+
+<Cta 
+  variant="with-image"
+  title="Ready to dive in?"
+  description="Start your free trial today."
+/>
+
+<Cta
+  variant="split"
+  title="All-in-one platform"
+  description="Everything you need to build, launch, and grow your business."
+  features={[
+    { icon: Check, text: "No setup, or hidden fees" },
+    { icon: Check, text: "Team accounts" },
+    { icon: Check, text: "Premium support" }
+  ]}
+/>
+
+<Cta
+  variant="with-features"
+  subtitle="Deploy faster"
+  title="Everything you need to deploy your app"
+  features={[
+    { icon: Zap, text: "Push to deploy" },
+    { icon: Rocket, text: "SSL certificates" },
+    { icon: Mail, text: "Database backups" }
+  ]}
+/>
+
+<Cta
+  variant="newsletter"
+  title="Stay up to date"
+  description="Subscribe to our newsletter for the latest updates."
+/>
+
+<Cta
+  variant="contact"
+  title="Get in touch"
+  description="We'd love to hear from you. Contact us today."
+/>
+
+<Cta
+  variant="gradient"
+  title="Ready to get started?"
+  description="Start your free trial today."
+/>
+
+<Cta
+  variant="card"
+  title="Boost your productivity"
+  description="Start your free trial today."
+/>
+        </div>
+    )
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "FAQ",
+        value: "faq",
+        path: "/components/catalyst-ui/marketing/sections/FAQ.tsx",
+        source: null,
+        files: {
+            "FAQ": "/components/catalyst-ui/marketing/sections/FAQ.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+const faqs = [
+  {
+    id: '1',
+    question: "What's the best thing about Switzerland?",
+    answer: "I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat."
+  },
+  // Add more FAQs...
+];
+
+export default function FAQDemo() {
+  return (
+    <div>
+      {/* Simple variant */}
+      <FaqSection 
+        faqs={faqs} 
+        variant="simple" 
+      />
+      
+      {/* Centered variant */}
+      <FaqSection 
+        title="Frequently asked questions" 
+        subtitle="Everything you need to know about our product."
+        faqs={faqs} 
+        variant="centered"
+        primaryAction={{ text: "Contact us", url: "/contact" }}
+        secondaryAction={{ text: "Learn more", url: "/about" }}
+      />
+      
+      {/* With branded header */}
+      <FaqSection 
+        title="Support" 
+        subtitle="We're here to help"
+        faqs={faqs} 
+        variant="with-branded-header"
+      />
+    </div>
+  );
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Feature",
+        value: "feature",
+        path: "/components/catalyst-ui/marketing/sections/feature.tsx",
+        source: null,
+        files: {
+            "Feature": "/components/catalyst-ui/marketing/sections/feature.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+export default function FeatureDemo  () {
+  const sampleFeatures = [
+    {
+      icon: 'Shield',
+      title: 'Security First',
+      description: 'Built with enterprise-grade security measures to protect your data and users.'
+    },
+    {
+      icon: 'Zap',
+      title: 'Lightning Fast',
+      description: 'Optimized performance ensures your applications load quickly and run smoothly.'
+    },
+    {
+      icon: 'Users',
+      title: 'Team Collaboration',
+      description: 'Work together seamlessly with powerful collaboration and sharing features.'
+    },
+    {
+      icon: 'Globe',
+      title: 'Global Scale',
+      description: 'Deploy worldwide with our distributed infrastructure and CDN network.'
+    },
+    {
+      icon: 'BarChart3',
+      title: 'Analytics & Insights',
+      description: 'Get detailed analytics and insights to make data-driven decisions.'
+    },
+    {
+      icon: 'Settings',
+      title: 'Easy Configuration',
+      description: 'Simple setup and configuration with comprehensive documentation and support.'
+    }
+  ];
+
+  const shortFeatures = sampleFeatures.slice(0, 3);
+
+  return (
+    <div className="space-y-0">
+      {/* Grid Layout */}
+      <Feature
+        variant="grid"
+        title="Features"
+        subtitle="Everything you need to succeed"
+        description="Our comprehensive platform provides all the tools and features you need to build, deploy, and scale your applications with confidence."
+        features={sampleFeatures}
+        showCTA={true}
+        ctaText="Explore All Features"
+        ctaUrl="https://example.com"
+      />
+
+      {/* List Layout */}
+      <Feature
+        variant="list"
+        title="Why Choose Us"
+        subtitle="Built for modern development"
+        description="Discover what makes our platform the preferred choice for developers and teams worldwide."
+        features={sampleFeatures}
+        darkMode={false}
+        showCTA={true}
+        ctaText="Get Started Today"
+      />
+
+      {/* Card Layout */}
+      <Feature
+        variant="cards"
+        title="Core Features"
+        subtitle="Powerful capabilities at your fingertips"
+        description="Experience the full potential of our platform with these essential features designed for productivity."
+        features={shortFeatures}
+        centerContent={true}
+        showCTA={false}
+      />
+
+      {/* Alternating Layout */}
+      <Feature
+        variant="alternating"
+        title="Advanced Features"
+        subtitle="Take your projects to the next level"
+        description="Explore our advanced features designed for complex workflows and enterprise needs."
+        features={shortFeatures}
+        darkMode={false}
+        showCTA={true}
+        ctaText="Learn More"
+        ctaUrl="https://example.com"
+      />
+
+      {/* Dark Mode Example */}
+      <Feature
+        variant="grid"
+        title="Dark Mode"
+        subtitle="Beautiful in any theme"
+        description="Our components look great in both light and dark modes, giving you flexibility in your design."
+        features={sampleFeatures.slice(0, 4)}
+        darkMode={true}
+        showCTA={true}
+        ctaText="Try Dark Mode"
+      />
+    </div>
+  );
+};
+
+`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Footer",
+        value: "footer",
+        path: "/components/catalyst-ui/marketing/sections/footer.tsx",
+        source: null,
+        files: {
+            "Footer": "/components/catalyst-ui/marketing/sections/footer.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+
+export function FooterDemo1() {
+    return (
+<Footer variant="simple" />
+    )
+}
+export function FooterDemo2() {
+    return (
+    <Footer 
+  variant="with-newsletter"
+  newsletter={{
+    title: "Subscribe to our newsletter",
+    description: "Get the latest news and updates delivered to your inbox."
+  }}
+/>    
+    )
+}
+export function FooterDemo3() {
+    return (
+     <Footer
+  variant="multi-column"
+  sections={[
+    {
+      title: "Products",
+      links: [
+        { name: "Features", href: "#" },
+        { name: "Pricing", href: "#" },
+        { name: "API", href: "#" }
+      ]
+    },
+    {
+      title: "Company",
+      links: [
+        { name: "About", href: "#" },
+        { name: "Careers", href: "#" }
+      ]
+    }
+  ]}
+/>   
+    )
+}
+export function FooterDemo4() {
+    return (
+    <Footer
+  variant="with-cta"
+  cta={{
+    title: "Ready to get started?",
+    description: "Start your free trial today.",
+    primaryButton: {
+      text: "Get started",
+      href: "#"
+    },
+    secondaryButton: {
+      text: "Learn more",
+      href: "#"
+    }
+  }}
+/>   
+    )
+}
+`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Header",
+        value: "header",
+        path: "/components/catalyst-ui/marketing/sections/header.tsx",
+        source: null,
+        files: {
+            "Header": "/components/catalyst-ui/marketing/sections/header.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+export function Header2Demo1() {
+    return <Header variant="simple" />;
+}
+export function Header2Demo2() {
+    return (
+        <Header
+            variant="with-search"
+            search={{
+                placeholder: "Search products...",
+                action: "/search",
+            }}
+        />
+    );
+}
+export function Header2Demo3() {
+    return (
+        <Header
+            variant="dark"
+            navigation={[
+                {
+                    name: "Products",
+                    href: "#",
+                    subLinks: [
+                        { name: "All Products", href: "#" },
+                        { name: "New Arrivals", href: "#" },
+                        { name: "Best Sellers", href: "#" },
+                    ],
+                },
+                { name: "About", href: "#" },
+                { name: "Contact", href: "#" },
+            ]}
+            cta={{
+                primary: {
+                    text: "Sign up",
+                    href: "#",
+                },
+            }}
+        />
+    );
+}
+export function Header2Demo4() {
+    return (
+        <Header
+            variant="ecommerce"
+            navigation={[
+                { name: "Women", href: "#" },
+                { name: "Men", href: "#" },
+                { name: "Kids", href: "#" },
+                { name: "Sale", href: "#" },
+            ]}
+        />
+    );
+}
+export function Header2Demo5() {
+    return (
+        <Header
+            variant="with-cta"
+            cta={{
+                primary: {
+                    text: "Get started",
+                    href: "#",
+                },
+                secondary: {
+                    text: "Learn more",
+                    href: "#",
+                },
+            }}
+        />
+    );
+}
+
+`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Hero",
+        value: "hero",
+        path: "/components/catalyst-ui/marketing/sections/hero.tsx",
+        source: null,
+        files: {
+            "Hero": "/components/catalyst-ui/marketing/sections/hero.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+
+
+// Example usage component
+export default function HeroDemo666 ()  {
+  const sampleStats = [
+    { value: "10K+", label: "Active Users" },
+    { value: "99%", label: "Uptime" },
+    { value: "24/7", label: "Support" }
+  ];
+
+  const sampleTestimonial = {
+    text: "This component library has completely transformed our development workflow.",
+    author: "Sarah Johnson, Lead Developer"
+  };
+
+  return (
+    <div className="space-y-0">
+      {/* Centered Hero */}
+      <Hero
+        variant="centered"
+        title="Build amazing products with our components"
+        description="Create beautiful, responsive designs faster than ever with our comprehensive component library built on top of Tailwind CSS."
+        url="https://example.com"
+        primaryButtonText="Get Started"
+        secondaryButtonText="View Demo"
+      />
+
+      {/* Split Layout Hero */}
+      <Hero
+        variant="split"
+        title="Split layout hero section"
+        description="Perfect for showcasing your product with a visual element on the side."
+        url="https://example.com"
+        primaryButtonText="Try It Now"
+        secondaryButtonText="Learn More"
+      />
+
+      {/* Gradient Hero */}
+      <Hero
+        variant="gradient"
+        title="Beautiful gradient backgrounds"
+        description="Eye-catching gradients that make your hero section stand out from the competition."
+        url="https://example.com"
+        primaryButtonText="Explore"
+        secondaryButtonText="Documentation"
+      />
+
+      {/* Dark Hero */}
+      <Hero
+        variant="dark"
+        title="Dark mode hero section"
+        description="Perfect for modern applications that support dark themes and night modes."
+        url="https://example.com"
+        primaryButtonText="Start Building"
+        secondaryButtonText="View Examples"
+      />
+
+      {/* Hero with Stats */}
+      <Hero
+        variant="withStats"
+        title="Hero with statistics"
+        description="Showcase your achievements and build trust with potential customers."
+        url="https://example.com"
+        primaryButtonText="Join Now"
+        secondaryButtonText="See Pricing"
+        stats={sampleStats}
+        testimonial={sampleTestimonial}
+      />
+    </div>
+  );
+};
+
+`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Logo Clouds",
+        value: "logo-clouds",
+        path: "/components/catalyst-ui/marketing/sections/logoClouds.tsx",
+        source: null,
+        files: {
+            "Logo Clouds": "/components/catalyst-ui/marketing/sections/logoClouds.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+export function LogoClouds666() {
+    const logos = [
+        { name: "Company 1", logo: "/logos/company1.svg" },
+        { name: "Company 2", logo: "/logos/company2.svg" },
+        // Add more logos...
+    ];
+
+    return (
+        <div className=" flex flex-col gap-5">
+            <LogoCloud logos={logos} style="simple-grid" title="Trusted by the world's most innovative teams" />
+            <LogoCloud
+                logos={[
+                    { name: "TechCorp", logo: "/logos/techcorp.svg" },
+                    { name: "InnoSoft", logo: "/logos/innosoft.svg" },
+                    // More logos...
+                ]}
+                style="with-testimonials"
+                title="Customer Stories"
+                description="Hear from companies using our product"
+                darkMode={true}
+            />
+            <LogoCloud
+                logos={[
+                    { name: "Company A", logo: "/logos/company-a.svg" },
+                    { name: "Company B", logo: "/logos/company-b.svg" },
+                    // More logos (need at least 10 for smooth carousel)...
+                ]}
+                style="carousel"
+                title="Our Partners"
+                className="overflow-hidden"
+            />
+        </div>
+    );
+}
+`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "News Letter",
+        value: "news-letter",
+        path: "/components/catalyst-ui/marketing/sections/newsLetter.tsx",
+        source: null,
+        files: {
+            "News Letter": "/components/catalyst-ui/marketing/sections/newsLetter.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+
+export default function NewsLetterDemo() {
+  return (
+    <div>
+      {/* Default variant */}
+      <Newsletter
+        title="Subscribe to our newsletter"
+        description="Get the latest news and updates delivered to your inbox"
+      />
+
+      {/* Card variant */}
+      <Newsletter
+        title="Stay updated"
+        description="Join our mailing list to receive product updates"
+        variant="card"
+        buttonText="Join now"
+        placeholder="Your email address"
+      />
+
+      {/* Minimal variant */}
+      <Newsletter
+        title="Get updates"
+        description="No spam, just the good stuff"
+        variant="minimal"
+        buttonText="Subscribe"
+        className="bg-background"
+      />
+
+      {/* Dark variant */}
+      <Newsletter
+        title="Premium content"
+        description="Get exclusive access to our best resources"
+        variant="dark"
+        buttonText="Get access"
+        icon={<Bell className="h-5 w-5" />}
+      />
+
+      {/* Featured variant */}
+      <Newsletter
+        title="Join our community"
+        description="Be the first to know about new features and releases"
+        variant="featured"
+        buttonText="Sign up"
+        placeholder="Enter your email"
+        icon={<Send className="h-5 w-5" />}
+      />
+    </div>
+  );
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Pricing",
+        value: "pricing",
+        path: "/components/catalyst-ui/marketing/sections/pricing.tsx",
+        source: null,
+        files: {
+            "Pricing": "/components/catalyst-ui/marketing/sections/pricing.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+export function PricingUsageExamples() {
+  // Example 1: Custom Two-Tier Pricing for SaaS
+  const saasPlans: PricingPlan[] = [
+    {
+      name: 'Starter',
+      price: 29,
+      yearlyPrice: 290,
+      period: 'month',
+      description: 'Perfect for small teams getting started.',
+      features: [
+        'Up to 5 team members',
+        '10GB storage',
+        'Basic analytics',
+        'Email support',
+        'Mobile app access',
+      ],
+      buttonText: 'Start free trial',
+      icon: <Users className="h-6 w-6 text-primary" />,
+    },
+    {
+      name: 'Professional',
+      price: 99,
+      yearlyPrice: 990,
+      period: 'month',
+      description: 'Advanced features for growing businesses.',
+      features: [
+        'Up to 25 team members',
+        '100GB storage',
+        'Advanced analytics & reporting',
+        'Priority support',
+        'API access',
+        'Custom integrations',
+        'Advanced security',
+      ],
+      popular: true,
+      buttonText: 'Get started',
+      badge: 'Most Popular',
+      icon: <Building className="h-6 w-6 text-primary" />,
+    },
+  ];
+
+  // Example 2: Custom Three-Tier Pricing for E-commerce
+  const ecommercePlans: PricingPlan[] = [
+    {
+      name: 'Basic Store',
+      price: 0,
+      period: 'month',
+      description: 'Start selling with essential features.',
+      features: [
+        'Up to 10 products',
+        'Basic templates',
+        'Standard checkout',
+        'Community support',
+      ],
+      buttonText: 'Start for free',
+      icon: <Sparkles className="h-6 w-6 text-primary" />,
+    },
+    {
+      name: 'Professional',
+      price: 79,
+      yearlyPrice: 790,
+      period: 'month',
+      description: 'Everything you need to grow your business.',
+      features: [
+        'Unlimited products',
+        'Custom themes',
+        'Advanced analytics',
+        'Abandoned cart recovery',
+        'SEO tools',
+        'Priority support',
+      ],
+      popular: true,
+      buttonText: 'Start trial',
+      icon: <Zap className="h-6 w-6 text-primary" />,
+    },
+    {
+      name: 'Enterprise',
+      price: 299,
+      yearlyPrice: 2990,
+      period: 'month',
+      description: 'Advanced features for large-scale operations.',
+      features: [
+        'Everything in Professional',
+        'Multi-store management',
+        'Advanced reporting',
+        'Custom integrations',
+        'Dedicated account manager',
+        'SLA guarantee',
+      ],
+      buttonText: 'Contact sales',
+      icon: <Crown className="h-6 w-6 text-primary" />,
+    },
+  ];
+
+  // Example 3: Custom Feature Comparison
+  const designToolPlans: PricingPlan[] = [
+    {
+      name: 'Free',
+      price: 0,
+      period: 'month',
+      description: 'For individual designers',
+      buttonText: 'Get started',
+    },
+    {
+      name: 'Pro',
+      price: 15,
+      period: 'month',
+      description: 'For professional designers',
+      popular: true,
+      buttonText: 'Upgrade now',
+    },
+    {
+      name: 'Team',
+      price: 45,
+      period: 'month',
+      description: 'For design teams',
+      buttonText: 'Contact sales',
+    },
+  ];
+
+  const designToolFeatures: ComparisonFeature[] = [
+    {
+      name: 'Projects',
+      plans: { 'Free': '3', 'Pro': 'Unlimited', 'Team': 'Unlimited' }
+    },
+    {
+      name: 'Cloud storage',
+      plans: { 'Free': '2GB', 'Pro': '100GB', 'Team': '1TB' }
+    },
+    {
+      name: 'Team collaboration',
+      plans: { 'Free': false, 'Pro': false, 'Team': true }
+    },
+    {
+      name: 'Advanced export',
+      plans: { 'Free': false, 'Pro': true, 'Team': true }
+    },
+    {
+      name: 'Priority support',
+      plans: { 'Free': false, 'Pro': true, 'Team': true }
+    },
+  ];
+
+  return (
+    <div className="space-y-16">
+      {/* Example 1: SaaS Two-Tier Pricing */}
+      <div>
+        <div className="text-center mb-8">
+          <h2 className="text-2xl font-bold text-foreground mb-2">Example 1: SaaS Two-Tier Pricing</h2>
+          <p className="text-muted-foreground">Custom plans with yearly pricing toggle</p>
+        </div>
+        <PricingTwoTiers 
+          title="Choose Your Plan"
+          subtitle="Scale your business with our powerful platform"
+          plans={saasPlans}
+          showYearlyToggle={true}
+        />
+      </div>
+
+      {/* Example 2: E-commerce Three-Tier Pricing */}
+      <div>
+        <div className="text-center mb-8">
+          <h2 className="text-2xl font-bold text-foreground mb-2">Example 2: E-commerce Three-Tier Pricing</h2>
+          <p className="text-muted-foreground">Including a free tier with upgrade path</p>
+        </div>
+        <PricingThreeTiers 
+          title="Store Plans"
+          subtitle="Start free, upgrade as you grow"
+          plans={ecommercePlans}
+          showYearlyToggle={true}
+        />
+      </div>
+
+      {/* Example 3: Simple Grid without yearly toggle */}
+      <div>
+        <div className="text-center mb-8">
+          <h2 className="text-2xl font-bold text-foreground mb-2">Example 3: Simple Grid Layout</h2>
+          <p className="text-muted-foreground">Clean layout without yearly pricing</p>
+        </div>
+        <PricingSimple 
+          title="Flexible Pricing"
+          subtitle="Pay only for what you need"
+          plans={defaultSimpleGridPlans}
+        />
+      </div>
+
+      {/* Example 4: Feature Comparison Table */}
+      <div>
+        <div className="text-center mb-8">
+          <h2 className="text-2xl font-bold text-foreground mb-2">Example 4: Feature Comparison</h2>
+          <p className="text-muted-foreground">Detailed feature breakdown for informed decisions</p>
+        </div>
+        <PricingFeatureComp 
+          title="Compare Features"
+          subtitle="See what's included in each plan"
+          plans={designToolPlans}
+          features={designToolFeatures}
+        />
+      </div>
+    </div>
+  );
+}`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Stats",
+        value: "stats",
+        path: "/components/catalyst-ui/marketing/sections/stats.tsx",
+        source: null,
+        files: {
+            "Stats": "/components/catalyst-ui/marketing/sections/stats.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+
+
+export default function StatsDemo555() {
+    const defaultStats = [
+        {
+            value: "10,000+",
+            label: "Developers",
+            icon: <Users className="h-6 w-6" />,
+            change: "12%",
+            changeType: "positive",
+        },
+        {
+            value: "4.9/5",
+            label: "Average Rating",
+            icon: <BarChart2 className="h-6 w-6" />,
+        },
+        {
+            value: "99.9%",
+            label: "Uptime",
+            icon: <Clock className="h-6 w-6" />,
+        },
+        {
+            value: "50+",
+            label: "Countries",
+            icon: <Globe className="h-6 w-6" />,
+            change: "5%",
+            changeType: "positive",
+        },
+    ];
+
+    return (
+        // Example 1: Default variant
+        <div className="flex flex-col justify-center gap-5">
+            <Stats
+                title="Project Stats"
+                description="Overview of your project metrics"
+                stats={[
+                    { name: "Total Subscribers", value: "71,897", change: "12%", changeType: "increase" },
+                    { name: "Avg. Open Rate", value: "58.16%", change: "2.4%", changeType: "increase" },
+                    { name: "Avg. Click Rate", value: "24.57%", change: "4.3%", changeType: "decrease" },
+                ]}
+                primaryAction={{ text: "View all", url: "/stats" }}
+            />
+
+            <Stats
+                variant="with-icon"
+                stats={[
+                    { name: "Total Users", value: "2,543", icon: Users },
+                    { name: "Avg. Time", value: "3.2 mins", icon: Clock },
+                    { name: "Active Now", value: "142", icon: Activity },
+                ]}
+            />
+
+            <Stats
+                variant="card"
+                stats={[
+                    { name: "Revenue", value: "$405,091", change: "+4.75%", changeType: "increase" },
+                    { name: "Overdue Invoices", value: "$12,787", change: "+54.02%", changeType: "increase" },
+                    { name: "Outstanding", value: "$245,988", change: "-1.39%", changeType: "decrease" },
+                ]}
+            />
+        </div>
+    );
+}
+/** Basic usage with defaults
+<StatsSection 
+  stats={[
+    {
+      value: "10K+",
+      label: "Downloads",
+      change: "20%",
+      changeType: "positive"
+    }
+  ]}
+/>
+
+// Card variant with custom icons
+<StatsSection
+  title="Our Metrics"
+  variant="card"
+  stats={[
+    {
+      value: "99%",
+      label: "Satisfaction",
+      icon: <Heart className="h-6 w-6" />
+    }
+  ]}
+/>
+
+// Dark variant with CTA
+<StatsSection
+  title="Performance Stats"
+  variant="dark"
+  stats={statsData}
+  cta={{ text: "View details", url: "/stats" }}
+  className="my-custom-class"
+/> */
+`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+    {
+        name: "Testimonial",
+        value: "testimonial",
+        path: "/components/catalyst-ui/marketing/sections/testimonial.tsx",
+        source: null,
+        files: {
+            "Testimonial": "/components/catalyst-ui/marketing/sections/testimonial.tsx",
+        },
+        premium: true,
+        category: "Marketing: Sections",
+        tags: ["sections", "marketing"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        usage: `
+
+
+export default function TestimonialsPageDemo() {
+    const testimonials = [
+        {
+            name: "Sarah Johnson",
+            role: "Marketing Director",
+            image: "/images/avatar1.jpg",
+            content: "This product has completely transformed our workflow. The team is more productive and we're seeing better results than ever before.",
+            rating: 5,
+        },
+        {
+            name: "Michael Chen",
+            role: "CTO",
+            image: "/images/avatar2.jpg",
+            content: "Incredible service and support. The implementation was seamless and our engineers love working with the platform.",
+            rating: 4,
+        },
+    ];
+
+    return (
+        <Testimonials
+            testimonials={testimonials}
+            style="with-rating"
+            title="Trusted by developers worldwide"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+            primaryButtonText="Get started"
+            secondaryButtonText="Learn more"
+            primaryButtonUrl="/signup"
+            secondaryButtonUrl="/about"
+        />
+    );
+}
+`,
+        usagePath: null,
+        desc: null,
+        customize: null
+    },
+];
+const demoComponent = [
+    {
+        name: "Auth System",
+        value: "auth-system",
+        importPath: "~/components/catalyst-ui/components/utility/auth-system",
+        multiImport: null,
+        basicusage: null,
+        path: "/components/catalyst-ui/components/utility/auth-system.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/components/utility/auth-system.tsx",
+        usage: null,
+        files: {
+            "team-large-grid": "/components/catalyst-ui/marketing/pages/team-large-grid.tsx",
+        },
+        premium: true,
+        category: "Core: Components",
+        tags: ["ui", "components", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible"],
+        dependencies: ["lucide-react"],
+        props: {
+            "Tabs": [
+                { name: "className", type: "string", default: "null" },
+                { name: "defaultValue", type: "string", default: "null" },
+                { name: "value", type: "string", default: "null" },
+                { name: "onValueChange", type: "(value: string) => void", default: "null" },
+            ],
+            "TabsList": [
+                { name: "className", type: "string", default: "null" },
+                { name: "variant", type: "default | underline", default: "default" },
+            ],
+            "TabsTrigger": [
+                { name: "className", type: "string", default: "null" },
+                { name: "variant", type: "default | underline", default: "default" },
+                { name: "value", type: "string", default: "null" },
+                { name: "disabled", type: "boolean", default: "false" },
+            ],
+            "TabsContent": [
+                { name: "className", type: "string", default: "null" },
+                { name: "value", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+];