### Install Dependencies and Start Development Server (Bash)

Source: https://context7.com/phoenixcoded/saasable-uikit-docs/llms.txt

Installs project dependencies using npm and starts the local development server for a Next.js project. Requires Node.js and npm to be installed.

```bash
# Prerequisites: Node.js 24.x.x, npm 11.x.x

# Navigate to project root and install packages
npm install

# Start local development server
npm run dev
```

--------------------------------

### Onboard Component Usage (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/onboard.md

Example of how to use the Onboard component in a TypeScript application. It demonstrates passing props for heading, caption, and buttons.

```typescript
import Onboard from "../blocks/Onboard";

// Example usage within a React component
<Onboard
  heading="Welcome to Our Platform"
  caption="Get started by exploring the features we offer and sign up for early access."
  primaryBtn={{
    children: 'Get Started',
    onClick: () => alert('Primary Button Clicked!')
  }}
  secondaryBtn={{
    children: 'Learn More',
    onClick: () => alert('Secondary Button Clicked!')
  }}
/>;
```

--------------------------------

### BlogDetails Page Setup (TypeScript/React)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/blogdetails.md

This snippet sets up the main BlogDetails page component using TypeScript and React. It imports the BlogDetail block and a ContainerWrapper component to structure the page content. The primary function is to render the BlogDetail component within a container.

```tsx
// @project
import BlogDetail from '@/blocks/BlogDetails';
import ContainerWrapper from '@/components/ContainerWrapper';

/***************************  SECTIONS - BLOG DETAILS  ***************************/

export default function BlogDetails() {
  return (
    <>
      {/* other setion  */}

      {/* Blog Details   */}

      <ContainerWrapper>
        <BlogDetail />
      </ContainerWrapper>
    </>
  );
}

```

--------------------------------

### Faq6 Component Usage Example (React)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/faq/faq6.md

Demonstrates how to use the Faq6 component in a React application. It shows the structure for passing props like heading, caption, faqList, and getInTouch. The component relies on various UI and animation libraries for its functionality.

```tsx
import Faq6 from 'src/blocks/faq/Faq6';

const App = () => {
  const faqData = {
    heading: "Frequently Asked Questions",
    caption: "Find answers to common questions and get more information here.",
    defaultExpanded: "panel0",
    faqList: [
      {
        question: "What are your operating hours?",
        answer: "We are open from 9 AM to 5 PM, Monday through Friday.",
        category: "General"
      },
      {
        question: "How can I reset my password?",
        answer: "You can reset your password by clicking the 'Forgot Password' link on the login page.",
        category: "Account"
      }
    ],
    getInTouch: {
      title: "Need Further Assistance?",
      description: "If you have more questions or need additional help, don't hesitate to contact us.",
      link: { href: "/contact", children: "Contact Us" }
    },
    categories: ["General", "Account", "Billing"],
    activeCategory: "General"
  };

  return (
    <div>
      <Faq6 {...faqData} />
    </div>
  );
};

export default App;
```

--------------------------------

### TopOffer2 Component Usage (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/topoffer/topoffer2.md

Demonstrates the usage of the TopOffer2 component in a React application. It shows how to import and render the component, passing various props to customize its appearance and behavior. The example includes defining event handlers and button properties.

```typescript
import TopOffer2 from "src/blocks/top-offer/TopOffer2";

// Example usage within a React component
const MyComponent = () => {
  const handleSubscribe = () => {
    console.log("Subscribed!");
  };

  const handleClose = () => {
    console.log("Alert closed");
  };

  return (
    <TopOffer2
      heading="Join Our Newsletter"
      caption="Stay updated with the latest news and offers."
      primaryBtn={{ text: 'Subscribe', onClick: handleSubscribe, variant: 'contained' }}
      icon={{ name: 'email' }} // Assuming 'email' is a valid icon name
      handleClick={handleClose}
    />
  );
};

export default MyComponent;

```

--------------------------------

### Hero4 Component Usage Example (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/hero/hero4.md

Demonstrates how to use the Hero4 component in a React application. It shows the structure for passing props like headline, caption, images, and a list of features. The example highlights the optional nature of the chip and the expected format for image sources and list data.

```typescript
import Hero4 from 'src/blocks/hero/Hero4';

// Example usage:
<Hero4 
  chip={{ label: "Learn More", link: { href: "/more-info" } }}
  headLine="Explore Our Latest Innovations"
  captionLine="Discover groundbreaking technology and design."
  image1={{ light: 'path-to-image1-light.svg', dark: 'path-to-image1-dark.svg' }}
  image2="path-to-image2.svg"
  listData={[
    { icon: { name: "icon-design" }, title: "Design Excellence", description: "Innovative and user-centric designs." },
    { icon: { name: "icon-technology" }, title: "Advanced Technology", description: "Cutting-edge technology for better performance." }
  ]}
/>;
```

--------------------------------

### TopOffer5 Component Usage Example (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/topoffer/topoffer5.md

This snippet demonstrates how to use the TopOffer5 component in a React application. It shows the necessary props for configuring the heading, caption, background image, primary button, and an optional icon. The component is defined in `src/blocks/top-offer/TopOffer5.tsx` and its usage is shown in `src/app/blocks/top-offer/top-offer5/page.tsx`.

```typescript
import TopOffer5 from '@/blocks/top-offer/TopOffer5';

const Page = () => {
  return (
    <TopOffer5
      heading="Exclusive Offer"
      caption="Sign up now to receive updates and special offers!"
      bgImage={{ src: '/images/offer-bg.jpg', alt: 'Background Image' }}
      primaryBtn={{ label: 'Subscribe', onClick: () => console.log('Subscribed') }}
      icon="star"
      handleClick={() => console.log('Alert closed')}
    />
  );
};

export default Page;
```

--------------------------------

### Integration4 Component Usage - TypeScript

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/integration/integration4.md

Example of how to use the Integration4 component in a page. It demonstrates passing props for headlines, captions, buttons, and marquee data. This file defines the specific content and configuration for the integration section.

```typescript
import Integration4 from '@/blocks/integration/Integration4';
import { ButtonProps, MarqueesDataProps } from '@/blocks/integration/types';

const Integration4Page = () => {
  const marqueeData: MarqueesDataProps[] = [
    {
      marqueeProps: { speed: 50 },
      data: [
        { image: '/path/to/avatar1.png' },
        { image: '/path/to/avatar2.png' },
        { image: '/path/to/avatar3.png' },
        // ... more avatar data
      ],
    },
  ];

  const primaryButtonProps: ButtonProps = {
    variant: 'contained',
    size: 'large',
    color: 'primary',
    onClick: () => alert('Button Clicked'),
    children: 'Get Started',
  };

  return (
    <Integration4
      marquees={marqueeData}
      headLine="Transform Your Business"
      captionLine="Innovative solutions to elevate your company’s performance."
      primaryBtn={primaryButtonProps}
    />
  );
};

export default Integration4Page;

```

--------------------------------

### Testimonial3 Component Usage (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/testimonial/testimonial3.md

Example of how to use the Testimonial3 component in a React application. This snippet demonstrates passing props such as heading, caption, and an array of testimonials, each with review, ratings, and profile details. It utilizes TypeScript for type safety.

```typescript
import Testimonial3 from "@/blocks/testimonial/Testimonial3";

const testimonialData = [
  {
    review: "The user interface is intuitive, making it easy for our team to adapt and maximize productivity.",
    ratings: 4,
    profile: {
      avatar: "/path-to/avatar2.png",
      name: "Sydnie",
      role: "Direct Optimization Executive"
    }
  },
  // ... more testimonials
];

function App() {
  return (
    <Testimonial3 
      heading="What Our Clients Say"
      caption="Here’s how our customers feel about our service"
      testimonials={testimonialData}
    />
  );
}
```

--------------------------------

### Process7 Component Usage Example (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/process/process7.md

Demonstrates how to use the Process7 component in a React application. It requires importing the component and passing the necessary props for heading, caption, images, and an array of process cards. The 'cards' prop expects an array of objects, each defining a step with a title, description, and an optional icon.

```typescript
import Process7 from 'src/blocks/process/Process7';

// Example usage within a React component
<Process7 
  heading="Our Process"
  caption="A simple, step-by-step guide to how we work."
  image1={{ light: 'path-to-image-light1.svg', dark: 'path-to-image1-dark.svg' }}
  image2={{ light: 'path-to-image2-light.svg', dark: 'path-to-image2-dark.svg' }}
  cards={[
    { title: 'Automated Scaling Process', description: 'Ensures optimal performance without manual intervention.', icon: 'tabler-artboard' },
    { title: 'Data Synchronization', description: 'Keeps all data consistent across platforms.', icon: 'tabler-sync' },
    { title: 'User Feedback Loop', description: 'Incorporates user input for continuous improvement.', icon: 'tabler-message-report' }
  ]} 
/>;
```

--------------------------------

### Metrics3 Component Usage (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/metrics/metrics3.md

Example of how to use the Metrics3 component in a TypeScript React application. It demonstrates passing various props like heading, caption, explore button configuration, and an array of block details. Ensure the necessary types (BgImageProps) are imported.

```typescript
import Metrics3 from 'src/blocks/metrics/Metrics3';

// Example usage:
<Metrics3
  bgImage={{ src: '/images/background.jpg' }}
  heading="Tailored for Your Process"
  caption="Key metrics and milestones"
  exploreBtn={{
    text: "Learn More",
    onClick: () => console.log('Explore clicked!')
  }}
  blockDetail={[
    { counter: 120, caption: "Projects", defaultUnit: "K" },
    { counter: 50, caption: "Clients" }
  ]}
/>;
```

--------------------------------

### Display Blog Component with TypeScript

Source: https://context7.com/phoenixcoded/saasable-uikit-docs/llms.txt

Shows how to use the Blog1 component to display a blog section, including a heading, caption, and a slider of blog cards. Each blog card requires an image, caption, and a link.

```typescript
// Component path: src/blocks/blog/Blog1.tsx
// Usage path: src/app/blocks/blog/blog1/page.tsx

import Blog1 from '@/blocks/blog/Blog1';

const blogData = {
  heading: "Latest Articles",
  caption: "Stay updated with our latest insights and news",
  blogs: [
    {
      image: "/assets/images/blog/post1.jpg",
      caption: "10 Tips for Better Productivity",
      link: { href: "/blog/productivity-tips" }
    },
    {
      image: "/assets/images/blog/post2.jpg",
      caption: "The Future of Remote Work",
      link: { href: "/blog/remote-work-future" }
    },
    {
      image: "/assets/images/blog/post3.jpg",
      caption: "Building Scalable Applications",
      link: { href: "/blog/scalable-apps" }
    }
  ]
};

export default function BlogPage() {
  return <Blog1 {...blogData} />;
}
```

--------------------------------

### Feature16 Component Usage (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/feature/feature16.md

Example of how to use the Feature16 component in a React application. It demonstrates passing props for the heading, caption, action button, and an array of feature cards. The component is defined in `src/blocks/feature/Feature16.tsx` and used in `src/app/blocks/feature/feature16/page.tsx`.

```typescript
import Feature16 from 'src/blocks/feature/Feature16';

// Example usage within a React component:
<Feature16 
  heading="Our Innovative Features"
  caption="Explore the features that make our product stand out."
  actionBtn={{ variant: 'contained', color: 'primary', children: 'Get Started' }}
  cards={[
    { icon: 'icon-name1', title: 'Feature 1', description: 'Description of Feature 1' },
    { icon: 'icon-name2', title: 'Feature 2', description: 'Description of Feature 2' },
    // ... more cards
  ]}
/>;
```

--------------------------------

### ComingSoon Component Usage (React/TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/comingsoon.md

Demonstrates how to use the ComingSoon component in a React application. It shows the required props like description and primaryBtn, and the optional chip prop. The component is designed for full-screen display with a decorative background.

```typescript
import ComingSoon from "src/blocks/ComingSoon";

// Example usage:
<ComingSoon
  chip={{ chipCaption: 'New Feature' }}
  description="We are working on something amazing. Stay tuned for updates!"
  primaryBtn={{ children: 'Subscribe', onClick: () => alert('Subscribed!') }}
/>
```

--------------------------------

### Cookie1 Component Usage (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/cookie/cookie1.md

Example of how to use the Cookie1 component in a React application. It demonstrates passing props for the heading, primary button, secondary button, and cookie policy details. Ensure ButtonProps and LinkProps are correctly defined and imported.

```tsx
import Cookie1 from 'src/blocks/cookie/Cookie1';
import { ButtonProps } from 'src/types/button';
import { LinkProps } from 'src/types/link';

const App = () => {
  const primaryButtonProps: ButtonProps = {
    variant: 'contained',
    color: 'primary',
    onClick: () => console.log('Primary button clicked'),
    children: 'Accept'
  };

  const secondaryButtonProps: ButtonProps = {
    variant: 'outlined',
    color: 'secondary',
    onClick: () => console.log('Secondary button clicked'),
    children: 'Learn More'
  };

  const cookieDetails = {
    caption: "This site uses cookies to improve your experience.",
    link: {
      href: "/privacy-policy",
      children: "Learn more"
    } as LinkProps
  };

  return (
    <Cookie1
      heading="We use cookies to enhance your experience"
      primaryBtn={primaryButtonProps}
      secondaryBtn={secondaryButtonProps}
      cookie={cookieDetails}
    />
  );
};

export default App;
```

--------------------------------

### Login Component Usage (TypeScript)

Source: https://context7.com/phoenixcoded/saasable-uikit-docs/llms.txt

Demonstrates how to import and use the Login1 component, a two-column layout with social/email authentication and a testimonial slider. It requires specific data structure for headings, captions, testimonials, and an image.

```typescript
// Component path: src/blocks/auth/Login/1.tsx
// Usage path: src/app/blocks/auth/login/1/page.tsx

import Login1 from '@/blocks/auth/Login/1';

const loginData = {
  heading: "Welcome Back",
  caption: "Sign in to continue to your account",
  testimonials: [
    {
      review: "Best platform I've ever used for managing my business!",
      ratings: 5,
      profile: {
        name: "Alex Johnson",
        title: "Entrepreneur",
        image: "/assets/images/avatars/alex.jpg"
      }
    }
  ],
  image: "/assets/images/auth/login-illustration.svg"
};

export default function LoginPage() {
  return <Login1 {...loginData} />;
}
```

--------------------------------

### SEO Metadata Configuration (TypeScript)

Source: https://context7.com/phoenixcoded/saasable-uikit-docs/llms.txt

Explains how to configure SEO metadata centrally using the Next.js Metadata API and apply it to individual pages. It includes defining common metadata, brand information, and page-specific overrides.

```typescript
// src/metadata.ts - Central metadata configuration
import branding from '@/branding.json';

const title = `${branding.brandName} ${branding.title}`;
const description = `The multipurpose SaaS UI Kit built with React and Material UI...`;

const ogCommonMetadata = {
  locale: 'en_US',
  type: 'website',
  siteName: `${branding.brandName}`,
  images: '/assets/images/metadata/og.png'
};

export const mainMetadata = {
  title: {
    template: `%s | ${title}`,
    default: title
  },
  description,
  applicationName: title,
  keywords: ['SaaS', `${branding.brandName}`, 'Software as a Service'],
  creator: `${branding.company.name}`,
  metadataBase: new URL(process.env.NEXT_PUBLIC_METADATA_BASE || 'http://localhost:3000'),
  alternates: { canonical: '/' },
  openGraph: { title, description, url: '/', ...ogCommonMetadata }
};

export const SEO_CONTENT = {
  about: { title: 'About', description: 'About page description' },
  pricing: { title: 'Pricing', description: 'Pricing plans' }
};

// src/app/sections/about/page.tsx - Page-level metadata
import { Metadata } from 'next';
import { PAGE_PATH } from '@/routes/Path';
import { SEO_CONTENT } from '@/utils/constant';

export const metadata: Metadata = {
  ...SEO_CONTENT.about,
  openGraph: { ...SEO_CONTENT.about, url: PAGE_PATH.about }
};

export default function AboutPage() {
  return <About />;
}
```

--------------------------------

### Email Subscription API Call in Coming Soon Page (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/mailerlite.md

Example of an asynchronous submit handler in TypeScript for the 'coming soon' page, which makes a POST request to the '/api/subscribe' endpoint with the provided email using axios.

```typescript
const submitHandler = async (e: SyntheticEvent<HTMLFormElement>) => {
    e.preventDefault();

    try {
      const response = await axios.post('/api/subscribe', { email });
      ...
    } catch (error) {
      ...
    }
  };
...
```

--------------------------------

### Theme Configuration for SaasAble (TypeScript)

Source: https://context7.com/phoenixcoded/saasable-uikit-docs/llms.txt

Sets up the default theme, mode (light/dark/system), direction (LTR/RTL), and font families for the SaasAble UI kit. This configuration is centralized for easy customization.

```typescript
// src/config.ts
import { Archivo, Figtree, Roboto, Urbanist, Space_Grotesk, DM_Sans, Plus_Jakarta_Sans, Manrope, Inter, Syne, Heebo } from 'next/font/google';
import localFont from 'next/font/local';
import { ConfigStates } from '@/types/config';

export enum Themes {
  THEME_DEFAULT = 'default',
  THEME_CRM = 'crm',
  THEME_AI = 'ai',
  THEME_CRYPTO = 'crypto',
  THEME_HOSTING = 'hosting',
  THEME_PMS = 'pms',
  THEME_HRM = 'hrm',
  THEME_PLUGIN = 'plugin',
  THEME_LMS = 'lms'
}

export enum ThemeMode {
  LIGHT = 'light',
  DARK = 'dark',
  SYSTEM = 'system'
}

export enum ThemeDirection {
  LTR = 'ltr',
  RTL = 'rtl'
}

export const CSS_VAR_PREFIX = '';
export const DEFAULT_THEME_MODE: ThemeMode = ThemeMode.SYSTEM;

const config: ConfigStates = {
  currentTheme: Themes.THEME_DEFAULT,
  themeDirection: ThemeDirection.LTR
};

export default config;

// Font family exports
const fontArchivo = Archivo({ subsets: ['latin'], weight: ['400', '500', '600', '700'] });
const fontFigtree = Figtree({ subsets: ['latin'], weight: ['400', '500', '600', '700'] });

export const FONT_ARCHIVO: string = fontArchivo.style.fontFamily;
export const FONT_FIGTREE: string = fontFigtree.style.fontFamily;
```

--------------------------------

### Configure Google Analytics ID in .env

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/analytics.md

This snippet shows how to configure the Google Analytics ID within the .env file. You need to replace the empty value with your actual Google Analytics tag ID. This setting is crucial for enabling analytics tracking in your SaasAble application.

```properties
NEXT_PUBLIC_ANALYTICS_ID=
```

--------------------------------

### Footer Component Integration (TypeScript)

Source: https://context7.com/phoenixcoded/saasable-uikit-docs/llms.txt

Shows how to import and integrate one of the seven available footer variants into a layout file. This ensures consistent page footers across the application. It also includes ThemeCustomization and ChildrenProps.

```typescript
// Import footer variant in layout.tsx
import { Footer3 } from '@/blocks/footer';
import ThemeCustomization from './theme';
import { ChildrenProps } from '@/types/root';

export default function AILayout({ children }: ChildrenProps) {
  return (
    <ThemeCustomization>
      <>
        {/* Main content */}
        {children}

        {/* Footer section - choose from Footer1-Footer7 */}
        <Footer3 />
      </>
    </ThemeCustomization>
  );
}
```

--------------------------------

### Display Pricing Plans with Animated Cards (TypeScript)

Source: https://context7.com/phoenixcoded/saasable-uikit-docs/llms.txt

This component displays a responsive pricing section with animated cards. It takes an object containing heading, caption, default unit, and an array of plans, where each plan includes title, price, features, and a description. It's implemented in TypeScript and intended for use in a React application.

```typescript
// Component path: src/blocks/pricing/Pricing1.tsx
// Usage path: src/app/blocks/pricing/pricing1/page.tsx

import Pricing1 from '@/blocks/pricing/Pricing1';

const pricingData = {
  heading: "Our Pricing Plans",
  caption: "Choose the plan that's right for you.",
  defaultUnit: "per month",
  plans: [
    {
      title: "Basic Plan",
      price: "29",
      features: [
        "Up to 5 users",
        "10GB storage",
        "Email support",
        "Basic analytics"
      ],
      description: "Perfect for small teams getting started"
    },
    {
      title: "Pro Plan",
      price: "79",
      features: [
        "Up to 25 users",
        "100GB storage",
        "Priority support",
        "Advanced analytics",
        "Custom integrations"
      ],
      description: "Best for growing businesses"
    },
    {
      title: "Enterprise",
      price: "199",
      features: [
        "Unlimited users",
        "Unlimited storage",
        "24/7 dedicated support",
        "Custom solutions"
      ],
      description: "For large organizations"
    }
  ]
};

export default function PricingPage() {
  return <Pricing1 {...pricingData} />;
}
```

--------------------------------

### Display Metrics Component with TypeScript

Source: https://context7.com/phoenixcoded/saasable-uikit-docs/llms.txt

Demonstrates how to implement the Metrics1 component, which showcases a metrics section with a background image, heading, caption, and animated counter blocks. Each block needs a counter value and a caption.

```typescript
// Component path: src/blocks/metrics/Metrics1.tsx
// Usage path: src/app/blocks/metrics/metrics1/page.tsx

import Metrics1 from '@/blocks/metrics/Metrics1';

const metricsData = {
  heading: "Our Key Metrics",
  caption: "Here are some of our key achievements.",
  bgImage: "/assets/images/metrics-background.jpg",
  blockDetail: [
    { counter: 120, caption: "Happy Clients", defaultUnit: "+" },
    { counter: 500, caption: "Projects Completed", defaultUnit: "+" },
    { counter: 15, caption: "Years Experience", defaultUnit: "" },
    { counter: 99, caption: "Success Rate", defaultUnit: "%" }
  ]
};

export default function MetricsPage() {
  return <Metrics1 {...metricsData} />;
}
```

--------------------------------

### Process8 Component Usage (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/process/process8.md

Example of how to use the Process8 component in a React application. It demonstrates passing props such as heading, caption, image details, and an array of process cards, each with its own title, description, and icon. This snippet is intended for integration within the application's block structure.

```typescript
import Process8 from "src/blocks/process/Process8";

// Example usage within a React component
<Process8 
  heading="Our 3-Step Process"
  caption="A simple, step-by-step guide to how we work."
  image={{ src: '/assets/process.png', alt: 'Illustration of the process' }}
  cards={[
    {
      title: 'Automated Scaling Process',
      description: 'Ensures optimal performance without manual intervention.',
      icon: 'tabler-artboard'
    },
    // ... more cards
  ]}
/>
```

--------------------------------

### Metrics4 Component Usage (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/metrics/metrics4.md

Example of how to use the Metrics4 component in a TypeScript application. It demonstrates passing various props like heading, caption, exploreBtn, and blockDetail to configure the component's content and behavior. The blockDetail prop expects an array of objects, each containing a counter and a caption.

```typescript
import Metrics4 from 'src/blocks/metrics/Metrics';

// Example usage within a React component
<Metrics4
  heading="Our Achievements"
  caption="Key metrics and milestones"
  exploreBtn={{
    text: "Learn More",
    onClick: () => console.log("Explore button clicked!")
  }}
  blockDetail={[
    { counter: 120, caption: "Projects", defaultUnit: "K" },
    { counter: 50, caption: "Clients" },
    { counter: 1000, caption: "Users", defaultUnit: "M" }
  ]}
/>;
```

--------------------------------

### Navbar Component Usage (TypeScript)

Source: https://context7.com/phoenixcoded/saasable-uikit-docs/llms.txt

Illustrates how to use the Navbar1 component, a responsive navigation bar built with MUI AppBar and Toolbar. It can be rendered with fixed or static positioning and accepts children for custom content.

```typescript
// Component path: src/blocks/navbar/Navbar1.tsx
// Usage path: src/app/blocks/navbar/navbar1/page.tsx

import Navbar1 from '@/blocks/navbar/Navbar1';
import NavbarContent1 from '@/blocks/navbar/NavbarContent1';

// Basic usage with fixed position
<Navbar1 isFixed={true}>
  <NavbarContent1 />
</Navbar1>

// Static position navbar
<Navbar1 isFixed={false}>
  <NavbarContent1 />
</Navbar1>

// With additional props
<Navbar1
  isFixed={true}
  id="main-navbar"
  className="custom-navbar"
  sx={{ backgroundColor: 'transparent' }}
>
  <NavbarContent1 />
</Navbar1>
```

--------------------------------

### Feature14 Component Usage (TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/feature/feature14.md

Demonstrates how to use the Feature14 component in a React application with TypeScript. It shows the structure of the props required to configure the heading, image cards, action button, and feature cards. This example assumes necessary types like ButtonProps and FeatureCardProps are defined elsewhere.

```typescript
import Feature14 from 'src/blocks/feature/Feature14';
import { ButtonProps } from 'src/types/button';
import { FeatureCardProps } from 'src/types/featureCard';

// Example props for the Feature14 component
const feature14Props = {
  heading: 'Explore Our Features',
  title: 'Feature Title 1',
  description: 'This is a detailed description of the first feature.',
  title2: 'Feature Title 2',
  description2: 'This is a detailed description of the second feature.',
  actionBtn: {
    variant: 'contained' as const,
    color: 'primary' as const,
    children: 'Learn More'
  } as ButtonProps,
  cards: [
    { icon: 'icon-name1', title: 'Feature 1', description: 'Description of Feature 1' } as FeatureCardProps,
    { icon: 'icon-name2', title: 'Feature 2', description: 'Description of Feature 2' } as FeatureCardProps,
  ],
  image1: 'path-to-image1.svg',
  image2: {
    light: 'path-to-image1-light.svg',
    dark: 'path-to-image1-dark.svg'
  }
};

// Usage in a React component
function MyFeatureSection() {
  return (
    <Feature14 {...feature14Props} />
  );
}
```

--------------------------------

### Branding Configuration for SaasAble (JSON)

Source: https://context7.com/phoenixcoded/saasable-uikit-docs/llms.txt

Centralizes all branding elements, including brand name, company information, social links, and logo configurations, in a single JSON file for easy customization. This allows for quick updates to the application's branding.

```json
// src/branding.json
{
  "brandName": "SaasAble",
  "title": "React Multipurpose UI Kit and Dashboard Template",
  "company": {
    "name": "Phoenixcoded",
    "url": "https://phoenixcoded.net",
    "socialLink": {
      "linkedin": "https://in.linkedin.com/company/phoenixcoded",
      "instagram": "#",
      "facebook": "https://www.facebook.com/Phoenixcoded/",
      "youtube": "https://www.youtube.com/@Phoenixcoded",
      "github": "https://github.com/phoenixcoded",
      "dribble": "https://dribbble.com/Phoenixcoded",
      "discord": "https://discord.com/invite/AfJqqYeG",
      "support": "https://support.phoenixcoded.net"
    }
  },
  "logo": {
    "main": "",
    "logoIcon": "",
    "logoFab": "",
    "logoWatermark": ""
  }
}
```

--------------------------------

### Hero9 Component Usage (React/TypeScript)

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/components/hero/hero9.md

Demonstrates the usage of the Hero9 component in a React application using TypeScript. It shows how to import and configure the component with various props like chip, headline, caption, buttons, images, and a list of data. This example assumes the necessary component and prop types are available.

```tsx
import Hero9 from 'src/blocks/hero/Hero9';
import { ChipProps } from 'src/types/common';
import { ButtonProps } from 'src/types/common';
import { ImageCommonProps } from 'src/types/common';
import { ListDataProps } from 'src/types/common';

const hero9Props = {
  chip: { label: 'New Feature' } as ChipProps,
  headLine: 'Discover Our Latest Innovations',
  captionLine: 'Explore the cutting-edge features that are redefining the industry.',
  primaryBtn: { variant: 'contained', color: 'primary', children: 'Get Started' } as ButtonProps,
  image: 'path-to-image.svg' as ImageCommonProps | string,
  listData: [
    { icon: 'tabler-heart', title: 'Loved by Users' } as ListDataProps,
    { icon: 'tabler-star', title: 'Highly Rated' } as ListDataProps
  ]
};

function App() {
  return (
    <div>
      <Hero9 {...hero9Props} />
    </div>
  );
}

export default App;
```

--------------------------------

### Configure Branding with branding.json

Source: https://github.com/phoenixcoded/saasable-uikit-docs/blob/main/development/branding.md

This JSON file allows centralized management of all branding elements for your SaaS product. Replace the default values with your company's name, URL, social media links, and logo paths to customize your application's appearance.

```json
{
  "brandName": "SaasAble",
  "title": "React Multipurpose UI Kit and Dashboard Template",
  "company": {
    "name": "Phoenixcoded",
    "url": "https://phoenixcoded.net",
    "socialLink": {
      "linkedin": "https://in.linkedin.com/company/phoenixcoded",
      "instagram": "#",
      "facebook": "https://www.facebook.com/Phoenixcoded/",
      "youtube": "https://www.youtube.com/@Phoenixcoded",
      "github": "https://github.com/phoenixcoded",
      "dribble": "https://dribbble.com/Phoenixcoded",
      "discord": "https://discord.com/invite/AfJqqYeG",
      "support": "https://support.phoenixcoded.net"
    }
  },
  "logo": {
    "main": "",
    "logoIcon": "",
    "logoFab": "",
    "logoWatermark": ""
  }
}
```